@livepeer-frameworks/player-svelte 0.1.1 → 0.1.2

package/dist/LoadingScreen.svelte

@@ -12,16 +12,16 @@
   - Animated background gradient shifts
 -->
 <script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
-  import DvdLogo from './DvdLogo.svelte';
-  import logomarkAsset from './assets/logomark.svg';
+  import { onMount, onDestroy } from "svelte";
+  import DvdLogo from "./DvdLogo.svelte";
+  import logomarkAsset from "./assets/logomark.svg";
 
   interface Props {
     message?: string;
     logoSrc?: string;
   }
 
-  let { message = 'Waiting for source...', logoSrc }: Props = $props();
+  let { message = "Waiting for source...", logoSrc }: Props = $props();
 
   // Use imported asset as default if logoSrc not provided
   let effectiveLogoSrc = $derived(logoSrc || logomarkAsset);
@@ -44,26 +44,26 @@
 
   // Tokyo Night inspired pastel colors for bubbles
   const bubbleColors = [
-    'rgba(122, 162, 247, 0.2)', // Terminal Blue
-    'rgba(187, 154, 247, 0.2)', // Terminal Magenta
-    'rgba(158, 206, 106, 0.2)', // Strings/CSS classes
-    'rgba(115, 218, 202, 0.2)', // Terminal Green
-    'rgba(125, 207, 255, 0.2)', // Terminal Cyan
-    'rgba(247, 118, 142, 0.2)', // Keywords/Terminal Red
-    'rgba(224, 175, 104, 0.2)', // Terminal Yellow
-    'rgba(42, 195, 222, 0.2)',  // Language functions
+    "rgba(122, 162, 247, 0.2)", // Terminal Blue
+    "rgba(187, 154, 247, 0.2)", // Terminal Magenta
+    "rgba(158, 206, 106, 0.2)", // Strings/CSS classes
+    "rgba(115, 218, 202, 0.2)", // Terminal Green
+    "rgba(125, 207, 255, 0.2)", // Terminal Cyan
+    "rgba(247, 118, 142, 0.2)", // Keywords/Terminal Red
+    "rgba(224, 175, 104, 0.2)", // Terminal Yellow
+    "rgba(42, 195, 222, 0.2)", // Language functions
   ];
 
   // Particle colors
   const particleColors = [
-    '#7aa2f7', // Terminal Blue
-    '#bb9af7', // Terminal Magenta
-    '#9ece6a', // Strings/CSS classes
-    '#73daca', // Terminal Green
-    '#7dcfff', // Terminal Cyan
-    '#f7768e', // Keywords/Terminal Red
-    '#e0af68', // Terminal Yellow
-    '#2ac3de', // Language functions
+    "#7aa2f7", // Terminal Blue
+    "#bb9af7", // Terminal Magenta
+    "#9ece6a", // Strings/CSS classes
+    "#73daca", // Terminal Green
+    "#7dcfff", // Terminal Cyan
+    "#f7768e", // Keywords/Terminal Red
+    "#e0af68", // Terminal Yellow
+    "#2ac3de", // Language functions
   ];
 
   // Generate random particles
@@ -130,7 +130,11 @@
 
       const oscillator1 = audioContext.createOscillator();
       const oscillator2 = audioContext.createOscillator();
-      const noiseBuffer = audioContext.createBuffer(1, audioContext.sampleRate * 0.1, audioContext.sampleRate);
+      const noiseBuffer = audioContext.createBuffer(
+        1,
+        audioContext.sampleRate * 0.1,
+        audioContext.sampleRate
+      );
       const noiseSource = audioContext.createBufferSource();
 
       // Generate white noise for the initial "crack"
@@ -161,8 +165,8 @@
       oscillator2.frequency.setValueAtTime(3600, audioContext.currentTime);
       oscillator2.frequency.exponentialRampToValueAtTime(1800, audioContext.currentTime + 0.04);
 
-      oscillator1.type = 'triangle';
-      oscillator2.type = 'sine';
+      oscillator1.type = "triangle";
+      oscillator2.type = "sine";
 
       // Sharp attack, quick decay
       gainNode1.gain.setValueAtTime(0, audioContext.currentTime);
@@ -198,50 +202,51 @@
   function playHitmarkerSound() {
     try {
       // Embedded hitmarker sound as base64 data URL (matches React implementation)
-      const hitmarkerDataUrl = 'data:audio/mpeg;base64,SUQzBAAAAAAANFRDT04AAAAHAAADT3RoZXIAVFNTRQAAAA8AAANMYXZmNTcuODMuMTAwAAAAAAAAAAAA' +
-        'AAD/+1QAAAAAAAAAAAAAAAAAAAAA' +
-        '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' +
-        'qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqo=';
+      const hitmarkerDataUrl =
+        "data:audio/mpeg;base64,SUQzBAAAAAAANFRDT04AAAAHAAADT3RoZXIAVFNTRQAAAA8AAANMYXZmNTcuODMuMTAwAAAAAAAAAAAA" +
+        "AAD/+1QAAAAAAAAAAAAAAAAAAAAA" +
+        "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" +
+        "qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqo=";
 
       const audio = new Audio(hitmarkerDataUrl);
       audio.volume = 0.3;
@@ -273,7 +278,7 @@
 
     // Remove hitmarker after animation
     setTimeout(() => {
-      hitmarkers = hitmarkers.filter(h => h.id !== newHitmarker.id);
+      hitmarkers = hitmarkers.filter((h) => h.id !== newHitmarker.id);
     }, 600);
   }
 
@@ -346,20 +351,111 @@
 
   // Cleanup on destroy
   onDestroy(() => {
-    bubbles.forEach(bubble => {
+    bubbles.forEach((bubble) => {
       if (bubble.timeoutId) clearTimeout(bubble.timeoutId);
     });
   });
 </script>
 
+<div
+  bind:this={containerRef}
+  class="loading-container fw-player-root"
+  role="status"
+  aria-label="Loading"
+  onmousemove={handleMouseMove}
+  onmouseleave={handleMouseLeave}
+>
+  <!-- Hitmarkers -->
+  {#each hitmarkers as hitmarker (hitmarker.id)}
+    <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>
+  {/each}
+
+  <!-- Floating particles -->
+  {#each particles as particle, _i}
+    <div
+      class="particle"
+      style="
+        left: {particle.left}%;
+        width: {particle.size}px;
+        height: {particle.size}px;
+        background: {particle.color};
+        animation-duration: {particle.duration}s;
+        animation-delay: {particle.delay}s;
+      "
+    ></div>
+  {/each}
+
+  <!-- Animated bubbles -->
+  {#each bubbles as bubble, _i}
+    <div
+      class="bubble"
+      style="
+        top: {bubble.position.top}%;
+        left: {bubble.position.left}%;
+        width: {bubble.size}px;
+        height: {bubble.size}px;
+        background: {bubble.color};
+        opacity: {bubble.opacity};
+      "
+    ></div>
+  {/each}
+
+  <!-- Center logo with push-away effect -->
+  <div
+    class="center-logo"
+    style="transform: translate(-50%, -50%) translate({offset.x}px, {offset.y}px);"
+  >
+    <!-- Pulsing circle background -->
+    <div
+      class="logo-pulse"
+      class:hovered={isHovered}
+      style="width: {logoSize * 1.4}px; height: {logoSize * 1.4}px;"
+    ></div>
+
+    <!-- Logo image -->
+    <button type="button" class="logo-button" onclick={handleLogoClick} aria-label="Logo">
+      <img
+        src={effectiveLogoSrc}
+        alt=""
+        class="logo-image"
+        class:hovered={isHovered}
+        style="width: {logoSize}px; height: {logoSize}px;"
+        draggable="false"
+      />
+    </button>
+  </div>
+
+  <!-- Bouncing DVD Logo -->
+  <DvdLogo parentRef={containerRef} scale={0.08} />
+
+  <!-- Message -->
+  <div class="message">
+    {message}
+  </div>
+
+  <!-- Subtle overlay texture -->
+  <div class="overlay-texture"></div>
+</div>
+
 <style>
   @keyframes fadeInOut {
-    0%, 100% { opacity: 0.6; }
-    50% { opacity: 0.9; }
+    0%,
+    100% {
+      opacity: 0.6;
+    }
+    50% {
+      opacity: 0.9;
+    }
   }
 
   @keyframes logoPulse {
-    0%, 100% {
+    0%,
+    100% {
       opacity: 0.15;
       transform: scale(1);
     }
@@ -374,8 +470,12 @@
       transform: translateY(100vh) rotate(0deg);
       opacity: 0;
     }
-    10% { opacity: 0.6; }
-    90% { opacity: 0.6; }
+    10% {
+      opacity: 0.6;
+    }
+    90% {
+      opacity: 0.6;
+    }
     100% {
       transform: translateY(-100px) rotate(360deg);
       opacity: 0;
@@ -383,8 +483,13 @@
   }
 
   @keyframes gradientShift {
-    0%, 100% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
+    0%,
+    100% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
   }
 
   @keyframes hitmarkerFade {
@@ -437,7 +542,8 @@
     width: 100%;
     height: 100%;
     min-height: 300px;
-    background: linear-gradient(135deg,
+    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%,
@@ -509,6 +615,12 @@
     transform: scale(1.2);
   }
 
+  .fw-player-root .logo-button {
+    all: unset;
+    cursor: pointer;
+    display: block;
+  }
+
   .fw-player-root .logo-image {
     position: relative;
     z-index: 1;
@@ -538,7 +650,7 @@
     text-align: center;
     animation: fadeInOut 2s ease-in-out infinite;
     text-shadow: 0 2px 4px rgba(36, 40, 59, 0.5);
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     -webkit-user-select: none;
        -moz-user-select: none;
             user-select: none;
@@ -603,87 +715,3 @@
     animation: hitmarkerFade45 0.6s ease-out forwards;
   }
 </style>
-
-<div
-  bind:this={containerRef}
-  class="loading-container fw-player-root"
-  role="status"
-  aria-label="Loading"
-  onmousemove={handleMouseMove}
-  onmouseleave={handleMouseLeave}
->
-  <!-- Hitmarkers -->
-  {#each hitmarkers as hitmarker (hitmarker.id)}
-    <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>
-  {/each}
-
-  <!-- Floating particles -->
-  {#each particles as particle, _i}
-    <div
-      class="particle"
-      style="
-        left: {particle.left}%;
-        width: {particle.size}px;
-        height: {particle.size}px;
-        background: {particle.color};
-        animation-duration: {particle.duration}s;
-        animation-delay: {particle.delay}s;
-      "
-    />
-  {/each}
-
-  <!-- Animated bubbles -->
-  {#each bubbles as bubble, _i}
-    <div
-      class="bubble"
-      style="
-        top: {bubble.position.top}%;
-        left: {bubble.position.left}%;
-        width: {bubble.size}px;
-        height: {bubble.size}px;
-        background: {bubble.color};
-        opacity: {bubble.opacity};
-      "
-    />
-  {/each}
-
-  <!-- Center logo with push-away effect -->
-  <div
-    class="center-logo"
-    style="transform: translate(-50%, -50%) translate({offset.x}px, {offset.y}px);"
-  >
-    <!-- Pulsing circle background -->
-    <div
-      class="logo-pulse"
-      class:hovered={isHovered}
-      style="width: {logoSize * 1.4}px; height: {logoSize * 1.4}px;"
-    />
-
-    <!-- Logo image -->
-    <img
-      src={effectiveLogoSrc}
-      alt="Logo"
-      class="logo-image"
-      class:hovered={isHovered}
-      style="width: {logoSize}px; height: {logoSize}px;"
-      onclick={handleLogoClick}
-      draggable="false"
-    />
-  </div>
-
-  <!-- Bouncing DVD Logo -->
-  <DvdLogo parentRef={containerRef} scale={0.08} />
-
-  <!-- Message -->
-  <div class="message">
-    {message}
-  </div>
-
-  <!-- Subtle overlay texture -->
-  <div class="overlay-texture" />
-</div>