Scene queuing (#1214)

* Add missing localisation strings
* Ignore container error in scene streams
* Implement missing FindScenes by ID

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

@@ -12,13 +12,14 @@ import { ListFilterModel } from "src/models/list-filter/filter";
 import { DisplayMode } from "src/models/list-filter/types";
 import { showWhenSelected, PersistanceLevel } from "src/hooks/ListHook";
 import Tagger from "src/components/Tagger";
+import { SceneQueue } from "src/models/sceneQueue";
 import { WallPanel } from "../Wall/WallPanel";
-import { SceneCard } from "./SceneCard";
 import { SceneListTable } from "./SceneListTable";
 import { EditScenesDialog } from "./EditScenesDialog";
 import { DeleteScenesDialog } from "./DeleteScenesDialog";
 import { SceneGenerateDialog } from "./SceneGenerateDialog";
 import { ExportDialog } from "../Shared/ExportDialog";
+import { SceneCardsGrid } from "./SceneCardsGrid";
 
 interface ISceneList {
   filterHook?: (filter: ListFilterModel) => ListFilterModel;
@@ -35,6 +36,11 @@ export const SceneList: React.FC<ISceneList> = ({
   const [isExportAll, setIsExportAll] = useState(false);
 
   const otherOperations = [
+    {
+      text: "Play selected",
+      onClick: playSelected,
+      isDisplayed: showWhenSelected,
+    },
     {
       text: "Play Random",
       onClick: playRandom,
@@ -85,6 +91,17 @@ export const SceneList: React.FC<ISceneList> = ({
     persistState,
   });
 
+  async function playSelected(
+    result: FindScenesQueryResult,
+    filter: ListFilterModel,
+    selectedIds: Set<string>
+  ) {
+    // populate queue and go to first scene
+    const sceneIDs = Array.from(selectedIds.values());
+    const queue = SceneQueue.fromSceneIDList(sceneIDs);
+    queue.playScene(history, sceneIDs[0], { autoPlay: true });
+  }
+
   async function playRandom(
     result: FindScenesQueryResult,
     filter: ListFilterModel
@@ -93,20 +110,18 @@ export const SceneList: React.FC<ISceneList> = ({
     if (result.data && result.data.findScenes) {
       const { count } = result.data.findScenes;
 
-      const index = Math.floor(Math.random() * count);
+      const pages = Math.ceil(count / filter.itemsPerPage);
+      const page = Math.floor(Math.random() * pages) + 1;
+      const index = Math.floor(Math.random() * filter.itemsPerPage);
       const filterCopy = _.cloneDeep(filter);
-      filterCopy.itemsPerPage = 1;
-      filterCopy.currentPage = index + 1;
-      const singleResult = await queryFindScenes(filterCopy);
-      if (
-        singleResult &&
-        singleResult.data &&
-        singleResult.data.findScenes &&
-        singleResult.data.findScenes.scenes.length === 1
-      ) {
-        const { id } = singleResult!.data!.findScenes!.scenes[0];
-        // navigate to the scene player page
-        history.push(`/scenes/${id}?autoplay=true`);
+      filterCopy.currentPage = page;
+      filterCopy.sortBy = "random";
+      const queryResults = await queryFindScenes(filterCopy);
+      if (queryResults.data.findScenes.scenes.length > index) {
+        const { id } = queryResults!.data!.findScenes!.scenes[index];
+        // navigate to the image player page
+        const queue = SceneQueue.fromListFilterModel(filterCopy, index);
+        queue.playScene(history, id, { autoPlay: true });
       }
     }
   }
@@ -125,6 +140,15 @@ export const SceneList: React.FC<ISceneList> = ({
     setIsExportDialogOpen(true);
   }
 
+  async function sceneClicked(
+    sceneId: string,
+    sceneIndex: number,
+    filter: ListFilterModel
+  ) {
+    const queue = SceneQueue.fromListFilterModel(filter, sceneIndex);
+    queue.playScene(history, sceneId);
+  }
+
   function maybeRenderSceneGenerateDialog(selectedIds: Set<string>) {
     if (isGenerateDialogOpen) {
       return (
@@ -171,25 +195,6 @@ export const SceneList: React.FC<ISceneList> = ({
     );
   }
 
-  function renderSceneCard(
-    scene: SlimSceneDataFragment,
-    selectedIds: Set<string>,
-    zoomIndex: number
-  ) {
-    return (
-      <SceneCard
-        key={scene.id}
-        scene={scene}
-        zoomIndex={zoomIndex}
-        selecting={selectedIds.size > 0}
-        selected={selectedIds.has(scene.id)}
-        onSelectedChanged={(selected: boolean, shiftKey: boolean) =>
-          listData.onSelectChange(scene.id, selected, shiftKey)
-        }
-      />
-    );
-  }
-
   function renderScenes(
     result: FindScenesQueryResult,
     filter: ListFilterModel,
@@ -201,11 +206,15 @@ export const SceneList: React.FC<ISceneList> = ({
     }
     if (filter.displayMode === DisplayMode.Grid) {
       return (
-        <div className="row justify-content-center">
-          {result.data.findScenes.scenes.map((scene) =>
-            renderSceneCard(scene, selectedIds, zoomIndex)
-          )}
-        </div>
+        <SceneCardsGrid
+          scenes={result.data.findScenes.scenes}
+          zoomIndex={zoomIndex}
+          selectedIds={selectedIds}
+          onSelectChange={(id, selected, shiftKey) =>
+            listData.onSelectChange(id, selected, shiftKey)
+          }
+          onSceneClick={(id, index) => sceneClicked(id, index, filter)}
+        />
       );
     }
     if (filter.displayMode === DisplayMode.List) {