Add auto-expansion of media controls for devices with connected sessions

ext/src/ui/options/Options.svelte

@@ -259,6 +259,22 @@
                         {_("optionsReceiverSelectorCloseIfFocusLost")}
                     </label>
                 </div>
+
+                <div class="option option--inline">
+                    <div class="option__control">
+                        <input
+                            id="receiverSelectorExpandActive"
+                            type="checkbox"
+                            bind:checked={opts.receiverSelectorExpandActive}
+                        />
+                    </div>
+                    <label
+                        class="option__label"
+                        for="receiverSelectorExpandActive"
+                    >
+                        {_("optionsReceiverSelectorExpandActive")}
+                    </label>
+                </div>
             </fieldset>
         {/if}
 

ext/src/ui/popup/Popup.svelte

@@ -29,6 +29,8 @@
 
     /** Devices to display. */
     let devices: ReceiverDevice[] = [];
+    /** IDs of sessions connected by this extension. */
+    let connectedSessionIds: string[] = [];
 
     /** Sender app info (if available). */
     let appInfo: Optional<ReceiverSelectorAppInfo>;
@@ -172,6 +174,8 @@
                 break;
 
             case "popup:update": {
+                updateKnownApp();
+
                 if (
                     message.data.availableMediaTypes !== undefined &&
                     message.data.defaultMediaType !== undefined
@@ -183,9 +187,11 @@
                     }
                 }
 
-                updateKnownApp();
+                devices = message.data.devices;
 
-                devices = message.data.receiverDevices;
+                if (message.data.connectedSessionIds) {
+                    connectedSessionIds = message.data.connectedSessionIds;
+                }
 
                 break;
             }
@@ -288,30 +294,27 @@
         }
     }
 
-    function onReceiverCast(receiverDevice: ReceiverDevice) {
+    function onReceiverCast(device: ReceiverDevice) {
         isConnecting = true;
 
         port?.postMessage({
             subject: "main:receiverSelected",
-            data: {
-                receiverDevice,
-                mediaType
-            }
+            data: { device, mediaType }
         });
     }
 
-    function onReceiverStop(receiverDevice: ReceiverDevice) {
+    function onReceiverStop(device: ReceiverDevice) {
         port?.postMessage({
             subject: "main:sendReceiverMessage",
             data: {
-                deviceId: receiverDevice.id,
+                deviceId: device.id,
                 message: { requestId: 0, type: "STOP" }
             }
         });
 
         port?.postMessage({
             subject: "main:receiverStopped",
-            data: { deviceId: receiverDevice.id }
+            data: { deviceId: device.id }
         });
     }
 </script>
@@ -378,8 +381,10 @@
     {:else}
         {#each devices as device}
             <Receiver
+                {opts}
                 {port}
                 {device}
+                {connectedSessionIds}
                 {isMediaTypeAvailable}
                 isAnyMediaTypeAvailable={availableMediaTypes !==
                     ReceiverSelectorMediaType.None &&

ext/src/ui/popup/Receiver.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import { createEventDispatcher, onMount } from "svelte";
 
+    import type { Options } from "../../lib/options";
+
     import { ReceiverDevice, ReceiverDeviceCapabilities } from "../../types";
     import type { Port } from "../../messaging";
 
@@ -33,8 +35,11 @@
     /** Whether any media types are available for this receiver. */
     export let isAnyMediaTypeAvailable: boolean;
 
-    /** Receiver device to display. */
+    /** Device to display. */
     export let device: ReceiverDevice;
+    export let connectedSessionIds: string[];
+
+    export let opts: Nullable<Options>;
 
     /** Current receiver application (if available) */
     $: application = device.status?.applications?.[0];
@@ -79,8 +84,20 @@
 
     /** Whether media controls are shown. */
     let isExpanded = false;
+    let isExpandedUserModified = false;
+
+    // Unexpand if media status disappears
     $: if (!device.mediaStatus) {
         isExpanded = false;
+    } else if (
+        // If app is running
+        application?.appId &&
+        // And user hasn't manually changed the expanded state
+        !isExpandedUserModified &&
+        // And auto-expansion is enabled
+        opts?.receiverSelectorExpandActive
+    ) {
+        isExpanded = connectedSessionIds.includes(application?.transportId);
     }
 
     /** Whether a session request is in progress for this receiver.. */
@@ -429,6 +446,7 @@
         disabled={!mediaStatus}
         on:click={() => {
             isExpanded = !isExpanded;
+            isExpandedUserModified = true;
         }}
     />