Fix video looping instead of continuing playlist (#3007)

* Fix loop overriding continue queue
* Add id to queue continue checkbox

ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx

@@ -118,6 +118,7 @@ interface IScenePlayerProps {
   scene: GQL.SceneDataFragment | undefined | null;
   timestamp: number;
   autoplay?: boolean;
+  permitLoop?: boolean;
   onComplete?: () => void;
   onNext?: () => void;
   onPrevious?: () => void;
@@ -128,6 +129,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
   autoplay,
   scene,
   timestamp,
+  permitLoop = true,
   onComplete,
   onNext,
   onPrevious,
@@ -161,6 +163,16 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
 
   const maxLoopDuration = config?.maximumLoopDuration ?? 0;
 
+  const looping = useMemo(
+    () =>
+      !!file &&
+      !!file.duration &&
+      permitLoop &&
+      maxLoopDuration !== 0 &&
+      file.duration < maxLoopDuration,
+    [file, permitLoop, maxLoopDuration]
+  );
+
   useEffect(() => {
     if (playerRef.current && timestamp >= 0) {
       const player = playerRef.current;
@@ -170,6 +182,14 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
     }
   }, [timestamp]);
 
+  useEffect(() => {
+    if (playerRef.current) {
+      const player = playerRef.current;
+      player.loop(looping);
+      interactiveClient.setLooping(looping);
+    }
+  }, [looping, interactiveClient]);
+
   useEffect(() => {
     const videoElement = videoRef.current;
     if (!videoElement) return;
@@ -554,10 +574,6 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
 
     player.currentTime(0);
 
-    const looping =
-      !!file.duration &&
-      maxLoopDuration !== 0 &&
-      file.duration < maxLoopDuration;
     player.loop(looping);
     interactiveClient.setLooping(looping);
 
@@ -594,7 +610,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
     scene,
     file,
     config?.autostartVideo,
-    maxLoopDuration,
+    looping,
     initialTimestamp,
     autoplay,
     interactiveClient,

ui/v2.5/src/components/Scenes/SceneDetails/QueueViewer.tsx

@@ -106,6 +106,7 @@ export const QueueViewer: React.FC<IPlaylistViewer> = ({
       <div className="queue-controls">
         <div>
           <Form.Check
+            id="continue-checkbox"
             checked={continuePlaylist}
             label={intl.formatMessage({ id: "actions.continue" })}
             onChange={() => {

ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx

@@ -720,6 +720,7 @@ const SceneLoader: React.FC = () => {
           scene={scene}
           timestamp={timestamp}
           autoplay={autoplay}
+          permitLoop={!continuePlaylist}
           onComplete={onComplete}
           onNext={
             currentQueueIndex >= 0 && currentQueueIndex < queueScenes.length - 1