1
0
Fork 0
forked from OpenNeo/impress

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

This commit is contained in:
Emi Matchu 2024-07-08 16:27:38 -07:00
parent 1aba4f405e
commit b03fee8c7e
3 changed files with 27 additions and 13 deletions

View file

@ -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() {

View file

@ -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)

View file

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