Job status dialog example

studio-frontend/src/app/app.element.ts

@@ -23,6 +23,8 @@ import { classMap } from "lit/directives/class-map.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { styleMap } from "lit/directives/style-map.js";
 
+import { CompositorJobStatus } from "./style-workspace.element";
+
 import "@storyteller/studio-ui/button";
 import "@storyteller/studio-ui/dialog";
 import "@storyteller/studio-ui/icon";
@@ -72,11 +74,14 @@ export class AppElement extends LitElement {
 
 	@state() sceneToken?: string;
 
+	@state() _compositorJobStatus?: CompositorJobStatus;
+
 	#addToSceneButtonRef = createRef<ButtonElement>();
 	#videoStylePreviewBtnRef = createRef<ButtonElement>();
 	#mediaLibraryRef = createRef<DialogElement>();
 	#inspectorRef = createRef<HTMLDivElement>();
 	#hierarchyRef = createRef<SceneHierarchyElement>();
+	#jobStatusDialogRef = createRef<DialogElement>();
 
 	#params = new StudioURLParams();
 
@@ -88,7 +93,7 @@ export class AppElement extends LitElement {
 	async onSceneSaved({ detail: scene }: SceneSavedEvent): Promise<void> {
 		try {
 			const file = new File([scene], "scene.scn.ron", { type: "text/ron" });
-			
+
 			const token = await this.api.createScene(file);
 
 			this.sceneToken = token;
@@ -98,7 +103,7 @@ export class AppElement extends LitElement {
 				bubbles: true,
 				composed: true,
 			}));
-			
+
 		}
 		catch (err) {
 			console.error(err);
@@ -143,17 +148,18 @@ export class AppElement extends LitElement {
 		return html`<></>`;
 	}
 
-	switchStage(name, debug) {
-		console.log(`🎚️ from: ${ debug }`, name, WorkspaceMode.Stage);
-		return (event) => {
-			switch(name) {
-				case WorkspaceMode.Stage: 
-					this.workspace = WorkspaceMode.Stage;
-					break;
-				case WorkspaceMode.Style: 
-					this.workspace = WorkspaceMode.Style;
-					break;
-			}
+	switchStage(mode: WorkspaceMode, debug?: unknown) {
+		console.log(`🎚️ from: ${ debug }`, mode, WorkspaceMode.Stage);
+		return () => {
+			this.workspace = mode;
+			// switch(name) {
+			// 	case WorkspaceMode.Stage:
+			// 		this.workspace = WorkspaceMode.Stage;
+			// 		break;
+			// 	case WorkspaceMode.Style:
+			// 		this.workspace = WorkspaceMode.Style;
+			// 		break;
+			// }
 		}
 	}
 
@@ -251,10 +257,15 @@ export class AppElement extends LitElement {
 			` : nothing}
 
 
-				` : html`<sts-style-workspace
-						.trigger=${ this.#videoStylePreviewBtnRef }
-						.sceneToken=${ this.sceneToken }
-						.switchStage=${ this.switchStage }
+			` : html`
+				<sts-style-workspace
+					.trigger=${ this.#videoStylePreviewBtnRef }
+					.sceneToken=${ this.sceneToken! }
+					.switchStage=${ this.switchStage }
+					@compositor-status=${({ detail }: CustomEvent<CompositorJobStatus>) => {
+						this._compositorJobStatus = detail;
+						this.#jobStatusDialogRef.value?.open();
+					}}
 				></sts-style-workspace>`
 			}
 			<!-- Actions toolbar -->
@@ -284,14 +295,20 @@ export class AppElement extends LitElement {
 				})}
 			></sts-anim-editor>
 
-			
+
 			<sts-temp-video-preview
 				.trigger=${ this.#videoStylePreviewBtnRef }>
 			</sts-temp-video-preview>
 
-
-			<sts-job-status>
-			</sts-job-status>
+			<sts-dialog
+				${ref(this.#jobStatusDialogRef)}
+				skipWrapper
+				.template=${[this, html`
+					<sts-job-status-dialog
+						.status=${this._compositorJobStatus}
+					></sts-job-status-dialog>
+				`] as const}
+			></sts-dialog>
 
 			<!-- Dialogs and modals -->
 			${this.showHelp ? html`

studio-frontend/src/app/job-status.element.ts

@@ -1,4 +1,5 @@
 import * as studio from "@storyteller/studio";
+import { match } from "@storyteller/utility";
 import { LitElement, type PropertyValues, html, nothing, unsafeCSS, TemplateResult } from "lit";
 import { type Ref, createRef, ref } from "lit/directives/ref.js";
 import { customElement, property, state } from "lit/decorators.js";
@@ -9,31 +10,31 @@ import { DialogElement } from "@storyteller/studio-ui/dialog";
 import { bind, on } from "@storyteller/framework";
 
 import { VideoStylePreview } from "./api/VideoStylePreview";
+import { STYLE_OPTIONS, type VstStyle } from "./inspector-tabs/style-tab";
+import { CompositorJobStatus } from "./style-workspace.element";
 
 import "./style-select.element";
 
 import styles from "./temp-video-preview.element.scss?inline";
-import { STYLE_OPTIONS, type VstStyle } from "./inspector-tabs/style-tab";
 
 enum InspectorMode {
 	Properties,
 	Style
 }
 
-@customElement("sts-job-status")
-export class JobStatus extends LitElement {
-	#JobStatusRef = createRef<DialogElement>();
+@customElement("sts-job-status-dialog")
+export class JobStatusDialogElement extends LitElement {
+	@property() status?: CompositorJobStatus;
 
 	protected override render = (): TemplateResult => html`
-		<sts-dialog
-			${ref(this.#JobStatusRef)}
-			skipWrapper
-			.trigger=${ true }
-			.template=${[this, html`
-				<sts-dialog-base class="video-style-preview">
-					Hello world
-				</sts-dialog-base>
-			`] as const}
-		></sts-dialog>
+		<sts-dialog-base class="video-style-preview">
+			<h1>
+				${match(this.status, {
+					[CompositorJobStatus.Success]: () => html`:D`,
+					[CompositorJobStatus.Failure]: () => html`D:`,
+					_: () => html`¯\_(ツ)_/¯`,
+				})}
+			</h1>
+		</sts-dialog-base>
 	`
 }

studio-frontend/src/app/style-workspace.element.ts

@@ -20,6 +20,10 @@ import "./bubble-select.element";
 import "@storyteller/studio-ui/button";
 import { STYLE_OPTIONS, type VstStyle } from "./inspector-tabs/style-tab";
 
+export enum CompositorJobStatus {
+	Success = "success",
+	Failure = "failure",
+}
 
 @customElement("sts-style-workspace")
 export class StyleWorkspace extends LitElement {
@@ -132,7 +136,8 @@ export class StyleWorkspace extends LitElement {
 		event.stopPropagation();
 	}
 
-	@on("window:scene-uploaded") getSceneToken({ detail }) {
+	@on("window:scene-uploaded")
+	getSceneToken({ detail }: CustomEvent<string>) {
 		console.log("👺", detail);
 		this.sceneToken = detail;
 	}
@@ -146,13 +151,19 @@ export class StyleWorkspace extends LitElement {
 				media_file_token: this.sceneToken,
 			}).then((res: EngineCompositerResponse) => {
 				console.log("👻",res);
-			}); 
+
+				this.dispatchEvent(new CustomEvent("compositor-status", {
+					detail: res.success
+						? CompositorJobStatus.Success
+						: CompositorJobStatus.Failure
+				}));
+			});
 		}
 
 	}
 
 
-	protected override render = () => html`
+	protected override render = (): TemplateResult => html`
 		<div class="video-style-preview__page_container">
 			<div class="video-style-preview__previews">
 				<div class="video-style-preview__panel">