@livepeer-frameworks/player-wc 0.1.2 → 0.1.3

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

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