Document and explain curator special curation flow

2025-12-04 13:08:07 +01:00
parent 4b7121271a
commit b033c3a1bc
6 changed files with 116 additions and 27 deletions
--- a/README.md
+++ b/README.md
@@ -57,6 +57,7 @@ Eine Web-App inspiriert von Heardle, bei der Nutzer täglich einen Song anhand k
    - **Global-Kuratoren:** Optionale globale Kuratoren, die für alle Rätsel zuständig sind.
    - **Kurator-Dashboard:** Eigene Dashboard-Seite (`/curator` oder `/de/curator`, `/en/curator`) für Kuratoren.
    - **Song-Verwaltung:** Kuratoren können Songs hochladen, bearbeiten und Genres/Specials zuweisen.
+    - **Curate Specials:** Kuratoren können in einem eigenen Bereich („Curate Specials“) die Startzeiten der Songs in ihren zugewiesenen Specials über den Waveform-Editor einstellen – streng begrenzt auf ihre eigenen Specials.
    - **Batch-Edit:** Mehrere Titel gleichzeitig bearbeiten (Genre/Special Toggle, Artist ändern, Exclude Global Flag setzen).
    - **Kommentar-Verwaltung:** Kuratoren können Spieler-Kommentare zu ihren Rätseln einsehen, als gelesen markieren und archivieren.
 - **Spieler-Kommentare:**
@@ -195,14 +196,16 @@ Das Projekt ist für den Betrieb mit Docker optimiert.
     - **Optional:** Setze ein Startdatum (Launch Date) und Enddatum.
     - **Optional:** Trage einen Kurator ein.
   - Weise Songs dem Special zu (über die Song-Bibliothek).
-   - Klicke auf "Curate" neben dem Special.
-   - Nutze den Waveform-Editor um den perfekten Ausschnitt zu wählen:
-     - **Klicken:** Positioniert die Selektion
-     - **Hovern:** Zeigt Vorschau der neuen Position
-     - **Zoom:** 🔍+ / 🔍− Buttons für detaillierte Ansicht
-     - **Pan:** ← / → Buttons zum Verschieben der Ansicht
-     - **Segment-Playback:** Teste einzelne Puzzle-Abschnitte
-     - **Save:** Speichere Änderungen mit dem grünen Button
+   - Die eigentliche Kuratierung (Auswahl des Ausschnitts) findet im **Kuratoren-Dashboard** statt:
+     - Logge dich als Kurator ein und gehe zu `/de/curator` oder `/en/curator`.
+     - Klicke im Dashboard auf **„Curate Specials“**, um eine Liste deiner zugewiesenen Specials zu sehen.
+     - Öffne ein Special und nutze dort den Waveform-Editor, um den perfekten Ausschnitt zu wählen:
+       - **Klicken:** Positioniert die Selektion
+       - **Hovern:** Zeigt Vorschau der neuen Position
+       - **Zoom:** 🔍+ / 🔍− Buttons für detaillierte Ansicht
+       - **Pan:** ← / → Buttons zum Verschieben der Ansicht
+       - **Segment-Playback:** Teste einzelne Puzzle-Abschnitte
+       - **Save:** Speichere Änderungen mit dem grünen Button
   - Die Spieler hören dann nur den kuratierten Ausschnitt.
   - Auf der Startseite werden zukünftige Specials unter "Coming soon" angezeigt (mit Datum und Kurator).

--- a/app/curator/help/CuratorHelpClient.tsx
+++ b/app/curator/help/CuratorHelpClient.tsx
@@ -95,6 +95,28 @@ export default function CuratorHelpClient() {
                    </div>
                </section>

+                {/* Specials kuratieren */}
+                <section>
+                    <h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
+                        {t('curateSpecialsHelpTitle')}
+                    </h2>
+                    <div style={{ fontSize: '0.95rem', lineHeight: '1.7' }}>
+                        <p style={{ marginBottom: '1rem' }}>{t('curateSpecialsHelpIntro')}</p>
+                        <h3 style={{ fontSize: '1.1rem', marginTop: '1rem', marginBottom: '0.75rem' }}>
+                            {t('curateSpecialsHelpStepsTitle')}
+                        </h3>
+                        <ol style={{ marginLeft: '1.5rem', marginBottom: '1rem' }}>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep1')}</li>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep2')}</li>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep3')}</li>
+                            <li style={{ marginBottom: '0.5rem' }}>{t('curateSpecialsHelpStep4')}</li>
+                        </ol>
+                        <p style={{ marginTop: '1rem', padding: '0.75rem', background: '#fef3c7', borderRadius: '0.375rem', border: '1px solid #fbbf24' }}>
+                            <strong>{t('note')}:</strong> {t('curateSpecialsPermissionsNote')}
+                        </p>
+                    </div>
+                </section>
+
                {/* Kommentar-Verwaltung */}
                <section>
                    <h2 style={{ fontSize: '1.5rem', marginBottom: '1rem', borderBottom: '2px solid #e5e7eb', paddingBottom: '0.5rem' }}>
--- a/app/curator/specials/[id]/page.tsx
+++ b/app/curator/specials/[id]/page.tsx
@@ -5,6 +5,7 @@ import { useParams, useRouter, usePathname } from 'next/navigation';
 import { useLocale, useTranslations } from 'next-intl';
 import CurateSpecialEditor, { CurateSpecial } from '@/components/CurateSpecialEditor';
 import { getCuratorAuthHeaders } from '@/lib/curatorAuth';
+import HelpTooltip from '@/components/HelpTooltip';

 export default function CuratorSpecialEditorPage() {
    const params = useParams();
@@ -14,6 +15,7 @@ export default function CuratorSpecialEditorPage() {
    const intlLocale = useLocale() as 'de' | 'en';
    const locale: 'de' | 'en' = urlLocale === 'de' || urlLocale === 'en' ? urlLocale : intlLocale;
    const t = useTranslations('Curator');
+    const tHelp = useTranslations('CuratorHelp');

    const specialId = params?.id as string;

@@ -117,20 +119,49 @@ export default function CuratorSpecialEditorPage() {
    }

    return (
-        <CurateSpecialEditor
-            special={special}
-            locale={locale}
-            onBack={() => router.push(`/${locale}/curator/specials`)}
-            onSaveStartTime={handleSaveStartTime}
-            backLabel={t('backToCuratorSpecials')}
-            headerPrefix={t('curateSpecialHeaderPrefix')}
-            noSongsHint={t('curateSpecialNoSongs')}
-            noSongsSubHint={t('curateSpecialNoSongsSub')}
-            instructionsText={t('curateSpecialInstructions')}
-            savingLabel={t('saving')}
-            saveChangesLabel={t('saveChanges')}
-            savedLabel={t('saved')}
-        />
+        <div style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                    <h1 style={{ fontSize: '1.75rem', fontWeight: 'bold' }}>
+                        {t('curateSpecialHeaderPrefix')}
+                    </h1>
+                    <HelpTooltip
+                        shortText={tHelp('tooltipCurateSpecialEditorShort')}
+                        longText={tHelp('tooltipCurateSpecialEditorLong')}
+                        position="bottom"
+                    />
+                </div>
+                <button
+                    type="button"
+                    onClick={() => router.push(`/${locale}/curator/specials`)}
+                    style={{
+                        padding: '0.5rem 1rem',
+                        background: '#e5e7eb',
+                        borderRadius: '0.5rem',
+                        border: 'none',
+                        cursor: 'pointer',
+                        fontSize: '0.9rem',
+                    }}
+                >
+                    {t('backToCuratorSpecials')}
+                </button>
+            </div>
+
+            <CurateSpecialEditor
+                special={special}
+                locale={locale}
+                onBack={() => router.push(`/${locale}/curator/specials`)}
+                onSaveStartTime={handleSaveStartTime}
+                backLabel={t('backToCuratorSpecials')}
+                headerPrefix={t('curateSpecialHeaderPrefix')}
+                noSongsHint={t('curateSpecialNoSongs')}
+                noSongsSubHint={t('curateSpecialNoSongsSub')}
+                instructionsText={t('curateSpecialInstructions')}
+                savingLabel={t('saving')}
+                saveChangesLabel={t('saveChanges')}
+                savedLabel={t('saved')}
+            />
+        </div>
    );
 }

--- a/app/curator/specials/page.tsx
+++ b/app/curator/specials/page.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 import { useLocale, useTranslations } from 'next-intl';
 import { Link } from '@/lib/navigation';
 import { getCuratorAuthHeaders } from '@/lib/curatorAuth';
+import HelpTooltip from '@/components/HelpTooltip';

 type LocalizedString = string | { de: string; en: string };

@@ -15,6 +16,7 @@ interface CuratorSpecialSummary {

 export default function CuratorSpecialsPage() {
    const t = useTranslations('Curator');
+    const tHelp = useTranslations('CuratorHelp');
    const locale = useLocale();
    const [specials, setSpecials] = useState<CuratorSpecialSummary[]>([]);
    const [loading, setLoading] = useState(true);
@@ -94,9 +96,16 @@ export default function CuratorSpecialsPage() {
    return (
        <div style={{ padding: '2rem', maxWidth: '900px', margin: '0 auto' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
-                <h1 style={{ fontSize: '2rem', fontWeight: 'bold' }}>
-                    {t('curateSpecialsTitle')}
-                </h1>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                    <h1 style={{ fontSize: '2rem', fontWeight: 'bold' }}>
+                        {t('curateSpecialsTitle')}
+                    </h1>
+                    <HelpTooltip
+                        shortText={tHelp('tooltipCurateSpecialsShort')}
+                        longText={tHelp('tooltipCurateSpecialsLong')}
+                        position="bottom"
+                    />
+                </div>
                <Link
                    href="/curator"
                    style={{
--- a/messages/de.json
+++ b/messages/de.json
@@ -353,6 +353,14 @@
    "troubleshootingA3": "Du kannst Songs nur Genres und Specials zuordnen, für die du verantwortlich bist. Wende dich an den Admin, wenn du Zugriff auf zusätzliche Genres oder Specials benötigst.",
    "troubleshootingQ4": "Warum ist die Exclude-Global-Checkbox deaktiviert?",
    "troubleshootingA4": "Nur Global-Kuratoren können das Exclude-Global-Flag ändern. Wenn du diese Berechtigung benötigst, wende dich an den Admin.",
+    "curateSpecialsHelpTitle": "Specials kuratieren",
+    "curateSpecialsHelpIntro": "Im Bereich „Curate Specials\" kannst du den exakten Audio-Ausschnitt festlegen, den Spieler in deinen Specials hören. Es werden nur Specials angezeigt, die dir zugewiesen sind.",
+    "curateSpecialsHelpStepsTitle": "So kuratierst du Specials",
+    "curateSpecialsHelpStep1": "Öffne das Kuratoren-Dashboard und klicke auf „Curate Specials\", um alle dir zugewiesenen Specials zu sehen.",
+    "curateSpecialsHelpStep2": "Wähle ein Special aus der Liste, um den Waveform-Editor für dieses Special zu öffnen.",
+    "curateSpecialsHelpStep3": "Klicke auf die Waveform, um die Startzeit zu wählen. Der hervorgehobene Bereich zeigt genau das, was Spieler hören werden.",
+    "curateSpecialsHelpStep4": "Nutze Zoom, Pan und Segment-Playback, um den Ausschnitt fein abzustimmen. Klicke auf „Änderungen speichern\", um die neue Startzeit zu übernehmen.",
+    "curateSpecialsPermissionsNote": "Du kannst nur Specials kuratieren, die dir zugewiesen sind. Wenn du versuchst, ein fremdes Special zu öffnen oder zu speichern, blockiert das System die Aktion.",
    "tooltipDashboardShort": "Übersicht über dein Kuratoren-Dashboard",
    "tooltipDashboardLong": "Dies ist dein Haupt-Dashboard, wo du Songs hochladen, deine Track-Liste verwalten und Kommentare von Spielern einsehen kannst. Nutze den Hilfe-Button (❓), um auf das vollständige Handbuch zuzugreifen.",
    "tooltipUploadShort": "MP3-Dateien zu deinen Genres hochladen",
@@ -374,7 +382,11 @@
    "tooltipBatchArtistShort": "Artist für alle ausgewählten Songs ändern",
    "tooltipBatchArtistLong": "Gib einen neuen Artist-Namen ein, um ihn für alle ausgewählten Songs zu setzen. Dies ist nützlich, um Artist-Namen zu korrigieren oder Namenskonventionen über mehrere Songs hinweg zu standardisieren.",
    "tooltipCommentsShort": "Spieler-Feedback und Kommentare",
-    "tooltipCommentsLong": "Spieler können dir Nachrichten zu Rätseln in deinen Genres oder Specials senden. Ungelesene Kommentare sind mit einem blauen Rahmen und Badge hervorgehoben. Klicke auf einen Kommentar, um ihn als gelesen zu markieren, oder archiviere ihn, wenn du ihn nicht mehr benötigst."
+    "tooltipCommentsLong": "Spieler können dir Nachrichten zu Rätseln in deinen Genres oder Specials senden. Ungelesene Kommentare sind mit einem blauen Rahmen und Badge hervorgehoben. Klicke auf einen Kommentar, um ihn als gelesen zu markieren, oder archiviere ihn, wenn du ihn nicht mehr benötigst.",
+    "tooltipCurateSpecialsShort": "Startzeiten für deine Specials kuratieren",
+    "tooltipCurateSpecialsLong": "In dieser Ansicht siehst du alle Specials, die dir zugewiesen sind. Öffne ein Special, um den Audio-Ausschnitt zu wählen, den die Spieler hören. Du kannst nur Specials sehen und bearbeiten, für die du zuständig bist.",
+    "tooltipCurateSpecialEditorShort": "Mit dem Waveform-Editor den Puzzle-Ausschnitt wählen",
+    "tooltipCurateSpecialEditorLong": "Klicke auf die Waveform, um zu bestimmen, wo das Rätsel startet. Nutze Zoom und Pan für Feineinstellungen und spiele einzelne Segmente ab, um sie zu testen. Beim Speichern wird nur dieser kuratierte Ausschnitt für Spieler in diesem Special verwendet."
  },
  "About": {
    "title": "Über Hördle & Impressum",
--- a/messages/en.json
+++ b/messages/en.json
@@ -353,6 +353,14 @@
    "troubleshootingA3": "You can only assign songs to genres and specials that you are responsible for. Contact the admin if you need access to additional genres or specials.",
    "troubleshootingQ4": "Why is the exclude-from-global checkbox disabled?",
    "troubleshootingA4": "Only Global Curators can change the exclude-from-global flag. If you need this permission, contact the admin.",
+    "curateSpecialsHelpTitle": "Curating specials",
+    "curateSpecialsHelpIntro": "In the \"Curate Specials\" area you can choose the exact audio snippet that players will hear in your specials. You only ever see specials that are assigned to you.",
+    "curateSpecialsHelpStepsTitle": "How to curate specials",
+    "curateSpecialsHelpStep1": "Open the curator dashboard and click on \"Curate Specials\" to see all specials assigned to you.",
+    "curateSpecialsHelpStep2": "Select a special from the list to open the waveform editor for that special.",
+    "curateSpecialsHelpStep3": "Click on the waveform to choose the start time. The highlighted region shows exactly what players will hear.",
+    "curateSpecialsHelpStep4": "Use zoom, pan and segment playback to fine-tune the snippet. Click \"Save changes\" to apply the new start time.",
+    "curateSpecialsPermissionsNote": "You can only curate specials that are assigned to you. If you try to open or save a special that is not yours, the system will block the action.",
    "tooltipDashboardShort": "Overview of your curator dashboard",
    "tooltipDashboardLong": "This is your main dashboard where you can upload songs, manage your track list, and view comments from players. Use the help button (❓) to access the full manual.",
    "tooltipUploadShort": "Upload MP3 files to your genres",
@@ -374,7 +382,11 @@
    "tooltipBatchArtistShort": "Change artist for all selected songs",
    "tooltipBatchArtistLong": "Enter a new artist name to set it for all selected songs. This is useful for correcting artist names or standardizing naming conventions across multiple songs.",
    "tooltipCommentsShort": "Player feedback and comments",
-    "tooltipCommentsLong": "Players can send you messages about puzzles in your genres or specials. Unread comments are highlighted with a blue border and badge. Click on a comment to mark it as read, or archive it if you no longer need it."
+    "tooltipCommentsLong": "Players can send you messages about puzzles in your genres or specials. Unread comments are highlighted with a blue border and badge. Click on a comment to mark it as read, or archive it if you no longer need it.",
+    "tooltipCurateSpecialsShort": "Curate the start times for your specials",
+    "tooltipCurateSpecialsLong": "This view shows all specials that are assigned to you. Open a special to choose the audio snippet that players will hear. You can only see and edit specials for which you are responsible.",
+    "tooltipCurateSpecialEditorShort": "Use the waveform editor to pick the puzzle snippet",
+    "tooltipCurateSpecialEditorLong": "Click on the waveform to choose where the puzzle starts. Use zoom and pan for fine control, and play back individual segments to test them. When you save, only this curated snippet will be used for players in this special."
  },
  "About": {
    "title": "About Hördle & Imprint",