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

…deo player service
e-picsa · Apr 19, 2024 · d2237d7 · d2237d7
1 parent af50524
commit d2237d7
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 19 deletions.
diff --git a/libs/shared/src/features/video-player/video-player.component.scss b/libs/shared/src/features/video-player/video-player.component.scss
@@ -72,7 +72,5 @@ $icon-size: 3rem;
 .progress-bar {
   position: relative;
   width: 100%;
-  height: auto;
   background-color: rgba(0, 0, 0, 0.25);
-  z-index: 99;
 }
diff --git a/libs/shared/src/features/video-player/video-player.component.ts b/libs/shared/src/features/video-player/video-player.component.ts
@@ -75,17 +75,18 @@ export class VideoPlayerComponent implements OnDestroy {
     private playerService: VideoPlayerService
   ) {}
 
-  // async ngOnInit() {
-  //   await this.loadVideoState();
-  // }
-
-  // private async loadVideoState() {
-  //   const videoState = await this.playerService.getVideoState(this.playerId);
-  //   if (videoState) {
-  //     this.pauseTime = videoState.currentTime;
-  //     this.playbackPercentage = videoState.playbackPercentage;
-  //   }
-  // }
+  async ngOnInit() {
+    await this.loadVideoState();
+  }
+
+  private async loadVideoState() {
+    await this.playerService.init();
+    const videoState = await this.playerService.getVideoState(this.playerId);
+    if (videoState) {
+      this.pauseTime = videoState.currentTime;
+      this.playbackPercentage = videoState.playbackPercentage;
+    }
+  }
 
   async ngOnDestroy() {
     await this.videoPlayer.stopAllPlayers();
@@ -96,22 +97,21 @@ export class VideoPlayerComponent implements OnDestroy {
   }
 
   private async saveVideoState() {
-    // Get the total time of the video
+    // Getting the total time of the video
     const totalTimeResult = await this.videoPlayer.getDuration({ playerId: this.playerId });
     const totalTime = totalTimeResult.value;
 
-    // Calculate the playback percentage
+    // Calculating the playback percentage
     this.playbackPercentage = (this.pauseTime / totalTime) * 100;
 
-    // Save the video state
+    // Saving the video state
     const videoState = {
       videoId: this.playerId,
       currentTime: this.pauseTime || 0,
       totalTime: totalTime || 0,
       playbackPercentage: this.playbackPercentage || 0,
     };
-    console.log('Video State:', videoState);
-    // await this.playerService.updateVideoState(videoState);
+    await this.playerService.updateVideoState(videoState);
   }
 
   public async pauseVideo() {

diff --git a/libs/shared/src/services/video-player.service.ts b/libs/shared/src/services/video-player.service.ts
@@ -1,10 +1,13 @@
 import { Injectable } from '@angular/core';
-import { RxCollection } from 'rxdb';
+import { addRxPlugin, RxCollection } from 'rxdb';
+import { RxDBUpdatePlugin } from 'rxdb/plugins/update';
 
 import { IVideoPlayback, videoPlayback } from '../features/video-player/schema/schema';
 import { PicsaAsyncService } from './asyncService.service';
 import { PicsaDatabase_V2_Service } from './core/db_v2';
 
+addRxPlugin(RxDBUpdatePlugin);
+
 @Injectable({
   providedIn: 'root',
 })