diff --git a/app/assets/javascripts/outfit-viewer.js b/app/assets/javascripts/outfit-viewer.js index 396de92b..19264af3 100644 --- a/app/assets/javascripts/outfit-viewer.js +++ b/app/assets/javascripts/outfit-viewer.js @@ -71,11 +71,11 @@ class OutfitLayer extends HTMLElement { } play() { - this.#forwardIsPlaying(true); + this.#sendMessageToIframe({ type: "play" }); } pause() { - this.#forwardIsPlaying(false); + this.#sendMessageToIframe({ type: "pause" }); } #connectToChildren() { @@ -83,14 +83,23 @@ class OutfitLayer extends HTMLElement { const iframe = this.querySelector("iframe"); if (image) { + // Initialize status based on the image's current `complete` attribute, + // then wait for load/error events to update it further if needed. + this.#setStatus(image.complete ? "loaded" : "loading"); image.addEventListener("load", () => this.#setStatus("loaded")); image.addEventListener("error", () => this.#setStatus("error")); - this.#setStatus(image.complete ? "loaded" : "loading"); } else if (iframe) { this.iframe = iframe; + + // Initialize status to `loading`, and asynchronously request a status + // message from the iframe if it managed to load before this triggers + // (impressive, but I think I've seen it happen!). Then, wait for + // messages or error events from the iframe to update status further if + // needed. + this.#setStatus("loading"); + this.#sendMessageToIframe({ type: "requestStatus" }); window.addEventListener("message", (m) => this.#onMessage(m)); this.iframe.addEventListener("error", () => this.#setStatus("error")); - this.#setStatus("loading"); } else { throw new Error(` must contain an or