@joewinke/jatui 0.1.22 → 0.1.24

package/src/lib/components/AudioWaveform.svelte

@@ -1,698 +0,0 @@
-<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 = "",
-    progressColorHex = "",
-    backgroundColorHex = "",
-    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
-    }
-  }
-
-  // svelte-ignore state_referenced_locally
-  let resolvedWaveColor = $state(resolveColor(waveColor, waveColorHex))
-  // svelte-ignore state_referenced_locally
-  let resolvedProgressColor = $state(resolveColor(progressColor, progressColorHex))
-  // svelte-ignore state_referenced_locally
-  let resolvedBackgroundColor = $state(resolveColor(backgroundColor, backgroundColorHex))
-
-  function updateResolvedColors() {
-    resolvedWaveColor = resolveColor(waveColor, waveColorHex)
-    resolvedProgressColor = resolveColor(progressColor, progressColorHex)
-    resolvedBackgroundColor = resolveColor(backgroundColor, backgroundColorHex)
-  }
-
-  onMount(() => {
-    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) return
-        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-neutral text-neutral-content text-xs px-2 py-1 rounded 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>