From f2c4ecf6c049f2e42185206a1464c220eed33150 Mon Sep 17 00:00:00 2001
From: dogwithakeyboard <gdkjhsahdka@protonmail.com>
Date: Sun, 12 Jan 2025 17:20:05 +0000
Subject: [PATCH 1/5] Extend scene queue to markers

---
 .../components/ScenePlayer/ScenePlayer.tsx    |  17 ++
 .../Scenes/SceneDetails/QueueViewer.tsx       | 101 ++++++++--
 .../components/Scenes/SceneDetails/Scene.tsx  | 186 ++++++++++++++----
 .../src/components/Scenes/SceneMarkerCard.tsx |  14 +-
 .../Scenes/SceneMarkerCardsGrid.tsx           |   4 +
 .../src/components/Scenes/SceneMarkerList.tsx |  42 ++--
 ui/v2.5/src/components/Scenes/styles.scss     |  29 ++-
 ui/v2.5/src/components/Wall/WallItem.tsx      |   9 +-
 ui/v2.5/src/components/Wall/WallPanel.tsx     |   9 +-
 ui/v2.5/src/models/sceneQueue.ts              |  59 +++++-
 10 files changed, 392 insertions(+), 78 deletions(-)

diff --git a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx
index 24453043bd8..75f08792492 100644
--- a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx
+++ b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx
@@ -203,6 +203,7 @@ interface IScenePlayerProps {
   autoplay?: boolean;
   permitLoop?: boolean;
   initialTimestamp: number;
+  initialEndstamp: number;
   sendSetTimestamp: (setTimestamp: (value: number) => void) => void;
   onComplete: () => void;
   onNext: () => void;
@@ -215,6 +216,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
   autoplay,
   permitLoop = true,
   initialTimestamp: _initialTimestamp,
+  initialEndstamp,
   sendSetTimestamp,
   onComplete,
   onNext,
@@ -791,6 +793,21 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
     return () => player.off("ended");
   }, [getPlayer, onComplete]);
 
+  // Try to detect that the player has passed the end point of a Marker
+  useEffect(() => {
+    const player = getPlayer();
+    if (!player || !initialEndstamp) return;
+    player.on("timeupdate", function () {
+      if (
+        player.currentTime() >= initialEndstamp &&
+        player.currentTime() <= initialEndstamp + 0.5
+      ) {
+        player.pause();
+        onComplete();
+      }
+    });
+  }, [getPlayer, initialEndstamp, onComplete]);
+
   function onScrubberScroll() {
     if (started.current) {
       getPlayer()?.pause();
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/QueueViewer.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/QueueViewer.tsx
index 6aba56a3772..aafbb907b5e 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/QueueViewer.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/QueueViewer.tsx
@@ -12,16 +12,23 @@ import {
   faStepForward,
 } from "@fortawesome/free-solid-svg-icons";
 import { objectTitle } from "src/core/files";
-import { QueuedScene } from "src/models/sceneQueue";
+import {
+  QueuedScene,
+  QueuedSceneMarker,
+  QueuedItem,
+} from "src/models/sceneQueue";
+import { markerTitle } from "src/core/markers";
+import TextUtils from "src/utils/text";
 
 export interface IPlaylistViewer {
-  scenes: QueuedScene[];
+  scenes: QueuedItem[];
   currentID?: string;
+  currentMarkerSeconds?: number;
   start?: number;
   continue?: boolean;
   hasMoreScenes: boolean;
   setContinue: (v: boolean) => void;
-  onSceneClicked: (id: string) => void;
+  onSceneClicked: (scene: QueuedItem) => void;
   onNext: () => void;
   onPrevious: () => void;
   onRandom: () => void;
@@ -32,6 +39,7 @@ export interface IPlaylistViewer {
 export const QueueViewer: React.FC<IPlaylistViewer> = ({
   scenes,
   currentID,
+  currentMarkerSeconds,
   start = 0,
   continue: continuePlaylist = false,
   hasMoreScenes,
@@ -47,7 +55,16 @@ export const QueueViewer: React.FC<IPlaylistViewer> = ({
   const [lessLoading, setLessLoading] = useState(false);
   const [moreLoading, setMoreLoading] = useState(false);
 
-  const currentIndex = scenes.findIndex((s) => s.id === currentID);
+  const currentIndex = scenes.findIndex((s) => {
+    if (s.__typename === "SceneMarker") {
+      return (
+        s.scene.id === currentID &&
+        Math.trunc(s.seconds) === currentMarkerSeconds
+      );
+    } else {
+      return s.id === currentID;
+    }
+  });
 
   useEffect(() => {
     setLessLoading(false);
@@ -58,11 +75,18 @@ export const QueueViewer: React.FC<IPlaylistViewer> = ({
     return scene.id === currentID;
   }
 
+  function isCurrentMarker(marker: QueuedSceneMarker) {
+    return (
+      marker.scene.id === currentID &&
+      Math.trunc(marker.seconds) === currentMarkerSeconds
+    );
+  }
+
   function handleSceneClick(
     event: React.MouseEvent<HTMLAnchorElement, MouseEvent>,
-    id: string
+    scene: QueuedItem
   ) {
-    onSceneClicked(id);
+    onSceneClicked(scene);
     event.preventDefault();
   }
 
@@ -76,7 +100,7 @@ export const QueueViewer: React.FC<IPlaylistViewer> = ({
     onMoreScenes();
   }
 
-  function renderPlaylistEntry(scene: QueuedScene) {
+  function renderPlaylistEntryScene(scene: QueuedScene) {
     return (
       <li
         className={cx("my-2", { current: isCurrentScene(scene) })}
@@ -84,7 +108,7 @@ export const QueueViewer: React.FC<IPlaylistViewer> = ({
       >
         <Link
           to={`/scenes/${scene.id}`}
-          onClick={(e) => handleSceneClick(e, scene.id)}
+          onClick={(e) => handleSceneClick(e, scene)}
         >
           <div className="ml-1 d-flex align-items-center">
             <div className="thumbnail-container">
@@ -95,9 +119,9 @@ export const QueueViewer: React.FC<IPlaylistViewer> = ({
               />
             </div>
             <div className="queue-scene-details">
-              <span className="queue-scene-title">{objectTitle(scene)}</span>
-              <span className="queue-scene-studio">{scene?.studio?.name}</span>
-              <span className="queue-scene-performers">
+              <span className="queue-marker-title">{objectTitle(scene)}</span>
+              <span className="queue-marker-scene">{scene?.studio?.name}</span>
+              <span className="queue-marker-performers">
                 {scene?.performers
                   ?.map(function (performer) {
                     return performer.name;
@@ -112,6 +136,51 @@ export const QueueViewer: React.FC<IPlaylistViewer> = ({
     );
   }
 
+  function renderPlaylistEntryMarker(marker: QueuedSceneMarker) {
+    const tags = [marker.primary_tag, ...(marker.tags || [])];
+
+    return (
+      <li
+        className={cx("my-2", { current: isCurrentMarker(marker) })}
+        key={marker.id}
+      >
+        <Link
+          to={`/scenes/${marker.scene.id}?t=${marker.seconds}`}
+          onClick={(e) => handleSceneClick(e, marker)}
+        >
+          <div className="ml-1 d-flex align-items-center">
+            <div className="thumbnail-container">
+              <img loading="lazy" src={marker.screenshot ?? ""} />
+            </div>
+            <div className="queue-marker-details">
+              <span className="queue-scene-title">
+                {markerTitle(marker)}
+                {" - "}
+                {TextUtils.formatTimestampRange(
+                  marker.seconds,
+                  marker.end_seconds ?? undefined
+                )}
+              </span>
+              <span className="queue-scene-studio">
+                {objectTitle(marker.scene)}
+              </span>
+              <span className="queue-scene-performers">
+                {marker.scene.performers
+                  ?.map(function (performer) {
+                    return performer.name;
+                  })
+                  .join(", ")}
+              </span>
+              <span className="queue-marker-tags">
+                {tags.map((tag) => tag.name).join(", ")}
+              </span>
+            </div>
+          </div>
+        </Link>
+      </li>
+    );
+  }
+
   return (
     <div id="queue-viewer">
       <div className="queue-controls">
@@ -169,7 +238,15 @@ export const QueueViewer: React.FC<IPlaylistViewer> = ({
             </Button>
           </div>
         ) : undefined}
-        <ol start={start}>{scenes.map(renderPlaylistEntry)}</ol>
+        <ol start={start}>
+          {scenes.map((item) =>
+            item.__typename == "Scene"
+              ? renderPlaylistEntryScene(item)
+              : item.__typename == "SceneMarker"
+              ? renderPlaylistEntryMarker(item)
+              : ""
+          )}
+        </ol>
         {hasMoreScenes ? (
           <div className="d-flex justify-content-center">
             <Button onClick={() => moreClicked()} disabled={moreLoading}>
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
index 4a0c67ff126..f062f30ba34 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
@@ -20,6 +20,7 @@ import {
   queryFindScenes,
   queryFindScenesByID,
   useSceneIncrementPlayCount,
+  queryFindSceneMarkers,
 } from "src/core/StashService";
 
 import { SceneEditPanel } from "./SceneEditPanel";
@@ -28,7 +29,7 @@ import { LoadingIndicator } from "src/components/Shared/LoadingIndicator";
 import { Icon } from "src/components/Shared/Icon";
 import { Counter } from "src/components/Shared/Counter";
 import { useToast } from "src/hooks/Toast";
-import SceneQueue, { QueuedScene } from "src/models/sceneQueue";
+import SceneQueue, { QueuedItem } from "src/models/sceneQueue";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import Mousetrap from "mousetrap";
 import { OrganizedButton } from "./OrganizedButton";
@@ -50,6 +51,7 @@ import { useRatingKeybinds } from "src/hooks/keybinds";
 import { lazyComponent } from "src/utils/lazyComponent";
 import cx from "classnames";
 import { TruncatedText } from "src/components/Shared/TruncatedText";
+import { FilterMode } from "src/core/generated-graphql";
 
 const SubmitStashBoxDraft = lazyComponent(
   () => import("src/components/Dialogs/SubmitDraft")
@@ -133,11 +135,11 @@ const VideoFrameRateResolution: React.FC<{
 interface IProps {
   scene: GQL.SceneDataFragment;
   setTimestamp: (num: number) => void;
-  queueScenes: QueuedScene[];
+  queueScenes: QueuedItem[];
   onQueueNext: () => void;
   onQueuePrevious: () => void;
   onQueueRandom: () => void;
-  onQueueSceneClicked: (sceneID: string) => void;
+  onQueueSceneClicked: (scene: QueuedItem) => void;
   onDelete: () => void;
   continuePlaylist: boolean;
   queueHasMoreScenes: boolean;
@@ -147,6 +149,7 @@ interface IProps {
   collapsed: boolean;
   setCollapsed: (state: boolean) => void;
   setContinuePlaylist: (value: boolean) => void;
+  initialTimestamp: number;
 }
 
 interface ISceneParams {
@@ -170,6 +173,7 @@ const ScenePage: React.FC<IProps> = ({
   collapsed,
   setCollapsed,
   setContinuePlaylist,
+  initialTimestamp,
 }) => {
   const Toast = useToast();
   const intl = useIntl();
@@ -496,6 +500,7 @@ const ScenePage: React.FC<IProps> = ({
           <QueueViewer
             scenes={queueScenes}
             currentID={scene.id}
+            currentMarkerSeconds={initialTimestamp}
             continue={continuePlaylist}
             setContinue={setContinuePlaylist}
             onSceneClicked={onQueueSceneClicked}
@@ -695,7 +700,7 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
     }
   }, [configuration?.interface.continuePlaylistDefault, queryParams]);
 
-  const [queueScenes, setQueueScenes] = useState<QueuedScene[]>([]);
+  const [queueScenes, setQueueScenes] = useState<QueuedItem[]>([]);
 
   const [collapsed, setCollapsed] = useState(false);
   const [continuePlaylist, setContinuePlaylist] = useState(queryContinue);
@@ -705,7 +710,11 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
 
   const _setTimestamp = useRef<(value: number) => void>();
   const initialTimestamp = useMemo(() => {
-    return Number.parseInt(queryParams.get("t") ?? "0", 10);
+    return Number.parseInt(queryParams.get("t")?.split(",")[0] ?? "0", 10);
+  }, [queryParams]);
+
+  const initialEndstamp = useMemo(() => {
+    return Number.parseInt(queryParams.get("t")?.split(",")[1] ?? "0", 10);
   }, [queryParams]);
 
   const [queueTotal, setQueueTotal] = useState(0);
@@ -716,8 +725,17 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
     configuration?.interface.autostartVideoOnPlaySelected ?? false;
 
   const currentQueueIndex = useMemo(
-    () => queueScenes.findIndex((s) => s.id === id),
-    [queueScenes, id]
+    () =>
+      queueScenes.findIndex((s) => {
+        if (s.__typename == "SceneMarker") {
+          return (
+            s.scene.id === id && Math.trunc(s.seconds) === initialTimestamp
+          );
+        } else if (s.__typename == "Scene") {
+          return s.id === id;
+        }
+      }),
+    [queueScenes, id, initialTimestamp]
   );
 
   function getSetTimestamp(fn: (value: number) => void) {
@@ -755,9 +773,21 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
     setQueueStart(1);
   }
 
+  async function getQueueFilterSceneMarkers(filter: ListFilterModel) {
+    const query = await queryFindSceneMarkers(filter);
+    const { scene_markers, count } = query.data.findSceneMarkers;
+    setQueueScenes(scene_markers);
+    setQueueTotal(count);
+    setQueueStart((filter.currentPage - 1) * filter.itemsPerPage + 1);
+  }
+
   useEffect(() => {
     if (sceneQueue.query) {
-      getQueueFilterScenes(sceneQueue.query);
+      if (sceneQueue.query.mode == FilterMode.SceneMarkers) {
+        getQueueFilterSceneMarkers(sceneQueue.query);
+      } else if (sceneQueue.query.mode == FilterMode.Scenes) {
+        getQueueFilterScenes(sceneQueue.query);
+      }
     } else if (sceneQueue.sceneIDs) {
       getQueueScenes(sceneQueue.sceneIDs);
     }
@@ -771,15 +801,28 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
     const filterCopy = sceneQueue.query.clone();
     const newStart = queueStart - filterCopy.itemsPerPage;
     filterCopy.currentPage = Math.ceil(newStart / filterCopy.itemsPerPage);
-    const query = await queryFindScenes(filterCopy);
-    const { scenes } = query.data.findScenes;
 
-    // prepend scenes to scene list
-    const newScenes = (scenes as QueuedScene[]).concat(queueScenes);
-    setQueueScenes(newScenes);
-    setQueueStart(newStart);
+    if (sceneQueue.query.mode == FilterMode.SceneMarkers) {
+      const query = await queryFindSceneMarkers(filterCopy);
+      const { scene_markers } = query.data.findSceneMarkers;
+
+      // prepend scenes to scene list
+      const newScenes = (scene_markers as QueuedItem[]).concat(queueScenes);
+      setQueueScenes(newScenes);
+      setQueueStart(newStart);
+
+      return scene_markers;
+    } else if (sceneQueue.query.mode == FilterMode.Scenes) {
+      const query = await queryFindScenes(filterCopy);
+      const { scenes } = query.data.findScenes;
+
+      // prepend scenes to scene list
+      const newScenes = (scenes as QueuedItem[]).concat(queueScenes);
+      setQueueScenes(newScenes);
+      setQueueStart(newStart);
 
-    return scenes;
+      return scenes;
+    }
   }
 
   const queueHasMoreScenes = useMemo(() => {
@@ -794,21 +837,73 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
     const filterCopy = sceneQueue.query.clone();
     const newStart = queueStart + queueScenes.length;
     filterCopy.currentPage = Math.ceil(newStart / filterCopy.itemsPerPage);
-    const query = await queryFindScenes(filterCopy);
-    const { scenes } = query.data.findScenes;
-
-    // append scenes to scene list
-    const newScenes = queueScenes.concat(scenes);
-    setQueueScenes(newScenes);
-    // don't change queue start
-    return scenes;
+
+    if (sceneQueue.query.mode == FilterMode.SceneMarkers) {
+      const query = await queryFindSceneMarkers(filterCopy);
+      const { scene_markers } = query.data.findSceneMarkers;
+
+      // append scenes to scene list
+      const newScenes = queueScenes.concat(scene_markers);
+      setQueueScenes(newScenes);
+
+      return scene_markers;
+    } else if (sceneQueue.query.mode == FilterMode.Scenes) {
+      const query = await queryFindScenes(filterCopy);
+      const { scenes } = query.data.findScenes;
+
+      // append scenes to scene list
+      const newScenes = queueScenes.concat(scenes);
+      setQueueScenes(newScenes);
+
+      return scenes;
+    }
+  }
+
+  function loadQueueScene(
+    queuedScene: QueuedItem,
+    autoPlay?: boolean,
+    newPage?: number
+  ) {
+    if (queuedScene.__typename == "SceneMarker") {
+      loadScene(
+        queuedScene.scene.id,
+        autoPlay,
+        newPage,
+        queuedScene.seconds,
+        queuedScene.end_seconds,
+        "scene_marker"
+      );
+      // Scene page does not reload if the sceneid is the same so move timeline to marker.
+      if (queuedScene.scene.id == id) {
+        setTimestamp(queuedScene.seconds);
+      }
+    } else if (queuedScene.__typename == "Scene") {
+      loadScene(
+        queuedScene.id,
+        autoPlay,
+        newPage,
+        undefined,
+        undefined,
+        "scene"
+      );
+    }
   }
 
-  function loadScene(sceneID: string, autoPlay?: boolean, newPage?: number) {
+  function loadScene(
+    sceneID: string,
+    autoPlay?: boolean,
+    newPage?: number,
+    start?: number,
+    end?: number | null,
+    mode?: "scene" | "scene_marker"
+  ) {
     const sceneLink = sceneQueue.makeLink(sceneID, {
       newPage,
       autoPlay,
       continue: continuePlaylist,
+      start,
+      end,
+      mode,
     });
     history.replace(sceneLink);
   }
@@ -817,7 +912,7 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
     if (currentQueueIndex === -1) return;
 
     if (currentQueueIndex < queueScenes.length - 1) {
-      loadScene(queueScenes[currentQueueIndex + 1].id, autoPlay);
+      loadQueueScene(queueScenes[currentQueueIndex + 1], autoplay);
     } else {
       // if we're at the end of the queue, load more scenes
       if (currentQueueIndex === queueScenes.length - 1 && queueHasMoreScenes) {
@@ -825,7 +920,7 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
         if (loadedScenes && loadedScenes.length > 0) {
           // set the page to the next page
           const newPage = (sceneQueue.query?.currentPage ?? 0) + 1;
-          loadScene(loadedScenes[0].id, autoPlay, newPage);
+          loadQueueScene(loadedScenes[0], autoPlay, newPage);
         }
       }
     }
@@ -835,15 +930,15 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
     if (currentQueueIndex === -1) return;
 
     if (currentQueueIndex > 0) {
-      loadScene(queueScenes[currentQueueIndex - 1].id, autoPlay);
+      loadQueueScene(queueScenes[currentQueueIndex - 1], autoPlay);
     } else {
       // if we're at the beginning of the queue, load the previous page
       if (queueStart > 1) {
         const loadedScenes = await onQueueLessScenes();
         if (loadedScenes && loadedScenes.length > 0) {
           const newPage = (sceneQueue.query?.currentPage ?? 0) - 1;
-          loadScene(
-            loadedScenes[loadedScenes.length - 1].id,
+          loadQueueScene(
+            loadedScenes[loadedScenes.length - 1],
             autoPlay,
             newPage
           );
@@ -862,11 +957,22 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
       );
       const filterCopy = sceneQueue.query.clone();
       filterCopy.currentPage = page;
-      const queryResults = await queryFindScenes(filterCopy);
-      if (queryResults.data.findScenes.scenes.length > index) {
-        const { id: sceneID } = queryResults.data.findScenes.scenes[index];
-        // navigate to the image player page
-        loadScene(sceneID, autoPlay, page);
+
+      if (sceneQueue.query.mode == FilterMode.SceneMarkers) {
+        const queryResults = await queryFindSceneMarkers(filterCopy);
+        if (queryResults.data.findSceneMarkers.scene_markers.length > index) {
+          const sceneMarker =
+            queryResults.data.findSceneMarkers.scene_markers[index];
+          // navigate to the image player page
+          loadQueueScene(sceneMarker, autoPlay, page);
+        }
+      } else if (sceneQueue.query.mode == FilterMode.Scenes) {
+        const queryResults = await queryFindScenes(filterCopy);
+        if (queryResults.data.findScenes.scenes.length > index) {
+          const sceneResult = queryResults.data.findScenes.scenes[index];
+          // navigate to the image player page
+          loadQueueScene(sceneResult, autoPlay, page);
+        }
       }
     } else if (queueTotal !== 0) {
       const index = Math.floor(Math.random() * queueTotal);
@@ -887,7 +993,7 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
       currentQueueIndex >= 0 &&
       currentQueueIndex < queueScenes.length - 1
     ) {
-      loadScene(queueScenes[currentQueueIndex + 1].id);
+      loadQueueScene(queueScenes[currentQueueIndex + 1]);
     } else {
       history.push("/scenes");
     }
@@ -905,8 +1011,12 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
     return Math.floor((index + queueStart - 1) / perPage) + 1;
   }
 
-  function onQueueSceneClicked(sceneID: string) {
-    loadScene(sceneID, autoPlayOnSelected, getScenePage(sceneID));
+  function onQueueSceneClicked(queuedScene: QueuedItem) {
+    loadQueueScene(
+      queuedScene,
+      autoPlayOnSelected,
+      getScenePage(queuedScene.id)
+    );
   }
 
   if (!scene) {
@@ -934,6 +1044,7 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
         collapsed={collapsed}
         setCollapsed={setCollapsed}
         setContinuePlaylist={setContinuePlaylist}
+        initialTimestamp={initialTimestamp}
       />
       <div className={`scene-player-container ${collapsed ? "expanded" : ""}`}>
         <ScenePlayer
@@ -943,6 +1054,7 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
           autoplay={autoplay}
           permitLoop={!continuePlaylist}
           initialTimestamp={initialTimestamp}
+          initialEndstamp={initialEndstamp}
           sendSetTimestamp={getSetTimestamp}
           onComplete={onComplete}
           onNext={() => queueNext(true)}
diff --git a/ui/v2.5/src/components/Scenes/SceneMarkerCard.tsx b/ui/v2.5/src/components/Scenes/SceneMarkerCard.tsx
index b18e1fa544a..ca14db759bd 100644
--- a/ui/v2.5/src/components/Scenes/SceneMarkerCard.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneMarkerCard.tsx
@@ -16,12 +16,14 @@ import { objectTitle } from "src/core/files";
 import { PerformerPopoverButton } from "../Shared/PerformerPopoverButton";
 import { ScenePreview } from "./SceneCard";
 import { TruncatedText } from "../Shared/TruncatedText";
+import { SceneQueue } from "src/models/sceneQueue";
 
 interface ISceneMarkerCardProps {
   marker: GQL.SceneMarkerDataFragment;
   containerWidth?: number;
   previewHeight?: number;
   index?: number;
+  queue?: SceneQueue;
   compact?: boolean;
   selecting?: boolean;
   selected?: boolean | undefined;
@@ -194,10 +196,20 @@ export const SceneMarkerCard = (props: ISceneMarkerCardProps) => {
     setCardWidth(fittedCardWidth);
   }, [props, props.containerWidth, props.zoomIndex]);
 
+  const sceneMarkerLink = props.queue
+    ? props.queue.makeLink(props.marker.scene.id, {
+        sceneIndex: props.index,
+        continue: undefined,
+        start: props.marker.seconds,
+        end: props.marker.end_seconds,
+        mode: "scene_marker",
+      })
+    : NavUtils.makeSceneMarkerUrl(props.marker);
+
   return (
     <GridCard
       className={`scene-marker-card ${zoomIndex()}`}
-      url={NavUtils.makeSceneMarkerUrl(props.marker)}
+      url={sceneMarkerLink}
       title={markerTitle(props.marker)}
       width={cardWidth}
       linkClassName="scene-marker-card-link"
diff --git a/ui/v2.5/src/components/Scenes/SceneMarkerCardsGrid.tsx b/ui/v2.5/src/components/Scenes/SceneMarkerCardsGrid.tsx
index 6532f535a97..f8b3020f45b 100644
--- a/ui/v2.5/src/components/Scenes/SceneMarkerCardsGrid.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneMarkerCardsGrid.tsx
@@ -2,9 +2,11 @@ import React from "react";
 import * as GQL from "src/core/generated-graphql";
 import { SceneMarkerCard } from "./SceneMarkerCard";
 import { useContainerDimensions } from "../Shared/GridCard/GridCard";
+import { SceneQueue } from "src/models/sceneQueue";
 
 interface ISceneMarkerCardsGrid {
   markers: GQL.SceneMarkerDataFragment[];
+  queue?: SceneQueue;
   selectedIds: Set<string>;
   zoomIndex: number;
   onSelectChange: (id: string, selected: boolean, shiftKey: boolean) => void;
@@ -12,6 +14,7 @@ interface ISceneMarkerCardsGrid {
 
 export const SceneMarkerCardsGrid: React.FC<ISceneMarkerCardsGrid> = ({
   markers,
+  queue,
   selectedIds,
   zoomIndex,
   onSelectChange,
@@ -24,6 +27,7 @@ export const SceneMarkerCardsGrid: React.FC<ISceneMarkerCardsGrid> = ({
           key={marker.id}
           containerWidth={width}
           marker={marker}
+          queue={queue}
           index={index}
           zoomIndex={zoomIndex}
           selecting={selectedIds.size > 0}
diff --git a/ui/v2.5/src/components/Scenes/SceneMarkerList.tsx b/ui/v2.5/src/components/Scenes/SceneMarkerList.tsx
index 33ae79558bd..f54f815c81f 100644
--- a/ui/v2.5/src/components/Scenes/SceneMarkerList.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneMarkerList.tsx
@@ -8,7 +8,6 @@ import {
   queryFindSceneMarkers,
   useFindSceneMarkers,
 } from "src/core/StashService";
-import NavUtils from "src/utils/navigation";
 import { ItemList, ItemListContext } from "../List/ItemList";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import { DisplayMode } from "src/models/list-filter/types";
@@ -16,6 +15,8 @@ import { MarkerWallPanel } from "../Wall/WallPanel";
 import { View } from "../List/views";
 import { SceneMarkerCardsGrid } from "./SceneMarkerCardsGrid";
 import { DeleteSceneMarkersDialog } from "./DeleteSceneMarkersDialog";
+import { SceneQueue } from "src/models/sceneQueue";
+import { ConfigurationContext } from "src/hooks/Config";
 
 function getItems(result: GQL.FindSceneMarkersQueryResult) {
   return result?.data?.findSceneMarkers?.scene_markers ?? [];
@@ -39,7 +40,7 @@ export const SceneMarkerList: React.FC<ISceneMarkerList> = ({
 }) => {
   const intl = useIntl();
   const history = useHistory();
-
+  const config = React.useContext(ConfigurationContext);
   const filterMode = GQL.FilterMode.SceneMarkers;
 
   const otherOperations = [
@@ -69,17 +70,26 @@ export const SceneMarkerList: React.FC<ISceneMarkerList> = ({
     // query for a random scene
     if (result.data?.findSceneMarkers) {
       const { count } = result.data.findSceneMarkers;
-
-      const index = Math.floor(Math.random() * count);
+      const pages = Math.ceil(count / filter.itemsPerPage);
+      const page = Math.floor(Math.random() * pages) + 1;
+      const indexMax = Math.min(filter.itemsPerPage, count);
+      const index = Math.floor(Math.random() * indexMax);
       const filterCopy = cloneDeep(filter);
-      filterCopy.itemsPerPage = 1;
-      filterCopy.currentPage = index + 1;
-      const singleResult = await queryFindSceneMarkers(filterCopy);
-      if (singleResult.data.findSceneMarkers.scene_markers.length === 1) {
-        // navigate to the scene player page
-        const url = NavUtils.makeSceneMarkerUrl(
-          singleResult.data.findSceneMarkers.scene_markers[0]
-        );
+      filterCopy.currentPage = page;
+      filterCopy.sortBy = "random";
+      const queryResults = await queryFindSceneMarkers(filterCopy);
+      const marker = queryResults.data.findSceneMarkers.scene_markers[index];
+      if (marker) {
+        const queue = SceneQueue.fromListFilterModel(filterCopy);
+        const autoPlay =
+          config.configuration?.interface.autostartVideoOnPlaySelected ?? false;
+        const url = queue.makeLink(marker.scene.id, {
+          sceneIndex: index,
+          continue: autoPlay,
+          start: marker.seconds,
+          end: marker.end_seconds,
+          mode: "scene_marker",
+        });
         history.push(url);
       }
     }
@@ -93,9 +103,14 @@ export const SceneMarkerList: React.FC<ISceneMarkerList> = ({
   ) {
     if (!result.data?.findSceneMarkers) return;
 
+    const queue = SceneQueue.fromListFilterModel(filter);
+
     if (filter.displayMode === DisplayMode.Wall) {
       return (
-        <MarkerWallPanel markers={result.data.findSceneMarkers.scene_markers} />
+        <MarkerWallPanel
+          markers={result.data.findSceneMarkers.scene_markers}
+          sceneQueue={queue}
+        />
       );
     }
 
@@ -103,6 +118,7 @@ export const SceneMarkerList: React.FC<ISceneMarkerList> = ({
       return (
         <SceneMarkerCardsGrid
           markers={result.data.findSceneMarkers.scene_markers}
+          queue={queue}
           zoomIndex={filter.zoomIndex}
           selectedIds={selectedIds}
           onSelectChange={onSelectChange}
diff --git a/ui/v2.5/src/components/Scenes/styles.scss b/ui/v2.5/src/components/Scenes/styles.scss
index bb50236ecb6..84afa4b14f7 100644
--- a/ui/v2.5/src/components/Scenes/styles.scss
+++ b/ui/v2.5/src/components/Scenes/styles.scss
@@ -601,14 +601,20 @@ input[type="range"].blue-slider {
 
 @media (min-width: 1200px) {
   #queue-viewer {
-    .queue-scene-details {
+    .queue-scene-details,
+    .queue-marker-details {
       width: 245px;
     }
 
     .queue-scene-title,
     .queue-scene-studio,
     .queue-scene-performers,
-    .queue-scene-date {
+    .queue-scene-date,
+    .queue-scene-date,
+    .queue-marker-title,
+    .queue-marker-scene,
+    .queue-marker-performers,
+    .queue-marker-tags {
       margin-right: auto;
       min-width: 245px;
       overflow: hidden;
@@ -621,7 +627,11 @@ input[type="range"].blue-slider {
     .queue-scene-title:hover,
     .queue-scene-studio:hover,
     .queue-scene-performers:hover,
-    .queue-scene-date:hover {
+    .queue-scene-date:hover,
+    .queue-marker-title:hover,
+    .queue-marker-scene:hover,
+    .queue-marker-performers:hover,
+    .queue-marker-tags:hover {
       transform: translateX(calc(245px - 100%));
     }
   }
@@ -640,13 +650,15 @@ input[type="range"].blue-slider {
     z-index: 100;
   }
 
-  .queue-scene-details {
+  .queue-scene-details,
+  .queue-marker-details {
     display: grid;
     overflow: hidden;
     position: relative;
   }
 
-  .queue-scene-title {
+  .queue-scene-title,
+  .queue-marker-title {
     font-size: 1.2rem;
 
     @media (max-width: 576px) {
@@ -654,13 +666,16 @@ input[type="range"].blue-slider {
     }
   }
 
-  .queue-scene-studio {
+  .queue-scene-studio,
+  .queue-marker-scene {
     color: #d3d0d0;
     font-weight: 600;
   }
 
   .queue-scene-performers,
-  .queue-scene-date {
+  .queue-scene-date,
+  .queue-marker-performers,
+  .queue-marker-tags {
     color: #d3d0d0;
     font-size: 0.9rem;
     font-weight: 400;
diff --git a/ui/v2.5/src/components/Wall/WallItem.tsx b/ui/v2.5/src/components/Wall/WallItem.tsx
index 5811b75437e..18b0d46d29f 100644
--- a/ui/v2.5/src/components/Wall/WallItem.tsx
+++ b/ui/v2.5/src/components/Wall/WallItem.tsx
@@ -167,7 +167,14 @@ export const WallItem = <T extends WallItemType>({
           : `/scenes/${scene.id}`;
       case "sceneMarker":
         const sceneMarker = data as GQL.SceneMarkerDataFragment;
-        return NavUtils.makeSceneMarkerUrl(sceneMarker);
+        return sceneQueue
+          ? sceneQueue.makeLink(sceneMarker.scene.id, {
+              sceneIndex: index,
+              start: sceneMarker.seconds,
+              end: sceneMarker.end_seconds,
+              mode: "scene_marker",
+            })
+          : NavUtils.makeSceneMarkerUrl(sceneMarker);
       case "image":
         const image = data as GQL.SlimImageDataFragment;
         return `/images/${image.id}`;
diff --git a/ui/v2.5/src/components/Wall/WallPanel.tsx b/ui/v2.5/src/components/Wall/WallPanel.tsx
index 91ee7607f4c..1d837fd9d0c 100644
--- a/ui/v2.5/src/components/Wall/WallPanel.tsx
+++ b/ui/v2.5/src/components/Wall/WallPanel.tsx
@@ -76,15 +76,22 @@ export const ImageWallPanel: React.FC<IImageWallPanelProps> = ({
 
 interface IMarkerWallPanelProps {
   markers: GQL.SceneMarkerDataFragment[];
+  sceneQueue?: SceneQueue;
   clickHandler?: (e: MouseEvent, item: GQL.SceneMarkerDataFragment) => void;
 }
 
 export const MarkerWallPanel: React.FC<IMarkerWallPanelProps> = ({
   markers,
+  sceneQueue,
   clickHandler,
 }) => {
   return (
-    <WallPanel type="sceneMarker" data={markers} clickHandler={clickHandler} />
+    <WallPanel
+      type="sceneMarker"
+      data={markers}
+      sceneQueue={sceneQueue}
+      clickHandler={clickHandler}
+    />
   );
 };
 
diff --git a/ui/v2.5/src/models/sceneQueue.ts b/ui/v2.5/src/models/sceneQueue.ts
index ceec6909031..6fdd48fd52e 100644
--- a/ui/v2.5/src/models/sceneQueue.ts
+++ b/ui/v2.5/src/models/sceneQueue.ts
@@ -1,18 +1,41 @@
-import { FilterMode, Scene } from "src/core/generated-graphql";
+import {
+  FilterMode,
+  Scene,
+  SceneMarker,
+  Tag,
+} from "src/core/generated-graphql";
 import { ListFilterModel } from "./list-filter/filter";
 import { INamedObject } from "src/utils/navigation";
 
-export type QueuedScene = Pick<Scene, "id" | "title" | "date" | "paths"> & {
+export type QueuedScene = Pick<
+  Scene,
+  "__typename" | "id" | "title" | "date" | "paths"
+> & {
   performers?: INamedObject[] | null;
   studio?: INamedObject | null;
 };
 
+export type QueuedSceneMarker = Pick<
+  SceneMarker,
+  "__typename" | "id" | "seconds" | "title" | "screenshot" | "end_seconds"
+> & {
+  tags?: INamedObject[] | null;
+  primary_tag: Pick<Tag, "id" | "name">;
+  scene: Pick<Scene, "id" | "title"> & {
+    performers?: INamedObject[] | null;
+  };
+};
+
+export type QueuedItem = QueuedScene | QueuedSceneMarker;
+
 export interface IPlaySceneOptions {
   sceneIndex?: number;
   newPage?: number;
   autoPlay?: boolean;
   continue?: boolean;
   start?: number;
+  end?: number | null;
+  mode?: "scene" | "scene_marker";
 }
 
 export class SceneQueue {
@@ -40,7 +63,11 @@ export class SceneQueue {
     return ret;
   }
 
-  private makeQueryParameters(sceneIndex?: number, page?: number) {
+  private makeQueryParameters(
+    sceneIndex?: number,
+    page?: number,
+    mode?: string
+  ) {
     const ret: string[] = [];
 
     if (this.query) {
@@ -75,6 +102,10 @@ export class SceneQueue {
         qfp = String(newPage);
       }
       ret.push(`qfp=${qfp}`);
+
+      if (mode) {
+        ret.push(`qfm=${mode}`);
+      }
     } else if (this.sceneIDs && this.sceneIDs.length > 0) {
       for (const id of this.sceneIDs) {
         ret.push(`qs=${id}`);
@@ -95,8 +126,16 @@ export class SceneQueue {
         p: params.get("qfp"),
         c: params.getAll("qfc"),
       };
+
+      const filtermode =
+        params.get("qfm") === "scene_marker"
+          ? FilterMode.SceneMarkers
+          : params.get("qfm") === "scene"
+          ? FilterMode.Scenes
+          : FilterMode.Scenes;
+
       const decoded = ListFilterModel.decodeParams(translated);
-      const query = new ListFilterModel(FilterMode.Scenes);
+      const query = new ListFilterModel(filtermode);
       query.configureFromDecodedParams(decoded);
       ret.query = query;
     } else if (params.has("qs")) {
@@ -109,7 +148,11 @@ export class SceneQueue {
 
   public makeLink(sceneID: string, options: IPlaySceneOptions) {
     let params = [
-      this.makeQueryParameters(options.sceneIndex, options.newPage),
+      this.makeQueryParameters(
+        options.sceneIndex,
+        options.newPage,
+        options.mode
+      ),
     ];
     if (options.autoPlay) {
       params.push("autoplay=true");
@@ -118,7 +161,11 @@ export class SceneQueue {
       params.push("continue=" + options.continue);
     }
     if (options.start !== undefined) {
-      params.push("t=" + options.start);
+      if (options.end) {
+        params.push("t=" + options.start + "," + options.end);
+      } else {
+        params.push("t=" + options.start);
+      }
     }
     return `/scenes/${sceneID}${params.length ? "?" + params.join("&") : ""}`;
   }

From 55aa272a46c91899262c0117a7fbe4b6dfcc5ac2 Mon Sep 17 00:00:00 2001
From: dogwithakeyboard <gdkjhsahdka@protonmail.com>
Date: Mon, 3 Feb 2025 22:15:36 +0000
Subject: [PATCH 2/5] Add "play selected" function for markers

---
 ui/v2.5/graphql/queries/scene-marker.graphql  |  7 +++-
 .../components/Scenes/SceneDetails/Scene.tsx  | 11 +++++++
 .../src/components/Scenes/SceneMarkerList.tsx | 33 ++++++++++++++++++-
 ui/v2.5/src/core/StashService.ts              |  8 +++++
 ui/v2.5/src/models/sceneQueue.ts              | 14 ++++++++
 5 files changed, 71 insertions(+), 2 deletions(-)

diff --git a/ui/v2.5/graphql/queries/scene-marker.graphql b/ui/v2.5/graphql/queries/scene-marker.graphql
index ab16611cf6f..42497721e86 100644
--- a/ui/v2.5/graphql/queries/scene-marker.graphql
+++ b/ui/v2.5/graphql/queries/scene-marker.graphql
@@ -1,8 +1,13 @@
 query FindSceneMarkers(
   $filter: FindFilterType
   $scene_marker_filter: SceneMarkerFilterType
+  $ids: [ID!]
 ) {
-  findSceneMarkers(filter: $filter, scene_marker_filter: $scene_marker_filter) {
+  findSceneMarkers(
+    filter: $filter
+    scene_marker_filter: $scene_marker_filter
+    ids: $ids
+  ) {
     count
     scene_markers {
       ...SceneMarkerData
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
index f062f30ba34..189bfd404ca 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
@@ -21,6 +21,7 @@ import {
   queryFindScenesByID,
   useSceneIncrementPlayCount,
   queryFindSceneMarkers,
+  queryFindSceneMarkersByID,
 } from "src/core/StashService";
 
 import { SceneEditPanel } from "./SceneEditPanel";
@@ -781,6 +782,14 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
     setQueueStart((filter.currentPage - 1) * filter.itemsPerPage + 1);
   }
 
+  async function getQueueSceneMarkers(sceneMarkerIDs: number[]) {
+    const query = await queryFindSceneMarkersByID(sceneMarkerIDs);
+    const { scene_markers, count } = query.data.findSceneMarkers;
+    setQueueScenes(scene_markers);
+    setQueueTotal(count);
+    setQueueStart(1);
+  }
+
   useEffect(() => {
     if (sceneQueue.query) {
       if (sceneQueue.query.mode == FilterMode.SceneMarkers) {
@@ -790,6 +799,8 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
       }
     } else if (sceneQueue.sceneIDs) {
       getQueueScenes(sceneQueue.sceneIDs);
+    } else if (sceneQueue.sceneMarkerIDs) {
+      getQueueSceneMarkers(sceneQueue.sceneMarkerIDs);
     }
   }, [sceneQueue]);
 
diff --git a/ui/v2.5/src/components/Scenes/SceneMarkerList.tsx b/ui/v2.5/src/components/Scenes/SceneMarkerList.tsx
index f54f815c81f..d4bfb6b86df 100644
--- a/ui/v2.5/src/components/Scenes/SceneMarkerList.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneMarkerList.tsx
@@ -6,9 +6,10 @@ import Mousetrap from "mousetrap";
 import * as GQL from "src/core/generated-graphql";
 import {
   queryFindSceneMarkers,
+  queryFindSceneMarkersByID,
   useFindSceneMarkers,
 } from "src/core/StashService";
-import { ItemList, ItemListContext } from "../List/ItemList";
+import { ItemList, ItemListContext, showWhenSelected } from "../List/ItemList";
 import { ListFilterModel } from "src/models/list-filter/filter";
 import { DisplayMode } from "src/models/list-filter/types";
 import { MarkerWallPanel } from "../Wall/WallPanel";
@@ -17,6 +18,7 @@ import { SceneMarkerCardsGrid } from "./SceneMarkerCardsGrid";
 import { DeleteSceneMarkersDialog } from "./DeleteSceneMarkersDialog";
 import { SceneQueue } from "src/models/sceneQueue";
 import { ConfigurationContext } from "src/hooks/Config";
+import { faPlay } from "@fortawesome/free-solid-svg-icons";
 
 function getItems(result: GQL.FindSceneMarkersQueryResult) {
   return result?.data?.findSceneMarkers?.scene_markers ?? [];
@@ -44,6 +46,12 @@ export const SceneMarkerList: React.FC<ISceneMarkerList> = ({
   const filterMode = GQL.FilterMode.SceneMarkers;
 
   const otherOperations = [
+    {
+      text: intl.formatMessage({ id: "actions.play_selected" }),
+      onClick: playSelected,
+      isDisplayed: showWhenSelected,
+      icon: faPlay,
+    },
     {
       text: intl.formatMessage({ id: "actions.play_random" }),
       onClick: playRandom,
@@ -63,6 +71,29 @@ export const SceneMarkerList: React.FC<ISceneMarkerList> = ({
     };
   }
 
+  async function playSelected(
+    result: GQL.FindSceneMarkersQueryResult,
+    filter: ListFilterModel,
+    selectedIds: Set<string>
+  ) {
+    // populate queue and go to first scene
+    const sceneMarkerIDs = Array.from(selectedIds.values());
+    const queue = SceneQueue.fromSceneMarkerIDList(sceneMarkerIDs);
+    const autoPlay =
+      config.configuration?.interface.autostartVideoOnPlaySelected ?? false;
+
+    // Fetch the first marker.
+    const query = await queryFindSceneMarkersByID([Number(sceneMarkerIDs[0])]);
+    const { scene_markers } = query.data.findSceneMarkers;
+    const url = queue.makeLink(scene_markers[0].scene.id, {
+      autoPlay: autoPlay,
+      start: scene_markers[0].seconds,
+      end: scene_markers[0].end_seconds,
+    });
+
+    history.push(url);
+  }
+
   async function playRandom(
     result: GQL.FindSceneMarkersQueryResult,
     filter: ListFilterModel
diff --git a/ui/v2.5/src/core/StashService.ts b/ui/v2.5/src/core/StashService.ts
index 1d9e344ebd8..52d8a704903 100644
--- a/ui/v2.5/src/core/StashService.ts
+++ b/ui/v2.5/src/core/StashService.ts
@@ -268,6 +268,14 @@ export const queryFindSceneMarkers = (filter: ListFilterModel) =>
     },
   });
 
+export const queryFindSceneMarkersByID = (sceneMarkerIDs: number[]) =>
+  client.query<GQL.FindSceneMarkersQuery>({
+    query: GQL.FindSceneMarkersDocument,
+    variables: {
+      ids: sceneMarkerIDs,
+    },
+  });
+
 export const useMarkerStrings = () => GQL.useMarkerStringsQuery();
 
 export const useFindGallery = (id: string) => {
diff --git a/ui/v2.5/src/models/sceneQueue.ts b/ui/v2.5/src/models/sceneQueue.ts
index 6fdd48fd52e..065c977e17e 100644
--- a/ui/v2.5/src/models/sceneQueue.ts
+++ b/ui/v2.5/src/models/sceneQueue.ts
@@ -41,6 +41,7 @@ export interface IPlaySceneOptions {
 export class SceneQueue {
   public query?: ListFilterModel;
   public sceneIDs?: number[];
+  public sceneMarkerIDs?: number[];
   private originalQueryPage?: number;
   private originalQueryPageSize?: number;
 
@@ -63,6 +64,12 @@ export class SceneQueue {
     return ret;
   }
 
+  public static fromSceneMarkerIDList(sceneMarkerIDs: string[]) {
+    const ret = new SceneQueue();
+    ret.sceneMarkerIDs = sceneMarkerIDs.map((v) => Number(v));
+    return ret;
+  }
+
   private makeQueryParameters(
     sceneIndex?: number,
     page?: number,
@@ -110,6 +117,10 @@ export class SceneQueue {
       for (const id of this.sceneIDs) {
         ret.push(`qs=${id}`);
       }
+    } else if (this.sceneMarkerIDs && this.sceneMarkerIDs.length > 0) {
+      for (const id of this.sceneMarkerIDs) {
+        ret.push(`qm=${id}`);
+      }
     }
 
     return ret.join("&");
@@ -141,6 +152,9 @@ export class SceneQueue {
     } else if (params.has("qs")) {
       // must be scene list
       ret.sceneIDs = params.getAll("qs").map((v) => Number(v));
+    } else if (params.has("qm")) {
+      // must be marker list
+      ret.sceneMarkerIDs = params.getAll("qm").map((v) => Number(v));
     }
 
     return ret;

From b4fb500d43333f653452de8d31d59599f2d8799c Mon Sep 17 00:00:00 2001
From: dogwithakeyboard <gdkjhsahdka@protonmail.com>
Date: Mon, 3 Feb 2025 22:24:23 +0000
Subject: [PATCH 3/5] Stop confusing autplay and continue.

---
 ui/v2.5/src/components/Scenes/SceneMarkerCard.tsx | 5 ++++-
 ui/v2.5/src/components/Scenes/SceneMarkerList.tsx | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui/v2.5/src/components/Scenes/SceneMarkerCard.tsx b/ui/v2.5/src/components/Scenes/SceneMarkerCard.tsx
index ca14db759bd..e07846901f3 100644
--- a/ui/v2.5/src/components/Scenes/SceneMarkerCard.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneMarkerCard.tsx
@@ -156,6 +156,7 @@ const SceneMarkerCardImage = (props: ISceneMarkerCardProps) => {
 };
 
 export const SceneMarkerCard = (props: ISceneMarkerCardProps) => {
+  const { configuration } = React.useContext(ConfigurationContext);
   const [cardWidth, setCardWidth] = useState<number>();
 
   function zoomIndex() {
@@ -196,10 +197,12 @@ export const SceneMarkerCard = (props: ISceneMarkerCardProps) => {
     setCardWidth(fittedCardWidth);
   }, [props, props.containerWidth, props.zoomIndex]);
 
+  const cont = configuration?.interface.continuePlaylistDefault ?? false;
+
   const sceneMarkerLink = props.queue
     ? props.queue.makeLink(props.marker.scene.id, {
         sceneIndex: props.index,
-        continue: undefined,
+        continue: cont,
         start: props.marker.seconds,
         end: props.marker.end_seconds,
         mode: "scene_marker",
diff --git a/ui/v2.5/src/components/Scenes/SceneMarkerList.tsx b/ui/v2.5/src/components/Scenes/SceneMarkerList.tsx
index d4bfb6b86df..8a55cb2bf28 100644
--- a/ui/v2.5/src/components/Scenes/SceneMarkerList.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneMarkerList.tsx
@@ -116,7 +116,7 @@ export const SceneMarkerList: React.FC<ISceneMarkerList> = ({
           config.configuration?.interface.autostartVideoOnPlaySelected ?? false;
         const url = queue.makeLink(marker.scene.id, {
           sceneIndex: index,
-          continue: autoPlay,
+          autoPlay: autoPlay,
           start: marker.seconds,
           end: marker.end_seconds,
           mode: "scene_marker",

From 5ea1d2f4bae58e02f1635f57cca16e083a1dee88 Mon Sep 17 00:00:00 2001
From: dogwithakeyboard <gdkjhsahdka@protonmail.com>
Date: Sat, 8 Feb 2025 17:44:46 +0000
Subject: [PATCH 4/5] Improve sceneplayer end time handling

---
 .../components/ScenePlayer/ScenePlayer.tsx    | 24 ++++++++++++-------
 .../components/Scenes/SceneDetails/Scene.tsx  | 14 ++++++++++-
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx
index 12ed32cd947..b66d5eaf2ea 100644
--- a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx
+++ b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx
@@ -203,7 +203,7 @@ interface IScenePlayerProps {
   autoplay?: boolean;
   permitLoop?: boolean;
   initialTimestamp: number;
-  initialEndstamp: number;
+  endTime: number | null;
   sendSetTimestamp: (setTimestamp: (value: number) => void) => void;
   onComplete: () => void;
   onNext: () => void;
@@ -216,7 +216,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
   autoplay,
   permitLoop = true,
   initialTimestamp: _initialTimestamp,
-  initialEndstamp,
+  endTime: endTime,
   sendSetTimestamp,
   onComplete,
   onNext,
@@ -692,6 +692,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
     uiConfig?.alwaysStartFromBeginning,
     uiConfig?.disableMobileMediaAutoRotateEnabled,
     _initialTimestamp,
+    endTime,
   ]);
 
   useEffect(() => {
@@ -795,17 +796,22 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
   // Try to detect that the player has passed the end point of a Marker
   useEffect(() => {
     const player = getPlayer();
-    if (!player || !initialEndstamp) return;
-    player.on("timeupdate", function () {
+    if (!player || !endTime) return;
+    function markerComplete(this: VideoJsPlayer) {
       if (
-        player.currentTime() >= initialEndstamp &&
-        player.currentTime() <= initialEndstamp + 0.5
+        !this.paused() &&
+        endTime &&
+        this.currentTime() >= endTime &&
+        this.currentTime() <= endTime + 1
       ) {
-        player.pause();
         onComplete();
       }
-    });
-  }, [getPlayer, initialEndstamp, onComplete]);
+    }
+    player.on("timeupdate", markerComplete);
+    return () => {
+      player.off("timeupdate", markerComplete);
+    };
+  }, [getPlayer, onComplete, endTime]);
 
   function onScrubberScroll() {
     if (started.current) {
diff --git a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
index 189bfd404ca..f813145587a 100644
--- a/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
+++ b/ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx
@@ -136,6 +136,7 @@ const VideoFrameRateResolution: React.FC<{
 interface IProps {
   scene: GQL.SceneDataFragment;
   setTimestamp: (num: number) => void;
+  setEndstamp: (num: number) => void;
   queueScenes: QueuedItem[];
   onQueueNext: () => void;
   onQueuePrevious: () => void;
@@ -710,6 +711,7 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
   );
 
   const _setTimestamp = useRef<(value: number) => void>();
+  const _setEndstamp = useRef<(value: number | null) => void>();
   const initialTimestamp = useMemo(() => {
     return Number.parseInt(queryParams.get("t")?.split(",")[0] ?? "0", 10);
   }, [queryParams]);
@@ -749,6 +751,12 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
     }
   }
 
+  function setEndstamp(value: number | null) {
+    if (_setEndstamp.current) {
+      _setEndstamp.current(value);
+    }
+  }
+
   // set up hotkeys
   useEffect(() => {
     Mousetrap.bind(".", () => setHideScrubber((value) => !value));
@@ -887,6 +895,9 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
       // Scene page does not reload if the sceneid is the same so move timeline to marker.
       if (queuedScene.scene.id == id) {
         setTimestamp(queuedScene.seconds);
+        // Set new marker endtime.
+        const end_seconds = queuedScene.end_seconds ?? null;
+        setEndstamp(end_seconds);
       }
     } else if (queuedScene.__typename == "Scene") {
       loadScene(
@@ -1041,6 +1052,7 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
       <ScenePage
         scene={scene}
         setTimestamp={setTimestamp}
+        setEndstamp={setEndstamp}
         queueScenes={queueScenes}
         queueStart={queueStart}
         onDelete={onDelete}
@@ -1065,7 +1077,7 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
           autoplay={autoplay}
           permitLoop={!continuePlaylist}
           initialTimestamp={initialTimestamp}
-          initialEndstamp={initialEndstamp}
+          endTime={initialEndstamp}
           sendSetTimestamp={getSetTimestamp}
           onComplete={onComplete}
           onNext={() => queueNext(true)}

From 72216202e2bd85139cd7a572378858c3bd1a98a9 Mon Sep 17 00:00:00 2001
From: dogwithakeyboard <gdkjhsahdka@protonmail.com>
Date: Sun, 9 Feb 2025 12:04:41 +0000
Subject: [PATCH 5/5] tidy up

---
 ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx
index b66d5eaf2ea..40f3bfe8039 100644
--- a/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx
+++ b/ui/v2.5/src/components/ScenePlayer/ScenePlayer.tsx
@@ -216,7 +216,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
   autoplay,
   permitLoop = true,
   initialTimestamp: _initialTimestamp,
-  endTime: endTime,
+  endTime,
   sendSetTimestamp,
   onComplete,
   onNext,