@preference-sl/pref-viewer 2.11.0-beta.9 → 2.12.0-beta.1

package/src/babylonjs-animation-opening-menu.js

@@ -1,24 +1,40 @@
-import { AdvancedDynamicTexture, Button, Control, Image, Slider, StackPanel } from "@babylonjs/gui";
-import { OpeningAnimation } from "./babylonjs-animation-opening.js";
+import OpeningAnimation from "./babylonjs-animation-opening.js";
+import { PrefViewer3DAnimationMenuStyles } from "./styles.js";
 
 /**
- * OpeningAnimationMenu - Manages and renders the animation control menu for opening/closing animations in a Babylon.js scene.
+ * OpeningAnimationMenu - Manages and renders the interactive animation control menu for opening/closing animations in a Babylon.js scene.
  *
- * Responsibilities:
- *  - Renders a GUI menu with buttons for controlling animation playback (open, close, pause, go to opened/closed, loop).
+ * Summary:
+ *  Provides a floating HTML-based GUI menu with playback and loop controls for animated nodes, including buttons, a progress slider, and a selector for switching between multiple animations.
+ *  Handles user interaction, updates UI state based on animation state, and invokes external callbacks for animation actions.
+ *  Designed for integration with Babylon.js product configurators and interactive 3D applications.
+ *
+ * Key Features:
+ *  - Renders a menu with buttons for controlling animation playback (open, close, pause, go to opened/closed, loop).
+ *  - Displays a selector UI for switching between multiple opening animations, showing only the animation name without prefix.
  *  - Updates button states and slider position based on animation state, progress, and loop mode.
  *  - Handles user interactions and invokes provided callbacks for animation actions.
  *  - Synchronizes the slider value with animation progress, avoiding callback loops.
+ *  - Provides setters to update animation state, progress, and loop mode from external controllers.
+ *  - Disposes and cleans up all DOM resources when no longer needed.
+ *  - Resets other animation menus when switching between animations.
  *
  * Public Setters:
  *  - set animationState(state): Updates the animation state and button states.
  *  - set animationProgress(progress): Updates the animation progress and slider value.
  *  - set animationLoop(loop): Updates the loop mode and loop button states.
  *
+ * Public Methods:
+ *  - dispose(): Disposes the animation menu and releases all associated DOM resources.
+ *
+ * Public Getters:
+ *  - isVisible: Returns whether the animation menu is currently visible in the DOM.
+ *
  * Private Methods:
- *  - #createMenu(): Initializes and renders the menu UI.
- *  - #addButton(name, imageURL, enabled, active, visible, callback): Adds a button to the menu with specified properties.
+ *  - #createMenu(): Initializes and renders the menu UI, including the selector, buttons, and slider.
+ *  - #addButton(name, imageSVG, enabled, active, visible, callback): Adds a button to the menu with specified properties.
  *  - #createButtons(): Creates all control buttons and sets their initial states.
+ *  - #createSelector(): Creates a selector UI element for switching between available opening animations, omitting the prefix in the display name.
  *  - #getButtonByName(name): Retrieves a button control by its name.
  *  - #setButtonState(name, enabled, active, visible): Updates the visual state of a button.
  *  - #getPlayerButtonsState(): Returns the state (enabled, active, visible) for playback control buttons.
@@ -27,97 +43,75 @@ import { OpeningAnimation } from "./babylonjs-animation-opening.js";
  *  - #setPlayerButtonsState(): Updates all playback control buttons.
  *  - #setLoopButtonsState(): Updates all loop control buttons.
  *  - #createSlider(): Creates and configures the animation progress slider.
+ *  - #onSliderInput(event): Handles the slider input event for animation progress.
+ *  - #resetOtherAnimations(): Resets all other opening animations except the current one.
  *
  * Usage Example:
- *  const menu = new OpeningAnimationMenu(adt, state, progress, loop, {
+ *  const menu = new OpeningAnimationMenu(name, canvas, state, progress, loop, openingAnimations, {
  *      onOpen: () => { ... },
  *      onClose: () => { ... },
  *      onPause: () => { ... },
  *      onGoToOpened: () => { ... },
  *      onGoToClosed: () => { ... },
  *      onToggleLoop: () => { ... },
- *      onSetAnimationProgress: (progress) => { ... }
+ *      onSetAnimationProgress: (progress) => { ... },
+ *      onChangeAnimation: () => { ... }
  *  });
  *  menu.animationState = OpeningAnimation.states.opening;
  *  menu.animationProgress = 0.5;
  *  menu.animationLoop = true;
  */
-export class OpeningAnimationMenu {
+export default class OpeningAnimationMenu {
     #animationState = OpeningAnimation.states.closed;
     #animationProgress = 0;
     #animationLoop = false;
+    #openingAnimations = [];
     #callbacks = null;
 
-    // GUI Elements
-    #advancedDynamicTexture = null;
-    #mainPanel = null;
-    #secondaryPanel = null;
+    #name = "";
+    #canvas = null;
+    #containerMain = null;
+    #containerButtons = null;
     #slider = null;
 
-    // Style properties
-    #buttonSize = 28;
-    #buttonLoopPaddingLeft = 3;
-    #colorActive = "#6BA53A";
-    #colorEnabled = "#333333";
-    #colorDisabled = "#777777";
-    #colorIcon = "#FFFFFF";
-    #colorBorder = "#FFFFFF";
-    #sliderThumbWidth = 20;
-    #sliderBarOffset = 10;
     #icon = {
-        close: `<svg id="play-backwards" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="${this.#colorIcon}" d="M16,18.86V4.86l-11,7,11,7Z"/></svg>`,
-        closed: `<svg id="skip-backward" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="${this.#colorIcon}" d="M20,5V19L13,12M6,5V19H4V5M13,5V19L6,12"/></svg>`,
-        open: `<svg id="play" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="${this.#colorIcon}" d="M8,5.14v14l11-7-11-7Z"/></svg>`,
-        opened: `<svg id="skip-forward" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="${this.#colorIcon}" d="M4,5V19L11,12M18,5V19H20V5M11,5V19L18,12"/></svg>`,
-        pause: `<svg id="pause" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="${this.#colorIcon}" d="M14,19H18V5H14M6,19H10V5H6V19Z"/></svg>`,
-        repeat: `<svg id="repeat" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="${this.#colorIcon}" d="M17,17H7V14L3,18L7,22V19H19V13H17M7,7H17V10L21,6L17,2V5H5V11H7V7Z"/></svg>`,
-        repeatOff: `<svg id="repeat-off" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="${this.#colorIcon}" d="M2,5.27L3.28,4L20,20.72L18.73,22L15.73,19H7V22L3,18L7,14V17H13.73L7,10.27V11H5V8.27L2,5.27M17,13H19V17.18L17,15.18V13M17,5V2L21,6L17,10V7H8.82L6.82,5H17Z"/></svg>`,
+        close: `<svg id="play-backwards" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M16,18.86V4.86l-11,7,11,7Z"/></svg>`,
+        closed: `<svg id="skip-backward" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M20,5V19L13,12M6,5V19H4V5M13,5V19L6,12"/></svg>`,
+        open: `<svg id="play" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M8,5.14v14l11-7-11-7Z"/></svg>`,
+        opened: `<svg id="skip-forward" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,5V19L11,12M18,5V19H20V5M11,5V19L18,12"/></svg>`,
+        pause: `<svg id="pause" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M14,19H18V5H14M6,19H10V5H6V19Z"/></svg>`,
+        repeat: `<svg id="repeat" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M17,17H7V14L3,18L7,22V19H19V13H17M7,7H17V10L21,6L17,2V5H5V11H7V7Z"/></svg>`,
+        repeatOff: `<svg id="repeat-off" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M2,5.27L3.28,4L20,20.72L18.73,22L15.73,19H7V22L3,18L7,14V17H13.73L7,10.27V11H5V8.27L2,5.27M17,13H19V17.18L17,15.18V13M17,5V2L21,6L17,10V7H8.82L6.82,5H17Z"/></svg>`,
     };
 
-    #isSettingSliderValue = false;
+    #handler = {
+        onSliderInput: null,
+    };
 
     /**
      * Constructs the OpeningAnimationMenu and initializes the menu UI.
-     * @param {AdvancedDynamicTexture} advancedDynamicTexture - Babylon.js GUI texture for rendering controls.
+     * @param {string} name - The name of the animation.
+     * @param {HTMLCanvasElement} canvas - The canvas element for rendering.
      * @param {number} animationState - Current animation state (enum).
      * @param {number} animationProgress - Current animation progress (0 to 1).
      * @param {boolean} animationLoop - Whether the animation is set to loop.
+     * @param {Array<OpeningAnimation>} openingAnimations - Array of OpeningAnimation instances to manage.
      * @param {object} callbacks - Callback functions for menu actions (play, pause, open, close, etc.).
      * @public
      */
-    constructor(advancedDynamicTexture, animationState, animationProgress, animationLoop, callbacks) {
-        this.#advancedDynamicTexture = advancedDynamicTexture;
+    constructor(name, canvas, animationState, animationProgress, animationLoop, openingAnimations, callbacks) {
+        this.#name = name;
+        this.#canvas = canvas;
         this.#animationState = animationState;
         this.#animationProgress = animationProgress;
         this.#animationLoop = animationLoop;
+        this.#openingAnimations = openingAnimations;
         this.#callbacks = callbacks;
 
+        this.#resetOtherAnimations();
         this.#createMenu(animationState);
     }
 
-    /**
-     * Initializes and renders the menu UI, including buttons and slider.
-     * @private
-     */
-    #createMenu() {
-        if (!this.#advancedDynamicTexture) {
-            return;
-        }
-        this.#mainPanel = new StackPanel();
-        this.#mainPanel.isVertical = true;
-        this.#secondaryPanel = new StackPanel();
-        this.#secondaryPanel.isVertical = false;
-        this.#secondaryPanel.height = `${this.#buttonSize}px`;
-        this.#mainPanel.addControl(this.#secondaryPanel);
-
-        this.#advancedDynamicTexture.addControl(this.#mainPanel);
-        this.#mainPanel.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
-        this.#mainPanel.verticalAlignment = Control.VERTICAL_ALIGNMENT_BOTTOM;
-
-        this.#createButtons();
-        this.#createSlider();
-    }
-
     /**
      * Internal helper to add a button to the menu.
      * Sets button appearance and attaches the callback for user interaction.
@@ -129,25 +123,61 @@ export class OpeningAnimationMenu {
      * @param {boolean} visible - Whether the button is visible.
      * @param {function} callback - Callback to invoke on button click.
      */
-    #addButton(name, imageURL, enabled = true, active = false, visible = true, callback) {
-        const buttonProps = {
-            background: active ? this.#colorActive : enabled ? this.#colorEnabled : this.#colorDisabled,
-            color: this.#colorBorder,
-            cornerRadius: 0,
-            height: `${this.#buttonSize}px`,
-            hoverCursor: "pointer",
-            width: `${this.#buttonSize}px`,
-            isVisible: visible,
-        };
-        const button = Button.CreateImageOnlyButton(`button_animation_${name}`, imageURL);
-        Object.assign(button, buttonProps);
-        button.image.stretch = Image.STRETCH_UNIFORM;
-        button.onPointerUpObservable.add(() => {
+    #addButton(name, imageSVG, enabled = true, active = false, visible = true, callback) {
+        const stateClass = active ? "active" : enabled ? "enabled" : "disabled";
+        const visibilityClass = visible ? "visible" : "hidden";
+
+        const button = document.createElement("button");
+        button.classList.add(stateClass, visibilityClass);
+        button.setAttribute("name", `button_animation_${name}`);
+        button.innerHTML = imageSVG;
+        button.addEventListener("click", (event) => {
             if (callback && typeof callback === "function") {
                 callback();
             }
         });
-        this.#secondaryPanel.addControl(button);
+
+        this.#containerButtons.appendChild(button);
+    }
+
+    /**
+     * Creates a selector UI element for switching between available opening animations.
+     * @private
+     * @returns {void}
+     */
+    #createSelector() {
+        if (!Array.isArray(this.#openingAnimations) || this.#openingAnimations.length < 2) {
+            return; // No selector needed if only one animation
+        }
+
+        const selector = document.createElement("div");
+        selector.classList.add("animation-menu-selector");
+
+        this.#openingAnimations.forEach((animation) => {
+            const button = document.createElement("button");
+            button.classList.add("button-selector");
+            // Remove prefix before "_" for display
+            const nameParts = animation.name.split("_");
+            button.textContent = nameParts.length > 1 ? nameParts.slice(1).join("_") : animation.name;
+
+            // Highlight the current animation
+            if (animation.name === this.#name) {
+                button.classList.add("active");
+            }
+
+            button.addEventListener("click", (event) => {
+                if (animation.name !== this.#name) {
+                    if (this.#callbacks.onChangeAnimation && typeof this.#callbacks.onChangeAnimation === "function") {
+                        this.#callbacks.onChangeAnimation();
+                    }
+                    animation.showControls(this.#canvas, this.#openingAnimations);
+                }
+            });
+
+            selector.appendChild(button);
+        });
+
+        this.#containerMain.prepend(selector);
     }
 
     /**
@@ -156,19 +186,55 @@ export class OpeningAnimationMenu {
      */
     #createButtons() {
         const buttonsState = this.#getButtonsState();
-        this.#addButton("closed", `data:image/svg+xml,${encodeURIComponent(this.#icon.closed)}`, buttonsState.closed.enabled, buttonsState.closed.active, buttonsState.closed.visible, this.#callbacks.onGoToClosed);
-        this.#addButton("close", `data:image/svg+xml,${encodeURIComponent(this.#icon.close)}`, buttonsState.close.enabled, buttonsState.close.active, buttonsState.close.visible, this.#callbacks.onClose);
-        this.#addButton("pause", `data:image/svg+xml,${encodeURIComponent(this.#icon.pause)}`, buttonsState.pause.enabled, buttonsState.pause.active, buttonsState.pause.visible, this.#callbacks.onPause);
-        this.#addButton("open", `data:image/svg+xml,${encodeURIComponent(this.#icon.open)}`, buttonsState.open.enabled, buttonsState.open.active, buttonsState.open.visible, this.#callbacks.onOpen);
-        this.#addButton("opened", `data:image/svg+xml,${encodeURIComponent(this.#icon.opened)}`, buttonsState.opened.enabled, buttonsState.opened.active, buttonsState.opened.visible, this.#callbacks.onGoToOpened);
-        this.#addButton("repeat", `data:image/svg+xml,${encodeURIComponent(this.#icon.repeat)}`, buttonsState.repeat.enabled, buttonsState.repeat.active, buttonsState.repeat.visible, this.#callbacks.onToggleLoop);
-        this.#addButton("repeatOff", `data:image/svg+xml,${encodeURIComponent(this.#icon.repeatOff)}`, buttonsState.repeatOff.enabled, buttonsState.repeatOff.active, buttonsState.repeatOff.visible, this.#callbacks.onToggleLoop);
-
-        // Adjust padding for loop buttons
-        this.#getButtonByName("repeat").paddingLeft = `${this.#buttonLoopPaddingLeft}px`;
-        this.#getButtonByName("repeat").width = `${this.#buttonSize + this.#buttonLoopPaddingLeft}px`;
-        this.#getButtonByName("repeatOff").paddingLeft = `${this.#buttonLoopPaddingLeft}px`;
-        this.#getButtonByName("repeatOff").width = `${this.#buttonSize + this.#buttonLoopPaddingLeft}px`;
+        this.#addButton("closed", this.#icon.closed, buttonsState.closed.enabled, buttonsState.closed.active, buttonsState.closed.visible, this.#callbacks.onGoToClosed);
+        this.#addButton("close", this.#icon.close, buttonsState.close.enabled, buttonsState.close.active, buttonsState.close.visible, this.#callbacks.onClose);
+        this.#addButton("pause", this.#icon.pause, buttonsState.pause.enabled, buttonsState.pause.active, buttonsState.pause.visible, this.#callbacks.onPause);
+        this.#addButton("open", this.#icon.open, buttonsState.open.enabled, buttonsState.open.active, buttonsState.open.visible, this.#callbacks.onOpen);
+        this.#addButton("opened", this.#icon.opened, buttonsState.opened.enabled, buttonsState.opened.active, buttonsState.opened.visible, this.#callbacks.onGoToOpened);
+        this.#addButton("repeat", this.#icon.repeat, buttonsState.repeat.enabled, buttonsState.repeat.active, buttonsState.repeat.visible, this.#callbacks.onToggleLoop);
+        this.#addButton("repeatOff", this.#icon.repeatOff, buttonsState.repeatOff.enabled, buttonsState.repeatOff.active, buttonsState.repeatOff.visible, this.#callbacks.onToggleLoop);
+    }
+
+    /**
+     * Creates and configures the animation progress slider.
+     * @private
+     */
+    #createSlider() {
+        this.#slider = document.createElement("input");
+        this.#slider.setAttribute("type", "range");
+        this.#slider.setAttribute("min", "0");
+        this.#slider.setAttribute("max", "1");
+        this.#slider.setAttribute("step", "0.01");
+        this.#slider.setAttribute("value", this.#animationProgress.toString());
+        this.#slider.classList.add("animation-menu-slider");
+        this.#handler.onSliderInput = this.#onSliderInput.bind(this);
+        this.#slider.addEventListener("input", this.#handler.onSliderInput);
+
+        this.#containerMain.appendChild(this.#slider);
+    }
+
+    /**
+     * Initializes and renders the menu UI, including buttons and slider.
+     * @private
+     */
+    #createMenu() {
+        this.#containerMain = document.createElement("div");
+        this.#containerMain.classList.add("pref-viewer-3d");
+        this.#containerMain.classList.add("animation-menu");
+        this.#containerMain.setAttribute("data-animation-name", this.#name);
+        this.#canvas.parentElement.prepend(this.#containerMain);
+
+        const style = document.createElement("style");
+        style.textContent = PrefViewer3DAnimationMenuStyles;
+        this.#containerMain.appendChild(style);
+
+        this.#containerButtons = document.createElement("div");
+        this.#containerButtons.classList.add("animation-menu-buttons");
+        this.#containerMain.appendChild(this.#containerButtons);
+
+        this.#createSelector();
+        this.#createButtons();
+        this.#createSlider();
     }
 
     /**
@@ -178,24 +244,37 @@ export class OpeningAnimationMenu {
      * @returns {Button|null} The button control or null if not found.
      */
     #getButtonByName(name) {
-        return this.#advancedDynamicTexture.getControlByName(`button_animation_${name}`);
+        return this.#containerButtons.querySelector(`button[name="button_animation_${name}"]`);
     }
 
     /**
-     * Updates the visual state of a button (enabled, active, visible).
+     * Combines player and loop button states.
      * @private
-     * @param {string} name - Button identifier.
-     * @param {boolean} enabled
-     * @param {boolean} active
-     * @param {boolean} visible
+     * @returns {object}
      */
-    #setButtonState(name, enabled, active, visible = true) {
-        const button = this.#getButtonByName(name);
-        if (!button) {
-            return;
-        }
-        button.background = active ? this.#colorActive : enabled ? this.#colorEnabled : this.#colorDisabled;
-        button.isVisible = visible;
+    #getButtonsState() {
+        return Object.assign(this.#getPlayerButtonsState(), this.#getLoopButtonsState());
+    }
+
+    /**
+     * Returns the state for loop control buttons.
+     * @private
+     * @returns {object}
+     */
+    #getLoopButtonsState() {
+        const buttonsState = {
+            repeat: {
+                enabled: this.#animationLoop,
+                active: false,
+                visible: this.#animationLoop,
+            },
+            repeatOff: {
+                enabled: !this.#animationLoop,
+                active: false,
+                visible: !this.#animationLoop,
+            },
+        };
+        return buttonsState;
     }
 
     /**
@@ -235,33 +314,47 @@ export class OpeningAnimationMenu {
     }
 
     /**
-     * Returns the state for loop control buttons.
+     * Resets all other opening animations except the current one.
      * @private
-     * @returns {object}
+     * @returns {void}
      */
-    #getLoopButtonsState() {
-        const buttonsState = {
-            repeat: {
-                enabled: this.#animationLoop,
-                active: false,
-                visible: this.#animationLoop,
-            },
-            repeatOff: {
-                enabled: !this.#animationLoop,
-                active: false,
-                visible: !this.#animationLoop,
-            },
-        };
-        return buttonsState;
+    #resetOtherAnimations() {
+        this.#openingAnimations.forEach((animation) => {
+            if (animation.name !== this.#name) {
+                animation.hideControls();
+                animation.goToClosed();
+            }
+        });
     }
 
     /**
-     * Combines player and loop button states.
+     * Updates the visual state of a button (enabled, active, visible).
      * @private
-     * @returns {object}
+     * @param {string} name - Button identifier.
+     * @param {boolean} enabled
+     * @param {boolean} active
+     * @param {boolean} visible
      */
-    #getButtonsState() {
-        return Object.assign(this.#getPlayerButtonsState(), this.#getLoopButtonsState());
+    #setButtonState(name, enabled, active, visible = true) {
+        const button = this.#getButtonByName(name);
+        if (!button) {
+            return;
+        }
+        const classToRemove = ["active", "enabled", "disabled", "hidden", "visible"];
+        button.classList.remove(...classToRemove);
+        const stateClass = active ? "active" : enabled ? "enabled" : "disabled";
+        const visibilityClass = visible ? "visible" : "hidden";
+        button.classList.add(stateClass, visibilityClass);
+    }
+
+    /**
+     * Updates all loop control buttons according to current loop mode.
+     * @private
+     */
+    #setLoopButtonsState() {
+        const buttonsState = this.#getLoopButtonsState();
+        this.#setButtonState("repeat", buttonsState.repeat.enabled, buttonsState.repeat.active, buttonsState.repeat.visible);
+        this.#setButtonState("repeatOff", buttonsState.repeatOff.enabled, buttonsState.repeatOff.active, buttonsState.repeatOff.visible);
     }
 
     /**
@@ -278,46 +371,38 @@ export class OpeningAnimationMenu {
     }
 
     /**
-     * Updates all loop control buttons according to current loop mode.
+     * Handles the slider input event for animation progress.
      * @private
+     * @param {Event} event - The input event from the slider.
+     * @returns {void}
+     * @description
+     * If the slider value is being set programmatically, the event is ignored to prevent callback loops.
      */
-    #setLoopButtonsState() {
-        const buttonsState = this.#getLoopButtonsState();
-        this.#setButtonState("repeat", buttonsState.repeat.enabled, buttonsState.repeat.active, buttonsState.repeat.visible);
-        this.#setButtonState("repeatOff", buttonsState.repeatOff.enabled, buttonsState.repeatOff.active, buttonsState.repeatOff.visible);
+    #onSliderInput(event) {
+        if (this.#callbacks && typeof this.#callbacks.onSetAnimationProgress === "function") {
+            this.#callbacks.onSetAnimationProgress(event.target.value);
+        }
     }
 
     /**
-     * Creates and configures the animation progress slider.
-     * @private
+     * ---------------------------
+     * Public methods
+     * ---------------------------
      */
-    #createSlider() {
-        const sliderProps = {
-            minimum: 0,
-            maximum: 1,
-            value: this.#animationProgress,
-            height: `${this.#buttonSize}px`,
-            width: `${this.#buttonSize * 7 + this.#buttonLoopPaddingLeft}px`, // Width based on number of buttons visible
-            barOffset: `${this.#sliderBarOffset}px`,
-            isThumbCircle: true,
-            thumbWidth: `${this.#sliderThumbWidth}px`,
-            background: this.#colorDisabled,
-            color: this.#colorEnabled,
-            borderColor: this.#colorBorder,
-            thumbColor: this.#colorEnabled,
-        };
-        this.#slider = new Slider("slider_animation_progress");
-        Object.assign(this.#slider, sliderProps);
-        this.#slider.onValueChangedObservable.add((value) => {
-            if (this.#isSettingSliderValue) {
-                this.#isSettingSliderValue = false;
-                return;
-            }
-            if (this.#callbacks && typeof this.#callbacks.onSetAnimationProgress === "function") {
-                this.#callbacks.onSetAnimationProgress(value);
-            }
-        });
-        this.#mainPanel.addControl(this.#slider);
+
+    /**
+     * Disposes the animation menu and releases all associated DOM resources.
+     * @public
+     * @returns {void}
+     */
+    dispose() {
+        this.#slider.removeEventListener("input", this.#handler.onSliderInput);
+        if (this.isVisible) {
+            this.#containerMain.remove();
+        }
+        this.#containerMain = null;
+        this.#containerButtons = null;
+        this.#slider = null;
     }
 
     /**
@@ -338,14 +423,12 @@ export class OpeningAnimationMenu {
 
     /**
      * Sets the animation progress value and updates the slider position.
-     * When called, the slider value is updated programmatically without triggering the slider's value change callback.
      * @public
      * @param {number} progress - The new animation progress value (between 0 and 1).
      */
     set animationProgress(progress) {
         this.#animationProgress = progress;
-        this.#isSettingSliderValue = true;
-        this.#slider.value = progress;
+        this.#slider.value = progress.toString();
     }
 
     /**
@@ -357,4 +440,20 @@ export class OpeningAnimationMenu {
         this.#animationState = state;
         this.#setPlayerButtonsState();
     }
+
+    /**
+     * ---------------------------
+     * Public getters
+     * ---------------------------
+     */
+
+    /**
+     * Returns whether the animation menu is currently visible in the DOM.
+     * @public
+     * @returns {boolean} True if the menu is visible, false otherwise.
+     */
+    get isVisible() {
+        const menuElement = this.#canvas.parentElement.querySelector(`div.animation-menu[data-animation-name="${this.#name}"]`);
+        return !!menuElement;
+    }
 }