Restore temp video preview dialog (#127)

This PR restores the temporary "Video Style Preview" dialog that was
lost with #119, now triggered by the "Stylize" CTA button in the main
toolbar. Also removes some unused code from `AppElement`.

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

@@ -40,7 +40,6 @@ import "./anim-editor.element";
 import "./anim-timeline-controller.element";
 import "./help.element";
 import "./studio-viewport.element";
-import "./temp-video-preview.element";
 
 import "./app.element.scss";
 
@@ -54,7 +53,6 @@ import "./app.element.scss";
 	provide() { return this.params; }
 })
 export class AppElement extends LitElement {
-	@state() showHelp = false;
 	@state() loading = true;
 
 	// @state() resizingPanel = false;
@@ -69,7 +67,6 @@ export class AppElement extends LitElement {
 	api = new StorytellerApi(mockApi ? new StorytellerLocalApi() : new StorytellerRemoteApi());
 	params = new StudioURLParams();
 
-	#videoStylePreviewBtnRef = createRef<ButtonElement>();
 	#inspectorRef = createRef<HTMLDivElement>();
 	#hierarchyRef = createRef<SceneHierarchyElement>();
 
@@ -101,10 +98,6 @@ export class AppElement extends LitElement {
 	// 	this.inspectorWidth = Math.max(Math.min(updated, 1024), 128);
 	// }
 
-	toggleHelp(): void {
-		this.showHelp = !this.showHelp;
-	}
-
 	renderSidebar(): TemplateResult<1> {
 		if (this.currentSidebar === 'hierarchy') {
 			return html`<sts-scene-hierarchy
@@ -165,25 +158,10 @@ export class AppElement extends LitElement {
 					></div> -->
 				</section>
 
-				<!-- TODO
-				<div class="entity-inspector">
-					<sts-entity-inspector></sts-entity-inspector>
-				</div>
-				-->
-
 				<sts-anim-editor class="timeline"></sts-anim-editor>
 			` : nothing}
 
 			<!-- Dialogs and modals -->
-			<sts-temp-video-preview
-				.trigger=${ this.#videoStylePreviewBtnRef }>
-			</sts-temp-video-preview>
-
-			${this.showHelp ? html`
-				<div class="help">
-					<sts-help></sts-help>
-				</div>
-			` : nothing}
 
 			${this.loading ? html`
 				<sts-loading></sts-loading>

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

@@ -24,6 +24,7 @@ import "@storyteller/studio-ui/forms/select";
 import "@storyteller/studio-ui/toolbar";
 import "./anim-timeline-controls.element";
 import "./file-menu.element";
+import "./temp-video-preview.element";
 
 import "./studio-viewport.element.scss";
 import { match } from "@storyteller/utility";
@@ -52,6 +53,7 @@ export class StudioViewportElement extends LitElement {
 	}
 
 	#fileTriggerRef = createRef<ButtonElement>();
+	#stylizeTriggerRef = createRef<ButtonElement>();
 	#mediaLibraryTriggerRef = createRef<ButtonElement>();
 	#helpDialogTriggerRef = createRef<ButtonElement>();
 
@@ -191,7 +193,11 @@ export class StudioViewportElement extends LitElement {
 						<hr />
 
 						<sts-toolbar-group>
-							<sts-button class="stylize" primary>
+							<sts-button
+								${ref(this.#stylizeTriggerRef)}
+								class="stylize"
+								primary
+							>
 								Stylize <sts-icon icon="chevron-right"></sts-icon>
 							</sts-button>
 						</sts-toolbar-group>
@@ -265,6 +271,10 @@ export class StudioViewportElement extends LitElement {
 			tag="sts-help"
 			skipWrapper
 		></sts-dialog>
+
+		<sts-temp-video-preview
+			.trigger=${this.#stylizeTriggerRef}>
+		</sts-temp-video-preview>
 		`;
 	}
 }