Scene Marker Queue

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

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

@@ -203,6 +203,7 @@ interface IScenePlayerProps {
   autoplay?: boolean;
   permitLoop?: boolean;
   initialTimestamp: number;
+  endTime: number | null;
   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,
+  endTime,
   sendSetTimestamp,
   onComplete,
   onNext,
@@ -690,6 +692,7 @@ export const ScenePlayer: React.FC<IScenePlayerProps> = ({
     uiConfig?.alwaysStartFromBeginning,
     uiConfig?.disableMobileMediaAutoRotateEnabled,
     _initialTimestamp,
+    endTime,
   ]);
 
   useEffect(() => {
@@ -790,6 +793,26 @@ 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 || !endTime) return;
+    function markerComplete(this: VideoJsPlayer) {
+      if (
+        !this.paused() &&
+        endTime &&
+        this.currentTime() >= endTime &&
+        this.currentTime() <= endTime + 1
+      ) {
+        onComplete();
+      }
+    }
+    player.on("timeupdate", markerComplete);
+    return () => {
+      player.off("timeupdate", markerComplete);
+    };
+  }, [getPlayer, onComplete, endTime]);
+
   function onScrubberScroll() {
     if (started.current) {
       getPlayer()?.pause();

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,15 +100,15 @@ export const QueueViewer: React.FC<IPlaylistViewer> = ({
     onMoreScenes();
   }
 
-  function renderPlaylistEntry(scene: QueuedScene) {
+  function renderPlaylistEntryScene(scene: QueuedScene) {
     return (
       <li
         className={cx("my-2", { current: isCurrentScene(scene) })}
         key={scene.id}
       >
         <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}>