fix: move state to player

packages/playback/src/lib/pipelines/base-pipeline.ts

@@ -1,6 +1,5 @@
 import type { IPipeline, IPipelineDependencies } from '../types/pipeline.declarations';
 import { PlayerTimeRange } from '../models/player-time-range';
-import type { PlaybackState } from '../consts/playback-state';
 import type { IPlaybackStats } from '../types/playback-stats.declarations';
 import type { INetworkManager } from '../types/network.declarations';
 import type { IQualityLevel } from '../types/quality-level.declarations';
@@ -46,8 +45,6 @@ export abstract class BasePipeline implements IPipeline {
 
   public abstract getThumbnailTracks(): Array<IPlayerThumbnailTrack>;
 
-  public abstract getPlaybackState(): PlaybackState;
-
   public abstract start(): void;
 
   public getPlaybackStats(): IPlaybackStats {

packages/playback/src/lib/pipelines/native/native-pipeline.ts

@@ -3,7 +3,6 @@ import type { IPipelineDependencies } from '../../types/pipeline.declarations';
 import type { IPlayerAudioTrack } from '../../types/audio-track.declarations';
 import { PlayerAudioTrack } from '../../models/player-audio-track';
 import type { IQualityLevel } from '../../types/quality-level.declarations';
-import { PlaybackState } from '../../consts/playback-state';
 import type { IPlayerTextTrack } from '../../types/text-track.declarations';
 import {
   type IRemoteVttThumbnailTrackOptions,
@@ -14,13 +13,8 @@ import { PlayerThumbnailTrack } from '../../models/player-thumbnail-tracks';
 import { TextTrackKind, TextTrackMode, Thumbnails } from '../../consts/text-tracks';
 
 export class NativePipeline extends BasePipeline {
-  private playbackState_: PlaybackState = PlaybackState.Idle;
-
   private constructor(dependencies: IPipelineDependencies) {
     super(dependencies);
-    this.videoElement_.onwaiting = (): void => {
-      this.playbackState_ = PlaybackState.Buffering;
-    };
   }
 
   public static create(dependencies: IPipelineDependencies): NativePipeline {
@@ -76,9 +70,6 @@ export class NativePipeline extends BasePipeline {
     }
     return [];
   }
-  public getPlaybackState(): PlaybackState {
-    return this.playbackState_;
-  }
 
   public getAudioTracks(): Array<IPlayerAudioTrack> {
     if (this.videoElement_.audioTracks) {
@@ -127,22 +118,18 @@ export class NativePipeline extends BasePipeline {
 
     // TODO: check for autoplay/preload/etc
     this.videoElement_.load();
-    this.playbackState_ = PlaybackState.Loading;
   }
 
   public dispose(): void {
     this.videoElement_.removeAttribute('src');
     this.videoElement_.load();
-    this.playbackState_ = PlaybackState.Idle;
   }
 
   public play(): void {
     super.play();
-    this.playbackState_ = PlaybackState.Playing;
   }
 
   public pause(): void {
     super.pause();
-    this.playbackState_ = PlaybackState.Paused;
   }
 }

packages/playback/src/lib/player/base-player.ts

@@ -400,6 +400,7 @@ export abstract class BasePlayer {
     this.activeVideoElement_.addEventListener('volumechange', this.handleVolumeChange_);
     this.activeVideoElement_.addEventListener('ratechange', this.handleRateChange_);
     this.activeVideoElement_.addEventListener('timeupdate', this.handleTimeUpdate_);
+    this.activeVideoElement_.addEventListener('waiting', this.handleWaiting_);
     // EME
     this.activeVideoElement_.addEventListener('encrypted', this.handleEncryptedEvent_);
     this.activeVideoElement_.addEventListener('waitingforkey', this.handleWaitingForKeyEvent_);
@@ -428,6 +429,7 @@ export abstract class BasePlayer {
     this.activeVideoElement_.removeEventListener('volumechange', this.handleVolumeChange_);
     this.activeVideoElement_.removeEventListener('ratechange', this.handleRateChange_);
     this.activeVideoElement_.removeEventListener('timeupdate', this.handleTimeUpdate_);
+    this.activeVideoElement_.removeEventListener('waiting', this.handleWaiting_);
     // EME
     this.activeVideoElement_.removeEventListener('encrypted', this.handleEncryptedEvent_);
     this.activeVideoElement_.removeEventListener('waitingforkey', this.handleWaitingForKeyEvent_);
@@ -575,6 +577,10 @@ export abstract class BasePlayer {
     this.eventEmitter_.emitEvent(new CurrentTimeChangedEvent(target.currentTime));
   };
 
+  protected readonly handleWaiting_ = (): void => {
+    this.transitionPlaybackState_(PlaybackState.Buffering);
+  };
+
   protected readonly handleEncryptedEvent_ = (event: MediaEncryptedEvent): void => {
     this.logger_.debug('received encrypted event', event);
 
@@ -621,6 +627,7 @@ export abstract class BasePlayer {
    */
   public play(): void {
     this.activeVideoElement_?.play();
+    this.transitionPlaybackState_(PlaybackState.Playing);
     // TODO: pass command to loader/pipeline
   }
 
@@ -629,6 +636,7 @@ export abstract class BasePlayer {
    */
   public pause(): void {
     this.activeVideoElement_?.pause();
+    this.transitionPlaybackState_(PlaybackState.Paused);
     // TODO: pass command to loader/pipeline
   }
 

packages/playback/src/lib/types/pipeline.declarations.ts

@@ -1,4 +1,3 @@
-import type { PlaybackState } from '../consts/playback-state';
 import type { IPlaybackStats } from './playback-stats.declarations';
 import type { ILogger } from './logger.declarations';
 import type { INetworkManager } from './network.declarations';
@@ -47,7 +46,6 @@ export interface IPipelineFactoryConfiguration {
 export interface IPipeline {
   play(): void;
   pause(): void;
-  getPlaybackState(): PlaybackState;
   seek(seekTarget: number): boolean;
   getSeekableRanges(): Array<IPlayerTimeRange>;
   getBufferedRanges(): Array<IPlayerTimeRange>;

packages/playback/test/lib/pipelines/native/native-pipeline.test.ts

@@ -7,7 +7,6 @@ import type {
 import { NativePipeline } from '../../../../src/lib/pipelines/native/native-pipeline';
 import { beforeEach, describe, expect, it } from 'vitest';
 import { TextTrackKind, TextTrackMode } from '../../../../src/lib/consts/text-tracks';
-import { PlaybackState } from '../../../../src/lib/consts/playback-state';
 
 describe('NativePipeline', () => {
   let nativePipeline: NativePipeline;
@@ -209,30 +208,15 @@ describe('NativePipeline', () => {
 
     it('should set src and state on start', () => {
       const expectedSrc = 'https://foo.bar.m3u8/';
-      let expectedState = PlaybackState.Idle;
       expect(videoElement.src).toBe('');
-      expect(nativePipeline.getPlaybackState()).toBe(expectedState);
       nativePipeline.start();
-      expectedState = PlaybackState.Loading;
       expect(videoElement.src).toEqual(expectedSrc);
-      expect(nativePipeline.getPlaybackState()).toBe(expectedState);
     });
 
     it('should remove src and state on dispose', () => {
       nativePipeline.start();
       nativePipeline.dispose();
       expect(videoElement.src).toBe('');
-      expect(nativePipeline.getPlaybackState()).toEqual(PlaybackState.Idle);
-    });
-
-    it('should set state on play', () => {
-      nativePipeline.play();
-      expect(nativePipeline.getPlaybackState()).toEqual(PlaybackState.Playing);
-    });
-
-    it('should set state on pause', () => {
-      nativePipeline.pause();
-      expect(nativePipeline.getPlaybackState()).toEqual(PlaybackState.Paused);
     });
 
     it('getQualityLevels should return empty array', () => {
@@ -246,19 +230,5 @@ describe('NativePipeline', () => {
     it('selectAutoQualityLevel should return false', () => {
       expect(nativePipeline.selectAutoQualityLevel()).toBe(false);
     });
-
-    it('state should be set to buffering on waiting', async () => {
-      const checkState = (): void => {
-        expect(nativePipeline.getPlaybackState()).toEqual(PlaybackState.Buffering);
-      };
-      expect(nativePipeline.getPlaybackState()).toEqual(PlaybackState.Idle);
-      // first waiting to set state.
-      const waitingEvent = new Event('waiting');
-      videoElement.dispatchEvent(waitingEvent);
-
-      // check state on second waiting.
-      videoElement.onwaiting = await checkState;
-      videoElement.dispatchEvent(waitingEvent);
-    });
   });
 });

packages/playback/test/lib/player/player.test.ts

@@ -8,6 +8,7 @@ import {
 import type { PlayerEvent } from '../../../src/lib/events/base-player-event';
 import { RequestType } from '../../../src/lib/consts/request-type';
 import { ServiceLocator } from '../../../src/lib/service-locator';
+import { PlaybackState } from '../../../src/lib/consts/playback-state';
 
 describe('Player spec', () => {
   let player: Player;
@@ -251,4 +252,23 @@ describe('Player spec', () => {
       expect(expectedEvents).toEqual(actualEvents);
     });
   });
+
+  describe('state', () => {
+    it('should transition to playing', () => {
+      player.play();
+      expect(player.getPlaybackState()).toEqual(PlaybackState.Playing);
+    });
+
+    it('should transition to paused', () => {
+      player.pause();
+      expect(player.getPlaybackState()).toEqual(PlaybackState.Paused);
+    });
+
+    it('should transition to buffering', () => {
+      // cast as any to call handleWaiting directly.
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (player as any).handleWaiting_();
+      expect(player.getPlaybackState()).toEqual(PlaybackState.Buffering);
+    });
+  });
 });