From 729650749821ff474d083d829bff7ca850acf11e Mon Sep 17 00:00:00 2001
From: hensm <m@matt.tf>
Date: Sat, 27 Aug 2022 00:17:14 +0100
Subject: [PATCH] Add device type icons

---
 ext/src/ui/popup/Receiver.svelte        | 11 ++++++++++-
 ext/src/ui/popup/icons/device-audio.svg | 13 +++++++++++++
 ext/src/ui/popup/icons/device-video.svg | 13 +++++++++++++
 ext/src/ui/popup/styles/index.css       |  1 +
 4 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 ext/src/ui/popup/icons/device-audio.svg
 create mode 100644 ext/src/ui/popup/icons/device-video.svg

diff --git a/ext/src/ui/popup/Receiver.svelte b/ext/src/ui/popup/Receiver.svelte
index dcf2c6a..02abe3a 100644
--- a/ext/src/ui/popup/Receiver.svelte
+++ b/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}
diff --git a/ext/src/ui/popup/icons/device-audio.svg b/ext/src/ui/popup/icons/device-audio.svg
new file mode 100644
index 0000000..a7db2bf
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/ext/src/ui/popup/icons/device-video.svg b/ext/src/ui/popup/icons/device-video.svg
new file mode 100644
index 0000000..62e2b51
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/ext/src/ui/popup/styles/index.css b/ext/src/ui/popup/styles/index.css
index 23c78e2..5caf35a 100755
--- a/ext/src/ui/popup/styles/index.css
+++ b/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;
 }