@livepeer-frameworks/player-wc 0.1.0

package/src/components/fw-subtitle-renderer.ts

@@ -0,0 +1,65 @@
+import { LitElement, html, css, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+interface SubtitleCue {
+  id?: string;
+  startTime: number;
+  endTime: number;
+  text: string;
+}
+
+@customElement("fw-subtitle-renderer")
+export class FwSubtitleRenderer extends LitElement {
+  @property({ type: Number }) currentTime = 0;
+  @property({ type: Boolean }) enabled = false;
+  @property({ attribute: false }) cues: SubtitleCue[] = [];
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+    .subtitle {
+      position: absolute;
+      bottom: 5%;
+      left: 50%;
+      transform: translateX(-50%);
+      display: inline-block;
+      max-width: 90%;
+      padding: 0.5em 1em;
+      border-radius: 4px;
+      background: rgb(0 0 0 / 0.75);
+      color: white;
+      font-size: 1.5rem;
+      font-family:
+        system-ui,
+        -apple-system,
+        sans-serif;
+      text-shadow: 2px 2px 4px rgb(0 0 0 / 0.5);
+      white-space: pre-wrap;
+      text-align: center;
+      z-index: 15;
+      pointer-events: none;
+    }
+  `;
+
+  private get _activeCue(): string | null {
+    if (!this.enabled || !this.cues.length) return null;
+    const t = this.currentTime * 1000; // Convert to ms
+    for (const cue of this.cues) {
+      if (t >= cue.startTime && t <= cue.endTime) return cue.text;
+    }
+    return null;
+  }
+
+  protected render() {
+    const text = this._activeCue;
+    if (!text) return nothing;
+    return html`<span class="subtitle" aria-live="polite">${text}</span>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-subtitle-renderer": FwSubtitleRenderer;
+  }
+}

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

@@ -0,0 +1,64 @@
+import { LitElement, html, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { sharedStyles } from "../styles/shared-styles.js";
+import { utilityStyles } from "../styles/utility-styles.js";
+
+@customElement("fw-title-overlay")
+export class FwTitleOverlay extends LitElement {
+  @property({ type: String }) override title: string = "";
+  @property({ type: String }) description: string | null = null;
+
+  static styles = [
+    sharedStyles,
+    utilityStyles,
+    css`
+      :host {
+        display: contents;
+      }
+      .overlay {
+        position: absolute;
+        inset: 0 0 auto 0;
+        padding: 1rem 1.25rem;
+        background: linear-gradient(to bottom, rgb(0 0 0 / 0.7), rgb(0 0 0 / 0.4), transparent);
+        pointer-events: none;
+        transition: opacity 300ms ease;
+        z-index: 10;
+      }
+      .title {
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: white;
+        max-width: 80%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .desc {
+        margin-top: 0.25rem;
+        font-size: 0.75rem;
+        color: rgb(255 255 255 / 0.7);
+        max-width: 70%;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+    `,
+  ];
+
+  protected render() {
+    if (this.title === "" && !this.description) return nothing;
+    return html`
+      <div class="overlay fw-title-overlay">
+        ${this.title ? html`<div class="title">${this.title}</div>` : nothing}
+        ${this.description ? html`<div class="desc">${this.description}</div>` : nothing}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-title-overlay": FwTitleOverlay;
+  }
+}

package/src/components/fw-toast.ts

@@ -0,0 +1,70 @@
+import { LitElement, html, css, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { closeIcon } from "../icons/index.js";
+
+@customElement("fw-toast")
+export class FwToast extends LitElement {
+  @property({ type: String }) message = "";
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+    .toast {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      border-radius: 0.5rem;
+      border: 1px solid rgb(255 255 255 / 0.1);
+      background: rgb(0 0 0 / 0.8);
+      padding: 0.5rem 1rem;
+      font-size: 0.875rem;
+      color: white;
+      box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+      backdrop-filter: blur(4px);
+      animation: _fw-slide-up 200ms ease-out;
+    }
+    @keyframes _fw-slide-up {
+      from {
+        opacity: 0;
+        transform: translateY(8px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    button {
+      margin-left: 0.125rem;
+      color: rgb(255 255 255 / 0.6);
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 0;
+      display: flex;
+    }
+    button:hover {
+      color: white;
+    }
+  `;
+
+  protected render() {
+    if (!this.message) return nothing;
+    return html`
+      <div class="toast">
+        <span>${this.message}</span>
+        <button type="button" @click=${this._dismiss} aria-label="Dismiss">${closeIcon()}</button>
+      </div>
+    `;
+  }
+
+  private _dismiss() {
+    this.dispatchEvent(new CustomEvent("fw-dismiss", { bubbles: true, composed: true }));
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-toast": FwToast;
+  }
+}

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

@@ -0,0 +1,140 @@
+/**
+ * <fw-volume-control> — Mute toggle + volume slider.
+ */
+import { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { sharedStyles } from "../styles/shared-styles.js";
+import { volumeUpIcon, volumeOffIcon } from "../icons/index.js";
+import type { PlayerControllerHost } from "../controllers/player-controller-host.js";
+
+@customElement("fw-volume-control")
+export class FwVolumeControl extends LitElement {
+  @property({ attribute: false }) pc!: PlayerControllerHost;
+  @state() private _expanded = false;
+
+  static styles = [
+    sharedStyles,
+    css`
+      :host {
+        display: flex;
+        align-items: center;
+      }
+      .group {
+        display: flex;
+        align-items: center;
+        gap: 0;
+      }
+      .btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 2rem;
+        height: 2rem;
+        background: none;
+        border: none;
+        color: rgb(255 255 255 / 0.8);
+        cursor: pointer;
+        padding: 0;
+        border-radius: 0.25rem;
+        transition: color 150ms;
+      }
+      .btn:hover {
+        color: white;
+      }
+      .slider-wrap {
+        width: 0;
+        overflow: hidden;
+        transition: width 200ms ease;
+      }
+      .slider-wrap--expanded {
+        width: 72px;
+      }
+      .slider {
+        position: relative;
+        width: 72px;
+        height: 4px;
+        background: rgb(255 255 255 / 0.15);
+        border-radius: 2px;
+        cursor: pointer;
+      }
+      .slider-fill {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        background: white;
+        border-radius: 2px;
+        pointer-events: none;
+      }
+      .slider-thumb {
+        position: absolute;
+        top: 50%;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: white;
+        transform: translate(-50%, -50%);
+        pointer-events: none;
+      }
+    `,
+  ];
+
+  private _handleSliderClick = (e: MouseEvent) => {
+    const target = e.currentTarget as HTMLElement;
+    const rect = target.getBoundingClientRect();
+    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    this.pc.setVolume(pct);
+    if (this.pc.s.isMuted && pct > 0) this.pc.toggleMute();
+  };
+
+  private _handleSliderDrag = (e: PointerEvent) => {
+    const target = e.currentTarget as HTMLElement;
+    const rect = target.getBoundingClientRect();
+    const pct = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+    this.pc.setVolume(pct);
+  };
+
+  protected render() {
+    const { isMuted, volume } = this.pc.s;
+    const displayVol = isMuted ? 0 : volume;
+
+    return html`
+      <div
+        class="group fw-volume-group"
+        @mouseenter=${() => {
+          this._expanded = true;
+        }}
+        @mouseleave=${() => {
+          this._expanded = false;
+        }}
+      >
+        <button
+          class="btn fw-btn-flush fw-volume-btn"
+          type="button"
+          @click=${() => this.pc.toggleMute()}
+          aria-label="${isMuted ? "Unmute" : "Mute"}"
+        >
+          ${isMuted ? volumeOffIcon(16) : volumeUpIcon(16)}
+        </button>
+        <div class=${classMap({ "slider-wrap": true, "slider-wrap--expanded": this._expanded })}>
+          <div
+            class="slider"
+            @click=${this._handleSliderClick}
+            @pointermove=${this._handleSliderDrag}
+          >
+            <div class="slider-fill" style=${styleMap({ width: `${displayVol * 100}%` })}></div>
+            <div class="slider-thumb" style=${styleMap({ left: `${displayVol * 100}%` })}></div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-volume-control": FwVolumeControl;
+  }
+}