chart-preview 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # chart-preview
 
+## 1.3.0
+
+### Minor Changes
+
+- fe294b3: Add manual resize functionality to ChartPreview and trigger resize in ChartPreviewPlayer on fullscreen change
+
+## 1.2.0
+
+### Minor Changes
+
+- 95d0918: Add support for animated note textures and improve fullscreen handling
+
 ## 1.1.0
 
 ### Minor Changes

package/README.md

@@ -13,6 +13,7 @@ A 3D chart preview player for rhythm games like Clone Hero. Renders chart files
 - **Web Component** that can be dropped into any project
 - **Multiple instance support** - run several players simultaneously
 - **Simple URL-based loading** - just provide a URL to a .sng file
+- **Animated note textures** - supports animated WebP textures
 
 ## Installation
 
@@ -102,6 +103,7 @@ import {
   ChartPreview,
   ChartPreviewPlayer,
   getInstrumentType,
+  areAnimationsSupported,
 } from "chart-preview";
 import { parseChartFile } from "scan-chart";
 
@@ -109,7 +111,9 @@ import { parseChartFile } from "scan-chart";
 const parsedChart = parseChartFile(chartData, "chart", modifiers);
 
 // 2. Load textures (cache and reuse for same instrument type)
-const textures = await ChartPreview.loadTextures(getInstrumentType("guitar"));
+const textures = await ChartPreview.loadTextures(getInstrumentType("guitar"), {
+  animationsEnabled: areAnimationsSupported(),
+});
 
 // 3. Load the chart
 await player.loadChart({
@@ -365,6 +369,10 @@ interface LoadFromUrlConfig {
   difficulty: Difficulty;
   /** Initial seek position (0-1). Defaults to 0 */
   initialSeekPercent?: number;
+  /** AbortSignal to cancel the fetch operation */
+  signal?: AbortSignal;
+  /** Whether to enable animated textures. Defaults to true */
+  animationsEnabled?: boolean;
 }
 ```
 
@@ -380,6 +388,8 @@ interface LoadFromSngFileConfig {
   difficulty: Difficulty;
   /** Initial seek position (0-1). Defaults to 0 */
   initialSeekPercent?: number;
+  /** Whether to enable animated textures. Defaults to true */
+  animationsEnabled?: boolean;
 }
 ```
 
@@ -395,6 +405,8 @@ interface LoadFromChartFilesConfig {
   difficulty: Difficulty;
   /** Initial seek position (0-1). Defaults to 0 */
   initialSeekPercent?: number;
+  /** Whether to enable animated textures. Defaults to true */
+  animationsEnabled?: boolean;
 }
 ```
 
@@ -444,10 +456,17 @@ interface ChartPreviewPlayerConfig {
 For advanced use cases, you can use the `ChartPreview` class directly:
 
 ```typescript
-import { ChartPreview, getInstrumentType } from "chart-preview";
+import {
+  ChartPreview,
+  getInstrumentType,
+  areAnimationsSupported,
+} from "chart-preview";
 
 // Load textures (cache for reuse)
-const textures = await ChartPreview.loadTextures(getInstrumentType("guitar"));
+// Optionally disable animations for better performance
+const textures = await ChartPreview.loadTextures(getInstrumentType("guitar"), {
+  animationsEnabled: areAnimationsSupported(), // or set to false to always use static textures
+});
 
 // Create preview
 const preview = await ChartPreview.create({
@@ -485,8 +504,15 @@ import {
   prepareChartData,
   findChartFile,
   findAudioFiles,
+  isVideoFile,
+  areAnimationsSupported,
 } from "chart-preview";
 
+// Check if animated textures are supported (ImageDecoder API)
+if (areAnimationsSupported()) {
+  console.log("Animated note textures will be used");
+}
+
 // Fetch and extract a .sng file
 const sngData = await fetchSngFile("https://example.com/chart.sng");
 const files = await extractSngFile(sngData);
@@ -495,6 +521,9 @@ const files = await extractSngFile(sngData);
 const chartFile = findChartFile(files); // Returns .chart or .mid file
 const audioFiles = findAudioFiles(files); // Returns audio file data
 
+// Check if a file is a video (to exclude from processing)
+const nonVideoFiles = files.filter((f) => !isVideoFile(f.fileName));
+
 // Prepare all data for playback
 const preparedData = await prepareChartData(files, "guitar", "expert");
 ```
@@ -528,13 +557,14 @@ Requires support for:
 - Web Audio API
 - WebGL
 
+**Animated Textures:** Requires the ImageDecoder API (Chromium-based browsers only: Chrome, Edge, Opera). Use `areAnimationsSupported()` to check. Other browsers fall back to static textures.
+
 ## Dependencies
 
 - `three` - 3D rendering
 - `scan-chart` - Chart parsing
 - `parse-sng` - .sng file extraction
 - `eventemitter3` - Event handling
-- `lodash` - Utility functions
 
 ## License
 

package/dist/index.d.ts

@@ -3,32 +3,41 @@ export { Difficulty, Instrument, InstrumentType, getInstrumentType, instrumentTy
 import * as THREE from 'three';
 
 type ParsedChart = ReturnType<typeof parseChartFile>;
+/**
+ * Check if animations are supported on this browser.
+ * Use this to conditionally enable/disable animation features.
+ */
+declare function areAnimationsSupported(): boolean;
 /**
  * Manages an animated WebP texture using the ImageDecoder API.
+ * Pre-decodes all frames during initialization for optimal performance.
  * Falls back to a static texture if ImageDecoder is not supported.
  */
 declare class AnimatedTexture {
     private canvas;
     private ctx;
     texture: THREE.CanvasTexture;
-    private decoder;
     private frameIndex;
     private frameCount;
     private lastFrameTime;
     private frameDurations;
+    /** Pre-decoded frames stored as ImageBitmap for fast synchronous access */
+    private frameCache;
     private isAnimated;
     private disposed;
     private constructor();
     /**
      * Creates an AnimatedTexture from a URL.
      * Uses ImageDecoder for animation if available, otherwise loads as static texture.
+     * Pre-decodes all frames during initialization for optimal render performance.
      */
     static create(url: string): Promise<AnimatedTexture | THREE.Texture>;
     /**
      * Updates the texture to the current animation frame based on elapsed time.
-     * Call this each frame in the render loop.
+     * This method is SYNCHRONOUS for optimal render performance - all frames
+     * are pre-decoded during initialization.
      */
-    tick(): Promise<void>;
+    tick(): void;
     /**
      * Disposes of resources used by this animated texture.
      */
@@ -38,7 +47,10 @@ declare class AnimatedTexture {
 declare class AnimatedTextureManager {
     private animatedTextures;
     register(texture: AnimatedTexture | THREE.Texture): void;
-    tick(): Promise<void>;
+    /**
+     * Updates all animated textures. This is now SYNCHRONOUS for optimal performance.
+     */
+    tick(): void;
     dispose(): void;
 }
 /**
@@ -168,6 +180,11 @@ declare class ChartPreview {
     get chartCurrentTimeMs(): number;
     /** Total duration in milliseconds */
     get chartEndTimeMs(): number;
+    /**
+     * Manually triggers a resize of the camera and renderer.
+     * Call this when the container size changes (e.g., entering/exiting fullscreen).
+     */
+    resize(): void;
     /**
      * Cleans up all resources. Call this when discarding the preview.
      * The preview should not be used after calling dispose().
@@ -177,12 +194,22 @@ declare class ChartPreview {
     private addStrikelineToScene;
     private animateFrame;
 }
+interface LoadTexturesOptions {
+    /**
+     * Whether to enable animated textures.
+     * When true (default), uses ImageDecoder API for animated WebP if available.
+     * When false, always loads static textures for better performance.
+     * Use `areAnimationsSupported()` to check if animations are supported on the current browser.
+     */
+    animationsEnabled?: boolean;
+}
 /**
  * Loads all required textures for the chart preview.
  * @param instrumentType The type of instrument to load textures for
+ * @param options Optional configuration for texture loading
  * @returns An object containing highway, strikeline, note textures, and animated texture manager
  */
-declare function loadTextures(instrumentType: InstrumentType): Promise<{
+declare function loadTextures(instrumentType: InstrumentType, options?: LoadTexturesOptions): Promise<{
     highwayTexture: THREE.Texture;
     strikelineTexture: THREE.Texture;
     noteTextures: Map<ExtendedNoteType, Map<number, THREE.Texture>>;
@@ -203,6 +230,11 @@ interface LoadFromUrlConfig {
     initialSeekPercent?: number;
     /** AbortSignal to cancel the fetch operation */
     signal?: AbortSignal;
+    /**
+     * Whether to enable animated textures. Defaults to true.
+     * Set to false for better performance or when animations aren't supported.
+     */
+    animationsEnabled?: boolean;
 }
 /**
  * Configuration for loading a chart from raw .sng file data.
@@ -216,6 +248,11 @@ interface LoadFromSngFileConfig {
     difficulty: Difficulty;
     /** Initial seek position as a percentage (0-1). Defaults to 0. */
     initialSeekPercent?: number;
+    /**
+     * Whether to enable animated textures. Defaults to true.
+     * Set to false for better performance or when animations aren't supported.
+     */
+    animationsEnabled?: boolean;
 }
 /**
  * Configuration for loading a chart from individual chart and audio files.
@@ -232,6 +269,11 @@ interface LoadFromChartFilesConfig {
     difficulty: Difficulty;
     /** Initial seek position as a percentage (0-1). Defaults to 0. */
     initialSeekPercent?: number;
+    /**
+     * Whether to enable animated textures. Defaults to true.
+     * Set to false for better performance or when animations aren't supported.
+     */
+    animationsEnabled?: boolean;
 }
 /**
  * Result of preparing chart data for playback.
@@ -292,12 +334,13 @@ declare function isVideoFile(fileName: string): boolean;
  * @param instrument - The instrument to display
  * @param difficulty - The difficulty level to display
  * @param initialSeekPercent - Initial seek position (0-1)
+ * @param textureOptions - Options for texture loading (e.g., animations enabled)
  * @returns Prepared chart data ready for the player
  */
 declare function prepareChartData(files: {
     fileName: string;
     data: Uint8Array;
-}[], instrument: Instrument, difficulty: Difficulty, initialSeekPercent?: number): Promise<PreparedChartData>;
+}[], instrument: Instrument, difficulty: Difficulty, initialSeekPercent?: number, textureOptions?: LoadTexturesOptions): Promise<PreparedChartData>;
 /**
  * Fetches a .sng file from a URL.
  *
@@ -533,4 +576,4 @@ declare global {
     }
 }
 
-export { ChartPreview, ChartPreviewConfig, ChartPreviewEvents, ChartPreviewPlayer, ChartPreviewPlayerConfig, LoadFromChartFilesConfig, LoadFromSngFileConfig, LoadFromUrlConfig, ParsedChart, PlayerState, PreparedChartData, extractSngFile, fetchSngFile, findAudioFiles, findChartFile, isVideoFile, prepareChartData };
+export { ChartPreview, ChartPreviewConfig, ChartPreviewEvents, ChartPreviewPlayer, ChartPreviewPlayerConfig, LoadFromChartFilesConfig, LoadFromSngFileConfig, LoadFromUrlConfig, LoadTexturesOptions, ParsedChart, PlayerState, PreparedChartData, areAnimationsSupported, extractSngFile, fetchSngFile, findAudioFiles, findChartFile, isVideoFile, prepareChartData };

package/dist/index.js

@@ -31,6 +31,7 @@ var src_exports = {};
 __export(src_exports, {
   ChartPreview: () => ChartPreview,
   ChartPreviewPlayer: () => ChartPreviewPlayer,
+  areAnimationsSupported: () => areAnimationsSupported,
   extractSngFile: () => extractSngFile,
   fetchSngFile: () => fetchSngFile,
   findAudioFiles: () => findAudioFiles,
@@ -77,13 +78,17 @@ var NOTE_SPAN_WIDTH = 0.95;
 function isImageDecoderSupported() {
   return typeof ImageDecoder !== "undefined";
 }
+function areAnimationsSupported() {
+  return isImageDecoderSupported();
+}
 var AnimatedTexture = class {
   constructor(width, height) {
-    this.decoder = null;
     this.frameIndex = 0;
     this.frameCount = 0;
     this.lastFrameTime = 0;
     this.frameDurations = [];
+    /** Pre-decoded frames stored as ImageBitmap for fast synchronous access */
+    this.frameCache = [];
     this.isAnimated = false;
     this.disposed = false;
     this.canvas = document.createElement("canvas");
@@ -96,11 +101,11 @@ var AnimatedTexture = class {
   /**
    * Creates an AnimatedTexture from a URL.
    * Uses ImageDecoder for animation if available, otherwise loads as static texture.
+   * Pre-decodes all frames during initialization for optimal render performance.
    */
   static async create(url) {
     if (!isImageDecoderSupported()) {
-      const textureLoader = new THREE.TextureLoader();
-      return textureLoader.loadAsync(url);
+      return loadStaticTexture(url);
     }
     try {
       const response = await fetch(url);
@@ -110,8 +115,7 @@ var AnimatedTexture = class {
       const contentType = response.headers.get("content-type") || "image/webp";
       const isSupported = await ImageDecoder.isTypeSupported(contentType);
       if (!isSupported) {
-        const textureLoader = new THREE.TextureLoader();
-        return textureLoader.loadAsync(url);
+        return loadStaticTexture(url);
       }
       const decoder = new ImageDecoder({
         data: response.body,
@@ -142,40 +146,51 @@ var AnimatedTexture = class {
         firstFrame.displayWidth,
         firstFrame.displayHeight
       );
-      animTexture.ctx.drawImage(firstFrame, 0, 0);
-      animTexture.texture.needsUpdate = true;
-      animTexture.decoder = decoder;
-      animTexture.frameCount = frameCount;
-      animTexture.isAnimated = true;
       animTexture.frameDurations = [];
+      animTexture.frameCache = [];
       for (let i = 0; i < frameCount; i++) {
         try {
           const frameResult = await decoder.decode({ frameIndex: i });
-          const durationMs = (frameResult.image.duration ?? 1e5) / 1e3;
+          const videoFrame = frameResult.image;
+          const bitmap = await createImageBitmap(videoFrame);
+          animTexture.frameCache.push(bitmap);
+          const durationMs = (videoFrame.duration ?? 1e5) / 1e3;
           animTexture.frameDurations.push(durationMs);
-          frameResult.image.close();
+          videoFrame.close();
         } catch {
           animTexture.frameDurations.push(100);
+          if (animTexture.frameCache.length > 0) {
+            animTexture.frameCache.push(
+              animTexture.frameCache[animTexture.frameCache.length - 1]
+            );
+          }
         }
       }
-      firstFrame.close();
+      if (animTexture.frameCache.length > 0) {
+        animTexture.ctx.drawImage(animTexture.frameCache[0], 0, 0);
+        animTexture.texture.needsUpdate = true;
+      }
+      animTexture.frameCount = animTexture.frameCache.length;
+      animTexture.isAnimated = animTexture.frameCount > 1;
       animTexture.lastFrameTime = performance.now();
+      firstFrame.close();
+      decoder.close();
       return animTexture;
     } catch (error) {
       console.warn(
         "Failed to load animated texture, falling back to static:",
         error
       );
-      const textureLoader = new THREE.TextureLoader();
-      return textureLoader.loadAsync(url);
+      return loadStaticTexture(url);
     }
   }
   /**
    * Updates the texture to the current animation frame based on elapsed time.
-   * Call this each frame in the render loop.
+   * This method is SYNCHRONOUS for optimal render performance - all frames
+   * are pre-decoded during initialization.
    */
-  async tick() {
-    if (!this.isAnimated || !this.decoder || this.disposed) {
+  tick() {
+    if (!this.isAnimated || this.disposed || this.frameCache.length === 0) {
       return;
     }
     const now = performance.now();
@@ -184,15 +199,11 @@ var AnimatedTexture = class {
     if (elapsed >= currentFrameDuration) {
       this.frameIndex = (this.frameIndex + 1) % this.frameCount;
       this.lastFrameTime = now;
-      try {
-        const result = await this.decoder.decode({
-          frameIndex: this.frameIndex
-        });
+      const frame = this.frameCache[this.frameIndex];
+      if (frame) {
         this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this.ctx.drawImage(result.image, 0, 0);
+        this.ctx.drawImage(frame, 0, 0);
         this.texture.needsUpdate = true;
-        result.image.close();
-      } catch {
       }
     }
   }
@@ -201,13 +212,35 @@ var AnimatedTexture = class {
    */
   dispose() {
     this.disposed = true;
-    if (this.decoder) {
-      this.decoder.close();
-      this.decoder = null;
+    for (const bitmap of this.frameCache) {
+      bitmap.close();
     }
+    this.frameCache = [];
     this.texture.dispose();
   }
 };
+async function loadStaticTexture(url) {
+  const textureLoader = new THREE.TextureLoader();
+  try {
+    const texture = await textureLoader.loadAsync(url);
+    texture.colorSpace = THREE.SRGBColorSpace;
+    return texture;
+  } catch (error) {
+    console.warn(`Failed to load static texture from ${url}:`, error);
+    return createPlaceholderTexture();
+  }
+}
+function createPlaceholderTexture() {
+  const canvas = document.createElement("canvas");
+  canvas.width = 32;
+  canvas.height = 32;
+  const ctx = canvas.getContext("2d");
+  ctx.fillStyle = "#FF00FF";
+  ctx.fillRect(0, 0, 32, 32);
+  const texture = new THREE.CanvasTexture(canvas);
+  texture.colorSpace = THREE.SRGBColorSpace;
+  return texture;
+}
 var AnimatedTextureManager = class {
   constructor() {
     this.animatedTextures = [];
@@ -217,8 +250,13 @@ var AnimatedTextureManager = class {
       this.animatedTextures.push(texture);
     }
   }
-  async tick() {
-    await Promise.all(this.animatedTextures.map((t) => t.tick()));
+  /**
+   * Updates all animated textures. This is now SYNCHRONOUS for optimal performance.
+   */
+  tick() {
+    for (const texture of this.animatedTextures) {
+      texture.tick();
+    }
   }
   dispose() {
     for (const texture of this.animatedTextures) {
@@ -371,6 +409,17 @@ var _ChartPreview = class {
   get chartEndTimeMs() {
     return this.audioManager.chartEndTimeMs;
   }
+  /**
+   * Manually triggers a resize of the camera and renderer.
+   * Call this when the container size changes (e.g., entering/exiting fullscreen).
+   */
+  resize() {
+    this.camera.triggerResize();
+    this.renderer.triggerResize();
+    if (this.paused) {
+      this.animateFrame(false);
+    }
+  }
   /**
    * Cleans up all resources. Call this when discarding the preview.
    * The preview should not be used after calling dispose().
@@ -458,6 +507,10 @@ var ChartCamera = class extends THREE.PerspectiveCamera {
     this.aspect = width / height;
     this.updateProjectionMatrix();
   }
+  /** Manually trigger a resize update */
+  triggerResize() {
+    this.onResize();
+  }
   dispose() {
     window.removeEventListener("resize", this.resizeListener);
     this.clear();
@@ -480,6 +533,10 @@ var ChartRenderer = class extends THREE.WebGLRenderer {
     const height = this.divContainer.offsetHeight ?? window.innerHeight;
     this.setSize(width, height);
   }
+  /** Manually trigger a resize update */
+  triggerResize() {
+    this.onResize();
+  }
   dispose() {
     window.removeEventListener("resize", this.resizeListener);
     super.dispose();
@@ -821,11 +878,16 @@ var NotesManager = class {
     }
     for (let i = maxNoteEventIndex + 1; this.noteEvents[i] && this.noteEvents[i].msTime < renderEndTimeMs; i++) {
       const note = this.noteEvents[i];
+      const material = this.noteMaterials.get(note.type)?.get(note.flags);
+      if (!material) {
+        console.warn(
+          `Missing texture for note type ${note.type} with flags ${note.flags}`
+        );
+        continue;
+      }
       const noteGroup = new THREE.Group();
       const scale = note.type === import_scan_chart.noteTypes.kick ? 0.045 : note.type === import_scan_chart.noteTypes.open && this.instrumentType === import_scan_chart.instrumentTypes.sixFret ? 0.04 : SCALE;
-      const sprite = new THREE.Sprite(
-        this.noteMaterials.get(note.type).get(note.flags)
-      );
+      const sprite = new THREE.Sprite(material);
       noteGroup.add(sprite);
       sprite.center = new THREE.Vector2(
         note.type === import_scan_chart.noteTypes.kick ? 0.62 : 0.5,
@@ -902,12 +964,16 @@ var EventSequence = class {
     return earliestActiveEventIndex === null ? this.lastPrecedingEventIndex + 1 : earliestActiveEventIndex;
   }
 };
-async function loadTextures(instrumentType) {
+async function loadTextures(instrumentType, options = {}) {
+  const { animationsEnabled = true } = options;
   const textureLoader = new THREE.TextureLoader();
   const animatedTextureManager = new AnimatedTextureManager();
   const load = (path) => textureLoader.loadAsync("https://static.enchor.us/" + path);
   const loadAnimated = async (path) => {
     const url = `https://static.enchor.us/preview-${path}.webp`;
+    if (!animationsEnabled) {
+      return loadStaticTexture(url);
+    }
     const result = await AnimatedTexture.create(url);
     if (result instanceof AnimatedTexture) {
       animatedTextureManager.register(result);
@@ -1349,7 +1415,7 @@ function isVideoFile(fileName) {
   const ext = fileName.toLowerCase().slice(fileName.lastIndexOf("."));
   return videoExtensions.includes(ext);
 }
-async function prepareChartData(files, instrument, difficulty, initialSeekPercent = 0) {
+async function prepareChartData(files, instrument, difficulty, initialSeekPercent = 0, textureOptions = {}) {
   const filteredFiles = files.filter((f) => !isVideoFile(f.fileName));
   const scannedChart = (0, import_scan_chart2.scanChartFolder)(filteredFiles);
   if (!scannedChart.playable || !scannedChart.notesData) {
@@ -1384,7 +1450,10 @@ async function prepareChartData(files, instrument, difficulty, initialSeekPercen
   }
   const audioFiles = findAudioFiles(filteredFiles);
   const instrumentType = (0, import_scan_chart2.getInstrumentType)(instrument);
-  const textures = await ChartPreview.loadTextures(instrumentType);
+  const textures = await ChartPreview.loadTextures(
+    instrumentType,
+    textureOptions
+  );
   const lastNote = parsedChart.trackData.flatMap((t) => t.noteEventGroups.flat()).reduce((max, note) => Math.max(max, note.msTime + note.msLength), 0);
   const audioLengthMs = scannedChart.song_length || lastNote + 5e3;
   const startDelayMs = (scannedChart.delay || 0) + (scannedChart.chart_offset || 0) * 1e3;
@@ -1705,10 +1774,18 @@ var ChartPreviewPlayer = class extends HTMLElement {
       }
     };
     this.handleFullscreenChange = () => {
-      this._isFullscreen = document.fullscreenElement === this.container;
+      const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement;
+      this._isFullscreen = fullscreenElement !== null && fullscreenElement !== void 0;
       this.container.classList.toggle("fullscreen", this._isFullscreen);
       this.fullscreenBtn.innerHTML = this._isFullscreen ? ICONS.fullscreenExit : ICONS.fullscreen;
-      this.fullscreenBtn.title = this._isFullscreen ? "Exit fullscreen" : "Toggle fullscreen";
+      this.fullscreenBtn.title = this._isFullscreen ? "Exit fullscreen" : "Enter fullscreen";
+      if (this.chartPreview) {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            this.chartPreview?.resize();
+          });
+        });
+      }
     };
     this.shadow = this.attachShadow({ mode: "open" });
     this.render();
@@ -1733,6 +1810,10 @@ var ChartPreviewPlayer = class extends HTMLElement {
   connectedCallback() {
     this.setAttribute("tabindex", "0");
     document.addEventListener("fullscreenchange", this.handleFullscreenChange);
+    document.addEventListener(
+      "webkitfullscreenchange",
+      this.handleFullscreenChange
+    );
   }
   disconnectedCallback() {
     this.dispose();
@@ -1740,6 +1821,10 @@ var ChartPreviewPlayer = class extends HTMLElement {
       "fullscreenchange",
       this.handleFullscreenChange
     );
+    document.removeEventListener(
+      "webkitfullscreenchange",
+      this.handleFullscreenChange
+    );
     this.removeEventListener("keydown", this.handleKeydown);
   }
   render() {
@@ -1820,7 +1905,8 @@ var ChartPreviewPlayer = class extends HTMLElement {
         this.onSeekEnd();
       }
     });
-    this.fullscreenBtn.addEventListener("click", () => {
+    this.fullscreenBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
       this.toggleFullscreen();
     });
     this.addEventListener("keydown", this.handleKeydown);
@@ -2133,7 +2219,8 @@ var ChartPreviewPlayer = class extends HTMLElement {
         files,
         config.instrument,
         config.difficulty,
-        config.initialSeekPercent
+        config.initialSeekPercent,
+        { animationsEnabled: config.animationsEnabled }
       );
       await this.loadChart({
         parsedChart: preparedData.parsedChart,
@@ -2175,7 +2262,8 @@ var ChartPreviewPlayer = class extends HTMLElement {
         files,
         config.instrument,
         config.difficulty,
-        config.initialSeekPercent
+        config.initialSeekPercent,
+        { animationsEnabled: config.animationsEnabled }
       );
       await this.loadChart({
         parsedChart: preparedData.parsedChart,
@@ -2214,7 +2302,8 @@ var ChartPreviewPlayer = class extends HTMLElement {
         config.files,
         config.instrument,
         config.difficulty,
-        config.initialSeekPercent
+        config.initialSeekPercent,
+        { animationsEnabled: config.animationsEnabled }
       );
       await this.loadChart({
         parsedChart: preparedData.parsedChart,
@@ -2314,12 +2403,28 @@ var ChartPreviewPlayer = class extends HTMLElement {
    * Toggle fullscreen mode
    */
   async toggleFullscreen() {
-    if (!document.fullscreenEnabled)
+    const doc = document;
+    const container = this.container;
+    const isFullscreenEnabled = doc.fullscreenEnabled || doc.webkitFullscreenEnabled;
+    if (!isFullscreenEnabled)
       return;
-    if (this._isFullscreen) {
-      await document.exitFullscreen();
-    } else {
-      await this.container.requestFullscreen();
+    const fullscreenElement = doc.fullscreenElement || doc.webkitFullscreenElement;
+    try {
+      if (fullscreenElement) {
+        if (doc.exitFullscreen) {
+          await doc.exitFullscreen();
+        } else if (doc.webkitExitFullscreen) {
+          doc.webkitExitFullscreen();
+        }
+      } else {
+        if (container.requestFullscreen) {
+          await container.requestFullscreen();
+        } else if (container.webkitRequestFullscreen) {
+          container.webkitRequestFullscreen();
+        }
+      }
+    } catch (error) {
+      console.warn("Fullscreen toggle failed:", error);
     }
   }
   /**
@@ -2352,6 +2457,7 @@ var import_scan_chart3 = require("scan-chart");
 0 && (module.exports = {
   ChartPreview,
   ChartPreviewPlayer,
+  areAnimationsSupported,
   extractSngFile,
   fetchSngFile,
   findAudioFiles,