@livepeer-frameworks/player-wc 0.1.1 → 0.1.3

package/dist/esm/components/fw-player-controls.js

@@ -4,131 +4,382 @@ import { property, state, customElement } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { sharedStyles } from '../styles/shared-styles.js';
 import { utilityStyles } from '../styles/utility-styles.js';
-import { pauseIcon, playIcon, settingsIcon, fullscreenExitIcon, fullscreenIcon } from '../icons/index.js';
+import { pauseIcon, playIcon, skipBackIcon, skipForwardIcon, seekToLiveIcon, statsIcon, settingsIcon, fullscreenExitIcon, fullscreenIcon } from '../icons/index.js';
+import { isLiveContent, isMediaStreamSource, calculateSeekableRange, canSeekStream, calculateLiveThresholds, calculateIsNearLive, formatTimeDisplay } from '@livepeer-frameworks/player-core';
 
 let FwPlayerControls = class FwPlayerControls extends LitElement {
     constructor() {
         super(...arguments);
         this.playbackMode = "auto";
         this.isContentLive = false;
+        this.showStatsButton = false;
         this.isStatsOpen = false;
         this._settingsOpen = false;
+        this._isNearLiveState = true;
+        this._buffered = null;
+        this._boundVideo = null;
+        this._onBufferedUpdate = null;
+        this._onWindowClick = (event) => {
+            const path = event.composedPath();
+            const insideControls = path.some((entry) => {
+                if (!(entry instanceof HTMLElement)) {
+                    return false;
+                }
+                return (entry.classList.contains("fw-settings-anchor") ||
+                    entry.classList.contains("fw-settings-menu"));
+            });
+            if (!insideControls) {
+                this._settingsOpen = false;
+            }
+        };
     }
-    _formatTime(seconds) {
-        if (!isFinite(seconds) || isNaN(seconds))
-            return "0:00";
-        const abs = Math.abs(Math.floor(seconds));
-        const h = Math.floor(abs / 3600);
-        const m = Math.floor((abs % 3600) / 60);
-        const s = abs % 60;
-        if (h > 0)
-            return `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
-        return `${m}:${String(s).padStart(2, "0")}`;
+    connectedCallback() {
+        super.connectedCallback();
     }
-    get _isNearLive() {
-        if (!this.isContentLive)
-            return false;
-        const { currentTime, duration } = this.pc.s;
-        if (!isFinite(duration) || duration <= 0)
-            return true;
-        return duration - currentTime < 10;
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._unbindVideoEvents();
+        this._detachWindowClickListener();
+    }
+    updated(changed) {
+        this._bindVideoEvents();
+        this._reconcileNearLiveState();
+        if (changed.has("_settingsOpen")) {
+            if (this._settingsOpen) {
+                this._attachWindowClickListener();
+            }
+            else {
+                this._detachWindowClickListener();
+            }
+        }
+    }
+    _bindVideoEvents() {
+        const video = this.pc?.s.videoElement ?? null;
+        if (video === this._boundVideo) {
+            return;
+        }
+        this._unbindVideoEvents();
+        this._boundVideo = video;
+        if (!video) {
+            this._buffered = null;
+            return;
+        }
+        const updateBuffered = () => {
+            this._buffered = this.pc.getBufferedRanges() ?? video.buffered;
+        };
+        updateBuffered();
+        video.addEventListener("progress", updateBuffered);
+        video.addEventListener("loadeddata", updateBuffered);
+        this._onBufferedUpdate = updateBuffered;
+    }
+    _unbindVideoEvents() {
+        if (!this._boundVideo) {
+            return;
+        }
+        const updateBuffered = this._onBufferedUpdate;
+        if (updateBuffered) {
+            this._boundVideo.removeEventListener("progress", updateBuffered);
+            this._boundVideo.removeEventListener("loadeddata", updateBuffered);
+        }
+        this._boundVideo = null;
+        this._onBufferedUpdate = null;
+    }
+    _attachWindowClickListener() {
+        window.setTimeout(() => {
+            if (!this._settingsOpen) {
+                return;
+            }
+            window.addEventListener("click", this._onWindowClick);
+        }, 0);
+    }
+    _detachWindowClickListener() {
+        window.removeEventListener("click", this._onWindowClick);
+    }
+    _deriveBufferWindowMs(tracks) {
+        if (!tracks) {
+            return undefined;
+        }
+        const trackValues = Object.values(tracks);
+        if (trackValues.length === 0) {
+            return undefined;
+        }
+        const firstmsValues = trackValues
+            .map((track) => track.firstms)
+            .filter((value) => typeof value === "number");
+        const lastmsValues = trackValues
+            .map((track) => track.lastms)
+            .filter((value) => typeof value === "number");
+        if (firstmsValues.length === 0 || lastmsValues.length === 0) {
+            return undefined;
+        }
+        const firstms = Math.max(...firstmsValues);
+        const lastms = Math.min(...lastmsValues);
+        const window = lastms - firstms;
+        if (!Number.isFinite(window) || window <= 0) {
+            return undefined;
+        }
+        return window;
+    }
+    _getSeekingContext() {
+        const state = this.pc.s;
+        const controller = this.pc.getController();
+        const sourceType = state.currentSourceInfo?.type;
+        const mistStreamInfo = state.streamState?.streamInfo;
+        const isLive = isLiveContent(this.isContentLive, mistStreamInfo, state.duration);
+        const bufferWindowMs = mistStreamInfo?.meta?.buffer_window ??
+            this._deriveBufferWindowMs(mistStreamInfo?.meta?.tracks);
+        const isWebRTC = isMediaStreamSource(state.videoElement);
+        const allowMediaStreamDvr = isMediaStreamSource(state.videoElement) &&
+            bufferWindowMs !== undefined &&
+            bufferWindowMs > 0 &&
+            sourceType !== "whep" &&
+            sourceType !== "webrtc";
+        const calculatedRange = calculateSeekableRange({
+            isLive,
+            video: state.videoElement,
+            mistStreamInfo,
+            currentTime: state.currentTime,
+            duration: state.duration,
+            allowMediaStreamDvr,
+        });
+        const controllerSeekableStart = this.pc.getSeekableStart();
+        const controllerLiveEdge = this.pc.getLiveEdge();
+        const useControllerRange = Number.isFinite(controllerSeekableStart) &&
+            Number.isFinite(controllerLiveEdge) &&
+            controllerLiveEdge >= controllerSeekableStart &&
+            (controllerLiveEdge > 0 || controllerSeekableStart > 0);
+        const seekableStart = useControllerRange
+            ? controllerSeekableStart
+            : calculatedRange.seekableStart;
+        const liveEdge = useControllerRange ? controllerLiveEdge : calculatedRange.liveEdge;
+        const hasDvrWindow = isLive &&
+            Number.isFinite(liveEdge) &&
+            Number.isFinite(seekableStart) &&
+            liveEdge > seekableStart;
+        const baseCanSeek = controller?.canSeekStream?.() ??
+            canSeekStream({
+                video: state.videoElement,
+                isLive,
+                duration: state.duration,
+                bufferWindowMs,
+            });
+        const liveThresholds = calculateLiveThresholds(sourceType, isWebRTC, bufferWindowMs);
+        return {
+            mistStreamInfo,
+            isLive,
+            sourceType,
+            seekableStart,
+            liveEdge,
+            hasDvrWindow,
+            canSeek: baseCanSeek && (!isLive || hasDvrWindow),
+            commitOnRelease: isLive,
+            liveThresholds,
+        };
+    }
+    _reconcileNearLiveState() {
+        const context = this._getSeekingContext();
+        if (!context.isLive) {
+            if (!this._isNearLiveState) {
+                this._isNearLiveState = true;
+            }
+            return;
+        }
+        const next = calculateIsNearLive(this.pc.s.currentTime, context.liveEdge, context.liveThresholds, this._isNearLiveState);
+        if (next !== this._isNearLiveState) {
+            this._isNearLiveState = next;
+        }
+    }
+    _handleModeChange(event) {
+        const { mode } = event.detail;
+        this.dispatchEvent(new CustomEvent("fw-mode-change", {
+            detail: { mode },
+            bubbles: true,
+            composed: true,
+        }));
     }
     render() {
-        const s = this.pc.s;
-        const disabled = !s.videoElement;
+        const state = this.pc.s;
+        const disabled = !state.videoElement;
+        const context = this._getSeekingContext();
+        const timeDisplay = formatTimeDisplay({
+            isLive: context.isLive,
+            currentTime: state.currentTime,
+            duration: state.duration,
+            liveEdge: context.liveEdge,
+            seekableStart: context.seekableStart,
+            unixoffset: context.mistStreamInfo?.unixoffset,
+        });
+        const liveButtonDisabled = !context.hasDvrWindow || this._isNearLiveState;
         return html `
       <div
         class=${classMap({
-            "controls-wrapper": true,
-            "controls-wrapper--visible": s.shouldShowControls,
+            "fw-player-surface": true,
             "fw-controls-wrapper": true,
+            "fw-controls-wrapper--visible": state.shouldShowControls,
+            "fw-controls-wrapper--hidden": !state.shouldShowControls,
         })}
       >
-        <div class="bar fw-control-bar">
-          <!-- Seek bar -->
-          <fw-seek-bar
-            .currentTime=${s.currentTime}
-            .duration=${s.duration}
-            .disabled=${disabled}
-            .isLive=${this.isContentLive}
-            @fw-seek=${(e) => this.pc.seek(e.detail.time)}
-          ></fw-seek-bar>
-
-          <!-- Button row -->
-          <div class="row">
-            <div class="group fw-control-group">
-              <!-- Play/Pause -->
-              <button
-                class="btn fw-btn-flush"
-                type="button"
-                ?disabled=${disabled}
-                @click=${() => this.pc.togglePlay()}
-                aria-label="${s.isPlaying ? "Pause" : "Play"}"
-              >
-                ${s.isPlaying ? pauseIcon(18) : playIcon(18)}
-              </button>
+        <div class="fw-control-bar" @click=${(event) => event.stopPropagation()}>
+          ${context.canSeek
+            ? html `
+                <div class="fw-seek-wrapper">
+                  <fw-seek-bar
+                    .currentTime=${state.currentTime}
+                    .duration=${state.duration}
+                    .buffered=${this._buffered}
+                    .disabled=${disabled}
+                    .isLive=${context.isLive}
+                    .seekableStart=${context.seekableStart}
+                    .liveEdge=${context.liveEdge}
+                    .commitOnRelease=${context.commitOnRelease}
+                    @fw-seek=${(event) => this.pc.seek(event.detail.time)}
+                  ></fw-seek-bar>
+                </div>
+              `
+            : nothing}
 
-              <!-- Volume -->
-              <fw-volume-control .pc=${this.pc}></fw-volume-control>
+          <div class="fw-controls-row">
+            <div class="fw-controls-left">
+              <div class="fw-control-group">
+                <button
+                  type="button"
+                  class="fw-btn-flush"
+                  ?disabled=${disabled}
+                  aria-label=${state.isPlaying ? "Pause" : "Play"}
+                  @click=${() => this.pc.togglePlay()}
+                >
+                  ${state.isPlaying ? pauseIcon(18) : playIcon(18)}
+                </button>
 
-              <!-- Time display -->
-              ${!this.isContentLive
+                ${context.canSeek
             ? html `
-                    <span class="time fw-time-display">
-                      ${this._formatTime(s.currentTime)} / ${this._formatTime(s.duration)}
-                    </span>
-                  `
+                      <button
+                        type="button"
+                        class="fw-btn-flush hidden sm:flex"
+                        ?disabled=${disabled}
+                        aria-label="Skip back 10 seconds"
+                        @click=${() => this.pc.seekBy(-10)}
+                      >
+                        ${skipBackIcon(16)}
+                      </button>
+                      <button
+                        type="button"
+                        class="fw-btn-flush hidden sm:flex"
+                        ?disabled=${disabled}
+                        aria-label="Skip forward 10 seconds"
+                        @click=${() => this.pc.seekBy(10)}
+                      >
+                        ${skipForwardIcon(16)}
+                      </button>
+                    `
             : nothing}
+              </div>
+
+              <div class="fw-control-group">
+                <fw-volume-control .pc=${this.pc}></fw-volume-control>
+              </div>
+
+              <div class="fw-control-group">
+                <span class="fw-time-display">${timeDisplay}</span>
+              </div>
 
-              <!-- Live badge -->
-              ${this.isContentLive
+              ${context.isLive
             ? html `
-                    <button
-                      class=${classMap({
-                "live-badge": true,
+                    <div class="fw-control-group">
+                      <button
+                        type="button"
+                        @click=${() => this.pc.jumpToLive()}
+                        ?disabled=${liveButtonDisabled}
+                        class=${classMap({
                 "fw-live-badge": true,
-                "live-badge--active": this._isNearLive,
-                "fw-live-badge--active": this._isNearLive,
-                "live-badge--behind": !this._isNearLive,
-                "fw-live-badge--behind": !this._isNearLive,
+                "fw-live-badge--active": liveButtonDisabled,
+                "fw-live-badge--behind": !liveButtonDisabled,
             })}
-                      type="button"
-                      @click=${() => this.pc.jumpToLive()}
-                      aria-label="Jump to live"
-                    >
-                      <span class="live-dot"></span>
-                      LIVE
-                    </button>
+                        title=${!context.hasDvrWindow
+                ? "Live only"
+                : this._isNearLiveState
+                    ? "At live edge"
+                    : "Jump to live"}
+                      >
+                        LIVE
+                        ${!this._isNearLiveState && context.hasDvrWindow
+                ? seekToLiveIcon(10)
+                : nothing}
+                      </button>
+                    </div>
                   `
             : nothing}
             </div>
 
-            <div class="group fw-control-group">
-              <!-- Settings -->
-              <div class="settings-anchor">
+            <div class="fw-controls-right">
+              ${this.showStatsButton
+            ? html `
+                    <div class="fw-control-group">
+                      <button
+                        type="button"
+                        class=${classMap({
+                "fw-btn-flush": true,
+                "fw-btn-flush--active": this.isStatsOpen,
+            })}
+                        aria-label="Toggle stats"
+                        title="Stats"
+                        @click=${() => this.dispatchEvent(new CustomEvent("fw-stats-toggle", {
+                bubbles: true,
+                composed: true,
+            }))}
+                      >
+                        ${statsIcon(16)}
+                      </button>
+                    </div>
+                  `
+            : nothing}
+
+              <div class="fw-control-group fw-settings-anchor">
                 <button
-                  class="btn fw-btn-flush"
                   type="button"
+                  class=${classMap({
+            "fw-btn-flush": true,
+            group: true,
+            "fw-btn-flush--active": this._settingsOpen,
+        })}
+                  aria-label="Settings"
+                  title="Settings"
+                  ?disabled=${disabled}
                   @click=${() => {
+            if (disabled) {
+                return;
+            }
             this._settingsOpen = !this._settingsOpen;
         }}
-                  aria-label="Settings"
                 >
-                  ${settingsIcon(16)}
+                  <span class="transition-transform group-hover:rotate-90"
+                    >${settingsIcon(16)}</span
+                  >
                 </button>
-                <fw-settings-menu .pc=${this.pc} .open=${this._settingsOpen}></fw-settings-menu>
+
+                <fw-settings-menu
+                  .pc=${this.pc}
+                  .open=${this._settingsOpen}
+                  .playbackMode=${this.playbackMode}
+                  .isContentLive=${this.isContentLive}
+                  @fw-close=${() => {
+            this._settingsOpen = false;
+        }}
+                  @fw-mode-change=${this._handleModeChange}
+                ></fw-settings-menu>
               </div>
 
-              <!-- Fullscreen -->
-              <button
-                class="btn fw-btn-flush"
-                type="button"
-                ?disabled=${disabled}
-                @click=${() => this.pc.toggleFullscreen()}
-                aria-label="${s.isFullscreen ? "Exit fullscreen" : "Fullscreen"}"
-              >
-                ${s.isFullscreen ? fullscreenExitIcon(16) : fullscreenIcon(16)}
-              </button>
+              <div class="fw-control-group">
+                <button
+                  type="button"
+                  class="fw-btn-flush"
+                  ?disabled=${disabled}
+                  aria-label=${state.isFullscreen ? "Exit fullscreen" : "Fullscreen"}
+                  @click=${() => this.pc.toggleFullscreen()}
+                >
+                  ${state.isFullscreen ? fullscreenExitIcon(16) : fullscreenIcon(16)}
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -143,94 +394,8 @@ FwPlayerControls.styles = [
       :host {
         display: contents;
       }
-      .controls-wrapper {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        z-index: 20;
-        background: linear-gradient(to top, rgb(0 0 0 / 0.7), transparent);
-        padding: 2rem 0.75rem 0.5rem;
-        opacity: 0;
-        transition: opacity 200ms ease;
-        pointer-events: none;
-      }
-      .controls-wrapper--visible {
-        opacity: 1;
-        pointer-events: auto;
-      }
-      .bar {
-        display: flex;
-        flex-direction: column;
-        gap: 0.25rem;
-      }
-      .row {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 0.25rem;
-      }
-      .group {
-        display: flex;
-        align-items: center;
-        gap: 0.125rem;
-      }
-      .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;
-      }
-      .btn:disabled {
-        opacity: 0.4;
-        cursor: not-allowed;
-      }
-      .time {
-        font-size: 0.6875rem;
-        color: rgb(255 255 255 / 0.7);
-        font-variant-numeric: tabular-nums;
-        padding: 0 0.375rem;
-        white-space: nowrap;
-      }
-      .live-badge {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.375rem;
-        padding: 0.125rem 0.5rem;
-        border-radius: 0.25rem;
-        font-size: 0.6875rem;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.025em;
-        cursor: pointer;
-        border: none;
-        background: none;
-        transition: color 150ms;
-      }
-      .live-badge--active {
-        color: hsl(var(--tn-red, 348 74% 64%));
-      }
-      .live-badge--behind {
-        color: rgb(255 255 255 / 0.5);
-      }
-      .live-dot {
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        background: currentColor;
-      }
-      .settings-anchor {
+
+      .fw-settings-anchor {
         position: relative;
       }
     `,
@@ -244,12 +409,21 @@ __decorate([
 __decorate([
     property({ type: Boolean, attribute: "is-content-live" })
 ], FwPlayerControls.prototype, "isContentLive", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "show-stats-button" })
+], FwPlayerControls.prototype, "showStatsButton", void 0);
 __decorate([
     property({ type: Boolean, attribute: "is-stats-open" })
 ], FwPlayerControls.prototype, "isStatsOpen", void 0);
 __decorate([
     state()
 ], FwPlayerControls.prototype, "_settingsOpen", void 0);
+__decorate([
+    state()
+], FwPlayerControls.prototype, "_isNearLiveState", void 0);
+__decorate([
+    state()
+], FwPlayerControls.prototype, "_buffered", void 0);
 FwPlayerControls = __decorate([
     customElement("fw-player-controls")
 ], FwPlayerControls);