Add device type icons

ext/src/ui/popup/Receiver.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { createEventDispatcher, onMount } from "svelte";
 
-    import type { ReceiverDevice } from "../../types";
+    import { ReceiverDevice, ReceiverDeviceCapabilities } from "../../types";
     import type { Port } from "../../messaging";
 
     import { PlayerState } from "../../cast/sdk/media/enums";
@@ -81,6 +81,15 @@
 </script>
 
 <li class="receiver">
+    <img
+        class="receiver__icon"
+        src="icons/{device.capabilities & ReceiverDeviceCapabilities.VIDEO_OUT
+            ? 'device-video.svg'
+            : 'device-audio.svg'}"
+        alt=""
+        height="24"
+        width="24"
+    />
     <div class="receiver__details">
         <div class="receiver__name">
             {device.friendlyName}

ext/src/ui/popup/icons/device-audio.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <style>
+        path, circle {
+            fill: rgba(12, 12, 13, .8);
+        }
+        @media (prefers-color-scheme: dark) {
+            path, circle {
+                fill: rgba(249, 249, 250, .8);
+            }
+        }
+    </style>
+    <path d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Zm6 2a2 2 0 0 1 2 2 2 2 0 0 1-2 2 2 2 0 0 1-2-2 2 2 0 0 1 2-2zm0 6a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5zm0 3a2 2 0 0 0-2 2 2 2 0 0 0 2 2 2 2 0 0 0 2-2 2 2 0 0 0-2-2z" />
+</svg>

ext/src/ui/popup/icons/device-video.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <style>
+        path, circle {
+            fill: rgba(12, 12, 13, .8);
+        }
+        @media (prefers-color-scheme: dark) {
+            path, circle {
+                fill: rgba(249, 249, 250, .8);
+            }
+        }
+    </style>
+    <path d="M4 4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h6v1H7a1 1 0 0 0-1 1 1 1 0 0 0 1 1h10a1 1 0 0 0 1-1 1 1 0 0 0-1-1h-3v-1h6a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm1 2h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Z" />
+</svg>

ext/src/ui/popup/styles/index.css

@@ -78,6 +78,7 @@ body {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
+    min-height: 50px;
     padding: 0.75em 0;
     position: relative;
 }