@livepeer-frameworks/player-wc 0.1.8 → 0.2.1

package/dist/esm/components/fw-idle-screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"fw-idle-screen.js","sources":["../../../../src/components/fw-idle-screen.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { sharedStyles } from \"../styles/shared-styles.js\";\nimport { utilityStyles } from \"../styles/utility-styles.js\";\nimport { LOGOMARK_DATA_URL } from \"../constants/media-assets.js\";\nimport { playHitmarkerSound } from \"./shared/hitmarker-audio.js\";\nimport \"./fw-dvd-logo.js\";\n\ninterface ParticleState {\n  left: number;\n  size: number;\n  color: string;\n  duration: number;\n  delay: number;\n}\n\ninterface BubbleState {\n  top: number;\n  left: number;\n  size: number;\n  opacity: number;\n  color: string;\n}\n\ninterface Hitmarker {\n  id: number;\n  x: number;\n  y: number;\n}\n\nconst BUBBLE_COLORS = [\n  \"rgba(122, 162, 247, 0.2)\",\n  \"rgba(187, 154, 247, 0.2)\",\n  \"rgba(158, 206, 106, 0.2)\",\n  \"rgba(115, 218, 202, 0.2)\",\n  \"rgba(125, 207, 255, 0.2)\",\n  \"rgba(247, 118, 142, 0.2)\",\n  \"rgba(224, 175, 104, 0.2)\",\n  \"rgba(42, 195, 222, 0.2)\",\n];\n\nconst PARTICLE_COLORS = [\n  \"#7aa2f7\",\n  \"#bb9af7\",\n  \"#9ece6a\",\n  \"#73daca\",\n  \"#7dcfff\",\n  \"#f7768e\",\n  \"#e0af68\",\n  \"#2ac3de\",\n];\n\n@customElement(\"fw-idle-screen\")\nexport class FwIdleScreen extends LitElement {\n  @property({ type: String }) status?: string;\n  @property({ type: String }) message?: string;\n  @property({ type: Number }) percentage?: number;\n  @property({ type: String }) error?: string;\n  @property({ type: String, attribute: \"logo-src\" }) logoSrc?: string;\n  @property({ type: Boolean, attribute: \"retry-enabled\" }) retryEnabled = false;\n  @property({ attribute: false }) onRetry?: () => void;\n  @query(\".idle-container\") private _containerEl?: HTMLDivElement;\n\n  @state() private _logoSize = 100;\n  @state() private _logoOffset = { x: 0, y: 0 };\n  @state() private _isLogoHovered = false;\n  @state() private _bubbles: BubbleState[] = this._createBubbles();\n  @state() private _hitmarkers: Hitmarker[] = [];\n\n  private readonly _particles: ParticleState[] = this._createParticles();\n  private _bubbleTimers = new Set<ReturnType<typeof setTimeout>>();\n  private _resizeObserver?: ResizeObserver;\n\n  static styles = [\n    sharedStyles,\n    utilityStyles,\n    css`\n      :host {\n        display: contents;\n      }\n      .idle-container {\n        position: absolute;\n        inset: 0;\n        z-index: 5;\n        background: linear-gradient(\n          135deg,\n          hsl(var(--tn-bg-dark, 235 21% 11%)) 0%,\n          hsl(var(--tn-bg, 233 23% 17%)) 25%,\n          hsl(var(--tn-bg-dark, 235 21% 11%)) 50%,\n          hsl(var(--tn-bg, 233 23% 17%)) 75%,\n          hsl(var(--tn-bg-dark, 235 21% 11%)) 100%\n        );\n        background-size: 400% 400%;\n        animation: _fw-gradient-shift 16s ease-in-out infinite;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        user-select: none;\n        -webkit-user-select: none;\n      }\n\n      .particles,\n      .bubbles {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n      }\n\n      .particle {\n        position: absolute;\n        border-radius: 50%;\n        opacity: 0;\n        animation: _fw-float-up linear infinite;\n      }\n\n      .bubble {\n        position: absolute;\n        border-radius: 50%;\n        transition: opacity 1s ease-in-out;\n      }\n\n      .center-logo {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 10;\n        transition: transform 0.3s ease-out;\n      }\n\n      .logo-pulse {\n        position: absolute;\n        border-radius: 50%;\n        background: rgba(122, 162, 247, 0.15);\n        animation: _fw-logo-pulse 3s ease-in-out infinite;\n        pointer-events: none;\n        transition: transform 0.3s ease-out;\n      }\n\n      .logo-pulse.hovered {\n        animation: _fw-logo-pulse 1s ease-in-out infinite;\n        transform: scale(1.2);\n      }\n\n      .logo-button {\n        all: unset;\n        cursor: pointer;\n        display: block;\n      }\n\n      .logo-image {\n        position: relative;\n        z-index: 1;\n        display: block;\n        filter: drop-shadow(0 4px 8px rgb(36 40 59 / 0.3));\n        transition: all 0.3s ease-out;\n        cursor: default;\n        user-select: none;\n        -webkit-user-drag: none;\n      }\n\n      .logo-image.hovered {\n        transform: scale(1.1);\n        filter: drop-shadow(0 6px 12px rgb(36 40 59 / 0.4)) brightness(1.1);\n      }\n\n      .status-overlay {\n        position: absolute;\n        bottom: 16px;\n        left: 50%;\n        transform: translateX(-50%);\n        z-index: 20;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 8px;\n        max-width: 280px;\n        text-align: center;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      }\n\n      .status-indicator {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        color: #787c99;\n        font-size: 13px;\n      }\n\n      .status-icon {\n        width: 20px;\n        height: 20px;\n        flex: 0 0 auto;\n      }\n\n      .status-icon.spinning {\n        animation: _fw-spin 1s linear infinite;\n      }\n\n      .progress-bar {\n        width: 160px;\n        height: 4px;\n        background: rgb(65 72 104 / 0.4);\n        border-radius: 2px;\n        overflow: hidden;\n      }\n\n      .progress-fill {\n        height: 100%;\n        background: hsl(var(--tn-cyan, 193 100% 75%));\n        transition: width 0.3s ease-out;\n      }\n\n      .retry-btn {\n        padding: 6px 16px;\n        background: transparent;\n        border: 1px solid rgb(122 162 247 / 0.4);\n        border-radius: 4px;\n        color: #7aa2f7;\n        font-size: 11px;\n        font-weight: 500;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      }\n\n      .retry-btn:hover {\n        background: rgb(122 162 247 / 0.1);\n      }\n\n      .overlay-texture {\n        position: absolute;\n        inset: 0;\n        background:\n          radial-gradient(circle at 20% 80%, rgb(122 162 247 / 0.03) 0%, transparent 50%),\n          radial-gradient(circle at 80% 20%, rgb(187 154 247 / 0.03) 0%, transparent 50%),\n          radial-gradient(circle at 40% 40%, rgb(158 206 106 / 0.02) 0%, transparent 50%);\n        pointer-events: none;\n      }\n\n      .hitmarker {\n        position: absolute;\n        transform: translate(-50%, -50%);\n        pointer-events: none;\n        z-index: 100;\n        width: 40px;\n        height: 40px;\n      }\n\n      .hitmarker-line {\n        position: absolute;\n        width: 12px;\n        height: 3px;\n        background-color: #fff;\n        box-shadow: 0 0 8px rgb(255 255 255 / 0.8);\n        border-radius: 1px;\n      }\n\n      .hitmarker-line.tl {\n        top: 25%;\n        left: 25%;\n        animation: _fw-hitmarker-fade-45 0.6s ease-out forwards;\n      }\n\n      .hitmarker-line.tr {\n        top: 25%;\n        left: 75%;\n        animation: _fw-hitmarker-fade-neg-45 0.6s ease-out forwards;\n      }\n\n      .hitmarker-line.bl {\n        top: 75%;\n        left: 25%;\n        animation: _fw-hitmarker-fade-neg-45 0.6s ease-out forwards;\n      }\n\n      .hitmarker-line.br {\n        top: 75%;\n        left: 75%;\n        animation: _fw-hitmarker-fade-45 0.6s ease-out forwards;\n      }\n\n      @keyframes _fw-spin {\n        from {\n          transform: rotate(0deg);\n        }\n        to {\n          transform: rotate(360deg);\n        }\n      }\n\n      @keyframes _fw-logo-pulse {\n        0%,\n        100% {\n          opacity: 0.15;\n          transform: scale(1);\n        }\n        50% {\n          opacity: 0.25;\n          transform: scale(1.05);\n        }\n      }\n\n      @keyframes _fw-float-up {\n        0% {\n          transform: translateY(100vh) rotate(0deg);\n          opacity: 0;\n        }\n        10% {\n          opacity: 0.6;\n        }\n        90% {\n          opacity: 0.6;\n        }\n        100% {\n          transform: translateY(-100px) rotate(360deg);\n          opacity: 0;\n        }\n      }\n\n      @keyframes _fw-gradient-shift {\n        0%,\n        100% {\n          background-position: 0% 50%;\n        }\n        50% {\n          background-position: 100% 50%;\n        }\n      }\n\n      @keyframes _fw-hitmarker-fade-45 {\n        0% {\n          opacity: 1;\n          transform: translate(-50%, -50%) rotate(45deg) scale(0.5);\n        }\n        20% {\n          opacity: 1;\n          transform: translate(-50%, -50%) rotate(45deg) scale(1.2);\n        }\n        100% {\n          opacity: 0;\n          transform: translate(-50%, -50%) rotate(45deg) scale(1);\n        }\n      }\n\n      @keyframes _fw-hitmarker-fade-neg-45 {\n        0% {\n          opacity: 1;\n          transform: translate(-50%, -50%) rotate(-45deg) scale(0.5);\n        }\n        20% {\n          opacity: 1;\n          transform: translate(-50%, -50%) rotate(-45deg) scale(1.2);\n        }\n        100% {\n          opacity: 0;\n          transform: translate(-50%, -50%) rotate(-45deg) scale(1);\n        }\n      }\n    `,\n  ];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._clearBubbleTimers();\n    this._startBubbleAnimations();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._clearBubbleTimers();\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = undefined;\n  }\n\n  protected firstUpdated() {\n    this._updateLogoSize();\n    if (typeof ResizeObserver !== \"undefined\") {\n      this._resizeObserver = new ResizeObserver(() => {\n        this._updateLogoSize();\n      });\n      if (this._containerEl) {\n        this._resizeObserver.observe(this._containerEl);\n      }\n    }\n  }\n\n  private _createParticles(): ParticleState[] {\n    return Array.from({ length: 12 }, (_, i) => ({\n      left: Math.random() * 100,\n      size: Math.random() * 4 + 2,\n      color: PARTICLE_COLORS[i % PARTICLE_COLORS.length],\n      duration: 8 + Math.random() * 4,\n      delay: Math.random() * 8,\n    }));\n  }\n\n  private _createBubbles(): BubbleState[] {\n    return Array.from({ length: 8 }, (_, i) => ({\n      top: Math.random() * 80 + 10,\n      left: Math.random() * 80 + 10,\n      size: Math.random() * 60 + 30,\n      opacity: 0,\n      color: BUBBLE_COLORS[i % BUBBLE_COLORS.length],\n    }));\n  }\n\n  private _setManagedTimer(callback: () => void, delayMs: number) {\n    const timer = setTimeout(() => {\n      this._bubbleTimers.delete(timer);\n      callback();\n    }, delayMs);\n    this._bubbleTimers.add(timer);\n  }\n\n  private _clearBubbleTimers() {\n    this._bubbleTimers.forEach((timer) => clearTimeout(timer));\n    this._bubbleTimers.clear();\n  }\n\n  private _updateBubble(index: number, nextState: Partial<BubbleState>) {\n    if (index < 0 || index >= this._bubbles.length) {\n      return;\n    }\n    const next = [...this._bubbles];\n    next[index] = { ...next[index], ...nextState };\n    this._bubbles = next;\n  }\n\n  private _animateBubble(index: number) {\n    this._updateBubble(index, { opacity: 0.15 });\n\n    const visibleDuration = 4000 + Math.random() * 3000;\n    this._setManagedTimer(() => {\n      this._updateBubble(index, { opacity: 0 });\n      this._setManagedTimer(() => {\n        this._updateBubble(index, {\n          top: Math.random() * 80 + 10,\n          left: Math.random() * 80 + 10,\n          size: Math.random() * 60 + 30,\n        });\n        this._setManagedTimer(() => this._animateBubble(index), 200);\n      }, 1500);\n    }, visibleDuration);\n  }\n\n  private _startBubbleAnimations() {\n    this._bubbles.forEach((_, index) => {\n      this._setManagedTimer(() => this._animateBubble(index), index * 500);\n    });\n  }\n\n  private _updateLogoSize() {\n    const rect = this._containerEl?.getBoundingClientRect() ?? this.getBoundingClientRect();\n    const minDimension = Math.min(rect.width, rect.height);\n    if (!Number.isFinite(minDimension) || minDimension <= 0) {\n      return;\n    }\n    this._logoSize = minDimension * 0.2;\n  }\n\n  private _handleMouseMove = (event: MouseEvent) => {\n    const rect = this._containerEl?.getBoundingClientRect() ?? this.getBoundingClientRect();\n    if (rect.width === 0 || rect.height === 0) {\n      return;\n    }\n\n    const centerX = rect.left + rect.width / 2;\n    const centerY = rect.top + rect.height / 2;\n    const deltaX = event.clientX - centerX;\n    const deltaY = event.clientY - centerY;\n    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n    const maxDistance = this._logoSize * 1.5;\n\n    if (distance < maxDistance && distance > 0) {\n      const pushStrength = (maxDistance - distance) / maxDistance;\n      const pushDistance = 50 * pushStrength;\n      this._logoOffset = {\n        x: -(deltaX / distance) * pushDistance,\n        y: -(deltaY / distance) * pushDistance,\n      };\n      this._isLogoHovered = true;\n      return;\n    }\n\n    this._logoOffset = { x: 0, y: 0 };\n    this._isLogoHovered = false;\n  };\n\n  private _handleMouseLeave = () => {\n    this._logoOffset = { x: 0, y: 0 };\n    this._isLogoHovered = false;\n  };\n\n  private _handleLogoClick = (event: MouseEvent) => {\n    event.stopPropagation();\n\n    const rect = this._containerEl?.getBoundingClientRect() ?? this.getBoundingClientRect();\n    const hitmarker = {\n      id: Date.now() + Math.random(),\n      x: event.clientX - rect.left,\n      y: event.clientY - rect.top,\n    };\n    this._hitmarkers = [...this._hitmarkers, hitmarker];\n    playHitmarkerSound();\n\n    this._setManagedTimer(() => {\n      this._hitmarkers = this._hitmarkers.filter((h) => h.id !== hitmarker.id);\n    }, 600);\n  };\n\n  private _handleRetry = () => {\n    if (this.onRetry) {\n      this.onRetry();\n      return;\n    }\n    this.dispatchEvent(\n      new CustomEvent(\"fw-retry\", {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  private get _isLoading() {\n    return (\n      this.status === \"INITIALIZING\" ||\n      this.status === \"BOOTING\" ||\n      this.status === \"WAITING_FOR_DATA\" ||\n      !this.status\n    );\n  }\n\n  private get _isOffline() {\n    return this.status === \"OFFLINE\";\n  }\n\n  private get _isError() {\n    return this.status === \"ERROR\" || this.status === \"INVALID\";\n  }\n\n  private get _showProgress() {\n    return this.status === \"INITIALIZING\" && this.percentage != null;\n  }\n\n  private get _showRetry() {\n    return this._isError && (this.retryEnabled || typeof this.onRetry === \"function\");\n  }\n\n  private get _displayMessage() {\n    return this.error || this.message || \"Waiting for stream...\";\n  }\n\n  private _renderStatusIcon() {\n    if (this._isLoading) {\n      return html`\n        <svg\n          class=\"status-icon spinning\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          style=\"color: hsl(var(--tn-yellow, 40 95% 64%));\"\n        >\n          <circle\n            style=\"opacity: 0.25;\"\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n          />\n          <path\n            style=\"opacity: 0.75;\"\n            fill=\"currentColor\"\n            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\"\n          ></path>\n        </svg>\n      `;\n    }\n\n    if (this._isOffline) {\n      return html`\n        <svg\n          class=\"status-icon\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          style=\"color: hsl(var(--tn-red, 348 100% 72%));\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            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\"\n          ></path>\n        </svg>\n      `;\n    }\n\n    if (this._isError) {\n      return html`\n        <svg\n          class=\"status-icon\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          style=\"color: hsl(var(--tn-red, 348 100% 72%));\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            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\"\n          ></path>\n        </svg>\n      `;\n    }\n\n    return html`\n      <svg\n        class=\"status-icon spinning\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        style=\"color: hsl(var(--tn-cyan, 193 100% 75%));\"\n      >\n        <circle\n          style=\"opacity: 0.25;\"\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"4\"\n        />\n        <path\n          style=\"opacity: 0.75;\"\n          fill=\"currentColor\"\n          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\"\n        ></path>\n      </svg>\n    `;\n  }\n\n  protected render() {\n    const progress = Math.min(100, Math.max(0, this.percentage ?? 0));\n    const logoSrc = this.logoSrc || LOGOMARK_DATA_URL;\n\n    return html`\n      <div\n        class=\"idle-container fw-player-root\"\n        role=\"status\"\n        aria-label=\"Stream status\"\n        @mousemove=${this._handleMouseMove}\n        @mouseleave=${this._handleMouseLeave}\n      >\n        ${this._hitmarkers.map(\n          (hitmarker) => html`\n            <div class=\"hitmarker\" style=\"left: ${hitmarker.x}px; top: ${hitmarker.y}px;\">\n              <div class=\"hitmarker-line tl\"></div>\n              <div class=\"hitmarker-line tr\"></div>\n              <div class=\"hitmarker-line bl\"></div>\n              <div class=\"hitmarker-line br\"></div>\n            </div>\n          `\n        )}\n\n        <div class=\"particles\">\n          ${this._particles.map(\n            (particle) => html`\n              <div\n                class=\"particle\"\n                style=\"\n                  left: ${particle.left}%;\n                  width: ${particle.size}px;\n                  height: ${particle.size}px;\n                  background: ${particle.color};\n                  animation-duration: ${particle.duration}s;\n                  animation-delay: ${particle.delay}s;\n                \"\n              ></div>\n            `\n          )}\n        </div>\n\n        <div class=\"bubbles\">\n          ${this._bubbles.map(\n            (bubble) => html`\n              <div\n                class=\"bubble\"\n                style=\"\n                  top: ${bubble.top}%;\n                  left: ${bubble.left}%;\n                  width: ${bubble.size}px;\n                  height: ${bubble.size}px;\n                  background: ${bubble.color};\n                  opacity: ${bubble.opacity};\n                \"\n              ></div>\n            `\n          )}\n        </div>\n\n        <div\n          class=\"center-logo\"\n          style=\"transform: translate(-50%, -50%) translate(${this._logoOffset.x}px, ${this\n            ._logoOffset.y}px);\"\n        >\n          <div\n            class=\"logo-pulse ${this._isLogoHovered ? \"hovered\" : \"\"}\"\n            style=\"width: ${this._logoSize * 1.4}px; height: ${this._logoSize * 1.4}px;\"\n          ></div>\n          <button\n            type=\"button\"\n            class=\"logo-button\"\n            @click=${this._handleLogoClick}\n            aria-label=\"FrameWorks logo\"\n          >\n            <img\n              src=${logoSrc}\n              alt=\"\"\n              class=\"logo-image ${this._isLogoHovered ? \"hovered\" : \"\"}\"\n              style=\"width: ${this._logoSize}px; height: ${this._logoSize}px;\"\n              draggable=\"false\"\n            />\n          </button>\n        </div>\n\n        <fw-dvd-logo .parentRef=${this._containerEl ?? null} .scale=${0.08}></fw-dvd-logo>\n\n        <div class=\"status-overlay\">\n          <div class=\"status-indicator\">\n            ${this._renderStatusIcon()}\n            <span>${this._displayMessage}</span>\n          </div>\n\n          ${this._showProgress\n            ? html`\n                <div class=\"progress-bar\">\n                  <div class=\"progress-fill\" style=\"width: ${progress}%;\"></div>\n                </div>\n              `\n            : nothing}\n          ${this._showRetry\n            ? html`<button type=\"button\" class=\"retry-btn\" @click=${this._handleRetry}>\n                Retry\n              </button>`\n            : nothing}\n        </div>\n\n        <div class=\"overlay-texture\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-idle-screen\": FwIdleScreen;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fw-idle-screen.js","sources":["../../../../src/components/fw-idle-screen.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { sharedStyles } from \"../styles/shared-styles.js\";\nimport { utilityStyles } from \"../styles/utility-styles.js\";\nimport { LOGOMARK_DATA_URL } from \"../constants/media-assets.js\";\nimport { playHitmarkerSound } from \"./shared/hitmarker-audio.js\";\nimport { createTranslator, type TranslateFn } from \"@livepeer-frameworks/player-core\";\nimport \"./fw-dvd-logo.js\";\n\ninterface ParticleState {\n  left: number;\n  size: number;\n  color: string;\n  duration: number;\n  delay: number;\n}\n\ninterface BubbleState {\n  top: number;\n  left: number;\n  size: number;\n  opacity: number;\n  color: string;\n}\n\ninterface Hitmarker {\n  id: number;\n  x: number;\n  y: number;\n}\n\nconst BUBBLE_COLORS = [\n  \"rgba(122, 162, 247, 0.2)\",\n  \"rgba(187, 154, 247, 0.2)\",\n  \"rgba(158, 206, 106, 0.2)\",\n  \"rgba(115, 218, 202, 0.2)\",\n  \"rgba(125, 207, 255, 0.2)\",\n  \"rgba(247, 118, 142, 0.2)\",\n  \"rgba(224, 175, 104, 0.2)\",\n  \"rgba(42, 195, 222, 0.2)\",\n];\n\nconst PARTICLE_COLORS = [\n  \"#7aa2f7\",\n  \"#bb9af7\",\n  \"#9ece6a\",\n  \"#73daca\",\n  \"#7dcfff\",\n  \"#f7768e\",\n  \"#e0af68\",\n  \"#2ac3de\",\n];\n\n@customElement(\"fw-idle-screen\")\nexport class FwIdleScreen extends LitElement {\n  @property({ type: String }) status?: string;\n  @property({ type: String }) message?: string;\n  @property({ type: Number }) percentage?: number;\n  @property({ type: String }) error?: string;\n  @property({ type: String, attribute: \"logo-src\" }) logoSrc?: string;\n  @property({ type: Boolean, attribute: \"retry-enabled\" }) retryEnabled = false;\n  @property({ attribute: false }) onRetry?: () => void;\n  @property({ attribute: false }) translator?: TranslateFn;\n\n  private _defaultTranslator: TranslateFn = createTranslator({ locale: \"en\" });\n\n  private get _t(): TranslateFn {\n    return this.translator ?? this._defaultTranslator;\n  }\n  @query(\".idle-container\") private _containerEl?: HTMLDivElement;\n\n  @state() private _logoSize = 100;\n  @state() private _logoOffset = { x: 0, y: 0 };\n  @state() private _isLogoHovered = false;\n  @state() private _bubbles: BubbleState[] = this._createBubbles();\n  @state() private _hitmarkers: Hitmarker[] = [];\n\n  private readonly _particles: ParticleState[] = this._createParticles();\n  private _bubbleTimers = new Set<ReturnType<typeof setTimeout>>();\n  private _resizeObserver?: ResizeObserver;\n\n  static styles = [\n    sharedStyles,\n    utilityStyles,\n    css`\n      :host {\n        display: contents;\n      }\n      .idle-container {\n        position: absolute;\n        inset: 0;\n        z-index: 5;\n        background: linear-gradient(\n          135deg,\n          hsl(var(--tn-bg-dark, 235 21% 11%)) 0%,\n          hsl(var(--tn-bg, 233 23% 17%)) 25%,\n          hsl(var(--tn-bg-dark, 235 21% 11%)) 50%,\n          hsl(var(--tn-bg, 233 23% 17%)) 75%,\n          hsl(var(--tn-bg-dark, 235 21% 11%)) 100%\n        );\n        background-size: 400% 400%;\n        animation: _fw-gradient-shift 16s ease-in-out infinite;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        user-select: none;\n        -webkit-user-select: none;\n      }\n\n      .particles,\n      .bubbles {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n      }\n\n      .particle {\n        position: absolute;\n        border-radius: 50%;\n        opacity: 0;\n        animation: _fw-float-up linear infinite;\n      }\n\n      .bubble {\n        position: absolute;\n        border-radius: 50%;\n        transition: opacity 1s ease-in-out;\n      }\n\n      .center-logo {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 10;\n        transition: transform 0.3s ease-out;\n      }\n\n      .logo-pulse {\n        position: absolute;\n        border-radius: 50%;\n        background: rgba(122, 162, 247, 0.15);\n        animation: _fw-logo-pulse 3s ease-in-out infinite;\n        pointer-events: none;\n        transition: transform 0.3s ease-out;\n      }\n\n      .logo-pulse.hovered {\n        animation: _fw-logo-pulse 1s ease-in-out infinite;\n        transform: scale(1.2);\n      }\n\n      .logo-button {\n        all: unset;\n        cursor: pointer;\n        display: block;\n      }\n\n      .logo-image {\n        position: relative;\n        z-index: 1;\n        display: block;\n        filter: drop-shadow(0 4px 8px rgb(36 40 59 / 0.3));\n        transition: all 0.3s ease-out;\n        cursor: default;\n        user-select: none;\n        -webkit-user-drag: none;\n      }\n\n      .logo-image.hovered {\n        transform: scale(1.1);\n        filter: drop-shadow(0 6px 12px rgb(36 40 59 / 0.4)) brightness(1.1);\n      }\n\n      .status-overlay {\n        position: absolute;\n        bottom: 16px;\n        left: 50%;\n        transform: translateX(-50%);\n        z-index: 20;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 8px;\n        max-width: 280px;\n        text-align: center;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      }\n\n      .status-indicator {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        color: #787c99;\n        font-size: 13px;\n      }\n\n      .status-icon {\n        width: 20px;\n        height: 20px;\n        flex: 0 0 auto;\n      }\n\n      .status-icon.spinning {\n        animation: _fw-spin 1s linear infinite;\n      }\n\n      .progress-bar {\n        width: 160px;\n        height: 4px;\n        background: rgb(65 72 104 / 0.4);\n        border-radius: 2px;\n        overflow: hidden;\n      }\n\n      .progress-fill {\n        height: 100%;\n        background: hsl(var(--tn-cyan, 193 100% 75%));\n        transition: width 0.3s ease-out;\n      }\n\n      .retry-btn {\n        padding: 6px 16px;\n        background: transparent;\n        border: 1px solid rgb(122 162 247 / 0.4);\n        border-radius: 4px;\n        color: #7aa2f7;\n        font-size: 11px;\n        font-weight: 500;\n        cursor: pointer;\n        transition: all 0.2s ease;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      }\n\n      .retry-btn:hover {\n        background: rgb(122 162 247 / 0.1);\n      }\n\n      .overlay-texture {\n        position: absolute;\n        inset: 0;\n        background:\n          radial-gradient(circle at 20% 80%, rgb(122 162 247 / 0.03) 0%, transparent 50%),\n          radial-gradient(circle at 80% 20%, rgb(187 154 247 / 0.03) 0%, transparent 50%),\n          radial-gradient(circle at 40% 40%, rgb(158 206 106 / 0.02) 0%, transparent 50%);\n        pointer-events: none;\n      }\n\n      .hitmarker {\n        position: absolute;\n        transform: translate(-50%, -50%);\n        pointer-events: none;\n        z-index: 100;\n        width: 40px;\n        height: 40px;\n      }\n\n      .hitmarker-line {\n        position: absolute;\n        width: 12px;\n        height: 3px;\n        background-color: #fff;\n        box-shadow: 0 0 8px rgb(255 255 255 / 0.8);\n        border-radius: 1px;\n      }\n\n      .hitmarker-line.tl {\n        top: 25%;\n        left: 25%;\n        animation: _fw-hitmarker-fade-45 0.6s ease-out forwards;\n      }\n\n      .hitmarker-line.tr {\n        top: 25%;\n        left: 75%;\n        animation: _fw-hitmarker-fade-neg-45 0.6s ease-out forwards;\n      }\n\n      .hitmarker-line.bl {\n        top: 75%;\n        left: 25%;\n        animation: _fw-hitmarker-fade-neg-45 0.6s ease-out forwards;\n      }\n\n      .hitmarker-line.br {\n        top: 75%;\n        left: 75%;\n        animation: _fw-hitmarker-fade-45 0.6s ease-out forwards;\n      }\n\n      @keyframes _fw-spin {\n        from {\n          transform: rotate(0deg);\n        }\n        to {\n          transform: rotate(360deg);\n        }\n      }\n\n      @keyframes _fw-logo-pulse {\n        0%,\n        100% {\n          opacity: 0.15;\n          transform: scale(1);\n        }\n        50% {\n          opacity: 0.25;\n          transform: scale(1.05);\n        }\n      }\n\n      @keyframes _fw-float-up {\n        0% {\n          transform: translateY(100vh) rotate(0deg);\n          opacity: 0;\n        }\n        10% {\n          opacity: 0.6;\n        }\n        90% {\n          opacity: 0.6;\n        }\n        100% {\n          transform: translateY(-100px) rotate(360deg);\n          opacity: 0;\n        }\n      }\n\n      @keyframes _fw-gradient-shift {\n        0%,\n        100% {\n          background-position: 0% 50%;\n        }\n        50% {\n          background-position: 100% 50%;\n        }\n      }\n\n      @keyframes _fw-hitmarker-fade-45 {\n        0% {\n          opacity: 1;\n          transform: translate(-50%, -50%) rotate(45deg) scale(0.5);\n        }\n        20% {\n          opacity: 1;\n          transform: translate(-50%, -50%) rotate(45deg) scale(1.2);\n        }\n        100% {\n          opacity: 0;\n          transform: translate(-50%, -50%) rotate(45deg) scale(1);\n        }\n      }\n\n      @keyframes _fw-hitmarker-fade-neg-45 {\n        0% {\n          opacity: 1;\n          transform: translate(-50%, -50%) rotate(-45deg) scale(0.5);\n        }\n        20% {\n          opacity: 1;\n          transform: translate(-50%, -50%) rotate(-45deg) scale(1.2);\n        }\n        100% {\n          opacity: 0;\n          transform: translate(-50%, -50%) rotate(-45deg) scale(1);\n        }\n      }\n    `,\n  ];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._clearBubbleTimers();\n    this._startBubbleAnimations();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._clearBubbleTimers();\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = undefined;\n  }\n\n  protected firstUpdated() {\n    this._updateLogoSize();\n    if (typeof ResizeObserver !== \"undefined\") {\n      this._resizeObserver = new ResizeObserver(() => {\n        this._updateLogoSize();\n      });\n      if (this._containerEl) {\n        this._resizeObserver.observe(this._containerEl);\n      }\n    }\n  }\n\n  private _createParticles(): ParticleState[] {\n    return Array.from({ length: 12 }, (_, i) => ({\n      left: Math.random() * 100,\n      size: Math.random() * 4 + 2,\n      color: PARTICLE_COLORS[i % PARTICLE_COLORS.length],\n      duration: 8 + Math.random() * 4,\n      delay: Math.random() * 8,\n    }));\n  }\n\n  private _createBubbles(): BubbleState[] {\n    return Array.from({ length: 8 }, (_, i) => ({\n      top: Math.random() * 80 + 10,\n      left: Math.random() * 80 + 10,\n      size: Math.random() * 60 + 30,\n      opacity: 0,\n      color: BUBBLE_COLORS[i % BUBBLE_COLORS.length],\n    }));\n  }\n\n  private _setManagedTimer(callback: () => void, delayMs: number) {\n    const timer = setTimeout(() => {\n      this._bubbleTimers.delete(timer);\n      callback();\n    }, delayMs);\n    this._bubbleTimers.add(timer);\n  }\n\n  private _clearBubbleTimers() {\n    this._bubbleTimers.forEach((timer) => clearTimeout(timer));\n    this._bubbleTimers.clear();\n  }\n\n  private _updateBubble(index: number, nextState: Partial<BubbleState>) {\n    if (index < 0 || index >= this._bubbles.length) {\n      return;\n    }\n    const next = [...this._bubbles];\n    next[index] = { ...next[index], ...nextState };\n    this._bubbles = next;\n  }\n\n  private _animateBubble(index: number) {\n    this._updateBubble(index, { opacity: 0.15 });\n\n    const visibleDuration = 4000 + Math.random() * 3000;\n    this._setManagedTimer(() => {\n      this._updateBubble(index, { opacity: 0 });\n      this._setManagedTimer(() => {\n        this._updateBubble(index, {\n          top: Math.random() * 80 + 10,\n          left: Math.random() * 80 + 10,\n          size: Math.random() * 60 + 30,\n        });\n        this._setManagedTimer(() => this._animateBubble(index), 200);\n      }, 1500);\n    }, visibleDuration);\n  }\n\n  private _startBubbleAnimations() {\n    this._bubbles.forEach((_, index) => {\n      this._setManagedTimer(() => this._animateBubble(index), index * 500);\n    });\n  }\n\n  private _updateLogoSize() {\n    const rect = this._containerEl?.getBoundingClientRect() ?? this.getBoundingClientRect();\n    const minDimension = Math.min(rect.width, rect.height);\n    if (!Number.isFinite(minDimension) || minDimension <= 0) {\n      return;\n    }\n    this._logoSize = minDimension * 0.2;\n  }\n\n  private _handleMouseMove = (event: MouseEvent) => {\n    const rect = this._containerEl?.getBoundingClientRect() ?? this.getBoundingClientRect();\n    if (rect.width === 0 || rect.height === 0) {\n      return;\n    }\n\n    const centerX = rect.left + rect.width / 2;\n    const centerY = rect.top + rect.height / 2;\n    const deltaX = event.clientX - centerX;\n    const deltaY = event.clientY - centerY;\n    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n    const maxDistance = this._logoSize * 1.5;\n\n    if (distance < maxDistance && distance > 0) {\n      const pushStrength = (maxDistance - distance) / maxDistance;\n      const pushDistance = 50 * pushStrength;\n      this._logoOffset = {\n        x: -(deltaX / distance) * pushDistance,\n        y: -(deltaY / distance) * pushDistance,\n      };\n      this._isLogoHovered = true;\n      return;\n    }\n\n    this._logoOffset = { x: 0, y: 0 };\n    this._isLogoHovered = false;\n  };\n\n  private _handleMouseLeave = () => {\n    this._logoOffset = { x: 0, y: 0 };\n    this._isLogoHovered = false;\n  };\n\n  private _handleLogoClick = (event: MouseEvent) => {\n    event.stopPropagation();\n\n    const rect = this._containerEl?.getBoundingClientRect() ?? this.getBoundingClientRect();\n    const hitmarker = {\n      id: Date.now() + Math.random(),\n      x: event.clientX - rect.left,\n      y: event.clientY - rect.top,\n    };\n    this._hitmarkers = [...this._hitmarkers, hitmarker];\n    playHitmarkerSound();\n\n    this._setManagedTimer(() => {\n      this._hitmarkers = this._hitmarkers.filter((h) => h.id !== hitmarker.id);\n    }, 600);\n  };\n\n  private _handleRetry = () => {\n    if (this.onRetry) {\n      this.onRetry();\n      return;\n    }\n    this.dispatchEvent(\n      new CustomEvent(\"fw-retry\", {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  };\n\n  private get _isLoading() {\n    return (\n      this.status === \"INITIALIZING\" ||\n      this.status === \"BOOTING\" ||\n      this.status === \"WAITING_FOR_DATA\" ||\n      !this.status\n    );\n  }\n\n  private get _isOffline() {\n    return this.status === \"OFFLINE\";\n  }\n\n  private get _isError() {\n    return this.status === \"ERROR\" || this.status === \"INVALID\";\n  }\n\n  private get _showProgress() {\n    return this.status === \"INITIALIZING\" && this.percentage != null;\n  }\n\n  private get _showRetry() {\n    return this._isError && (this.retryEnabled || typeof this.onRetry === \"function\");\n  }\n\n  private get _displayMessage() {\n    return this.error || this.message || this._t(\"waitingForStream\");\n  }\n\n  private _renderStatusIcon() {\n    if (this._isLoading) {\n      return html`\n        <svg\n          class=\"status-icon spinning\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          style=\"color: hsl(var(--tn-yellow, 40 95% 64%));\"\n        >\n          <circle\n            style=\"opacity: 0.25;\"\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\"\n            stroke=\"currentColor\"\n            stroke-width=\"4\"\n          />\n          <path\n            style=\"opacity: 0.75;\"\n            fill=\"currentColor\"\n            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\"\n          ></path>\n        </svg>\n      `;\n    }\n\n    if (this._isOffline) {\n      return html`\n        <svg\n          class=\"status-icon\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          style=\"color: hsl(var(--tn-red, 348 100% 72%));\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            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\"\n          ></path>\n        </svg>\n      `;\n    }\n\n    if (this._isError) {\n      return html`\n        <svg\n          class=\"status-icon\"\n          fill=\"none\"\n          viewBox=\"0 0 24 24\"\n          stroke=\"currentColor\"\n          style=\"color: hsl(var(--tn-red, 348 100% 72%));\"\n        >\n          <path\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            stroke-width=\"2\"\n            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\"\n          ></path>\n        </svg>\n      `;\n    }\n\n    return html`\n      <svg\n        class=\"status-icon spinning\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        style=\"color: hsl(var(--tn-cyan, 193 100% 75%));\"\n      >\n        <circle\n          style=\"opacity: 0.25;\"\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"4\"\n        />\n        <path\n          style=\"opacity: 0.75;\"\n          fill=\"currentColor\"\n          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\"\n        ></path>\n      </svg>\n    `;\n  }\n\n  protected render() {\n    const progress = Math.min(100, Math.max(0, this.percentage ?? 0));\n    const logoSrc = this.logoSrc || LOGOMARK_DATA_URL;\n\n    return html`\n      <div\n        class=\"idle-container fw-player-root\"\n        role=\"status\"\n        aria-label=\"Stream status\"\n        @mousemove=${this._handleMouseMove}\n        @mouseleave=${this._handleMouseLeave}\n      >\n        ${this._hitmarkers.map(\n          (hitmarker) => html`\n            <div class=\"hitmarker\" style=\"left: ${hitmarker.x}px; top: ${hitmarker.y}px;\">\n              <div class=\"hitmarker-line tl\"></div>\n              <div class=\"hitmarker-line tr\"></div>\n              <div class=\"hitmarker-line bl\"></div>\n              <div class=\"hitmarker-line br\"></div>\n            </div>\n          `\n        )}\n\n        <div class=\"particles\">\n          ${this._particles.map(\n            (particle) => html`\n              <div\n                class=\"particle\"\n                style=\"\n                  left: ${particle.left}%;\n                  width: ${particle.size}px;\n                  height: ${particle.size}px;\n                  background: ${particle.color};\n                  animation-duration: ${particle.duration}s;\n                  animation-delay: ${particle.delay}s;\n                \"\n              ></div>\n            `\n          )}\n        </div>\n\n        <div class=\"bubbles\">\n          ${this._bubbles.map(\n            (bubble) => html`\n              <div\n                class=\"bubble\"\n                style=\"\n                  top: ${bubble.top}%;\n                  left: ${bubble.left}%;\n                  width: ${bubble.size}px;\n                  height: ${bubble.size}px;\n                  background: ${bubble.color};\n                  opacity: ${bubble.opacity};\n                \"\n              ></div>\n            `\n          )}\n        </div>\n\n        <div\n          class=\"center-logo\"\n          style=\"transform: translate(-50%, -50%) translate(${this._logoOffset.x}px, ${this\n            ._logoOffset.y}px);\"\n        >\n          <div\n            class=\"logo-pulse ${this._isLogoHovered ? \"hovered\" : \"\"}\"\n            style=\"width: ${this._logoSize * 1.4}px; height: ${this._logoSize * 1.4}px;\"\n          ></div>\n          <button\n            type=\"button\"\n            class=\"logo-button\"\n            @click=${this._handleLogoClick}\n            aria-label=\"FrameWorks logo\"\n          >\n            <img\n              src=${logoSrc}\n              alt=\"\"\n              class=\"logo-image ${this._isLogoHovered ? \"hovered\" : \"\"}\"\n              style=\"width: ${this._logoSize}px; height: ${this._logoSize}px;\"\n              draggable=\"false\"\n            />\n          </button>\n        </div>\n\n        <fw-dvd-logo .parentRef=${this._containerEl ?? null} .scale=${0.08}></fw-dvd-logo>\n\n        <div class=\"status-overlay\">\n          <div class=\"status-indicator\">\n            ${this._renderStatusIcon()}\n            <span>${this._displayMessage}</span>\n          </div>\n\n          ${this._showProgress\n            ? html`\n                <div class=\"progress-bar\">\n                  <div class=\"progress-fill\" style=\"width: ${progress}%;\"></div>\n                </div>\n              `\n            : nothing}\n          ${this._showRetry\n            ? html`<button type=\"button\" class=\"retry-btn\" @click=${this._handleRetry}>\n                ${this._t(\"retry\")}\n              </button>`\n            : nothing}\n        </div>\n\n        <div class=\"overlay-texture\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-idle-screen\": FwIdleScreen;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/fw-loading-screen.js

@@ -5,32 +5,13 @@ 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 } from '@livepeer-frameworks/player-core';
 import './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",
-];
 let FwLoadingScreen = class FwLoadingScreen extends LitElement {
     constructor() {
         super(...arguments);
-        this.message = "Waiting for source...";
+        this._defaultTranslator = createTranslator({ locale: "en" });
         this._logoSize = 100;
         this._logoOffset = { x: 0, y: 0 };
         this._isLogoHovered = false;
@@ -103,21 +84,19 @@ let FwLoadingScreen = class FwLoadingScreen extends LitElement {
         }
     }
     _createParticles() {
-        return Array.from({ length: 12 }, (_, index) => ({
+        return Array.from({ length: 12 }, () => ({
             left: Math.random() * 100,
             size: Math.random() * 4 + 2,
-            color: PARTICLE_COLORS[index % PARTICLE_COLORS.length],
             duration: 8 + Math.random() * 4,
             delay: Math.random() * 8,
         }));
     }
     _createBubbles() {
-        return Array.from({ length: 8 }, (_, index) => ({
+        return Array.from({ length: 8 }, () => ({
             top: Math.random() * 80 + 10,
             left: Math.random() * 80 + 10,
             size: Math.random() * 60 + 30,
             opacity: 0,
-            color: BUBBLE_COLORS[index % BUBBLE_COLORS.length],
         }));
     }
     _setManagedTimer(callback, delayMs) {
@@ -164,8 +143,12 @@ let FwLoadingScreen = class FwLoadingScreen extends LitElement {
         }
         this._logoSize = minDimension * 0.2;
     }
+    get _t() {
+        return this.translator ?? this._defaultTranslator;
+    }
     render() {
         const logoSrc = this.logoSrc || LOGOMARK_DATA_URL;
+        const displayMessage = this.message ?? this._t("waitingForSource");
         return html `
       <div
         class="loading-container fw-player-root"
@@ -189,7 +172,6 @@ let FwLoadingScreen = class FwLoadingScreen extends LitElement {
                   left:${particle.left}%;
                   width:${particle.size}px;
                   height:${particle.size}px;
-                  background:${particle.color};
                   animation-duration:${particle.duration}s;
                   animation-delay:${particle.delay}s;
                 "
@@ -206,7 +188,6 @@ let FwLoadingScreen = class FwLoadingScreen extends LitElement {
                   left:${bubble.left}%;
                   width:${bubble.size}px;
                   height:${bubble.size}px;
-                  background:${bubble.color};
                   opacity:${bubble.opacity};
                 "
               ></div>
@@ -235,7 +216,7 @@ let FwLoadingScreen = class FwLoadingScreen extends LitElement {
 
         <fw-dvd-logo .parentRef=${this._containerEl ?? null} .scale=${0.08}></fw-dvd-logo>
 
-        <div class="message">${this.message}</div>
+        <div class="message">${displayMessage}</div>
         <div class="overlay-texture"></div>
       </div>
     `;
@@ -260,11 +241,11 @@ FwLoadingScreen.styles = [
         user-select: none;
         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%
+          hsl(var(--fw-surface-deep, 235 21% 11%)) 0%,
+          hsl(var(--fw-surface, 233 23% 17%)) 25%,
+          hsl(var(--fw-surface-deep, 235 21% 11%)) 50%,
+          hsl(var(--fw-surface, 233 23% 17%)) 75%,
+          hsl(var(--fw-surface-deep, 235 21% 11%)) 100%
         );
         background-size: 400% 400%;
         animation: _fw-gradient-shift 16s ease-in-out infinite;
@@ -290,6 +271,56 @@ FwLoadingScreen.styles = [
         transition: opacity 1s ease-in-out;
       }
 
+      .particle:nth-child(8n + 1) {
+        background: hsl(var(--fw-accent, 218 79% 73%));
+      }
+      .particle:nth-child(8n + 2) {
+        background: hsl(var(--fw-accent-secondary, 178 64% 63%));
+      }
+      .particle:nth-child(8n + 3) {
+        background: hsl(var(--fw-success, 95 53% 55%));
+      }
+      .particle:nth-child(8n + 4) {
+        background: hsl(var(--fw-info, 178 64% 63%));
+      }
+      .particle:nth-child(8n + 5) {
+        background: hsl(var(--fw-danger, 348 74% 64%));
+      }
+      .particle:nth-child(8n + 6) {
+        background: hsl(var(--fw-warning, 35 79% 64%));
+      }
+      .particle:nth-child(8n + 7) {
+        background: hsl(var(--fw-accent, 218 79% 73%) / 0.8);
+      }
+      .particle:nth-child(8n + 8) {
+        background: hsl(var(--fw-accent-secondary, 178 64% 63%) / 0.8);
+      }
+
+      .bubble:nth-child(8n + 1) {
+        background: hsl(var(--fw-accent, 218 79% 73%) / 0.2);
+      }
+      .bubble:nth-child(8n + 2) {
+        background: hsl(var(--fw-accent-secondary, 178 64% 63%) / 0.2);
+      }
+      .bubble:nth-child(8n + 3) {
+        background: hsl(var(--fw-success, 95 53% 55%) / 0.2);
+      }
+      .bubble:nth-child(8n + 4) {
+        background: hsl(var(--fw-info, 178 64% 63%) / 0.2);
+      }
+      .bubble:nth-child(8n + 5) {
+        background: hsl(var(--fw-danger, 348 74% 64%) / 0.2);
+      }
+      .bubble:nth-child(8n + 6) {
+        background: hsl(var(--fw-warning, 35 79% 64%) / 0.2);
+      }
+      .bubble:nth-child(8n + 7) {
+        background: hsl(var(--fw-accent, 218 79% 73%) / 0.15);
+      }
+      .bubble:nth-child(8n + 8) {
+        background: hsl(var(--fw-accent-secondary, 178 64% 63%) / 0.15);
+      }
+
       .center-logo {
         position: absolute;
         top: 50%;
@@ -302,7 +333,7 @@ FwLoadingScreen.styles = [
       .logo-pulse {
         position: absolute;
         border-radius: 50%;
-        background: rgba(122, 162, 247, 0.15);
+        background: hsl(var(--fw-accent, 218 79% 73%) / 0.15);
         animation: _fw-logo-pulse 3s ease-in-out infinite;
         pointer-events: none;
       }
@@ -331,7 +362,8 @@ FwLoadingScreen.styles = [
 
       .logo-mark.hovered {
         transform: scale(1.1);
-        filter: drop-shadow(0 6px 12px rgba(36, 40, 59, 0.4)) brightness(1.1);
+        filter: drop-shadow(0 6px 12px hsl(var(--fw-surface-deep, 235 21% 11%) / 0.4))
+          brightness(1.1);
       }
 
       .message {
@@ -340,11 +372,11 @@ FwLoadingScreen.styles = [
         left: 50%;
         transform: translateX(-50%);
         z-index: 8;
-        color: #a9b1d6;
+        color: hsl(var(--fw-text-muted, 224 16% 53%));
         font-size: 16px;
         font-weight: 500;
         text-align: center;
-        text-shadow: 0 2px 4px rgba(36, 40, 59, 0.5);
+        text-shadow: 0 2px 4px hsl(var(--fw-surface-deep, 235 21% 11%) / 0.5);
         animation: _fw-fade-in-out 2s ease-in-out infinite;
         pointer-events: none;
       }
@@ -354,9 +386,21 @@ FwLoadingScreen.styles = [
         inset: 0;
         pointer-events: none;
         background:
-          radial-gradient(circle at 20% 80%, rgba(122, 162, 247, 0.03) 0%, transparent 50%),
-          radial-gradient(circle at 80% 20%, rgba(187, 154, 247, 0.03) 0%, transparent 50%),
-          radial-gradient(circle at 40% 40%, rgba(158, 206, 106, 0.02) 0%, transparent 50%);
+          radial-gradient(
+            circle at 20% 80%,
+            hsl(var(--fw-accent, 218 79% 73%) / 0.03) 0%,
+            transparent 50%
+          ),
+          radial-gradient(
+            circle at 80% 20%,
+            hsl(var(--fw-accent-secondary, 178 64% 63%) / 0.03) 0%,
+            transparent 50%
+          ),
+          radial-gradient(
+            circle at 40% 40%,
+            hsl(var(--fw-success, 95 53% 55%) / 0.02) 0%,
+            transparent 50%
+          );
       }
 
       .hitmarker {
@@ -372,8 +416,8 @@ FwLoadingScreen.styles = [
         position: absolute;
         width: 12px;
         height: 3px;
-        background-color: #fff;
-        box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
+        background-color: hsl(var(--fw-text-bright, 0 0% 100%));
+        box-shadow: 0 0 8px hsl(var(--fw-text-bright, 0 0% 100%) / 0.8);
         border-radius: 1px;
       }
 
@@ -487,6 +531,9 @@ __decorate([
 __decorate([
     property({ type: String, attribute: "logo-src" })
 ], FwLoadingScreen.prototype, "logoSrc", void 0);
+__decorate([
+    property({ attribute: false })
+], FwLoadingScreen.prototype, "translator", void 0);
 __decorate([
     query(".loading-container")
 ], FwLoadingScreen.prototype, "_containerEl", void 0);

package/dist/esm/components/fw-loading-screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"fw-loading-screen.js","sources":["../../../../src/components/fw-loading-screen.ts"],"sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { sharedStyles } from \"../styles/shared-styles.js\";\nimport { utilityStyles } from \"../styles/utility-styles.js\";\nimport { LOGOMARK_DATA_URL } from \"../constants/media-assets.js\";\nimport { playHitmarkerSound } from \"./shared/hitmarker-audio.js\";\nimport \"./fw-dvd-logo.js\";\n\ninterface ParticleState {\n  left: number;\n  size: number;\n  color: string;\n  duration: number;\n  delay: number;\n}\n\ninterface BubbleState {\n  top: number;\n  left: number;\n  size: number;\n  opacity: number;\n  color: string;\n}\n\ninterface Hitmarker {\n  id: number;\n  x: number;\n  y: number;\n}\n\nconst BUBBLE_COLORS = [\n  \"rgba(122, 162, 247, 0.2)\",\n  \"rgba(187, 154, 247, 0.2)\",\n  \"rgba(158, 206, 106, 0.2)\",\n  \"rgba(115, 218, 202, 0.2)\",\n  \"rgba(125, 207, 255, 0.2)\",\n  \"rgba(247, 118, 142, 0.2)\",\n  \"rgba(224, 175, 104, 0.2)\",\n  \"rgba(42, 195, 222, 0.2)\",\n];\n\nconst PARTICLE_COLORS = [\n  \"#7aa2f7\",\n  \"#bb9af7\",\n  \"#9ece6a\",\n  \"#73daca\",\n  \"#7dcfff\",\n  \"#f7768e\",\n  \"#e0af68\",\n  \"#2ac3de\",\n];\n\n@customElement(\"fw-loading-screen\")\nexport class FwLoadingScreen extends LitElement {\n  @property({ type: String }) message = \"Waiting for source...\";\n  @property({ type: String, attribute: \"logo-src\" }) logoSrc?: string;\n  @query(\".loading-container\") private _containerEl?: HTMLDivElement;\n\n  @state() private _logoSize = 100;\n  @state() private _logoOffset = { x: 0, y: 0 };\n  @state() private _isLogoHovered = false;\n  @state() private _bubbles: BubbleState[] = this._createBubbles();\n  @state() private _hitmarkers: Hitmarker[] = [];\n\n  private _bubbleTimers = new Set<ReturnType<typeof setTimeout>>();\n  private _resizeObserver: ResizeObserver | null = null;\n  private readonly _particles: ParticleState[] = this._createParticles();\n\n  static styles = [\n    sharedStyles,\n    utilityStyles,\n    css`\n      :host {\n        display: block;\n        width: 100%;\n        height: 100%;\n      }\n\n      .loading-container {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        min-height: 300px;\n        overflow: hidden;\n        user-select: none;\n        background: linear-gradient(\n          135deg,\n          hsl(var(--tn-bg-dark, 235 21% 11%)) 0%,\n          hsl(var(--tn-bg, 233 23% 17%)) 25%,\n          hsl(var(--tn-bg-dark, 235 21% 11%)) 50%,\n          hsl(var(--tn-bg, 233 23% 17%)) 75%,\n          hsl(var(--tn-bg-dark, 235 21% 11%)) 100%\n        );\n        background-size: 400% 400%;\n        animation: _fw-gradient-shift 16s ease-in-out infinite;\n      }\n\n      .particles,\n      .bubbles {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n      }\n\n      .particle {\n        position: absolute;\n        border-radius: 50%;\n        opacity: 0;\n        animation: _fw-float-up linear infinite;\n      }\n\n      .bubble {\n        position: absolute;\n        border-radius: 50%;\n        transition: opacity 1s ease-in-out;\n      }\n\n      .center-logo {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        z-index: 10;\n        transition: transform 0.3s ease-out;\n      }\n\n      .logo-pulse {\n        position: absolute;\n        border-radius: 50%;\n        background: rgba(122, 162, 247, 0.15);\n        animation: _fw-logo-pulse 3s ease-in-out infinite;\n        pointer-events: none;\n      }\n\n      .logo-pulse.hovered {\n        animation: _fw-logo-pulse 1s ease-in-out infinite;\n        transform: scale(1.2);\n      }\n\n      .logo-mark {\n        position: relative;\n        z-index: 1;\n        transition: all 0.3s ease-out;\n        border: none;\n        background: transparent;\n        padding: 0;\n        margin: 0;\n        cursor: pointer;\n      }\n\n      .logo-mark img {\n        width: 100%;\n        height: 100%;\n        display: block;\n      }\n\n      .logo-mark.hovered {\n        transform: scale(1.1);\n        filter: drop-shadow(0 6px 12px rgba(36, 40, 59, 0.4)) brightness(1.1);\n      }\n\n      .message {\n        position: absolute;\n        bottom: 20%;\n        left: 50%;\n        transform: translateX(-50%);\n        z-index: 8;\n        color: #a9b1d6;\n        font-size: 16px;\n        font-weight: 500;\n        text-align: center;\n        text-shadow: 0 2px 4px rgba(36, 40, 59, 0.5);\n        animation: _fw-fade-in-out 2s ease-in-out infinite;\n        pointer-events: none;\n      }\n\n      .overlay-texture {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        background:\n          radial-gradient(circle at 20% 80%, rgba(122, 162, 247, 0.03) 0%, transparent 50%),\n          radial-gradient(circle at 80% 20%, rgba(187, 154, 247, 0.03) 0%, transparent 50%),\n          radial-gradient(circle at 40% 40%, rgba(158, 206, 106, 0.02) 0%, transparent 50%);\n      }\n\n      .hitmarker {\n        position: absolute;\n        transform: translate(-50%, -50%);\n        pointer-events: none;\n        z-index: 100;\n        width: 40px;\n        height: 40px;\n      }\n\n      .hitmarker-line {\n        position: absolute;\n        width: 12px;\n        height: 3px;\n        background-color: #fff;\n        box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);\n        border-radius: 1px;\n      }\n\n      .hitmarker-line.tl {\n        top: 25%;\n        left: 25%;\n        animation: _fw-hitmarker-fade-45 0.6s ease-out forwards;\n      }\n\n      .hitmarker-line.tr {\n        top: 25%;\n        left: 75%;\n        animation: _fw-hitmarker-fade-neg-45 0.6s ease-out forwards;\n      }\n\n      .hitmarker-line.bl {\n        top: 75%;\n        left: 25%;\n        animation: _fw-hitmarker-fade-neg-45 0.6s ease-out forwards;\n      }\n\n      .hitmarker-line.br {\n        top: 75%;\n        left: 75%;\n        animation: _fw-hitmarker-fade-45 0.6s ease-out forwards;\n      }\n\n      @keyframes _fw-fade-in-out {\n        0%,\n        100% {\n          opacity: 0.6;\n        }\n        50% {\n          opacity: 0.9;\n        }\n      }\n\n      @keyframes _fw-logo-pulse {\n        0%,\n        100% {\n          opacity: 0.15;\n          transform: scale(1);\n        }\n        50% {\n          opacity: 0.25;\n          transform: scale(1.05);\n        }\n      }\n\n      @keyframes _fw-float-up {\n        0% {\n          transform: translateY(100vh) rotate(0deg);\n          opacity: 0;\n        }\n        10% {\n          opacity: 0.6;\n        }\n        90% {\n          opacity: 0.6;\n        }\n        100% {\n          transform: translateY(-100px) rotate(360deg);\n          opacity: 0;\n        }\n      }\n\n      @keyframes _fw-gradient-shift {\n        0%,\n        100% {\n          background-position: 0% 50%;\n        }\n        50% {\n          background-position: 100% 50%;\n        }\n      }\n\n      @keyframes _fw-hitmarker-fade-45 {\n        0% {\n          opacity: 1;\n          transform: translate(-50%, -50%) rotate(45deg) scale(0.5);\n        }\n        20% {\n          opacity: 1;\n          transform: translate(-50%, -50%) rotate(45deg) scale(1.2);\n        }\n        100% {\n          opacity: 0;\n          transform: translate(-50%, -50%) rotate(45deg) scale(1);\n        }\n      }\n\n      @keyframes _fw-hitmarker-fade-neg-45 {\n        0% {\n          opacity: 1;\n          transform: translate(-50%, -50%) rotate(-45deg) scale(0.5);\n        }\n        20% {\n          opacity: 1;\n          transform: translate(-50%, -50%) rotate(-45deg) scale(1.2);\n        }\n        100% {\n          opacity: 0;\n          transform: translate(-50%, -50%) rotate(-45deg) scale(1);\n        }\n      }\n    `,\n  ];\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this._clearBubbleTimers();\n    this._startBubbleAnimations();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._clearBubbleTimers();\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = null;\n  }\n\n  protected firstUpdated(): void {\n    this._updateLogoSize();\n    if (typeof ResizeObserver !== \"undefined\") {\n      this._resizeObserver = new ResizeObserver(() => this._updateLogoSize());\n      if (this._containerEl) {\n        this._resizeObserver.observe(this._containerEl);\n      }\n    }\n  }\n\n  private _createParticles(): ParticleState[] {\n    return Array.from({ length: 12 }, (_, index) => ({\n      left: Math.random() * 100,\n      size: Math.random() * 4 + 2,\n      color: PARTICLE_COLORS[index % PARTICLE_COLORS.length],\n      duration: 8 + Math.random() * 4,\n      delay: Math.random() * 8,\n    }));\n  }\n\n  private _createBubbles(): BubbleState[] {\n    return Array.from({ length: 8 }, (_, index) => ({\n      top: Math.random() * 80 + 10,\n      left: Math.random() * 80 + 10,\n      size: Math.random() * 60 + 30,\n      opacity: 0,\n      color: BUBBLE_COLORS[index % BUBBLE_COLORS.length],\n    }));\n  }\n\n  private _setManagedTimer(callback: () => void, delayMs: number): void {\n    const timer = setTimeout(() => {\n      this._bubbleTimers.delete(timer);\n      callback();\n    }, delayMs);\n    this._bubbleTimers.add(timer);\n  }\n\n  private _clearBubbleTimers(): void {\n    this._bubbleTimers.forEach((timer) => clearTimeout(timer));\n    this._bubbleTimers.clear();\n  }\n\n  private _updateBubble(index: number, nextState: Partial<BubbleState>): void {\n    const next = [...this._bubbles];\n    next[index] = { ...next[index], ...nextState };\n    this._bubbles = next;\n  }\n\n  private _animateBubble(index: number): void {\n    this._updateBubble(index, { opacity: 0.15 });\n    const visibleDuration = 4000 + Math.random() * 3000;\n    this._setManagedTimer(() => {\n      this._updateBubble(index, { opacity: 0 });\n      this._setManagedTimer(() => {\n        this._updateBubble(index, {\n          top: Math.random() * 80 + 10,\n          left: Math.random() * 80 + 10,\n          size: Math.random() * 60 + 30,\n        });\n        this._setManagedTimer(() => this._animateBubble(index), 200);\n      }, 1500);\n    }, visibleDuration);\n  }\n\n  private _startBubbleAnimations(): void {\n    this._bubbles.forEach((_, index) => {\n      this._setManagedTimer(() => this._animateBubble(index), index * 500);\n    });\n  }\n\n  private _updateLogoSize(): void {\n    const rect = this._containerEl?.getBoundingClientRect() ?? this.getBoundingClientRect();\n    const minDimension = Math.min(rect.width, rect.height);\n    if (!Number.isFinite(minDimension) || minDimension <= 0) {\n      return;\n    }\n    this._logoSize = minDimension * 0.2;\n  }\n\n  private _handleMouseMove = (event: MouseEvent): void => {\n    const rect = this._containerEl?.getBoundingClientRect() ?? this.getBoundingClientRect();\n    if (rect.width <= 0 || rect.height <= 0) {\n      return;\n    }\n\n    const centerX = rect.left + rect.width / 2;\n    const centerY = rect.top + rect.height / 2;\n    const deltaX = event.clientX - centerX;\n    const deltaY = event.clientY - centerY;\n    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n    const maxDistance = this._logoSize * 1.5;\n\n    if (distance < maxDistance && distance > 0) {\n      const pushStrength = (maxDistance - distance) / maxDistance;\n      const pushDistance = 50 * pushStrength;\n      this._logoOffset = {\n        x: -(deltaX / distance) * pushDistance,\n        y: -(deltaY / distance) * pushDistance,\n      };\n      this._isLogoHovered = true;\n      return;\n    }\n\n    this._logoOffset = { x: 0, y: 0 };\n    this._isLogoHovered = false;\n  };\n\n  private _handleMouseLeave = (): void => {\n    this._logoOffset = { x: 0, y: 0 };\n    this._isLogoHovered = false;\n  };\n\n  private _handleLogoClick = (event: MouseEvent): void => {\n    event.stopPropagation();\n    const rect = this._containerEl?.getBoundingClientRect() ?? this.getBoundingClientRect();\n    const hitmarker: Hitmarker = {\n      id: Date.now() + Math.random(),\n      x: event.clientX - rect.left,\n      y: event.clientY - rect.top,\n    };\n    this._hitmarkers = [...this._hitmarkers, hitmarker];\n    playHitmarkerSound();\n\n    this._setManagedTimer(() => {\n      this._hitmarkers = this._hitmarkers.filter((value) => value.id !== hitmarker.id);\n    }, 600);\n  };\n\n  protected render() {\n    const logoSrc = this.logoSrc || LOGOMARK_DATA_URL;\n    return html`\n      <div\n        class=\"loading-container fw-player-root\"\n        @mousemove=${this._handleMouseMove}\n        @mouseleave=${this._handleMouseLeave}\n      >\n        ${this._hitmarkers.map(\n          (hitmarker) => html`\n            <div class=\"hitmarker\" style=\"left:${hitmarker.x}px;top:${hitmarker.y}px;\">\n              <div class=\"hitmarker-line tl\"></div>\n              <div class=\"hitmarker-line tr\"></div>\n              <div class=\"hitmarker-line bl\"></div>\n              <div class=\"hitmarker-line br\"></div>\n            </div>\n          `\n        )}\n\n        <div class=\"particles\">\n          ${this._particles.map(\n            (particle) => html`\n              <div\n                class=\"particle\"\n                style=\"\n                  left:${particle.left}%;\n                  width:${particle.size}px;\n                  height:${particle.size}px;\n                  background:${particle.color};\n                  animation-duration:${particle.duration}s;\n                  animation-delay:${particle.delay}s;\n                \"\n              ></div>\n            `\n          )}\n        </div>\n\n        <div class=\"bubbles\">\n          ${this._bubbles.map(\n            (bubble) => html`\n              <div\n                class=\"bubble\"\n                style=\"\n                  top:${bubble.top}%;\n                  left:${bubble.left}%;\n                  width:${bubble.size}px;\n                  height:${bubble.size}px;\n                  background:${bubble.color};\n                  opacity:${bubble.opacity};\n                \"\n              ></div>\n            `\n          )}\n        </div>\n\n        <div\n          class=\"center-logo\"\n          style=\"transform:translate(-50%, -50%) translate(${this._logoOffset.x}px, ${this\n            ._logoOffset.y}px);\"\n        >\n          <div\n            class=\"logo-pulse ${this._isLogoHovered ? \"hovered\" : \"\"}\"\n            style=\"width:${this._logoSize * 1.4}px;height:${this._logoSize * 1.4}px;\"\n          ></div>\n          <button\n            type=\"button\"\n            class=\"logo-mark ${this._isLogoHovered ? \"hovered\" : \"\"}\"\n            style=\"width:${this._logoSize}px;height:${this._logoSize}px;\"\n            @click=${this._handleLogoClick}\n            aria-label=\"FrameWorks logo\"\n          >\n            <img src=${logoSrc} alt=\"FrameWorks Logo\" draggable=\"false\" />\n          </button>\n        </div>\n\n        <fw-dvd-logo .parentRef=${this._containerEl ?? null} .scale=${0.08}></fw-dvd-logo>\n\n        <div class=\"message\">${this.message}</div>\n        <div class=\"overlay-texture\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-loading-screen\": FwLoadingScreen;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fw-loading-screen.js","sources":["../../../../src/components/fw-loading-screen.ts"],"sourcesContent":["import { LitElement, css, html } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { sharedStyles } from \"../styles/shared-styles.js\";\nimport { utilityStyles } from \"../styles/utility-styles.js\";\nimport { LOGOMARK_DATA_URL } from \"../constants/media-assets.js\";\nimport { playHitmarkerSound } from \"./shared/hitmarker-audio.js\";\nimport { createTranslator, type TranslateFn } from \"@livepeer-frameworks/player-core\";\nimport \"./fw-dvd-logo.js\";\n\ninterface ParticleState {\n  left: number;\n  size: number;\n  duration: number;\n  delay: number;\n}\n\ninterface BubbleState {\n  top: number;\n  left: number;\n  size: number;\n  opacity: number;\n}\n\ninterface Hitmarker {\n  id: number;\n  x: number;\n  y: number;\n}\n\n@customElement(\"fw-loading-screen\")\nexport class FwLoadingScreen extends LitElement {\n  @property({ type: String }) message?: string;\n  @property({ type: String, attribute: \"logo-src\" }) logoSrc?: string;\n  @property({ attribute: false }) translator?: TranslateFn;\n\n  private _defaultTranslator: TranslateFn = createTranslator({ locale: \"en\" });\n  @query(\".loading-container\") private _containerEl?: HTMLDivElement;\n\n  @state() private _logoSize = 100;\n  @state() private _logoOffset = { x: 0, y: 0 };\n  @state() private _isLogoHovered = false;\n  @state() private _bubbles: BubbleState[] = this._createBubbles();\n  @state() private _hitmarkers: Hitmarker[] = [];\n\n  private _bubbleTimers = new Set<ReturnType<typeof setTimeout>>();\n  private _resizeObserver: ResizeObserver | null = null;\n  private readonly _particles: ParticleState[] = this._createParticles();\n\n  static styles = [\n    sharedStyles,\n    utilityStyles,\n    css`\n      :host {\n        display: block;\n        width: 100%;\n        height: 100%;\n      }\n\n      .loading-container {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        min-height: 300px;\n        overflow: hidden;\n        user-select: none;\n        background: linear-gradient(\n          135deg,\n          hsl(var(--fw-surface-deep, 235 21% 11%)) 0%,\n          hsl(var(--fw-surface, 233 23% 17%)) 25%,\n          hsl(var(--fw-surface-deep, 235 21% 11%)) 50%,\n          hsl(var(--fw-surface, 233 23% 17%)) 75%,\n          hsl(var(--fw-surface-deep, 235 21% 11%)) 100%\n        );\n        background-size: 400% 400%;\n        animation: _fw-gradient-shift 16s ease-in-out infinite;\n      }\n\n      .particles,\n      .bubbles {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n      }\n\n      .particle {\n        position: absolute;\n        border-radius: 50%;\n        opacity: 0;\n        animation: _fw-float-up linear infinite;\n      }\n\n      .bubble {\n        position: absolute;\n        border-radius: 50%;\n        transition: opacity 1s ease-in-out;\n      }\n\n      .particle:nth-child(8n + 1) {\n        background: hsl(var(--fw-accent, 218 79% 73%));\n      }\n      .particle:nth-child(8n + 2) {\n        background: hsl(var(--fw-accent-secondary, 178 64% 63%));\n      }\n      .particle:nth-child(8n + 3) {\n        background: hsl(var(--fw-success, 95 53% 55%));\n      }\n      .particle:nth-child(8n + 4) {\n        background: hsl(var(--fw-info, 178 64% 63%));\n      }\n      .particle:nth-child(8n + 5) {\n        background: hsl(var(--fw-danger, 348 74% 64%));\n      }\n      .particle:nth-child(8n + 6) {\n        background: hsl(var(--fw-warning, 35 79% 64%));\n      }\n      .particle:nth-child(8n + 7) {\n        background: hsl(var(--fw-accent, 218 79% 73%) / 0.8);\n      }\n      .particle:nth-child(8n + 8) {\n        background: hsl(var(--fw-accent-secondary, 178 64% 63%) / 0.8);\n      }\n\n      .bubble:nth-child(8n + 1) {\n        background: hsl(var(--fw-accent, 218 79% 73%) / 0.2);\n      }\n      .bubble:nth-child(8n + 2) {\n        background: hsl(var(--fw-accent-secondary, 178 64% 63%) / 0.2);\n      }\n      .bubble:nth-child(8n + 3) {\n        background: hsl(var(--fw-success, 95 53% 55%) / 0.2);\n      }\n      .bubble:nth-child(8n + 4) {\n        background: hsl(var(--fw-info, 178 64% 63%) / 0.2);\n      }\n      .bubble:nth-child(8n + 5) {\n        background: hsl(var(--fw-danger, 348 74% 64%) / 0.2);\n      }\n      .bubble:nth-child(8n + 6) {\n        background: hsl(var(--fw-warning, 35 79% 64%) / 0.2);\n      }\n      .bubble:nth-child(8n + 7) {\n        background: hsl(var(--fw-accent, 218 79% 73%) / 0.15);\n      }\n      .bubble:nth-child(8n + 8) {\n        background: hsl(var(--fw-accent-secondary, 178 64% 63%) / 0.15);\n      }\n\n      .center-logo {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        z-index: 10;\n        transition: transform 0.3s ease-out;\n      }\n\n      .logo-pulse {\n        position: absolute;\n        border-radius: 50%;\n        background: hsl(var(--fw-accent, 218 79% 73%) / 0.15);\n        animation: _fw-logo-pulse 3s ease-in-out infinite;\n        pointer-events: none;\n      }\n\n      .logo-pulse.hovered {\n        animation: _fw-logo-pulse 1s ease-in-out infinite;\n        transform: scale(1.2);\n      }\n\n      .logo-mark {\n        position: relative;\n        z-index: 1;\n        transition: all 0.3s ease-out;\n        border: none;\n        background: transparent;\n        padding: 0;\n        margin: 0;\n        cursor: pointer;\n      }\n\n      .logo-mark img {\n        width: 100%;\n        height: 100%;\n        display: block;\n      }\n\n      .logo-mark.hovered {\n        transform: scale(1.1);\n        filter: drop-shadow(0 6px 12px hsl(var(--fw-surface-deep, 235 21% 11%) / 0.4))\n          brightness(1.1);\n      }\n\n      .message {\n        position: absolute;\n        bottom: 20%;\n        left: 50%;\n        transform: translateX(-50%);\n        z-index: 8;\n        color: hsl(var(--fw-text-muted, 224 16% 53%));\n        font-size: 16px;\n        font-weight: 500;\n        text-align: center;\n        text-shadow: 0 2px 4px hsl(var(--fw-surface-deep, 235 21% 11%) / 0.5);\n        animation: _fw-fade-in-out 2s ease-in-out infinite;\n        pointer-events: none;\n      }\n\n      .overlay-texture {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        background:\n          radial-gradient(\n            circle at 20% 80%,\n            hsl(var(--fw-accent, 218 79% 73%) / 0.03) 0%,\n            transparent 50%\n          ),\n          radial-gradient(\n            circle at 80% 20%,\n            hsl(var(--fw-accent-secondary, 178 64% 63%) / 0.03) 0%,\n            transparent 50%\n          ),\n          radial-gradient(\n            circle at 40% 40%,\n            hsl(var(--fw-success, 95 53% 55%) / 0.02) 0%,\n            transparent 50%\n          );\n      }\n\n      .hitmarker {\n        position: absolute;\n        transform: translate(-50%, -50%);\n        pointer-events: none;\n        z-index: 100;\n        width: 40px;\n        height: 40px;\n      }\n\n      .hitmarker-line {\n        position: absolute;\n        width: 12px;\n        height: 3px;\n        background-color: hsl(var(--fw-text-bright, 0 0% 100%));\n        box-shadow: 0 0 8px hsl(var(--fw-text-bright, 0 0% 100%) / 0.8);\n        border-radius: 1px;\n      }\n\n      .hitmarker-line.tl {\n        top: 25%;\n        left: 25%;\n        animation: _fw-hitmarker-fade-45 0.6s ease-out forwards;\n      }\n\n      .hitmarker-line.tr {\n        top: 25%;\n        left: 75%;\n        animation: _fw-hitmarker-fade-neg-45 0.6s ease-out forwards;\n      }\n\n      .hitmarker-line.bl {\n        top: 75%;\n        left: 25%;\n        animation: _fw-hitmarker-fade-neg-45 0.6s ease-out forwards;\n      }\n\n      .hitmarker-line.br {\n        top: 75%;\n        left: 75%;\n        animation: _fw-hitmarker-fade-45 0.6s ease-out forwards;\n      }\n\n      @keyframes _fw-fade-in-out {\n        0%,\n        100% {\n          opacity: 0.6;\n        }\n        50% {\n          opacity: 0.9;\n        }\n      }\n\n      @keyframes _fw-logo-pulse {\n        0%,\n        100% {\n          opacity: 0.15;\n          transform: scale(1);\n        }\n        50% {\n          opacity: 0.25;\n          transform: scale(1.05);\n        }\n      }\n\n      @keyframes _fw-float-up {\n        0% {\n          transform: translateY(100vh) rotate(0deg);\n          opacity: 0;\n        }\n        10% {\n          opacity: 0.6;\n        }\n        90% {\n          opacity: 0.6;\n        }\n        100% {\n          transform: translateY(-100px) rotate(360deg);\n          opacity: 0;\n        }\n      }\n\n      @keyframes _fw-gradient-shift {\n        0%,\n        100% {\n          background-position: 0% 50%;\n        }\n        50% {\n          background-position: 100% 50%;\n        }\n      }\n\n      @keyframes _fw-hitmarker-fade-45 {\n        0% {\n          opacity: 1;\n          transform: translate(-50%, -50%) rotate(45deg) scale(0.5);\n        }\n        20% {\n          opacity: 1;\n          transform: translate(-50%, -50%) rotate(45deg) scale(1.2);\n        }\n        100% {\n          opacity: 0;\n          transform: translate(-50%, -50%) rotate(45deg) scale(1);\n        }\n      }\n\n      @keyframes _fw-hitmarker-fade-neg-45 {\n        0% {\n          opacity: 1;\n          transform: translate(-50%, -50%) rotate(-45deg) scale(0.5);\n        }\n        20% {\n          opacity: 1;\n          transform: translate(-50%, -50%) rotate(-45deg) scale(1.2);\n        }\n        100% {\n          opacity: 0;\n          transform: translate(-50%, -50%) rotate(-45deg) scale(1);\n        }\n      }\n    `,\n  ];\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this._clearBubbleTimers();\n    this._startBubbleAnimations();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._clearBubbleTimers();\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = null;\n  }\n\n  protected firstUpdated(): void {\n    this._updateLogoSize();\n    if (typeof ResizeObserver !== \"undefined\") {\n      this._resizeObserver = new ResizeObserver(() => this._updateLogoSize());\n      if (this._containerEl) {\n        this._resizeObserver.observe(this._containerEl);\n      }\n    }\n  }\n\n  private _createParticles(): ParticleState[] {\n    return Array.from({ length: 12 }, () => ({\n      left: Math.random() * 100,\n      size: Math.random() * 4 + 2,\n      duration: 8 + Math.random() * 4,\n      delay: Math.random() * 8,\n    }));\n  }\n\n  private _createBubbles(): BubbleState[] {\n    return Array.from({ length: 8 }, () => ({\n      top: Math.random() * 80 + 10,\n      left: Math.random() * 80 + 10,\n      size: Math.random() * 60 + 30,\n      opacity: 0,\n    }));\n  }\n\n  private _setManagedTimer(callback: () => void, delayMs: number): void {\n    const timer = setTimeout(() => {\n      this._bubbleTimers.delete(timer);\n      callback();\n    }, delayMs);\n    this._bubbleTimers.add(timer);\n  }\n\n  private _clearBubbleTimers(): void {\n    this._bubbleTimers.forEach((timer) => clearTimeout(timer));\n    this._bubbleTimers.clear();\n  }\n\n  private _updateBubble(index: number, nextState: Partial<BubbleState>): void {\n    const next = [...this._bubbles];\n    next[index] = { ...next[index], ...nextState };\n    this._bubbles = next;\n  }\n\n  private _animateBubble(index: number): void {\n    this._updateBubble(index, { opacity: 0.15 });\n    const visibleDuration = 4000 + Math.random() * 3000;\n    this._setManagedTimer(() => {\n      this._updateBubble(index, { opacity: 0 });\n      this._setManagedTimer(() => {\n        this._updateBubble(index, {\n          top: Math.random() * 80 + 10,\n          left: Math.random() * 80 + 10,\n          size: Math.random() * 60 + 30,\n        });\n        this._setManagedTimer(() => this._animateBubble(index), 200);\n      }, 1500);\n    }, visibleDuration);\n  }\n\n  private _startBubbleAnimations(): void {\n    this._bubbles.forEach((_, index) => {\n      this._setManagedTimer(() => this._animateBubble(index), index * 500);\n    });\n  }\n\n  private _updateLogoSize(): void {\n    const rect = this._containerEl?.getBoundingClientRect() ?? this.getBoundingClientRect();\n    const minDimension = Math.min(rect.width, rect.height);\n    if (!Number.isFinite(minDimension) || minDimension <= 0) {\n      return;\n    }\n    this._logoSize = minDimension * 0.2;\n  }\n\n  private _handleMouseMove = (event: MouseEvent): void => {\n    const rect = this._containerEl?.getBoundingClientRect() ?? this.getBoundingClientRect();\n    if (rect.width <= 0 || rect.height <= 0) {\n      return;\n    }\n\n    const centerX = rect.left + rect.width / 2;\n    const centerY = rect.top + rect.height / 2;\n    const deltaX = event.clientX - centerX;\n    const deltaY = event.clientY - centerY;\n    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n    const maxDistance = this._logoSize * 1.5;\n\n    if (distance < maxDistance && distance > 0) {\n      const pushStrength = (maxDistance - distance) / maxDistance;\n      const pushDistance = 50 * pushStrength;\n      this._logoOffset = {\n        x: -(deltaX / distance) * pushDistance,\n        y: -(deltaY / distance) * pushDistance,\n      };\n      this._isLogoHovered = true;\n      return;\n    }\n\n    this._logoOffset = { x: 0, y: 0 };\n    this._isLogoHovered = false;\n  };\n\n  private _handleMouseLeave = (): void => {\n    this._logoOffset = { x: 0, y: 0 };\n    this._isLogoHovered = false;\n  };\n\n  private _handleLogoClick = (event: MouseEvent): void => {\n    event.stopPropagation();\n    const rect = this._containerEl?.getBoundingClientRect() ?? this.getBoundingClientRect();\n    const hitmarker: Hitmarker = {\n      id: Date.now() + Math.random(),\n      x: event.clientX - rect.left,\n      y: event.clientY - rect.top,\n    };\n    this._hitmarkers = [...this._hitmarkers, hitmarker];\n    playHitmarkerSound();\n\n    this._setManagedTimer(() => {\n      this._hitmarkers = this._hitmarkers.filter((value) => value.id !== hitmarker.id);\n    }, 600);\n  };\n\n  private get _t(): TranslateFn {\n    return this.translator ?? this._defaultTranslator;\n  }\n\n  protected render() {\n    const logoSrc = this.logoSrc || LOGOMARK_DATA_URL;\n    const displayMessage = this.message ?? this._t(\"waitingForSource\");\n    return html`\n      <div\n        class=\"loading-container fw-player-root\"\n        @mousemove=${this._handleMouseMove}\n        @mouseleave=${this._handleMouseLeave}\n      >\n        ${this._hitmarkers.map(\n          (hitmarker) => html`\n            <div class=\"hitmarker\" style=\"left:${hitmarker.x}px;top:${hitmarker.y}px;\">\n              <div class=\"hitmarker-line tl\"></div>\n              <div class=\"hitmarker-line tr\"></div>\n              <div class=\"hitmarker-line bl\"></div>\n              <div class=\"hitmarker-line br\"></div>\n            </div>\n          `\n        )}\n\n        <div class=\"particles\">\n          ${this._particles.map(\n            (particle) => html`\n              <div\n                class=\"particle\"\n                style=\"\n                  left:${particle.left}%;\n                  width:${particle.size}px;\n                  height:${particle.size}px;\n                  animation-duration:${particle.duration}s;\n                  animation-delay:${particle.delay}s;\n                \"\n              ></div>\n            `\n          )}\n        </div>\n\n        <div class=\"bubbles\">\n          ${this._bubbles.map(\n            (bubble) => html`\n              <div\n                class=\"bubble\"\n                style=\"\n                  top:${bubble.top}%;\n                  left:${bubble.left}%;\n                  width:${bubble.size}px;\n                  height:${bubble.size}px;\n                  opacity:${bubble.opacity};\n                \"\n              ></div>\n            `\n          )}\n        </div>\n\n        <div\n          class=\"center-logo\"\n          style=\"transform:translate(-50%, -50%) translate(${this._logoOffset.x}px, ${this\n            ._logoOffset.y}px);\"\n        >\n          <div\n            class=\"logo-pulse ${this._isLogoHovered ? \"hovered\" : \"\"}\"\n            style=\"width:${this._logoSize * 1.4}px;height:${this._logoSize * 1.4}px;\"\n          ></div>\n          <button\n            type=\"button\"\n            class=\"logo-mark ${this._isLogoHovered ? \"hovered\" : \"\"}\"\n            style=\"width:${this._logoSize}px;height:${this._logoSize}px;\"\n            @click=${this._handleLogoClick}\n            aria-label=\"FrameWorks logo\"\n          >\n            <img src=${logoSrc} alt=\"FrameWorks Logo\" draggable=\"false\" />\n          </button>\n        </div>\n\n        <fw-dvd-logo .parentRef=${this._containerEl ?? null} .scale=${0.08}></fw-dvd-logo>\n\n        <div class=\"message\">${displayMessage}</div>\n        <div class=\"overlay-texture\"></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-loading-screen\": FwLoadingScreen;\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/fw-loading-spinner.js

@@ -1,14 +1,22 @@
 import { __decorate } from '../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';
 import { css, LitElement, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { property, customElement } from 'lit/decorators.js';
+import { createTranslator } from '@livepeer-frameworks/player-core';
 
 let FwLoadingSpinner = class FwLoadingSpinner extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._defaultTranslator = createTranslator({ locale: "en" });
+    }
+    get _t() {
+        return this.translator ?? this._defaultTranslator;
+    }
     render() {
         return html `
       <div class="overlay" role="status" aria-live="polite">
         <div class="pill">
           <div class="spinner"></div>
-          <span>Buffering...</span>
+          <span>${this._t("buffering")}</span>
         </div>
       </div>
     `;
@@ -24,7 +32,7 @@ FwLoadingSpinner.styles = css `
       display: flex;
       align-items: center;
       justify-content: center;
-      background: rgb(0 0 0 / 0.4);
+      background: hsl(var(--fw-surface-deep, 235 21% 11%) / 0.85);
       backdrop-filter: blur(4px);
       z-index: 20;
     }
@@ -33,18 +41,18 @@ FwLoadingSpinner.styles = css `
       align-items: center;
       gap: 0.75rem;
       border-radius: 0.5rem;
-      border: 1px solid rgb(255 255 255 / 0.1);
-      background: rgb(0 0 0 / 0.7);
+      border: 1px solid hsl(var(--fw-text, 229 73% 86%) / 0.1);
+      background: hsl(var(--fw-surface-deep, 235 21% 11%) / 0.9);
       padding: 0.75rem 1rem;
       font-size: 0.875rem;
-      color: white;
-      box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+      color: hsl(var(--fw-text, 229 73% 86%));
+      box-shadow: 0 10px 15px -3px hsl(var(--fw-shadow-color, 0 0% 0%) / 0.1);
     }
     .spinner {
       width: 1rem;
       height: 1rem;
-      border: 2px solid rgb(255 255 255 / 0.3);
-      border-top-color: white;
+      border: 2px solid hsl(var(--fw-text-faint, 228 15% 45%) / 0.3);
+      border-top-color: hsl(var(--fw-accent, 218 79% 73%));
       border-radius: 50%;
       animation: _fw-spin 1s linear infinite;
     }
@@ -54,6 +62,9 @@ FwLoadingSpinner.styles = css `
       }
     }
   `;
+__decorate([
+    property({ attribute: false })
+], FwLoadingSpinner.prototype, "translator", void 0);
 FwLoadingSpinner = __decorate([
     customElement("fw-loading-spinner")
 ], FwLoadingSpinner);

package/dist/esm/components/fw-loading-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"fw-loading-spinner.js","sources":["../../../../src/components/fw-loading-spinner.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\nimport { customElement } from \"lit/decorators.js\";\n\n@customElement(\"fw-loading-spinner\")\nexport class FwLoadingSpinner extends LitElement {\n  static styles = css`\n    :host {\n      display: contents;\n    }\n    .overlay {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: rgb(0 0 0 / 0.4);\n      backdrop-filter: blur(4px);\n      z-index: 20;\n    }\n    .pill {\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n      border-radius: 0.5rem;\n      border: 1px solid rgb(255 255 255 / 0.1);\n      background: rgb(0 0 0 / 0.7);\n      padding: 0.75rem 1rem;\n      font-size: 0.875rem;\n      color: white;\n      box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n    }\n    .spinner {\n      width: 1rem;\n      height: 1rem;\n      border: 2px solid rgb(255 255 255 / 0.3);\n      border-top-color: white;\n      border-radius: 50%;\n      animation: _fw-spin 1s linear infinite;\n    }\n    @keyframes _fw-spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  `;\n\n  protected render() {\n    return html`\n      <div class=\"overlay\" role=\"status\" aria-live=\"polite\">\n        <div class=\"pill\">\n          <div class=\"spinner\"></div>\n          <span>Buffering...</span>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-loading-spinner\": FwLoadingSpinner;\n  }\n}\n"],"names":[],"mappings":";;;;AAIO,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU,CAAA;IA0CpC,MAAM,GAAA;AACd,QAAA,OAAO,IAAI,CAAA;;;;;;;KAOV;IACH;;AAlDO,gBAAA,CAAA,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuClB,EAAA,CAvCY;AADF,gBAAgB,GAAA,UAAA,CAAA;IAD5B,aAAa,CAAC,oBAAoB;AACtB,CAAA,EAAA,gBAAgB,CAoD5B;;;;"}
+{"version":3,"file":"fw-loading-spinner.js","sources":["../../../../src/components/fw-loading-spinner.ts"],"sourcesContent":["import { LitElement, html, css } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { createTranslator, type TranslateFn } from \"@livepeer-frameworks/player-core\";\n\n@customElement(\"fw-loading-spinner\")\nexport class FwLoadingSpinner extends LitElement {\n  @property({ attribute: false }) translator?: TranslateFn;\n\n  private _defaultTranslator: TranslateFn = createTranslator({ locale: \"en\" });\n\n  private get _t(): TranslateFn {\n    return this.translator ?? this._defaultTranslator;\n  }\n\n  static styles = css`\n    :host {\n      display: contents;\n    }\n    .overlay {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: hsl(var(--fw-surface-deep, 235 21% 11%) / 0.85);\n      backdrop-filter: blur(4px);\n      z-index: 20;\n    }\n    .pill {\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n      border-radius: 0.5rem;\n      border: 1px solid hsl(var(--fw-text, 229 73% 86%) / 0.1);\n      background: hsl(var(--fw-surface-deep, 235 21% 11%) / 0.9);\n      padding: 0.75rem 1rem;\n      font-size: 0.875rem;\n      color: hsl(var(--fw-text, 229 73% 86%));\n      box-shadow: 0 10px 15px -3px hsl(var(--fw-shadow-color, 0 0% 0%) / 0.1);\n    }\n    .spinner {\n      width: 1rem;\n      height: 1rem;\n      border: 2px solid hsl(var(--fw-text-faint, 228 15% 45%) / 0.3);\n      border-top-color: hsl(var(--fw-accent, 218 79% 73%));\n      border-radius: 50%;\n      animation: _fw-spin 1s linear infinite;\n    }\n    @keyframes _fw-spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  `;\n\n  protected render() {\n    return html`\n      <div class=\"overlay\" role=\"status\" aria-live=\"polite\">\n        <div class=\"pill\">\n          <div class=\"spinner\"></div>\n          <span>${this._t(\"buffering\")}</span>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"fw-loading-spinner\": FwLoadingSpinner;\n  }\n}\n"],"names":[],"mappings":";;;;;AAKO,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU,CAAA;AAAzC,IAAA,WAAA,GAAA;;QAGG,IAAA,CAAA,kBAAkB,GAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;IAyD9E;AAvDE,IAAA,IAAY,EAAE,GAAA;AACZ,QAAA,OAAO,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,kBAAkB;IACnD;IA2CU,MAAM,GAAA;AACd,QAAA,OAAO,IAAI,CAAA;;;;AAIG,gBAAA,EAAA,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;;;KAGjC;IACH;;AAlDO,gBAAA,CAAA,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuClB,EAAA,CAvCY;AARmB,UAAA,CAAA;AAA/B,IAAA,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE;AAA2B,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAD9C,gBAAgB,GAAA,UAAA,CAAA;IAD5B,aAAa,CAAC,oBAAoB;AACtB,CAAA,EAAA,gBAAgB,CA4D5B;;;;"}