target both selected player and 'view' from querystring to iframe

[skavan]

MA is great - but while we patiently wait for HA native cards, I am using an embedded iframe viewer. It works well -- but with just a few tweaks, would be awesome.

Let's start with my workflow.
This is a snippet from a wall mounted tablet dashboard.

When I click on the relevant button, I navigate to a url: /my_music_dash?mode=deck or /my_music_dash?mode=porch
Inside that dashboard, I decode the querystring and construct an iframe url:
http://mass.local:8095/#/home?player=deck ma player or
http://mass.local:8095/#/home?player=porch ma player

This all works:

However, I also have some logic in my /my_music_dash that checks the status of the selected player.
If it's "playing", I would like to keep the view above (although even better if I could have the option to see the queue rather than the current track.)
But if it's idle (i.e. not playing), I want to default to this view, because my most likely action is to select a playlist - and going to the now playing when nothing is playing is not logical!

So, the ask is to:

expand the existing support for http://mass.local:8095/#/home?player=deck ma player to support 'views'. i.e. http://mass.local:8095/#/playlists?player=deck ma player

The idea of supporting the above feature extends the usability of the embedded iframe MA instance. A lot.
It allows more custom integration into homeassistant dashboards.

One day, if a querystring param could also hide the player and the view menu bar, not sure I would ever need native HA cards!

[skavan]

and if its helpful for others, here's the yaml dashboard that uses config-template-card to do the heretofore, impossible (pass values to a dashboard)...also deals with PITA logic to get the iframe to fill all available vertical height responsively...

kiosk_mode:
  user_settings:
    - users:
        - Porch
      kiosk: true
views:
  - title: Home
    type: panel
    cards:
      - type: custom:layout-card
        layout_type: custom:grid-layout
        layout:
          grid-template-areas: |
            "back player"
            "ma ma"
          grid-template-columns: 1fr
          grid-template-rows: 60px 1fr 10px
          margin: 0
          card_margin: 0
          height: 100%
        style:
          margin: 0px;
        cards:
          # the magic of config-template-card. parse the query string. select the players from a static json template sensor 
          # use that config to set everything and query the targeted media player for its state.
          # I have some places where ma player (sonos) is feeding an amp, so I have a seperate device (pv_media_player_id) for power and volume.
          # in most places, they are both set to the same MA media_player
          - type: custom:config-template-card
            variables: &myvars
              config: >
                var mode = new Proxy(new URLSearchParams(window.location.search), {get: (searchParams, prop) => searchParams.get(prop)})?.mode;
                var configs = JSON.parse(states['sensor.media_player_manager'].attributes.configs);
                configs[mode && configs.hasOwnProperty(mode) ? mode : "porch"];
              source_name: |
                (pv_media_player_id, media_player_id) => {
                  const powerSource = states[pv_media_player_id]?.attributes?.source || states[pv_media_player_id]?.attributes?.app_name || "music";
                  //  const mediaSource = states[media_player_id]?.attributes?.source || states[media_player_id]?.attributes?.media_playlist || "standby MS";
                  const mediaState = states[pv_media_player_id]?.state || "unknown";
                  // Define the displayMode constant based on the given logic
                  // const displayMode = powerSource == 'TV' ? 'playlists' : (mediaState !== "playing" ? 'playlists2' : 'now playing');
                  
                  if (pv_media_player_id == media_player_id) {
                    return powerSource
                  } else {
                    const combinedSource = powerSource + ' - ' + mediaState;
                    return combinedSource;
                  }
                }
              base_url: |
                (pv_media_player_id, media_player_id, querystring) => {
                  const powerSource = states[pv_media_player_id]?.attributes?.source || states[pv_media_player_id]?.attributes?.app_name || "standby";
                  const mediaState = states[media_player_id]?.state || "unknown";

                  // Determine the URL based on the displayMode logic
                  const displayMode = powerSource === 'TV' ? 'playlists' : (mediaState !== "playing" ? 'playlists' : 'now playing');
                  // this is what I want!!! const basePath2 = `https://xxxxxxxxxxx/#${displayMode === 'playlists' ? '/playlists' : ''}`;
                  const basePath = `https://xxxxxxxxxxxxxx/#`;
                  // Append the querystring if provided
                  return querystring ? `${basePath}${querystring}` : basePath;
                }
              
            entities:
              - sensor.media_player_manager
            card:
              !include /config/yaml/components/universal-remote-header.yaml    
          - type: custom:mod-card
            view_layout:
              grid-area: ma
            card_mod:
              style: 
                config-template-card: 
                  $: |
                    #card {
                      height: 100%!important;
                    }
                .: |
                  ha-card {
                    height: 100%!important;
                  }
                
            card:
              type: custom:config-template-card
              variables: *myvars
                
              entities:
                - sensor.media_player_manager
                - "${vars['config'].pv_media_player_id}"
              view_layout:
                grid-area: ma
              style:
                height: 100%
              card:
                type: iframe
                url: "${base_url(config.pv_media_player_id, config.media_player_id, config.querystring)}"
                style:
                  height: 100%
                  
                card_mod:
                  style: |
                    div#root {
                      padding: 0px!important;
                    }
                    div#root iframe  {
                      border-radius: var(--card-border-radius, 12px);
                      border: 1px solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
                    }

[OzGav]

This is coming soon music-assistant/frontend#745