add repeat button

OpenDonationAssistant · Mar 5, 2024 · 96bcab2 · 96bcab2
1 parent 6fbbec9
commit 96bcab2
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 14 deletions.
diff --git a/src/components/MediaWidget/MediaWidget.css b/src/components/MediaWidget/MediaWidget.css
@@ -247,6 +247,20 @@ iframe {
   align-items: baseline;
 }
 
+.repeat-button {
+  line-height: 0px;
+  margin-left: 0px;
+  padding: 0px;
+  border: none;
+  color: white;
+  background: none;
+  margin-right: 5px;
+}
+
+.repeat-button span.material-symbols-sharp{
+  vertical-align: middle;
+}
+
 .video-counter {
   flex: 0 0;
   color: white;

diff --git a/src/components/MediaWidget/MediaWidget.tsx b/src/components/MediaWidget/MediaWidget.tsx
@@ -11,7 +11,6 @@ import RequestsDisabledWarning from "./RequestsDisabledWarning";
 import MenuEventButton from "../Menu/MenuEventButton";
 import MenuButton from "../Menu/MenuButton";
 import { PLAYLIST_TYPE, Playlist } from "../../logic/playlist/Playlist";
-import { IPlaylistChangesListener } from "../../logic/playlist/PlaylistChangesListener";
 import PlaylistComponent from "./PlaylistComponent";
 import VideoJSComponent from "./VideoJSComponent";
 import { Song } from "./types";
@@ -32,6 +31,7 @@ export default function MediaWidget({}: {}) {
   const playlistController = useRef<PlaylistController>();
   const [song, setSong] = useState<Song | null>(null);
   const [isRemote, setIsRemote] = useState<boolean>(false);
+  const [repeat, enableRepeat] = useState<boolean>(false);
 
   useEffect(() => {
     const playlistListener = {
@@ -67,6 +67,13 @@ export default function MediaWidget({}: {}) {
     });
   }, [recipientId, widgetId]);
 
+  useEffect(() => {
+    if (!playlistController.current) {
+      return;
+    }
+    playlistController.current.repeat = repeat;
+  }, [repeat, playlistController]);
+
   return (
     <>
       <style
@@ -134,6 +141,14 @@ export default function MediaWidget({}: {}) {
           <div className="video-counter">
             {`${index ? index : "-"} / ${playlistSize}`}
           </div>
+          <button
+            className="repeat-button"
+            onClick={() => enableRepeat((old) => !old)}
+          >
+            <span className="material-symbols-sharp">
+              {repeat ? "repeat_on" : "repeat"}
+            </span>
+          </button>
         </div>
         {playlist && <PlaylistComponent playlist={playlist} />}
       </div>

diff --git a/src/components/MediaWidget/PlaylistController.ts b/src/components/MediaWidget/PlaylistController.ts
@@ -9,6 +9,7 @@ import { subscribe } from "../../socket";
 export class PlaylistController {
   playlists = new Map<PLAYLIST_TYPE, Playlist>();
   current: Playlist;
+  private _repeat = false;
 
   playlistRenderers: IPlaylistRenderer[] = [];
 
@@ -29,11 +30,14 @@ export class PlaylistController {
           return;
         }
         const personalIndex = personal.index();
-        if (personalIndex === null) {
-          return;
+        if (personalIndex !== null) {
+          if (personalIndex < personal.songs().length) {
+            this.switchTo(PLAYLIST_TYPE.PERSONAL);
+            return;
+          }
         }
-        if (personalIndex < personal.songs().length) {
-          this.switchTo(PLAYLIST_TYPE.PERSONAL);
+        if (this._repeat) {
+          playlist.setIndex(0);
         }
       },
     };
@@ -140,4 +144,10 @@ export class PlaylistController {
       this.current = playlist;
     }
   }
+  public get repeat() {
+    return this._repeat;
+  }
+  public set repeat(value) {
+    this._repeat = value;
+  }
 }
diff --git a/src/components/MediaWidget/api.tsx b/src/components/MediaWidget/api.tsx
@@ -1,7 +1,9 @@
 import axios from "axios";
+import { log } from "../../logging";
 
 export function markListened(id: string) {
   try {
+    log.debug(`marking ${id} as listened`);
     axios
       .patch(
         `${process.env.REACT_APP_MEDIA_API_ENDPOINT}/media/video/${id}`,

diff --git a/src/logic/playlist/Playlist.ts b/src/logic/playlist/Playlist.ts
@@ -134,28 +134,42 @@ class Playlist {
     log.debug(
       `adding listener ${listener.id} to playlist ${nameOf(
         this.type(),
-      )}, current songs amount: ${this._songs.length}, index: ${
-        this.index()
-      }, total listeners count: ${this._listeners.length}`,
+      )}, current songs amount: ${
+        this._songs.length
+      }, index: ${this.index()}, total listeners count: ${
+        this._listeners.length
+      }`,
     );
     listener.trigger(this);
   }
 
   removeListener(id: string) {
-    log.debug(`listeners before removing ${id}: ${JSON.stringify(this._listeners)}`);
-    const index = this._listeners.findIndex((listener) => (listener.id === id));
+    log.debug(
+      `listeners before removing ${id}: ${JSON.stringify(this._listeners)}`,
+    );
+    const index = this._listeners.findIndex((listener) => listener.id === id);
     this._listeners.splice(index, 1);
-    log.debug(`listeners after removing ${id}: ${JSON.stringify(this._listeners)}`);
+    log.debug(
+      `listeners after removing ${id}: ${JSON.stringify(this._listeners)}`,
+    );
   }
 
   triggerListeners() {
     publish(this.topic, {
-      count: this._index === null || this._type === PLAYLIST_TYPE.PERSONAL ? 0 : this._songs.length,
-      number: this._index === null || this._type === PLAYLIST_TYPE.PERSONAL ? 0 : this._index,
+      count:
+        this._index === null || this._type === PLAYLIST_TYPE.PERSONAL
+          ? 0
+          : this._songs.length,
+      number:
+        this._index === null || this._type === PLAYLIST_TYPE.PERSONAL
+          ? 0
+          : this._index,
     });
     this._listeners.forEach((listener) => {
       listener.trigger(this);
-      log.debug(`playlist ${nameOf(this.type())} notifing listener ${listener.id}`);
+      log.debug(
+        `playlist ${nameOf(this.type())} notifing listener ${listener.id}`,
+      );
     });
   }
 }