diff --git a/app/assets/javascripts/outfit-viewer.js b/app/assets/javascripts/outfit-viewer.js index 0be7557e..396de92b 100644 --- a/app/assets/javascripts/outfit-viewer.js +++ b/app/assets/javascripts/outfit-viewer.js @@ -4,7 +4,6 @@ class OutfitViewer extends HTMLElement { constructor() { super(); this.#internals = this.attachInternals(); - this.#setIsPlaying(false); } connectedCallback() { @@ -18,28 +17,35 @@ class OutfitViewer extends HTMLElement { this.#setIsPlaying(playPauseToggle.checked); playPauseToggle.addEventListener("change", () => { this.#setIsPlaying(playPauseToggle.checked); + this.#setIsPlayingCookie(playPauseToggle.checked); }); } #setIsPlaying(isPlaying) { // TODO: Listen for changes to the child list, and add `playing` when new // nodes arrive, if playing. + const thirtyDays = 60 * 60 * 24 * 30; if (isPlaying) { this.#internals.states.add("playing"); - for (const child of this.children) { - child.setAttribute("playing", ""); + for (const layer of this.querySelectorAll("outfit-layer")) { + layer.play(); } } else { this.#internals.states.delete("playing"); - for (const child of this.children) { - child.removeAttribute("playing"); + for (const layer of this.querySelectorAll("outfit-layer")) { + layer.pause(); } } } + + #setIsPlayingCookie(isPlaying) { + const thirtyDays = 60 * 60 * 24 * 30; + const value = isPlaying ? "true" : "false"; + document.cookie = `DTIOutfitViewerIsPlaying=${value};max-age=${thirtyDays}`; + } } class OutfitLayer extends HTMLElement { - static observedAttributes = ["playing"]; #internals; constructor() { @@ -64,11 +70,12 @@ class OutfitLayer extends HTMLElement { window.removeEventListener("message", this.#onMessage); } - attributeChangedCallback(name, oldValue, newValue) { - if (name === "playing") { - const isPlaying = newValue != null; - this.#forwardIsPlaying(isPlaying); - } + play() { + this.#forwardIsPlaying(true); + } + + pause() { + this.#forwardIsPlaying(false); } #connectToChildren() { diff --git a/app/helpers/items_helper.rb b/app/helpers/items_helper.rb index 31f0bfde..ba78f513 100644 --- a/app/helpers/items_helper.rb +++ b/app/helpers/items_helper.rb @@ -224,6 +224,10 @@ module ItemsHelper end end + def outfit_viewer_is_playing + cookies["DTIOutfitViewerIsPlaying"] == "true" + end + private def build_on_pet_types(species, special_color=nil, &block) diff --git a/app/views/items/_outfit_viewer.html.haml b/app/views/items/_outfit_viewer.html.haml index 1596c913..1848f3c8 100644 --- a/app/views/items/_outfit_viewer.html.haml +++ b/app/views/items/_outfit_viewer.html.haml @@ -2,7 +2,10 @@ .loading-indicator= render partial: "hanger_spinner" %label.play-pause-button - %input.play-pause-toggle{type: "checkbox"} + %input.play-pause-toggle{ + type: "checkbox", + checked: outfit_viewer_is_playing, + } Play/pause - outfit.visible_layers.each do |swf_asset| @@ -13,6 +16,6 @@ }, } - if swf_asset.canvas_movie? - %iframe{src: swf_asset_path(swf_asset)} + %iframe{src: swf_asset_path(swf_asset, playing: outfit_viewer_is_playing ? true : nil)} - else = image_tag swf_asset.image_url, alt: "" \ No newline at end of file