streamit-player 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -5,9 +5,9 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased]
+## [Released]
 
-## [1.0.1] - 2026-09-12
+## [1.0.2] - 2026-09-12
 
 ### Fixed
 

package/dist/{Player-CqgNV9Pd.js → Player-BhwMyjyV.js}

@@ -7483,6 +7483,37 @@ const edgeStyles = [
 ];
 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 LitElement {
   constructor() {
     super(...arguments);
@@ -7811,6 +7842,26 @@ const _PlayerPlayer = class _PlayerPlayer extends LitElement {
     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 _a;
+    const canonical = (_a = this.constructor.attributeAliases) == null ? void 0 : _a.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;
   }
@@ -8132,6 +8183,29 @@ const _PlayerPlayer = class _PlayerPlayer extends LitElement {
     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 _a, _b, _c;
+    if (!changedProperties.has("config")) return;
+    const requested = ((_a = this.config) == null ? void 0 : _a.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 _a, _b, _c, _d, _e, _f, _g, _h, _i;
@@ -10757,8 +10831,7 @@ const _PlayerPlayer = class _PlayerPlayer extends LitElement {
     `;
   }
   renderDefaultLiveOverlay(player) {
-    var _a, _b;
-    const layoutMode = ((_b = (_a = player.config) == null ? void 0 : _a.layout) == null ? void 0 : _b.mode) || player.displayMode;
+    const layoutMode = player.displayMode;
     if (layoutMode !== "vertical" || !player.playerState.isLive) return "";
     return html`
       <div
@@ -11105,7 +11178,7 @@ const _PlayerPlayer = class _PlayerPlayer extends LitElement {
     `;
   }
   render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
     const {
       isPlaying,
       status,
@@ -11118,7 +11191,7 @@ const _PlayerPlayer = class _PlayerPlayer extends LitElement {
       loop
     } = this.playerState;
     const isVisible = this.controlsVisible || !isPlaying;
-    const layoutMode = ((_b = (_a = this.config) == null ? void 0 : _a.layout) == null ? void 0 : _b.mode) || this.displayMode;
+    const layoutMode = this.displayMode;
     return html`
       <div
         part="player-container"
@@ -11139,12 +11212,12 @@ const _PlayerPlayer = class _PlayerPlayer extends LitElement {
           <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() : html`
+        ${!currentSource && this.emptyStateSectionEnabled && ((_b = (_a = this.config) == null ? void 0 : _a.controls) == null ? void 0 : _b.emptyState) !== false ? this.renderEmptyState() : html`
               <!-- 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" ? html`
@@ -11217,22 +11290,22 @@ const _PlayerPlayer = class _PlayerPlayer extends LitElement {
               ${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) ? html`
+              ${!((_j = this.playerState) == null ? void 0 : _j.isAdPlaying) ? html`
                   <!-- Ambient top/bottom vignette scrim -->
                   <div part="scrim" class="scrim ${isVisible ? "visible" : ""}"></div>
 
@@ -11251,12 +11324,12 @@ const _PlayerPlayer = class _PlayerPlayer extends LitElement {
 
                   <!-- Control overlays wrapper -->
                   <div part="controls-overlay" class="controls-overlay">
-                    ${layoutMode === "custom" ? html`<slot></slot>` : layoutMode === "vertical" ? ((_n = (_m = this.config) == null ? void 0 : _m.controls) == null ? void 0 : _n.verticalControls) !== false && this.controlsSectionEnabled ? html`
+                    ${layoutMode === "custom" ? html`<slot></slot>` : layoutMode === "vertical" ? ((_l = (_k = this.config) == null ? void 0 : _k.controls) == null ? void 0 : _l.verticalControls) !== false && this.controlsSectionEnabled ? html`
                             <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}
@@ -11283,7 +11356,7 @@ const _PlayerPlayer = class _PlayerPlayer extends LitElement {
                               <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>
                 ` : ""}
 
@@ -11419,7 +11492,10 @@ __decorateClass([
   property({ type: String, attribute: "live-mode", reflect: true })
 ], PlayerPlayer.prototype, "liveMode");
 __decorateClass([
-  property({ type: Object })
+  property({
+    type: Object,
+    converter: { fromAttribute: parseConfigAttribute }
+  })
 ], PlayerPlayer.prototype, "config");
 __decorateClass([
   property({ type: Boolean, attribute: "precise-seek", reflect: true })

package/dist/{Player-DrKG8tPQ.cjs → Player-CgkT9GAK.cjs}

@@ -7484,6 +7484,37 @@ const edgeStyles = [
 ];
 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 lit.LitElement {
   constructor() {
     super(...arguments);
@@ -7812,6 +7843,26 @@ const _PlayerPlayer = class _PlayerPlayer extends lit.LitElement {
     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 _a;
+    const canonical = (_a = this.constructor.attributeAliases) == null ? void 0 : _a.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;
   }
@@ -8133,6 +8184,29 @@ const _PlayerPlayer = class _PlayerPlayer extends lit.LitElement {
     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 _a, _b, _c;
+    if (!changedProperties.has("config")) return;
+    const requested = ((_a = this.config) == null ? void 0 : _a.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 _a, _b, _c, _d, _e, _f, _g, _h, _i;
@@ -10758,8 +10832,7 @@ const _PlayerPlayer = class _PlayerPlayer extends lit.LitElement {
     `;
   }
   renderDefaultLiveOverlay(player) {
-    var _a, _b;
-    const layoutMode = ((_b = (_a = player.config) == null ? void 0 : _a.layout) == null ? void 0 : _b.mode) || player.displayMode;
+    const layoutMode = player.displayMode;
     if (layoutMode !== "vertical" || !player.playerState.isLive) return "";
     return lit.html`
       <div
@@ -11106,7 +11179,7 @@ const _PlayerPlayer = class _PlayerPlayer extends lit.LitElement {
     `;
   }
   render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
     const {
       isPlaying,
       status,
@@ -11119,7 +11192,7 @@ const _PlayerPlayer = class _PlayerPlayer extends lit.LitElement {
       loop
     } = this.playerState;
     const isVisible = this.controlsVisible || !isPlaying;
-    const layoutMode = ((_b = (_a = this.config) == null ? void 0 : _a.layout) == null ? void 0 : _b.mode) || this.displayMode;
+    const layoutMode = this.displayMode;
     return lit.html`
       <div
         part="player-container"
@@ -11140,12 +11213,12 @@ const _PlayerPlayer = class _PlayerPlayer extends lit.LitElement {
           <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() : lit.html`
+        ${!currentSource && this.emptyStateSectionEnabled && ((_b = (_a = this.config) == null ? void 0 : _a.controls) == null ? void 0 : _b.emptyState) !== false ? this.renderEmptyState() : lit.html`
               <!-- 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" ? lit.html`
@@ -11218,22 +11291,22 @@ const _PlayerPlayer = class _PlayerPlayer extends lit.LitElement {
               ${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) ? lit.html`
+              ${!((_j = this.playerState) == null ? void 0 : _j.isAdPlaying) ? lit.html`
                   <!-- Ambient top/bottom vignette scrim -->
                   <div part="scrim" class="scrim ${isVisible ? "visible" : ""}"></div>
 
@@ -11252,12 +11325,12 @@ const _PlayerPlayer = class _PlayerPlayer extends lit.LitElement {
 
                   <!-- Control overlays wrapper -->
                   <div part="controls-overlay" class="controls-overlay">
-                    ${layoutMode === "custom" ? lit.html`<slot></slot>` : layoutMode === "vertical" ? ((_n = (_m = this.config) == null ? void 0 : _m.controls) == null ? void 0 : _n.verticalControls) !== false && this.controlsSectionEnabled ? lit.html`
+                    ${layoutMode === "custom" ? lit.html`<slot></slot>` : layoutMode === "vertical" ? ((_l = (_k = this.config) == null ? void 0 : _k.controls) == null ? void 0 : _l.verticalControls) !== false && this.controlsSectionEnabled ? lit.html`
                             <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}
@@ -11284,7 +11357,7 @@ const _PlayerPlayer = class _PlayerPlayer extends lit.LitElement {
                               <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>
                 ` : ""}
 
@@ -11420,7 +11493,10 @@ __decorateClass([
   decorators_js.property({ type: String, attribute: "live-mode", reflect: true })
 ], PlayerPlayer.prototype, "liveMode");
 __decorateClass([
-  decorators_js.property({ type: Object })
+  decorators_js.property({
+    type: Object,
+    converter: { fromAttribute: parseConfigAttribute }
+  })
 ], PlayerPlayer.prototype, "config");
 __decorateClass([
   decorators_js.property({ type: Boolean, attribute: "precise-seek", reflect: true })

package/dist/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Player = require("./Player-DrKG8tPQ.cjs");
+const Player = require("./Player-CgkT9GAK.cjs");
 const PlayerController = require("./PlayerController-BaQ27TT9.cjs");
 const core_index = require("./core/index.cjs");
 exports.IconRegistry = Player.IconRegistry;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { I, P, a, b, c, d, e, f, g, T, h, r } from "./Player-CqgNV9Pd.js";
+import { I, P, a, b, c, d, e, f, g, T, h, r } from "./Player-BhwMyjyV.js";
 import { A, a as a2, b as b2, c as c2, d as d2, e as e2, f as f2, g as g2, h as h2, i, j, D, H, I as I2, K, P as P2, S, k, l, m, n, o, T as T2, p, V, q, r as r2, s, t, u, v, w, x, y, z, B, C } from "./PlayerController-D68pc3mj.js";
 import { DrmValidator } from "./core/index.js";
 export {

package/dist/streamit-player.esm.js

@@ -22074,6 +22074,37 @@ const edgeStyles = [
 ];
 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);
@@ -22402,6 +22433,26 @@ const _PlayerPlayer = class _PlayerPlayer extends i$1 {
     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;
   }
@@ -22723,6 +22774,29 @@ const _PlayerPlayer = class _PlayerPlayer extends i$1 {
     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;
@@ -25348,8 +25422,7 @@ const _PlayerPlayer = class _PlayerPlayer extends i$1 {
     `;
   }
   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
@@ -25696,7 +25769,7 @@ const _PlayerPlayer = class _PlayerPlayer extends i$1 {
     `;
   }
   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,
@@ -25709,7 +25782,7 @@ const _PlayerPlayer = class _PlayerPlayer extends i$1 {
       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"
@@ -25730,12 +25803,12 @@ const _PlayerPlayer = class _PlayerPlayer extends i$1 {
           <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`
@@ -25808,22 +25881,22 @@ const _PlayerPlayer = class _PlayerPlayer extends i$1 {
               ${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>
 
@@ -25842,12 +25915,12 @@ const _PlayerPlayer = class _PlayerPlayer extends i$1 {
 
                   <!-- 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}
@@ -25874,7 +25947,7 @@ const _PlayerPlayer = class _PlayerPlayer extends i$1 {
                               <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>
                 ` : ""}
 
@@ -26010,7 +26083,10 @@ __decorateClass([
   n2({ type: String, attribute: "live-mode", reflect: true })
 ], PlayerPlayer.prototype, "liveMode");
 __decorateClass([
-  n2({ type: Object })
+  n2({
+    type: Object,
+    converter: { fromAttribute: parseConfigAttribute }
+  })
 ], PlayerPlayer.prototype, "config");
 __decorateClass([
   n2({ type: Boolean, attribute: "precise-seek", reflect: true })