@100mslive/hms-video-store 0.2.43 → 0.2.44

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.43",
+  "version": "0.2.44",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -55,12 +55,12 @@
     "zustand": "3.5.7"
   },
   "peerDependencies": {
-    "@100mslive/hms-video": "0.0.185",
+    "@100mslive/hms-video": "0.0.187",
     "events": "^3.3.0"
   },
   "devDependencies": {
     "@size-limit/file": "^5.0.3",
-    "@100mslive/hms-video": "0.0.185",
+    "@100mslive/hms-video": "0.0.187",
     "events": "^3.3.0",
     "husky": "^6.0.0",
     "size-limit": "^5.0.3",

package/src/core/hmsSDKStore/HMSPlaylist.ts

@@ -1,15 +1,13 @@
-import { HMSPlaylistItem, HMSPlaylistType, HMSStore, IHMSPlaylistActions } from '../schema';
+import { HMSPlaylistItem, HMSPlaylistType, IHMSPlaylistActions } from '../schema';
 import { HMSPlaylistManager } from './sdkTypes';
 import { HMSLogger } from '../../common/ui-logger';
-import { SDKToHMS } from './adapter';
 
 export class HMSPlaylist implements IHMSPlaylistActions {
   private type: HMSPlaylistType;
   constructor(
     private playlistManager: HMSPlaylistManager,
     type: HMSPlaylistType,
-    private syncRoomState: (name: string) => void,
-    private setState: (fn: (store: HMSStore) => void, name: string) => void,
+    private syncPlaylistState: (action: string) => void,
   ) {
     this.type = type;
   }
@@ -20,58 +18,47 @@ export class HMSPlaylist implements IHMSPlaylistActions {
       return;
     }
     await this.playlistManager.setEnabled(true, { id, type: this.type });
-    this.syncRoomState(`playOn${this.type}Playlist`);
   }
+
   async pause(id: string): Promise<void> {
     if (!id) {
       HMSLogger.w('Please pass id and type to pause');
       return;
     }
     await this.playlistManager.setEnabled(false, { id, type: this.type });
-    this.syncRoomState(`pauseOn${this.type}Playlist`);
+    this.syncPlaylistState(`pauseOn${this.type}Playlist`);
   }
+
   async playNext(): Promise<void> {
     await this.playlistManager.playNext(this.type);
-    this.syncRoomState(`playPreviousOn${this.type}Playlist`);
   }
+
   async playPrevious(): Promise<void> {
     await this.playlistManager.playPrevious(this.type);
-    this.syncRoomState(`playPreviousOn${this.type}Playlist`);
   }
+
   seek(seekValue: number): void {
     this.playlistManager.seek(seekValue, this.type);
-    this.setState(draftStore => {
-      draftStore.playlist[this.type].progress = SDKToHMS.convertPlaylist(this.playlistManager)[
-        this.type
-      ].progress;
-    }, `seekOn${this.type}Playlist`);
+    this.syncPlaylistState(`seekOn${this.type}Playlist`);
   }
+
   seekTo(seekValue: number): void {
     this.playlistManager.seekTo(seekValue, this.type);
-    this.setState(draftStore => {
-      draftStore.playlist[this.type].progress = SDKToHMS.convertPlaylist(this.playlistManager)[
-        this.type
-      ].progress;
-    }, `seekToOn${this.type}Playlist`);
+    this.syncPlaylistState(`seekToOn${this.type}Playlist`);
   }
+
   setVolume(volume: number): void {
     this.playlistManager.setVolume(volume, this.type);
-    this.setState(draftStore => {
-      draftStore.playlist[this.type].volume = SDKToHMS.convertPlaylist(this.playlistManager)[
-        this.type
-      ].volume;
-    }, `setVolumeOn${this.type}Playlist`);
+    this.syncPlaylistState(`setVolumeOn${this.type}Playlist`);
   }
+
   setList<T>(list: HMSPlaylistItem<T>[]): void {
     this.playlistManager.setList(list);
-    this.syncRoomState(`setListOn${this.type}Playlist`);
+    this.syncPlaylistState(`setListOn${this.type}Playlist`);
   }
+
   async stop(): Promise<void> {
     await this.playlistManager.stop(this.type);
-    this.syncRoomState(`stop${this.type}Playlist`);
-  }
-
-  getCurrentTime() {
-    return this.playlistManager.getCurrentTime(this.type);
+    this.syncPlaylistState(`stop${this.type}Playlist`);
   }
 }

package/src/core/hmsSDKStore/HMSSDKActions.ts

@@ -635,17 +635,21 @@ export class HMSSDKActions implements IHMSActions {
     this.audioPlaylist = new HMSPlaylist(
       this.sdk.getPlaylistManager(),
       HMSPlaylistType.audio,
-      this.syncRoomState.bind(this),
-      this.setState.bind(this),
+      this.syncPlaylistState.bind(this),
     );
     this.videoPlaylist = new HMSPlaylist(
       this.sdk.getPlaylistManager(),
       HMSPlaylistType.video,
       this.syncRoomState.bind(this),
-      this.setState.bind(this),
     );
     this.syncRoomState('joinSync');
     this.sdk.getPlaylistManager().onProgress(this.setProgress);
+    this.sdk.getPlaylistManager().onNewTrackStart((item: sdkTypes.HMSPlaylistItem<any>) => {
+      this.syncPlaylistState(`playOn${item.type}Playlist`);
+    });
+    this.sdk.getPlaylistManager().onPlaylistEnded((type: HMSPlaylistType) => {
+      this.syncPlaylistState(`${type}PlaylistEnded`);
+    });
   }
 
   protected onRoomUpdate() {
@@ -997,9 +1001,33 @@ export class HMSSDKActions implements IHMSActions {
   private setProgress = ({ type, progress }: sdkTypes.HMSPlaylistProgressEvent) => {
     this.setState(draftStore => {
       draftStore.playlist[type].progress = progress;
+      draftStore.playlist[type].currentTime = this.sdk.getPlaylistManager().getCurrentTime(type);
     }, 'playlistProgress');
   };
 
+  private syncPlaylistState = (action: string) => {
+    const sdkPeers: sdkTypes.HMSPeer[] = this.sdk.getPeers();
+    const newHmsTracks: Record<HMSTrackID, Partial<HMSTrack>> = {};
+    const newHmsSDkTracks: Record<HMSTrackID, SDKHMSTrack> = {};
+
+    // first convert everything in the new format
+    for (let sdkPeer of sdkPeers) {
+      const sdkTracks = [sdkPeer.audioTrack, sdkPeer.videoTrack, ...sdkPeer.auxiliaryTracks];
+      for (let sdkTrack of sdkTracks) {
+        if (!sdkTrack) {
+          continue;
+        }
+        const hmsTrack = SDKToHMS.convertTrack(sdkTrack);
+        newHmsTracks[hmsTrack.id] = hmsTrack;
+        newHmsSDkTracks[sdkTrack.trackId] = sdkTrack;
+      }
+    }
+    this.setState(draftStore => {
+      mergeNewTracksInDraft(draftStore.tracks, newHmsTracks);
+      Object.assign(draftStore.playlist, SDKToHMS.convertPlaylist(this.sdk.getPlaylistManager()));
+    }, action);
+  };
+
   /**
    * setState is separate so any future changes to how state change can be done from one place.
    * @param fn

package/src/core/hmsSDKStore/adapter.ts

@@ -167,11 +167,11 @@ export class SDKToHMS {
     const list = playlistManager.getList(type);
     const currentIndex = playlistManager.getCurrentIndex(type);
 
-    playlistManager.getList(type).forEach(value => {
-      const isSelected = value.url === currentSelection?.url;
-      convertedPlaylist[value.id] = {
-        ...value,
-        type: value.type as HMSPlaylistType,
+    playlistManager.getList(type).forEach(playlistItem => {
+      const isSelected = playlistItem.url === currentSelection?.url;
+      convertedPlaylist[playlistItem.id] = {
+        ...playlistItem,
+        type: playlistItem.type as HMSPlaylistType,
         selected: isSelected,
         playing: isSelected && isPlaying,
       };
@@ -185,6 +185,7 @@ export class SDKToHMS {
       },
       progress,
       volume,
+      currentTime: playlistManager.getCurrentTime(type),
     };
   }
 }

package/src/core/schema/playlist.ts

@@ -27,12 +27,14 @@ export interface HMSPlaylist<T> {
     selection: HMSPlaylistSelection;
     progress: number;
     volume: number;
+    currentTime: number;
   };
   video: {
     list: Record<string, HMSPlaylistItem<T>>;
     selection: HMSPlaylistSelection;
     progress: number;
     volume: number;
+    currentTime: number;
   };
 }
 
@@ -79,10 +81,6 @@ export interface IHMSPlaylistActions {
    * Stop the current playback and remove the tracks
    */
   stop(): Promise<void>;
-  /**
-   * Get current time of the current playing item
-   */
-  getCurrentTime(): number;
 }
 
 export interface HMSPlaylistSelector {
@@ -99,4 +97,5 @@ export interface HMSPlaylistSelector {
   selectedItem: <T>(store: HMSStore) => HMSPlaylistItem<T>;
   progress: (store: HMSStore) => number;
   volume: (store: HMSStore) => number;
+  currentTime: (store: HMSStore) => number;
 }

package/src/core/schema/schema.ts

@@ -51,12 +51,14 @@ export const createDefaultStoreState = (): HMSStore => {
         selection: { id: '', hasPrevious: false, hasNext: false },
         progress: 0,
         volume: 0,
+        currentTime: 0,
       },
       video: {
         list: {},
         selection: { id: '', hasPrevious: false, hasNext: false },
         progress: 0,
         volume: 0,
+        currentTime: 0,
       },
     },
     messages: { byID: {}, allIDs: [] },

package/src/core/selectors/playlistselectors.ts

@@ -15,6 +15,10 @@ const selectPlaylistProgress = (type: HMSPlaylistType = HMSPlaylistType.audio) =
   store: HMSStore,
 ) => store.playlist[type].progress;
 
+const selectPlaylistCurrentTime = (type: HMSPlaylistType = HMSPlaylistType.audio) => (
+  store: HMSStore,
+) => store.playlist[type].currentTime;
+
 const selectPlaylistVolume = (type: HMSPlaylistType = HMSPlaylistType.audio) => (store: HMSStore) =>
   store.playlist[type].volume;
 
@@ -39,21 +43,19 @@ const selectPlaylistSelectedItem = (type: HMSPlaylistType = HMSPlaylistType.audi
   );
 
 export const selectAudioPlaylist: HMSPlaylistSelector = {
-  selection: createSelector(selectPlaylistSelection(HMSPlaylistType.audio), selection => selection),
-  progress: createSelector(selectPlaylistProgress(HMSPlaylistType.audio), progress => progress),
-  volume: createSelector(selectPlaylistVolume(HMSPlaylistType.audio), volume => volume),
-  list: createSelector(selectPlaylist(HMSPlaylistType.audio), list => list),
-  selectedItem: <any>(
-    createSelector(selectPlaylistSelectedItem(HMSPlaylistType.audio), selectedItem => selectedItem)
-  ),
+  selection: selectPlaylistSelection(HMSPlaylistType.audio),
+  progress: selectPlaylistProgress(HMSPlaylistType.audio),
+  currentTime: selectPlaylistCurrentTime(HMSPlaylistType.audio),
+  volume: selectPlaylistVolume(HMSPlaylistType.audio),
+  list: selectPlaylist(HMSPlaylistType.audio),
+  selectedItem: <any>selectPlaylistSelectedItem(HMSPlaylistType.audio),
 };
 
 export const selectVideoPlaylist: HMSPlaylistSelector = {
-  selection: createSelector(selectPlaylistSelection(HMSPlaylistType.video), selection => selection),
-  progress: createSelector(selectPlaylistProgress(HMSPlaylistType.video), progress => progress),
-  volume: createSelector(selectPlaylistVolume(HMSPlaylistType.video), volume => volume),
-  list: createSelector(selectPlaylist(HMSPlaylistType.video), list => list),
-  selectedItem: <any>(
-    createSelector(selectPlaylistSelectedItem(HMSPlaylistType.video), selectedItem => selectedItem)
-  ),
+  selection: selectPlaylistSelection(HMSPlaylistType.video),
+  progress: selectPlaylistProgress(HMSPlaylistType.video),
+  currentTime: selectPlaylistCurrentTime(HMSPlaylistType.audio),
+  volume: selectPlaylistVolume(HMSPlaylistType.video),
+  list: selectPlaylist(HMSPlaylistType.video),
+  selectedItem: <any>selectPlaylistSelectedItem(HMSPlaylistType.video),
 };

package/src/test/fakeStore.ts

@@ -113,6 +113,7 @@ export const makeFakeStore = (): HMSStore => {
         selection: { id: 'audio1', hasNext: true, hasPrevious: false },
         progress: 20,
         volume: 100,
+        currentTime: 10,
       },
       video: {
         list: {
@@ -136,6 +137,7 @@ export const makeFakeStore = (): HMSStore => {
         selection: { id: 'video1', hasNext: true, hasPrevious: false },
         progress: 30,
         volume: 100,
+        currentTime: 20,
       },
     },
     messages: {