Tagger preview scrubber and thumbnail (#5507)

ui/v2.5/src/components/Tagger/scenes/SceneTagger.tsx

@@ -69,6 +69,8 @@ const Scene: React.FC<{
           : undefined
       }
       showLightboxImage={showLightboxImage}
+      queue={queue}
+      index={index}
     >
       {searchResult && searchResult.results?.length ? (
         <SceneSearchResults scenes={searchResult.results} target={scene} />

ui/v2.5/src/components/Tagger/scenes/TaggerScene.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useContext, PropsWithChildren, useMemo } from "react";
 import * as GQL from "src/core/generated-graphql";
-import { Link } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import { Button, Collapse, Form, InputGroup } from "react-bootstrap";
 import { FormattedMessage } from "react-intl";
 
@@ -19,6 +19,8 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { objectPath, objectTitle } from "src/core/files";
 import { ExternalLink } from "src/components/Shared/ExternalLink";
+import { ConfigurationContext } from "src/hooks/Config";
+import { SceneQueue } from "src/models/sceneQueue";
 
 interface ITaggerSceneDetails {
   scene: GQL.SlimSceneDataFragment;
@@ -91,6 +93,8 @@ interface ITaggerScene {
   scrapeSceneFragment?: (scene: GQL.SlimSceneDataFragment) => void;
   loading?: boolean;
   showLightboxImage: (imagePath: string) => void;
+  queue?: SceneQueue;
+  index?: number;
 }
 
 export const TaggerScene: React.FC<PropsWithChildren<ITaggerScene>> = ({
@@ -102,6 +106,8 @@ export const TaggerScene: React.FC<PropsWithChildren<ITaggerScene>> = ({
   errorMessage,
   children,
   showLightboxImage,
+  queue,
+  index,
 }) => {
   const { config } = useContext(TaggerStateContext);
   const [queryString, setQueryString] = useState<string>("");
@@ -125,6 +131,11 @@ export const TaggerScene: React.FC<PropsWithChildren<ITaggerScene>> = ({
   const height = file?.height ? file.height : 0;
   const isPortrait = height > width;
 
+  const history = useHistory();
+
+  const { configuration } = React.useContext(ConfigurationContext);
+  const cont = configuration?.interface.continuePlaylistDefault ?? false;
+
   async function query() {
     if (!doSceneQuery) return;
 
@@ -213,6 +224,18 @@ export const TaggerScene: React.FC<PropsWithChildren<ITaggerScene>> = ({
     }
   }
 
+  function onScrubberClick(timestamp: number) {
+    const link = queue
+      ? queue.makeLink(scene.id, {
+          sceneIndex: index,
+          continue: cont,
+          start: timestamp,
+        })
+      : `/scenes/${scene.id}?t=${timestamp}`;
+
+    history.push(link);
+  }
+
   return (
     <div key={scene.id} className="mt-3 search-item">
       <div className="row">
@@ -224,6 +247,8 @@ export const TaggerScene: React.FC<PropsWithChildren<ITaggerScene>> = ({
                 video={scene.paths.preview ?? undefined}
                 isPortrait={isPortrait}
                 soundActive={false}
+                vttPath={scene.paths.vtt ?? undefined}
+                onScrubberClick={onScrubberClick}
               />
               {maybeRenderSpriteIcon()}
             </Link>

ui/v2.5/src/components/Tagger/styles.scss

@@ -12,22 +12,19 @@
 
   .scene-card-preview {
     border-radius: 3px;
+    color: $text-color;
+    height: 100px;
     margin-bottom: 0;
-    max-height: 100px;
     overflow: hidden;
-    width: 150px;
+    width: auto;
-
-    &-video {
-      background-color: #495b68;
-    }
   }
 
   .sprite-button {
-    bottom: 5px;
     filter: drop-shadow(1px 1px 1px #222);
     padding: 0;
     position: absolute;
     right: 5px;
+    top: 5px;
   }
 
   .sub-content {