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

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@preference-sl/pref-viewer",
-  "version": "2.11.0-beta.1",
+  "version": "2.11.0-beta.11",
   "description": "Web Component to preview GLTF models with Babylon.js",
   "author": "Alex Moreno Palacio <amoreno@preference.es>",
   "scripts": {
+    "copy-css": "cpx \"src/css/**/*\" dist/css/",
     "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 --outfile=dist/bundle.js --sourcemap",
+    "build": "npm run copy-css && 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"
   },
@@ -30,19 +31,22 @@
   "sideEffects": false,
   "files": [
     "src",
-    "src/models",
+    "src/css",
     "index.d.ts"
   ],
   "dependencies": {
-    "@babylonjs/core": "^8.31.3",
-    "@babylonjs/loaders": "^8.31.3",
-    "@babylonjs/serializers": "^8.31.3",
+    "@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.31.3",
+    "babylonjs-gltf2interface": "^8.36.1",
     "idb": "^8.0.3",
-    "is-svg": "^6.1.0"
+    "is-svg": "^6.1.0",
+    "jszip": "^3.10.1"
   },
   "devDependencies": {
+    "cpx": "^1.5.0",
     "esbuild": "^0.25.10",
     "http-server": "^14.1.1",
     "jsdom": "^26.1.0",

package/src/babylonjs-animation-controller.js

@@ -0,0 +1,235 @@
+import { Color3, HighlightLayer, Mesh, PickingInfo, PointerEventTypes, Scene } from "@babylonjs/core";
+import { AdvancedDynamicTexture } from "@babylonjs/gui";
+import { OpeningAnimation } from "./babylonjs-animation-opening.js";
+
+/**
+ * BabylonJSAnimationController - Manages animation playback and interactive highlighting for model containers in Babylon.js scenes.
+ *
+ * Responsibilities:
+ *  - 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.
+ *
+ * Public Methods:
+ *  - dispose(): Disposes all resources managed by the animation controller.
+ *
+ * @class
+ */
+export default class BabylonJSAnimationController {
+    #scene = null;
+    #animatedNodes = [];
+    #highlightLayer = null;
+    #highlightColor = new Color3(0, 1, 0); // Color para resaltar los elementos animados (Verde)
+    #advancedDynamicTexture = null;
+    #openingAnimations = [];
+
+    /**
+     * Creates a new BabylonJSAnimationController for a Babylon.js scene.
+     * @param {Scene} scene - The Babylon.js scene instance.
+     */
+    constructor(scene) {
+        this.#scene = scene;
+        this.#initializeAnimations();
+        this.#setupPointerObservers();
+    }
+
+    /**
+     * Detects and stores animatable objects and animated nodes in the scene.
+     * @private
+     */
+    #initializeAnimations() {
+        if (!this.#scene.animationGroups.length) {
+            return;
+        }
+        this.#getAnimatedNodes();
+        this.#getOpeneingAnimations();
+    }
+
+    /**
+     * Collects the IDs of all nodes targeted by any animation group in the scene.
+     * @private
+     */
+    #getAnimatedNodes() {
+        this.#scene.animationGroups.forEach((animationGroup) => {
+            animationGroup.stop();
+            if (!animationGroup._targetedAnimations.length) {
+                return;
+            }
+            animationGroup._targetedAnimations.forEach((targetedAnimation) => {
+                if (!this.#animatedNodes.includes(targetedAnimation.target.id)) {
+                    this.#animatedNodes.push(targetedAnimation.target.id);
+                }
+            });
+        });
+    }
+
+    /**
+     * Groups opening and closing animations by node name and creates OpeningAnimation instances.
+     * @private
+     * @description
+     * Uses animation group names with the pattern "animation_open_<name>" and "animation_close_<name>".
+     */
+    #getOpeneingAnimations() {
+        const openings = {};
+        this.#scene.animationGroups.forEach((animationGroup) => {
+            const match = animationGroup.name.match(/^animation_(open|close)_(.+)$/);
+            if (!match) {
+                return;
+            }
+            const [, type, openingName] = match;
+            if (!openings[openingName]) {
+                openings[openingName] = { name: openingName, animationOpen: null, animationClose: null };
+            }
+            if (type === "open") {
+                openings[openingName].animationOpen = animationGroup;
+            } else if (type === "close") {
+                openings[openingName].animationClose = animationGroup;
+            }
+        });
+
+        Object.values(openings).forEach((opening) => {
+            this.#openingAnimations.push(new OpeningAnimation(opening.name, opening.animationOpen, opening.animationClose));
+        });
+    }
+
+    /**
+     * Finds the OpeningAnimation instance associated with a given node ID.
+     * @private
+     * @param {string} nodeId - The node identifier.
+     * @returns {OpeningAnimation|null} The matching OpeningAnimation instance or null.
+     */
+    #getOpeningAnimationByNode(nodeId) {
+        return this.#openingAnimations.find((openingAnimation) => openingAnimation.isAnimationForNode(nodeId));
+    }
+
+    /**
+     * Determines if a mesh belongs to a node targeted by an animation.
+     * @private
+     * @param {Mesh} mesh - The mesh to check.
+     * @returns {string|false} The animated node ID if found, otherwise false.
+     */
+    #getNodeAnimatedByMesh = function (mesh) {
+        let nodeId = false;
+        let node = mesh;
+        while (node.parent !== null && !nodeId) {
+            node = node.parent;
+            if (this.#animatedNodes.includes(node.id)) {
+                nodeId = node.id;
+            }
+        }
+        return nodeId;
+    };
+
+    /**
+     * Highlights meshes that are children of an animated node when hovered.
+     * @private
+     * @param {PickingInfo} pickingInfo - Raycast info from pointer position.
+     */
+    #hightlightMeshesForAnimation(pickingInfo) {
+        if (!this.#highlightLayer) {
+            this.#highlightLayer = new HighlightLayer("hl_animations", this.#scene);
+        }
+
+        this.#highlightLayer.removeAllMeshes();
+        if (!pickingInfo?.hit && !pickingInfo?.pickedMesh) {
+            return;
+        }
+
+        const nodeId = this.#getNodeAnimatedByMesh(pickingInfo.pickedMesh);
+        if (!nodeId) {
+            return;
+        }
+
+        const transformNode = this.#scene.getTransformNodeByID(nodeId);
+        const nodeMeshes = transformNode.getChildMeshes();
+        if (nodeMeshes.length) {
+            nodeMeshes.forEach((mesh) => this.#highlightLayer.addMesh(mesh, this.#highlightColor));
+        }
+    }
+
+    /**
+     * 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.
+     */
+    #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);
+        }
+    }
+
+    /**
+     * Displays the animation control menu for the animated node under the pointer.
+     * @private
+     * @param {PickingInfo} pickingInfo - Raycast info from pointer position.
+     * @description
+     * Creates the GUI if needed and invokes OpeningAnimation.showControls.
+     */
+    #showMenu(pickingInfo) {
+        if (!pickingInfo?.hit && !pickingInfo?.pickedMesh) {
+            return;
+        }
+
+        const nodeId = this.#getNodeAnimatedByMesh(pickingInfo.pickedMesh);
+        if (!nodeId) {
+            return;
+        }
+        const openingAnimation = this.#getOpeningAnimationByNode(nodeId);
+        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);
+        }
+    }
+}

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

@@ -0,0 +1,360 @@
+import { AdvancedDynamicTexture, Button, Control, Image, Slider, StackPanel } from "@babylonjs/gui";
+import { OpeningAnimation } from "./babylonjs-animation-opening.js";
+
+/**
+ * OpeningAnimationMenu - Manages and renders the 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).
+ *  - 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.
+ *
+ * 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.
+ *
+ * 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.
+ *  - #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.
+ *  - #getPlayerButtonsState(): Returns the state (enabled, active, visible) for playback control buttons.
+ *  - #getLoopButtonsState(): Returns the state for loop control buttons.
+ *  - #getButtonsState(): Combines player and loop button states.
+ *  - #setPlayerButtonsState(): Updates all playback control buttons.
+ *  - #setLoopButtonsState(): Updates all loop control buttons.
+ *  - #createSlider(): Creates and configures the animation progress slider.
+ *
+ * Usage Example:
+ *  const menu = new OpeningAnimationMenu(adt, state, progress, loop, {
+ *      onOpen: () => { ... },
+ *      onClose: () => { ... },
+ *      onPause: () => { ... },
+ *      onGoToOpened: () => { ... },
+ *      onGoToClosed: () => { ... },
+ *      onToggleLoop: () => { ... },
+ *      onSetAnimationProgress: (progress) => { ... }
+ *  });
+ *  menu.animationState = OpeningAnimation.states.opening;
+ *  menu.animationProgress = 0.5;
+ *  menu.animationLoop = true;
+ */
+export class OpeningAnimationMenu {
+    #animationState = OpeningAnimation.states.closed;
+    #animationProgress = 0;
+    #animationLoop = false;
+    #callbacks = null;
+
+    // GUI Elements
+    #advancedDynamicTexture = null;
+    #mainPanel = null;
+    #secondaryPanel = 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>`,
+    };
+
+    #isSettingSliderValue = false;
+
+    /**
+     * Constructs the OpeningAnimationMenu and initializes the menu UI.
+     * @param {AdvancedDynamicTexture} advancedDynamicTexture - Babylon.js GUI texture for rendering controls.
+     * @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;
+        this.#animationState = animationState;
+        this.#animationProgress = animationProgress;
+        this.#animationLoop = animationLoop;
+        this.#callbacks = callbacks;
+
+        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.
+     * @private
+     * @param {string} name - Button identifier.
+     * @param {string} imageURL - SVG image data URL for the button icon.
+     * @param {boolean} enabled - Whether the button is enabled.
+     * @param {boolean} active - Whether the button is visually active.
+     * @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(() => {
+            if (callback && typeof callback === "function") {
+                callback();
+            }
+        });
+        this.#secondaryPanel.addControl(button);
+    }
+
+    /**
+     * Creates all control buttons and sets their initial states.
+     * @private
+     */
+    #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`;
+    }
+
+    /**
+     * Retrieves a button control by its name.
+     * @private
+     * @param {string} name - Button identifier.
+     * @returns {Button|null} The button control or null if not found.
+     */
+    #getButtonByName(name) {
+        return this.#advancedDynamicTexture.getControlByName(`button_animation_${name}`);
+    }
+
+    /**
+     * Updates the visual state of a button (enabled, active, visible).
+     * @private
+     * @param {string} name - Button identifier.
+     * @param {boolean} enabled
+     * @param {boolean} active
+     * @param {boolean} visible
+     */
+    #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;
+    }
+
+    /**
+     * Returns the state (enabled, active, visible) for playback control buttons.
+     * @private
+     * @returns {object}
+     */
+    #getPlayerButtonsState() {
+        const buttonsState = {
+            opened: {
+                enabled: this.#animationState !== OpeningAnimation.states.opened,
+                active: false,
+                visible: true,
+            },
+            open: {
+                enabled: this.#animationState !== OpeningAnimation.states.opened && this.#animationState !== OpeningAnimation.states.opening,
+                active: this.#animationState === OpeningAnimation.states.opening,
+                visible: true,
+            },
+            pause: {
+                enabled: this.#animationState !== OpeningAnimation.states.paused && this.#animationState !== OpeningAnimation.states.closed && this.#animationState !== OpeningAnimation.states.opened,
+                active: this.#animationState === OpeningAnimation.states.paused,
+                visible: true,
+            },
+            close: {
+                enabled: this.#animationState !== OpeningAnimation.states.closed && this.#animationState !== OpeningAnimation.states.closing,
+                active: this.#animationState === OpeningAnimation.states.closing,
+                visible: true,
+            },
+            closed: {
+                enabled: this.#animationState !== OpeningAnimation.states.closed,
+                active: false,
+                visible: true,
+            },
+        };
+        return buttonsState;
+    }
+
+    /**
+     * 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;
+    }
+
+    /**
+     * Combines player and loop button states.
+     * @private
+     * @returns {object}
+     */
+    #getButtonsState() {
+        return Object.assign(this.#getPlayerButtonsState(), this.#getLoopButtonsState());
+    }
+
+    /**
+     * Updates all playback control buttons according to current animation state.
+     * @private
+     */
+    #setPlayerButtonsState() {
+        const buttonsState = this.#getPlayerButtonsState();
+        this.#setButtonState("opened", buttonsState.opened.enabled, buttonsState.opened.active, buttonsState.opened.visible);
+        this.#setButtonState("open", buttonsState.open.enabled, buttonsState.open.active, buttonsState.open.visible);
+        this.#setButtonState("pause", buttonsState.pause.enabled, buttonsState.pause.active, buttonsState.pause.visible);
+        this.#setButtonState("close", buttonsState.close.enabled, buttonsState.close.active, buttonsState.close.visible);
+        this.#setButtonState("closed", buttonsState.closed.enabled, buttonsState.closed.active, buttonsState.closed.visible);
+    }
+
+    /**
+     * 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);
+    }
+
+    /**
+     * Creates and configures the animation progress slider.
+     * @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) => {
+            if (this.#isSettingSliderValue) {
+                this.#isSettingSliderValue = false;
+                return;
+            }
+            if (this.#callbacks && typeof this.#callbacks.onSetAnimationProgress === "function") {
+                this.#callbacks.onSetAnimationProgress(value);
+            }
+        });
+        this.#mainPanel.addControl(this.#slider);
+    }
+
+    /**
+     * ---------------------------
+     * Public setters
+     * ---------------------------
+     */
+
+    /**
+     * Sets the animation loop mode and updates loop button states.
+     * @public
+     * @param {boolean} loop
+     */
+    set animationLoop(loop) {
+        this.#animationLoop = loop;
+        this.#setLoopButtonsState();
+    }
+
+    /**
+     * 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;
+    }
+
+    /**
+     * Sets the animation state and updates playback button states.
+     * @public
+     * @param {number} state - The new animation state (enum).
+     */
+    set animationState(state) {
+        this.#animationState = state;
+        this.#setPlayerButtonsState();
+    }
+}