Various UI tweaks

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<IProps> = (props: IProps) => {
+  return (
+    <Tag
+      className="tag-item"
+      interactive={true}
+    >
+      <Link to={NavigationUtils.makeTagScenesUrl(props.tag)}>{props.tag.name}</Link>
+    </Tag>
+  );
+};

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<ISceneDetailProps> = (props: IS
   function renderTags() {
     if (props.scene.tags.length === 0) { return; }
     const tags = props.scene.tags.map((tag) => (
-      <Tag key={tag.id} className="tag-item">{tag.name}</Tag>
+      <TagLink key={tag.id} tag={tag} />
     ));
     return (
       <>
@@ -43,7 +46,9 @@ export const SceneDetailPanel: FunctionComponent<ISceneDetailProps> = (props: IS
       <H1 className="bp3-heading">
         {!!props.scene.title ? props.scene.title : TextUtils.fileNameFromPath(props.scene.path)}
       </H1>
-      {!!props.scene.date ? <H4>{props.scene.date}</H4> : ""}
+      {!!props.scene.date ? <H4>{props.scene.date}</H4> : undefined}
+      {!!props.scene.rating ? <H6>Rating: {props.scene.rating}</H6> : undefined}
+      {!!props.scene.file.height ? <H6>Resolution: {TextUtils.resolution(props.scene.file.height)}</H6> : undefined}
       {renderDetails()}
       {renderTags()}
     </>

ui/v2/src/components/scenes/SceneDetails/SceneMarkersPanel.tsx

@@ -253,6 +253,7 @@ export const SceneMarkersPanel: FunctionComponent<ISceneMarkersPanelProps> = (pr
       whiteSpace: "nowrap",
       display: "flex",
       flexWrap: "nowrap",
+      marginBottom: "20px",
     };
     return (
       <>

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;
 }
 

ui/v2/src/components/select/FilterMultiSelect.tsx

@@ -100,7 +100,6 @@ export const FilterMultiSelect: React.FunctionComponent<IProps> = (props: IProps
       tagInputProps={{ onRemove: onItemRemove }}
       onItemSelect={onItemSelect}
       resetOnSelect={true}
-      activeItem={null}
       popoverProps={{position: "bottom"}}
       {...props}
     />

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;

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",