From 97e6c39402ef2c6a01f362b1e3b35ee7554a837e Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Wed, 3 Jul 2024 20:15:35 -0700
Subject: [PATCH] Load movies in iframe for new item page preview

Hey hey, it's working! Still stuff to add like pause/play, but yeah!
---
 app/assets/javascripts/outfit-viewer.js   | 46 ++++++++++++++++++-----
 app/assets/javascripts/swf_assets/show.js | 29 +++++++++-----
 app/assets/stylesheets/items/_show.sass   |  6 ++-
 app/views/items/_outfit_viewer.html.haml  |  5 ++-
 4 files changed, 64 insertions(+), 22 deletions(-)

diff --git a/app/assets/javascripts/outfit-viewer.js b/app/assets/javascripts/outfit-viewer.js
index 3a7ba6de..2c35eb32 100644
--- a/app/assets/javascripts/outfit-viewer.js
+++ b/app/assets/javascripts/outfit-viewer.js
@@ -7,19 +7,47 @@ class OutfitLayer extends HTMLElement {
 	}
 
 	connectedCallback() {
-		setTimeout(() => this.#initializeImage(), 0);
+		setTimeout(() => this.#connectToChildren(), 0);
 	}
 
-	#initializeImage() {
-		this.image = this.querySelector("img");
-		if (!this.image) {
-			throw new Error(`<outfit-layer> must contain an <img> tag`);
+	disconnectedCallback() {
+		window.removeEventListener("message", this.#onMessage);
+	}
+
+	#connectToChildren() {
+		const image = this.querySelector("img");
+		const iframe = this.querySelector("iframe");
+
+		if (image) {
+			image.addEventListener("load", () => this.#setStatus("loaded"));
+			image.addEventListener("error", () => this.#setStatus("error"));
+			this.#setStatus(image.complete ? "loaded" : "loading");
+		} else if (iframe) {
+			this.iframe = iframe;
+			window.addEventListener("message", (m) => this.#onMessage(m));
+			this.#setStatus("loading");
+		} else {
+			throw new Error(
+				`<outfit-layer> must contain an <img> or <iframe> tag`,
+			);
+		}
+	}
+
+	#onMessage({ source, data }) {
+		if (source !== this.iframe.contentWindow) {
+			return;
 		}
 
-		this.image.addEventListener("load", () => this.#setStatus("loaded"));
-		this.image.addEventListener("error", () => this.#setStatus("error"));
-
-		this.#setStatus(this.image.complete ? "loaded" : "loading");
+		if (
+			data.type === "status" &&
+			["loaded", "error"].includes(data.status)
+		) {
+			this.#setStatus(data.status);
+		} else {
+			throw new Error(
+				`<outfit-layer> got unexpected message: ${JSON.stringify(data)}`,
+			);
+		}
 	}
 
 	#setStatus(newStatus) {
diff --git a/app/assets/javascripts/swf_assets/show.js b/app/assets/javascripts/swf_assets/show.js
index 9bffce5b..2e372885 100644
--- a/app/assets/javascripts/swf_assets/show.js
+++ b/app/assets/javascripts/swf_assets/show.js
@@ -301,15 +301,24 @@ window.addEventListener("message", ({ data }) => {
 	}
 });
 
-startMovie().catch((error) => {
-	console.error(logPrefix, error);
+startMovie()
+	.then(() => {
+		parent.postMessage(
+			{ type: "status", status: "loaded" },
+			document.location.origin,
+		);
+	})
+	.catch((error) => {
+		console.error(logPrefix, error);
 
-	loadingStatus = "error";
-	canvas.setAttribute("data-status", "error");
-	canvas.setAttribute("data-error-message", error.message);
+		loadingStatus = "error";
+		parent.postMessage(
+			{ type: "status", status: "error" },
+			document.location.origin,
+		);
 
-	// If loading the movie fails, show the fallback image instead, by moving
-	// it out of the canvas content and into the body.
-	document.body.appendChild(document.getElementById("fallback"));
-	console.warn("Showing fallback image instead.");
-});
+		// If loading the movie fails, show the fallback image instead, by moving
+		// it out of the canvas content and into the body.
+		document.body.appendChild(document.getElementById("fallback"));
+		console.warn("Showing fallback image instead.");
+	});
diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass
index bfb71d4b..79f6791b 100644
--- a/app/assets/stylesheets/items/_show.sass
+++ b/app/assets/stylesheets/items/_show.sass
@@ -54,13 +54,16 @@ body.items-show
       position: absolute
       inset: 0
 
-      img
+      img, iframe
         width: 100%
         height: 100%
 
     &:has(outfit-layer:state(loading))
       background: gray
 
+    &:has(outfit-layer:state(error))
+      border-color: $error-border-color
+
   .species-color-picker
     .error-icon
       cursor: help
@@ -70,4 +73,3 @@ body.items-show
       select
         border-color: $error-border-color
         color: $error-color
-
diff --git a/app/views/items/_outfit_viewer.html.haml b/app/views/items/_outfit_viewer.html.haml
index 95bc452f..09f76c81 100644
--- a/app/views/items/_outfit_viewer.html.haml
+++ b/app/views/items/_outfit_viewer.html.haml
@@ -6,4 +6,7 @@
         "zone": swf_asset.zone.label,
       },
     }
-      = image_tag swf_asset.image_url, alt: ""
\ No newline at end of file
+      - if swf_asset.canvas_movie?
+        %iframe{src: swf_asset_path(swf_asset) + "?playing"}
+      - else
+        = image_tag swf_asset.image_url, alt: ""
\ No newline at end of file