feat(web): update the web implementation to conform to the new API

Author: jspizziri

package.json

@@ -54,6 +54,7 @@
     "android:ide": "cd apps/example/android && open -a 'Android Studio' .",
     "android:logs": "react-native log-android",
     "build": "yarn prepare",
+    "build:watch": "tsc --watch --project tsconfig.build.json --outDir lib --declaration false --noEmit false",
     "clean": "del-cli android/build apps/example/android/build apps/example/android/app/build apps/example/ios/build lib",
     "example": "yarn workspace react-native-track-player-example",
     "format": "prettier --check src web",

src/NativeTrackPlayer.web.ts

@@ -1,3 +1,2 @@
-const module = require('../web').default;
-export const Constants = module?.getConstants();
-export default module;
+import webModule from '../web';
+export default webModule;

src/features/events.ts

@@ -82,14 +82,14 @@ const callbackByEvent = {
   'metadata-timed-received': TrackPlayer.onMetadataTimedReceived,
   'playback-state': TrackPlayer.onPlaybackState,
   'playback-playing-state': TrackPlayer.onPlaybackPlayingState,
-  'playback-active-track': TrackPlayer.onPlaybackActiveTrack,
+  // 'playback-active-track': TrackPlayer.onPlaybackActiveTrack,
   'playback-active-track-changed': TrackPlayer.onPlaybackActiveTrackChanged,
   'playback-progress-updated': TrackPlayer.onPlaybackProgressUpdated,
   'playback-play-when-ready-changed':
     TrackPlayer.onPlaybackPlayWhenReadyChanged,
   'playback-queue-ended': TrackPlayer.onPlaybackQueueEnded,
   'playback-error': TrackPlayer.onPlaybackError,
-  'playback-metadata': TrackPlayer.onPlaybackMetadata,
+  // 'playback-metadata': TrackPlayer.onPlaybackMetadata,
   'remote-play': TrackPlayer.onRemotePlay,
   'remote-play-search': TrackPlayer.onRemotePlaySearch,
   'remote-play-id': TrackPlayer.onRemotePlayId,
@@ -105,7 +105,7 @@ const callbackByEvent = {
   'remote-dislike': TrackPlayer.onRemoteDislike,
   'remote-bookmark': TrackPlayer.onRemoteBookmark,
   'remote-skip': TrackPlayer.onRemoteSkip,
-} satisfies Record<Event, (callback: unknown) => { remove: () => void }>;
+} satisfies Record<Event, (callback: any) => { remove: () => void }>;
 
 /**
  * Subscribes to a TrackPlayer event.

web/TrackPlayer/Player.ts

@@ -1,5 +1,5 @@
 import { State } from '../../src/constants/State';
-import type { PlaybackState, Progress, Track } from '../../src/types';
+import type { PlaybackState, Progress, Track } from '../../src/features';
 import { SetupNotCalledError } from './SetupNotCalledError';
 
 export class Player {
@@ -19,10 +19,10 @@ export class Player {
   }
 
   // state getter/setter
-  public get state(): PlaybackState {
+  protected get state(): PlaybackState {
     return this._state;
   }
-  public set state(newState: PlaybackState) {
+  protected set state(newState: PlaybackState) {
     this._state = newState;
   }
 
@@ -55,8 +55,10 @@ export class Player {
       this.state = {
         state: State.Error,
         error: {
-          code: 'not_supported',
-          message: 'Browser not supported.',
+          error: {
+            code: 'not_supported',
+            message: 'Browser not supported...',
+          },
         },
       };
       throw new Error('Browser not supported.');
@@ -65,6 +67,7 @@ export class Player {
     // build dom element and attach shaka-player
     this.element = document.createElement('audio');
     this.element.setAttribute('id', 'react-native-track-player');
+    document.body.appendChild(this.element);
     this.player = new shaka.Player();
     this.player?.attach(this.element);
 
@@ -98,6 +101,8 @@ export class Player {
     this.player!.addEventListener('buffering', ({ buffering }: any) => {
       if (buffering === true) {
         this.onStateUpdate(State.Buffering);
+      } else {
+        this.onStateUpdate(State.Ready);
       }
     });
 
@@ -120,8 +125,10 @@ export class Player {
     this.state = {
       state: State.Error,
       error: {
-        code: error.code.toString(),
-        message: error.message,
+        error: {
+          code: error.code.toString(),
+          message: error.message,
+        },
       },
     };
 
@@ -130,36 +137,54 @@ export class Player {
   }
 
   /**
-   * player control
+   * NOTE: this method is sync despite the actual load being async. This
+   * behavior is intentional as it mirrors what happens in Android. State
+   * changes should be captured by event listeners.
    */
-  public async load(track: Track) {
-    if (!this.player) throw new SetupNotCalledError();
-    await this.player.load(track.url as string);
-    this.current = track;
-  }
-
-  public async retry() {
+  public load(
+    track: Track,
+    onComplete?: (track: Track) => void,
+  ) {
     if (!this.player) throw new SetupNotCalledError();
-    this.player.retryStreaming();
+    this.player.load(track.url as string)
+      .then(() => {
+        this.current = track;
+        onComplete?.(track)
+      });
   }
 
-  public async stop() {
+  /**
+   * NOTE: this method is sync despite the actual load being async. This
+   * behavior is intentional as it mirrors what happens in Android. State
+   * changes should be captured by event listeners.
+   */
+  public stop(onComplete?: () => void) {
     if (!this.player) throw new SetupNotCalledError();
     this.current = undefined;
-    await this.player.unload();
+    this.player.unload()
+      .then(() => onComplete?.());
   }
 
+  /**
+   * NOTE: this method is sync despite the actual load being async. This
+   * behavior is intentional as it mirrors what happens in Android. State
+   * changes should be captured by event listeners.
+   */
   public play() {
     if (!this.element) throw new SetupNotCalledError();
     this.playWhenReady = true;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return this.element.play().catch((err: any) => console.error(err));
+    this.element.play().catch((err: unknown) => console.error(err));
+  }
+
+  public retry() {
+    if (!this.player) throw new SetupNotCalledError();
+    this.player.retryStreaming();
   }
 
   public pause() {
     if (!this.element) throw new SetupNotCalledError();
     this.playWhenReady = false;
-    return this.element.pause();
+    this.element.pause();
   }
 
   public setRate(rate: number) {

web/TrackPlayer/PlaylistPlayer.ts

@@ -1,7 +1,7 @@
 import { Player } from './Player';
 
 import { State } from '../../src/constants/State';
-import type { Track } from '../../src/types';
+import type { Track } from '../../src/features';
 import { RepeatMode } from './RepeatMode';
 
 export class PlaylistPlayer extends Player {
@@ -11,31 +11,31 @@ export class PlaylistPlayer extends Player {
   protected _currentIndex?: number;
   protected repeatMode: RepeatMode = RepeatMode.Off;
 
-  protected async onStateUpdate(state: Exclude<State, State.Error>) {
+  protected onStateUpdate(state: Exclude<State, State.Error>) {
     super.onStateUpdate(state);
 
     if (state === State.Ended) {
-      await this.onTrackEnded();
+      this.onTrackEnded();
     }
   }
 
-  protected async onTrackEnded() {
+  protected onTrackEnded() {
     switch (this.repeatMode) {
       case RepeatMode.Track:
         if (this.currentIndex !== undefined) {
-          await this.goToIndex(this.currentIndex);
+          this.goToIndex(this.currentIndex);
         }
         break;
       case RepeatMode.Playlist:
         if (this.currentIndex === this.playlist.length - 1) {
-          await this.goToIndex(0);
+          this.goToIndex(0);
         } else {
-          await this.skipToNext();
+          this.skipToNext();
         }
         break;
       default:
         try {
-          await this.skipToNext();
+          this.skipToNext();
         } catch (err) {
           if ((err as Error).message !== 'playlist_exhausted') {
             throw err;
@@ -59,61 +59,65 @@ export class PlaylistPlayer extends Player {
     this._currentIndex = current;
   }
 
-  protected async goToIndex(index: number, initialPosition?: number) {
+  protected goToIndex(index: number, initialPosition?: number) {
     const track = this.playlist[index];
 
     if (!track) {
       throw new Error('playlist_exhausted');
     }
 
-    if (this.currentIndex !== index) {
-      this.currentIndex = index;
-      await this.load(track);
-    }
+    const onCompletedLoading = () => {
+      if (initialPosition) {
+        this.seekTo(initialPosition);
+      }
 
-    if (initialPosition) {
-      this.seekTo(initialPosition);
-    }
+      if (this.playWhenReady) {
+        this.play();
+      }
+    };
 
-    if (this.playWhenReady) {
-      await this.play();
+    if (this.currentIndex !== index) {
+      this.currentIndex = index;
+      this.load(track, onCompletedLoading);
+    } else {
+      onCompletedLoading();
     }
   }
 
-  public async add(tracks: Track[], insertBeforeIndex?: number) {
+  public add(tracks: Track[], insertBeforeIndex?: number) {
     if (insertBeforeIndex !== -1 && insertBeforeIndex !== undefined) {
       this.playlist.splice(insertBeforeIndex, 0, ...tracks);
     } else {
       this.playlist.push(...tracks);
     }
 
     if (this.currentIndex === undefined) {
-      await this.goToIndex(0);
+      this.goToIndex(0);
     }
   }
 
-  public async skip(index: number, initialPosition?: number) {
+  public skip(index: number, initialPosition?: number) {
     const track = this.playlist[index];
 
     if (track === undefined) {
       throw new Error('index out of bounds');
     }
 
-    await this.goToIndex(index, initialPosition);
+    this.goToIndex(index, initialPosition);
   }
 
-  public async skipToNext(initialPosition?: number) {
+  public skipToNext(initialPosition?: number) {
     if (this.currentIndex === undefined) return;
 
     const index = this.currentIndex + 1;
-    await this.goToIndex(index, initialPosition);
+    this.goToIndex(index, initialPosition);
   }
 
-  public async skipToPrevious(initialPosition?: number) {
+  public skipToPrevious(initialPosition?: number) {
     if (this.currentIndex === undefined) return;
 
     const index = this.currentIndex - 1;
-    await this.goToIndex(index, initialPosition);
+    this.goToIndex(index, initialPosition);
   }
 
   public getTrack(index: number): Track | null {
@@ -129,7 +133,7 @@ export class PlaylistPlayer extends Player {
     return this.repeatMode;
   }
 
-  public async remove(indexes: number[]) {
+  public remove(indexes: number[]) {
     const idxMap = indexes.reduce<Record<number, boolean>>((acc, elem) => {
       acc[elem] = true;
       return acc;
@@ -151,28 +155,31 @@ export class PlaylistPlayer extends Player {
 
     const hasItems = this.playlist.length > 0;
     if (isCurrentRemoved && hasItems) {
-      await this.goToIndex(this.currentIndex % this.playlist.length);
+      this.goToIndex(this.currentIndex % this.playlist.length);
     } else if (isCurrentRemoved) {
-      await this.stop();
+      this.stop();
     }
   }
 
-  public async stop() {
-    await super.stop();
-    this.currentIndex = undefined;
+  public stop(onComplete?: () => void) {
+    super.stop(() => {
+      this.currentIndex = undefined;
+      onComplete?.();
+    });
   }
 
-  public async reset() {
-    await this.stop();
-    this.playlist = [];
+  public reset() {
+    this.stop(() => {
+      this.playlist = [];
+    });
   }
 
-  public async removeUpcomingTracks() {
+  public removeUpcomingTracks() {
     if (this.currentIndex === undefined) return;
     this.playlist = this.playlist.slice(0, this.currentIndex + 1);
   }
 
-  public async move(fromIndex: number, toIndex: number): Promise<void> {
+  public move(fromIndex: number, toIndex: number): void {
     if (!this.playlist[fromIndex]) {
       throw new Error('index out of bounds');
     }