Generate content for specific scenes (#672)

* Add UI dialog for scene(s)
* Move preview preset to config

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

@@ -23,6 +23,7 @@ import { SceneDetailPanel } from "./SceneDetailPanel";
 import { OCounterButton } from "./OCounterButton";
 import { SceneMoviePanel } from "./SceneMoviePanel";
 import { DeleteScenesDialog } from "../DeleteScenesDialog";
+import { SceneGenerateDialog } from "../SceneGenerateDialog";
 
 export const Scene: React.FC = () => {
   const { id = "new" } = useParams();
@@ -42,6 +43,7 @@ export const Scene: React.FC = () => {
   const [activeTabKey, setActiveTabKey] = useState("scene-details-panel");
 
   const [isDeleteAlertOpen, setIsDeleteAlertOpen] = useState<boolean>(false);
+  const [isGenerateDialogOpen, setIsGenerateDialogOpen] = useState(false);
 
   const queryParams = queryString.parse(location.search);
   const autoplay = queryParams?.autoplay === "true";
@@ -134,6 +136,19 @@ export const Scene: React.FC = () => {
     }
   }
 
+  function maybeRenderSceneGenerateDialog() {
+    if (isGenerateDialogOpen && scene) {
+      return (
+        <SceneGenerateDialog
+          selectedIds={[scene.id]}
+          onClose={() => {
+            setIsGenerateDialogOpen(false);
+          }}
+        />
+      );
+    }
+  }
+
   function renderOperations() {
     return (
       <Dropdown>
@@ -146,6 +161,13 @@ export const Scene: React.FC = () => {
           <Icon icon="ellipsis-v" />
         </Dropdown.Toggle>
         <Dropdown.Menu className="bg-secondary text-white">
+          <Dropdown.Item
+            key="generate"
+            className="bg-secondary text-white"
+            onClick={() => setIsGenerateDialogOpen(true)}
+          >
+            Generate...
+          </Dropdown.Item>
           <Dropdown.Item
             key="generate-screenshot"
             className="bg-secondary text-white"
@@ -291,6 +313,7 @@ export const Scene: React.FC = () => {
 
   return (
     <div className="row">
+      {maybeRenderSceneGenerateDialog()}
       {maybeRenderDeleteDialog()}
       <div className="scene-tabs order-xl-first order-last">
         <div className="d-none d-xl-block">