streamit-player 1.0.1 → 1.0.3

package/dist/streamit-player.iife.js

@@ -22076,6 +22076,37 @@ var StreamitPlayer = function(exports) {
   ];
   const STANDARD_SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4];
   const VERTICAL_SPEEDS = [0.5, 1, 2];
+  function buildAttributeAliases(canonical) {
+    const aliases = /* @__PURE__ */ new Map();
+    for (const name of canonical) {
+      if (!name.includes("-")) continue;
+      for (const alias of [name.replace(/-/g, ""), name.replace(/-/g, "_")]) {
+        if (alias !== name && !canonical.includes(alias)) {
+          aliases.set(alias, name);
+        }
+      }
+    }
+    return aliases;
+  }
+  function parseConfigAttribute(value) {
+    if (value === null) return void 0;
+    const trimmed = value.trim();
+    if (trimmed === "") return void 0;
+    if (trimmed.startsWith("[object ")) {
+      console.warn(
+        `[streamit-player] The "config" attribute received a stringified object ("${trimmed}") and has been ignored. Pass config as a DOM property (element.config = {...}, or .config=\${...} / :config="..." in a framework template) rather than as an attribute.`
+      );
+      return void 0;
+    }
+    try {
+      return JSON.parse(trimmed);
+    } catch {
+      console.warn(
+        '[streamit-player] The "config" attribute is not valid JSON and has been ignored. Pass config as a DOM property instead.'
+      );
+      return void 0;
+    }
+  }
   const _PlayerPlayer = class _PlayerPlayer extends i$1 {
     constructor() {
       super(...arguments);
@@ -22404,6 +22435,26 @@ var StreamitPlayer = function(exports) {
       const settingsLabels = ((_c = (_b = this.config) == null ? void 0 : _b.settings) == null ? void 0 : _c.labels) || {};
       return settingsLabels[key] || localeConfig[key] || defaultText;
     }
+    static get observedAttributes() {
+      const canonical = super.observedAttributes;
+      if (!Object.prototype.hasOwnProperty.call(this, "attributeAliases")) {
+        this.attributeAliases = buildAttributeAliases(canonical);
+      }
+      return [...canonical, ...this.attributeAliases.keys()];
+    }
+    attributeChangedCallback(name, old, value) {
+      var _a2;
+      const canonical = (_a2 = this.constructor.attributeAliases) == null ? void 0 : _a2.get(name);
+      if (canonical) {
+        if (value === null) {
+          this.removeAttribute(canonical);
+        } else if (this.getAttribute(canonical) !== value) {
+          this.setAttribute(canonical, value);
+        }
+        return;
+      }
+      super.attributeChangedCallback(name, old, value);
+    }
     get controllerInstance() {
       return this.controller;
     }
@@ -22725,6 +22776,29 @@ var StreamitPlayer = function(exports) {
       if (changedProperties.has("liveMode") && this.controller) {
         this.controller.setLiveMode(this.liveMode);
       }
+      this.adoptDisplayModeFromConfig(changedProperties);
+    }
+    /**
+     * `displayMode` is the single source of truth for the layout: the host
+     * stylesheet keys off the attribute it reflects and render() picks the
+     * control set from it. `config.displayMode` and `config.layout.mode` are
+     * equivalent ways to ask for a mode, so they are folded into the property
+     * here - before the first render - rather than being read separately further
+     * down, which is how a 9:16 host could end up wearing the standard control
+     * bar.
+     *
+     * Only a config that changes the mode it asks for wins, so an unrelated
+     * config update never clobbers a display-mode set on the element itself.
+     */
+    adoptDisplayModeFromConfig(changedProperties) {
+      var _a2, _b, _c;
+      if (!changedProperties.has("config")) return;
+      const requested = ((_a2 = this.config) == null ? void 0 : _a2.displayMode) || ((_c = (_b = this.config) == null ? void 0 : _b.layout) == null ? void 0 : _c.mode);
+      if (!requested || requested === this.configRequestedMode) return;
+      this.configRequestedMode = requested;
+      if (this.displayMode !== requested) {
+        this.displayMode = requested;
+      }
     }
     firstUpdated() {
       var _a2, _b, _c, _d, _e, _f, _g, _h, _i;
@@ -25350,8 +25424,7 @@ var StreamitPlayer = function(exports) {
     `;
     }
     renderDefaultLiveOverlay(player) {
-      var _a2, _b;
-      const layoutMode = ((_b = (_a2 = player.config) == null ? void 0 : _a2.layout) == null ? void 0 : _b.mode) || player.displayMode;
+      const layoutMode = player.displayMode;
       if (layoutMode !== "vertical" || !player.playerState.isLive) return "";
       return b`
       <div
@@ -25698,7 +25771,7 @@ var StreamitPlayer = function(exports) {
     `;
     }
     render() {
-      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
+      var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
       const {
         isPlaying,
         status,
@@ -25711,7 +25784,7 @@ var StreamitPlayer = function(exports) {
         loop
       } = this.playerState;
       const isVisible = this.controlsVisible || !isPlaying;
-      const layoutMode = ((_b = (_a2 = this.config) == null ? void 0 : _a2.layout) == null ? void 0 : _b.mode) || this.displayMode;
+      const layoutMode = this.displayMode;
       return b`
       <div
         part="player-container"
@@ -25732,12 +25805,12 @@ var StreamitPlayer = function(exports) {
           <canvas part="transition-canvas" class="transition-canvas"></canvas>
         </div>
 
-        ${!currentSource && this.emptyStateSectionEnabled && ((_d = (_c = this.config) == null ? void 0 : _c.controls) == null ? void 0 : _d.emptyState) !== false ? this.renderEmptyState() : b`
+        ${!currentSource && this.emptyStateSectionEnabled && ((_b = (_a2 = this.config) == null ? void 0 : _a2.controls) == null ? void 0 : _b.emptyState) !== false ? this.renderEmptyState() : b`
               <!-- Custom overlay slot -->
               <slot name="top-overlay"></slot>
 
               <!-- Center Play Button Overlay -->
-              ${!((_e = this.playerState) == null ? void 0 : _e.isAdPlaying) ? this.renderOverlay("center-play", (p2) => this.renderDefaultCenterPlayOverlay(p2)) : ""}
+              ${!((_c = this.playerState) == null ? void 0 : _c.isAdPlaying) ? this.renderOverlay("center-play", (p2) => this.renderDefaultCenterPlayOverlay(p2)) : ""}
 
               <!-- Audio only cover -->
               ${layoutMode === "audio-only" ? b`
@@ -25810,22 +25883,22 @@ var StreamitPlayer = function(exports) {
               ${isBuffering && !error ? this.renderOverlay("buffering", (p2) => this.renderDefaultBufferingOverlay(p2)) : ""}
 
               <!-- Centered Replay Overlay (not shown in vertical mode) -->
-              ${status === "ended" && !this.playerState.isLive && this.displayMode !== "vertical" && !loop && !((_f = this.playerState) == null ? void 0 : _f.isAdPlaying) ? this.renderOverlay("replay", (p2) => this.renderDefaultReplayOverlay(p2)) : ""}
+              ${status === "ended" && !this.playerState.isLive && this.displayMode !== "vertical" && !loop && !((_d = this.playerState) == null ? void 0 : _d.isAdPlaying) ? this.renderOverlay("replay", (p2) => this.renderDefaultReplayOverlay(p2)) : ""}
 
               <!-- Ambient Tap Skip / Volume / Playback Speed gesture feedback ripples -->
-              ${this.tapFeedback && !((_g = this.playerState) == null ? void 0 : _g.isAdPlaying) ? this.renderOverlay(
+              ${this.tapFeedback && !((_e = this.playerState) == null ? void 0 : _e.isAdPlaying) ? this.renderOverlay(
         "seek",
         (p2, dir) => this.renderDefaultSeekOverlay(p2, dir),
         this.tapFeedback
       ) : ""}
-              ${this.playPauseFeedback && !((_h = this.playerState) == null ? void 0 : _h.isAdPlaying) ? this.renderOverlay("play-pause", (p2) => this.renderDefaultPlayPauseOverlay(p2)) : ""}
-              ${this.activeVolumeFeedback && !((_i = this.playerState) == null ? void 0 : _i.isAdPlaying) ? this.renderOverlay("volume", (p2) => this.renderDefaultVolumeOverlay(p2)) : ""}
-              ${this.activeSpeedFeedback && !((_j = this.playerState) == null ? void 0 : _j.isAdPlaying) ? this.renderOverlay("speed", (p2) => this.renderDefaultSpeedOverlay(p2)) : ""}
+              ${this.playPauseFeedback && !((_f = this.playerState) == null ? void 0 : _f.isAdPlaying) ? this.renderOverlay("play-pause", (p2) => this.renderDefaultPlayPauseOverlay(p2)) : ""}
+              ${this.activeVolumeFeedback && !((_g = this.playerState) == null ? void 0 : _g.isAdPlaying) ? this.renderOverlay("volume", (p2) => this.renderDefaultVolumeOverlay(p2)) : ""}
+              ${this.activeSpeedFeedback && !((_h = this.playerState) == null ? void 0 : _h.isAdPlaying) ? this.renderOverlay("speed", (p2) => this.renderDefaultSpeedOverlay(p2)) : ""}
 
               <!-- Persistent Live Badge for Vertical Player -->
-              ${layoutMode === "vertical" && this.playerState.isLive && !((_k = this.playerState) == null ? void 0 : _k.isAdPlaying) ? this.renderOverlay("live", (p2) => this.renderDefaultLiveOverlay(p2)) : ""}
+              ${layoutMode === "vertical" && this.playerState.isLive && !((_i = this.playerState) == null ? void 0 : _i.isAdPlaying) ? this.renderOverlay("live", (p2) => this.renderDefaultLiveOverlay(p2)) : ""}
 
-              ${!((_l = this.playerState) == null ? void 0 : _l.isAdPlaying) ? b`
+              ${!((_j = this.playerState) == null ? void 0 : _j.isAdPlaying) ? b`
                   <!-- Ambient top/bottom vignette scrim -->
                   <div part="scrim" class="scrim ${isVisible ? "visible" : ""}"></div>
 
@@ -25844,12 +25917,12 @@ var StreamitPlayer = function(exports) {
 
                   <!-- Control overlays wrapper -->
                   <div part="controls-overlay" class="controls-overlay">
-                    ${layoutMode === "custom" ? b`<slot></slot>` : layoutMode === "vertical" ? ((_n = (_m = this.config) == null ? void 0 : _m.controls) == null ? void 0 : _n.verticalControls) !== false && this.controlsSectionEnabled ? b`
+                    ${layoutMode === "custom" ? b`<slot></slot>` : layoutMode === "vertical" ? ((_l = (_k = this.config) == null ? void 0 : _k.controls) == null ? void 0 : _l.verticalControls) !== false && this.controlsSectionEnabled ? b`
                             <player-vertical-controls
                               part="vertical-controls"
                               exportparts="vertical-controls-container, action-rail, rail-btn, seekbar, seekbar-container, hover-tooltip, tooltip-marker-label, thumbnail-container, thumbnail-preview, tooltip-time-text, track, buffer-bar, progress-bar, handle, marker, time-display"
-                              ?hideCurrentTime=${((_p = (_o = this.config) == null ? void 0 : _o.controls) == null ? void 0 : _p.currentTime) === false}
-                              ?hideDuration=${((_r = (_q = this.config) == null ? void 0 : _q.controls) == null ? void 0 : _r.duration) === false}
+                              ?hideCurrentTime=${((_n = (_m = this.config) == null ? void 0 : _m.controls) == null ? void 0 : _n.currentTime) === false}
+                              ?hideDuration=${((_p = (_o = this.config) == null ? void 0 : _o.controls) == null ? void 0 : _p.duration) === false}
                               .currentTime=${currentTime}
                               .duration=${duration}
                               .bufferedRanges=${bufferedRanges}
@@ -25876,7 +25949,7 @@ var StreamitPlayer = function(exports) {
                               <slot name="social-actions" slot="social-actions"></slot>
                               <slot name="bottom-actions" slot="bottom-actions"></slot>
                             </player-vertical-controls>
-                          ` : "" : ((_t = (_s = this.config) == null ? void 0 : _s.controls) == null ? void 0 : _t.controlsBar) !== false && this.controlsSectionEnabled ? this.renderStandardControls() : ""}
+                          ` : "" : ((_r = (_q = this.config) == null ? void 0 : _q.controls) == null ? void 0 : _r.controlsBar) !== false && this.controlsSectionEnabled ? this.renderStandardControls() : ""}
                   </div>
                 ` : ""}
 
@@ -26012,7 +26085,10 @@ var StreamitPlayer = function(exports) {
     n({ type: String, attribute: "live-mode", reflect: true })
   ], PlayerPlayer.prototype, "liveMode");
   __decorateClass([
-    n({ type: Object })
+    n({
+      type: Object,
+      converter: { fromAttribute: parseConfigAttribute }
+    })
   ], PlayerPlayer.prototype, "config");
   __decorateClass([
     n({ type: Boolean, attribute: "precise-seek", reflect: true })