Merge pull request #72 from inputlabs/webusb-better-async

Max re-fetch attempts, Detect device change

src/components/profile/profile.html

@@ -7,11 +7,11 @@
     <div class='icon'>
         <span class='material'>settings_remote</span>
     </div>
-    <div>Select wireless connected</div>
-    <div>device to modify profiles</div>
+    <div>Select a wireless device</div>
+    <div>to modify profiles</div>
 </div>
 
-<div class="template" *ngIf='webusb.isController()'>
+<div class="template" *ngIf='webusb.isConnectedRaw() && webusb.isController()'>
     <div class="crop_h">
         <div class='crop_v'>
             <!-- BUTTONS -->

src/components/profile/profile.ts

@@ -12,9 +12,12 @@ import { CtrlSection, CtrlSectionMeta, CtrlButton, CtrlRotary, CtrlGyroAxis } fr
 import { ThumbstickMode, GyroMode } from 'lib/ctrl'
 import { sectionIsGyroAxis, sectionIsHome } from 'lib/ctrl'
 import { SectionIndex } from 'lib/ctrl'
+import { Device } from 'lib/device'
 import { Profiles } from 'lib/profiles'
 import { delay } from 'lib/delay'
 
+const MAX_FETCH_ATTEMPTS = 3
+
 @Component({
   selector: 'app-profile',
   standalone: true,
@@ -28,7 +31,7 @@ import { delay } from 'lib/delay'
   styleUrls: ['./profile.sass']
 })
 export class ProfileComponent {
-  profiles: Profiles
+  device?: Device
   profileIndex: number = 0
   selected: CtrlSection = new CtrlSectionMeta(0, SectionIndex.META, '', 0, 0, 0, 0)
   // Template aliases.
@@ -42,11 +45,25 @@ export class ProfileComponent {
     activatedRoute.data.subscribe((data) => {
       this.profileIndex = data['index']
     })
-    this.profiles = this.webusb.selectedDevice!.profiles
   }
 
-  ngAfterViewInit() {
-    this.init()
+  // ngAfterViewInit() {
+  //   this.init()
+  // }
+
+  ngAfterViewChecked() {
+    // Refresh data if device changes.
+    if (!this.webusb.selectedDevice) return
+    if (!this.webusb.isController()) return
+    if (!this.device) {
+      this.device = this.webusb.selectedDevice!
+      this.init()
+      return
+    }
+    if (this.device != this.webusb.selectedDevice) {
+      this.device = this.webusb.selectedDevice!
+      this.init()
+    }
   }
 
   async init() {
@@ -55,43 +72,69 @@ export class ProfileComponent {
       await delay(100)
     }
     // Fetch profile names, retry if it fails.
+    await this.tryFetchNames()
+    // Selected early to avoid flickering.
+    this.setSelectedMeta()
+    // Fetch profile sections, retry if it fails.
+    await this.tryFetchProfile()
+    // Selected again to connect Angular 2-way binding correctly.
+    this.setSelectedMeta()
+  }
+
+  async tryFetchNames() {
+    let attempts = 0
     while(true) {
       try {
-        await this.profiles.fetchProfileNames()
+        const profiles = this.webusb.selectedDevice!.profiles
+        await profiles.fetchProfileNames()
         break
       } catch(error) {
-        console.warn(error)
+        attempts += 1
+        if (attempts <= MAX_FETCH_ATTEMPTS) console.warn(error)
+        else {
+          console.error(error)
+          break
+        }
       }
     }
-    // Selected early to avoid flickering.
-    this.setSelectedMeta()
-    // Fetch profile sections, retry if it fails.
+  }
+
+  async tryFetchProfile() {
+    let attempts = 0
     while(true) {
       try {
-        await this.profiles.fetchProfile(this.profileIndex, false)
+        const profiles = this.webusb.selectedDevice!.profiles
+        await profiles.fetchProfile(this.profileIndex, false)
         break
       } catch(error) {
-        console.warn(error)
+        attempts += 1
+        if (attempts <= MAX_FETCH_ATTEMPTS) console.warn(error)
+        else {
+          console.error(error)
+          break
+        }
       }
     }
-    // Selected again to connect Angular 2-way binding correctly.
-    this.setSelectedMeta()
+  }
+
+  getProfile() {
+    return this.webusb.selectedDevice!.profiles.getProfile(this.profileIndex)
   }
 
   setSelected(section: CtrlSection) {
     this.selected = section
   }
 
   setSelectedMeta() {
-    this.selected = this.profiles.getProfile(this.profileIndex).meta
+    this.selected = this.getProfile().meta
   }
 
   setSelectedThumbstick() {
-    this.selected = this.profiles.getProfile(this.profileIndex).thumbstick
+    this.selected = this.getProfile().thumbstick
   }
 
   setSelectedGyro() {
-    this.selected = this.profiles.getProfile(this.profileIndex).gyro
+    this.selected = this.getProfile().gyro
   }
 
   getSelected() {
@@ -119,7 +162,7 @@ export class ProfileComponent {
   }
 
   getMappings() {
-    const profile = this.profiles.profiles[this.profileIndex]
+    const profile = this.getProfile()
     const thumbstick = profile.thumbstick
     const gyro = profile.gyro
     const rotaryUp = this.getMapping(profile.rotaryUp)

src/components/sidebar/sidebar.html

@@ -22,7 +22,7 @@
     </a>
 </div>
 
-<div *ngIf='this.isProfiles() && webusb.isController()'>
+<div *ngIf='this.isProfiles()'>
     <a routerLink='profiles/0' routerLinkActive='active'>
         <app-led [colorOff]='ledColorOff' [dotsize]='16' [on]='getProfileLed(0)'/>
         <div>{{getProfileName(0)}}</div>

src/components/sidebar/sidebar.ts

@@ -57,6 +57,7 @@ export class SidebarComponent {
   }
 
   getProfileName(index: number) {
+    if (!this.webusb.isController()) return ''
     let profiles = this.webusb.getProfiles()
     if (!profiles) return ''
     return profiles.getProfile(index).meta.name

src/lib/device.ts

@@ -26,6 +26,7 @@ import {
 
 const ADDR_IN = 3
 const ADDR_OUT = 4
+const TIMEOUT = 500
 
 export class Device {
   usbDevice: USBDevice
@@ -189,7 +190,7 @@ export class Device {
       })
     })
     const timeoutMessage = `Timeout in getConfig ${ConfigIndex[index]}`
-    const timeout = timeoutPromise(200, timeoutMessage) as Promise<PresetWithValues>
+    const timeout = timeoutPromise(TIMEOUT, timeoutMessage) as Promise<PresetWithValues>
     return Promise.race([responsePromise, timeout])
   }
 
@@ -205,7 +206,7 @@ export class Device {
       })
     })
     const timeoutMessage = `Timeout in setConfig ${ConfigIndex[index]}`
-    const timeout = timeoutPromise(200, timeoutMessage) as Promise<number>
+    const timeout = timeoutPromise(TIMEOUT, timeoutMessage) as Promise<number>
     return Promise.race([responsePromise, timeout])
   }
 
@@ -224,7 +225,7 @@ export class Device {
       })
     })
     const timeoutMessage = `Timeout in getSection ${SectionIndex[sectionIndex]}`
-    const timeout = timeoutPromise(200, timeoutMessage) as Promise<CtrlSection>
+    const timeout = timeoutPromise(TIMEOUT, timeoutMessage) as Promise<CtrlSection>
     return Promise.race([responsePromise, timeout])
   }
 
@@ -243,7 +244,7 @@ export class Device {
       })
     })
     const timeoutMessage = `Timeout in setSection`
-    const timeout = timeoutPromise(200, timeoutMessage)
+    const timeout = timeoutPromise(TIMEOUT, timeoutMessage)
     return Promise.race([responsePromise, timeout])
   }