From b03fee8c7e2ce3717b9aad5e5e0a956499d6e046 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Mon, 8 Jul 2024 16:27:38 -0700
Subject: [PATCH] Save playing state to a cookie for the new item page preview

---
 app/assets/javascripts/outfit-viewer.js  | 29 +++++++++++++++---------
 app/helpers/items_helper.rb              |  4 ++++
 app/views/items/_outfit_viewer.html.haml |  7 ++++--
 3 files changed, 27 insertions(+), 13 deletions(-)

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