fix pausing of player popup

OpenDonationAssistant · Dec 20, 2024 · 8be5cd5 · 8be5cd5
1 parent 9e0675a
commit 8be5cd5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/src/components/MediaWidget/VideoJSComponent.tsx b/src/components/MediaWidget/VideoJSComponent.tsx
@@ -28,7 +28,7 @@ let options: VideoJsPlayerOptions = {
   youtube: { ytControls: 0, rel: 0 },
 };
 
-enum PLAYER_STATE {
+export enum PLAYER_STATE {
   INITIALIZING,
   PLAYING,
   PAUSED,

diff --git a/src/components/PlayerPopup/Player.tsx b/src/components/PlayerPopup/Player.tsx
@@ -6,6 +6,7 @@ import {
   PlayerAdapterEvent,
   createPlayerAdapter,
 } from "./PlayerAdapter";
+import { PLAYER_STATE } from "../MediaWidget/VideoJSComponent";
 
 export interface AbstractPlayerStore {
   play(song?: Song): void;
@@ -19,6 +20,7 @@ export interface PlayerConfiguration {
 
 export class PlayerStore implements AbstractPlayerStore {
   player: PlayerAdapter | null = null;
+  state: PLAYER_STATE = PLAYER_STATE.INITIALIZING;
   song: Song | null = null;
   widgetId: string;
   conf: PlayerConfiguration;
@@ -65,6 +67,13 @@ export class PlayerStore implements AbstractPlayerStore {
       "create with volume",
     );
     this.player?.volume(this._volume);
+    this.player?.on(PlayerAdapterEvent.PLAY, () => {
+      if (PLAYER_STATE.SHOULD_BE_STOPED === this.state){
+        this.player?.pause();
+        return;
+      }
+      this.state = PLAYER_STATE.PLAYING;
+    })
     this.player?.on(PlayerAdapterEvent.ENDED, () => {
       log.debug(`finished playing song`);
       publish(this.conf.remoteplayerfeedback, {
@@ -93,9 +102,11 @@ export class PlayerStore implements AbstractPlayerStore {
         this.player = null;
       }
       if (json.command === "pause") {
+        this.state = PLAYER_STATE.SHOULD_BE_STOPED;
         this.player?.pause();
       }
       if (json.command === "resume") {
+        this.state = PLAYER_STATE.PLAYING;
         this.player?.play();
       }
       if (json.command === "volume") {

diff --git a/src/components/PlayerPopup/PlayerPopup.tsx b/src/components/PlayerPopup/PlayerPopup.tsx
@@ -52,7 +52,6 @@ const PlayerPopup = observer(({ player }: { player: AbstractPlayerStore }) => {
       <div id="mediaplayer" className="full-height vjs-big-play-centered" />
     </>
   );
-
 });
 
 export default PlayerPopup;
-Original file line number
+Diff line change
@@ Expand Up @@
           <div id="mediaplayer" className="full-height vjs-big-play-centered" />
         </>
       );
     });
     export default PlayerPopup;