feat(#773): use stencil/store for accelerometer

Author: peterpeterparker

remote/src/app/components/settings/app-experimental-settings/app-experimental-settings.tsx

@@ -1,20 +1,17 @@
 import {Component, Element, State, h} from '@stencil/core';
 import {RangeChangeEventDetail} from '@ionic/core';
 
-import {take} from 'rxjs/operators';
+import accStore from '../../../stores/accelerometer.store';
 
 // Services
 import {AccelerometerService} from '../../../services/accelerometer/accelerometer.service';
 
 @Component({
-  tag: 'app-experimental-settings'
+  tag: 'app-experimental-settings',
 })
 export class AppExperimentalSettings {
   @Element() el: HTMLElement;
 
-  @State()
-  private accelerometerEnabled: boolean = false;
-
   @State()
   private accelerometerFrequency: number = 0;
 
@@ -34,28 +31,29 @@ export class AppExperimentalSettings {
   }
 
   componentWillLoad() {
-    this.accelerometerService
-      .watchEnabled()
-      .pipe(take(1))
-      .subscribe((enabled: boolean) => {
-        this.accelerometerEnabled = enabled;
-      });
-
     this.accelerometerFrequency = this.accelerometerService.frequency;
     this.accelerometerSensibility = this.accelerometerService.sensibility;
     this.accelerometerTakeUntil = this.accelerometerService.takeUntil;
     this.accelerometerDelay = this.accelerometerService.delay;
   }
 
   private async toggleAccelerometerSupport() {
-    try {
-      this.accelerometerEnabled = await this.accelerometerService.toggle();
+    let destroyListener;
 
-      if (this.accelerometerEnabled) {
+    try {
+      destroyListener = accStore.onChange('enable', async () => {
         await this.accelerometerService.start();
-      }
+
+        destroyListener();
+      });
+
+      await this.accelerometerService.toggle();
     } catch (err) {
-      this.accelerometerEnabled = false;
+      accStore.state.enable = false;
+
+      if (destroyListener) {
+        destroyListener();
+      }
     }
   }
 
@@ -98,10 +96,10 @@ export class AppExperimentalSettings {
 
         <ion-item>
           <ion-label>Swipe like a Jedi</ion-label>
-          <ion-toggle slot="end" color="switcher" checked={this.accelerometerEnabled} onIonChange={() => this.toggleAccelerometerSupport()}></ion-toggle>
+          <ion-toggle slot="end" color="switcher" checked={accStore.state.enable} onIonChange={() => this.toggleAccelerometerSupport()}></ion-toggle>
         </ion-item>
 
-        <p style={{color: this.accelerometerEnabled ? 'inherit' : 'var(--ion-color-medium)'}}>
+        <p style={{color: accStore.state.enable ? 'inherit' : 'var(--ion-color-medium)'}}>
           <ion-label>Accelerometer's frequency ({this.accelerometerFrequency} measures/seconds)</ion-label>
         </p>
 
@@ -111,12 +109,12 @@ export class AppExperimentalSettings {
             max={300}
             value={this.accelerometerFrequency}
             mode="md"
-            disabled={!this.accelerometerEnabled}
+            disabled={!accStore.state.enable}
             color="switcher"
             onIonChange={(e: CustomEvent<RangeChangeEventDetail>) => this.updateAccelerometerFrequency(e)}></ion-range>
         </ion-item>
 
-        <p style={{color: this.accelerometerEnabled ? 'inherit' : 'var(--ion-color-medium)'}}>
+        <p style={{color: accStore.state.enable ? 'inherit' : 'var(--ion-color-medium)'}}>
           <ion-label>Debounce (trigger swipe after {(this.accelerometerTakeUntil / this.accelerometerFrequency).toFixed(2)} seconds)</ion-label>
         </p>
 
@@ -126,12 +124,12 @@ export class AppExperimentalSettings {
             max={30}
             value={this.accelerometerTakeUntil}
             mode="md"
-            disabled={!this.accelerometerEnabled}
+            disabled={!accStore.state.enable}
             color="switcher"
             onIonChange={(e: CustomEvent<RangeChangeEventDetail>) => this.updateAccelerometerTakeUntil(e)}></ion-range>
         </ion-item>
 
-        <p style={{color: this.accelerometerEnabled ? 'inherit' : 'var(--ion-color-medium)'}}>
+        <p style={{color: accStore.state.enable ? 'inherit' : 'var(--ion-color-medium)'}}>
           <ion-label>Sensibility (detect acceleration above velocity {this.accelerometerSensibility})</ion-label>
         </p>
 
@@ -141,12 +139,12 @@ export class AppExperimentalSettings {
             max={30}
             value={this.accelerometerSensibility}
             mode="md"
-            disabled={!this.accelerometerEnabled}
+            disabled={!accStore.state.enable}
             color="switcher"
             onIonChange={(e: CustomEvent<RangeChangeEventDetail>) => this.updateAccelerometerSensibility(e)}></ion-range>
         </ion-item>
 
-        <p style={{color: this.accelerometerEnabled ? 'inherit' : 'var(--ion-color-medium)'}}>
+        <p style={{color: accStore.state.enable ? 'inherit' : 'var(--ion-color-medium)'}}>
           <ion-label>Delay (after swipe, detect again after {this.accelerometerDelay}ms)</ion-label>
         </p>
 
@@ -156,11 +154,11 @@ export class AppExperimentalSettings {
             max={2500}
             value={this.accelerometerDelay}
             mode="md"
-            disabled={!this.accelerometerEnabled}
+            disabled={!accStore.state.enable}
             color="switcher"
             onIonChange={(e: CustomEvent<RangeChangeEventDetail>) => this.updateAccelerometerDelay(e)}></ion-range>
         </ion-item>
-      </ion-list>
+      </ion-list>,
     ];
   }
 }

remote/src/app/pages/app-remote/app-remote.tsx

@@ -3,10 +3,9 @@ import {alertController, modalController, OverlayEventDetail} from '@ionic/core'
 
 import {isMobile} from '@deckdeckgo/utils';
 
-import {Subscription} from 'rxjs';
-
 import notesStores from '../../stores/notes.store';
 import remoteStore from '../../stores/remote.store';
+import accStore from '../../stores/accelerometer.store';
 
 // Types
 import {
@@ -66,8 +65,8 @@ export class AppRemote {
   @State()
   private clientId: string;
 
-  private acceleratorSubscription: Subscription;
-  private acceleratorInitSubscription: Subscription;
+  private destroyAcceleratorListener;
+  private destroyAcceleratorInitListener;
 
   private communicationService: CommunicationService;
   private accelerometerService: AccelerometerService;
@@ -125,15 +124,15 @@ export class AppRemote {
       }
     });
 
-    this.acceleratorSubscription = this.accelerometerService.watch().subscribe(async (prev: boolean) => {
+    this.destroyAcceleratorListener = accStore.onChange('trigger', async (prev: boolean) => {
       await this.prevNextSlide(prev, false);
 
       setTimeout(async () => {
         await this.startAccelerometer();
       }, this.accelerometerService.delay);
     });
 
-    this.acceleratorInitSubscription = this.accelerometerService.watchInitialized().subscribe(async (initialized: boolean) => {
+    this.destroyAcceleratorInitListener = accStore.onChange('initialized', async (initialized: boolean) => {
       if (initialized) {
         const deck: HTMLElement = this.el.querySelector('deckgo-deck');
 
@@ -194,12 +193,12 @@ export class AppRemote {
       this.eventDestroyListener();
     }
 
-    if (this.acceleratorSubscription) {
-      this.acceleratorSubscription.unsubscribe();
+    if (this.destroyAcceleratorListener) {
+      this.destroyAcceleratorListener();
     }
 
-    if (this.acceleratorInitSubscription) {
-      this.acceleratorInitSubscription.unsubscribe();
+    if (this.destroyAcceleratorInitListener) {
+      this.destroyAcceleratorInitListener();
     }
   }
 

remote/src/app/services/accelerometer/accelerometer.service.tsx

@@ -1,4 +1,4 @@
-import {BehaviorSubject, Observable, Subject} from 'rxjs';
+import store from '../../stores/accelerometer.store';
 
 import {get, set} from 'idb-keyval';
 
@@ -13,7 +13,6 @@ interface AccelerometerValues {
 export class AccelerometerService {
   private static instance: AccelerometerService;
 
-  private enableSubject: BehaviorSubject<boolean> = new BehaviorSubject(false);
   private enable: boolean = false;
 
   private permissionGranted: boolean = false;
@@ -32,10 +31,6 @@ export class AccelerometerService {
   private sumAccelerationNext: number = 0;
   private sumAccelerationPrev: number = 0;
 
-  private triggerSubject: Subject<boolean> = new Subject();
-
-  private initializedSubject: BehaviorSubject<boolean> = new BehaviorSubject(false);
-
   private constructor() {
     // Private constructor, singleton
   }
@@ -98,7 +93,7 @@ export class AccelerometerService {
         if (this.sensor.x > this.sensibility || this.sensor.x < this.sensibility * -1) {
           // We are emitting the direction after a bit of time
           if (this.takeValues >= this.takeUntil) {
-            this.triggerSubject.next(this.sumAccelerationNext > this.sumAccelerationPrev);
+            store.state.trigger = this.sumAccelerationNext > this.sumAccelerationPrev;
 
             // We are stopping to listen and will start again once the slide transition is done
             this.stop();
@@ -123,28 +118,23 @@ export class AccelerometerService {
     }
   }
 
-  toggle(): Promise<boolean> {
-    return new Promise<boolean>(async (resolve, reject) => {
-      try {
-        if (this.enable) {
-          this.stop();
-        } else {
-          await this.askPermission();
-        }
-
-        this.toggleEnabled(!this.enable);
-
-        resolve(this.enable);
-      } catch (err) {
-        this.toggleEnabled(false);
-        reject(err);
+  async toggle() {
+    try {
+      if (this.enable) {
+        this.stop();
+      } else {
+        await this.askPermission();
       }
-    });
+
+      this.toggleEnabled(!this.enable);
+    } catch (err) {
+      this.toggleEnabled(false);
+    }
   }
 
   private toggleEnabled(enabled: boolean) {
     this.enable = enabled;
-    this.enableSubject.next(this.enable);
+    store.state.enable = this.enable;
   }
 
   private askPermission(): Promise<any> {
@@ -172,17 +162,13 @@ export class AccelerometerService {
     );
   }
 
-  watch(): Observable<boolean> {
-    return this.triggerSubject.asObservable();
-  }
-
   async save() {
     await set('deckdeckgo_accelerometer', {
       enable: this.enable,
       frequency: this.frequency,
       sensibility: this.sensibility,
       takeUntil: this.takeUntil,
-      delay: this.delay
+      delay: this.delay,
     });
   }
 
@@ -199,17 +185,9 @@ export class AccelerometerService {
         await this.askPermission();
       }
 
-      this.enableSubject.next(this.enable);
+      store.state.enable = this.enable;
     }
 
-    this.initializedSubject.next(true);
-  }
-
-  watchInitialized(): Observable<boolean> {
-    return this.initializedSubject.asObservable();
-  }
-
-  watchEnabled(): Observable<boolean> {
-    return this.enableSubject.asObservable();
+    store.state.initialized = true;
   }
 }

remote/src/app/stores/accelerometer.store.ts

@@ -0,0 +1,15 @@
+import {createStore} from '@stencil/store';
+
+interface AccelerometerStore {
+  enable: boolean;
+  initialized: boolean;
+  trigger: boolean | undefined;
+}
+
+const {state, onChange} = createStore({
+  enable: false,
+  initialized: false,
+  trigger: undefined,
+} as AccelerometerStore);
+
+export default {state, onChange};