@livepeer-frameworks/player-wc 0.1.9 → 0.2.2

package/src/components/controls/fw-play-button.ts

@@ -0,0 +1,75 @@
+import { LitElement, html, css } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
+
+@customElement("fw-play-button")
+export class FwPlayButton extends LitElement {
+  @state() private isPlaying = false;
+  private _player: any = null;
+  private _cleanup: (() => void) | null = null;
+
+  private get _t(): TranslateFn {
+    return this._player?.pc?.t ?? createTranslator({ locale: "en" });
+  }
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+    }
+  `;
+
+  private _resolvePlayer(): HTMLElement | null {
+    const forId = this.getAttribute("for");
+    if (forId) return document.getElementById(forId);
+    return this.closest("fw-player");
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._player = this._resolvePlayer();
+    if (!this._player) return;
+    const pc = this._player.pc;
+    if (!pc) return;
+
+    this.isPlaying = pc.s.isPlaying;
+    const handler = () => {
+      this.isPlaying = pc.s.isPlaying;
+    };
+    this._player.addEventListener("fw-state-change", handler);
+    this._player.addEventListener("fw-ready", handler);
+    this._cleanup = () => {
+      this._player?.removeEventListener("fw-state-change", handler);
+      this._player?.removeEventListener("fw-ready", handler);
+    };
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._cleanup?.();
+    this._cleanup = null;
+  }
+
+  private handleClick() {
+    this._player?.pc?.togglePlay();
+  }
+
+  render() {
+    return html`<button
+      type="button"
+      class="fw-btn-flush"
+      aria-label=${this.isPlaying ? this._t("pause") : this._t("play")}
+      aria-pressed=${this.isPlaying}
+      title=${this.isPlaying ? this._t("pause") : this._t("play")}
+      @click=${this.handleClick}
+    >
+      ${this.isPlaying ? "\u23F8" : "\u25B6"}
+    </button>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-play-button": FwPlayButton;
+  }
+}

package/src/components/controls/fw-skip-button.ts

@@ -0,0 +1,59 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
+
+@customElement("fw-skip-button")
+export class FwSkipButton extends LitElement {
+  @property({ type: String }) direction: "back" | "forward" = "forward";
+  @property({ type: Number }) seconds = 10;
+  private _player: any = null;
+
+  private get _t(): TranslateFn {
+    return this._player?.pc?.t ?? createTranslator({ locale: "en" });
+  }
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+    }
+  `;
+
+  private _resolvePlayer(): HTMLElement | null {
+    const forId = this.getAttribute("for");
+    if (forId) return document.getElementById(forId);
+    return this.closest("fw-player");
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._player = this._resolvePlayer();
+  }
+
+  private handleClick() {
+    const delta = this.direction === "back" ? -this.seconds : this.seconds;
+    this._player?.pc?.seekBy(delta);
+  }
+
+  render() {
+    const label = this.direction === "back" ? this._t("skipBackward") : this._t("skipForward");
+    const icon = this.direction === "back" ? "\u23EA" : "\u23E9";
+    const shortcut = this.direction === "back" ? "j" : "l";
+
+    return html`<button
+      type="button"
+      class="fw-btn-flush"
+      aria-label=${label}
+      title="${label} (${shortcut})"
+      @click=${this.handleClick}
+    >
+      ${icon} ${this.seconds}s
+    </button>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-skip-button": FwSkipButton;
+  }
+}

package/src/components/controls/fw-time-display.ts

@@ -0,0 +1,74 @@
+import { LitElement, html, css } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { formatTimeDisplay } from "@livepeer-frameworks/player-core";
+
+@customElement("fw-time-display")
+export class FwTimeDisplay extends LitElement {
+  @state() private display = "";
+  private _player: any = null;
+  private _cleanup: (() => void) | null = null;
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      font-variant-numeric: tabular-nums;
+    }
+    span {
+      white-space: nowrap;
+      font-size: 0.75rem;
+    }
+  `;
+
+  private _resolvePlayer(): HTMLElement | null {
+    const forId = this.getAttribute("for");
+    if (forId) return document.getElementById(forId);
+    return this.closest("fw-player");
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._player = this._resolvePlayer();
+    if (!this._player) return;
+    const pc = this._player.pc;
+    if (!pc) return;
+
+    this.updateDisplay();
+    const handler = () => this.updateDisplay();
+    this._player.addEventListener("fw-time-update", handler);
+    this._player.addEventListener("fw-ready", handler);
+    this._cleanup = () => {
+      this._player?.removeEventListener("fw-time-update", handler);
+      this._player?.removeEventListener("fw-ready", handler);
+    };
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._cleanup?.();
+    this._cleanup = null;
+  }
+
+  private updateDisplay() {
+    const pc = this._player?.pc;
+    if (!pc) return;
+    const s = pc.s;
+    this.display = formatTimeDisplay({
+      isLive: s.isEffectivelyLive,
+      currentTime: s.currentTime,
+      duration: s.duration,
+      liveEdge: pc.getLiveEdge?.() ?? s.duration,
+      seekableStart: pc.getSeekableStart?.() ?? 0,
+    });
+  }
+
+  render() {
+    return html`<span>${this.display}</span>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-time-display": FwTimeDisplay;
+  }
+}

package/src/components/controls/fw-volume-control.ts

@@ -0,0 +1,75 @@
+import { LitElement, html, css } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
+
+@customElement("fw-volume-button")
+export class FwVolumeControl extends LitElement {
+  @state() private isMuted = false;
+  private _player: any = null;
+  private _cleanup: (() => void) | null = null;
+
+  private get _t(): TranslateFn {
+    return this._player?.pc?.t ?? createTranslator({ locale: "en" });
+  }
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+    }
+  `;
+
+  private _resolvePlayer(): HTMLElement | null {
+    const forId = this.getAttribute("for");
+    if (forId) return document.getElementById(forId);
+    return this.closest("fw-player");
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._player = this._resolvePlayer();
+    if (!this._player) return;
+    const pc = this._player.pc;
+    if (!pc) return;
+
+    this.isMuted = pc.s.isMuted;
+    const handler = () => {
+      this.isMuted = this._player.pc.s.isMuted;
+    };
+    this._player.addEventListener("fw-volume-change", handler);
+    this._player.addEventListener("fw-ready", handler);
+    this._cleanup = () => {
+      this._player?.removeEventListener("fw-volume-change", handler);
+      this._player?.removeEventListener("fw-ready", handler);
+    };
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._cleanup?.();
+    this._cleanup = null;
+  }
+
+  private handleClick() {
+    this._player?.pc?.toggleMute();
+  }
+
+  render() {
+    return html`<button
+      type="button"
+      class="fw-btn-flush"
+      aria-label=${this.isMuted ? this._t("unmute") : this._t("mute")}
+      aria-pressed=${this.isMuted}
+      title=${this.isMuted ? this._t("unmute") : this._t("mute")}
+      @click=${this.handleClick}
+    >
+      ${this.isMuted ? "\uD83D\uDD07" : "\uD83D\uDD0A"}
+    </button>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-volume-button": FwVolumeControl;
+  }
+}

package/src/components/controls/index.ts

@@ -0,0 +1,6 @@
+export { FwPlayButton } from "./fw-play-button";
+export { FwSkipButton } from "./fw-skip-button";
+export { FwVolumeControl } from "./fw-volume-control";
+export { FwTimeDisplay } from "./fw-time-display";
+export { FwLiveBadge } from "./fw-live-badge";
+export { FwFullscreenButton } from "./fw-fullscreen-button";

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

@@ -36,7 +36,7 @@ export class FwDevModePanel extends LitElement {
 
   @state() private _activeTab: "config" | "stats" = "config";
   @state() private _hoveredComboIndex: number | null = null;
-  @state() private _tooltipAbove = false;
+  @state() private _tooltipPos: { top: number; left: number } | null = null;
   @state() private _showDisabledPlayers = false;
 
   @state() private _playbackScore = 1;
@@ -219,18 +219,12 @@ export class FwDevModePanel extends LitElement {
 
   private _handleComboMouseEnter(index: number, event: MouseEvent): void {
     this._hoveredComboIndex = index;
-
-    const container = this.renderRoot.querySelector(".fw-dev-body") as HTMLElement | null;
-    if (!container) {
-      return;
-    }
-
     const row = event.currentTarget as HTMLElement;
-    const containerRect = container.getBoundingClientRect();
     const rowRect = row.getBoundingClientRect();
-    const relativePosition = (rowRect.top - containerRect.top) / containerRect.height;
-
-    this._tooltipAbove = relativePosition > 0.6;
+    this._tooltipPos = {
+      top: Math.max(8, Math.min(rowRect.top, window.innerHeight - 200)),
+      left: Math.max(8, rowRect.left - 228),
+    };
   }
 
   private _handleModeChange(mode: "auto" | "low-latency" | "quality"): void {
@@ -764,6 +758,7 @@ export class FwDevModePanel extends LitElement {
                         this._handleComboMouseEnter(index, event)}
                       @mouseleave=${() => {
                         this._hoveredComboIndex = null;
+                        this._tooltipPos = null;
                       }}
                     >
                       <button
@@ -804,14 +799,12 @@ export class FwDevModePanel extends LitElement {
                         >
                       </button>
 
-                      ${this._hoveredComboIndex === index
+                      ${this._hoveredComboIndex === index && this._tooltipPos
                         ? html`
                             <div
-                              class=${classMap({
-                                "fw-dev-tooltip": true,
-                                "fw-dev-tooltip--above": this._tooltipAbove,
-                                "fw-dev-tooltip--below": !this._tooltipAbove,
-                              })}
+                              class="fw-dev-tooltip"
+                              style="top: ${this._tooltipPos.top}px; left: ${this._tooltipPos
+                                .left}px;"
                             >
                               <div class="fw-dev-tooltip-header">
                                 <div class="fw-dev-tooltip-title">${combo.playerName}</div>

package/src/components/fw-error-overlay.ts

@@ -4,11 +4,19 @@ import { classMap } from "lit/directives/class-map.js";
 import { sharedStyles } from "../styles/shared-styles.js";
 import { utilityStyles } from "../styles/utility-styles.js";
 import { closeIcon } from "../icons/index.js";
+import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
 
 @customElement("fw-error-overlay")
 export class FwErrorOverlay extends LitElement {
   @property({ type: String }) error: string | null = null;
   @property({ type: Boolean, attribute: "is-passive" }) isPassive = false;
+  @property({ attribute: false }) translator?: TranslateFn;
+
+  private _defaultTranslator: TranslateFn = createTranslator({ locale: "en" });
+
+  private get _t(): TranslateFn {
+    return this.translator ?? this._defaultTranslator;
+  }
 
   static styles = [
     sharedStyles,
@@ -51,28 +59,28 @@ export class FwErrorOverlay extends LitElement {
                 "fw-error-title--warning": this.isPassive,
                 "fw-error-title--error": !this.isPassive,
               })}
-              >${this.isPassive ? "Warning" : "Error"}</span
+              >${this.isPassive ? this._t("warning") : this._t("error")}</span
             >
             <button
               type="button"
               class="fw-error-close"
               @click=${this._clearError}
-              aria-label="Dismiss"
+              aria-label=${this._t("dismiss")}
             >
               ${closeIcon()}
             </button>
           </div>
           <div class="fw-error-body">
-            <p class="fw-error-message">Playback issue</p>
+            <p class="fw-error-message">${this.error || this._t("playbackIssue")}</p>
           </div>
           <div class="fw-error-actions">
             <button
               type="button"
               class="fw-error-btn"
-              aria-label="Retry playback"
+              aria-label=${this._t("retry")}
               @click=${this._retry}
             >
-              Retry
+              ${this._t("retry")}
             </button>
           </div>
         </div>

package/src/components/fw-idle-screen.ts

@@ -4,6 +4,7 @@ import { sharedStyles } from "../styles/shared-styles.js";
 import { utilityStyles } from "../styles/utility-styles.js";
 import { LOGOMARK_DATA_URL } from "../constants/media-assets.js";
 import { playHitmarkerSound } from "./shared/hitmarker-audio.js";
+import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
 import "./fw-dvd-logo.js";
 
 interface ParticleState {
@@ -59,6 +60,13 @@ export class FwIdleScreen extends LitElement {
   @property({ type: String, attribute: "logo-src" }) logoSrc?: string;
   @property({ type: Boolean, attribute: "retry-enabled" }) retryEnabled = false;
   @property({ attribute: false }) onRetry?: () => void;
+  @property({ attribute: false }) translator?: TranslateFn;
+
+  private _defaultTranslator: TranslateFn = createTranslator({ locale: "en" });
+
+  private get _t(): TranslateFn {
+    return this.translator ?? this._defaultTranslator;
+  }
   @query(".idle-container") private _containerEl?: HTMLDivElement;
 
   @state() private _logoSize = 100;
@@ -552,7 +560,7 @@ export class FwIdleScreen extends LitElement {
   }
 
   private get _displayMessage() {
-    return this.error || this.message || "Waiting for stream...";
+    return this.error || this.message || this._t("waitingForStream");
   }
 
   private _renderStatusIcon() {
@@ -744,7 +752,7 @@ export class FwIdleScreen extends LitElement {
             : nothing}
           ${this._showRetry
             ? html`<button type="button" class="retry-btn" @click=${this._handleRetry}>
-                Retry
+                ${this._t("retry")}
               </button>`
             : nothing}
         </div>