diff --git a/libs/shared/src/features/video-player/video-player.component.scss b/libs/shared/src/features/video-player/video-player.component.scss index d86ef60e1..9c768e860 100644 --- 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 index 8e6e3aab5..53f35bf24 100644 --- 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 index 8afdc8165..33173b29e 100644 --- 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', })