Initial Commit

2026-10-03 20:07:49 +02:00
commit a1346c98b1
427 changed files with 59320 additions and 0 deletions
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { useMediaControls } from '@vueuse/core'
+
+defineProps<{
+  src: string
+  name: string
+}>()
+
+const audioRef = ref<HTMLAudioElement>()
+const { playing, currentTime, duration, volume, muted } = useMediaControls(audioRef)
+
+function toggle() {
+  playing.value = !playing.value
+}
+
+function seek(event: Event) {
+  currentTime.value = Number((event.target as HTMLInputElement).value)
+}
+
+function formatTime(sec: number) {
+  if (!Number.isFinite(sec)) return '0:00'
+  const m = Math.floor(sec / 60)
+  const s = Math.floor(sec % 60).toString().padStart(2, '0')
+  return `${m}:${s}`
+}
+</script>
+
+<template>
+  <div
+    class="flex w-full max-w-md items-center gap-2.5 rounded-md border bg-muted/50 px-3 py-2"
+    @click.stop
+  >
+    <audio ref="audioRef" :src="src" preload="metadata" class="hidden" />
+    <button
+      type="button"
+      class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-accent"
+      :aria-label="playing ? 'Pause' : 'Abspielen'"
+      @click="toggle"
+    >
+      <Icon name="ph:pause-fill" v-if="playing" class="size-4" />
+      <Icon name="ph:play-fill" v-else class="size-4" />
+    </button>
+    <span class="shrink-0 text-xs tabular-nums text-muted-foreground">{{ formatTime(currentTime) }}</span>
+    <input
+      type="range"
+      min="0"
+      :max="Number.isFinite(duration) ? duration : 0"
+      step="0.1"
+      :value="currentTime"
+      aria-label="Wiedergabeposition"
+      class="min-w-0 flex-1 cursor-pointer accent-primary"
+      @input="seek"
+    >
+    <span class="shrink-0 text-xs tabular-nums text-muted-foreground">{{ formatTime(duration) }}</span>
+    <button
+      type="button"
+      class="flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-accent"
+      :aria-label="muted ? 'Ton an' : 'Stumm'"
+      @click="muted = !muted"
+    >
+      <Icon name="ph:speaker-x-fill" v-if="muted" class="size-3.5" />
+      <Icon name="ph:speaker-high-fill" v-else class="size-3.5" />
+    </button>
+    <input
+      v-model.number="volume"
+      type="range"
+      min="0"
+      max="1"
+      step="0.05"
+      aria-label="Lautstärke"
+      class="w-14 min-w-0 shrink-0 cursor-pointer accent-primary"
+      :class="muted && 'opacity-40'"
+    >
+    <a
+      :href="src"
+      :download="name"
+      class="flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+      aria-label="Herunterladen"
+      title="Herunterladen"
+    >
+      <Icon name="ph:download-fill" class="size-3.5" />
+    </a>
+  </div>
+</template>