@joewinke/jatui 0.1.0

package/src/lib/components/AudioWaveform.svelte

@@ -0,0 +1,694 @@
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte"
+  import type { Snippet } from "svelte"
+
+  import {
+    getDaisyUIColor,
+    lightenColor,
+    darkenColor,
+    watchThemeChanges,
+  } from "../utils/daisyuiColors"
+
+  let {
+    audioUrl,
+    height = 80,
+    waveColor = "neutral",
+    progressColor = "accent",
+    backgroundColor = "base-100",
+    waveColorHex = "#6b7280",
+    progressColorHex = "#f97316",
+    backgroundColorHex = "#f1f5f9",
+    interactive = true,
+    showTrimControls = false,
+    onTrim,
+    providedDuration,
+    speedControls,
+  } = $props<{
+    audioUrl: string
+    height?: number
+    waveColor?: string
+    progressColor?: string
+    backgroundColor?: string
+    waveColorHex?: string
+    progressColorHex?: string
+    backgroundColorHex?: string
+    interactive?: boolean
+    showTrimControls?: boolean
+    onTrim?: (startTime: number, endTime: number) => void
+    providedDuration?: number
+    speedControls?: Snippet
+  }>()
+
+  let canvas = $state<HTMLCanvasElement | null>(null)
+  let audio = $state<HTMLAudioElement | null>(null)
+  let canvasContext: CanvasRenderingContext2D | null = null
+
+  let isPlaying = $state(false)
+  let currentTime = $state(0)
+  let duration = $state(0)
+  let isLoading = $state(true)
+  let waveformData: number[] = []
+
+  let hoverX = $state(0)
+  let isHovering = $state(false)
+  let hoverTime = $state(0)
+
+  let trimStart = $state(0)
+  let trimEnd = $state(0)
+  let isDraggingStart = $state(false)
+  let isDraggingEnd = $state(false)
+  let isInTrimMode = $state(false)
+
+  function resolveColor(daisyUIName: string, hexFallback: string): string {
+    if (typeof window === "undefined") return hexFallback
+    try {
+      if (daisyUIName.startsWith("#")) return daisyUIName
+      return getDaisyUIColor(daisyUIName)
+    } catch {
+      return hexFallback
+    }
+  }
+
+  let resolvedWaveColor = $state(resolveColor(waveColor, waveColorHex))
+  let resolvedProgressColor = $state(resolveColor(progressColor, progressColorHex))
+  let resolvedBackgroundColor = $state(resolveColor(backgroundColor, backgroundColorHex))
+
+  function updateResolvedColors() {
+    resolvedWaveColor = resolveColor(waveColor, waveColorHex)
+    resolvedProgressColor = resolveColor(progressColor, progressColorHex)
+    resolvedBackgroundColor = resolveColor(backgroundColor, backgroundColorHex)
+  }
+
+  onMount(async () => {
+    const cleanupThemeWatcher = watchThemeChanges(() => {
+      updateResolvedColors()
+      if (canvasContext && canvas && waveformData.length > 0) {
+        drawWaveform()
+      }
+    })
+
+    if (canvas) {
+      canvasContext = canvas.getContext("2d")
+
+      setTimeout(() => {
+        if (canvas && canvasContext) {
+          const container = canvas.parentElement
+          if (container) {
+            const containerRect = container.getBoundingClientRect()
+            const displayWidth = containerRect.width
+            const displayHeight = height
+
+            canvas.width = displayWidth
+            canvas.height = displayHeight
+            canvas.style.width = displayWidth + "px"
+            canvas.style.height = displayHeight + "px"
+
+            updateResolvedColors()
+            loadAudioAndGenerateWaveform()
+          }
+        }
+      }, 100)
+    }
+
+    if (audio) {
+      audio.load()
+    }
+
+    return cleanupThemeWatcher
+  })
+
+  async function loadAudioAndGenerateWaveform() {
+    try {
+      isLoading = true
+      generateSimpleWaveform()
+      isLoading = false
+    } catch {
+      isLoading = false
+    }
+  }
+
+  function generateSimpleWaveform() {
+    if (!canvas) return
+
+    const canvasWidth = canvas.width
+
+    if (waveformData.length === 0 || waveformData.length !== canvasWidth) {
+      waveformData = []
+
+      const seed = audioUrl
+        ? audioUrl.split("").reduce((acc: number, char: string) => acc + char.charCodeAt(0), 0)
+        : 12345
+
+      for (let i = 0; i < canvasWidth; i++) {
+        const progress = i / canvasWidth
+        const baseAmplitude = Math.sin(progress * Math.PI * 2 + seed * 0.001) * 0.3 + 0.5
+        const speechPattern = Math.sin(progress * Math.PI * 20 + seed * 0.002) * 0.2
+        const variation = Math.sin(progress * Math.PI * 8 + seed * 0.003) * 0.1
+
+        let amplitude = baseAmplitude + speechPattern + variation
+        amplitude = Math.max(0.1, Math.min(0.9, amplitude))
+
+        waveformData.push(amplitude)
+      }
+    }
+
+    drawWaveform()
+  }
+
+  function createWaveformGradient() {
+    if (!canvasContext || !canvas) return null
+
+    const gradient = canvasContext.createLinearGradient(0, 0, 0, canvas.height)
+    const neutralColor = resolvedWaveColor
+    const neutralContentColor = resolveColor("neutral-content", "#ffffff")
+    const lighterNeutral = lightenColor(neutralColor, 0.2)
+
+    gradient.addColorStop(0, neutralColor)
+    gradient.addColorStop(0.7, neutralColor)
+    gradient.addColorStop(0.71, neutralContentColor)
+    gradient.addColorStop(0.72, neutralContentColor)
+    gradient.addColorStop(0.73, lighterNeutral)
+    gradient.addColorStop(1, lighterNeutral)
+
+    return gradient
+  }
+
+  function createProgressGradient() {
+    if (!canvasContext || !canvas) return null
+
+    const gradient = canvasContext.createLinearGradient(0, 0, 0, canvas.height)
+    const accentColor = resolvedProgressColor
+    const accentContentColor = resolveColor("accent-content", "#ffffff")
+    const darkerAccent = darkenColor(accentColor, 0.1)
+    const lighterAccent = lightenColor(accentColor, 0.3)
+
+    gradient.addColorStop(0, accentColor)
+    gradient.addColorStop(0.7, darkerAccent)
+    gradient.addColorStop(0.71, accentContentColor)
+    gradient.addColorStop(0.72, accentContentColor)
+    gradient.addColorStop(0.73, lighterAccent)
+    gradient.addColorStop(1, lighterAccent)
+
+    return gradient
+  }
+
+  function drawBaseWaveform() {
+    if (!canvasContext || !canvas || waveformData.length === 0) return
+
+    const { width, height } = canvas
+    canvasContext.clearRect(0, 0, width, height)
+
+    canvasContext.fillStyle = resolvedBackgroundColor
+    canvasContext.fillRect(0, 0, width, height)
+
+    const barWidth = 2
+    const barSpacing = 1
+    const totalBarWidth = barWidth + barSpacing
+    const numBars = Math.floor(width / totalBarWidth)
+    const centerY = height / 2
+
+    const validDuration = isFinite(duration) && duration > 0
+    const progressX = validDuration ? (currentTime / duration) * width : 0
+    const trimStartX = validDuration ? (trimStart / duration) * width : 0
+    const trimEndX = validDuration ? (trimEnd / duration) * width : width
+
+    const waveGradient = createWaveformGradient()
+    const progressGradient = createProgressGradient()
+
+    for (let i = 0; i < numBars; i++) {
+      const dataIndex = Math.floor((i / numBars) * waveformData.length)
+      const amplitude = waveformData[dataIndex] || 0.1
+      const barHeight = Math.max(4, amplitude * height * 0.8)
+      const x = i * totalBarWidth
+      const y = centerY - barHeight / 2
+
+      let fillStyle = waveGradient || waveColor
+      if (showTrimControls && isInTrimMode) {
+        if (x < trimStartX || x > trimEndX) {
+          canvasContext.globalAlpha = 0.3
+        } else if (x < progressX) {
+          fillStyle = progressGradient || progressColor
+          canvasContext.globalAlpha = 1
+        } else {
+          canvasContext.globalAlpha = 1
+        }
+      } else if (x < progressX) {
+        fillStyle = progressGradient || progressColor
+        canvasContext.globalAlpha = 1
+      } else {
+        canvasContext.globalAlpha = 1
+      }
+
+      canvasContext.fillStyle = fillStyle
+      canvasContext.fillRect(x, y, barWidth, barHeight)
+    }
+
+    canvasContext.globalAlpha = 1
+  }
+
+  function drawOverlays() {
+    if (!canvasContext || !canvas) return
+
+    const { width, height } = canvas
+
+    const validDuration = isFinite(duration) && duration > 0
+    const progressX = validDuration ? (currentTime / duration) * width : 0
+    const trimStartX = validDuration ? (trimStart / duration) * width : 0
+    const trimEndX = validDuration ? (trimEnd / duration) * width : width
+
+    if (isHovering && hoverX > 0) {
+      canvasContext.fillStyle = "rgba(255, 255, 255, 0.15)"
+      const rect = canvas.getBoundingClientRect()
+      const canvasHoverX = (hoverX / rect.width) * width
+      canvasContext.fillRect(0, 0, canvasHoverX, height)
+
+      canvasContext.strokeStyle = "rgba(255, 255, 255, 0.6)"
+      canvasContext.lineWidth = 1
+      canvasContext.beginPath()
+      canvasContext.moveTo(canvasHoverX, 0)
+      canvasContext.lineTo(canvasHoverX, height)
+      canvasContext.stroke()
+    }
+
+    if (progressX > 0) {
+      canvasContext.strokeStyle = resolvedProgressColor
+      canvasContext.lineWidth = 2
+      canvasContext.beginPath()
+      canvasContext.moveTo(progressX, 0)
+      canvasContext.lineTo(progressX, height)
+      canvasContext.stroke()
+    }
+
+    if (showTrimControls && isInTrimMode) {
+      canvasContext.strokeStyle = "#ef4444"
+      canvasContext.lineWidth = 3
+      canvasContext.beginPath()
+      canvasContext.moveTo(trimStartX, 0)
+      canvasContext.lineTo(trimStartX, height)
+      canvasContext.stroke()
+
+      canvasContext.strokeStyle = "#ef4444"
+      canvasContext.lineWidth = 3
+      canvasContext.beginPath()
+      canvasContext.moveTo(trimEndX, 0)
+      canvasContext.lineTo(trimEndX, height)
+      canvasContext.stroke()
+
+      canvasContext.fillStyle = "rgba(59, 130, 246, 0.1)"
+      canvasContext.fillRect(trimStartX, 0, trimEndX - trimStartX, height)
+    }
+  }
+
+  function drawWaveform() {
+    drawBaseWaveform()
+    drawOverlays()
+  }
+
+  function handleCanvasMouseDown(event: MouseEvent) {
+    if (!interactive || !canvas || !isFinite(duration) || duration <= 0) return
+
+    const rect = canvas.getBoundingClientRect()
+    const x = event.clientX - rect.left
+    const clickPosition = x / rect.width
+    const clickTime = clickPosition * duration
+
+    if (showTrimControls && isInTrimMode) {
+      const trimStartX = (trimStart / duration) * rect.width
+      const trimEndX = (trimEnd / duration) * rect.width
+      const threshold = 10
+
+      if (Math.abs(x - trimStartX) < threshold) {
+        isDraggingStart = true
+        return
+      } else if (Math.abs(x - trimEndX) < threshold) {
+        isDraggingEnd = true
+        return
+      }
+    }
+
+    if (audio) {
+      audio.currentTime = clickTime
+      currentTime = clickTime
+      drawWaveform()
+    }
+  }
+
+  function handleCanvasMouseMove(event: MouseEvent) {
+    if (!canvas || !isFinite(duration) || duration <= 0) return
+
+    const rect = canvas.getBoundingClientRect()
+    const x = event.clientX - rect.left
+    const position = x / rect.width
+    const time = Math.max(0, Math.min(duration, position * duration))
+
+    if (interactive && !isDraggingStart && !isDraggingEnd) {
+      const wasHovering = isHovering
+      const oldHoverX = hoverX
+
+      isHovering = true
+      hoverX = x
+      hoverTime = time
+
+      if (!wasHovering || Math.abs(oldHoverX - hoverX) > 2) {
+        drawBaseWaveform()
+        drawOverlays()
+      }
+    }
+
+    if (isDraggingStart) {
+      trimStart = Math.min(time, trimEnd - 0.1)
+      drawWaveform()
+    } else if (isDraggingEnd) {
+      trimEnd = Math.max(time, trimStart + 0.1)
+      drawWaveform()
+    }
+
+    if (showTrimControls && isInTrimMode) {
+      const trimStartX = (trimStart / duration) * rect.width
+      const trimEndX = (trimEnd / duration) * rect.width
+      const threshold = 10
+
+      if (Math.abs(x - trimStartX) < threshold || Math.abs(x - trimEndX) < threshold) {
+        canvas.style.cursor = "ew-resize"
+      } else {
+        canvas.style.cursor = "pointer"
+      }
+    } else {
+      canvas.style.cursor = "pointer"
+    }
+  }
+
+  function handleCanvasMouseUp() {
+    isDraggingStart = false
+    isDraggingEnd = false
+  }
+
+  function handleCanvasMouseLeave() {
+    if (isHovering) {
+      isHovering = false
+      hoverX = 0
+      hoverTime = 0
+      drawBaseWaveform()
+      drawOverlays()
+    }
+  }
+
+  function handlePlay() { isPlaying = true }
+  function handlePause() { isPlaying = false }
+
+  function handleTimeUpdate() {
+    if (audio) {
+      currentTime = audio.currentTime
+      drawWaveform()
+    }
+  }
+
+  function handleLoadedMetadata() {
+    if (audio && isFinite(audio.duration) && audio.duration > 0) {
+      duration = audio.duration
+      trimStart = 0
+      trimEnd = duration
+      isLoading = false
+      drawWaveform()
+    } else if (providedDuration && providedDuration > 0) {
+      duration = providedDuration
+      trimStart = 0
+      trimEnd = duration
+      isLoading = false
+      drawWaveform()
+    } else {
+      duration = 40
+      trimStart = 0
+      trimEnd = duration
+      isLoading = false
+      drawWaveform()
+    }
+  }
+
+  function handleEnded() {
+    isPlaying = false
+    currentTime = 0
+    drawWaveform()
+  }
+
+  function handleCanPlayThrough() {
+    if (audio && isFinite(audio.duration) && audio.duration > 0) {
+      duration = audio.duration
+      trimStart = 0
+      trimEnd = duration
+      isLoading = false
+      drawWaveform()
+    }
+  }
+
+  function handleAudioError() {
+    isLoading = false
+  }
+
+  function togglePlayback() {
+    if (!audio) return
+    if (isPlaying) {
+      audio.pause()
+    } else {
+      audio.play()
+    }
+  }
+
+  function formatTime(seconds: number): string {
+    if (!isFinite(seconds) || isNaN(seconds) || seconds < 0) return "0:00"
+    const mins = Math.floor(seconds / 60)
+    const secs = Math.floor(seconds % 60)
+    return `${mins}:${secs.toString().padStart(2, "0")}`
+  }
+
+  function startTrimMode() {
+    if (!isFinite(duration) || duration <= 0) return
+    isInTrimMode = true
+    trimStart = 0
+    trimEnd = duration
+    drawWaveform()
+  }
+
+  function cancelTrim() {
+    isInTrimMode = false
+    trimStart = 0
+    trimEnd = duration
+    drawWaveform()
+  }
+
+  function applyTrim() {
+    if (onTrim) onTrim(trimStart, trimEnd)
+    isInTrimMode = false
+  }
+
+  function previewTrimSelection() {
+    if (audio) {
+      audio.currentTime = trimStart
+      currentTime = trimStart
+      audio.play()
+
+      const checkTime = () => {
+        if (audio.currentTime >= trimEnd) {
+          audio.pause()
+        } else if (isPlaying) {
+          requestAnimationFrame(checkTime)
+        }
+      }
+      requestAnimationFrame(checkTime)
+    }
+  }
+
+  $effect(() => {
+    if (canvas && canvasContext) {
+      const rect = canvas.getBoundingClientRect()
+      canvas.width = rect.width
+      canvas.height = height
+      canvas.style.width = rect.width + "px"
+      canvas.style.height = height + "px"
+      generateSimpleWaveform()
+    }
+  })
+
+  function resizeCanvas() {
+    if (!canvas || !canvasContext) return
+    const container = canvas.parentElement
+    if (!container) return
+
+    const containerRect = container.getBoundingClientRect()
+    let displayWidth = containerRect.width
+    const displayHeight = height
+
+    if (displayWidth <= 0) {
+      let parent = container.parentElement
+      while (parent && displayWidth <= 0) {
+        displayWidth = parent.getBoundingClientRect().width
+        parent = parent.parentElement
+      }
+    }
+
+    if (displayWidth > 0 && Math.abs(canvas.width - displayWidth) > 2) {
+      canvas.width = displayWidth
+      canvas.height = displayHeight
+      canvas.style.width = displayWidth + "px"
+      canvas.style.height = displayHeight + "px"
+      waveformData = []
+      generateSimpleWaveform()
+    }
+  }
+
+  $effect(() => {
+    if (!canvas) return
+
+    const handleResize = () => {
+      setTimeout(() => resizeCanvas(), 50)
+    }
+
+    window.addEventListener("resize", handleResize)
+
+    const observer = new MutationObserver(() => handleResize())
+
+    if (canvas.parentElement) {
+      observer.observe(canvas.parentElement, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+      })
+    }
+
+    setTimeout(() => resizeCanvas(), 200)
+
+    return () => {
+      window.removeEventListener("resize", handleResize)
+      observer.disconnect()
+    }
+  })
+
+  $effect(() => {
+    if (audio && audioUrl) {
+      currentTime = 0
+      duration = 0
+      isLoading = true
+      audio.load()
+    }
+  })
+
+  onDestroy(() => {
+    if (audio) audio.pause()
+  })
+</script>
+
+<div class="audio-waveform w-full">
+  <audio
+    bind:this={audio}
+    src={audioUrl}
+    onplay={handlePlay}
+    onpause={handlePause}
+    ontimeupdate={handleTimeUpdate}
+    onloadedmetadata={handleLoadedMetadata}
+    oncanplaythrough={handleCanPlayThrough}
+    onended={handleEnded}
+    onerror={handleAudioError}
+    preload="metadata"
+    crossorigin="anonymous"
+  ></audio>
+
+  <div class="relative w-full" style="height: {height}px;">
+    {#if isLoading}
+      <div class="absolute inset-0 flex items-center justify-center bg-base-200 rounded">
+        <span class="loading loading-dots loading-sm"></span>
+        <span class="ml-2 text-sm">Loading waveform...</span>
+      </div>
+    {/if}
+
+    <canvas
+      bind:this={canvas}
+      class="rounded border border-base-300"
+      style="display: block;"
+      onmousedown={handleCanvasMouseDown}
+      onmousemove={handleCanvasMouseMove}
+      onmouseup={handleCanvasMouseUp}
+      onmouseleave={handleCanvasMouseLeave}
+    ></canvas>
+
+    {#if isHovering && interactive && hoverX > 0}
+      <div
+        class="absolute pointer-events-none bg-base-900 text-base-100 text-xs px-2 py-1 rounded shadow-lg z-10"
+        style="left: {hoverX - 20}px; top: -30px;"
+      >
+        {formatTime(hoverTime)}
+      </div>
+    {/if}
+  </div>
+
+  <div class="flex items-center justify-between mt-3 gap-4">
+    <div class="flex items-center gap-3">
+      <button
+        class="btn btn-circle btn-primary btn-sm"
+        onclick={togglePlayback}
+        disabled={isLoading}
+        aria-label={isPlaying ? "Pause" : "Play"}
+      >
+        {#if isLoading}
+          <span class="loading loading-spinner loading-xs"></span>
+        {:else if isPlaying}
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
+        {:else}
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="6 3 20 12 6 21 6 3"/></svg>
+        {/if}
+      </button>
+
+      <div class="text-sm font-mono">
+        {formatTime(currentTime)} / {formatTime(duration)}
+      </div>
+    </div>
+
+    <div class="flex items-center">
+      {#if speedControls}
+        {@render speedControls()}
+      {/if}
+    </div>
+  </div>
+
+  {#if showTrimControls}
+    <div class="mt-4">
+      {#if !isInTrimMode}
+        <button
+          class="btn btn-outline btn-sm"
+          onclick={startTrimMode}
+          disabled={isLoading || !isFinite(duration) || duration <= 0}
+        >
+          Trim Audio
+        </button>
+      {:else}
+        <div class="space-y-3">
+          <div class="text-sm">
+            <div class="flex justify-between items-center">
+              <span>Selection: {formatTime(trimStart)} - {formatTime(trimEnd)}</span>
+              <span class="badge badge-neutral">{formatTime(trimEnd - trimStart)} duration</span>
+            </div>
+          </div>
+
+          <div class="flex gap-2">
+            <button class="btn btn-outline btn-sm" onclick={previewTrimSelection} disabled={isLoading}>
+              Preview
+            </button>
+            <button class="btn btn-primary btn-sm" onclick={applyTrim} disabled={isLoading || trimEnd <= trimStart}>
+              Apply Trim
+            </button>
+            <button class="btn btn-ghost btn-sm" onclick={cancelTrim}>
+              Cancel
+            </button>
+          </div>
+
+          <div class="text-xs text-base-content/60">
+            Drag the red lines to select the audio section you want to keep
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .audio-waveform canvas { display: block; }
+</style>