diff --git a/ui/v2.5/src/components/Scenes/SceneCard.tsx b/ui/v2.5/src/components/Scenes/SceneCard.tsx index d3d3eb04f..38fb18dd4 100644 --- a/ui/v2.5/src/components/Scenes/SceneCard.tsx +++ b/ui/v2.5/src/components/Scenes/SceneCard.tsx @@ -14,7 +14,7 @@ interface IScenePreviewProps { soundActive: boolean; } -const ScenePreview: React.FC = ({ +export const ScenePreview: React.FC = ({ image, video, isPortrait, diff --git a/ui/v2.5/src/components/Scenes/styles.scss b/ui/v2.5/src/components/Scenes/styles.scss index 6368a68ab..8789dbe3c 100644 --- a/ui/v2.5/src/components/Scenes/styles.scss +++ b/ui/v2.5/src/components/Scenes/styles.scss @@ -196,6 +196,7 @@ textarea.scene-description { &-video { height: 100%; object-fit: cover; + object-position: top; width: 100%; } diff --git a/ui/v2.5/src/components/Tagger/StashSearchResult.tsx b/ui/v2.5/src/components/Tagger/StashSearchResult.tsx index 7b1cb3185..cb08f2e47 100755 --- a/ui/v2.5/src/components/Tagger/StashSearchResult.tsx +++ b/ui/v2.5/src/components/Tagger/StashSearchResult.tsx @@ -313,7 +313,7 @@ const StashSearchResult: React.FC = ({ setSaveState(""); }; - const classname = cx("row no-gutters mt-2 search-result", { + const classname = cx("row mx-0 mt-2 search-result", { "selected-result": isActive, }); @@ -336,6 +336,11 @@ const StashSearchResult: React.FC = ({ Object.keys(performers ?? []).every((id) => performers?.[id].type) && saveState === ""; + const endpointBase = endpoint.match(/https?:\/\/.*?\//)?.[0]; + const stashBoxURL = endpointBase + ? `${endpointBase}scenes/${scene.stash_id}` + : ""; + return ( // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
  • = ({ >
    - + + +

    {sceneTitle} diff --git a/ui/v2.5/src/components/Tagger/Tagger.tsx b/ui/v2.5/src/components/Tagger/Tagger.tsx index 01246e26d..41c138bad 100755 --- a/ui/v2.5/src/components/Tagger/Tagger.tsx +++ b/ui/v2.5/src/components/Tagger/Tagger.tsx @@ -2,6 +2,7 @@ import React, { useState } from "react"; import { Button, Card, Form, InputGroup } from "react-bootstrap"; import { Link } from "react-router-dom"; import { HashLink } from "react-router-hash-link"; +import { ScenePreview } from "src/components/Scenes/SceneCard"; import * as GQL from "src/core/generated-graphql"; import { LoadingIndicator } from "src/components/Shared"; @@ -233,14 +234,19 @@ const TaggerList: React.FC = ({ null; const isTagged = taggedScenes[scene.id]; const hasStashIDs = scene.stash_ids.length > 0; + const width = scene.file.width ? scene.file.width : 0; + const height = scene.file.height ? scene.file.height : 0; + const isPortrait = height > width; - let maincontent; + let mainContent; if (!isTagged && hasStashIDs) { - maincontent = ( -
    Scene already tagged
    + mainContent = ( +
    +
    Scene already tagged
    +
    ); } else if (!isTagged && !hasStashIDs) { - maincontent = ( + mainContent = ( = ({ ); } else if (isTagged) { - maincontent = ( -
    - Scene successfully tagged: - - {taggedScenes[scene.id].title} - -
    + mainContent = ( +
    +
    Scene successfully tagged:
    +
    + + {taggedScenes[scene.id].title} + +
    +
    ); } - let searchResult; - if (searchErrors[scene.id]) { - searchResult = ( + let subContent; + if (scene.stash_ids.length > 0) { + const stashLinks = scene.stash_ids.map((stashID) => { + const base = stashID.endpoint.match(/https?:\/\/.*?\//)?.[0]; + const link = base ? ( + + {stashID.stash_id} + + ) : ( +
    {stashID.stash_id}
    + ); + + return link; + }); + subContent = <>{stashLinks}; + } else if (searchErrors[scene.id]) { + subContent = (
    {searchErrors[scene.id]}
    ); - } else if (fingerprintMatch && !isTagged && !hasStashIDs) { + } else if (searchResults[scene.id]?.length === 0) { + subContent = ( +
    No results found.
    + ); + } + + let searchResult; + if (fingerprintMatch && !isTagged && !hasStashIDs) { searchResult = ( = ({ !fingerprintMatch ) { searchResult = ( -
      +
        {sortScenesByDuration( searchResults[scene.id], scene.file.duration ?? undefined @@ -347,19 +378,25 @@ const TaggerList: React.FC = ({ )}
      ); - } else if (searchResults[scene.id]?.length === 0) { - searchResult = ( -
      No results found.
      - ); } return (
      -
      +
      +
      + + + +
      {originalDir} @@ -367,7 +404,10 @@ const TaggerList: React.FC = ({ {`${file}.${ext}`}
      -
      {maincontent}
      +
      + {mainContent} +
      {subContent}
      +
      {searchResult}
      @@ -376,9 +416,9 @@ const TaggerList: React.FC = ({ return ( -
      -
      - Path +
      +
      + Scene
      Query @@ -400,18 +440,14 @@ const TaggerList: React.FC = ({ )}
      -
      - -
      +
      {renderScenes()} @@ -467,7 +503,7 @@ export const Tagger: React.FC = ({ scenes }) => { onClose={() => setShowManual(false)} defaultActiveTab="Tagger.md" /> -
      +
      {selectedEndpointIndex !== -1 && selectedEndpoint ? ( <>
      diff --git a/ui/v2.5/src/components/Tagger/styles.scss b/ui/v2.5/src/components/Tagger/styles.scss index 13f321cb9..3564303e4 100644 --- a/ui/v2.5/src/components/Tagger/styles.scss +++ b/ui/v2.5/src/components/Tagger/styles.scss @@ -1,6 +1,21 @@ .tagger-container { - max-width: 1400px; - // min-width: 1200px; + max-width: 1600px; + + .scene-card-preview { + border-radius: 3px; + margin-bottom: 0; + max-height: 100px; + overflow: hidden; + width: 150px; + + &-video { + background-color: #495b68; + } + } + + .sub-content { + min-height: 1.5rem; + } } .tagger-table { @@ -9,14 +24,13 @@ .search-item { background-color: #495b68; - margin-left: -20px; - margin-right: -20px; + border-radius: 3px; padding: 1rem; } .search-result { background-color: rgba(61, 80, 92, 0.3); - padding: 0.5rem 1rem; + padding: 1rem 0; &:hover { background-color: hsl(204, 20, 30); @@ -43,6 +57,7 @@ max-height: 10rem; max-width: 14rem; min-width: 168px; + object-fit: contain; padding: 0 1rem; }