Save playing state to a cookie for the new item page preview

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) {
+			for (const layer of this.querySelectorAll("outfit-layer")) {
-				child.setAttribute("playing", "");
+				layer.play();
 			}
 		} else {
 			this.#internals.states.delete("playing");
-			for (const child of this.children) {
+			for (const layer of this.querySelectorAll("outfit-layer")) {
-				child.removeAttribute("playing");
+				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) {
+	play() {
-		if (name === "playing") {
+		this.#forwardIsPlaying(true);
-			const isPlaying = newValue != null;
+	}
-			this.#forwardIsPlaying(isPlaying);
+
-		}
+	pause() {
+		this.#forwardIsPlaying(false);
 	}
 
 	#connectToChildren() {

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)

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: ""