diff --git a/.npmrc b/.npmrc index 04e97ce..687d4b9 100644 --- a/.npmrc +++ b/.npmrc @@ -1,3 +1,3 @@ registry=https://npm.pkg.github.com/king-prawns //npm.pkg.github.com/:_authToken=${NPM_AUTH_TOKEN} -save-exact=trues \ No newline at end of file +save-exact=true \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 84efe2c..f64fa74 100644 --- a/package-lock.json +++ b/package-lock.json @@ -150,9 +150,9 @@ } }, "@king-prawns/pine-roots": { - "version": "1.2.1", - "resolved": "https://npm.pkg.github.com/download/@king-prawns/pine-roots/1.2.1/3b90a9434f5b82aa4a22289d082861bab8cb1e60cbacf90b251c65b9039a5960", - "integrity": "sha512-bO3XLKMP5wBt8cjp22nIxn2SscvfS6Bf/aC//3NmdeNY7YVs/ILDT1eQ/cmO5lm79uaUDKpwlEsUL6myvL6oJQ==", + "version": "1.2.2", + "resolved": "https://npm.pkg.github.com/download/@king-prawns/pine-roots/1.2.2/ac68e8596d6d775f5fe05bfd3047afdc922c1b206bd5d4a1c8fccef17e546558", + "integrity": "sha512-H0DDT0pmogYbiYhyFBCER5HlwPVJgeoKYhXOi7FoCEcBNgSVJymUC6cK2NhPTM6gJxA3wJp+FPLouWZnlntRsQ==", "requires": { "socket.io-client": "4.4.0" } diff --git a/package.json b/package.json index f6d3c94..2a713a5 100644 --- a/package.json +++ b/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" diff --git a/src/components/VideoPlayer.tsx b/src/components/VideoPlayer.tsx index e5a174e..7b989be 100644 --- a/src/components/VideoPlayer.tsx +++ b/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 { // 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(); } } diff --git a/src/core/connectDriver.ts b/src/core/connectDriver.ts index 45e6bd6..2018bc5 100644 --- a/src/core/connectDriver.ts +++ b/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); }); }; diff --git a/src/core/stateMachine.ts b/src/core/stateMachine.ts index fe8f404..3d8e9ec 100644 --- a/src/core/stateMachine.ts +++ b/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); } } }