OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

[WV2] Fix bug where play/pause button shows even after anims removed

Browse source
This commit is contained in:
Emi Matchu 2026-02-05 18:59:08 -08:00
parent d7b1f0e067
commit 97a035b3a3
1 changed files with 25 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
app/assets/javascripts/outfit-viewer.js
View file

@ -8,7 +8,31 @@ class OutfitViewer extends HTMLElement {
} }
connectedCallback() { connectedCallback() {
// Set up listener for bubbled hasanimationschange events from layers const observer = new MutationObserver((mutations) => {
// When a layer is added, update its playing state to match ours.
const addedLayers = mutations
.flatMap(m => [...m.addedNodes])
.filter(n => n.tagName === "OUTFIT-LAYER");
for (const layer of addedLayers) {
if (this.#internals.states.has("playing")) {
layer.play();
} else {
layer.pause();
}
}
const removedLayers = mutations
.flatMap(m => [...m.removedNodes])
.filter(n => n.tagName === "OUTFIT-LAYER");
// If any layers were added or removed, updated our hasAnimations state.
if (addedLayers.length > 0 || removedLayers.length > 0) {
this.#updateHasAnimations();
}
});
observer.observe(this, { childList: true });
// When a new layer finishes loading and determines it has animations, update.
this.addEventListener("hasanimationschange", (e) => { this.addEventListener("hasanimationschange", (e) => {
// Only handle events from outfit-layer children, not from ourselves // Only handle events from outfit-layer children, not from ourselves
if (e.target === this) return; if (e.target === this) return;
@ -16,23 +40,6 @@ class OutfitViewer extends HTMLElement {
this.#updateHasAnimations(); this.#updateHasAnimations();
}); });
// Watch for new layers being added and apply the current playing state
const observer = new MutationObserver((mutations) => {
for (const mutation of mutations) {
for (const node of mutation.addedNodes) {
if (node.tagName === "OUTFIT-LAYER") {
// Apply current playing state to the new layer
if (this.#internals.states.has("playing")) {
node.play();
} else {
node.pause();
}
}
}
}
});
observer.observe(this, { childList: true });
// The `<outfit-layer>` is connected to the DOM right before its // The `<outfit-layer>` is connected to the DOM right before its
// children are. So, to engage with the children, wait a tick! // children are. So, to engage with the children, wait a tick!
setTimeout(() => this.#connectToChildren(), 0); setTimeout(() => this.#connectToChildren(), 0);