fix(user-onboarding): pause video on next/prev, add tourStepChange ob…

…servable, change names to kebab case for models (sourcefuse#474) gh-0
vaibhavkumar-sf · Jan 19, 2022 · 076d12e · 076d12e
1 parent 34a17b1
commit 076d12e
Show file tree

Hide file tree

Showing 13 changed files with 133 additions and 34 deletions.
diff --git a/packages/user-onboarding/projects/user-onboarding-lib/src/lib/tour-service.service.ts b/packages/user-onboarding/projects/user-onboarding-lib/src/lib/tour-service.service.ts
@@ -6,9 +6,11 @@ import {
   TourButton,
   TourStep,
   TourState,
-  filterFunction,
+  FilterFunction,
   Props,
   Status,
+  TourStepChange,
+  TourComplete,
 } from '../models';
 import {Router, NavigationEnd, Event as NavigationEvent} from '@angular/router';
 import {interval, Subject} from 'rxjs';
@@ -18,12 +20,10 @@ import {filter, map, take, takeWhile, tap} from 'rxjs/operators';
   providedIn: 'root',
 })
 export class TourServiceService {
-  private readonly tourComplete = new Subject<{
-    index: number;
-    tour: Shepherd.Tour;
-    tourId: string;
-  }>();
+  private readonly tourComplete = new Subject<TourComplete>();
   tourComplete$ = this.tourComplete.asObservable();
+  private readonly tourStepChange = new Subject<TourStepChange>();
+  tourStepChange$ = this.tourStepChange.asObservable();
   private readonly interval = 100;
 
   private tour = new Shepherd.Tour({
@@ -71,23 +71,49 @@ export class TourServiceService {
     }
   }
 
-  private navigationCheckNext(event: NavigationEvent, e: TourStep): void {
+  private navigationCheckNext(
+    event: NavigationEvent,
+    e: TourStep,
+    tourInstance: Tour,
+    currentStepId: string,
+    previousStepId: string,
+  ): void {
     if (event instanceof NavigationEnd && event.url === e.currentRoute) {
       this.waitForElement(e.attachTo.element, 0)
         .then(() => {
           this.tour.next();
+          this.tourStepChange.next({
+            tourId: tourInstance.tourId,
+            currentStepId,
+            previousStepId,
+            moveForward: true,
+          });
+          this.pauseAllVideos();
         })
         .catch(() => {
           throw new Error('Error detected in loading');
         });
     }
   }
 
-  private navigationCheckBack(event: NavigationEvent, e: TourStep): void {
+  private navigationCheckBack(
+    event: NavigationEvent,
+    e: TourStep,
+    tourInstance: Tour,
+    currentStepId: string,
+    previousStepId: string,
+  ): void {
     if (event instanceof NavigationEnd && event.url === e.currentRoute) {
       this.waitForElement(e.attachTo.element, 0)
         .then(() => {
           this.tour.back();
+          this.tourStepChange.next({
+            tourId: tourInstance.tourId,
+            currentStepId,
+            previousStepId,
+            moveForward: false,
+          });
+          this.pauseAllVideos();
         })
         .catch(() => {
           throw new Error('Error detected in loading');
@@ -166,7 +192,13 @@ export class TourServiceService {
                 const nextStep = tourInstance.tourSteps.filter(
                   ts => ts.id === e.nextStepId,
                 )[0];
-                this.navigationCheckNext(event, nextStep);
+                this.navigationCheckNext(
+                  event,
+                  nextStep,
+                  tourInstance,
+                  e.nextStepId,
+                  e.id,
+                );
               });
             };
             const wrapperPrev = () => {
@@ -186,7 +218,14 @@ export class TourServiceService {
                 const prevStep = tourInstance.tourSteps.filter(
                   ts => ts.id === e.prevStepId,
                 )[0];
-                this.navigationCheckBack(event, prevStep);
+
+                this.navigationCheckBack(
+                  event,
+                  prevStep,
+                  tourInstance,
+                  e.prevStepId,
+                  e.id,
+                );
               });
             };
             const wrapperNormalNext = () => {
@@ -202,6 +241,13 @@ export class TourServiceService {
                 })
                 .subscribe();
               this.tour.next();
+              this.tourStepChange.next({
+                tourId: tourInstance.tourId,
+                currentStepId: e.nextStepId,
+                previousStepId: e.id,
+                moveForward: true,
+              });
+              this.pauseAllVideos();
             };
             const wrapperNormalPrev = () => {
               this.tourStoreService
@@ -216,6 +262,13 @@ export class TourServiceService {
                 })
                 .subscribe();
               this.tour.back();
+              this.tourStepChange.next({
+                tourId: tourInstance.tourId,
+                currentStepId: e.prevStepId,
+                previousStepId: e.id,
+                moveForward: true,
+              });
+              this.pauseAllVideos();
             };
             this.actionAssignment(
               e,
@@ -266,7 +319,13 @@ export class TourServiceService {
                       .subscribe();
                     this.router.navigate([er.nextRoute]);
                     this.router.events.subscribe((event: NavigationEvent) => {
-                      this.navigationCheckNext(event, er);
+                      this.navigationCheckNext(
+                        event,
+                        er,
+                        tourInstance,
+                        er.nextStepId,
+                        er.id,
+                      );
                     });
                   };
                   const wrapperPrevRemoved = () => {
@@ -283,7 +342,13 @@ export class TourServiceService {
                       .subscribe();
                     this.router.navigate([er.prevRoute]);
                     this.router.events.subscribe((event: NavigationEvent) => {
-                      this.navigationCheckBack(event, er);
+                      this.navigationCheckBack(
+                        event,
+                        er,
+                        tourInstance,
+                        er.prevStepId,
+                        er.id,
+                      );
                     });
                   };
                   const wrapperNormalNextRemoved = () => {
@@ -299,6 +364,13 @@ export class TourServiceService {
                       })
                       .subscribe();
                     this.tour.next();
+                    this.tourStepChange.next({
+                      tourId: tourInstance.tourId,
+                      currentStepId: er.nextStepId,
+                      previousStepId: er.id,
+                      moveForward: true,
+                    });
+                    this.pauseAllVideos();
                   };
                   const wrapperNormalPrevRemoved = () => {
                     this.tourStoreService
@@ -313,6 +385,13 @@ export class TourServiceService {
                       })
                       .subscribe();
                     this.tour.back();
+                    this.tourStepChange.next({
+                      tourId: tourInstance.tourId,
+                      currentStepId: er.nextStepId,
+                      previousStepId: er.id,
+                      moveForward: false,
+                    });
+                    this.pauseAllVideos();
                   };
                   this.actionAssignment(
                     er,
@@ -337,7 +416,7 @@ export class TourServiceService {
     tourId: string,
     params?: {[key: string]: string},
     props?: Props,
-    filterFn?: filterFunction,
+    filterFn?: FilterFunction,
   ): void {
     this.tourStoreService
       .loadTour({
@@ -346,14 +425,17 @@ export class TourServiceService {
       })
       .subscribe(tourInstance => {
         if (tourInstance && tourInstance.tourSteps.length > 0) {
-          let steps = JSON.stringify(tourInstance.tourSteps);
-          Object.keys(params).forEach(key => {
-            steps = steps.replace(
-              new RegExp(`\\{\\{${key}\\}\\}`),
-              params[key],
-            );
-          });
-          tourInstance.tourSteps = JSON.parse(steps);
+          if (params) {
+            let steps = JSON.stringify(tourInstance.tourSteps);
+
+            Object.keys(params).forEach(key => {
+              steps = steps.replace(
+                new RegExp(`\\{\\{${key}\\}\\}`),
+                params[key],
+              );
+            });
+            tourInstance.tourSteps = JSON.parse(steps);
+          }
           this.tour = new Shepherd.Tour({
             useModalOverlay: true,
             defaultStepOptions: {
@@ -431,4 +513,7 @@ export class TourServiceService {
       return Status.InProgress;
     }
   }
+  private pauseAllVideos() {
+    document.querySelectorAll('video').forEach(vid => vid.pause());
+  }
 }
diff --git a/packages/user-onboarding/projects/user-onboarding-lib/src/models/filter-function.ts b/packages/user-onboarding/projects/user-onboarding-lib/src/models/filter-function.ts
@@ -0,0 +1,3 @@
+import {TourStep} from './tour-step';
+
+export type FilterFunction = (steps: TourStep[]) => TourStep[];
diff --git a/packages/user-onboarding/projects/user-onboarding-lib/src/models/filterFunction.ts b/packages/user-onboarding/projects/user-onboarding-lib/src/models/filterFunction.ts
diff --git a/packages/user-onboarding/projects/user-onboarding-lib/src/models/index.ts b/packages/user-onboarding/projects/user-onboarding-lib/src/models/index.ts
@@ -1,10 +1,12 @@
-export * from './stateParameters';
+export * from './state-parameters';
 export * from './tour';
-export * from './tourButton';
-export * from './tourParameters';
-export * from './tourStep';
-export * from './parameterModel';
-export * from './videoModel';
-export * from './filterFunction';
+export * from './tour-button';
+export * from './tour-parameters';
+export * from './tour-step';
+export * from './parameter-model';
+export * from './video-model';
+export * from './filter-function';
 export * from './props';
 export * from './status';
+export * from './tour-step-change';
+export * from './tour-complete';
diff --git a/...boarding-lib/src/models/parameterModel.ts → ...oarding-lib/src/models/parameter-model.ts b/...boarding-lib/src/models/parameterModel.ts → ...oarding-lib/src/models/parameter-model.ts
diff --git a/...oarding-lib/src/models/stateParameters.ts → ...arding-lib/src/models/state-parameters.ts b/...oarding-lib/src/models/stateParameters.ts → ...arding-lib/src/models/state-parameters.ts
diff --git a/...r-onboarding-lib/src/models/tourButton.ts → ...-onboarding-lib/src/models/tour-button.ts b/...r-onboarding-lib/src/models/tourButton.ts → ...-onboarding-lib/src/models/tour-button.ts
diff --git a/packages/user-onboarding/projects/user-onboarding-lib/src/models/tour-complete.ts b/packages/user-onboarding/projects/user-onboarding-lib/src/models/tour-complete.ts
@@ -0,0 +1,6 @@
+import Shepherd from 'shepherd.js';
+export type TourComplete = {
+  index: number;
+  tour: Shepherd.Tour;
+  tourId: string;
+};
diff --git a/...boarding-lib/src/models/tourParameters.ts → ...oarding-lib/src/models/tour-parameters.ts b/...boarding-lib/src/models/tourParameters.ts → ...oarding-lib/src/models/tour-parameters.ts
@@ -1,4 +1,4 @@
-import {TourStep} from './tourStep';
+import {TourStep} from './tour-step';
 
 export interface SaveTourParameters {
   tourId: string;

diff --git a/packages/user-onboarding/projects/user-onboarding-lib/src/models/tour-step-change.ts b/packages/user-onboarding/projects/user-onboarding-lib/src/models/tour-step-change.ts
@@ -0,0 +1,6 @@
+export type TourStepChange = {
+  tourId: string;
+  currentStepId: string;
+  previousStepId: string;
+  moveForward: boolean;
+};
diff --git a/...ser-onboarding-lib/src/models/tourStep.ts → ...er-onboarding-lib/src/models/tour-step.ts b/...ser-onboarding-lib/src/models/tourStep.ts → ...er-onboarding-lib/src/models/tour-step.ts
@@ -1,4 +1,4 @@
-import {TourButton} from './tourButton';
+import {TourButton} from './tour-button';
 
 export interface TourStep {
   id: string;

diff --git a/packages/user-onboarding/projects/user-onboarding-lib/src/models/tour.ts b/packages/user-onboarding/projects/user-onboarding-lib/src/models/tour.ts
@@ -1,6 +1,6 @@
 import {Props} from './props';
 import {Status} from './status';
-import {TourStep} from './tourStep';
+import {TourStep} from './tour-step';
 export interface TourState {
   sessionId: string;
   status: Status;

diff --git a/...r-onboarding-lib/src/models/videoModel.ts → ...-onboarding-lib/src/models/video-model.ts b/...r-onboarding-lib/src/models/videoModel.ts → ...-onboarding-lib/src/models/video-model.ts
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import {TourStep} from './tour-step';

		export type FilterFunction = (steps: TourStep[]) => TourStep[];