diff --git a/ui/v2.5/src/components/Tagger/scenes/SceneTagger.tsx b/ui/v2.5/src/components/Tagger/scenes/SceneTagger.tsx index ab6bd226e33..67ea5ea5d06 100755 --- a/ui/v2.5/src/components/Tagger/scenes/SceneTagger.tsx +++ b/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 ? ( diff --git a/ui/v2.5/src/components/Tagger/scenes/TaggerScene.tsx b/ui/v2.5/src/components/Tagger/scenes/TaggerScene.tsx index 01cad14787a..a7156318f8a 100644 --- a/ui/v2.5/src/components/Tagger/scenes/TaggerScene.tsx +++ b/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> = ({ @@ -102,6 +106,8 @@ export const TaggerScene: React.FC> = ({ errorMessage, children, showLightboxImage, + queue, + index, }) => { const { config } = useContext(TaggerStateContext); const [queryString, setQueryString] = useState(""); @@ -125,6 +131,11 @@ export const TaggerScene: React.FC> = ({ 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> = ({ } } + 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 (
@@ -224,6 +247,8 @@ export const TaggerScene: React.FC> = ({ video={scene.paths.preview ?? undefined} isPortrait={isPortrait} soundActive={false} + vttPath={scene.paths.vtt ?? undefined} + onScrubberClick={onScrubberClick} /> {maybeRenderSpriteIcon()} diff --git a/ui/v2.5/src/components/Tagger/styles.scss b/ui/v2.5/src/components/Tagger/styles.scss index 5fcff5baf02..b7fd576bf0d 100644 --- a/ui/v2.5/src/components/Tagger/styles.scss +++ b/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; - - &-video { - background-color: #495b68; - } + width: auto; } .sprite-button { - bottom: 5px; filter: drop-shadow(1px 1px 1px #222); padding: 0; position: absolute; right: 5px; + top: 5px; } .sub-content {