@livepeer-frameworks/player-svelte 0.1.1 → 0.1.2

package/dist/StreamStateOverlay.svelte

@@ -10,7 +10,7 @@
   - Retry button for errors
 -->
 <script lang="ts">
-  import type { StreamStatus } from '@livepeer-frameworks/player-core';
+  import type { StreamStatus } from "@livepeer-frameworks/player-core";
 
   interface Props {
     /** Current stream status */
@@ -33,29 +33,149 @@
     percentage,
     onRetry,
     visible = true,
-    class: className = '',
+    class: className = "",
   }: Props = $props();
 
   // Computed states
-  let showRetry = $derived(status === 'ERROR' || status === 'INVALID' || status === 'OFFLINE');
-  let showProgress = $derived(status === 'INITIALIZING' && percentage !== undefined);
+  let showRetry = $derived(status === "ERROR" || status === "INVALID" || status === "OFFLINE");
+  let showProgress = $derived(status === "INITIALIZING" && percentage !== undefined);
 
   // Get status label for header
   function getStatusLabel(status: StreamStatus): string {
     switch (status) {
-      case 'ONLINE': return 'ONLINE';
-      case 'OFFLINE': return 'OFFLINE';
-      case 'INITIALIZING': return 'INITIALIZING';
-      case 'BOOTING': return 'STARTING';
-      case 'WAITING_FOR_DATA': return 'WAITING';
-      case 'SHUTTING_DOWN': return 'ENDING';
-      case 'ERROR': return 'ERROR';
-      case 'INVALID': return 'INVALID';
-      default: return 'STATUS';
+      case "ONLINE":
+        return "ONLINE";
+      case "OFFLINE":
+        return "OFFLINE";
+      case "INITIALIZING":
+        return "INITIALIZING";
+      case "BOOTING":
+        return "STARTING";
+      case "WAITING_FOR_DATA":
+        return "WAITING";
+      case "SHUTTING_DOWN":
+        return "ENDING";
+      case "ERROR":
+        return "ERROR";
+      case "INVALID":
+        return "INVALID";
+      default:
+        return "STATUS";
     }
   }
 </script>
 
+{#if visible && status !== "ONLINE"}
+  <div class="overlay-backdrop {className}" role="status" aria-live="polite">
+    <div class="slab">
+      <!-- Slab header - status label with icon -->
+      <div class="slab-header">
+        <!-- Status Icon -->
+        {#if status === "OFFLINE"}
+          <svg class="icon icon-offline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <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"
+            />
+          </svg>
+        {:else if status === "INITIALIZING" || status === "BOOTING" || status === "WAITING_FOR_DATA"}
+          <svg class="icon icon-warning animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle
+              class="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              stroke-width="4"
+            />
+            <path
+              class="opacity-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"
+            />
+          </svg>
+        {:else if status === "SHUTTING_DOWN"}
+          <svg class="icon icon-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M13 10V3L4 14h7v7l9-11h-7z"
+            />
+          </svg>
+        {:else}
+          <!-- ERROR or INVALID -->
+          <svg class="icon icon-offline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <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"
+            />
+          </svg>
+        {/if}
+
+        <span>{getStatusLabel(status)}</span>
+      </div>
+
+      <!-- Slab body - message and progress -->
+      <div class="slab-body">
+        <p style="font-size: 0.875rem; color: hsl(var(--tn-fg, 233 23% 75%));">
+          {message}
+        </p>
+
+        {#if showProgress && percentage !== undefined}
+          <div style="margin-top: 0.75rem;">
+            <div class="progress-bar">
+              <div class="progress-fill" style="width: {Math.min(100, percentage)};"></div>
+            </div>
+            <p
+              style="margin-top: 0.375rem; font-size: 0.75rem; font-family: monospace; color: hsl(var(--tn-fg-dark, 233 23% 60%));"
+            >
+              {Math.round(percentage)}%
+            </p>
+          </div>
+        {/if}
+
+        {#if status === "OFFLINE"}
+          <p
+            style="margin-top: 0.5rem; font-size: 0.75rem; color: hsl(var(--tn-fg-dark, 233 23% 60%));"
+          >
+            The stream will start when the broadcaster goes live
+          </p>
+        {/if}
+
+        {#if status === "BOOTING" || status === "WAITING_FOR_DATA"}
+          <p
+            style="margin-top: 0.5rem; font-size: 0.75rem; color: hsl(var(--tn-fg-dark, 233 23% 60%));"
+          >
+            Please wait while the stream prepares...
+          </p>
+        {/if}
+
+        <!-- Polling indicator for non-error states -->
+        {#if !showRetry}
+          <div class="polling-indicator">
+            <span class="polling-dot"></span>
+            <span>Checking stream status...</span>
+          </div>
+        {/if}
+      </div>
+
+      <!-- Slab actions - flush retry button -->
+      {#if showRetry && onRetry}
+        <div class="slab-actions">
+          <button type="button" class="btn-flush" onclick={onRetry} aria-label="Retry connection">
+            Retry Connection
+          </button>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}
+
 <style>
   .fw-player-root .overlay-backdrop {
     position: absolute;
@@ -161,106 +281,22 @@
   }
 
   @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
   }
 
   @keyframes spin {
-    to { transform: rotate(360deg); }
+    to {
+      transform: rotate(360deg);
+    }
   }
 
   .fw-player-root .animate-spin {
     animation: spin 1s linear infinite;
   }
 </style>
-
-{#if visible && status !== 'ONLINE'}
-  <div
-    class="overlay-backdrop {className}"
-    role="status"
-    aria-live="polite"
-  >
-    <div class="slab">
-      <!-- Slab header - status label with icon -->
-      <div class="slab-header">
-        <!-- Status Icon -->
-        {#if status === 'OFFLINE'}
-          <svg class="icon icon-offline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <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" />
-          </svg>
-        {:else if status === 'INITIALIZING' || status === 'BOOTING' || status === 'WAITING_FOR_DATA'}
-          <svg class="icon icon-warning animate-spin" fill="none" viewBox="0 0 24 24">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-            <path class="opacity-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" />
-          </svg>
-        {:else if status === 'SHUTTING_DOWN'}
-          <svg class="icon icon-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
-          </svg>
-        {:else}
-          <!-- ERROR or INVALID -->
-          <svg class="icon icon-offline" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <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" />
-          </svg>
-        {/if}
-
-        <span>{getStatusLabel(status)}</span>
-      </div>
-
-      <!-- Slab body - message and progress -->
-      <div class="slab-body">
-        <p style="font-size: 0.875rem; color: hsl(var(--tn-fg, 233 23% 75%));">
-          {message}
-        </p>
-
-        {#if showProgress && percentage !== undefined}
-          <div style="margin-top: 0.75rem;">
-            <div class="progress-bar">
-              <div
-                class="progress-fill"
-                style="width: {Math.min(100, percentage)}%;"
-              />
-            </div>
-            <p style="margin-top: 0.375rem; font-size: 0.75rem; font-family: monospace; color: hsl(var(--tn-fg-dark, 233 23% 60%));">
-              {Math.round(percentage)}%
-            </p>
-          </div>
-        {/if}
-
-        {#if status === 'OFFLINE'}
-          <p style="margin-top: 0.5rem; font-size: 0.75rem; color: hsl(var(--tn-fg-dark, 233 23% 60%));">
-            The stream will start when the broadcaster goes live
-          </p>
-        {/if}
-
-        {#if status === 'BOOTING' || status === 'WAITING_FOR_DATA'}
-          <p style="margin-top: 0.5rem; font-size: 0.75rem; color: hsl(var(--tn-fg-dark, 233 23% 60%));">
-            Please wait while the stream prepares...
-          </p>
-        {/if}
-
-        <!-- Polling indicator for non-error states -->
-        {#if !showRetry}
-          <div class="polling-indicator">
-            <span class="polling-dot" />
-            <span>Checking stream status...</span>
-          </div>
-        {/if}
-      </div>
-
-      <!-- Slab actions - flush retry button -->
-      {#if showRetry && onRetry}
-        <div class="slab-actions">
-          <button
-            type="button"
-            class="btn-flush"
-            onclick={onRetry}
-            aria-label="Retry connection"
-          >
-            Retry Connection
-          </button>
-        </div>
-      {/if}
-    </div>
-  </div>
-{/if}

package/dist/StreamStateOverlay.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { StreamStatus } from '@livepeer-frameworks/player-core';
+import type { StreamStatus } from "@livepeer-frameworks/player-core";
 interface Props {
     /** Current stream status */
     status: StreamStatus;

package/dist/SubtitleRenderer.svelte

@@ -9,7 +9,7 @@
   - Automatic timing synchronization with video
 -->
 <script lang="ts">
-  import { onDestroy } from 'svelte';
+  import { onDestroy } from "svelte";
 
   interface SubtitleCue {
     id: string;
@@ -44,7 +44,10 @@
     /** Subtitle cues to render (static or from meta track) */
     cues?: SubtitleCue[];
     /** Subscribe to meta track function (for live subtitles) */
-    subscribeToMetaTrack?: (trackId: string, callback: (event: MetaTrackEvent) => void) => () => void;
+    subscribeToMetaTrack?: (
+      trackId: string,
+      callback: (event: MetaTrackEvent) => void
+    ) => () => void;
     /** Meta track ID for live subtitles */
     metaTrackId?: string;
     /** Custom styles */
@@ -60,24 +63,24 @@
     subscribeToMetaTrack,
     metaTrackId,
     style: customStyle,
-    class: className = '',
+    class: className = "",
   }: Props = $props();
 
   const DEFAULT_STYLE: SubtitleStyle = {
-    fontSize: '1.5rem',
-    fontFamily: 'system-ui, -apple-system, sans-serif',
-    color: 'white',
-    backgroundColor: 'rgba(0, 0, 0, 0.75)',
-    textShadow: '2px 2px 4px rgba(0, 0, 0, 0.5)',
-    bottom: '5%',
-    maxWidth: '90%',
-    padding: '0.5em 1em',
-    borderRadius: '4px',
+    fontSize: "1.5rem",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    color: "white",
+    backgroundColor: "rgba(0, 0, 0, 0.75)",
+    textShadow: "2px 2px 4px rgba(0, 0, 0, 0.5)",
+    bottom: "5%",
+    maxWidth: "90%",
+    padding: "0.5em 1em",
+    borderRadius: "4px",
   };
 
   // State
   let liveCues = $state<SubtitleCue[]>([]);
-  let displayedText = $state<string>('');
+  let displayedText = $state<string>("");
   let _lastCueId: string | null = null;
   let unsubscribe: (() => void) | null = null;
 
@@ -89,30 +92,30 @@
 
   // Parse subtitle cue from meta track event data
   function parseSubtitleCue(data: unknown): SubtitleCue | null {
-    if (typeof data !== 'object' || data === null) return null;
+    if (typeof data !== "object" || data === null) return null;
 
     const obj = data as Record<string, unknown>;
 
-    const text = typeof obj.text === 'string' ? obj.text : String(obj.text ?? '');
+    const text = typeof obj.text === "string" ? obj.text : String(obj.text ?? "");
     if (!text) return null;
 
     let startTime = 0;
     let endTime = Infinity;
 
-    if ('startTime' in obj) startTime = Number(obj.startTime);
-    else if ('start' in obj) startTime = Number(obj.start);
+    if ("startTime" in obj) startTime = Number(obj.startTime);
+    else if ("start" in obj) startTime = Number(obj.start);
 
-    if ('endTime' in obj) endTime = Number(obj.endTime);
-    else if ('end' in obj) endTime = Number(obj.end);
+    if ("endTime" in obj) endTime = Number(obj.endTime);
+    else if ("end" in obj) endTime = Number(obj.end);
 
-    const id = typeof obj.id === 'string' ? obj.id : String(Date.now());
+    const id = typeof obj.id === "string" ? obj.id : String(Date.now());
 
     return {
       id,
       text,
       startTime,
       endTime,
-      lang: typeof obj.lang === 'string' ? obj.lang : undefined,
+      lang: typeof obj.lang === "string" ? obj.lang : undefined,
     };
   }
 
@@ -127,11 +130,11 @@
     }
 
     const handleMetaEvent = (event: MetaTrackEvent) => {
-      if (event.type === 'subtitle') {
+      if (event.type === "subtitle") {
         const cue = parseSubtitleCue(event.data);
         if (cue) {
           // Deduplicate by ID
-          const existing = liveCues.find(c => c.id === cue.id);
+          const existing = liveCues.find((c) => c.id === cue.id);
           if (!existing) {
             // Keep last 50 cues max
             liveCues = [...liveCues, cue].slice(-50);
@@ -153,12 +156,12 @@
   // Find active cue based on current time
   $effect(() => {
     if (!enabled) {
-      displayedText = '';
+      displayedText = "";
       return;
     }
 
     const currentTimeMs = currentTime * 1000;
-    const activeCue = allCues.find(cue => {
+    const activeCue = allCues.find((cue) => {
       const start = cue.startTime;
       const end = cue.endTime;
       return currentTimeMs >= start && currentTimeMs < end;
@@ -168,7 +171,7 @@
       displayedText = activeCue.text;
       _lastCueId = activeCue.id;
     } else {
-      displayedText = '';
+      displayedText = "";
       _lastCueId = null;
     }
   });
@@ -177,7 +180,7 @@
   $effect(() => {
     const currentTimeMs = currentTime * 1000;
 
-    liveCues = liveCues.filter(cue => {
+    liveCues = liveCues.filter((cue) => {
       const endTime = cue.endTime === Infinity ? cue.startTime + 10000 : cue.endTime;
       return endTime >= currentTimeMs - 30000;
     });
@@ -192,22 +195,6 @@
   });
 </script>
 
-<style>
-  .fw-player-root .subtitle-container {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 30;
-    text-align: center;
-    pointer-events: none;
-  }
-
-  .fw-player-root .subtitle-text {
-    display: inline-block;
-    white-space: pre-wrap;
-  }
-</style>
-
 {#if enabled && displayedText}
   <div
     class="subtitle-container {className}"
@@ -232,3 +219,19 @@
     </span>
   </div>
 {/if}
+
+<style>
+  .fw-player-root .subtitle-container {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 30;
+    text-align: center;
+    pointer-events: none;
+  }
+
+  .fw-player-root .subtitle-text {
+    display: inline-block;
+    white-space: pre-wrap;
+  }
+</style>

package/dist/ThumbnailOverlay.svelte

@@ -3,7 +3,7 @@
   Port of src/components/ThumbnailOverlay.tsx
 -->
 <script lang="ts">
-  import { cn } from '@livepeer-frameworks/player-core';
+  import { cn } from "@livepeer-frameworks/player-core";
 
   interface Props {
     thumbnailUrl?: string | null;
@@ -19,8 +19,8 @@
     onPlay = undefined,
     message = null,
     showUnmuteMessage = false,
-    style = '',
-    class: className = '',
+    style = "",
+    class: className = "",
   }: Props = $props();
 
   function handleClick() {
@@ -28,7 +28,7 @@
   }
 
   function handleKeyDown(event: KeyboardEvent) {
-    if (event.key === 'Enter' || event.key === ' ') {
+    if (event.key === "Enter" || event.key === " ") {
       event.preventDefault();
       handleClick();
     }
@@ -42,7 +42,7 @@
   onkeydown={handleKeyDown}
   {style}
   class={cn(
-    'fw-player-thumbnail relative flex h-full min-h-[280px] w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl bg-slate-950 text-foreground outline-none transition focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+    "fw-player-thumbnail relative flex h-full min-h-[280px] w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl bg-slate-950 text-foreground outline-none transition focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
     className
   )}
 >
@@ -55,15 +55,21 @@
 
   <div
     class={cn(
-      'absolute inset-0 bg-slate-950/70',
-      !thumbnailUrl && 'bg-gradient-to-br from-slate-900 via-slate-950 to-slate-900'
+      "absolute inset-0 bg-slate-950/70",
+      !thumbnailUrl && "bg-gradient-to-br from-slate-900 via-slate-950 to-slate-900"
     )}
   ></div>
 
-  <div class="relative z-10 flex max-w-[320px] flex-col items-center gap-4 px-6 text-center text-sm sm:gap-6">
+  <div
+    class="relative z-10 flex max-w-[320px] flex-col items-center gap-4 px-6 text-center text-sm sm:gap-6"
+  >
     {#if showUnmuteMessage}
-      <div class="w-full rounded-lg border border-white/15 bg-black/80 p-4 text-sm text-white shadow-lg backdrop-blur">
-        <div class="mb-1 flex items-center justify-center gap-2 text-base font-semibold text-primary">
+      <div
+        class="w-full rounded-lg border border-white/15 bg-black/80 p-4 text-sm text-white shadow-lg backdrop-blur"
+      >
+        <div
+          class="mb-1 flex items-center justify-center gap-2 text-base font-semibold text-primary"
+        >
           <span aria-hidden="true">🔇</span> Click to unmute
         </div>
         <p class="text-xs text-white/80">Stream is playing muted — tap to enable sound.</p>
@@ -74,21 +80,18 @@
         class="h-20 w-20 rounded-full bg-primary/90 text-primary-foreground shadow-lg shadow-primary/40 transition hover:bg-primary focus-visible:bg-primary flex items-center justify-center"
         aria-label="Play stream"
       >
-        <svg
-          viewBox="0 0 24 24"
-          fill="currentColor"
-          class="ml-0.5 h-8 w-8"
-          aria-hidden="true"
-        >
+        <svg viewBox="0 0 24 24" fill="currentColor" class="ml-0.5 h-8 w-8" aria-hidden="true">
           <path d="M8 5v14l11-7z" />
         </svg>
       </button>
-      <div class="w-full rounded-lg border border-white/10 bg-black/70 p-5 text-white shadow-inner backdrop-blur">
+      <div
+        class="w-full rounded-lg border border-white/10 bg-black/70 p-5 text-white shadow-inner backdrop-blur"
+      >
         <p class="text-base font-semibold text-primary">
-          {message ?? 'Click to play'}
+          {message ?? "Click to play"}
         </p>
         <p class="mt-1 text-xs text-white/70">
-          {message ? 'Start streaming instantly' : 'Jump into the live feed'}
+          {message ? "Start streaming instantly" : "Jump into the live feed"}
         </p>
       </div>
     {/if}

package/dist/TitleOverlay.svelte

@@ -3,7 +3,7 @@
   Port of src/components/TitleOverlay.tsx
 -->
 <script lang="ts">
-  import { cn } from '@livepeer-frameworks/player-core';
+  import { cn } from "@livepeer-frameworks/player-core";
 
   interface Props {
     title?: string | null;
@@ -12,12 +12,7 @@
     class?: string;
   }
 
-  let {
-    title = null,
-    description = null,
-    isVisible,
-    class: className = '',
-  }: Props = $props();
+  let { title = null, description = null, isVisible, class: className = "" }: Props = $props();
 
   // Don't render if no content
   let hasContent = $derived(!!title || !!description);
@@ -26,10 +21,10 @@
 {#if hasContent}
   <div
     class={cn(
-      'fw-title-overlay absolute inset-x-0 top-0 z-20 pointer-events-none',
-      'bg-gradient-to-b from-black/70 via-black/40 to-transparent',
-      'px-4 py-3 transition-opacity duration-300',
-      isVisible ? 'opacity-100' : 'opacity-0',
+      "fw-title-overlay absolute inset-x-0 top-0 z-20 pointer-events-none",
+      "bg-gradient-to-b from-black/70 via-black/40 to-transparent",
+      "px-4 py-3 transition-opacity duration-300",
+      isVisible ? "opacity-100" : "opacity-0",
       className
     )}
   >

package/dist/components/VolumeIcons.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   let {
     size = 16,
-    color: _color = 'currentColor',
-    className = '',
+    color: _color = "currentColor",
+    className = "",
     isMuted = false,
-    volume = 1 // 0-1 range
+    volume = 1, // 0-1 range
   }: {
     size?: number;
     color?: string;
@@ -24,7 +24,9 @@
     class={className}
     aria-hidden="true"
   >
-    <path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>
+    <path
+      d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"
+    />
   </svg>
 {:else if volume < 0.5}
   <!-- Low volume icon -->
@@ -36,7 +38,9 @@
     class={className}
     aria-hidden="true"
   >
-    <path d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"/>
+    <path
+      d="M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z"
+    />
   </svg>
 {:else}
   <!-- High volume icon -->
@@ -48,6 +52,8 @@
     class={className}
     aria-hidden="true"
   >
-    <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
+    <path
+      d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"
+    />
   </svg>
 {/if}

package/dist/global.d.ts

@@ -1,15 +1,15 @@
 // Asset module declarations
-declare module '*.svg' {
+declare module "*.svg" {
   const content: string;
   export default content;
 }
 
-declare module '*.png' {
+declare module "*.png" {
   const content: string;
   export default content;
 }
 
-declare module '*.jpg' {
+declare module "*.jpg" {
   const content: string;
   export default content;
 }