Styles

ui/v2.5/src/components/ErrorBoundary.tsx

@@ -19,7 +19,7 @@ export class ErrorBoundary extends React.Component<any, any> {
       return (
         <div>
           <h2>Something went wrong.</h2>
-          <details style={{ whiteSpace: "pre-wrap" }}>
+          <details className="error-message">
             {this.state.error && this.state.error.toString()}
             <br />
             {this.state.errorInfo.componentStack}

ui/v2.5/src/components/Galleries/Gallery.tsx

@@ -14,7 +14,7 @@ export const Gallery: React.FC = () => {
   if (error) return <div>{error.message}</div>;
 
   return (
-    <div style={{ width: "75vw", margin: "0 auto" }}>
+    <div className="col-9 m-auto">
       <GalleryViewer gallery={gallery as any} />
     </div>
   );

ui/v2.5/src/components/Galleries/GalleryList.tsx

@@ -23,7 +23,7 @@ export const GalleryList: React.FC = () => {
     }
     if (filter.displayMode === DisplayMode.List) {
       return (
-        <Table style={{ margin: "0 auto" }}>
+        <Table className="m-auto">
           <thead>
             <tr>
               <th>Preview</th>

ui/v2.5/src/components/SceneFilenameParser/ParserInput.tsx

@@ -156,11 +156,12 @@ export const ParserInput: React.FC<IParserInputProps> = (
 
       <Form.Group className="row" controlId="ignored-words">
         <Form.Label className="col-2">Ignored words</Form.Label>
+        <InputGroup className="col-8">
           <Form.Control
-          className="col-8"
             onChange={(newValue: any) => setIgnoreWords(newValue.target.value)}
             value={ignoreWords}
           />
+        </InputGroup>
         <Form.Text className="text-muted col-10 offset-2">
           Matches with {"{i}"}
         </Form.Text>
@@ -171,27 +172,29 @@ export const ParserInput: React.FC<IParserInputProps> = (
         <Form.Label htmlFor="whitespace-characters" className="col-2">
           Whitespace characters:
         </Form.Label>
+        <InputGroup className="col-8">
           <Form.Control
-          className="col-8"
             onChange={(newValue: any) =>
               setWhitespaceCharacters(newValue.target.value)
             }
             value={whitespaceCharacters}
           />
+        </InputGroup>
         <Form.Text className="text-muted col-10 offset-2">
           These characters will be replaced with whitespace in the title
         </Form.Text>
       </Form.Group>
-      <Form.Group className="row">
+      <Form.Group>
-        <Form.Label htmlFor="capitalize-title" className="col-2">
+        <Form.Check
-          Capitalize title
+          inline
-        </Form.Label>
+          className="m-0"
-        <Form.Control
+          id="capitalize-title"
-          className="col-8"
-          type="checkbox"
           checked={capitalizeTitle}
           onChange={() => setCapitalizeTitle(!capitalizeTitle)}
         />
+        <Form.Label htmlFor="capitalize-title">
+          Capitalize title
+        </Form.Label>
       </Form.Group>
 
       {/* TODO - mapping stuff will go here */}
@@ -222,12 +225,11 @@ export const ParserInput: React.FC<IParserInputProps> = (
       </Form.Group>
 
       <Form.Group className="row">
-        <Button variant="secondary" className="col-1" onClick={onFind}>
+        <Button variant="secondary" className="ml-3 col-1" onClick={onFind}>
           Find
         </Button>
         <Form.Control
           as="select"
-          style={{ flexBasis: "min-content" }}
           options={PAGE_SIZE_OPTIONS}
           onChange={(event: any) =>
             props.onPageSizeChanged(parseInt(event.target.value, 10))
@@ -236,7 +238,7 @@ export const ParserInput: React.FC<IParserInputProps> = (
           className="col-1 filter-item"
         >
           {PAGE_SIZE_OPTIONS.map(val => (
-            <option value="val">{val}</option>
+            <option key={val} value={val}>{val}</option>
           ))}
         </Form.Control>
       </Form.Group>

ui/v2.5/src/components/SceneFilenameParser/SceneFilenameParser.tsx

@@ -414,8 +414,7 @@ export const SceneFilenameParser: React.FC = () => {
     return (
       <>
         <td>
-          <Form.Control
+          <Form.Check
-            type="checkbox"
             checked={props.parserResult.set}
             onChange={() => {
               props.onSetChanged(!props.parserResult.set);
@@ -458,7 +457,7 @@ export const SceneFilenameParser: React.FC = () => {
         disabled={!props.parserResult.set}
         className={props.className}
         value={props.parserResult.value || ""}
-        onBlur={(event: any) => props.onChange(event.target.value)}
+        onChange={(event: any) => props.onChange(event.target.value)}
       />
     );
   }
@@ -494,7 +493,7 @@ export const SceneFilenameParser: React.FC = () => {
     return (
       <div>
         {elements.map((name: string) => (
-          <Badge variant="secondary">{name}</Badge>
+          <Badge key={name} variant="secondary">{name}</Badge>
         ))}
       </div>
     );
@@ -592,7 +591,7 @@ export const SceneFilenameParser: React.FC = () => {
 
     return (
       <tr className="scene-parser-row">
-        <td style={{ textAlign: "left" }}>{props.scene.filename}</td>
+        <td className="text-left">{props.scene.filename}</td>
         <SceneParserField
           key="title"
           fieldName="Title"
@@ -689,9 +688,8 @@ export const SceneFilenameParser: React.FC = () => {
 
     return (
       <>
-        <td>
+        <td className="w-15">
-          <Form.Control
+          <Form.Check
-            type="checkbox"
             checked={allSet}
             onChange={() => {
               onAllSet(!allSet);
@@ -715,7 +713,7 @@ export const SceneFilenameParser: React.FC = () => {
             <Table>
               <thead>
                 <tr className="scene-parser-row">
-                  <th>Filename</th>
+                  <th className="w-25">Filename</th>
                   {renderHeader("Title", allTitleSet, onSelectAllTitleSet)}
                   {renderHeader("Date", allDateSet, onSelectAllDateSet)}
                   {renderHeader(

ui/v2.5/src/components/Settings/SettingsInterfacePanel.tsx

@@ -7,13 +7,13 @@ import { useToast } from "src/hooks";
 export const SettingsInterfacePanel: React.FC = () => {
   const Toast = useToast();
   const config = StashService.useConfiguration();
-  const [soundOnPreview, setSoundOnPreview] = useState<boolean>();
+  const [soundOnPreview, setSoundOnPreview] = useState<boolean>(true);
-  const [wallShowTitle, setWallShowTitle] = useState<boolean>();
+  const [wallShowTitle, setWallShowTitle] = useState<boolean>(true);
   const [maximumLoopDuration, setMaximumLoopDuration] = useState<number>(0);
-  const [autostartVideo, setAutostartVideo] = useState<boolean>();
+  const [autostartVideo, setAutostartVideo] = useState<boolean>(false);
-  const [showStudioAsText, setShowStudioAsText] = useState<boolean>();
+  const [showStudioAsText, setShowStudioAsText] = useState<boolean>(false);
   const [css, setCSS] = useState<string>();
-  const [cssEnabled, setCSSEnabled] = useState<boolean>();
+  const [cssEnabled, setCSSEnabled] = useState<boolean>(false);
 
   const [updateInterfaceConfig] = StashService.useConfigureInterface({
     soundOnPreview,

ui/v2.5/src/components/Shared/Select.tsx

@@ -340,6 +340,10 @@ const SelectComponent: React.FC<ISelectProps & ITypeProps> = ({
     container: (base: CSSProperties, state: any) => ({
       ...base,
       zIndex: state.isFocused ? 10 : base.zIndex
+    }),
+    multiValueRemove: (base: CSSProperties, state: any) => ({
+      ...base,
+      color: state.isFocused ? base.color: '#333333'
     })
   };
 

ui/v2.5/src/components/Shared/TagLink.tsx

@@ -12,6 +12,7 @@ interface IProps {
   tag?: Partial<TagDataFragment>;
   performer?: Partial<PerformerDataFragment>;
   marker?: Partial<SceneMarkerDataFragment>;
+  className?: string;
 }
 
 export const TagLink: React.FC<IProps> = (props: IProps) => {
@@ -30,7 +31,7 @@ export const TagLink: React.FC<IProps> = (props: IProps) => {
     )}`;
   }
   return (
-    <Badge className="tag-item" variant="secondary">
+    <Badge className={`tag-item ${props.className}`} variant="secondary">
       <Link to={link}>{title}</Link>
     </Badge>
   );

ui/v2.5/src/components/Studios/StudioCard.tsx

@@ -10,8 +10,8 @@ interface IProps {
 export const StudioCard: React.FC<IProps> = ({ studio }) => {
   return (
     <Card className="studio-card">
-      <Link to={`/studios/${studio.id}`} className="studio-image">
+      <Link to={`/studios/${studio.id}`} className="studio-card-header">
-        <img alt={studio.name} src={studio.image_path ?? ""} />
+        <img className="studio-card-image" alt={studio.name} src={studio.image_path ?? ""} />
       </Link>
       <div className="card-section">
         <h5 className="text-truncate">{studio.name}</h5>

ui/v2.5/src/components/Studios/StudioDetails/Studio.tsx

@@ -160,7 +160,7 @@ export const Studio: React.FC = () => {
       >
         {isNew && <h2>Add Studio</h2>}
         <img className="logo" alt={name} src={imagePreview} />
-        <Table id="performer-details" style={{ width: "100%" }}>
+        <Table>
           <tbody>
             {TableUtils.renderInputGroup({
               title: "Name",

ui/v2.5/src/components/Studios/StudioList.tsx

@@ -18,7 +18,7 @@ export const StudioList: React.FC = () => {
 
     if (filter.displayMode === DisplayMode.Grid) {
       return (
-        <div className="grid">
+        <div className="row px-xl-5 justify-content-center">
           {result.data.findStudios.studios.map(studio => (
             <StudioCard key={studio.id} studio={studio} />
           ))}

ui/v2.5/src/components/Tags/TagList.tsx

@@ -98,11 +98,11 @@ export const TagList: React.FC = () => {
 
   const tagElements = data.allTags.map(tag => {
     return (
-      <div key={tag.id} className="tag-list-row">
+      <div key={tag.id} className="tag-list-row row">
         <Button variant="link" onClick={() => setEditingTag(tag)}>
           {tag.name}
         </Button>
-        <div style={{ float: "right" }}>
+        <div className="ml-auto">
           <Button variant="secondary" onClick={() => onAutoTag(tag)}>
             Auto Tag
           </Button>
@@ -131,7 +131,7 @@ export const TagList: React.FC = () => {
     <div id="tag-list-container">
       <Button
         variant="primary"
-        style={{ marginTop: "20px" }}
+        className="mt-2"
         onClick={() => setEditingTag({})}
       >
         New Tag

ui/v2.5/src/components/Wall/Wall.scss

@@ -62,6 +62,7 @@
   color: #444;
   font-weight: 700;
   left: 0;
+  line-height: 1;
   overflow: hidden;
   padding: 5px;
   position: absolute;

ui/v2.5/src/components/Wall/WallItem.tsx

@@ -142,7 +142,7 @@ export const WallItem: React.FC<IWallItemProps> = (props: IWallItemProps) => {
           />
           {showTextContainer ? (
             <div className="scene-wall-item-text-container">
-              <div style={{ lineHeight: 1 }}>{title}</div>
+              <div>{title}</div>
               {tags}
             </div>
           ) : (

ui/v2.5/src/components/list/ListFilter.tsx

@@ -257,7 +257,6 @@ export const ListFilter: React.FC<IListFilterProps> = (
             defaultValue={props.filter.searchTerm}
             onChange={onChangeQuery}
             className="filter-item col-5 col-sm-2"
-            style={{ width: "inherit" }}
           />
           <Form.Control
             as="select"
@@ -316,13 +315,7 @@ export const ListFilter: React.FC<IListFilterProps> = (
             {renderMore()}
           </ButtonGroup>
         </div>
-        <div
+        <div className="d-flex justify-content-center">
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            margin: "10px auto"
-          }}
-        >
           {renderFilterTags()}
         </div>
       </>

ui/v2.5/src/components/performers/PerformerCard.tsx

@@ -10,35 +10,36 @@ interface IPerformerCardProps {
 }
 
 export const PerformerCard: React.FC<IPerformerCardProps> = (
-  props: IPerformerCardProps
+  { performer, ageFromDate }
 ) => {
-  const age = TextUtils.age(props.performer.birthdate, props.ageFromDate);
+  const age = TextUtils.age(performer.birthdate, ageFromDate);
   const ageString = `${age} years old${
-    props.ageFromDate ? " in this scene." : "."
+    ageFromDate ? " in this scene." : "."
   }`;
 
   function maybeRenderFavoriteBanner() {
-    if (props.performer.favorite === false) {
+    if (performer.favorite === false) {
       return;
     }
     return <div className="rating-banner rating-5">FAVORITE</div>;
   }
 
   return (
-    <Card className="performer-card">
+    <Card>
       <Link
-        to={`/performers/${props.performer.id}`}
+        to={`/performers/${performer.id}`}
-        className="performer previewable image"
-        style={{ backgroundImage: `url(${props.performer.image_path})` }}
       >
+        <img
+          className="image-thumbnail card-image"
+          alt={performer.name ?? ''} src={performer.image_path ?? ''} />
         {maybeRenderFavoriteBanner()}
       </Link>
       <div className="card-section">
-        <h5 className="text-truncate">{props.performer.name}</h5>
+        <h5 className="text-truncate">{performer.name}</h5>
         {age !== 0 ? <div className="text-muted">{ageString}</div> : ""}
         <div className="text-muted">
-          Stars in {props.performer.scene_count}{" "}
+          Stars in {performer.scene_count}{" "}
-          <Link to={NavUtils.makePerformerScenesUrl(props.performer)}>
+          <Link to={NavUtils.makePerformerScenesUrl(performer)}>
             scenes
           </Link>
           .

ui/v2.5/src/components/performers/PerformerDetails/PerformerDetailsPanel.tsx

@@ -222,6 +222,7 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
             {queryableScrapers
               ? queryableScrapers.map(s => (
                   <Button
+                    key={s.name}
                     variant="link"
                     onClick={() => onDisplayFreeOnesDialog(s)}
                   >
@@ -294,7 +295,7 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
         </td>
         <td>
           <Form.Control
-            value={url}
+            value={url ?? ''}
             readOnly={!isEditing}
             plaintext={!isEditing}
             placeholder="URL"
@@ -310,7 +311,7 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
   function maybeRenderButtons() {
     if (isEditing) {
       return (
-        <>
+        <div className="row">
           <Button
             className="edit-button"
             variant="primary"
@@ -330,7 +331,11 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
             ""
           )}
           {renderScraperMenu()}
-        </>
+          <ImageInput
+            isEditing={!!isEditing}
+            onImageChange={onImageChangeHandler}
+          />
+        </div>
       );
     }
   }
@@ -377,7 +382,7 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
       {renderDeleteAlert()}
       {renderScraperDialog()}
 
-      <Table id="performer-details" style={{ width: "100%" }}>
+      <Table id="performer-details" className="w-100">
         <tbody>
           {maybeRenderName()}
           {maybeRenderAliases()}
@@ -449,10 +454,6 @@ export const PerformerDetailsPanel: React.FC<IPerformerDetails> = ({
             isEditing: !!isEditing,
             onChange: setInstagram
           })}
-          <ImageInput
-            isEditing={!!isEditing}
-            onImageChange={onImageChangeHandler}
-          />
         </tbody>
       </Table>
 

ui/v2.5/src/components/performers/PerformerListTable.tsx

@@ -14,48 +14,29 @@ interface IPerformerListTableProps {
 export const PerformerListTable: React.FC<IPerformerListTableProps> = (
   props: IPerformerListTableProps
 ) => {
-  function maybeRenderFavoriteHeart(performer: GQL.PerformerDataFragment) {
+  const renderPerformerRow = (performer: GQL.PerformerDataFragment) => (
-    if (!performer.favorite) {
+    <tr key={performer.id}>
-      return;
+      <td>
-    }
-    return (
-      <Button disabled className="favorite">
-        <Icon icon="heart" />
-      </Button>
-    );
-  }
-
-  function renderPerformerImage(performer: GQL.PerformerDataFragment) {
-    const style: React.CSSProperties = {
-      backgroundImage: `url('${performer.image_path}')`,
-      lineHeight: 5,
-      backgroundSize: "contain",
-      display: "inline-block",
-      backgroundPosition: "center",
-      backgroundRepeat: "no-repeat"
-    };
-
-    return (
         <Link
-        className="performer-list-thumbnail"
           to={`/performers/${performer.id}`}
-        style={style}
+        >
-      />
+          <img className="image-thumbnail" alt={performer.name ?? ""} src={performer.image_path ?? ''} />
-    );
+        </Link>
-  }
+      </td>
-
+      <td className="text-left">
-  function renderPerformerRow(performer: GQL.PerformerDataFragment) {
-    return (
-      <>
-        <tr>
-          <td>{renderPerformerImage(performer)}</td>
-          <td style={{ textAlign: "left" }}>
         <Link to={`/performers/${performer.id}`}>
           <h5 className="text-truncate">{performer.name}</h5>
         </Link>
       </td>
       <td>{performer.aliases ? performer.aliases : ""}</td>
-          <td>{maybeRenderFavoriteHeart(performer)}</td>
+      <td>{
+        performer.favorite && (
+          <Button disabled className="favorite">
+            <Icon icon="heart" />
+          </Button>
+        )
+      }
+      </td>
       <td>
         <Link to={NavUtils.makePerformerScenesUrl(performer)}>
           <h6>{performer.scene_count}</h6>
@@ -64,12 +45,9 @@ export const PerformerListTable: React.FC<IPerformerListTableProps> = (
       <td>{performer.birthdate}</td>
       <td>{performer.height}</td>
     </tr>
-      </>
   );
-  }
 
   return (
-    <>
     <div className="grid">
       <Table bordered striped>
         <thead>
@@ -86,6 +64,5 @@ export const PerformerListTable: React.FC<IPerformerListTableProps> = (
         <tbody>{props.performers.map(renderPerformerRow)}</tbody>
       </Table>
     </div>
-    </>
   );
 };

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

@@ -1,11 +1,3 @@
-.performer.image {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  height: 50vh;
-  min-height: 400px;
-}
-
 #performer-details {
   td {
     padding: 2px 0;

ui/v2.5/src/components/scenes/SceneCard.tsx

@@ -63,20 +63,13 @@ export const SceneCard: React.FC<ISceneCardProps> = (
   function maybeRenderSceneStudioOverlay() {
     if (!props.scene.studio) return;
 
-    let style: React.CSSProperties = {
-      backgroundImage: `url('${props.scene.studio.image_path}')`
-    };
-
-    let text = "";
-    if (showStudioAsText) {
-      style = {};
-      text = props.scene.studio.name;
-    }
-
     return (
       <div className="scene-studio-overlay">
-        <Link to={`/studios/${props.scene.studio.id}`} style={style}>
+        <Link to={`/studios/${props.scene.studio.id}`}>
-          {text}
+        { showStudioAsText
+            ? props.scene.studio.name
+            : <img className="image-thumbnail" alt={props.scene.studio.name} src={props.scene.studio.image_path ?? ''} />
+        }
         </Link>
       </div>
     );
@@ -103,13 +96,14 @@ export const SceneCard: React.FC<ISceneCardProps> = (
     if (props.scene.performers.length <= 0) return;
 
     const popoverContent = props.scene.performers.map(performer => (
-      <div className="performer-tag-container" key="performer">
+      <div className="performer-tag-container row" key="performer">
         <Link
           to={`/performers/${performer.id}`}
-          className="performer-tag previewable image"
+          className="performer-tag col m-auto zoom-2"
-          style={{ backgroundImage: `url(${performer.image_path})` }}
+        >
-        />
+          <img className="image-thumbnail" alt={performer.name ?? ''} src={performer.image_path ?? ''} />
-        <TagLink key={performer.id} performer={performer} />
+        </Link>
+        <TagLink key={performer.id} performer={performer} className="d-block" />
       </div>
     ));
 
@@ -182,7 +176,7 @@ export const SceneCard: React.FC<ISceneCardProps> = (
 
   return (
     <Card
-      className={`zoom-${props.zoomIndex} scene-card`}
+      className={`scene-card zoom-${props.zoomIndex}`}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
@@ -200,20 +194,18 @@ export const SceneCard: React.FC<ISceneCardProps> = (
       {maybeRenderSceneStudioOverlay()}
       <Link
         to={`/scenes/${props.scene.id}`}
-        className={cx("image", "previewable", { portrait: isPortrait() })}
+        className="scene-card-link"
       >
-        <div className="video-container">
         {maybeRenderRatingBanner()}
         {maybeRenderSceneSpecsOverlay()}
         <video
           loop
-            className={cx("preview", { portrait: isPortrait() })}
+          className={cx('scene-card-video', { portrait: isPortrait() })}
           poster={props.scene.paths.screenshot || ""}
           ref={videoHoverHook.videoEl}
         >
           {previewPath ? <source src={previewPath} /> : ""}
         </video>
-        </div>
       </Link>
       <div className="card-section">
         <h5 className="text-truncate">
@@ -222,13 +214,15 @@ export const SceneCard: React.FC<ISceneCardProps> = (
             : TextUtils.fileNameFromPath(props.scene.path)}
         </h5>
         <span>{props.scene.date}</span>
+        { props.scene.details && (
           <p>
             {TextUtils.truncate(
-            props.scene.details ?? "",
+              props.scene.details,
               100,
               "... (continued)"
             )}
           </p>
+        )}
       </div>
 
       {maybeRenderPopoverButtonGroup()}

ui/v2.5/src/components/scenes/SceneDetails/PrimaryTags.tsx

@@ -37,13 +37,13 @@ export const PrimaryTags: React.FC<IPrimaryTags> = ({
       return (
         <div key={marker.id}>
           <hr />
-          <div>
+          <div className="row">
             <Button variant="link" onClick={() => onClickMarker(marker)}>
               {marker.title}
             </Button>
             <Button
               variant="link"
-              style={{ float: "right" }}
+              className="ml-auto"
               onClick={() => onEdit(marker)}
             >
               Edit

ui/v2.5/src/components/scenes/SceneDetails/SceneMarkerForm.tsx

@@ -153,17 +153,17 @@ export const SceneMarkerForm: React.FC<ISceneMarkerForm> = ({
             </div>
           </Form.Group>
         </div>
-        <div className="buttons-container">
+        <div className="buttons-container row">
           <Button variant="primary" type="submit">
             Submit
           </Button>
-          <Button type="button" onClick={onClose}>
+          <Button variant="secondary" type="button" onClick={onClose} className="ml-2">
             Cancel
           </Button>
           {editingMarker && (
             <Button
               variant="danger"
-              style={{ float: "right", marginRight: "10px" }}
+              className="ml-auto"
               onClick={() => onDelete()}
             >
               Delete

ui/v2.5/src/components/scenes/SceneList.tsx

@@ -125,7 +125,7 @@ export const SceneList: React.FC<ISceneList> = ({
     }
     if (filter.displayMode === DisplayMode.Grid) {
       return (
-        <div className="grid">
+        <div className="row justify-content-center">
           {result.data.findScenes.scenes.map(scene =>
             renderSceneCard(scene, selectedIds, zoomIndex)
           )}

ui/v2.5/src/components/scenes/SceneListTable.tsx

@@ -11,63 +11,30 @@ interface ISceneListTableProps {
 export const SceneListTable: React.FC<ISceneListTableProps> = (
   props: ISceneListTableProps
 ) => {
-  function renderSceneImage(scene: GQL.SlimSceneDataFragment) {
+  const renderTags = (tags: GQL.Tag[]) => (
-    const style: React.CSSProperties = {
+    tags.map(tag => (
-      backgroundImage: `url('${scene.paths.screenshot}')`,
-      lineHeight: 5,
-      backgroundSize: "contain",
-      display: "inline-block",
-      backgroundPosition: "center",
-      backgroundRepeat: "no-repeat"
-    };
-
-    return (
-      <Link
-        className="scene-list-thumbnail"
-        to={`/scenes/${scene.id}`}
-        style={style}
-      />
-    );
-  }
-
-  function renderDuration(scene: GQL.SlimSceneDataFragment) {
-    if (scene.file.duration === undefined) {
-      return;
-    }
-    return TextUtils.secondsToTimestamp(scene.file.duration ?? 0);
-  }
-
-  function renderTags(tags: GQL.Tag[]) {
-    return tags.map(tag => (
       <Link key={tag.id} to={NavUtils.makeTagScenesUrl(tag)}>
         <h6>{tag.name}</h6>
       </Link>
-    ));
+    ))
-  }
-
-  function renderPerformers(performers: Partial<GQL.Performer>[]) {
-    return performers.map(performer => (
-      <Link key={performer.id} to={NavUtils.makePerformerScenesUrl(performer)}>
-        <h6>{performer.name}</h6>
-      </Link>
-    ));
-  }
-
-  function renderStudio(studio: Partial<GQL.Studio> | undefined) {
-    if (studio) {
-      return (
-        <Link to={NavUtils.makeStudioScenesUrl(studio)}>
-          <h6>{studio.name}</h6>
-        </Link>
   );
-    }
-  }
 
-  function renderSceneRow(scene: GQL.SlimSceneDataFragment) {
+  const renderPerformers = (performers: Partial<GQL.Performer>[]) => (
-    return (
+    performers.map(performer => (
+      <Link key={performer.id} to={NavUtils.makePerformerScenesUrl(performer)} />
+    ))
+  );
+
+  const renderSceneRow = (scene: GQL.SlimSceneDataFragment) => (
     <tr key={scene.id}>
-        <td>{renderSceneImage(scene)}</td>
+      <td>
-        <td style={{ textAlign: "left" }}>
+        <Link
+          to={`/scenes/${scene.id}`}
+        >
+          <img className="image-thumbnail" alt={scene.title ?? ''} src={scene.paths.screenshot ?? ''} />
+        </Link>
+      </td>
+      <td className="text-left">
         <Link to={`/scenes/${scene.id}`}>
           <h5 className="text-truncate">
             {scene.title ?? TextUtils.fileNameFromPath(scene.path)}
@@ -75,13 +42,17 @@ export const SceneListTable: React.FC<ISceneListTableProps> = (
         </Link>
       </td>
       <td>{scene.rating ? scene.rating : ""}</td>
-        <td>{renderDuration(scene)}</td>
+      <td>{scene.file.duration && TextUtils.secondsToTimestamp(scene.file.duration) }</td>
       <td>{renderTags(scene.tags)}</td>
       <td>{renderPerformers(scene.performers)}</td>
-        <td>{renderStudio(scene.studio ?? undefined)}</td>
+      <td>{ scene.studio && (
+        <Link to={NavUtils.makeStudioScenesUrl(scene.studio)}>
+          <h6>{scene.studio.name}</h6>
+        </Link>
+      )}
+      </td>
     </tr>
-    );
+  )
-  }
 
   return (
     <div className="grid">

ui/v2.5/src/components/scenes/ScenePlayer/ScenePlayer.tsx

@@ -194,7 +194,7 @@ export class ScenePlayerImpl extends React.Component<
     return (
       <ReactJWPlayer
         playerId={JWUtils.playerID}
-        playerScript="http://192.168.1.65:9999/jwplayer/jwplayer.js"
+        playerScript="http://localhost:9999/jwplayer/jwplayer.js"
         customProps={config}
         onReady={this.onReady}
         onSeeked={this.onSeeked}

ui/v2.5/src/components/scenes/SceneSelectedOptions.tsx

@@ -264,10 +264,11 @@ export const SceneSelectedOptions: React.FC<IListOperationProps> = (
           <Form.Label>Rating</Form.Label>
           <Form.Control
             as="select"
+            value={rating}
             onChange={(event: any) => setRating(event.target.value)}
           >
             {["", "1", "2", "3", "4", "5"].map(opt => (
-              <option selected={opt === rating} value={opt}>
+              <option key={opt} value={opt}>
                 {opt}
               </option>
             ))}

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

@@ -13,12 +13,33 @@
   }
 }
 
-.grid {
+.row {
   .scene-card {
-    padding-bottom: 0;
+    overflow: hidden;
+    padding: 0;
   }
 }
 
+.scene-card-link {
+  position: relative;
+}
+
+.card-section {
+  margin-bottom: 0;
+  padding: .5rem 1rem 0 1rem;
+}
+
+.card-select {
+  left: .5rem;
+  margin-top: -12px;
+  opacity: .5;
+  padding-left: 15px;
+  position: absolute;
+  top: .7rem;
+  width: 1.2rem;
+  z-index: 1;
+}
+
 .performer-tag-container {
   display: inline-block;
   margin: 5px;
@@ -105,3 +126,24 @@
     overflow-y: auto;
   }
 }
+
+.studio-card {
+  padding: .5rem;
+
+  &-header {
+    height: 150px;
+    line-height: 150px;
+    text-align: center;
+  }
+
+  &-image {
+    max-height: 150px;
+    object-fit: contain;
+    vertical-align: middle;
+    width: 320px;
+
+    @media (max-width: 576px) {
+      width: 100%;
+    }
+  }
+}

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

@@ -1,15 +0,0 @@
-.studio-card {
-  padding: .5rem;
-}
-
-.studio-image {
-  height: 150px;
-  line-height: 150px;
-  text-align: center;
-
-  img {
-    max-height: 100%;
-    max-width: 100%;
-    vertical-align: middle;
-  }
-}

ui/v2.5/src/index.scss

@@ -25,126 +25,71 @@ code {
   margin: $pt-grid-size $pt-grid-size 0 0;
   padding: 0;
 
-  .performer-card,
-  .studio-card {
-    min-width: 185px;
-    width: 320px;
-  }
-
   &.wall {
     margin: 0;
     padding: 0;
   }
 
-  & .performer-list-thumbnail {
-    height: 100px;
-    min-width: 50px;
-  }
-
-  & .scene-list-thumbnail {
-    min-height: 50px;
-    width: 150px;
-  }
-
   table td {
     text-align: center;
     vertical-align: middle;
   }
+}
 
-  .card {
+.card {
-    margin: 0 0 10px 10px;
+  margin: 5px;
-    overflow: hidden;
+}
 
-    @media (min-width: 576px) {
+@media (min-width: 576px) {
-      &.zoom-0 {
+  .zoom-0 {
     width: 15rem;
-
-        .previewable {
-          max-height: 11.25rem;
   }
 
-        .previewable.portrait {
+  .zoom-1 {
-          max-height: 11.25rem;
-        }
-      }
-
-      &.zoom-1 {
     width: 20rem;
-
-        .previewable {
-          max-height: 15rem;
   }
 
-        .previewable.portrait {
+  .zoom-2 {
+    width: 30rem;
+  }
+
+  .zoom-3 {
+    width: 40rem;
+  }
+}
+
+.scene-card-video {
+  height: auto;
+  width: 100%;
+
+  .zoom-0 {
+    height: 11.25rem;
+  }
+
+  .zoom-1 {
     height: 15rem;
   }
-      }
 
-      &.zoom-2 {
+  .zoom-2 {
-        width: 30rem;
-
-        .previewable {
-          max-height: 22.5rem;
-        }
-
-        .previewable.portrait {
     height: 22.5rem;
   }
-      }
 
-      &.zoom-3 {
+  .zoom-3 {
-        width: 40rem;
-
-        .previewable {
-          max-height: 30rem;
-        }
-
-        .previewable.portrait {
     height: 30rem;
   }
-      }
-    }
-
-    .card-select {
-      margin-top: -12px;
-      opacity: .5;
-      padding-left: 15px;
-      position: absolute;
-      width: 1.2rem;
-      z-index: 1;
-    }
-  }
 }
 
-.previewable {
+.image-thumbnail {
-  display: block;
+  height: 100px;
-  line-height: 0;
+  min-width: 50px;
-  margin: -20px 0 0 -20px;
-  max-height: 240px;
-  overflow: hidden;
-  position: relative;
-  width: calc(100% + 40px);
-}
-
-.previewable.portrait {
-  height: 240px;
-}
-
-.video-container {
-  height: 100%;
-  width: 100%;
-}
-
-video.preview {
-  display: block;
-  margin: 0 auto;
   object-fit: cover;
-  width: 100%;
+  object-position: center 20%;
 }
 
-video.preview.portrait {
+.card-image {
-  height: 100%;
+  height: 30rem;
-  width: auto;
+  min-width: 11.25rem;
+  width: 20rem;
 }
 
 .filter-item,
@@ -204,16 +149,6 @@ video.preview.portrait {
   margin: 10px auto;
 }
 
-.card-section {
-  padding: 10px 0 0 0;
-
-  &.centered {
-    display: flex;
-    flex-flow: wrap;
-    justify-content: center;
-  }
-}
-
 .rating-5 {
   background: #ff2f39;
 }
@@ -264,26 +199,27 @@ video.preview.portrait {
 .scene-studio-overlay {
   display: block;
   font-weight: 900;
-  height: 20%;
+  height: 10%;
+  max-width: 40%;
   opacity: .75;
   position: absolute;
   right: .7rem;
   top: .7rem;
-  width: 40%;
   z-index: 9;
 
+  .image-thumbnail {
+    height: auto;
+    max-height: 50px;
+    max-width: 100%;
+  }
+
   a {
-    background-position: right top;
-    background-repeat: no-repeat;
-    background-size: contain;
     color: $text-color;
     display: inline-block;
-    height: 100%;
     letter-spacing: -.03rem;
     text-align: right;
     text-decoration: none;
     text-shadow: 0 0 3px #000;
-    width: 100%;
   }
 }
 
@@ -468,6 +404,12 @@ video.preview.portrait {
 .form-control {
   &-plaintext {
     color: $text-color;
+    margin: 0;
+    padding: 0;
+
+    option {
+      color: black;
+    }
 
     &::placeholder {
       color: transparent;
@@ -496,6 +438,7 @@ video.preview.portrait {
 
 .image-input {
   margin-bottom: 0;
+  margin-left: .5rem;
   overflow: hidden;
   position: relative;
 
@@ -504,7 +447,6 @@ video.preview.portrait {
   }
 
   [type=file] {
-    cursor: inherit;
     display: block;
     filter: alpha(opacity=0);
     font-size: 999px;
@@ -515,6 +457,11 @@ video.preview.portrait {
     right: 0;
     text-align: right;
     top: 0;
+
+    &:hover {
+      cursor: pointer;
+    }
+
   }
 }
 
@@ -565,3 +512,7 @@ video.preview.portrait {
     }
   }
 }
+
+.error-message {
+  white-space: "pre-wrap";
+}

ui/v2.5/src/styles/_theme.scss

@@ -99,6 +99,16 @@ hr {
   }
 }
 
+.table {
+  td {
+    padding: .25rem .75rem;
+  }
+}
+
 .popover {
   max-width: inherit;
 }
+
+.card {
+  border: none;
+}