update v0.2.0

frontend/shared/PulsingIcon.svelte

@@ -1,96 +1,102 @@
 <script lang="ts">
-    import { onDestroy } from 'svelte';
-    import type {ComponentType} from 'svelte';
-  
-    export let stream_state: "open" | "closed" | "waiting" = "closed";
-    export let audio_source_callback: () => MediaStream;
-    export let icon: string | ComponentType = undefined;
-    export let icon_button_color: string = "var(--color-accent)";
-    export let pulse_color: string = "var(--color-accent)";
-    
+  import { onDestroy } from "svelte";
+  import type { ComponentType } from "svelte";
 
-    let audioContext: AudioContext;
-    let analyser: AnalyserNode;
-    let dataArray: Uint8Array;
-    let animationId: number;
-    let pulseScale = 1;
-    let pulseIntensity = 0;
-    
-    $: if(stream_state === "open") setupAudioContext();
-  
-    onDestroy(() => {
-      if (animationId) {
-        cancelAnimationFrame(animationId);
-      }
-      if (audioContext) {
-        audioContext.close();
-      }
-    });
-  
-    function setupAudioContext() {
-      audioContext = new (window.AudioContext || window.webkitAudioContext)();
-      analyser = audioContext.createAnalyser();
-      const source = audioContext.createMediaStreamSource(audio_source_callback());
-      
-      source.connect(analyser);
-      
-      analyser.fftSize = 64;
-      analyser.smoothingTimeConstant = 0.8;
-      dataArray = new Uint8Array(analyser.frequencyBinCount);
-  
-      updateVisualization();
-    }
-  
-    function updateVisualization() {
-      
-        analyser.getByteFrequencyData(dataArray);
+  export let stream_state: "open" | "closed" | "waiting" = "closed";
+  export let audio_source_callback: () => MediaStream;
+  export let icon: string | ComponentType = undefined;
+  export let icon_button_color: string = "var(--color-accent)";
+  export let pulse_color: string = "var(--color-accent)";
+  export let icon_radius: number = 50;
 
-        // Calculate average amplitude for pulse effect
-        const average = Array.from(dataArray).reduce((a, b) => a + b, 0) / dataArray.length;
-        const normalizedAverage = average / 255;
-        pulseScale = 1 + (normalizedAverage * 0.15);
-        pulseIntensity = normalizedAverage;
-        animationId = requestAnimationFrame(updateVisualization);
-  
+  let audioContext: AudioContext;
+  let analyser: AnalyserNode;
+  let dataArray: Uint8Array;
+  let animationId: number;
+  let pulseScale = 1;
+  let pulseIntensity = 0;
+
+  $: if (stream_state === "open") setupAudioContext();
+
+  onDestroy(() => {
+    if (animationId) {
+      cancelAnimationFrame(animationId);
     }
-  
-    $: maxPulseScale = 1 + (pulseIntensity * 10); // Scale from 1x to 3x based on intensity
-  
-  
-</script>
+    if (audioContext) {
+      audioContext.close();
+    }
+  });
+
+  function setupAudioContext() {
+    // @ts-ignore
+    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    analyser = audioContext.createAnalyser();
+    const source = audioContext.createMediaStreamSource(
+      audio_source_callback(),
+    );
+
+    source.connect(analyser);
+
+    analyser.fftSize = 64;
+    analyser.smoothingTimeConstant = 0.8;
+    dataArray = new Uint8Array(analyser.frequencyBinCount);
+
+    updateVisualization();
+  }
+
+  function updateVisualization() {
+    analyser.getByteFrequencyData(dataArray);
+
+    // Calculate average amplitude for pulse effect
+    const average =
+      Array.from(dataArray).reduce((a, b) => a + b, 0) / dataArray.length;
+    const normalizedAverage = average / 255;
+    pulseScale = 1 + normalizedAverage * 0.15;
+    pulseIntensity = normalizedAverage;
+    animationId = requestAnimationFrame(updateVisualization);
+  }
+
+  $: maxPulseScale = 1 + pulseIntensity * 10; // Scale from 1x to 3x based on intensity
+</script>
+
 <div class="gradio-webrtc-icon-wrapper">
-<div class="gradio-webrtc-icon-wrapper">
-    <div class="gradio-webrtc-pulsing-icon-container">
-        {#if pulseIntensity > 0}
-            {#each Array(3) as _, i}
-                <div 
-                class="pulse-ring"
-                style:background={pulse_color}
-                style:animation-delay={`${i * 0.4}s`}
-                style:--max-scale={maxPulseScale}
-                style:opacity={0.5 * pulseIntensity}
-                />
-            {/each}
-        {/if}
-        
-        <div 
-        class="gradio-webrtc-pulsing-icon" 
-        style:transform={`scale(${pulseScale})`}
-        style:background={icon_button_color}
-        >
-            {#if typeof icon === "string"}
-                <img 
-                src={icon} 
-                alt="Audio visualization icon"
-                class="icon-image"
-                />
-            {:else}
-                <svelte:component this={icon} />
+  <div class="gradio-webrtc-pulsing-icon-container">
+    {#if pulseIntensity > 0}
+      {#each Array(3) as _, i}
+        <div
+          class="pulse-ring"
+          style:background={pulse_color}
+          style:animation-delay={`${i * 0.4}s`}
+          style:--max-scale={maxPulseScale}
+          style:opacity={0.5 * pulseIntensity}
+        />
+      {/each}
+    {/if}
+
+    <div
+      class="gradio-webrtc-pulsing-icon"
+      style:transform={`scale(${pulseScale})`}
+      style:background={icon_button_color}
+    >
+      {#if typeof icon === "string"}
+        <img
+          src={icon}
+          alt="Audio visualization icon"
+          class="icon-image"
+          style:border-radius={`${icon_radius}%`}
+        />
+      {:else if icon === undefined}
+        <div></div>
+      {:else}
+        <div>
+          <svelte:component this={icon} />
         </div>
+      {/if}
     </div>
+  </div>
 </div>
-</div>
-  
+
+<style>
   .gradio-webrtc-icon-wrapper {
     position: relative;
     display: flex;
@@ -98,7 +104,6 @@
     justify-content: center;
     align-items: center;
   }
-  }
   .gradio-webrtc-pulsing-icon-container {
     position: relative;
     width: 100%;
@@ -107,7 +112,6 @@
     justify-content: center;
     align-items: center;
   }
-  }
   .gradio-webrtc-pulsing-icon {
     position: relative;
     width: 100%;
@@ -119,14 +123,12 @@
     align-items: center;
     z-index: 2;
   }
-  }
   .icon-image {
     width: 100%;
     height: 100%;
     object-fit: contain;
-    object-fit: contain;
   }
-  }
+
   .pulse-ring {
     position: absolute;
     top: 50%;
@@ -137,16 +139,18 @@
     border-radius: 50%;
     animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     opacity: 0.5;
+    min-width: 18px;
+    min-height: 18px;
   }
-  }
+
   @keyframes pulse {
-  @keyframes pulse {
-      0% {
-        transform: translate(-50%, -50%) scale(1);
-        opacity: 0.5;
-      }
-      100% {
-        transform: translate(-50%, -50%) scale(var(--max-scale, 3));
-        opacity: 0;
+    0% {
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 0.5;
     }
-    }
+    100% {
+      transform: translate(-50%, -50%) scale(var(--max-scale, 3));
+      opacity: 0;
+    }
+  }
+</style>