Load movies in iframe for new item page preview
Hey hey, it's working! Still stuff to add like pause/play, but yeah!
This commit is contained in:
parent
5b2062754d
commit
97e6c39402
4 changed files with 64 additions and 22 deletions
|
@ -7,19 +7,47 @@ class OutfitLayer extends HTMLElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
connectedCallback() {
|
connectedCallback() {
|
||||||
setTimeout(() => this.#initializeImage(), 0);
|
setTimeout(() => this.#connectToChildren(), 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
#initializeImage() {
|
disconnectedCallback() {
|
||||||
this.image = this.querySelector("img");
|
window.removeEventListener("message", this.#onMessage);
|
||||||
if (!this.image) {
|
}
|
||||||
throw new Error(`<outfit-layer> must contain an <img> tag`);
|
|
||||||
|
#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"));
|
if (
|
||||||
this.image.addEventListener("error", () => this.#setStatus("error"));
|
data.type === "status" &&
|
||||||
|
["loaded", "error"].includes(data.status)
|
||||||
this.#setStatus(this.image.complete ? "loaded" : "loading");
|
) {
|
||||||
|
this.#setStatus(data.status);
|
||||||
|
} else {
|
||||||
|
throw new Error(
|
||||||
|
`<outfit-layer> got unexpected message: ${JSON.stringify(data)}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#setStatus(newStatus) {
|
#setStatus(newStatus) {
|
||||||
|
|
|
@ -301,15 +301,24 @@ window.addEventListener("message", ({ data }) => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
startMovie().catch((error) => {
|
startMovie()
|
||||||
console.error(logPrefix, error);
|
.then(() => {
|
||||||
|
parent.postMessage(
|
||||||
|
{ type: "status", status: "loaded" },
|
||||||
|
document.location.origin,
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error(logPrefix, error);
|
||||||
|
|
||||||
loadingStatus = "error";
|
loadingStatus = "error";
|
||||||
canvas.setAttribute("data-status", "error");
|
parent.postMessage(
|
||||||
canvas.setAttribute("data-error-message", error.message);
|
{ type: "status", status: "error" },
|
||||||
|
document.location.origin,
|
||||||
|
);
|
||||||
|
|
||||||
// If loading the movie fails, show the fallback image instead, by moving
|
// If loading the movie fails, show the fallback image instead, by moving
|
||||||
// it out of the canvas content and into the body.
|
// it out of the canvas content and into the body.
|
||||||
document.body.appendChild(document.getElementById("fallback"));
|
document.body.appendChild(document.getElementById("fallback"));
|
||||||
console.warn("Showing fallback image instead.");
|
console.warn("Showing fallback image instead.");
|
||||||
});
|
});
|
||||||
|
|
|
@ -54,13 +54,16 @@ body.items-show
|
||||||
position: absolute
|
position: absolute
|
||||||
inset: 0
|
inset: 0
|
||||||
|
|
||||||
img
|
img, iframe
|
||||||
width: 100%
|
width: 100%
|
||||||
height: 100%
|
height: 100%
|
||||||
|
|
||||||
&:has(outfit-layer:state(loading))
|
&:has(outfit-layer:state(loading))
|
||||||
background: gray
|
background: gray
|
||||||
|
|
||||||
|
&:has(outfit-layer:state(error))
|
||||||
|
border-color: $error-border-color
|
||||||
|
|
||||||
.species-color-picker
|
.species-color-picker
|
||||||
.error-icon
|
.error-icon
|
||||||
cursor: help
|
cursor: help
|
||||||
|
@ -70,4 +73,3 @@ body.items-show
|
||||||
select
|
select
|
||||||
border-color: $error-border-color
|
border-color: $error-border-color
|
||||||
color: $error-color
|
color: $error-color
|
||||||
|
|
||||||
|
|
|
@ -6,4 +6,7 @@
|
||||||
"zone": swf_asset.zone.label,
|
"zone": swf_asset.zone.label,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
= image_tag swf_asset.image_url, alt: ""
|
- if swf_asset.canvas_movie?
|
||||||
|
%iframe{src: swf_asset_path(swf_asset) + "?playing"}
|
||||||
|
- else
|
||||||
|
= image_tag swf_asset.image_url, alt: ""
|
Loading…
Reference in a new issue