chart-preview 1.1.0 → 1.2.0

package/src/ChartPreviewPlayer.ts

@@ -357,6 +357,11 @@ export class ChartPreviewPlayer extends HTMLElement {
   connectedCallback() {
     this.setAttribute("tabindex", "0");
     document.addEventListener("fullscreenchange", this.handleFullscreenChange);
+    // Safari uses webkit prefix
+    document.addEventListener(
+      "webkitfullscreenchange",
+      this.handleFullscreenChange
+    );
   }
 
   disconnectedCallback() {
@@ -365,6 +370,10 @@ export class ChartPreviewPlayer extends HTMLElement {
       "fullscreenchange",
       this.handleFullscreenChange
     );
+    document.removeEventListener(
+      "webkitfullscreenchange",
+      this.handleFullscreenChange
+    );
     this.removeEventListener("keydown", this.handleKeydown);
   }
 
@@ -467,8 +476,9 @@ export class ChartPreviewPlayer extends HTMLElement {
       }
     });
 
-    // Fullscreen button
-    this.fullscreenBtn.addEventListener("click", () => {
+    // Fullscreen button - stop propagation to prevent any parent handlers
+    this.fullscreenBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
       this.toggleFullscreen();
     });
 
@@ -525,14 +535,20 @@ export class ChartPreviewPlayer extends HTMLElement {
   };
 
   private handleFullscreenChange = () => {
-    this._isFullscreen = document.fullscreenElement === this.container;
+    // Check if we're in fullscreen mode (support both standard and webkit prefix)
+    const fullscreenElement =
+      document.fullscreenElement ||
+      (document as unknown as { webkitFullscreenElement?: Element })
+        .webkitFullscreenElement;
+    this._isFullscreen =
+      fullscreenElement !== null && fullscreenElement !== undefined;
     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";
+      : "Enter fullscreen";
   };
 
   private onSeekStart() {
@@ -900,7 +916,8 @@ export class ChartPreviewPlayer extends HTMLElement {
         files,
         config.instrument,
         config.difficulty,
-        config.initialSeekPercent
+        config.initialSeekPercent,
+        { animationsEnabled: config.animationsEnabled }
       );
 
       // Load the chart
@@ -948,7 +965,8 @@ export class ChartPreviewPlayer extends HTMLElement {
         files,
         config.instrument,
         config.difficulty,
-        config.initialSeekPercent
+        config.initialSeekPercent,
+        { animationsEnabled: config.animationsEnabled }
       );
 
       // Load the chart
@@ -992,7 +1010,8 @@ export class ChartPreviewPlayer extends HTMLElement {
         config.files,
         config.instrument,
         config.difficulty,
-        config.initialSeekPercent
+        config.initialSeekPercent,
+        { animationsEnabled: config.animationsEnabled }
       );
 
       // Load the chart
@@ -1105,12 +1124,46 @@ export class ChartPreviewPlayer extends HTMLElement {
    * Toggle fullscreen mode
    */
   async toggleFullscreen(): Promise<void> {
-    if (!document.fullscreenEnabled) return;
+    // Check for fullscreen support (standard and webkit)
+    const doc = document as unknown as {
+      fullscreenEnabled?: boolean;
+      webkitFullscreenEnabled?: boolean;
+      fullscreenElement?: Element;
+      webkitFullscreenElement?: Element;
+      exitFullscreen?: () => Promise<void>;
+      webkitExitFullscreen?: () => void;
+    };
+    const container = this.container as unknown as {
+      requestFullscreen?: () => Promise<void>;
+      webkitRequestFullscreen?: () => void;
+    };
+
+    const isFullscreenEnabled =
+      doc.fullscreenEnabled || doc.webkitFullscreenEnabled;
+    if (!isFullscreenEnabled) return;
+
+    const fullscreenElement =
+      doc.fullscreenElement || doc.webkitFullscreenElement;
 
-    if (this._isFullscreen) {
-      await document.exitFullscreen();
-    } else {
-      await this.container.requestFullscreen();
+    try {
+      if (fullscreenElement) {
+        // Exit fullscreen
+        if (doc.exitFullscreen) {
+          await doc.exitFullscreen();
+        } else if (doc.webkitExitFullscreen) {
+          doc.webkitExitFullscreen();
+        }
+      } else {
+        // Enter fullscreen
+        if (container.requestFullscreen) {
+          await container.requestFullscreen();
+        } else if (container.webkitRequestFullscreen) {
+          container.webkitRequestFullscreen();
+        }
+      }
+    } catch (error) {
+      // Fullscreen request can fail due to user gesture requirements or other reasons
+      console.warn("Fullscreen toggle failed:", error);
     }
   }
 

package/src/SngLoader.ts

@@ -7,7 +7,11 @@ import {
   type Instrument,
   type ScannedChart,
 } from "scan-chart";
-import { ChartPreview, type ParsedChart } from "./ChartPreview";
+import {
+  ChartPreview,
+  type LoadTexturesOptions,
+  type ParsedChart,
+} from "./ChartPreview";
 
 /**
  * Audio file extensions supported by the chart preview.
@@ -33,6 +37,11 @@ export 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;
 }
 
 /**
@@ -47,6 +56,11 @@ export 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;
 }
 
 /**
@@ -61,6 +75,11 @@ export 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;
 }
 
 /**
@@ -218,13 +237,15 @@ export 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
  */
 export async function prepareChartData(
   files: { fileName: string; data: Uint8Array }[],
   instrument: Instrument,
   difficulty: Difficulty,
-  initialSeekPercent = 0
+  initialSeekPercent = 0,
+  textureOptions: LoadTexturesOptions = {}
 ): Promise<PreparedChartData> {
   // Filter out video files
   const filteredFiles = files.filter((f) => !isVideoFile(f.fileName));
@@ -276,7 +297,10 @@ export async function prepareChartData(
 
   // Load textures for the instrument type
   const instrumentType = getInstrumentType(instrument);
-  const textures = await ChartPreview.loadTextures(instrumentType);
+  const textures = await ChartPreview.loadTextures(
+    instrumentType,
+    textureOptions
+  );
 
   // Calculate audio length from the last note or from metadata
   const lastNote = parsedChart.trackData

package/src/index.ts

@@ -1,8 +1,10 @@
 // Core classes
 export {
   ChartPreview,
+  areAnimationsSupported,
   type ChartPreviewConfig,
   type ChartPreviewEvents,
+  type LoadTexturesOptions,
   type ParsedChart,
 } from "./ChartPreview";