feat: sync + pair goldenpath

webos-gamepad/package.json → package.json

@@ -8,18 +8,20 @@
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
-    "package": "npm run build && ares-package ./dist -o dist/"
+    "package": "npm run build && npx ares-package ./dist -o dist/"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.0.1",
     "@tsconfig/svelte": "^3.0.0",
     "@types/webos-service": "^0.4.2",
+    "@webosose/ares-cli": "^2.3.1",
     "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
     "svelte-preprocess": "^4.10.7",
     "tslib": "^2.4.0",
     "typescript": "^4.6.4",
-    "vite": "^3.0.0"
+    "vite": "^3.0.0",
+    "webos-typings": "^1.1.0"
   },
   "dependencies": {
     "@procot/webostv": "^1.2.5",
@@ -31,6 +33,7 @@
     "spatial-navigation-ts": "^1.0.8",
     "svelte-material-icons": "^2.0.4",
     "svelte-modals": "^1.1.0",
+    "ts-morph": "^15.1.0",
     "webostv-as-promised": "^1.1.1"
   }
-}
+}

webos-gamepad/src/App.svelte → src/App.svelte

@@ -7,19 +7,18 @@
   import { catchError, tap, throwError } from "rxjs";
   import { afterUpdate } from "svelte";
 
+  let isModalShowing: boolean = false;
 
-  let isModalShowing: boolean = false
-  
-  action.subscribe(a => {
-    if (a === "push") isModalShowing = true
-    else isModalShowing = false
-  })
+  action.subscribe((a) => {
+    if (a === "push") isModalShowing = true;
+    else isModalShowing = false;
+  });
 
   function handleKeydown({ keyCode }) {
-    if (keyCode == '13') {
+    console.log("keydown", keyCode);
+    if (keyCode == "13") {
       document.activeElement.click();
     }
-
   }
 
   afterUpdate(() => {
@@ -53,7 +52,8 @@
       .sort((a, b) => {
         if (a.connectedProfiles?.length && !b.connectedProfiles?.length)
           return -1;
-        if (!a.connectedProfiles?.length && b.connectedProfiles?.length) return 1;
+        if (!a.connectedProfiles?.length && b.connectedProfiles?.length)
+          return 1;
         else return 0;
       })
       .filter((d) => d.paired);
@@ -67,15 +67,12 @@
     {#each getFilteredDevices(devices) as device}
       <DeviceCard {device} />
     {/each}
-
-
   </div>
   <div class="bottom" />
 </main>
 
 <Modals />
 
-
 <svelte:window on:keydown={handleKeydown} />
 
 <style>

webos-gamepad/src/lib/BluetoothFinder.svelte → src/lib/BluetoothFinder.svelte

@@ -5,15 +5,19 @@
   import { Observable, throwError } from "rxjs";
   import type { Device } from "./interfaces/bluetooth-device.interface";
   const bluetoothService = new WebOSService("com.webos.service.bluetooth2");
+  import type {
+    Bluetooth2AdapterStartDiscoveryCallReturn,
+    Bluetooth2DeviceGetStatusSubscription,
+  } from "webos-typings";
 
   let devices: Device[] = [];
   // test
   const request = bluetoothService
-    .subscription("device/getStatus")
+    .subscription<Bluetooth2DeviceGetStatusSubscription>("device/getStatus")
     .pipe(
       tap((data) => {
         console.log(data["devices"]);
-        devices = data["devices"];
+        devices = data["devices"] as any;
       }),
       catchError((error) => {
         console.error("oh no", error);
@@ -23,17 +27,18 @@
     .subscribe();
 
   async function search() {
-    const issEarching = await bluetoothService.request(
-      "adapter/startDiscovery"
-    );
+    const issEarching =
+      await bluetoothService.request<Bluetooth2AdapterStartDiscoveryCallReturn>(
+        "adapter/startDiscovery"
+      );
   }
 </script>
 
 <div class="finder">
   <button on:click={search} class="focusable">Click to search</button>
 
   <ul>
-    {#each devices.filter(d => !!d.name) as device}
+    {#each devices.filter((d) => !!d.name) as device}
       <li>{device.name}</li>
     {/each}
   </ul>

webos-gamepad/src/lib/DeviceCard.svelte → src/lib/DeviceCard.svelte

@@ -4,20 +4,30 @@
   import Gamepad from "svelte-material-icons/GoogleController.svelte";
   import { openModal } from "svelte-modals";
   import DeviceFinder from "./DeviceFinder.svelte";
+  import { WebOSService } from "./webos-service";
 
   export let device: Device;
+  const bluetoothService = new WebOSService("com.webos.service.bluetooth2");
 
   function pairNewDevice() {
     openModal(DeviceFinder);
   }
+
+  async function connect() {
+    const connect = await bluetoothService.request("hid/connect", {
+      address: device.address,
+    });
+
+    console.debug(connect);
+  }
 </script>
 
 <div
   class="device-card focusable"
   class:empty={!device}
   class:connected={device?.connectedProfiles?.length > 0}
   tabindex="0"
-  on:click={!device ? pairNewDevice : (function () {})()}
+  on:click={!device ? pairNewDevice : connect}
 >
   {#if device}
     <div class="title">{device.name}</div>
@@ -62,9 +72,9 @@
 
     &.empty {
       background-color: rgb(38 50 56);
-    border: 5px solid rgb(30 38 43);
-    opacity: 1;
-    color: #eee;
+      border: 5px solid rgb(30 38 43);
+      opacity: 1;
+      color: #eee;
       .add {
         position: relative;
         display: flex;

webos-gamepad/src/lib/DeviceFinder.svelte → src/lib/DeviceFinder.svelte

@@ -4,12 +4,19 @@
   import SpatialNavigation from "spatial-navigation-ts";
   import { onDestroy, onMount, afterUpdate } from "svelte";
   import { closeModal } from "svelte-modals";
+  import type {
+    Bluetooth2AdapterCancelPairingCallReturn,
+    Bluetooth2AdapterPairSubscription,
+  } from "webos-typings";
   import type { Device } from "./interfaces/bluetooth-device.interface";
   import { WebOSService } from "./webos-service";
 
   let pairables: Device[] = [];
-  const bluetoothService = new WebOSService("com.webos.service.bluetooth2");
+  let targetDevice: Device = null;
+  let isCancelling: boolean = false;
+  let error: string = "";
 
+  const bluetoothService = new WebOSService("com.webos.service.bluetooth2");
   const deviceSub = bluetoothService
     .subscription("device/getStatus")
     .pipe(
@@ -21,17 +28,17 @@
     )
     .subscribe();
 
-  onMount(() => {});
   onDestroy(() => {
     deviceSub.unsubscribe();
   });
 
-
   enum Step {
     Find,
+    WaitingOn,
     DisplayCode,
     ConfirmCode,
-    EnterCode,
+    Success,
+    Error,
   }
 
   let isSearching = false;
@@ -47,15 +54,66 @@
   }
 
   async function pair(device: Device) {
-    const pairing = bluetoothService.subscription("adapter/pair", {
-      address: device.address,
-      subscribe: true
-    }).subscribe(data => {
-      
-    })
+    targetDevice = device;
+    step = Step.WaitingOn;
+
+    const pairing = bluetoothService
+      .subscription<Bluetooth2AdapterPairSubscription>("adapter/pair", {
+        address: targetDevice.address,
+        subscribe: true,
+      })
+      .subscribe((data) => {
+        console.debug("Got pairing sub data", data);
+        switch (data.request) {
+          case "request:endPairing": {
+            if (data.returnValue) {
+              step = Step.Success;
+            } else {
+              step = Step.Error;
+              error = `[${(data as any).errorCode}] ${(data as any).errorText}`;
+            }
+
+            pairing.unsubscribe();
+          }
+          case "displayPinCode":
+          case "displayPasskey": {
+            step = Step.DisplayCode;
+          }
+          case "confirmPassKey": {
+            step = Step.ConfirmCode;
+          }
+        }
+      });
     step = Step.DisplayCode;
   }
 
+  async function exit() {
+    closeModal();
+  }
+
+  async function newSync() {
+    await cancelPair();
+    targetDevice = null;
+    step = Step.Find;
+  }
+
+  async function retry() {
+    await cancelPair();
+    pair(targetDevice);
+  }
+
+  async function cancelPair() {
+    if (!targetDevice) return;
+
+    const abort =
+      await bluetoothService.request<Bluetooth2AdapterCancelPairingCallReturn>(
+        "adapter/cancelPairing",
+        {
+          address: targetDevice.address,
+        }
+      );
+  }
+
   search();
 </script>
 
@@ -70,7 +128,12 @@
       >
     </div>
     <div class="action">
-      <button class:active={isSearching} on:click={search}>
+      <button
+        class:active={isSearching}
+        on:click={search}
+        disabled={isSearching}
+        tabindex="0"
+      >
         {#if isSearching}
           Searching
         {:else}
@@ -88,18 +151,42 @@
     </div>
   {/if}
 
-  {#if step === Step.DisplayCode}
+  {#if step === Step.WaitingOn}
     <div class="content">
-      <h1>Pairing XBox Wireless Controller</h1>
-      <em
-        >Please make sure the code displayed below matches the one on your
-        device</em
-      >
+      <h1>Pairing {targetDevice.name}</h1>
+      <em>Waiting...</em>
+    </div>
+
+    <div class="action">
+      <button on:click={cancelPair}>Cancel</button>
+    </div>
+  {/if}
+
+  {#if step === Step.Error}
+    <div class="content">
+      <h1>Could not pair {targetDevice.name}</h1>
+      <em>Got an error while trying to pair your device</em>
 
-      <button class="code" disabled="true">CODE ABCDEF</button>
+      <pre class="error">{error}</pre>
     </div>
 
-    <div class="action">wait</div>
+    <div class="action">
+      <button on:click={retry}>Retry</button>
+      <button on:click={newSync}>Sync a new device</button>
+      <button on:click={exit}>Back to devices</button>
+    </div>
+  {/if}
+
+  {#if step === Step.Success}
+    <div class="content">
+      <h1>Sucesfully paired {targetDevice.name}!</h1>
+      <em>Device has been sucesfully paired with this TV</em>
+    </div>
+
+    <div class="action">
+      <button on:click={exit}>Back to devices</button>
+      <button on:click={newSync}>Sync a new device</button>
+    </div>
   {/if}
 </div>
 

src/lib/interfaces/bluetooth-device.interface.ts

@@ -0,0 +1,30 @@
+
+export interface Device {
+  serviceClasses: any[];
+  trusted: boolean;
+  connectedProfiles: string[];
+  pairing: boolean;
+  rssi: number;
+  scanRecord: any[];
+  name: string;
+  address: string;
+  paired: boolean;
+  typeOfDevice: TypeOfDevice;
+  manufacturerData: ManufacturerData;
+  adapterAddress: string;
+  classOfDevice: number;
+  blocked: boolean;
+}
+
+
+export interface ManufacturerData {
+  scanRecord?: number[];
+  companyId?: number[];
+  data?: number[];
+}
+
+export enum TypeOfDevice {
+  Ble = "ble",
+  Bredr = "bredr",
+  Dual = "dual",
+}