Bump pine-roots to v1.2.2 (#8)

* minor tweaks

* update types

* remove unknown

* bump pine roots

.npmrc

@@ -1,3 +1,3 @@
 registry=https://npm.pkg.github.com/king-prawns
 //npm.pkg.github.com/:_authToken=${NPM_AUTH_TOKEN}
-save-exact=trues
+save-exact=true

package.json

@@ -65,7 +65,7 @@
     "webpack-merge": "5.8.0"
   },
   "dependencies": {
-    "@king-prawns/pine-roots": "1.2.1",
+    "@king-prawns/pine-roots": "1.2.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "shaka-player": "3.2.1"

src/components/VideoPlayer.tsx

@@ -1,7 +1,7 @@
 import 'shaka-player/dist/controls.css';
 import './VideoPlayer.css';
 import React from 'react';
-import {pinefy, PlayerState} from '@king-prawns/pine-roots';
+import {pinefy, EPlayerState} from '@king-prawns/pine-roots';
 import connectDriver from '../core/connectDriver';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -60,10 +60,11 @@ class VideoPlayer extends React.Component<IProps, IState> {
       // eslint-disable-next-line no-console
       console.log('The video has now been loaded!');
     } catch (e: any) {
-      const {code, error} = e;
+      const {code, data} = e;
       // eslint-disable-next-line no-console
-      console.error('Error code', code, 'object', error);
-      driver.onPlayerStateUpdate(PlayerState.ERRORED);
+      console.error('Error code', code, 'message', data[1]?.message);
+      driver.onPlayerStateUpdate(EPlayerState.ERRORED);
+      player.destroy();
     }
   }
 

src/core/connectDriver.ts

@@ -1,4 +1,4 @@
-import {Driver, PlayerState} from '@king-prawns/pine-roots';
+import {IDriver, EPlayerState} from '@king-prawns/pine-roots';
 import StateMachine from './stateMachine';
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -8,11 +8,15 @@ const connectDriver = (
   player: any,
   controls: any,
   videoElement: HTMLVideoElement,
-  driver: Driver
+  driver: IDriver
 ): void => {
   let polling: number;
 
   const getPlayerStats = (): void => {
+    if (!player) {
+      window.clearInterval(polling);
+    }
+
     const stats = player.getStats();
     const {streamBandwidth, estimatedBandwidth} = stats;
 
@@ -69,18 +73,21 @@ const connectDriver = (
   const stateMachine = new StateMachine(driver, videoElement);
 
   player.addEventListener('loading', () => {
-    stateMachine.transition(PlayerState.LOADING);
+    stateMachine.transition(EPlayerState.LOADING);
   });
   player.addEventListener('buffering', (event: any) => {
     if (event.buffering) {
-      stateMachine.transition(PlayerState.BUFFERING);
+      stateMachine.transition(EPlayerState.BUFFERING);
     } else {
       stateMachine.endBuffering();
     }
   });
-  player.addEventListener('error', () => {
-    stateMachine.transition(PlayerState.ERRORED);
-    clearInterval(polling);
+  player.addEventListener('error', (e: any) => {
+    const {code, data} = e.detail;
+    // eslint-disable-next-line no-console
+    console.error('Error code', code, 'message', data[1]?.message);
+    stateMachine.transition(EPlayerState.ERRORED);
+    window.clearInterval(polling);
     player.destroy();
   });
   videoElement.addEventListener('seeking', () => {
@@ -89,18 +96,18 @@ const connectDriver = (
     }
   });
   videoElement.addEventListener('playing', () => {
-    stateMachine.transition(PlayerState.PLAYING);
+    stateMachine.transition(EPlayerState.PLAYING);
   });
   videoElement.addEventListener('pause', () => {
     if (controls.isSeeking() || videoElement.ended) {
       return;
     }
-    stateMachine.transition(PlayerState.PAUSED);
+    stateMachine.transition(EPlayerState.PAUSED);
   });
   videoElement.addEventListener('ended', () => {
-    clearInterval(polling);
+    window.clearInterval(polling);
     polling = 0;
-    stateMachine.transition(PlayerState.ENDED);
+    stateMachine.transition(EPlayerState.ENDED);
   });
 };
 

src/core/stateMachine.ts

@@ -1,52 +1,55 @@
-import {Driver, PlayerState} from '@king-prawns/pine-roots';
+import {IDriver, EPlayerState} from '@king-prawns/pine-roots';
 
 class StateMachine {
-  private _currentState: PlayerState = PlayerState.UNKNOWN;
+  private _currentState?: EPlayerState;
   private _isBuffering = false;
 
-  constructor(private driver: Driver, private videoElement: HTMLVideoElement) {}
+  constructor(
+    private driver: IDriver,
+    private videoElement: HTMLVideoElement
+  ) {}
 
-  private onPlayerStateUpdate(state: PlayerState): void {
+  private onPlayerStateUpdate(state: EPlayerState): void {
     if (this._currentState !== state) {
       this._currentState = state;
       this.driver.onPlayerStateUpdate(state);
     }
   }
 
-  public transition(state: PlayerState): void {
+  public transition(state: EPlayerState): void {
     switch (state) {
-      case PlayerState.LOADING:
-        if (this._currentState === PlayerState.UNKNOWN) {
-          this.onPlayerStateUpdate(PlayerState.LOADING);
+      case EPlayerState.LOADING:
+        if (!this._currentState) {
+          this.onPlayerStateUpdate(EPlayerState.LOADING);
         }
         break;
-      case PlayerState.BUFFERING:
+      case EPlayerState.BUFFERING:
         if (
-          this._currentState === PlayerState.PLAYING ||
-          this._currentState === PlayerState.LOADING ||
-          this._currentState === PlayerState.PAUSED ||
-          this._currentState === PlayerState.ENDED
+          this._currentState === EPlayerState.PLAYING ||
+          this._currentState === EPlayerState.LOADING ||
+          this._currentState === EPlayerState.PAUSED ||
+          this._currentState === EPlayerState.ENDED
         ) {
           this._isBuffering = true;
-          this.onPlayerStateUpdate(PlayerState.BUFFERING);
+          this.onPlayerStateUpdate(EPlayerState.BUFFERING);
         }
         break;
-      case PlayerState.PLAYING:
-        if (this._currentState === PlayerState.PAUSED || !this._isBuffering) {
+      case EPlayerState.PLAYING:
+        if (this._currentState === EPlayerState.PAUSED || !this._isBuffering) {
           this.onPlayerStateUpdate(state);
         }
         break;
-      case PlayerState.PAUSED:
-        if (this._currentState === PlayerState.PLAYING || !this._isBuffering) {
+      case EPlayerState.PAUSED:
+        if (this._currentState === EPlayerState.PLAYING || !this._isBuffering) {
           this.onPlayerStateUpdate(state);
         }
         break;
-      case PlayerState.ENDED:
-        if (this._currentState === PlayerState.PLAYING) {
+      case EPlayerState.ENDED:
+        if (this._currentState === EPlayerState.PLAYING) {
           this.onPlayerStateUpdate(state);
         }
         break;
-      case PlayerState.ERRORED:
+      case EPlayerState.ERRORED:
         this.onPlayerStateUpdate(state);
         break;
     }
@@ -55,9 +58,9 @@ class StateMachine {
   public endBuffering(): void {
     this._isBuffering = false;
     if (this.videoElement.paused) {
-      this.onPlayerStateUpdate(PlayerState.PAUSED);
+      this.onPlayerStateUpdate(EPlayerState.PAUSED);
     } else {
-      this.onPlayerStateUpdate(PlayerState.PLAYING);
+      this.onPlayerStateUpdate(EPlayerState.PLAYING);
     }
   }
 }