diff --git a/ui/v2/src/components/Shared/TagLink.tsx b/ui/v2/src/components/Shared/TagLink.tsx new file mode 100644 index 000000000..e333c6771 --- /dev/null +++ b/ui/v2/src/components/Shared/TagLink.tsx @@ -0,0 +1,24 @@ +import { + ITagProps, + Tag, +} from "@blueprintjs/core"; +import _ from "lodash"; +import React, { FunctionComponent } from "react"; +import { Link } from "react-router-dom"; +import { TagDataFragment } from "../../core/generated-graphql"; +import { NavigationUtils } from "../../utils/navigation"; + +interface IProps extends ITagProps { + tag: TagDataFragment; +} + +export const TagLink: FunctionComponent = (props: IProps) => { + return ( + + {props.tag.name} + + ); +}; diff --git a/ui/v2/src/components/scenes/SceneDetails/SceneDetailPanel.tsx b/ui/v2/src/components/scenes/SceneDetails/SceneDetailPanel.tsx index 64c013b7f..8ec9c29e9 100644 --- a/ui/v2/src/components/scenes/SceneDetails/SceneDetailPanel.tsx +++ b/ui/v2/src/components/scenes/SceneDetails/SceneDetailPanel.tsx @@ -8,6 +8,9 @@ import React, { FunctionComponent } from "react"; import * as GQL from "../../../core/generated-graphql"; import { TextUtils } from "../../../utils/text"; import { SceneHelpers } from "../helpers"; +import { Link } from "react-router-dom"; +import { NavigationUtils } from "../../../utils/navigation"; +import { TagLink } from "../../Shared/TagLink"; interface ISceneDetailProps { scene: GQL.SceneDataFragment; @@ -27,7 +30,7 @@ export const SceneDetailPanel: FunctionComponent = (props: IS function renderTags() { if (props.scene.tags.length === 0) { return; } const tags = props.scene.tags.map((tag) => ( - {tag.name} + )); return ( <> @@ -43,7 +46,9 @@ export const SceneDetailPanel: FunctionComponent = (props: IS

{!!props.scene.title ? props.scene.title : TextUtils.fileNameFromPath(props.scene.path)}

- {!!props.scene.date ?

{props.scene.date}

: ""} + {!!props.scene.date ?

{props.scene.date}

: undefined} + {!!props.scene.rating ?
Rating: {props.scene.rating}
: undefined} + {!!props.scene.file.height ?
Resolution: {TextUtils.resolution(props.scene.file.height)}
: undefined} {renderDetails()} {renderTags()} diff --git a/ui/v2/src/components/scenes/SceneDetails/SceneMarkersPanel.tsx b/ui/v2/src/components/scenes/SceneDetails/SceneMarkersPanel.tsx index 8a6dab0d7..8c961b5c7 100644 --- a/ui/v2/src/components/scenes/SceneDetails/SceneMarkersPanel.tsx +++ b/ui/v2/src/components/scenes/SceneDetails/SceneMarkersPanel.tsx @@ -253,6 +253,7 @@ export const SceneMarkersPanel: FunctionComponent = (pr whiteSpace: "nowrap", display: "flex", flexWrap: "nowrap", + marginBottom: "20px", }; return ( <> diff --git a/ui/v2/src/components/scenes/ScenePlayer/ScenePlayerScrubber.scss b/ui/v2/src/components/scenes/ScenePlayer/ScenePlayerScrubber.scss index aefc6f310..1ddcafb7f 100644 --- a/ui/v2/src/components/scenes/ScenePlayer/ScenePlayerScrubber.scss +++ b/ui/v2/src/components/scenes/ScenePlayer/ScenePlayerScrubber.scss @@ -63,7 +63,7 @@ width: 2px; height: 30px; left: 50%; - z-index: 100; + z-index: 1; position: absolute; } diff --git a/ui/v2/src/components/select/FilterMultiSelect.tsx b/ui/v2/src/components/select/FilterMultiSelect.tsx index fbcb5348e..42b23d12d 100644 --- a/ui/v2/src/components/select/FilterMultiSelect.tsx +++ b/ui/v2/src/components/select/FilterMultiSelect.tsx @@ -100,7 +100,6 @@ export const FilterMultiSelect: React.FunctionComponent = (props: IProps tagInputProps={{ onRemove: onItemRemove }} onItemSelect={onItemSelect} resetOnSelect={true} - activeItem={null} popoverProps={{position: "bottom"}} {...props} /> diff --git a/ui/v2/src/index.scss b/ui/v2/src/index.scss index 4eaa38218..969fde890 100755 --- a/ui/v2/src/index.scss +++ b/ui/v2/src/index.scss @@ -49,6 +49,7 @@ code { .grid-item { // flex: auto; width: calc(25% - 1.5em); + min-width: 185px; margin: 0px 0 $pt-grid-size $pt-grid-size; overflow: hidden; @@ -81,6 +82,15 @@ video.preview { .tag-item { margin: 5px; + + a { + color: unset; + + &:hover { + text-decoration: none; + color: unset; + } + } } .filter-container { @@ -140,6 +150,7 @@ span.block { .performer.image { height: 50vh; + min-height: 400px; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; diff --git a/ui/v2/src/utils/text.ts b/ui/v2/src/utils/text.ts index 17ca156cc..833782cc1 100644 --- a/ui/v2/src/utils/text.ts +++ b/ui/v2/src/utils/text.ts @@ -46,6 +46,22 @@ export class TextUtils { return `${megabits.toFixed(2)} megabits per second`; } + public static resolution(height: number) { + if (height >= 240 && height < 480) { + return "240p"; + } else if (height >= 480 && height < 720) { + return "480p"; + } else if (height >= 720 && height < 1080) { + return "720p"; + } else if (height >= 1080 && height < 2160) { + return "1080p"; + } else if (height >= 2160) { + return "4K"; + } else { + return undefined; + } + } + private static units = [ "bytes", "kB",