Refactor video player component to include progress bar and update vi…

…deo player service
e-picsa · Apr 20, 2024 · 07157b5 · 07157b5
1 parent 564fb7a
commit 07157b5
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 40 deletions.
diff --git a/libs/shared/src/features/video-player/video-player.component.ts b/libs/shared/src/features/video-player/video-player.component.ts
@@ -67,7 +67,9 @@ export class VideoPlayerComponent implements OnDestroy {
 
   private pauseTime = 0;
 
-  totalTime: number;
+  private videoID: string;
+
+  totalDuration = 0;
 
   playbackPercentage: number;
 
@@ -77,52 +79,54 @@ export class VideoPlayerComponent implements OnDestroy {
     private playerService: VideoPlayerService
   ) {}
 
+  private async saveVideoState() {
+    this.totalDuration = (await this.videoPlayer.getDuration({ playerId: this.playerId })).value;
+
+    if (this.totalDuration) {
+      this.playbackPercentage = (this.pauseTime / this.totalDuration) * 100;
+    } else {
+      this.playbackPercentage = 0;
+    }
+
+    const videoState = {
+      videoId: this.playerId,
+      currentTime: this.pauseTime || 0,
+      totalTime: this.totalDuration || 0,
+      playbackPercentage: this.playbackPercentage || 0,
+    };
+    await this.playerService.updateVideoState(videoState);
+  }
+
   async ngOnInit() {
     await this.loadVideoState();
   }
 
   private async loadVideoState() {
     await this.playerService.init();
     const videoState = await this.playerService.getVideoState(this.playerId);
-    if (videoState) {
+    const videoID = videoState?._data.videoId;
+    if (videoState && videoID === this.playerId) {
+      this.videoID = videoID;
       this.pauseTime = videoState.currentTime;
       this.playbackPercentage = videoState.playbackPercentage;
+      this.totalDuration = videoState.totalTime;
     }
   }
 
   async ngOnDestroy() {
+    await this.saveVideoState();
     await this.videoPlayer.stopAllPlayers();
     this.removeListeners();
     if (this.objectUrl) {
       URL.revokeObjectURL(this.objectUrl);
     }
   }
 
-  private async saveVideoState() {
-    // Getting the total time of the video
-    const totalTimeResult = await this.videoPlayer.getDuration({ playerId: this.playerId });
-    this.totalTime = totalTimeResult.value || this.totalTime;
-
-    // Calculating the playback percentage
-    this.playbackPercentage = (this.pauseTime / this.totalTime) * 100;
-
-    // Saving the video state
-    const videoState = {
-      videoId: this.playerId,
-      currentTime: this.pauseTime || 0,
-      totalTime: this.totalTime || 0,
-      playbackPercentage: this.playbackPercentage || 0,
-    };
-    await this.playerService.updateVideoState(videoState);
-  }
-
   public async pauseVideo() {
     return this.videoPlayer.pause({ playerId: this.playerId });
   }
 
   public async playVideo() {
-    await this.saveVideoState();
-
     // Remove thumbnail from future playback
     this.thumbnail = undefined;
     await this.videoPlayer.stopAllPlayers();
@@ -212,10 +216,12 @@ export class VideoPlayerComponent implements OnDestroy {
   private handlePlayerReady() {
     this.showPlayButton = true;
   }
-  private handlePlayerPlay(e: { fromPlayerId: string }) {
+
+  private async handlePlayerPlay(e: { fromPlayerId: string }) {
     // Events can be emitted from any player, so only update play button of current player id
     if (e.fromPlayerId === this.playerId) {
       this.showPlayButton = false;
+      this.totalDuration = (await this.videoPlayer.getDuration({ playerId: this.playerId })).value;
     }
   }
 
@@ -230,14 +236,14 @@ export class VideoPlayerComponent implements OnDestroy {
   private handlePlayerEnded() {
     this.showPlayButton = true;
   }
+
   private async handlePlayerExit(e: { currentTime: number }) {
-    this.showPlayButton = true;
     this.pauseTime = e.currentTime;
-    await this.saveVideoState();
-    // Ensure player does not stay stuck in landscape mode
-    if (Capacitor.isNativePlatform()) {
+    this.showPlayButton = true;
+    if (Capacitor.isNativePlatform() && ScreenOrientation) {
       await ScreenOrientation.unlock();
     }
+    await this.saveVideoState();
   }
 }
 

diff --git a/libs/shared/src/services/video-player.service.ts b/libs/shared/src/services/video-player.service.ts
@@ -33,19 +33,8 @@ export class VideoPlayerService extends PicsaAsyncService {
 
   async updateVideoState(state: IVideoPlayback) {
     try {
-      const playback = await this.collection.findOne(state.videoId).exec();
-
-      if (!playback) {
-        await this.collection.insert(state);
-      } else {
-        await playback.update({
-          $set: {
-            currentTime: state.currentTime,
-            totalTime: state.totalTime,
-            playbackPercentage: state.playbackPercentage,
-          },
-        });
-      }
+      // Upsert the document
+      await this.collection.upsert(state);
     } catch (error) {
       console.error('Failed to update video state:', error);
     }