feat: add audio clip annotation view for dialect rating

src/components/AnnotationView.tsx

@@ -0,0 +1,227 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import Link from 'next/link';
+import WaveformPlayer from './WaveformPlayer';
+import { saveAnnotations } from '@/app/actions/annotations';
+import { type AnnotationEntry, DIALECT_LABELS } from '@/lib/dialects';
+
+const PAGE_SIZE = 5;
+
+const RATING_OPTIONS = (dialectLabel: string) => [
+  { value: 1, label: `Klingt überhaupt nicht nach ${dialectLabel}` },
+  { value: 2, label: `Klingt eher nicht nach ${dialectLabel}` },
+  { value: 3, label: 'Schwer zu beurteilen' },
+  { value: 4, label: `Klingt eher nach ${dialectLabel}` },
+  { value: 5, label: `Klingt eindeutig nach ${dialectLabel}` },
+];
+
+interface AnnotationViewProps {
+  entries: AnnotationEntry[];
+  datasetId: number;
+}
+
+export default function AnnotationView({ entries, datasetId }: AnnotationViewProps) {
+
+  const [isPending, startTransition] = useTransition();
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const [answers, setAnswers] = useState<Record<number, number>>({});
+  const [fullyPlayed, setFullyPlayed] = useState<Set<number>>(new Set());
+  const [activePlayerId, setActivePlayerId] = useState<number | null>(null);
+  const [showHint, setShowHint] = useState(false);
+  const [isComplete, setIsComplete] = useState(false);
+
+  const totalPages = Math.ceil(entries.length / PAGE_SIZE);
+  const pageEntries = entries.slice(currentPage * PAGE_SIZE, (currentPage + 1) * PAGE_SIZE);
+  const progressPct = Math.round((currentPage / totalPages) * 100);
+
+  const allCurrentDone =
+    pageEntries.length > 0 &&
+    pageEntries.every((e) => fullyPlayed.has(e.id) && answers[e.id] !== undefined);
+
+  const handleWeiter = () => {
+    if (!allCurrentDone) {
+      setShowHint(true);
+      return;
+    }
+    setShowHint(false);
+
+    const batch = pageEntries.map((e) => ({ entryId: e.id, rating: answers[e.id], dialectLabel: e.dialect }));
+    startTransition(async () => {
+      await saveAnnotations(batch);
+      if (currentPage + 1 >= totalPages) {
+        setIsComplete(true);
+      } else {
+        setCurrentPage((p) => p + 1);
+        setActivePlayerId(null);
+      }
+    });
+  };
+
+  if (isComplete) {
+    return (
+      <div className="max-w-xl mx-auto text-center py-20">
+        <div className="text-5xl mb-4">✓</div>
+        <h1 className="text-3xl font-bold text-green-600 mb-3">Fertig!</h1>
+        <p className="text-gray-600 mb-8">
+          Alle Samples wurden erfolgreich bewertet. Vielen Dank!
+        </p>
+        <Link
+          href="/"
+          className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors"
+        >
+          Zurück zur Startseite
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto">
+      {/* ── Top bar ─────────────────────────────────────────── */}
+      <div className="sticky top-[72px] z-40 bg-white border-b border-gray-200 pb-3 mb-6">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-sm text-gray-500">
+            Seite {currentPage + 1} von {totalPages}
+          </span>
+          <Link
+            href="/"
+            className="text-sm px-3 py-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors"
+          >
+            ← Zurück zur Startseite
+          </Link>
+        </div>
+        {/* Progress bar */}
+        <div className="w-full bg-gray-200 rounded-full h-2.5">
+          <div
+            className="bg-blue-500 h-2.5 rounded-full transition-all duration-500"
+            style={{ width: `${progressPct}%` }}
+          />
+        </div>
+        <div className="text-xs text-gray-400 mt-1 text-right">{progressPct}% abgeschlossen</div>
+      </div>
+
+      {/* ── Sample cards ────────────────────────────────────── */}
+      <div className="flex flex-col gap-6">
+        {pageEntries.map((entry, idx) => {
+          const dialectLabel = DIALECT_LABELS[entry.dialect] ?? entry.dialect;
+          const fileExt = entry.fileName.substring(entry.fileName.lastIndexOf('.'));
+          const audioSrc = `/public/datasets/${datasetId}/${entry.externalId}${fileExt}`;
+          const isListened = fullyPlayed.has(entry.id);
+          const currentRating = answers[entry.id] ?? null;
+
+          return (
+            <div
+              key={entry.id}
+              className={`border rounded-xl p-5 bg-white shadow-sm transition-colors ${
+                isListened && currentRating !== null
+                  ? 'border-green-300'
+                  : 'border-gray-200'
+              }`}
+            >
+              {/* Sample header */}
+              <div className="flex items-center justify-between mb-3">
+                <span className="text-xs font-medium text-gray-400 uppercase tracking-wide">
+                  Sample {currentPage * PAGE_SIZE + idx + 1}
+                </span>
+                {isListened && (
+                  <span className="text-xs text-green-600 font-medium">
+                    ✓ Gehört
+                  </span>
+                )}
+              </div>
+
+              {/* Waveform player */}
+              <WaveformPlayer
+                src={audioSrc}
+                durationMs={entry.durationMs}
+                isActive={activePlayerId === entry.id}
+                onPlay={() => setActivePlayerId(entry.id)}
+                onFullyPlayed={() =>
+                  setFullyPlayed((prev) => {
+                    const next = new Set(prev);
+                    next.add(entry.id);
+                    return next;
+                  })
+                }
+              />
+
+              {/* Must-listen hint */}
+              {!isListened && (
+                <p className="text-xs text-amber-600 mt-2">
+                  Bitte das Sample vollständig anhören, bevor Sie eine Bewertung abgeben.
+                </p>
+              )}
+
+              {/* Dialect + question */}
+              <div className="mt-4 mb-3">
+                <p className="text-sm font-semibold text-gray-700">
+                  Wie authentisch klingt dieses Sample nach dem Dialekt der Region{' '}
+                  <span className="text-blue-600">{dialectLabel}</span>?
+                </p>
+              </div>
+
+              {/* Rating buttons */}
+              <div className="flex flex-col gap-2">
+                {RATING_OPTIONS(dialectLabel).map(({ value, label }) => {
+                  const selected = currentRating === value;
+                  const disabled = !isListened;
+                  return (
+                    <button
+                      key={value}
+                      disabled={disabled}
+                      onClick={() =>
+                        setAnswers((prev) => ({ ...prev, [entry.id]: value }))
+                      }
+                      className={`flex items-center gap-3 w-full text-left px-4 py-2.5 rounded-lg border text-sm transition-colors ${
+                        disabled
+                          ? 'opacity-40 cursor-not-allowed border-gray-200 bg-gray-50 text-gray-500'
+                          : selected
+                          ? 'border-blue-500 bg-blue-50 text-blue-800 font-medium'
+                          : 'border-gray-200 hover:border-blue-300 hover:bg-blue-50 text-gray-700'
+                      }`}
+                    >
+                      <span
+                        className={`flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center text-xs font-bold ${
+                          selected
+                            ? 'border-blue-500 bg-blue-500 text-white'
+                            : 'border-gray-300 text-gray-400'
+                        }`}
+                      >
+                        {value}
+                      </span>
+                      {label}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* ── Navigation ──────────────────────────────────────── */}
+      <div className="mt-8 mb-12 flex flex-col items-end gap-2">
+        {showHint && !allCurrentDone && (
+          <p className="text-sm text-red-600">
+            Bitte alle{' '}
+            {pageEntries.length < PAGE_SIZE ? pageEntries.length : PAGE_SIZE}{' '}
+            Samples vollständig anhören und bewerten, bevor Sie fortfahren.
+          </p>
+        )}
+        <button
+          onClick={handleWeiter}
+          disabled={isPending}
+          className={`px-8 py-3 rounded-lg font-semibold text-white transition-colors ${
+            allCurrentDone && !isPending
+              ? 'bg-blue-600 hover:bg-blue-700 cursor-pointer'
+              : 'bg-gray-300 cursor-not-allowed'
+          }`}
+        >
+          {isPending ? 'Speichern…' : currentPage + 1 >= totalPages ? 'Abschließen' : 'Weiter →'}
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/WaveformPlayer.tsx

@@ -0,0 +1,187 @@
+'use client';
+
+import { useEffect, useRef, useState, useCallback } from 'react';
+
+interface WaveformPlayerProps {
+  src: string;
+  durationMs?: number | null;
+  /** When false the player should stop if it was playing */
+  isActive: boolean;
+  onPlay: () => void;
+  onFullyPlayed: () => void;
+}
+
+const BAR_COUNT = 120;
+
+export default function WaveformPlayer({
+  src,
+  durationMs,
+  isActive,
+  onPlay,
+  onFullyPlayed,
+}: WaveformPlayerProps) {
+  const audioRef = useRef<HTMLAudioElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const rafRef = useRef<number>(0);
+
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState<number>(durationMs ? durationMs / 1000 : 0);
+  const [peaks, setPeaks] = useState<number[]>([]);
+  const fullyPlayedRef = useRef(false);
+
+  // Stop if another player became active
+  useEffect(() => {
+    if (!isActive && isPlaying) {
+      audioRef.current?.pause();
+      cancelAnimationFrame(rafRef.current);
+      setIsPlaying(false);
+    }
+  }, [isActive, isPlaying]);
+
+  // Decode audio and generate waveform peaks
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await fetch(src);
+        const buf = await res.arrayBuffer();
+        const actx = new AudioContext();
+        const decoded = await actx.decodeAudioData(buf);
+        if (cancelled) return;
+
+        const data = decoded.getChannelData(0);
+        const blockSize = Math.floor(data.length / BAR_COUNT);
+        const raw: number[] = [];
+        for (let i = 0; i < BAR_COUNT; i++) {
+          let sum = 0;
+          for (let j = 0; j < blockSize; j++) {
+            sum += Math.abs(data[i * blockSize + j]);
+          }
+          raw.push(sum / blockSize);
+        }
+        const max = Math.max(...raw, 0.001);
+        if (!cancelled) setPeaks(raw.map((v) => v / max));
+        await actx.close();
+      } catch {
+        if (!cancelled) setPeaks(Array(BAR_COUNT).fill(0.5));
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [src]);
+
+  // Draw waveform on canvas whenever peaks or playback position change
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || peaks.length === 0) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    const { width, height } = canvas;
+    ctx.clearRect(0, 0, width, height);
+    const progress = duration > 0 ? Math.min(currentTime / duration, 1) : 0;
+    const barW = Math.max(1, width / BAR_COUNT - 1);
+
+    peaks.forEach((peak, i) => {
+      const x = (i / BAR_COUNT) * width;
+      const barH = Math.max(2, peak * height * 0.85);
+      const y = (height - barH) / 2;
+      const played = i / BAR_COUNT < progress;
+      ctx.fillStyle = played ? '#3b82f6' : '#d1d5db';
+      ctx.beginPath();
+      ctx.roundRect(x, y, barW, barH, 2);
+      ctx.fill();
+    });
+  }, [peaks, currentTime, duration]);
+
+  const tick = useCallback(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    setCurrentTime(audio.currentTime);
+    rafRef.current = requestAnimationFrame(tick);
+  }, []);
+
+  const handlePlay = () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    onPlay();
+    audio.play();
+    setIsPlaying(true);
+    rafRef.current = requestAnimationFrame(tick);
+  };
+
+  const handlePause = () => {
+    const audio = audioRef.current;
+    if (!audio) return;
+    audio.pause();
+    setIsPlaying(false);
+    cancelAnimationFrame(rafRef.current);
+  };
+
+  const handleEnded = () => {
+    setIsPlaying(false);
+    cancelAnimationFrame(rafRef.current);
+    if (!fullyPlayedRef.current) {
+      fullyPlayedRef.current = true;
+      onFullyPlayed();
+    }
+  };
+
+  const handleLoadedMetadata = () => {
+    if (audioRef.current) setDuration(audioRef.current.duration);
+  };
+
+  const fmt = (s: number) => {
+    const m = Math.floor(s / 60);
+    const sec = Math.floor(s % 60);
+    return `${m}:${sec.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <audio
+        ref={audioRef}
+        src={src}
+        onEnded={handleEnded}
+        onLoadedMetadata={handleLoadedMetadata}
+        preload="metadata"
+      />
+      <div className="flex items-center gap-3">
+        {/* Play / Pause button */}
+        <button
+          onClick={isPlaying ? handlePause : handlePlay}
+          className={`flex-shrink-0 inline-flex items-center justify-center w-9 h-9 rounded-full transition-colors ${
+            isPlaying
+              ? 'bg-red-500 hover:bg-red-600 text-white'
+              : 'bg-blue-500 hover:bg-blue-600 text-white'
+          }`}
+          title={isPlaying ? 'Pause' : 'Abspielen'}
+        >
+          {isPlaying ? (
+            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+              <rect x="5" y="4" width="3" height="12" rx="1" />
+              <rect x="12" y="4" width="3" height="12" rx="1" />
+            </svg>
+          ) : (
+            <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+              <path d="M6.3 2.841A1.5 1.5 0 004 4.11v11.78a1.5 1.5 0 002.3 1.269l9.344-5.89a1.5 1.5 0 000-2.538L6.3 2.84z" />
+            </svg>
+          )}
+        </button>
+
+        {/* Waveform canvas */}
+        <canvas
+          ref={canvasRef}
+          width={480}
+          height={48}
+          className="flex-1 rounded"
+          style={{ imageRendering: 'pixelated' }}
+        />
+
+        {/* Duration */}
+        <span className="flex-shrink-0 text-sm text-gray-500 w-10 text-right tabular-nums">
+          {fmt(duration)}
+        </span>
+      </div>
+    </div>
+  );
+}