saltfish 0.3.38 → 0.3.41

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() {
@@ -9614,6 +9723,9 @@ class TriggerManager {
     const elementVisibleCondition = this.evaluateElementVisibleCondition(triggers.elementVisible);
     conditions.push(elementVisibleCondition);
     log(`TriggerManager: ElementVisible condition for playlist ${playlistId}: ${elementVisibleCondition} (selector: ${triggers.elementVisible})`);
+    const userAttributesCondition = this.evaluateUserAttributesCondition(triggers.userAttributes);
+    conditions.push(userAttributesCondition);
+    log(`TriggerManager: UserAttributes condition for playlist ${playlistId}: ${userAttributesCondition} (conditions: ${JSON.stringify(triggers.userAttributes)})`);
     const shouldTrigger = this.applyOperators(conditions, triggers.operators);
     log(`TriggerManager: Final evaluation for playlist ${playlistId}: ${shouldTrigger} (operator: ${triggers.operators.join(", ")})`);
     if (shouldTrigger) {
@@ -9747,6 +9859,98 @@ class TriggerManager {
     const isVisible = this.visibleElements.has(selector);
     return isVisible;
   }
+  /**
+   * Evaluates user attribute conditions for a playlist
+   * All conditions must be met (AND logic)
+   * @param conditions - Array of user attribute conditions to evaluate
+   */
+  evaluateUserAttributesCondition(conditions) {
+    if (!conditions || conditions.length === 0) {
+      return true;
+    }
+    const store = getSaltfishStore();
+    const user = store.user;
+    if (!user) {
+      return false;
+    }
+    for (const condition of conditions) {
+      const { attributeKey, attributeType, operator, value: expectedValue } = condition;
+      const userValue = user[attributeKey];
+      if (userValue === void 0 || userValue === null) {
+        return false;
+      }
+      const result = this.compareValues(userValue, expectedValue, attributeType, operator);
+      if (!result) {
+        return false;
+      }
+    }
+    return true;
+  }
+  /**
+   * Compares two values based on attribute type and operator
+   * @param userValue - The user's actual value
+   * @param expectedValue - The expected value from trigger condition (always a string)
+   * @param attributeType - The data type for comparison
+   * @param operator - The comparison operator
+   */
+  compareValues(userValue, expectedValue, attributeType, operator) {
+    try {
+      switch (attributeType) {
+        case "string": {
+          const userStr = String(userValue);
+          const expectedStr = expectedValue;
+          return this.applyOperator(userStr, expectedStr, operator);
+        }
+        case "boolean": {
+          const userBool = typeof userValue === "boolean" ? userValue : String(userValue).toLowerCase() === "true";
+          const expectedBool = expectedValue.toLowerCase() === "true";
+          if (operator === "equals") return userBool === expectedBool;
+          if (operator === "notEquals") return userBool !== expectedBool;
+          return false;
+        }
+        case "int": {
+          const userNum = typeof userValue === "number" ? userValue : parseFloat(String(userValue));
+          const expectedNum = parseFloat(expectedValue);
+          if (isNaN(userNum) || isNaN(expectedNum)) {
+            log(`TriggerManager: Invalid number comparison - userValue: ${userValue}, expected: ${expectedValue}`);
+            return false;
+          }
+          return this.applyOperator(userNum, expectedNum, operator);
+        }
+        case "date": {
+          const userDate = userValue instanceof Date ? userValue : new Date(String(userValue));
+          const expectedDate = new Date(expectedValue);
+          if (isNaN(userDate.getTime()) || isNaN(expectedDate.getTime())) {
+            log(`TriggerManager: Invalid date comparison - userValue: ${userValue}, expected: ${expectedValue}`);
+            return false;
+          }
+          return this.applyOperator(userDate.getTime(), expectedDate.getTime(), operator);
+        }
+        default:
+          log(`TriggerManager: Unknown attribute type: ${attributeType}`);
+          return false;
+      }
+    } catch (error2) {
+      return false;
+    }
+  }
+  /**
+   * Applies the comparison operator to two values
+   */
+  applyOperator(userValue, expectedValue, operator) {
+    switch (operator) {
+      case "equals":
+        return userValue === expectedValue;
+      case "notEquals":
+        return userValue !== expectedValue;
+      case "greaterThan":
+        return userValue > expectedValue;
+      case "lessThan":
+        return userValue < expectedValue;
+      default:
+        return false;
+    }
+  }
   /**
    * Sets up click event listeners for all playlists with elementClicked triggers
    */
@@ -11787,7 +11991,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.41";
 const packageJson = {
   version
 };