chart-preview 1.0.3 → 1.2.0

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,
@@ -74,6 +75,196 @@ function isAudioContextSupported() {
 var HIGHWAY_DURATION_MS = 1500;
 var SCALE = 0.105;
 var NOTE_SPAN_WIDTH = 0.95;
+function isImageDecoderSupported() {
+  return typeof ImageDecoder !== "undefined";
+}
+function areAnimationsSupported() {
+  return isImageDecoderSupported();
+}
+var AnimatedTexture = class {
+  constructor(width, height) {
+    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");
+    this.canvas.width = width;
+    this.canvas.height = height;
+    this.ctx = this.canvas.getContext("2d");
+    this.texture = new THREE.CanvasTexture(this.canvas);
+    this.texture.colorSpace = THREE.SRGBColorSpace;
+  }
+  /**
+   * 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()) {
+      return loadStaticTexture(url);
+    }
+    try {
+      const response = await fetch(url);
+      if (!response.ok || !response.body) {
+        throw new Error(`Failed to fetch ${url}`);
+      }
+      const contentType = response.headers.get("content-type") || "image/webp";
+      const isSupported = await ImageDecoder.isTypeSupported(contentType);
+      if (!isSupported) {
+        return loadStaticTexture(url);
+      }
+      const decoder = new ImageDecoder({
+        data: response.body,
+        type: contentType
+      });
+      await decoder.completed;
+      const track = decoder.tracks.selectedTrack;
+      if (!track) {
+        throw new Error("No track found in image");
+      }
+      const frameCount = track.frameCount;
+      if (frameCount <= 1) {
+        const result = await decoder.decode({ frameIndex: 0 });
+        const frame = result.image;
+        const animTexture2 = new AnimatedTexture(
+          frame.displayWidth,
+          frame.displayHeight
+        );
+        animTexture2.ctx.drawImage(frame, 0, 0);
+        animTexture2.texture.needsUpdate = true;
+        frame.close();
+        decoder.close();
+        return animTexture2.texture;
+      }
+      const firstResult = await decoder.decode({ frameIndex: 0 });
+      const firstFrame = firstResult.image;
+      const animTexture = new AnimatedTexture(
+        firstFrame.displayWidth,
+        firstFrame.displayHeight
+      );
+      animTexture.frameDurations = [];
+      animTexture.frameCache = [];
+      for (let i = 0; i < frameCount; i++) {
+        try {
+          const frameResult = await decoder.decode({ frameIndex: i });
+          const videoFrame = frameResult.image;
+          const bitmap = await createImageBitmap(videoFrame);
+          animTexture.frameCache.push(bitmap);
+          const durationMs = (videoFrame.duration ?? 1e5) / 1e3;
+          animTexture.frameDurations.push(durationMs);
+          videoFrame.close();
+        } catch {
+          animTexture.frameDurations.push(100);
+          if (animTexture.frameCache.length > 0) {
+            animTexture.frameCache.push(
+              animTexture.frameCache[animTexture.frameCache.length - 1]
+            );
+          }
+        }
+      }
+      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
+      );
+      return loadStaticTexture(url);
+    }
+  }
+  /**
+   * Updates the texture to the current animation frame based on elapsed time.
+   * This method is SYNCHRONOUS for optimal render performance - all frames
+   * are pre-decoded during initialization.
+   */
+  tick() {
+    if (!this.isAnimated || this.disposed || this.frameCache.length === 0) {
+      return;
+    }
+    const now = performance.now();
+    const elapsed = now - this.lastFrameTime;
+    const currentFrameDuration = this.frameDurations[this.frameIndex] || 100;
+    if (elapsed >= currentFrameDuration) {
+      this.frameIndex = (this.frameIndex + 1) % this.frameCount;
+      this.lastFrameTime = now;
+      const frame = this.frameCache[this.frameIndex];
+      if (frame) {
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.ctx.drawImage(frame, 0, 0);
+        this.texture.needsUpdate = true;
+      }
+    }
+  }
+  /**
+   * Disposes of resources used by this animated texture.
+   */
+  dispose() {
+    this.disposed = true;
+    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 = [];
+  }
+  register(texture) {
+    if (texture instanceof AnimatedTexture) {
+      this.animatedTextures.push(texture);
+    }
+  }
+  /**
+   * 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) {
+      texture.dispose();
+    }
+    this.animatedTextures = [];
+  }
+};
 var BARRE1_TYPE = 99991;
 var BARRE2_TYPE = 99992;
 var BARRE3_TYPE = 99993;
@@ -145,6 +336,7 @@ var _ChartPreview = class {
     const chartPreview = new _ChartPreview();
     chartPreview.instrumentType = (0, import_scan_chart.getInstrumentType)(config.instrument);
     chartPreview.highwayTexture = config.textures.highwayTexture;
+    chartPreview.animatedTextureManager = config.textures.animatedTextureManager;
     chartPreview.progressIntervalMs = config.progressIntervalMs ?? DEFAULT_PROGRESS_INTERVAL_MS;
     chartPreview.camera = new ChartCamera(config.container);
     chartPreview.renderer = new ChartRenderer(config.container);
@@ -229,6 +421,7 @@ var _ChartPreview = class {
     this.renderer.dispose();
     this.renderer.forceContextLoss();
     this.audioManager.closeAudio();
+    this.animatedTextureManager.dispose();
   }
   addHighwayToScene(highwayTexture) {
     const mat = new THREE.MeshBasicMaterial({ map: highwayTexture });
@@ -264,6 +457,7 @@ var _ChartPreview = class {
     this.notesManager.updateDisplayedNotes(
       this.audioManager.chartCurrentTimeMs
     );
+    this.animatedTextureManager.tick();
     const scrollPosition = -0.9 * (this.audioManager.chartCurrentTimeMs / 1e3) * (HIGHWAY_DURATION_MS / 1e3);
     this.highwayTexture.offset.y = -1 * scrollPosition;
     this.renderer.render(this.scene, this.camera);
@@ -665,11 +859,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,
@@ -746,9 +945,23 @@ 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);
+      return result.texture;
+    }
+    return result;
+  };
   const [highwayTexture, strikelineTexture, noteTextures] = await Promise.all([
     (async () => {
       const texture = await load("preview-highway.png");
@@ -770,9 +983,7 @@ async function loadTextures(instrumentType) {
     (async () => {
       const texturePromises = [];
       const addTexture = (type, flags, path) => {
-        const texture = textureLoader.loadAsync(
-          `https://static.enchor.us/preview-${path}.webp`
-        );
+        const texture = loadAnimated(path);
         texturePromises.push({ type, flags, texture });
         return texture;
       };
@@ -937,7 +1148,8 @@ async function loadTextures(instrumentType) {
   return {
     highwayTexture,
     strikelineTexture,
-    noteTextures
+    noteTextures,
+    animatedTextureManager
   };
 }
 function adjustParsedChart(parsedChart, instrument, difficulty) {
@@ -1184,7 +1396,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) {
@@ -1219,7 +1431,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;
@@ -1540,10 +1755,11 @@ 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";
     };
     this.shadow = this.attachShadow({ mode: "open" });
     this.render();
@@ -1568,6 +1784,10 @@ var ChartPreviewPlayer = class extends HTMLElement {
   connectedCallback() {
     this.setAttribute("tabindex", "0");
     document.addEventListener("fullscreenchange", this.handleFullscreenChange);
+    document.addEventListener(
+      "webkitfullscreenchange",
+      this.handleFullscreenChange
+    );
   }
   disconnectedCallback() {
     this.dispose();
@@ -1575,6 +1795,10 @@ var ChartPreviewPlayer = class extends HTMLElement {
       "fullscreenchange",
       this.handleFullscreenChange
     );
+    document.removeEventListener(
+      "webkitfullscreenchange",
+      this.handleFullscreenChange
+    );
     this.removeEventListener("keydown", this.handleKeydown);
   }
   render() {
@@ -1655,7 +1879,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);
@@ -1968,7 +2193,8 @@ var ChartPreviewPlayer = class extends HTMLElement {
         files,
         config.instrument,
         config.difficulty,
-        config.initialSeekPercent
+        config.initialSeekPercent,
+        { animationsEnabled: config.animationsEnabled }
       );
       await this.loadChart({
         parsedChart: preparedData.parsedChart,
@@ -2010,7 +2236,8 @@ var ChartPreviewPlayer = class extends HTMLElement {
         files,
         config.instrument,
         config.difficulty,
-        config.initialSeekPercent
+        config.initialSeekPercent,
+        { animationsEnabled: config.animationsEnabled }
       );
       await this.loadChart({
         parsedChart: preparedData.parsedChart,
@@ -2049,7 +2276,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,
@@ -2149,12 +2377,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);
     }
   }
   /**
@@ -2187,6 +2431,7 @@ var import_scan_chart3 = require("scan-chart");
 0 && (module.exports = {
   ChartPreview,
   ChartPreviewPlayer,
+  areAnimationsSupported,
   extractSngFile,
   fetchSngFile,
   findAudioFiles,