saltfish 0.3.73 → 0.3.75

package/dist/saltfish-playlist-player.es.js

@@ -5272,6 +5272,19 @@ function createDevicePlaybackHandler(deviceInfo) {
     return new DesktopPlaybackHandler(deviceInfo);
   }
 }
+const ICON_CLOSE = `<svg width="18" height="18" viewBox="0 0 256 256" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg>`;
+const ICON_PLUS = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+const ICON_PLAY = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z" fill="currentColor"/></svg>`;
+const ICON_SPEAKER = `<svg width="18" height="18" viewBox="0 0 256 256" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M155.51,24.81a8,8,0,0,0-8.42.88L77.25,80H32A16,16,0,0,0,16,96v64a16,16,0,0,0,16,16H77.25l69.84,54.31A8,8,0,0,0,160,224V32A8,8,0,0,0,155.51,24.81ZM32,96H72v64H32ZM144,207.64,88,164.09V91.91l56-43.55Zm54-106.08a40,40,0,0,1,0,52.88,8,8,0,0,1-12-10.58,24,24,0,0,0,0-31.72,8,8,0,0,1,12-10.58ZM248,128a79.9,79.9,0,0,1-20.37,53.34,8,8,0,0,1-11.92-10.67,64,64,0,0,0,0-85.33,8,8,0,1,1,11.92-10.67A79.83,79.83,0,0,1,248,128Z"/></svg>`;
+const ICON_SPEAKER_MUTED = `<svg width="18" height="18" viewBox="0 0 256 256" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M155.51,24.81a8,8,0,0,0-8.42.88L77.25,80H32A16,16,0,0,0,16,96v64a16,16,0,0,0,16,16H77.25l69.84,54.31A8,8,0,0,0,160,224V32A8,8,0,0,0,155.51,24.81ZM32,96H72v64H32ZM144,207.64,88,164.09V91.91l56-43.55Zm101.66-61.3a8,8,0,0,1-11.32,11.32L216,139.31l-18.34,18.35a8,8,0,0,1-11.32-11.32L204.69,128l-18.35-18.34a8,8,0,0,1,11.32-11.32L216,116.69l18.34-18.35a8,8,0,0,1,11.32,11.32L227.31,128Z"/></svg>`;
+const ICON_CC = `<svg width="18" height="18" viewBox="0 0 256 256" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M224,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48Zm0,144H32V64H224V192ZM118.92,151.71A8,8,0,0,1,116,162.64a40,40,0,1,1,0-69.28,8,8,0,1,1-8,13.85,24,24,0,1,0,0,41.58A8,8,0,0,1,118.92,151.71Zm80,0A8,8,0,0,1,196,162.64a40,40,0,1,1,0-69.28,8,8,0,1,1-8,13.85,24,24,0,1,0,0,41.58A8,8,0,0,1,198.92,151.71Z"/></svg>`;
+const ICON_CC_DISABLED = `<svg width="18" height="18" viewBox="0 0 256 256" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M224,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48Zm0,144H32V64H224V192ZM118.92,151.71A8,8,0,0,1,116,162.64a40,40,0,1,1,0-69.28,8,8,0,1,1-8,13.85,24,24,0,1,0,0,41.58A8,8,0,0,1,118.92,151.71Zm80,0A8,8,0,0,1,196,162.64a40,40,0,1,1,0-69.28,8,8,0,1,1-8,13.85,24,24,0,1,0,0,41.58A8,8,0,0,1,198.92,151.71Z"/><line x1="48" y1="48" x2="208" y2="208" stroke="currentColor" stroke-width="16" stroke-linecap="round"/></svg>`;
+const ICON_CURSOR = `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none"><defs><filter id="cursor-shadow" x="-50%" y="-50%" width="200%" height="200%"><feDropShadow dx="0" dy="1" stdDeviation="1.2" flood-color="rgba(0, 0, 0, 0.22)"/></filter></defs><path d="M3.5 3.5L10.5 20.5L13.3 13.3L20.5 10.5L3.5 3.5Z" fill="#ff7614" stroke="white" stroke-width="0.7" stroke-linejoin="round" stroke-linecap="round" filter="url(#cursor-shadow)"/></svg>`;
+const ICON_LOADING_SPINNER = `<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><g transform="translate(10, 10) scale(0.656)"><g clip-path="url(#saltfish-clip)"><path d="M61.0002 30.1906C61.0002 46.8644 47.4834 60.3812 30.8097 60.3812C14.136 60.3812 27.1659 46.8644 27.1659 30.1906C27.1659 13.5168 14.136 0 30.8097 0C47.4834 0 61.0002 13.5168 61.0002 30.1906Z" fill="black" fill-opacity="0.9"/><path d="M24.13 29.8618C24.13 40.3565 15.6978 48.8642 5.29602 48.8642C-5.10576 48.8642 3.02294 40.3565 3.02294 29.8618C3.02294 19.3671 -5.10576 10.8594 5.29602 10.8594C15.6978 10.8594 24.13 19.3671 24.13 29.8618Z" fill="black" fill-opacity="0.9"/></g><defs><clipPath id="saltfish-clip"><rect width="61" height="61" fill="white"/></clipPath></defs></g><circle cx="30" cy="30" r="28" stroke="black" stroke-width="2" fill="none" stroke-linecap="round" stroke-dasharray="8 6" stroke-opacity="0.3"><animateTransform attributeName="transform" type="rotate" values="0 30 30;360 30 30" dur="2s" repeatCount="indefinite"/></circle></svg>`;
+const ICON_SPEAKER_OUTLINE = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" fill="none"/><path d="M15 9c0.8 0.8 1.5 1.9 1.5 3s-0.7 2.2-1.5 3" stroke="currentColor"/><path d="M19 7c1.6 1.6 2.5 3.8 2.5 6s-0.9 4.4-2.5 6" stroke="currentColor"/></svg>`;
+function createCloseIcon(size = 18) {
+  return `<svg width="${size}" height="${size}" viewBox="0 0 256 256" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"/></svg>`;
+}
 class VideoControlsUI {
   constructor(container, deviceHandler, callbacks) {
     // Container and control elements
@@ -5368,13 +5381,7 @@ class VideoControlsUI {
     this.muteButton = document.createElement("button");
     this.muteButton.className = "sf-video-container__mute-button";
     this.deviceHandler.configureControlElement(this.muteButton);
-    this.muteButton.innerHTML = `
-      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-        <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" fill="none"></polygon>
-        <path d="M15 9c0.8 0.8 1.5 1.9 1.5 3s-0.7 2.2-1.5 3" stroke="currentColor"></path>
-        <path d="M19 7c1.6 1.6 2.5 3.8 2.5 6s-0.9 4.4-2.5 6" stroke="currentColor"></path>
-      </svg>
-    `;
+    this.muteButton.innerHTML = ICON_SPEAKER_OUTLINE;
     if (controlsConfig.useTouch) {
       this.muteButton.addEventListener("touchend", (event) => {
         event.preventDefault();
@@ -5565,17 +5572,9 @@ class VideoControlsUI {
     const store = getSaltfishStore();
     const isMuted = store.isMuted;
     if (isMuted) {
-      this.muteButton.innerHTML = `
-        <svg width="18" height="18" viewBox="0 0 256 256" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-          <path d="M155.51,24.81a8,8,0,0,0-8.42.88L77.25,80H32A16,16,0,0,0,16,96v64a16,16,0,0,0,16,16H77.25l69.84,54.31A8,8,0,0,0,160,224V32A8,8,0,0,0,155.51,24.81ZM32,96H72v64H32ZM144,207.64,88,164.09V91.91l56-43.55Zm101.66-61.3a8,8,0,0,1-11.32,11.32L216,139.31l-18.34,18.35a8,8,0,0,1-11.32-11.32L204.69,128l-18.35-18.34a8,8,0,0,1,11.32-11.32L216,116.69l18.34-18.35a8,8,0,0,1,11.32,11.32L227.31,128Z"></path>
-        </svg>
-      `;
+      this.muteButton.innerHTML = ICON_SPEAKER_MUTED;
     } else {
-      this.muteButton.innerHTML = `
-        <svg width="18" height="18" viewBox="0 0 256 256" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-          <path d="M155.51,24.81a8,8,0,0,0-8.42.88L77.25,80H32A16,16,0,0,0,16,96v64a16,16,0,0,0,16,16H77.25l69.84,54.31A8,8,0,0,0,160,224V32A8,8,0,0,0,155.51,24.81ZM32,96H72v64H32ZM144,207.64,88,164.09V91.91l56-43.55Zm54-106.08a40,40,0,0,1,0,52.88,8,8,0,0,1-12-10.58,24,24,0,0,0,0-31.72,8,8,0,0,1,12-10.58ZM248,128a79.9,79.9,0,0,1-20.37,53.34,8,8,0,0,1-11.92-10.67,64,64,0,0,0,0-85.33,8,8,0,1,1,11.92-10.67A79.83,79.83,0,0,1,248,128Z"></path>
-        </svg>
-      `;
+      this.muteButton.innerHTML = ICON_SPEAKER;
     }
   }
   /**
@@ -5584,18 +5583,9 @@ class VideoControlsUI {
   updateCCButtonIcon(isEnabled) {
     if (!this.ccButton) return;
     if (isEnabled) {
-      this.ccButton.innerHTML = `
-        <svg width="18" height="18" viewBox="0 0 256 256" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-          <path d="M224,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48Zm0,144H32V64H224V192ZM118.92,151.71A8,8,0,0,1,116,162.64a40,40,0,1,1,0-69.28,8,8,0,1,1-8,13.85,24,24,0,1,0,0,41.58A8,8,0,0,1,118.92,151.71Zm80,0A8,8,0,0,1,196,162.64a40,40,0,1,1,0-69.28,8,8,0,1,1-8,13.85,24,24,0,1,0,0,41.58A8,8,0,0,1,198.92,151.71Z"></path>
-        </svg>
-      `;
+      this.ccButton.innerHTML = ICON_CC;
     } else {
-      this.ccButton.innerHTML = `
-        <svg width="18" height="18" viewBox="0 0 256 256" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-          <path d="M224,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48Zm0,144H32V64H224V192ZM118.92,151.71A8,8,0,0,1,116,162.64a40,40,0,1,1,0-69.28,8,8,0,1,1-8,13.85,24,24,0,1,0,0,41.58A8,8,0,0,1,118.92,151.71Zm80,0A8,8,0,0,1,196,162.64a40,40,0,1,1,0-69.28,8,8,0,1,1-8,13.85,24,24,0,1,0,0,41.58A8,8,0,0,1,198.92,151.71Z"></path>
-          <line x1="48" y1="48" x2="208" y2="208" stroke="currentColor" stroke-width="16" stroke-linecap="round"/>
-        </svg>
-      `;
+      this.ccButton.innerHTML = ICON_CC_DISABLED;
     }
   }
   /**
@@ -7025,6 +7015,32 @@ function isElementValid(element, expectedElement, expectedSize, config = DEFAULT
   }
   return true;
 }
+const RRWEB_SNAPSHOT_URL = "https://storage.saltfish.ai/libs/rrweb-snapshot-2.0.0-alpha.18.js";
+async function captureDOMSnapshot() {
+  try {
+    const rrwebSnapshot = await import(
+      /* webpackIgnore: true */
+      RRWEB_SNAPSHOT_URL
+    );
+    const domSnapshot = rrwebSnapshot.snapshot(document);
+    return domSnapshot;
+  } catch (error2) {
+    console.warn("Failed to capture DOM snapshot:", error2);
+    return null;
+  }
+}
+async function captureDOMSnapshotAsString() {
+  const snapshot = await captureDOMSnapshot();
+  if (!snapshot) {
+    return null;
+  }
+  try {
+    return JSON.stringify(snapshot);
+  } catch (error2) {
+    console.warn("Failed to serialize DOM snapshot:", error2);
+    return null;
+  }
+}
 const API_URL = "https://player.saltfish.ai/element-errors";
 function determineFailureReason(selector, expectedElement, expectedSize) {
   const elements = document.querySelectorAll(selector);
@@ -7047,21 +7063,48 @@ function determineFailureReason(selector, expectedElement, expectedSize) {
 }
 function reportElementError(playlistId, stepId, selector, expectedElement, expectedSize) {
   const failureReason = determineFailureReason(selector, expectedElement, expectedSize);
-  const payload = {
-    playlistId,
-    stepId,
-    failureReason,
-    selector
-  };
-  fetch(API_URL, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json"
-    },
-    body: JSON.stringify(payload)
-  }).catch((error2) => {
-    console.warn("Failed to report element error:", error2);
-  });
+  (async () => {
+    try {
+      const payload = {
+        playlistId,
+        stepId,
+        failureReason,
+        selector
+      };
+      const domSnapshot = await captureDOMSnapshotAsString();
+      if (domSnapshot) {
+        payload.domSnapshot = domSnapshot;
+      }
+      await fetch(API_URL, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(payload)
+      });
+    } catch (error2) {
+      console.warn("Failed to report element error:", error2);
+    }
+  })();
+}
+function parseColorToRgb(color) {
+  const el = document.createElement("div");
+  el.style.color = color;
+  document.body.appendChild(el);
+  const computed = window.getComputedStyle(el).color;
+  document.body.removeChild(el);
+  const match = computed.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  return match ? { r: +match[1], g: +match[2], b: +match[3] } : null;
+}
+function colorToRgba(color, opacity) {
+  const rgb = parseColorToRgb(color);
+  return rgb ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})` : color;
+}
+function getContrastingTextColor(bgColor) {
+  const rgb = parseColorToRgb(bgColor);
+  if (!rgb) return "#fff";
+  const luminance = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3;
+  return luminance > 150 ? "#333" : "#fff";
 }
 class CursorManager {
   constructor() {
@@ -7551,16 +7594,7 @@ class CursorManager {
     this.injectCursorStyles();
     this.cursor = document.createElement("div");
     this.cursor.className = "sf-cursor";
-    this.cursor.innerHTML = `
-      <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none">
-        <defs>
-          <filter id="cursor-shadow" x="-50%" y="-50%" width="200%" height="200%">
-            <feDropShadow dx="0" dy="1" stdDeviation="1.2" flood-color="rgba(0, 0, 0, 0.22)"/>
-          </filter>
-        </defs>
-        <path d="M3.5 3.5L10.5 20.5L13.3 13.3L20.5 10.5L3.5 3.5Z" fill="#ff7614" stroke="white" stroke-width="0.7" stroke-linejoin="round" stroke-linecap="round" filter="url(#cursor-shadow)" />
-      </svg>
-    `;
+    this.cursor.innerHTML = ICON_CURSOR;
     this.labelElement = document.createElement("div");
     this.labelElement.className = "sf-cursor-label";
     this.selectionElement = document.createElement("div");
@@ -8432,81 +8466,17 @@ class CursorManager {
         const path = svg.querySelector("path");
         if (path) {
           path.setAttribute("fill", color);
-        } else {
-          console.warn("[CursorManager.setColor] No path found in SVG");
         }
-      } else {
-        console.warn("[CursorManager.setColor] No SVG found in cursor");
       }
-    } else {
-      console.warn("[CursorManager.setColor] No cursor element");
     }
     if (this.selectionElement) {
       this.selectionElement.style.setProperty("--sf-selection-color", color);
-      const rgbaBackground = this.colorToRgba(color, 0);
-      this.selectionElement.style.setProperty("--sf-selection-bg-color", rgbaBackground);
+      this.selectionElement.style.setProperty("--sf-selection-bg-color", colorToRgba(color, 0));
     }
     if (this.labelElement) {
       this.labelElement.style.setProperty("--sf-cursor-label-bg", color);
-      const textColor = this.getContrastingTextColor(color);
-      this.labelElement.style.setProperty("--sf-cursor-label-text", textColor);
-    }
-  }
-  /**
-   * Calculates whether white or black text provides better contrast against a background color
-   * Uses relative luminance calculation for accessibility
-   * @param bgColor - The background color (hex, rgb, etc)
-   * @returns '#fff' for dark backgrounds, '#333' for light backgrounds
-   */
-  getContrastingTextColor(bgColor) {
-    const rgb = this.parseColorToRgb(bgColor);
-    if (!rgb) {
-      return "#fff";
-    }
-    const luminance = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3;
-    return luminance > 150 ? "#333" : "#fff";
-  }
-  /**
-   * Parses a color string to RGB values
-   * @param color - The color to parse (hex, rgb, rgba)
-   * @returns RGB object or null if parsing fails
-   */
-  parseColorToRgb(color) {
-    const tempElement = document.createElement("div");
-    tempElement.style.color = color;
-    document.body.appendChild(tempElement);
-    const computedColor = window.getComputedStyle(tempElement).color;
-    document.body.removeChild(tempElement);
-    const rgbMatch = computedColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
-    if (rgbMatch) {
-      return {
-        r: parseInt(rgbMatch[1], 10),
-        g: parseInt(rgbMatch[2], 10),
-        b: parseInt(rgbMatch[3], 10)
-      };
-    }
-    return null;
-  }
-  /**
-   * Converts a color string (hex, rgb, rgba) to rgba format with specified opacity
-   * @param color - The color to convert
-   * @param opacity - The opacity value (0-1)
-   * @returns rgba color string
-   */
-  colorToRgba(color, opacity) {
-    const tempElement = document.createElement("div");
-    tempElement.style.color = color;
-    document.body.appendChild(tempElement);
-    const computedColor = window.getComputedStyle(tempElement).color;
-    document.body.removeChild(tempElement);
-    const rgbMatch = computedColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
-    if (rgbMatch) {
-      const r = rgbMatch[1];
-      const g = rgbMatch[2];
-      const b = rgbMatch[3];
-      return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+      this.labelElement.style.setProperty("--sf-cursor-label-text", getContrastingTextColor(color));
     }
-    return color;
   }
   /**
    * Sets the label text to display beside the cursor
@@ -11493,11 +11463,7 @@ class MinimizeButton {
     this.playerElement = playerElement;
     this.button = document.createElement("button");
     this.button.className = "sf-player__minimize-button";
-    this.button.innerHTML = `
-      <svg width="20" height="20" viewBox="0 0 256 256" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-        <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
-      </svg>
-    `;
+    this.button.innerHTML = createCloseIcon(20);
     this.button.addEventListener("click", this.handleClick.bind(this));
     this.playerElement.appendChild(this.button);
     this.updateVisibility(getSaltfishStore().isMinimized);
@@ -11517,18 +11483,10 @@ class MinimizeButton {
     }
   }
   minimize() {
-    this.button.innerHTML = `
-      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-      </svg>
-    `;
+    this.button.innerHTML = ICON_PLUS;
   }
   maximize() {
-    this.button.innerHTML = `
-      <svg width="20" height="20" viewBox="0 0 256 256" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-        <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
-      </svg>
-    `;
+    this.button.innerHTML = createCloseIcon(20);
   }
   updateVisibility(isMinimized) {
     if (isMinimized) {
@@ -11554,11 +11512,7 @@ class PlayPauseButton {
   createButton() {
     this.playButton = document.createElement("button");
     this.playButton.className = "sf-controls-container__play-button";
-    this.playButton.innerHTML = `
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M8 5v14l11-7z" fill="currentColor"/>
-      </svg>
-    `;
+    this.playButton.innerHTML = ICON_PLAY;
     this.playButton.addEventListener("click", this.handlePlayClick.bind(this));
     this.container.appendChild(this.playButton);
   }
@@ -11610,11 +11564,7 @@ class ExitButton {
     this.playerElement = playerElement;
     this.button = document.createElement("button");
     this.button.className = "sf-player__exit-button";
-    this.button.innerHTML = `
-      <svg width="18" height="18" viewBox="0 0 256 256" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-        <path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path>
-      </svg>
-    `;
+    this.button.innerHTML = ICON_CLOSE;
     this.button.addEventListener("click", this.handleClick.bind(this));
     this.playerElement.appendChild(this.button);
     this.updateVisibility(getSaltfishStore().isMinimized);
@@ -11756,34 +11706,7 @@ class LoadingSpinner {
     this.spinnerElement.className = `${CSS_CLASSES.LOADING_SPINNER}`;
     this.spinnerElement.innerHTML = `
       <div class="sf-loading-spinner__content">
-        <div class="sf-loading-spinner__icon">
-          <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <!-- Static Saltfish logo in center -->
-            <g transform="translate(10, 10) scale(0.656)">
-              <g clip-path="url(#saltfish-clip)">
-                <path d="M61.0002 30.1906C61.0002 46.8644 47.4834 60.3812 30.8097 60.3812C14.136 60.3812 27.1659 46.8644 27.1659 30.1906C27.1659 13.5168 14.136 0 30.8097 0C47.4834 0 61.0002 13.5168 61.0002 30.1906Z" fill="black" fill-opacity="0.9"/>
-                <path d="M24.13 29.8618C24.13 40.3565 15.6978 48.8642 5.29602 48.8642C-5.10576 48.8642 3.02294 40.3565 3.02294 29.8618C3.02294 19.3671 -5.10576 10.8594 5.29602 10.8594C15.6978 10.8594 24.13 19.3671 24.13 29.8618Z" fill="black" fill-opacity="0.9"/>
-              </g>
-              <defs>
-                <clipPath id="saltfish-clip">
-                  <rect width="61" height="61" fill="white"/>
-                </clipPath>
-              </defs>
-            </g>
-            
-            <!-- Animated circular ring around logo -->
-            <circle cx="30" cy="30" r="28" 
-                    stroke="black" stroke-width="2" 
-                    fill="none" stroke-linecap="round"
-                    stroke-dasharray="8 6" stroke-opacity="0.3">
-              <animateTransform attributeName="transform" 
-                              type="rotate" 
-                              values="0 30 30;360 30 30" 
-                              dur="2s" 
-                              repeatCount="indefinite"/>
-            </circle>
-          </svg>
-        </div>
+        <div class="sf-loading-spinner__icon">${ICON_LOADING_SPINNER}</div>
         <div class="sf-loading-spinner__text">Loading playlist...</div>
       </div>
     `;
@@ -12709,7 +12632,7 @@ const SaltfishPlayer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.de
   __proto__: null,
   SaltfishPlayer
 }, Symbol.toStringTag, { value: "Module" }));
-const version = "0.3.73";
+const version = "0.3.75";
 const packageJson = {
   version
 };