saltfish 0.3.38 → 0.3.40

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

@@ -2845,6 +2845,9 @@ class PlaylistOrchestrator {
         if (updatedStore.manifest.cursorColor) {
           this.managers.cursorManager.setColor(updatedStore.manifest.cursorColor);
         }
+        if (updatedStore.manifest.cursorLabel) {
+          this.managers.cursorManager.setLabel(updatedStore.manifest.cursorLabel);
+        }
         const isTriggeredAutomatically = finalOptions._triggeredByTriggerManager === true;
         const isFirstStep = updatedStore.currentStepId === ((_e = updatedStore.manifest.steps[0]) == null ? void 0 : _e.id);
         if (updatedStore.manifest.idleMode && isFirstStep) {
@@ -6713,6 +6716,9 @@ class CursorManager {
     __publicField(this, "isSelectionMode", false);
     __publicField(this, "selectionPadding", 4);
     // Default padding in pixels
+    // Label element for cursor name/text
+    __publicField(this, "labelElement", null);
+    __publicField(this, "labelText", null);
     // Selection drag properties
     __publicField(this, "dragStartX", null);
     __publicField(this, "dragStartY", null);
@@ -7107,9 +7113,12 @@ class CursorManager {
         <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.labelElement = document.createElement("div");
+    this.labelElement.className = "sf-cursor-label";
     this.selectionElement = document.createElement("div");
     this.selectionElement.className = "sf-selection";
     document.body.appendChild(this.cursor);
+    document.body.appendChild(this.labelElement);
     document.body.appendChild(this.selectionElement);
     this.flashlightOverlay = document.createElement("div");
     this.flashlightOverlay.className = "sf-flashlight-overlay";
@@ -7196,6 +7205,35 @@ class CursorManager {
       .sf-flashlight-overlay--visible {
         display: block;
       }
+
+      .sf-cursor-label {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 9999999;
+        pointer-events: none;
+        display: none;
+        will-change: transform;
+        transform: var(--sf-cursor-label-transform, translate(0, 0));
+        opacity: var(--sf-cursor-opacity, 1);
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--sf-cursor-label-text, #fff);
+        background: var(--sf-cursor-label-bg, #ff7614);
+        padding: 4px 10px;
+        border-radius: 12px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        white-space: nowrap;
+        margin: 0;
+        border: 0;
+        box-sizing: border-box;
+        line-height: 1.4;
+      }
+
+      .sf-cursor-label--visible {
+        display: block;
+      }
     `;
     try {
       const sheet = new CSSStyleSheet();
@@ -7305,6 +7343,10 @@ class CursorManager {
       this.cursor.classList.add("sf-cursor--visible");
       this.cursor.style.setProperty("--sf-cursor-transform", `translate(${x}px, ${y}px) translate(-50%, -50%)`);
     }
+    if (this.labelElement && this.labelText) {
+      this.labelElement.classList.add("sf-cursor-label--visible");
+      this.labelElement.style.setProperty("--sf-cursor-label-transform", `translate(${x + 24}px, ${y + 8}px)`);
+    }
     if (this.flashlightOverlay) {
       this.flashlightOverlay.classList.add("sf-flashlight-overlay--visible");
       this.flashlightOverlay.style.setProperty("--sf-flashlight-bg", `radial-gradient(circle 150px at ${x}px ${y}px, transparent 0%, rgba(0, 0, 0, 0.4) 100%)`);
@@ -7317,6 +7359,9 @@ class CursorManager {
     if (this.cursor) {
       this.cursor.classList.remove("sf-cursor--visible");
     }
+    if (this.labelElement) {
+      this.labelElement.classList.remove("sf-cursor-label--visible");
+    }
     if (this.selectionElement) {
       this.selectionElement.classList.remove("sf-selection--visible");
     }
@@ -7902,6 +7947,11 @@ class CursorManager {
       this.cursor.remove();
       this.cursor = null;
     }
+    if (this.labelElement && this.labelElement.parentNode) {
+      this.labelElement.remove();
+      this.labelElement = null;
+    }
+    this.labelText = null;
     if (this.selectionElement && this.selectionElement.parentNode) {
       this.selectionElement.remove();
       this.selectionElement = null;
@@ -7922,7 +7972,7 @@ class CursorManager {
     document.documentElement.style.removeProperty("--sf-cursor-y");
   }
   /**
-   * Sets the color of the cursor SVG and selection highlight
+   * Sets the color of the cursor SVG, selection highlight, and label
    * @param color - The color to set (hex, rgb, etc)
    */
   setColor(color) {
@@ -7946,6 +7996,46 @@ class CursorManager {
       const rgbaBackground = this.colorToRgba(color, 0);
       this.selectionElement.style.setProperty("--sf-selection-bg-color", rgbaBackground);
     }
+    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
@@ -7968,6 +8058,25 @@ class CursorManager {
     }
     return color;
   }
+  /**
+   * Sets the label text to display beside the cursor
+   * @param label - The label text to display (e.g., avatar name), or null to hide
+   */
+  setLabel(label) {
+    var _a;
+    this.labelText = label;
+    if (this.labelElement) {
+      if (label) {
+        this.labelElement.textContent = label;
+        if ((_a = this.cursor) == null ? void 0 : _a.classList.contains("sf-cursor--visible")) {
+          this.labelElement.classList.add("sf-cursor-label--visible");
+        }
+      } else {
+        this.labelElement.textContent = "";
+        this.labelElement.classList.remove("sf-cursor-label--visible");
+      }
+    }
+  }
 }
 class InteractionManager {
   constructor() {
@@ -11787,7 +11896,7 @@ const SaltfishPlayer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.de
   __proto__: null,
   SaltfishPlayer
 }, Symbol.toStringTag, { value: "Module" }));
-const version = "0.3.38";
+const version = "0.3.40";
 const packageJson = {
   version
 };