@preference-sl/pref-viewer 2.11.0-beta.12 → 2.11.0-beta.14

package/package.json

@@ -1,53 +1,64 @@
 {
-  "name": "@preference-sl/pref-viewer",
-  "version": "2.11.0-beta.12",
-  "description": "Web Component to preview GLTF models with Babylon.js",
-  "author": "Alex Moreno Palacio <amoreno@preference.es>",
-  "scripts": {
-    "release": "standard-version --releaseCommitMessageFormat \"chore(release): {{currentTag}} [skip ci]\"",
-    "release:beta": "standard-version --prerelease beta --releaseCommitMessageFormat \"chore(release): {{currentTag}} [skip ci]\"",
-    "build": "esbuild src/index.js --bundle --platform=node --format=esm --outfile=dist/bundle.js --sourcemap",
-    "start": "npm run build && http-server -c-1 . -p 8080",
-    "test": "vitest"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://bitbucket.org/preferencesl/pref-viewer.git"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "license": "MIT",
-  "type": "module",
-  "main": "src/index.js",
-  "types": "index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./src/index.js",
-      "require": "./src/index.js"
+    "name": "@preference-sl/pref-viewer",
+    "version": "2.11.0-beta.14",
+    "description": "Web Component to preview GLTF models with Babylon.js",
+    "author": "Alex Moreno Palacio <amoreno@preference.es>",
+    "scripts": {
+        "build:prefweb": "webpack --config webpack.config.cjs --mode production",
+        "build:prefweb:dev": "webpack --config webpack.config.cjs --mode development",
+        "release": "standard-version --releaseCommitMessageFormat \"chore(release): {{currentTag}} [skip ci]\"",
+        "release:beta": "standard-version --prerelease beta --releaseCommitMessageFormat \"chore(release): {{currentTag}} [skip ci]\"",
+        "build": "esbuild src/index.js --bundle --platform=node --format=esm --outfile=dist/bundle.js --sourcemap",
+        "start": "npm run build && http-server -c-1 . -p 8080",
+        "test": "vitest"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://bitbucket.org/preferencesl/pref-viewer.git"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "license": "MIT",
+    "type": "module",
+    "main": "src/index.js",
+    "types": "index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./src/index.js",
+            "require": "./src/index.js"
+        }
+    },
+    "sideEffects": false,
+    "files": [
+        "src",
+        "index.d.ts"
+    ],
+    "dependencies": {
+        "@babylonjs/core": "^8.39.2",
+        "@babylonjs/loaders": "^8.39.2",
+        "@babylonjs/serializers": "^8.39.2",
+        "@panzoom/panzoom": "^4.6.0",
+        "babylonjs-gltf2interface": "^8.39.2",
+        "buffer": "^6.0.3",
+        "idb": "^8.0.3",
+        "is-svg": "^6.1.0",
+        "jszip": "^3.10.1",
+        "stream": "^0.0.3",
+        "string_decoder": "^1.3.0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.22.0",
+        "@babel/preset-env": "^7.22.0",
+        "babel-loader": "^9.2.1",
+        "clean-webpack-plugin": "^4.0.0",
+        "esbuild": "^0.25.10",
+        "http-server": "^14.1.1",
+        "jsdom": "^26.1.0",
+        "standard-version": "^9.5.0",
+        "terser-webpack-plugin": "^5.3.6",
+        "vitest": "^3.2.3",
+        "webpack": "^5.88.2",
+        "webpack-cli": "^5.1.4"
     }
-  },
-  "sideEffects": false,
-  "files": [
-    "src",
-    "index.d.ts"
-  ],
-  "dependencies": {
-    "@babylonjs/core": "^8.36.1",
-    "@babylonjs/gui": "^8.36.1",
-    "@babylonjs/loaders": "^8.36.1",
-    "@babylonjs/serializers": "^8.36.1",
-    "@panzoom/panzoom": "^4.6.0",
-    "babylonjs-gltf2interface": "^8.36.1",
-    "idb": "^8.0.3",
-    "is-svg": "^6.1.0",
-    "jszip": "^3.10.1"
-  },
-  "devDependencies": {
-    "esbuild": "^0.25.10",
-    "http-server": "^14.1.1",
-    "jsdom": "^26.1.0",
-    "standard-version": "^9.5.0",
-    "vitest": "^3.2.3"
-  }
 }

package/src/babylonjs-animation-controller.js

@@ -1,29 +1,35 @@
-import { Color3, HighlightLayer, Mesh, PickingInfo, PointerEventTypes, Scene } from "@babylonjs/core";
-import { AdvancedDynamicTexture } from "@babylonjs/gui";
+import { Color3, HighlightLayer, Mesh, PickingInfo, Scene } from "@babylonjs/core";
 import { PrefViewerColors } from "./styles.js";
 import OpeningAnimation from "./babylonjs-animation-opening.js";
 
 /**
- * BabylonJSAnimationController - Manages animation playback and interactive highlighting for model containers in Babylon.js scenes.
+ * BabylonJSAnimationController - Manages animation playback, highlighting, and interactive controls for animated nodes in Babylon.js scenes.
  *
- * Responsibilities:
+ * Summary:
+ *  This class detects, groups, and manages opening/closing animations for scene nodes, provides interactive highlighting of animated nodes and their meshes, and displays a menu for animation control. It is designed for integration with product configurators and interactive 3D applications using Babylon.js.
+ *
+ * Key features:
  *  - Detects and groups opening/closing animations in the scene.
  *  - Tracks animated transformation nodes and their relationships to meshes.
- *  - Highlights animated nodes and their child meshes when hovered.
- *  - Displays and disposes the animation control menu (GUI) for animated nodes.
- *  - Provides API for interaction and animation control.
+ *  - Highlights animated nodes and their child meshes on pointer hover.
+ *  - Displays and disposes the animation control menu for animated nodes.
+ *  - Provides public API for highlighting, showing the animation menu, and disposing resources.
+ *  - Cleans up all resources and observers to prevent memory leaks.
  *
  * Public Methods:
  *  - dispose(): Disposes all resources managed by the animation controller.
+ *  - hightlightMeshes(pickingInfo): Highlights meshes that are children of an animated node when hovered.
+ *  - hideMenu(): Hides and disposes the animation control menu if it exists.
+ *  - showMenu(pickingInfo): Displays the animation control menu for the animated node under the pointer.
  *
  * @class
  */
 export default class BabylonJSAnimationController {
     #scene = null;
+    #canvas = null;
     #animatedNodes = [];
     #highlightLayer = null;
     #highlightColor = Color3.FromHexString(PrefViewerColors.primary);
-    #advancedDynamicTexture = null;
     #openingAnimations = [];
 
     /**
@@ -32,8 +38,8 @@ export default class BabylonJSAnimationController {
      */
     constructor(scene) {
         this.#scene = scene;
+        this.#canvas = this.#scene._engine._renderingCanvas;
         this.#initializeAnimations();
-        this.#setupPointerObservers();
     }
 
     /**
@@ -41,11 +47,12 @@ export default class BabylonJSAnimationController {
      * @private
      */
     #initializeAnimations() {
+        this.hideMenu(); // Clean up any existing menus
         if (!this.#scene.animationGroups.length) {
             return;
         }
         this.#getAnimatedNodes();
-        this.#getOpeneingAnimations();
+        this.#getOpeningAnimations();
     }
 
     /**
@@ -72,7 +79,7 @@ export default class BabylonJSAnimationController {
      * @description
      * Uses animation group names with the pattern "animation_open_<name>" and "animation_close_<name>".
      */
-    #getOpeneingAnimations() {
+    #getOpeningAnimations() {
         const openings = {};
         this.#scene.animationGroups.forEach((animationGroup) => {
             const match = animationGroup.name.match(/^animation_(open|close)_(.+)$/);
@@ -123,12 +130,38 @@ export default class BabylonJSAnimationController {
         return nodeId;
     };
 
+    /**
+     * ---------------------------
+     * Public methods
+     * ---------------------------
+     */
+
+    /**
+     * Disposes all resources managed by the animation controller.
+     * Cleans up the highlight layer, animation menu, and internal animation/node lists.
+     * Should be called when the controller is no longer needed to prevent memory leaks.
+     * @public
+     */
+    dispose() {
+        if (this.#highlightLayer) {
+            this.#highlightLayer.dispose();
+            this.#highlightLayer = null;
+        }
+        this.hideMenu();
+        this.#animatedNodes = [];
+        this.#openingAnimations = [];
+        const observer = this.#scene.onPointerObservable._observers.find((observer) => observer.callback.name.includes("#onAnimationPointerObservable"));
+        if (observer) {
+            this.#scene.onPointerObservable.remove(observer);
+        }
+    }
+
     /**
      * Highlights meshes that are children of an animated node when hovered.
-     * @private
+     * @public
      * @param {PickingInfo} pickingInfo - Raycast info from pointer position.
      */
-    #hightlightMeshesForAnimation(pickingInfo) {
+    hightlightMeshes(pickingInfo) {
         if (!this.#highlightLayer) {
             this.#highlightLayer = new HighlightLayer("hl_animations", this.#scene);
         }
@@ -151,52 +184,27 @@ export default class BabylonJSAnimationController {
     }
 
     /**
-     * Sets up pointer observers to highlight animated nodes on hover and show the animation menu on click.
-     * @private
-     */
-    #setupPointerObservers() {
-        if (this.#openingAnimations.length === 0) {
-            return;
-        }
-        this.#scene.onPointerObservable.add(this.#onAnimationPointerObservable.bind(this));
-    }
-
-    /**
-     * Handles pointer events in the Babylon.js scene for animation interaction.
-     * On pointer move, highlights meshes belonging to animated nodes under the cursor.
-     * On pointer up (click), disposes any existing GUI and displays the animation control menu for the selected node.
-     *
-     * @private
-     * @param {PointerInfo} pointerInfo - The pointer event information from Babylon.js.
+     * Hides and disposes the animation control menu if it exists.
+     * @public
+     * @returns {void}
      */
-    #onAnimationPointerObservable(pointerInfo) {
-        if (pointerInfo.type === PointerEventTypes.POINTERMOVE) {
-            const pickingInfo = this.#scene.pick(pointerInfo.event.clientX, pointerInfo.event.clientY);
-            this.#hightlightMeshesForAnimation(pickingInfo);
-        }
-        if (pointerInfo.type === PointerEventTypes.POINTERUP) {
-            // Remove any previously created Babylon GUI
-            if (this.#advancedDynamicTexture) {
-                this.#advancedDynamicTexture.dispose();
-                this.#advancedDynamicTexture = null;
-            }
-            const pickingInfo = this.#scene.pick(pointerInfo.event.clientX, pointerInfo.event.clientY);
-            this.#showMenu(pickingInfo);
-        }
+    hideMenu() {
+        this.#openingAnimations.forEach((openingAnimation) => openingAnimation.hideControls());
+        this.#canvas.parentElement.querySelectorAll("div.pref-viewer-3d.animation-menu").forEach((menu) => menu.remove());
     }
 
     /**
      * Displays the animation control menu for the animated node under the pointer.
-     * @private
+     * @public
      * @param {PickingInfo} pickingInfo - Raycast info from pointer position.
-     * @description
-     * Creates the GUI if needed and invokes OpeningAnimation.showControls.
      */
-    #showMenu(pickingInfo) {
+    showMenu(pickingInfo) {
         if (!pickingInfo?.hit && !pickingInfo?.pickedMesh) {
             return;
         }
 
+        this.hideMenu();
+
         const nodeId = this.#getNodeAnimatedByMesh(pickingInfo.pickedMesh);
         if (!nodeId) {
             return;
@@ -205,32 +213,7 @@ export default class BabylonJSAnimationController {
         if (!openingAnimation) {
             return;
         }
-        if (!this.#advancedDynamicTexture) {
-            this.#advancedDynamicTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI_Animation");
-        }
-        openingAnimation.showControls(this.#advancedDynamicTexture);
-    }
 
-    /**
-     * Disposes all resources managed by the animation controller.
-     * Cleans up the highlight layer, GUI texture, and internal animation/node lists.
-     * Should be called when the controller is no longer needed to prevent memory leaks.
-     * @public
-     */
-    dispose() {
-        if (this.#highlightLayer) {
-            this.#highlightLayer.dispose();
-            this.#highlightLayer = null;
-        }
-        if (this.#advancedDynamicTexture) {
-            this.#advancedDynamicTexture.dispose();
-            this.#advancedDynamicTexture = null;
-        }
-        this.#animatedNodes = [];
-        this.#openingAnimations = [];
-        const observer = this.#scene.onPointerObservable._observers.find((observer) => observer.callback.name.includes("#onAnimationPointerObservable"));
-        if (observer) {
-            this.#scene.onPointerObservable.remove(observer);
-        }
+        openingAnimation.showControls(this.#canvas);
     }
 }

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

@@ -1,6 +1,5 @@
-import { AdvancedDynamicTexture, Button, Control, Image, Slider, StackPanel } from "@babylonjs/gui";
 import OpeningAnimation from "./babylonjs-animation-opening.js";
-import { PrefViewerColors } from "./styles.js";
+import { PrefViewer3DAnimationMenuStyles } from "./styles.js";
 
 /**
  * OpeningAnimationMenu - Manages and renders the animation control menu for opening/closing animations in a Babylon.js scene.
@@ -10,15 +9,23 @@ import { PrefViewerColors } from "./styles.js";
  *  - 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.
  *
  * 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.
+ *  - #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.
  *  - #getButtonByName(name): Retrieves a button control by its name.
  *  - #setButtonState(name, enabled, active, visible): Updates the visual state of a button.
@@ -30,7 +37,7 @@ import { PrefViewerColors } from "./styles.js";
  *  - #createSlider(): Creates and configures the animation progress slider.
  *
  * Usage Example:
- *  const menu = new OpeningAnimationMenu(adt, state, progress, loop, {
+ *  const menu = new OpeningAnimationMenu(name, canvas, state, progress, loop, {
  *      onOpen: () => { ... },
  *      onClose: () => { ... },
  *      onPause: () => { ... },
@@ -49,45 +56,37 @@ export default class OpeningAnimationMenu {
     #animationLoop = false;
     #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 = PrefViewerColors.primary;
-    #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;
 
     /**
      * 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 {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, callbacks) {
+        this.#name = name;
+        this.#canvas = canvas;
         this.#animationState = animationState;
         this.#animationProgress = animationProgress;
         this.#animationLoop = animationLoop;
@@ -101,19 +100,19 @@ export default class OpeningAnimationMenu {
      * @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.#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);
 
-        this.#advancedDynamicTexture.addControl(this.#mainPanel);
-        this.#mainPanel.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
-        this.#mainPanel.verticalAlignment = Control.VERTICAL_ALIGNMENT_BOTTOM;
+        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.#createButtons();
         this.#createSlider();
@@ -130,25 +129,21 @@ export default 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);
     }
 
     /**
@@ -157,19 +152,13 @@ export default 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);
     }
 
     /**
@@ -179,7 +168,7 @@ export default 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}"]`);
     }
 
     /**
@@ -195,8 +184,11 @@ export default class OpeningAnimationMenu {
         if (!button) {
             return;
         }
-        button.background = active ? this.#colorActive : enabled ? this.#colorEnabled : this.#colorDisabled;
-        button.isVisible = visible;
+        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);
     }
 
     /**
@@ -293,32 +285,45 @@ export default class OpeningAnimationMenu {
      * @private
      */
     #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) => {
+        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.#slider.addEventListener("input", (event) => {
             if (this.#isSettingSliderValue) {
                 this.#isSettingSliderValue = false;
                 return;
             }
             if (this.#callbacks && typeof this.#callbacks.onSetAnimationProgress === "function") {
-                this.#callbacks.onSetAnimationProgress(value);
+                this.#callbacks.onSetAnimationProgress(event.target.value);
             }
         });
-        this.#mainPanel.addControl(this.#slider);
+
+        this.#containerMain.appendChild(this.#slider);
+    }
+
+    /**
+     * ---------------------------
+     * Public methods
+     * ---------------------------
+     */
+
+    /**
+     * Disposes the animation menu and releases all associated DOM resources.
+     * @public
+     * @returns {void}
+     */
+    dispose() {
+        if (this.isVisible) {
+            this.#containerMain.remove();
+        }
+        this.#containerMain = null;
+        this.#containerButtons = null;
+        this.#slider = null;
     }
 
     /**
@@ -358,4 +363,20 @@ export default 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;
+    }
 }