fix playing continutation in player

OpenDonationAssistant · Feb 3, 2024 · 6c35a97 · 6c35a97
1 parent caa8179
commit 6c35a97
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/src/components/MediaWidget/MediaWidget.tsx b/src/components/MediaWidget/MediaWidget.tsx
@@ -25,20 +25,23 @@ export default function MediaWidget({}: {}) {
     new Playlist(PLAYLIST_TYPE.REQUESTED),
   );
   const [playlistSize, setPlaylistSize] = useState<number>(0);
-  const [index, setIndex] = useState<number>(-1);
+  const [index, setIndex] = useState<number | null>(null);
   const paymentPageConfig = useRef<PaymentPageConfig>();
   const navigate = useNavigate();
   const [activeTab, setActiveTab] = useState(PLAYLIST_TYPE.REQUESTED);
   const playlistController = useRef<PlaylistController>();
-  const [song, setSong] = useState<Song|null>(null);
+  const [song, setSong] = useState<Song | null>(null);
 
   useEffect(() => {
     const playlistListener: IPlaylistChangesListener = {
       id: widgetId,
       trigger(playlist: Playlist) {
-        log.debug(`updating MediaWidget because of changes in Playlist`);
+        log.debug(
+          `updating MediaWidget because of changes in Playlist, index: ${playlist.index()}`,
+        );
         setPlaylistSize(playlist.songs().length);
-        setIndex(playlist.index() ?? -1);
+        const index = playlist.index();
+        setIndex(index != null ? index + 1 : null);
         setActiveTab(playlist.type());
         setSong(playlist.song());
       },
@@ -74,9 +77,14 @@ export default function MediaWidget({}: {}) {
         <RequestsDisabledWarning />
         <div className="player-header">
           <div className="song-title-container">{song?.title ?? ""}</div>
-          <VideoPopupToggler/>
+          <VideoPopupToggler />
         </div>
-        {song && playlistController.current && <VideoJSComponent playlistController={playlistController.current} song={song}/>}
+        {song && playlistController.current && (
+          <VideoJSComponent
+            playlistController={playlistController.current}
+            song={song}
+          />
+        )}
         <div className="playlist-controls">
           <Menu>
             <MenuEventButton text="Hide/Show video" event="toggleVideo" />
@@ -117,7 +125,7 @@ export default function MediaWidget({}: {}) {
             </li>
           </ul>
           <div className="video-counter">
-            {`${index + 1} / ${playlistSize}`}
+            {`${index ? index : "-"} / ${playlistSize}`}
           </div>
         </div>
         {playlist && <PlaylistComponent playlist={playlist} />}

diff --git a/src/components/MediaWidget/PlaylistComponent.tsx b/src/components/MediaWidget/PlaylistComponent.tsx
@@ -14,7 +14,7 @@ export default function PlaylistComponent({
 }) {
   const { recipientId, settings, widgetId } = useLoaderData();
   const activeRef = useRef<HTMLDivElement>(null);
-  const [current, setCurrent] = useState(0);
+  const [current, setCurrent] = useState<number|null>(null);
   const [songs, setSongs] = useState<Song[]>([]);
 
   function onDragEnd(result) {
@@ -36,7 +36,7 @@ export default function PlaylistComponent({
       id: `${widgetId}_playlist`,
       trigger(playlist: Playlist){
         setSongs(playlist.songs());
-        setCurrent(playlist.index() ?? 0);
+        setCurrent(playlist.index());
       }
     });
     // todo cleanup function

diff --git a/src/logic/playlist/Playlist.ts b/src/logic/playlist/Playlist.ts
@@ -30,7 +30,7 @@ class Playlist {
     }
     this._songs.push(song);
     if (this._index == null) {
-      this._index = 0;
+      this._index = this._songs.length - 1;
     }
     this.triggerListeners();
   }
@@ -120,6 +120,7 @@ class Playlist {
   }
 
   addListener(listener: IPlaylistChangesListener) {
+    log.debug(`adding listener, current songs amount: ${this._songs.length}, index: ${this.index}`);
     this._listeners.push(listener);
     listener.trigger(this);
   }