Refactor video player component to include progress bar in video-play…

…er.component.html and video-player.component.scss
e-picsa · Apr 18, 2024 · af50524 · af50524
1 parent 730b833
commit af50524
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 9 deletions.
diff --git a/libs/shared/src/features/video-player/index.ts b/libs/shared/src/features/video-player/index.ts
@@ -2,11 +2,12 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 import { VideoPlayerComponent } from './video-player.component';
 
 @NgModule({
-  imports: [CommonModule, MatButtonModule, MatIconModule],
+  imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressBarModule],
   exports: [VideoPlayerComponent],
   declarations: [VideoPlayerComponent],
   providers: [],

diff --git a/libs/shared/src/features/video-player/video-player.component.html b/libs/shared/src/features/video-player/video-player.component.html
@@ -1,6 +1,18 @@
-<div class="placeholder" [id]="playerId" #playerEl slot="fixed">
-  <div *ngIf="thumbnail" class="thumbnail" [style.background-image]="'url(' + thumbnail + ')'"></div>
-  <button *ngIf="showPlayButton" mat-fab color="primary" class="play-button" (click)="playVideo()" [disabled]="!source">
-    <mat-icon>play_arrow</mat-icon>
-  </button>
+<div class="placeholderContainer">
+  <div class="placeholder" [id]="playerId" #playerEl slot="fixed">
+    <div *ngIf="thumbnail" class="thumbnail" [style.background-image]="'url(' + thumbnail + ')'"></div>
+    <button
+      *ngIf="showPlayButton"
+      mat-fab
+      color="primary"
+      class="play-button"
+      (click)="playVideo()"
+      [disabled]="!source"
+    >
+      <mat-icon>play_arrow</mat-icon>
+    </button>
+  </div>
+  <div *ngIf="playbackPercentage > 0 && showPlayButton" class="progress-bar">
+    <mat-progress-bar mode="determinate" [value]="playbackPercentage"></mat-progress-bar>
+  </div>
 </div>
diff --git a/libs/shared/src/features/video-player/video-player.component.scss b/libs/shared/src/features/video-player/video-player.component.scss
@@ -15,6 +15,12 @@ $playerWidth: 854px;
     margin-right: -1rem;
   }
 }
+.placeholderContainer {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  margin-bottom: 2rem;
+}
 .placeholder,
 .thumbnail {
   width: 100%;
@@ -23,7 +29,6 @@ $playerWidth: 854px;
 }
 .placeholder {
   position: relative;
-  margin-bottom: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -64,3 +69,10 @@ $icon-size: 3rem;
   background: #ffffff;
   color: var(--color-warn);
 }
+.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
@@ -67,7 +67,25 @@ export class VideoPlayerComponent implements OnDestroy {
 
   private pauseTime = 0;
 
-  constructor(private elementRef: ElementRef<HTMLDivElement>, private analyticsService: AnalyticsService) {}
+  playbackPercentage: number;
+
+  constructor(
+    private elementRef: ElementRef<HTMLDivElement>,
+    private analyticsService: AnalyticsService,
+    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 ngOnDestroy() {
     await this.videoPlayer.stopAllPlayers();
@@ -77,11 +95,32 @@ export class VideoPlayerComponent implements OnDestroy {
     }
   }
 
+  private async saveVideoState() {
+    // Get the total time of the video
+    const totalTimeResult = await this.videoPlayer.getDuration({ playerId: this.playerId });
+    const totalTime = totalTimeResult.value;
+
+    // Calculate the playback percentage
+    this.playbackPercentage = (this.pauseTime / totalTime) * 100;
+
+    // Save 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);
+  }
+
   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();
@@ -178,10 +217,11 @@ export class VideoPlayerComponent implements OnDestroy {
     }
   }
 
-  private handlePlayerPause(e: { fromPlayerId: string; currentTime: number }) {
+  private async handlePlayerPause(e: { fromPlayerId: string; currentTime: number }) {
     if (e.fromPlayerId === this.playerId) {
       this.pauseTime = e.currentTime;
       this.showPlayButton = true;
+      await this.saveVideoState();
     }
   }
 
@@ -191,6 +231,7 @@ export class VideoPlayerComponent implements OnDestroy {
   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()) {
       await ScreenOrientation.unlock();