Improved scene queue (#4448)

* Improved scene queue
---------
Co-authored-by: WithoutPants <53250216+WithoutPants@users.noreply.github.com>

ui/v2.5/src/components/Scenes/SceneDetails/QueueViewer.tsx

@@ -94,10 +94,17 @@ export const QueueViewer: React.FC<IPlaylistViewer> = ({
                 src={scene.paths.screenshot ?? ""}
               />
             </div>
-            <div>
+            <div className="queue-scene-details">
-              <span className="align-middle text-break">
+              <span className="queue-scene-title">{objectTitle(scene)}</span>
-                {objectTitle(scene)}
+              <span className="queue-scene-studio">{scene?.studio?.name}</span>
+              <span className="queue-scene-performers">
+                {scene?.performers
+                  ?.map(function (performer) {
+                    return performer.name;
+                  })
+                  .join(", ")}
               </span>
+              <span className="queue-scene-date">{scene?.date}</span>
             </div>
           </div>
         </Link>

ui/v2.5/src/components/Scenes/SceneDetails/Scene.tsx

@@ -680,7 +680,7 @@ const SceneLoader: React.FC<RouteComponentProps<ISceneParams>> = ({
     const { scenes } = query.data.findScenes;
 
     // append scenes to scene list
-    const newScenes = queueScenes.concat(scenes as QueuedScene[]);
+    const newScenes = queueScenes.concat(scenes);
     setQueueScenes(newScenes);
     // don't change queue start
     return scenes;

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

@@ -540,6 +540,34 @@ input[type="range"].blue-slider {
   padding-right: 0.25rem;
 }
 
+@media (min-width: 1200px) {
+  #queue-viewer {
+    .queue-scene-details {
+      width: 245px;
+    }
+
+    .queue-scene-title,
+    .queue-scene-studio,
+    .queue-scene-performers,
+    .queue-scene-date {
+      margin-right: auto;
+      min-width: 245px;
+      overflow: hidden;
+      position: relative;
+      transform: translateX(0);
+      transition: 2s;
+      white-space: nowrap;
+    }
+
+    .queue-scene-title:hover,
+    .queue-scene-studio:hover,
+    .queue-scene-performers:hover,
+    .queue-scene-date:hover {
+      transform: translateX(calc(245px - 100%));
+    }
+  }
+}
+
 #queue-viewer {
   .queue-controls {
     align-items: center;
@@ -550,15 +578,50 @@ input[type="range"].blue-slider {
     justify-content: space-between;
     position: sticky;
     top: 0;
+    z-index: 100;
+  }
+
+  .queue-scene-details {
+    display: grid;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .queue-scene-title {
+    font-size: 1.2rem;
+
+    @media (max-width: 576px) {
+      font-size: 1rem;
+    }
+  }
+
+  .queue-scene-studio {
+    color: #d3d0d0;
+    font-weight: 600;
+  }
+
+  .queue-scene-performers,
+  .queue-scene-date {
+    color: #d3d0d0;
+    font-size: 0.9rem;
+    font-weight: 400;
+
+    @media (max-width: 576px) {
+      font-size: 0.8rem;
+    }
   }
 
   .thumbnail-container {
-    height: 50px;
+    height: 80px;
     margin-bottom: 5px;
     margin-right: 0.75rem;
     margin-top: 5px;
-    min-width: 100px;
+    min-width: 142px;
-    width: 100px;
+    width: 142px;
+  }
+
+  ol {
+    padding-left: 20px;
   }
 
   img {

ui/v2.5/src/models/sceneQueue.ts

@@ -1,8 +1,12 @@
 import { FilterMode, Scene } from "src/core/generated-graphql";
 import { ListFilterModel } from "./list-filter/filter";
 import { SceneListFilterOptions } from "./list-filter/scenes";
+import { INamedObject } from "src/utils/navigation";
 
-export type QueuedScene = Pick<Scene, "id" | "title" | "paths">;
+export type QueuedScene = Pick<Scene, "id" | "title" | "date" | "paths"> & {
+  performers?: INamedObject[] | null;
+  studio?: INamedObject | null;
+};
 
 export interface IPlaySceneOptions {
   sceneIndex?: number;