feat: dynamic device icons

Initial implem of classOfDevice handling
Superd22 · Aug 11, 2022 · 4b3e57a · 4b3e57a
1 parent 099a84e
commit 4b3e57a
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 3 deletions.
diff --git a/app/public/appinfo.json b/app/public/appinfo.json
@@ -1,5 +1,5 @@
 {
-  "id": "com.superd22.bluetooth-hid",
+  "id": "com.superd22.bluetoothhid",
   "version": "1.0.0",
   "vendor": "Superd22",
   "type": "web",

diff --git a/app/src/lib/DeviceCard.svelte b/app/src/lib/DeviceCard.svelte
@@ -6,6 +6,7 @@
   import DeviceFinder from "./DeviceFinder.svelte";
   import { WebOSService } from "./webos-service";
   import SpatialNavigation from "spatial-navigation-ts";
+  import DeviceIcon from "./DeviceIcon.svelte";
 
   export let device: Device;
   let showMenu: boolean = false;
@@ -81,7 +82,7 @@
     <div class="title">{device.name}</div>
 
     <div class="icon">
-      <Gamepad />
+      <DeviceIcon {device} />
     </div>
 
     <div class="details" />
@@ -97,7 +98,9 @@
         tabindex="0"
         class="focusable"
         on:click={toggleConnect}
-        bind:this={menu}>Disconnect</button
+        bind:this={menu}
+      >
+        {device.connectedProfiles?.length ? "Disconnect" : "Connect"}</button
       >
       <button tabindex="0" class="focusable" on:click={unpair}>Unpair</button>
     </div>
@@ -158,6 +161,11 @@
       display: flex;
       flex-direction: column;
       justify-content: center;
+
+      button {
+        margin: 0px 10px;
+        background: rgba(255, 255, 255, 0.5);
+      }
     }
   }
 </style>
diff --git a/app/src/lib/DeviceFinder.svelte b/app/src/lib/DeviceFinder.svelte
@@ -140,6 +140,7 @@
     </div>
     <div class="action">
       <button
+        class="focusable"
         class:active={isSearching}
         on:click={search}
         disabled={isSearching}

diff --git a/app/src/lib/DeviceIcon.svelte b/app/src/lib/DeviceIcon.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import type { Device } from "./interfaces/bluetooth-device.interface";
+  import Gamepad from "svelte-material-icons/GoogleController.svelte";
+  import Keyboard from "svelte-material-icons/Keyboard.svelte";
+  import Headphones from "svelte-material-icons/Headphones.svelte";
+  import Cellphone from "svelte-material-icons/Cellphone.svelte";
+  import Mouse from "svelte-material-icons/Mouse.svelte";
+  import Remote from "svelte-material-icons/Remote.svelte";
+
+  export let device: Device;
+
+  enum BluetoothMajorDeviceClass {
+    "UNCATEGORIZED" = 0b1111100000000,
+    "GAMEPAD" = 0b0010100001000,
+    "KBM" = 0b0010111000000,
+    "KEYBOARD" = 0b0010101000000,
+    "MOUSE" = 0b0010110000000,
+    "PERIPHERAL" = 0b0010100000000,
+    "AUDIOVIDEO" = 0b0010000000000,
+    "COMPUTER" = 0b0000100000000,
+    "PHONE" = 0b0001000000000,
+    "LAN" = 0b0001100000000,
+    "MISC" = 0b000000000000,
+  }
+
+  const iconMap: { [key in BluetoothMajorDeviceClass]?: any } = {
+    [BluetoothMajorDeviceClass.GAMEPAD]: Gamepad,
+    [BluetoothMajorDeviceClass.KEYBOARD]: Keyboard,
+    [BluetoothMajorDeviceClass.AUDIOVIDEO]: Headphones,
+    [BluetoothMajorDeviceClass.PHONE]: Cellphone,
+    [BluetoothMajorDeviceClass.MOUSE]: Mouse,
+    [BluetoothMajorDeviceClass.UNCATEGORIZED]: Remote,
+  };
+
+  function getType(classOfDevice: number): any {
+    const bin = Number("0b" + classOfDevice.toString(2).padStart(13, "0"));
+    for (const deviceClass of Object.values(BluetoothMajorDeviceClass).filter(
+      Number
+    ) as number[]) {
+      if ((deviceClass & bin) === deviceClass) return deviceClass;
+    }
+  }
+</script>
+
+<svelte:component this={iconMap[getType(device.classOfDevice)]} />