@livepeer-frameworks/player-wc 0.1.9 → 0.2.2

package/dist/cjs/components/fw-idle-screen.js

@@ -1,726 +0,0 @@
-'use strict';
-
-var tslib_es6 = require('../node_modules/.pnpm/@rollup_plugin-typescript@12.3.0_rollup@4.57.1_tslib@2.8.1_typescript@5.9.3/node_modules/tslib/tslib.es6.js');
-var lit = require('lit');
-var decorators_js = require('lit/decorators.js');
-var sharedStyles = require('../styles/shared-styles.js');
-var utilityStyles = require('../styles/utility-styles.js');
-var mediaAssets = require('../constants/media-assets.js');
-var hitmarkerAudio = require('./shared/hitmarker-audio.js');
-require('./fw-dvd-logo.js');
-
-const BUBBLE_COLORS = [
-    "rgba(122, 162, 247, 0.2)",
-    "rgba(187, 154, 247, 0.2)",
-    "rgba(158, 206, 106, 0.2)",
-    "rgba(115, 218, 202, 0.2)",
-    "rgba(125, 207, 255, 0.2)",
-    "rgba(247, 118, 142, 0.2)",
-    "rgba(224, 175, 104, 0.2)",
-    "rgba(42, 195, 222, 0.2)",
-];
-const PARTICLE_COLORS = [
-    "#7aa2f7",
-    "#bb9af7",
-    "#9ece6a",
-    "#73daca",
-    "#7dcfff",
-    "#f7768e",
-    "#e0af68",
-    "#2ac3de",
-];
-exports.FwIdleScreen = class FwIdleScreen extends lit.LitElement {
-    constructor() {
-        super(...arguments);
-        this.retryEnabled = false;
-        this._logoSize = 100;
-        this._logoOffset = { x: 0, y: 0 };
-        this._isLogoHovered = false;
-        this._bubbles = this._createBubbles();
-        this._hitmarkers = [];
-        this._particles = this._createParticles();
-        this._bubbleTimers = new Set();
-        this._handleMouseMove = (event) => {
-            const rect = this._containerEl?.getBoundingClientRect() ?? this.getBoundingClientRect();
-            if (rect.width === 0 || rect.height === 0) {
-                return;
-            }
-            const centerX = rect.left + rect.width / 2;
-            const centerY = rect.top + rect.height / 2;
-            const deltaX = event.clientX - centerX;
-            const deltaY = event.clientY - centerY;
-            const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-            const maxDistance = this._logoSize * 1.5;
-            if (distance < maxDistance && distance > 0) {
-                const pushStrength = (maxDistance - distance) / maxDistance;
-                const pushDistance = 50 * pushStrength;
-                this._logoOffset = {
-                    x: -(deltaX / distance) * pushDistance,
-                    y: -(deltaY / distance) * pushDistance,
-                };
-                this._isLogoHovered = true;
-                return;
-            }
-            this._logoOffset = { x: 0, y: 0 };
-            this._isLogoHovered = false;
-        };
-        this._handleMouseLeave = () => {
-            this._logoOffset = { x: 0, y: 0 };
-            this._isLogoHovered = false;
-        };
-        this._handleLogoClick = (event) => {
-            event.stopPropagation();
-            const rect = this._containerEl?.getBoundingClientRect() ?? this.getBoundingClientRect();
-            const hitmarker = {
-                id: Date.now() + Math.random(),
-                x: event.clientX - rect.left,
-                y: event.clientY - rect.top,
-            };
-            this._hitmarkers = [...this._hitmarkers, hitmarker];
-            hitmarkerAudio.playHitmarkerSound();
-            this._setManagedTimer(() => {
-                this._hitmarkers = this._hitmarkers.filter((h) => h.id !== hitmarker.id);
-            }, 600);
-        };
-        this._handleRetry = () => {
-            if (this.onRetry) {
-                this.onRetry();
-                return;
-            }
-            this.dispatchEvent(new CustomEvent("fw-retry", {
-                bubbles: true,
-                composed: true,
-            }));
-        };
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this._clearBubbleTimers();
-        this._startBubbleAnimations();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this._clearBubbleTimers();
-        this._resizeObserver?.disconnect();
-        this._resizeObserver = undefined;
-    }
-    firstUpdated() {
-        this._updateLogoSize();
-        if (typeof ResizeObserver !== "undefined") {
-            this._resizeObserver = new ResizeObserver(() => {
-                this._updateLogoSize();
-            });
-            if (this._containerEl) {
-                this._resizeObserver.observe(this._containerEl);
-            }
-        }
-    }
-    _createParticles() {
-        return Array.from({ length: 12 }, (_, i) => ({
-            left: Math.random() * 100,
-            size: Math.random() * 4 + 2,
-            color: PARTICLE_COLORS[i % PARTICLE_COLORS.length],
-            duration: 8 + Math.random() * 4,
-            delay: Math.random() * 8,
-        }));
-    }
-    _createBubbles() {
-        return Array.from({ length: 8 }, (_, i) => ({
-            top: Math.random() * 80 + 10,
-            left: Math.random() * 80 + 10,
-            size: Math.random() * 60 + 30,
-            opacity: 0,
-            color: BUBBLE_COLORS[i % BUBBLE_COLORS.length],
-        }));
-    }
-    _setManagedTimer(callback, delayMs) {
-        const timer = setTimeout(() => {
-            this._bubbleTimers.delete(timer);
-            callback();
-        }, delayMs);
-        this._bubbleTimers.add(timer);
-    }
-    _clearBubbleTimers() {
-        this._bubbleTimers.forEach((timer) => clearTimeout(timer));
-        this._bubbleTimers.clear();
-    }
-    _updateBubble(index, nextState) {
-        if (index < 0 || index >= this._bubbles.length) {
-            return;
-        }
-        const next = [...this._bubbles];
-        next[index] = { ...next[index], ...nextState };
-        this._bubbles = next;
-    }
-    _animateBubble(index) {
-        this._updateBubble(index, { opacity: 0.15 });
-        const visibleDuration = 4000 + Math.random() * 3000;
-        this._setManagedTimer(() => {
-            this._updateBubble(index, { opacity: 0 });
-            this._setManagedTimer(() => {
-                this._updateBubble(index, {
-                    top: Math.random() * 80 + 10,
-                    left: Math.random() * 80 + 10,
-                    size: Math.random() * 60 + 30,
-                });
-                this._setManagedTimer(() => this._animateBubble(index), 200);
-            }, 1500);
-        }, visibleDuration);
-    }
-    _startBubbleAnimations() {
-        this._bubbles.forEach((_, index) => {
-            this._setManagedTimer(() => this._animateBubble(index), index * 500);
-        });
-    }
-    _updateLogoSize() {
-        const rect = this._containerEl?.getBoundingClientRect() ?? this.getBoundingClientRect();
-        const minDimension = Math.min(rect.width, rect.height);
-        if (!Number.isFinite(minDimension) || minDimension <= 0) {
-            return;
-        }
-        this._logoSize = minDimension * 0.2;
-    }
-    get _isLoading() {
-        return (this.status === "INITIALIZING" ||
-            this.status === "BOOTING" ||
-            this.status === "WAITING_FOR_DATA" ||
-            !this.status);
-    }
-    get _isOffline() {
-        return this.status === "OFFLINE";
-    }
-    get _isError() {
-        return this.status === "ERROR" || this.status === "INVALID";
-    }
-    get _showProgress() {
-        return this.status === "INITIALIZING" && this.percentage != null;
-    }
-    get _showRetry() {
-        return this._isError && (this.retryEnabled || typeof this.onRetry === "function");
-    }
-    get _displayMessage() {
-        return this.error || this.message || "Waiting for stream...";
-    }
-    _renderStatusIcon() {
-        if (this._isLoading) {
-            return lit.html `
-        <svg
-          class="status-icon spinning"
-          fill="none"
-          viewBox="0 0 24 24"
-          style="color: hsl(var(--tn-yellow, 40 95% 64%));"
-        >
-          <circle
-            style="opacity: 0.25;"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            stroke-width="4"
-          />
-          <path
-            style="opacity: 0.75;"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          ></path>
-        </svg>
-      `;
-        }
-        if (this._isOffline) {
-            return lit.html `
-        <svg
-          class="status-icon"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          style="color: hsl(var(--tn-red, 348 100% 72%));"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"
-          ></path>
-        </svg>
-      `;
-        }
-        if (this._isError) {
-            return lit.html `
-        <svg
-          class="status-icon"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          style="color: hsl(var(--tn-red, 348 100% 72%));"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-          ></path>
-        </svg>
-      `;
-        }
-        return lit.html `
-      <svg
-        class="status-icon spinning"
-        fill="none"
-        viewBox="0 0 24 24"
-        style="color: hsl(var(--tn-cyan, 193 100% 75%));"
-      >
-        <circle
-          style="opacity: 0.25;"
-          cx="12"
-          cy="12"
-          r="10"
-          stroke="currentColor"
-          stroke-width="4"
-        />
-        <path
-          style="opacity: 0.75;"
-          fill="currentColor"
-          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-        ></path>
-      </svg>
-    `;
-    }
-    render() {
-        const progress = Math.min(100, Math.max(0, this.percentage ?? 0));
-        const logoSrc = this.logoSrc || mediaAssets.LOGOMARK_DATA_URL;
-        return lit.html `
-      <div
-        class="idle-container fw-player-root"
-        role="status"
-        aria-label="Stream status"
-        @mousemove=${this._handleMouseMove}
-        @mouseleave=${this._handleMouseLeave}
-      >
-        ${this._hitmarkers.map((hitmarker) => lit.html `
-            <div class="hitmarker" style="left: ${hitmarker.x}px; top: ${hitmarker.y}px;">
-              <div class="hitmarker-line tl"></div>
-              <div class="hitmarker-line tr"></div>
-              <div class="hitmarker-line bl"></div>
-              <div class="hitmarker-line br"></div>
-            </div>
-          `)}
-
-        <div class="particles">
-          ${this._particles.map((particle) => lit.html `
-              <div
-                class="particle"
-                style="
-                  left: ${particle.left}%;
-                  width: ${particle.size}px;
-                  height: ${particle.size}px;
-                  background: ${particle.color};
-                  animation-duration: ${particle.duration}s;
-                  animation-delay: ${particle.delay}s;
-                "
-              ></div>
-            `)}
-        </div>
-
-        <div class="bubbles">
-          ${this._bubbles.map((bubble) => lit.html `
-              <div
-                class="bubble"
-                style="
-                  top: ${bubble.top}%;
-                  left: ${bubble.left}%;
-                  width: ${bubble.size}px;
-                  height: ${bubble.size}px;
-                  background: ${bubble.color};
-                  opacity: ${bubble.opacity};
-                "
-              ></div>
-            `)}
-        </div>
-
-        <div
-          class="center-logo"
-          style="transform: translate(-50%, -50%) translate(${this._logoOffset.x}px, ${this
-            ._logoOffset.y}px);"
-        >
-          <div
-            class="logo-pulse ${this._isLogoHovered ? "hovered" : ""}"
-            style="width: ${this._logoSize * 1.4}px; height: ${this._logoSize * 1.4}px;"
-          ></div>
-          <button
-            type="button"
-            class="logo-button"
-            @click=${this._handleLogoClick}
-            aria-label="FrameWorks logo"
-          >
-            <img
-              src=${logoSrc}
-              alt=""
-              class="logo-image ${this._isLogoHovered ? "hovered" : ""}"
-              style="width: ${this._logoSize}px; height: ${this._logoSize}px;"
-              draggable="false"
-            />
-          </button>
-        </div>
-
-        <fw-dvd-logo .parentRef=${this._containerEl ?? null} .scale=${0.08}></fw-dvd-logo>
-
-        <div class="status-overlay">
-          <div class="status-indicator">
-            ${this._renderStatusIcon()}
-            <span>${this._displayMessage}</span>
-          </div>
-
-          ${this._showProgress
-            ? lit.html `
-                <div class="progress-bar">
-                  <div class="progress-fill" style="width: ${progress}%;"></div>
-                </div>
-              `
-            : lit.nothing}
-          ${this._showRetry
-            ? lit.html `<button type="button" class="retry-btn" @click=${this._handleRetry}>
-                Retry
-              </button>`
-            : lit.nothing}
-        </div>
-
-        <div class="overlay-texture"></div>
-      </div>
-    `;
-    }
-};
-exports.FwIdleScreen.styles = [
-    sharedStyles.sharedStyles,
-    utilityStyles.utilityStyles,
-    lit.css `
-      :host {
-        display: contents;
-      }
-      .idle-container {
-        position: absolute;
-        inset: 0;
-        z-index: 5;
-        background: linear-gradient(
-          135deg,
-          hsl(var(--tn-bg-dark, 235 21% 11%)) 0%,
-          hsl(var(--tn-bg, 233 23% 17%)) 25%,
-          hsl(var(--tn-bg-dark, 235 21% 11%)) 50%,
-          hsl(var(--tn-bg, 233 23% 17%)) 75%,
-          hsl(var(--tn-bg-dark, 235 21% 11%)) 100%
-        );
-        background-size: 400% 400%;
-        animation: _fw-gradient-shift 16s ease-in-out infinite;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        user-select: none;
-        -webkit-user-select: none;
-      }
-
-      .particles,
-      .bubbles {
-        position: absolute;
-        inset: 0;
-        pointer-events: none;
-      }
-
-      .particle {
-        position: absolute;
-        border-radius: 50%;
-        opacity: 0;
-        animation: _fw-float-up linear infinite;
-      }
-
-      .bubble {
-        position: absolute;
-        border-radius: 50%;
-        transition: opacity 1s ease-in-out;
-      }
-
-      .center-logo {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 10;
-        transition: transform 0.3s ease-out;
-      }
-
-      .logo-pulse {
-        position: absolute;
-        border-radius: 50%;
-        background: rgba(122, 162, 247, 0.15);
-        animation: _fw-logo-pulse 3s ease-in-out infinite;
-        pointer-events: none;
-        transition: transform 0.3s ease-out;
-      }
-
-      .logo-pulse.hovered {
-        animation: _fw-logo-pulse 1s ease-in-out infinite;
-        transform: scale(1.2);
-      }
-
-      .logo-button {
-        all: unset;
-        cursor: pointer;
-        display: block;
-      }
-
-      .logo-image {
-        position: relative;
-        z-index: 1;
-        display: block;
-        filter: drop-shadow(0 4px 8px rgb(36 40 59 / 0.3));
-        transition: all 0.3s ease-out;
-        cursor: default;
-        user-select: none;
-        -webkit-user-drag: none;
-      }
-
-      .logo-image.hovered {
-        transform: scale(1.1);
-        filter: drop-shadow(0 6px 12px rgb(36 40 59 / 0.4)) brightness(1.1);
-      }
-
-      .status-overlay {
-        position: absolute;
-        bottom: 16px;
-        left: 50%;
-        transform: translateX(-50%);
-        z-index: 20;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 8px;
-        max-width: 280px;
-        text-align: center;
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      }
-
-      .status-indicator {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        color: #787c99;
-        font-size: 13px;
-      }
-
-      .status-icon {
-        width: 20px;
-        height: 20px;
-        flex: 0 0 auto;
-      }
-
-      .status-icon.spinning {
-        animation: _fw-spin 1s linear infinite;
-      }
-
-      .progress-bar {
-        width: 160px;
-        height: 4px;
-        background: rgb(65 72 104 / 0.4);
-        border-radius: 2px;
-        overflow: hidden;
-      }
-
-      .progress-fill {
-        height: 100%;
-        background: hsl(var(--tn-cyan, 193 100% 75%));
-        transition: width 0.3s ease-out;
-      }
-
-      .retry-btn {
-        padding: 6px 16px;
-        background: transparent;
-        border: 1px solid rgb(122 162 247 / 0.4);
-        border-radius: 4px;
-        color: #7aa2f7;
-        font-size: 11px;
-        font-weight: 500;
-        cursor: pointer;
-        transition: all 0.2s ease;
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      }
-
-      .retry-btn:hover {
-        background: rgb(122 162 247 / 0.1);
-      }
-
-      .overlay-texture {
-        position: absolute;
-        inset: 0;
-        background:
-          radial-gradient(circle at 20% 80%, rgb(122 162 247 / 0.03) 0%, transparent 50%),
-          radial-gradient(circle at 80% 20%, rgb(187 154 247 / 0.03) 0%, transparent 50%),
-          radial-gradient(circle at 40% 40%, rgb(158 206 106 / 0.02) 0%, transparent 50%);
-        pointer-events: none;
-      }
-
-      .hitmarker {
-        position: absolute;
-        transform: translate(-50%, -50%);
-        pointer-events: none;
-        z-index: 100;
-        width: 40px;
-        height: 40px;
-      }
-
-      .hitmarker-line {
-        position: absolute;
-        width: 12px;
-        height: 3px;
-        background-color: #fff;
-        box-shadow: 0 0 8px rgb(255 255 255 / 0.8);
-        border-radius: 1px;
-      }
-
-      .hitmarker-line.tl {
-        top: 25%;
-        left: 25%;
-        animation: _fw-hitmarker-fade-45 0.6s ease-out forwards;
-      }
-
-      .hitmarker-line.tr {
-        top: 25%;
-        left: 75%;
-        animation: _fw-hitmarker-fade-neg-45 0.6s ease-out forwards;
-      }
-
-      .hitmarker-line.bl {
-        top: 75%;
-        left: 25%;
-        animation: _fw-hitmarker-fade-neg-45 0.6s ease-out forwards;
-      }
-
-      .hitmarker-line.br {
-        top: 75%;
-        left: 75%;
-        animation: _fw-hitmarker-fade-45 0.6s ease-out forwards;
-      }
-
-      @keyframes _fw-spin {
-        from {
-          transform: rotate(0deg);
-        }
-        to {
-          transform: rotate(360deg);
-        }
-      }
-
-      @keyframes _fw-logo-pulse {
-        0%,
-        100% {
-          opacity: 0.15;
-          transform: scale(1);
-        }
-        50% {
-          opacity: 0.25;
-          transform: scale(1.05);
-        }
-      }
-
-      @keyframes _fw-float-up {
-        0% {
-          transform: translateY(100vh) rotate(0deg);
-          opacity: 0;
-        }
-        10% {
-          opacity: 0.6;
-        }
-        90% {
-          opacity: 0.6;
-        }
-        100% {
-          transform: translateY(-100px) rotate(360deg);
-          opacity: 0;
-        }
-      }
-
-      @keyframes _fw-gradient-shift {
-        0%,
-        100% {
-          background-position: 0% 50%;
-        }
-        50% {
-          background-position: 100% 50%;
-        }
-      }
-
-      @keyframes _fw-hitmarker-fade-45 {
-        0% {
-          opacity: 1;
-          transform: translate(-50%, -50%) rotate(45deg) scale(0.5);
-        }
-        20% {
-          opacity: 1;
-          transform: translate(-50%, -50%) rotate(45deg) scale(1.2);
-        }
-        100% {
-          opacity: 0;
-          transform: translate(-50%, -50%) rotate(45deg) scale(1);
-        }
-      }
-
-      @keyframes _fw-hitmarker-fade-neg-45 {
-        0% {
-          opacity: 1;
-          transform: translate(-50%, -50%) rotate(-45deg) scale(0.5);
-        }
-        20% {
-          opacity: 1;
-          transform: translate(-50%, -50%) rotate(-45deg) scale(1.2);
-        }
-        100% {
-          opacity: 0;
-          transform: translate(-50%, -50%) rotate(-45deg) scale(1);
-        }
-      }
-    `,
-];
-tslib_es6.__decorate([
-    decorators_js.property({ type: String })
-], exports.FwIdleScreen.prototype, "status", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: String })
-], exports.FwIdleScreen.prototype, "message", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: Number })
-], exports.FwIdleScreen.prototype, "percentage", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: String })
-], exports.FwIdleScreen.prototype, "error", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: String, attribute: "logo-src" })
-], exports.FwIdleScreen.prototype, "logoSrc", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ type: Boolean, attribute: "retry-enabled" })
-], exports.FwIdleScreen.prototype, "retryEnabled", void 0);
-tslib_es6.__decorate([
-    decorators_js.property({ attribute: false })
-], exports.FwIdleScreen.prototype, "onRetry", void 0);
-tslib_es6.__decorate([
-    decorators_js.query(".idle-container")
-], exports.FwIdleScreen.prototype, "_containerEl", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwIdleScreen.prototype, "_logoSize", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwIdleScreen.prototype, "_logoOffset", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwIdleScreen.prototype, "_isLogoHovered", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwIdleScreen.prototype, "_bubbles", void 0);
-tslib_es6.__decorate([
-    decorators_js.state()
-], exports.FwIdleScreen.prototype, "_hitmarkers", void 0);
-exports.FwIdleScreen = tslib_es6.__decorate([
-    decorators_js.customElement("fw-idle-screen")
-], exports.FwIdleScreen);
-//# sourceMappingURL=fw-idle-screen.js.map