@livepeer-frameworks/player-wc 0.1.3 → 0.1.5

package/dist/types/components/fw-player-controls.d.ts

@@ -9,6 +9,7 @@ export declare class FwPlayerControls extends LitElement {
     pc: PlayerControllerHost;
     playbackMode: PlaybackMode;
     isContentLive: boolean;
+    devMode: boolean;
     showStatsButton: boolean;
     isStatsOpen: boolean;
     private _settingsOpen;

package/dist/types/components/fw-player.d.ts

@@ -14,6 +14,8 @@ export declare class FwPlayer extends LitElement {
     autoplay: boolean;
     muted: boolean;
     controls: boolean;
+    stockControls: boolean;
+    nativeControls: boolean;
     debug: boolean;
     devMode: boolean;
     thumbnailUrl?: string;
@@ -45,6 +47,8 @@ export declare class FwPlayer extends LitElement {
     private _closeContextMenu;
     private _getQueryRoot;
     private _getContextMenuElement;
+    private _getContextMenuBounds;
+    private _toLocalContextMenuPoint;
     private _getContextMenuItems;
     private _focusFirstContextMenuItem;
     private _focusPlaybackModeTrigger;

package/dist/types/components/fw-settings-menu.d.ts

@@ -21,6 +21,7 @@ export declare class FwSettingsMenu extends LitElement {
     private _handleSpeedChange;
     private _handleQualityChange;
     private _handleCaptionChange;
+    private _deriveFallbackQualities;
     protected render(): import("lit").TemplateResult<1> | typeof nothing;
 }
 declare global {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepeer-frameworks/player-wc",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "type": "module",
   "description": "Lit Web Components for FrameWorks streaming player — <fw-player> custom element with full UI",
   "main": "dist/cjs/index.js",
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "lit": "^3.2.0",
-    "@livepeer-frameworks/player-core": "0.1.3"
+    "@livepeer-frameworks/player-core": "0.1.4"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^29.0.0",

package/src/components/fw-dev-mode-panel.ts

@@ -69,6 +69,7 @@ export class FwDevModePanel extends LitElement {
       :host {
         display: block;
         height: 100%;
+        min-height: 0;
       }
     `,
   ];

package/src/components/fw-player-controls.ts

@@ -48,6 +48,7 @@ export class FwPlayerControls extends LitElement {
   @property({ attribute: false }) pc!: PlayerControllerHost;
   @property({ type: String }) playbackMode: PlaybackMode = "auto";
   @property({ type: Boolean, attribute: "is-content-live" }) isContentLive = false;
+  @property({ type: Boolean, attribute: "dev-mode" }) devMode = false;
   @property({ type: Boolean, attribute: "show-stats-button" }) showStatsButton = false;
   @property({ type: Boolean, attribute: "is-stats-open" }) isStatsOpen = false;
 
@@ -314,6 +315,13 @@ export class FwPlayerControls extends LitElement {
     const state = this.pc.s;
     const disabled = !state.videoElement;
     const context = this._getSeekingContext();
+    const shouldShowControls =
+      state.shouldShowControls ||
+      state.isPaused ||
+      !state.hasPlaybackStarted ||
+      state.shouldShowIdleScreen ||
+      !!state.error ||
+      this._settingsOpen;
 
     const timeDisplay = formatTimeDisplay({
       isLive: context.isLive,
@@ -331,8 +339,8 @@ export class FwPlayerControls extends LitElement {
         class=${classMap({
           "fw-player-surface": true,
           "fw-controls-wrapper": true,
-          "fw-controls-wrapper--visible": state.shouldShowControls,
-          "fw-controls-wrapper--hidden": !state.shouldShowControls,
+          "fw-controls-wrapper--visible": shouldShowControls,
+          "fw-controls-wrapper--hidden": !shouldShowControls,
         })}
       >
         <div class="fw-control-bar" @click=${(event: Event) => event.stopPropagation()}>
@@ -453,7 +461,6 @@ export class FwPlayerControls extends LitElement {
                     </div>
                   `
                 : nothing}
-
               <div class="fw-control-group fw-settings-anchor">
                 <button
                   type="button"

package/src/components/fw-player.ts

@@ -27,7 +27,11 @@ export class FwPlayer extends LitElement {
   @property({ attribute: "auth-token" }) authToken?: string;
   @property({ type: Boolean }) autoplay = true;
   @property({ type: Boolean }) muted = true;
+  // React/Svelte use `stockControls` for native controls. Keep `controls` as a
+  // compatibility no-op so WC parity does not hide custom controls/seekbar.
   @property({ type: Boolean }) controls = false;
+  @property({ type: Boolean, attribute: "stock-controls" }) stockControls = false;
+  @property({ type: Boolean, attribute: "native-controls" }) nativeControls = false;
   @property({ type: Boolean }) debug = false;
   @property({ type: Boolean, attribute: "dev-mode" }) devMode = false;
   @property({ attribute: "thumbnail-url" }) thumbnailUrl?: string;
@@ -78,6 +82,7 @@ export class FwPlayer extends LitElement {
       .player-area--dev {
         flex: 1;
         min-width: 0;
+        min-height: 0;
       }
     `,
   ];
@@ -93,7 +98,8 @@ export class FwPlayer extends LitElement {
       changed.has("authToken") ||
       changed.has("autoplay") ||
       changed.has("muted") ||
-      changed.has("controls") ||
+      changed.has("stockControls") ||
+      changed.has("nativeControls") ||
       changed.has("debug") ||
       changed.has("thumbnailUrl") ||
       changed.has("endpoints")
@@ -107,7 +113,7 @@ export class FwPlayer extends LitElement {
         authToken: this.authToken,
         autoplay: this.autoplay,
         muted: this.muted,
-        controls: this.controls,
+        controls: this.stockControls || this.nativeControls,
         poster: this.thumbnailUrl,
         debug: this.debug,
       });
@@ -199,6 +205,31 @@ export class FwPlayer extends LitElement {
   private _getContextMenuElement = () =>
     this._getQueryRoot()?.querySelector<HTMLElement>('[data-context-menu="true"]') ?? null;
 
+  private _getContextMenuBounds = () => {
+    const root = this._getQueryRoot()?.querySelector<HTMLElement>('[part="root"]');
+    const rect = root?.getBoundingClientRect() ?? this.getBoundingClientRect();
+
+    const width = rect.width > 0 ? rect.width : window.innerWidth;
+    const height = rect.height > 0 ? rect.height : window.innerHeight;
+
+    return {
+      left: rect.left,
+      top: rect.top,
+      right: rect.left + width,
+      bottom: rect.top + height,
+      width,
+      height,
+    };
+  };
+
+  private _toLocalContextMenuPoint = (clientX: number, clientY: number) => {
+    const bounds = this._getContextMenuBounds();
+    return {
+      x: clientX - bounds.left,
+      y: clientY - bounds.top,
+    };
+  };
+
   private _getContextMenuItems = (level: "root" | "submenu" = this._contextMenuActiveLevel) =>
     Array.from(
       this._getQueryRoot()?.querySelectorAll<HTMLButtonElement>(
@@ -241,8 +272,9 @@ export class FwPlayer extends LitElement {
 
   private _clampContextMenuPosition = (x: number, y: number, width: number, height: number) => {
     const viewportPadding = 8;
-    const maxX = Math.max(viewportPadding, window.innerWidth - width - viewportPadding);
-    const maxY = Math.max(viewportPadding, window.innerHeight - height - viewportPadding);
+    const bounds = this._getContextMenuBounds();
+    const maxX = Math.max(viewportPadding, bounds.width - width - viewportPadding);
+    const maxY = Math.max(viewportPadding, bounds.height - height - viewportPadding);
 
     return {
       x: Math.max(viewportPadding, Math.min(x, maxX)),
@@ -278,15 +310,17 @@ export class FwPlayer extends LitElement {
     if (this._contextMenuOpenSubmenu !== "playback-mode") return;
     const menu = this._getContextMenuElement();
     if (!menu) return;
+    const bounds = this._getContextMenuBounds();
     const rect = menu.getBoundingClientRect();
     const estimatedSubmenuWidth = 190;
     this._contextMenuSubmenuSide =
-      rect.right + estimatedSubmenuWidth > window.innerWidth - 8 ? "left" : "right";
+      rect.right + estimatedSubmenuWidth > bounds.right - 8 ? "left" : "right";
   };
 
-  private _openContextMenu = (x: number, y: number) => {
-    const next = this._clampContextMenuPosition(x, y, 220, 200);
-    this._contextMenuSide = this._resolveContextMenuSide(x, y, next.x, next.y);
+  private _openContextMenu = (clientX: number, clientY: number) => {
+    const local = this._toLocalContextMenuPoint(clientX, clientY);
+    const next = this._clampContextMenuPosition(local.x, local.y, 220, 200);
+    this._contextMenuSide = this._resolveContextMenuSide(local.x, local.y, next.x, next.y);
     this._contextMenuX = next.x;
     this._contextMenuY = next.y;
     this._contextMenuMounted = true;
@@ -488,7 +522,11 @@ export class FwPlayer extends LitElement {
   }
 
   private get _useStockControls() {
-    return this.controls || this.pc.s.currentPlayerInfo?.shortname === "mist-legacy";
+    return (
+      this.stockControls ||
+      this.nativeControls ||
+      this.pc.s.currentPlayerInfo?.shortname === "mist-legacy"
+    );
   }
 
   // ---- Public API methods ----
@@ -773,6 +811,7 @@ export class FwPlayer extends LitElement {
                   .pc=${this.pc}
                   .playbackMode=${this.playbackMode}
                   .isContentLive=${s.isEffectivelyLive}
+                  .devMode=${this.devMode}
                   .isStatsOpen=${this._isStatsOpen}
                   @fw-stats-toggle=${() => {
                     this._isStatsOpen = !this._isStatsOpen;
@@ -814,7 +853,8 @@ export class FwPlayer extends LitElement {
               role="menu"
               aria-label="Player options"
               tabindex="-1"
-              style="position: fixed; left: ${this._contextMenuX}px; top: ${this._contextMenuY}px;"
+              style="position: absolute; left: ${this._contextMenuX}px; top: ${this
+                ._contextMenuY}px;"
               @contextmenu=${(e: MouseEvent) => e.preventDefault()}
               @keydown=${this._handleContextMenuKeyDown}
             >

package/src/components/fw-settings-menu.ts

@@ -109,13 +109,53 @@ export class FwSettingsMenu extends LitElement {
     this._close();
   }
 
+  private _deriveFallbackQualities(): Array<{
+    id: string;
+    label: string;
+    bitrate?: number;
+    width?: number;
+    height?: number;
+    isAuto?: boolean;
+    active?: boolean;
+  }> {
+    const tracks = (
+      this.pc?.s.streamState?.streamInfo as
+        | {
+            meta?: {
+              tracks?: Record<
+                string,
+                { type?: string; codec?: string; width?: number; height?: number; bps?: number }
+              >;
+            };
+          }
+        | undefined
+    )?.meta?.tracks;
+
+    if (!tracks) {
+      return [];
+    }
+
+    return Object.entries(tracks)
+      .filter(([, track]) => track?.type === "video")
+      .map(([id, track]) => ({
+        id,
+        label: track.height ? `${track.height}p` : (track.codec ?? id),
+        width: track.width,
+        height: track.height,
+        bitrate: track.bps,
+      }))
+      .sort((a, b) => (b.height ?? 0) - (a.height ?? 0));
+  }
+
   protected render() {
     if (!this.open) {
       return nothing;
     }
 
     const state = this.pc.s;
-    const qualities = state.qualities ?? [];
+    const controllerQualities = state.qualities ?? [];
+    const qualities =
+      controllerQualities.length > 0 ? controllerQualities : this._deriveFallbackQualities();
     const textTracks = state.textTracks ?? [];
     const activeQuality =
       this.qualityValue ?? qualities.find((quality) => quality.active)?.id ?? "auto";

package/src/controllers/player-controller-host.ts

@@ -216,7 +216,18 @@ export class PlayerControllerHost implements ReactiveController {
 
     u.push(
       controller.on("timeUpdate", ({ currentTime, duration }) => {
-        this.update({ currentTime, duration });
+        const next: Partial<PlayerControllerHostState> = {
+          currentTime,
+          duration,
+          shouldShowControls: controller.shouldShowControls(),
+        };
+        if (this.s.qualities.length === 0) {
+          const qualities = controller.getQualities();
+          if (qualities.length > 0) {
+            next.qualities = qualities;
+          }
+        }
+        this.update(next);
         this.dispatchEvent("fw-time-update", { currentTime, duration });
       })
     );
@@ -252,6 +263,7 @@ export class PlayerControllerHost implements ReactiveController {
           textTracks: controller.getTextTracks(),
         });
         this.dispatchEvent("fw-ready", { videoElement });
+        this.syncState();
 
         const handleVideoEvent = () => {
           if (this.controller?.shouldSuppressVideoEvents?.()) return;
@@ -278,6 +290,7 @@ export class PlayerControllerHost implements ReactiveController {
           qualities: controller.getQualities(),
           textTracks: controller.getTextTracks(),
         });
+        this.syncState();
       })
     );
 
@@ -458,15 +471,24 @@ export class PlayerControllerHost implements ReactiveController {
 
   handleMouseEnter() {
     this.controller?.handleMouseEnter();
+    this.update({ isHovering: true, shouldShowControls: true });
   }
   handleMouseLeave() {
     this.controller?.handleMouseLeave();
+    this.update({
+      isHovering: false,
+      shouldShowControls: this.controller?.shouldShowControls() ?? false,
+    });
   }
   handleMouseMove() {
     this.controller?.handleMouseMove();
+    if (this.controller) {
+      this.update({ shouldShowControls: this.controller.shouldShowControls() });
+    }
   }
   handleTouchStart() {
     this.controller?.handleTouchStart();
+    this.update({ shouldShowControls: true });
   }
 
   async setDevModeOptions(options: {

package/src/styles/shared-styles.ts

@@ -442,11 +442,20 @@ export const sharedStyles = css`
   .fw-context-menu-item {
     position: relative;
     display: flex;
+    width: 100%;
+    justify-content: flex-start;
+    gap: 0.5rem;
     cursor: pointer;
     user-select: none;
     align-items: center;
     padding: 0.5rem 0.75rem;
     font-size: 0.875rem;
+    text-align: left;
+    font: inherit;
+    border: none;
+    background: transparent;
+    appearance: none;
+    -webkit-appearance: none;
     outline: none;
     color: hsl(var(--tn-fg));
     transition:
@@ -485,11 +494,20 @@ export const sharedStyles = css`
   .fw-context-menu-checkbox {
     position: relative;
     display: flex;
+    width: 100%;
+    justify-content: flex-start;
+    gap: 0.5rem;
     cursor: pointer;
     user-select: none;
     align-items: center;
     padding: 0.5rem 0.5rem 0.5rem 2rem;
     font-size: 0.875rem;
+    text-align: left;
+    font: inherit;
+    border: none;
+    background: transparent;
+    appearance: none;
+    -webkit-appearance: none;
     outline: none;
     color: hsl(var(--tn-fg));
     transition: