@reveldigital/player-client 0.0.15 → 0.0.16-beta.0

package/karma.conf.js

@@ -0,0 +1,32 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../../../coverage/reveldigital/player-client'),
+      reports: ['html', 'lcovonly', 'text-summary'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/reveldigital/player-client",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,39 +1,20 @@
-{
-  "name": "@reveldigital/player-client",
-  "version": "0.0.15",
-  "description": "Helper library for interfacing with the Revel Digital player",
-  "repository": {
-    "url": "https://github.com/RevelDigital/reveldigital-client-library"
-  },
-  "author": {
-    "name": "Mike Tinnes"
-  },
-  "license": "",
-  "peerDependencies": {
-    "@angular/common": "~13.3.9",
-    "@angular/core": "~13.3.9"
-  },
-  "dependencies": {
-    "tslib": "^2.4.1"
-  },
-  "module": "fesm2015/reveldigital-player-client.mjs",
-  "es2020": "fesm2020/reveldigital-player-client.mjs",
-  "esm2020": "esm2020/reveldigital-player-client.mjs",
-  "fesm2020": "fesm2020/reveldigital-player-client.mjs",
-  "fesm2015": "fesm2015/reveldigital-player-client.mjs",
-  "typings": "reveldigital-player-client.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./reveldigital-player-client.d.ts",
-      "esm2020": "./esm2020/reveldigital-player-client.mjs",
-      "es2020": "./fesm2020/reveldigital-player-client.mjs",
-      "es2015": "./fesm2015/reveldigital-player-client.mjs",
-      "node": "./fesm2015/reveldigital-player-client.mjs",
-      "default": "./fesm2020/reveldigital-player-client.mjs"
-    }
-  },
-  "sideEffects": false
-}
+{
+  "name": "@reveldigital/player-client",
+  "version": "0.0.16-beta.0",
+  "description": "Helper library for interfacing Angular apps with the Revel Digital player",
+  "repository": {
+    "url": "https://github.com/RevelDigital/reveldigital-client-library"
+  },
+  "author": {
+    "name": "Mike Tinnes"
+  },
+  "license": "",
+  "peerDependencies": {
+    "@angular/common": "^13.0.0",
+    "@angular/core": "^13.0.0",
+    "js-yaml": "^4.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.4.1"
+  }
+}

package/src/lib/app-init.service.ts

@@ -0,0 +1,82 @@
+import { Injectable, isDevMode } from '@angular/core';
+import { HttpClient } from "@angular/common/http";
+import yaml from "js-yaml";
+import { ActivatedRoute, Router } from "@angular/router";
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AppInitService {
+
+  timestamp: any = new Date().getTime();
+
+  constructor(public http: HttpClient, private _route: ActivatedRoute, private _router: Router) {
+    let lastUptime = localStorage.getItem('uptime') || '30';
+    console.log('Last uptime was', lastUptime, 'seconds');
+  }
+
+  init(): Promise<any> {
+    return new Promise<void>(async (resolve) => {
+      if (isDevMode()) {
+        console.log('Development Mode');
+
+        /**
+         * Shim the shindig prefs functionality for dev mode
+         */
+        (<any>window).gadgets = {
+
+          Prefs: class {
+            getString(key: string) { return this.getParameterByName(key) }
+
+            getArray(key: string) { return this.getParameterByName(key).split(',') }
+
+            getBool(key: string) { return this.getParameterByName(key) === 'true' }
+
+            getCountry() { }
+
+            getFloat(key: string) { return parseFloat(this.getParameterByName(key)) }
+
+            getInt(key: string) { return parseInt(this.getParameterByName(key)) }
+
+            getLang() { }
+
+            getParameterByName(name: string, url = window.location.href): string {
+              name = name.replace(/[\[\]]/g, '\\$&');
+              let regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
+                results = regex.exec(url);
+              if (!results) return '';
+              if (!results[2]) return '';
+              return decodeURIComponent(results[2].replace(/\+/g, ' '));
+            }
+          }
+        };
+
+        this.http.get('assets/user-prefs.yml', {
+          responseType: 'text'
+        }).subscribe(data => {
+          try {
+            const doc: any = yaml.load(data);
+            let params: any = {}
+            for (const val of doc.prefs) {
+              params[val.name] = val.default_value
+            }
+            this.navigate(params)
+          } catch (e) {
+            console.log(`Unable to load user preferences YAML definition file: ${e}`)
+          }
+        })
+      }
+      resolve();
+    });
+  }
+
+  navigate(params: any) {
+    // changes the route without moving from the current view or
+    // triggering a navigation event,
+    this._router.navigate([], {
+      relativeTo: this._route,
+      queryParams: params,
+    });
+  }
+}

package/src/lib/player-client.module.ts

@@ -0,0 +1,27 @@
+import { APP_INITIALIZER, NgModule } from '@angular/core';
+import { PlayerClientService } from './player-client.service';
+import { AppInitService } from './app-init.service';
+import { HttpClientModule } from '@angular/common/http';
+import { RouterModule, Routes } from '@angular/router';
+
+
+@NgModule({
+  imports: [
+    HttpClientModule,
+    RouterModule.forRoot([])
+  ],
+  providers: [{
+    provide: APP_INITIALIZER,
+    useFactory: initializeApp,
+    deps: [AppInitService, PlayerClientService],
+    multi: true
+  }]
+})
+export class PlayerClientModule { }
+
+function initializeApp(appInitService: AppInitService) {
+  return async () => {
+    PlayerClientService.init({});
+    await appInitService.init();
+  }
+}

package/src/lib/player-client.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PlayerClientService } from './player-client.service';
+
+describe('PlayerClientService', () => {
+  let service: PlayerClientService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PlayerClientService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/player-client.service.ts

@@ -0,0 +1,419 @@
+import { Injectable, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { BehaviorSubject, fromEvent, Subject, Subscription } from 'rxjs';
+import { filter, map, share, tap } from 'rxjs/operators';
+
+
+// So that TypeScript doesn't complain, we're going to augment the GLOBAL / WINDOW 
+// name-space definition to include the Tracker API. This also provides us with a place
+// to actually DOCUMENT the API so that our developers aren't guessing about what's
+// available on the library.
+declare global {
+  var Client: Client;
+}
+
+export interface Client {
+
+  callback(...args: any[]): void;
+
+  getDeviceTime(date?: Date): Promise<string>;
+
+  getDeviceTimeZoneName(): Promise<string>;
+
+  getDeviceTimeZoneID(): Promise<string>;
+
+  getDeviceTimeZoneOffset(): Promise<number>;
+
+  getLanguageCode(): Promise<string>;
+
+  getDeviceKey(): Promise<string>;
+
+  sendCommand(name: string, arg: string): void;
+
+  sendRemoteCommand(deviceKeys: string[], name: string, arg: string): void;
+
+  track(eventName: string, properties?: string): void;
+
+  timeEvent(eventName: string): void;
+
+  newEventSession(id?: string): void;
+
+  getRevelRoot(): Promise<string>;
+
+  getCommandMap(): Promise<string>;
+}
+
+export interface EventProperties {
+  [key: string]: any;
+}
+
+export interface Command {
+  name: string;
+  arg: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PlayerClientService implements OnDestroy {
+
+  private clientPromise: Promise<Client> | null;
+
+  public onCommand$ = new Subject<Command>();
+  public onReady$ = new BehaviorSubject(false);
+  public onStart$ = new Subject();
+  public onStop$ = new Subject();
+
+  //
+  // Three methods available for calling into the library:
+  //
+  // 1) Using dispatchEvent() with the following custom events
+  // 2) Using the window scoped RevelDigital object as defined in the constructor
+  //
+  private onStartSub: Subscription;
+  private onStartEvt$ = fromEvent(document, 'RevelDigital.Start').pipe(
+    share(),
+    tap(this.onStart$)
+  );
+  private onStopSub: Subscription;
+  private onStopEvt$ = fromEvent(document, 'RevelDigital.Stop').pipe(
+    share(),
+    tap(this.onStop$)
+  );
+  private onCommandSub: Subscription;
+  private onCommandEvt$ = fromEvent<Command>(document, 'RevelDigital.Command').pipe(
+    map((e: any) => { return { name: e.detail.name, arg: e.detail.arg } as Command }),
+    share(),
+    tap(this.onCommand$)
+  );
+
+  // private onPostMessageSub: Subscription;
+  // private onPostMessageEvt$ = fromEvent(window, 'message').pipe(
+  //   filter((messageEvent: MessageEvent) =>
+  //     messageEvent.source !== window.parent &&
+  //     typeof messageEvent.data === 'string' &&
+  //     messageEvent.data.startsWith('reveldigital:')),
+  //   map((e: any) => { return JSON.parse(e.substring(13)) as Command }),
+  //   share(),
+  //   tap(this.onCommand$)
+  // );
+
+
+  constructor(zone: NgZone) {
+
+    let self = this;
+    (window as any).RevelDigital = {
+      Controller: {
+        onCommand: function (name: string, arg: string) {
+          zone.run(() => {
+            self.onCommand$.next({ name: name, arg: arg });
+          });
+        },
+        onStart: function () {
+          zone.run(() => {
+            self.onStart$.next();
+          });
+        },
+        onStop: function () {
+          zone.run(() => {
+            self.onStop$.next();
+          });
+        }
+      }
+    }
+
+    this.onStartSub = this.onStartEvt$.subscribe(() => { });
+    this.onStopSub = this.onStopEvt$.subscribe(() => { });
+    this.onCommandSub = this.onCommandEvt$.subscribe(() => { });
+
+    this.clientPromise = null;
+
+    this.onReady$.next(true);
+  }
+
+  ngOnDestroy(): void {
+
+    this.onStartSub?.unsubscribe();
+    this.onStopSub?.unsubscribe();
+    this.onCommandSub?.unsubscribe();
+
+    this.onReady$.next(false);
+  }
+
+  public static init(data: any) {
+
+    console.log("init()");
+  }
+
+  public callback(...args: any[]): void {
+
+    this.getClient().then((client) => {
+
+      switch (args.length) {
+        case 0:
+          client.callback();
+          break;
+        case 1:
+          client.callback(args[0]);
+          break;
+        case 2:
+          client.callback(args[1]);
+          break;
+        case 3:
+          client.callback(args[2]);
+          break;
+        case 4:
+          client.callback(args[3]);
+          break;
+        case 5:
+          client.callback(args[4]);
+          break;
+      }
+    })
+  }
+
+  public async getDeviceTime(date?: Date): Promise<string> {
+
+    const client = await this.getClient();
+
+    if (date !== undefined) {
+      return client.getDeviceTime(date);
+    }
+    return client.getDeviceTime();
+  }
+
+  public async getDeviceTimeZoneName(): Promise<string> {
+
+    const client = await this.getClient();
+
+    return client.getDeviceTimeZoneName();
+  }
+
+  public async getDeviceTimeZoneID(): Promise<string> {
+
+    const client = await this.getClient();
+
+    return client.getDeviceTimeZoneID();
+  }
+
+  public async getDeviceTimeZoneOffset(): Promise<number> {
+
+    const client = await this.getClient();
+
+    return client.getDeviceTimeZoneOffset();
+  }
+
+  public async getLanguageCode(): Promise<string> {
+
+    const client = await this.getClient();
+
+    return client.getLanguageCode();
+  }
+
+  public async getDeviceKey(): Promise<string> {
+
+    const client = await this.getClient();
+
+    return client.getDeviceKey();
+  }
+
+  public sendCommand(name: string, arg: string): void {
+
+    this.getClient().then((client) => {
+      client.sendCommand(name, arg);
+    })
+  }
+
+  public sendRemoteCommand(deviceKeys: string[], name: string, arg: string): void {
+
+    this.getClient().then((client) => {
+      client.sendRemoteCommand(deviceKeys, name, arg);
+    });
+  }
+
+  public track(eventName: string, properties?: EventProperties): void {
+
+    this.getClient().then((client) => {
+      client.track(eventName, JSON.stringify(properties));
+    })
+  }
+
+  public timeEvent(eventName: string): void {
+
+    this.getClient().then((client) => {
+      client.timeEvent(eventName);
+    })
+  }
+
+  public newEventSession(id?: string): void {
+
+    this.getClient().then((client) => {
+      if (id !== undefined) {
+        client.newEventSession();
+      } else {
+        client.newEventSession(id);
+      }
+    })
+  }
+
+  public async getRevelRoot(): Promise<string> {
+
+    const client = await this.getClient();
+
+    return client.getRevelRoot();
+  }
+
+  public async getCommandMap(): Promise<any> {
+
+    const client = await this.getClient();
+
+    return JSON.parse(await client.getCommandMap());
+
+    // let map = new Map<string, any>();
+
+    // let obj = JSON.parse(await client.getCommandMap());
+    // for (let key in obj) {
+    //   map.set(key, obj[key]);
+    // }
+    // return map;
+  }
+
+  // ---
+  // PRIVATE METHODS.
+  // ---
+
+  private getClient(): Promise<Client> {
+
+    if (this.clientPromise) {
+
+      return (this.clientPromise);
+    }
+
+    if (window.Client) {
+
+      return (this.clientPromise = Promise.resolve(window.Client));
+    }
+
+    // A "complete" status indicates that the "load" event has been fired on the
+    // window; and, that all sub-resources such as Scripts, Images, and Frames have
+    // been loaded.
+    if (window.document.readyState === "complete") {
+
+      // If this event has fired AND the 3rd-party script isn't available (see IF-
+      // condition BEFORE this one), it means that the 3rd-party script either
+      // failed on the network or was BLOCKED by an ad-blocker. As such, we have to
+      // fall-back to using a mock API.
+      return (this.clientPromise = Promise.resolve(new NoopClient()));
+    }
+
+    // ASSERT: If we made it this far, the document has not completed loading (but it
+    // may be in an "interactive" state which is when I believe that the Angular app
+    // gets bootstrapped). As such, we need bind to the LOAD event to wait for our
+    // third-party scripts to load (or fail to load, or be blocked).
+    this.clientPromise = new Promise<Client>(
+      (resolve) => {
+
+        window.addEventListener(
+          "load",
+          function handleWindowLoad() {
+
+            // At this point, the 3rd-party library is either available or
+            // it's not - there's no further loading to do. If it's not
+            // present on the global scope, we're going to fall-back to using
+            // a mock API.
+            resolve(window.Client || new NoopClient());
+          }
+        );
+
+      }
+    );
+
+    return (this.clientPromise);
+  }
+
+}
+
+
+
+// ----------------------------------------------------------------------------------- //
+// ----------------------------------------------------------------------------------- //
+
+// I provide a mock API for the 3rd-party script. This just allows the consuming code to
+// act as though the library is available even if it failed to load (example, it was
+// blocked by an ad-blocker).
+class NoopClient implements Client {
+
+  constructor() {
+
+    console.warn("Client API not available, falling back to mock API.");
+  }
+
+  public callback(...args: any[]): void {
+
+    // NOOP implement, nothing to do....
+  }
+
+  public getDeviceTime(date?: Date): Promise<string> {
+
+    return Promise.resolve(null);
+  }
+
+  public async getDeviceTimeZoneName(): Promise<string> {
+
+    return Promise.resolve(null);
+  }
+
+  public async getDeviceTimeZoneID(): Promise<string> {
+
+    return Promise.resolve(null);
+  }
+
+  public async getDeviceTimeZoneOffset(): Promise<number> {
+
+    return Promise.resolve(null);
+  }
+
+  public async getLanguageCode(): Promise<string> {
+
+    return Promise.resolve(null);
+  }
+
+  public async getDeviceKey(): Promise<string> {
+
+    return Promise.resolve(null);
+  }
+
+  public sendCommand(name: string, arg: string): void {
+
+    // NOOP implement, nothing to do....
+  }
+
+  public sendRemoteCommand(deviceKeys: string[], name: string, arg: string) {
+
+    // NOOP implement, nothing to do....
+  }
+
+  public track(eventName: string, properties?: string): void {
+
+    // NOOP implement, nothing to do....
+  }
+
+  public timeEvent(eventName: string): void {
+
+    // NOOP implement, nothing to do....
+  }
+
+  public newEventSession(id?: string): void {
+
+    // NOOP implement, nothing to do....
+  }
+
+  public async getRevelRoot(): Promise<string> {
+
+    return Promise.resolve(null);
+  }
+
+  public async getCommandMap(): Promise<string> {
+
+    return Promise.resolve('{}');
+  }
+}

package/{public-api.d.ts → src/public-api.ts}

@@ -1,2 +1,6 @@
-export * from './lib/player-client.service';
-export * from './lib/player-client.module';
+/*
+ * Public API Surface of player-client
+ */
+
+export * from './lib/player-client.service';
+export * from './lib/player-client.module';

package/src/test.ts

@@ -0,0 +1,26 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);