Add WIP video style preview dialog (#115)

Co-authored-by: Victor <victor@storyteller.ai>

studio-ui/src/lib/button.element.scss

@@ -16,7 +16,7 @@
 	cursor: pointer;
 	user-select: none;
 
-	background: #0006;
+	background: var(--background-color, #0006);
 	color: #FFFC;
 	backdrop-filter: blur(16px);
 	transition: {

studio-ui/src/lib/button.element.ts

@@ -16,16 +16,27 @@ export class ButtonElement extends LitElement {
 	@property() icon?: string;
 	@property({ type: Boolean }) disabled = false;
 
+	@property({ type: Boolean })
+	primary?: boolean;
+
 	override tabIndex = 0;
 
-	protected override willUpdate(changes: PropertyValues<this>): void {
+	protected override update(changes: PropertyValues<this>): void {
 		if (changes.has("disabled")) {
 			this.ariaDisabled = this.disabled ? "true" : null;
 			this.tabIndex = this.disabled ? -1 : 0;
 			this.classList.toggle("disabled", this.disabled);
 		}
 
-		super.willUpdate(changes);
+		if (changes.has("primary")) {
+			if (this.primary) {
+				this.style.setProperty("--background-color", "var(--color-accent)");
+			} else {
+				this.style.removeProperty("--background-color");
+			}
+		}
+
+		super.update(changes);
 	}
 
 	@on("keydown")

studio-ui/src/lib/dialog/dialog.element.ts

@@ -392,6 +392,11 @@ export class DialogElement extends LitElement {
 				trigger.addEventListener("click", this.onTriggerClick);
 		}
 
+		if (changes.has("template")) {
+			if (this.#overlayHandle && this.template)
+				this._overlay.reRender(this.#overlayHandle, this.template);
+		}
+
 		super.updated(changes);
 	}
 

studio-ui/src/lib/forms/index.ts

@@ -1,2 +1,3 @@
+export * from "./form-field-base.element";
 export * from "./text-field.element";
 export * from "./scalar-field.element";

studio-ui/src/lib/icon.element.ts

@@ -45,6 +45,7 @@ import farMagnifyingGlass from "@fortawesome/fontawesome-pro/svgs/regular/magnif
 import fasHouse from "@fortawesome/fontawesome-pro/svgs/solid/house.svg?raw";
 import fasRecord from "@fortawesome/fontawesome-pro/svgs/solid/circle.svg?raw";
 import fasUpload from "@fortawesome/fontawesome-pro/svgs/solid/upload.svg?raw";
+import fasFilms from "@fortawesome/fontawesome-pro/svgs/solid/films.svg?raw";
 
 import customCylinder from "../assets/icons/cylinder.svg?raw";
 import customSphere from "../assets/icons/sphere.svg?raw";
@@ -91,6 +92,7 @@ function renderSvg(iconId: string) {
 		"figure": () => fasPersonRunning,
 		"file-import": () => farFileImport,
 		"film": () => farFilm,
+		"films": () => fasFilms,
 		"floppy-disk": () => fasFloppyDisk,
 		"fwd-fast": () => fasFwdFast,
 		"fwd-step": () => fasFwdStep,

studio-ui/src/lib/menu.element.ts

@@ -1,5 +1,5 @@
 import { inject, on } from "@storyteller/framework";
-import { LitElement, PropertyValues, css, html, unsafeCSS } from "lit";
+import { LitElement, PropertyValues, TemplateResult, css, html, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref, type Ref } from "lit/directives/ref.js";
@@ -82,6 +82,8 @@ export class MenuElement extends LitElement {
 	#panelRef = createRef<MenuPanelElement>();
 	#handle?: WeakRef<OverlayHandle>;
 
+	#template?: TemplateResult;
+
 	show(): void {
 		const trigger = this.trigger.value;
 		if (!trigger) return;
@@ -90,8 +92,7 @@ export class MenuElement extends LitElement {
 		trigger.ariaExpanded = "true";
 
 		const rect = trigger.getBoundingClientRect();
-
-		this.#handle = this._overlay.attach(this, html`
+		this.#template = html`
 			<sts-menu-panel
 				${ref(this.#panelRef)}
 				id=${this.#menuId}
@@ -108,7 +109,9 @@ export class MenuElement extends LitElement {
 				// <sts-menu-panel>'s slot
 				this.#slotRef.value?.assignedNodes()
 			}</sts-menu-panel>
-		`);
+		`;
+
+		this.#handle = this._overlay.attach(this, this.#template);
 	}
 
 	hide(): void {
@@ -134,8 +137,9 @@ export class MenuElement extends LitElement {
 	protected override update(changes: PropertyValues<this>): void {
 		super.update(changes);
 
-		if (this.#handle)
-			this._overlay.reRender(this.#handle);
+
+		if (this.#handle && this.#template)
+			this._overlay.reRender(this.#handle, [this, this.#template]);
 	}
 
 	protected override updated(changes: PropertyValues<this>): void {

studio-ui/src/lib/overlay-provider.element.ts

@@ -83,7 +83,7 @@ export interface OverlayProvider {
 	detach(handle: WeakRef<OverlayHandle>): void;
 
 	/** Re-render a currently-attached overlay. */
-	reRender(handle: WeakRef<OverlayHandle>): void;
+	reRender(handle: WeakRef<OverlayHandle>, template: [LitElement, TemplateResult]): void;
 }
 
 export interface AttachOptions {
@@ -226,19 +226,14 @@ export class OverlayProviderElement
 
 	// TODO: I'm not actually sure whether this serves a necessary function.
 	//       Needs further testing.
-	reRender(handle: WeakRef<OverlayHandle>): void {
+	reRender(handle: WeakRef<OverlayHandle>, template: [LitElement, TemplateResult]): void {
 		const index = handle.deref()?.id;
 		if (index == null || index === -1)
 			return;
 
-		const container = this.#containerRefs[index]?.value;
-		if (!container) return;
+		this.#templates[index] = template;
 
-		const tuple = this.#templates[index];
-		if (!tuple) return;
-
-		const [host, template] = tuple;
-		render(template, container, { host });
+		this.#updateLightDom();
 	}
 
 	#updateLightDom(): void {