Audio Playlist Generator für M3U, XSPF und JSON-Playlists - Vue 3 Edition
Eine moderne Vue 3-Anwendung zum Erstellen von Audio-Playlists in verschiedenen Formaten (M3U, XSPF, JSON).
Features
- 🎵 Mehrere Formate: Unterstützung für M3U, XSPF und JSON-Playlists
- 📁 Lokale Verarbeitung: Alle Dateien werden lokal im Browser verarbeitet
- 🔄 Flexible Sortierung: Alphabetisch, nach Datum oder zufällig
- 🎨 Theme-Wechsler: Dark/Light Mode
- 🌍 Mehrsprachig: Deutsch und Englisch
- 📊 Canvas-Liste: Interaktive Dateiliste mit Scrolling
- 💾 Einfaches Speichern: Nutzt die File System Access API
Technologie-Stack
- Vue 3 mit Composition API
- Vite als Build-Tool
- Tailwind CSS v4 (nur Utilities mit
tw:-Präfix, Theme aus den --ds-*-Tokens)
- Canvas API für die Dateiliste
- File System Access API für das Speichern
Installation
npm install
Development
npm run dev
Die Anwendung läuft dann auf http://localhost:5173
Tests
npm run test:unit # Vitest
npm run build && CI=1 npm run test:e2e -- --project=chromium # Playwright gegen den Preview-Build
Die E2E-Tests in e2e/ decken zwei Bereiche ab:
pages.spec.ts: Jede Seite (Start, App, FAQ, Blog) in DE/EN und hell/dunkel. Geprüft werden Überschrift,
data-theme und die Body-Farben aus tokens-v2.json; ein Screenshot hängt am Playwright-Report.playlist.spec.ts: Dateien hinzufügen, Formate (M3U, PLS, JSON), Abwahl, Entfernen mit Rückgängig,
Speichern (mit gestubbtem showSaveFilePicker), Kopieren und Wiederherstellen nach dem Neuladen.
Ohne CI=1 startet Playwright den Dev-Server auf Port 5173.
Build für Production
npm run build
Die Build-Dateien werden im dist-Ordner erstellt.
Preview Production Build
npm run preview
Projektstruktur
src/
├── components/ # Vue-Komponenten
│ ├── AppHeader.vue
│ ├── PlaylistConfig.vue
│ ├── PlaylistPreview.vue
│ ├── ToolsGrid.vue
│ ├── blog/ # Blog-Artikel DE/EN
│ ├── landing/ # Abschnitte der Landing-Seite
│ └── ui/ # Design-System-Komponenten (Ui*)
├── stores/ # Pinia-Stores (playlist, toast)
├── composables/ # Wiederverwendbare Logik
│ ├── usePlaylist.ts
│ ├── useTheme.ts
│ └── useTranslation.ts
├── assets/
│ └── main.css # Globale Styles
├── App.vue # Haupt-Komponente
└── main.ts # App-Einstiegspunkt
Komponenten-Übersicht
Composables
- usePlaylist: Verwaltet Dateien, Sortierung und Playlist-Generierung
- useTheme: Handhabt Theme-Wechsel (Dark/Light)
- useTranslation: Verwaltet Mehrsprachigkeit (DE/EN)
Komponenten
- App.vue: Hauptkomponente mit Layout
- AppHeader: Seitennavigation aller Vue-Seiten
- UiFileList (
src/components/ui/): Dateiliste als DOM-Liste mit Tastatur- und Drag-Sortierung
- PlaylistConfig: Formular für Konfiguration
- PlaylistPreview: Vorschau und Speichern
- ToolsGrid: Grid mit weiteren Tools
- FaqPage (
src/views/): Häufig gestellte Fragen
Globale Navigation und Footer (SSI-Partials)
Navigation, Footer und Cookie-Banner kommen als SSI-Partials vom Server (/partials/*.html) und
liegen nicht im Repo. src/assets/main.css gleicht sie an die Tokens an: Die Navigation stylt sich
über eigene Custom Properties auf .global-nav (--nav-bg, --nav-text, …); diese werden auf
--ds-* gelegt und die festen Dark-Mode-Hintergründe des Partials mit höherer Spezifität
überschrieben. Die Leiste sitzt so auf derselben Fläche wie der AppHeader und folgt dem Theme.
Eine Kopie des Partials zum Nachlesen liegt im Texteditor-Repo unter partials/nav.html.
Styling mit Tailwind
src/assets/tailwind.css bindet Tailwind v4 ein, mit drei Einschränkungen:
- Kein Preflight. Der Reset bleibt in
main.css (@layer base). Preflight würde die SSI-Navigation
und den SSI-Footer verändern.
- Nur Token-Werte. Das Default-Theme ist geleert; jede Utility zeigt per
var(--ds-*) auf
tokens-v2.css, Hell/Dunkel funktioniert also ohne dark:-Varianten. Beispiele: tw:bg-surface-1,
tw:text-text-2, tw:p-4 (= --ds-space-4), tw:rounded-md, tw:h-control-md, tw:max-tablet:hidden.
Werte außerhalb der Tokens (tw:p-7, tw:bg-red-500) erzeugen nichts.
- Präfix
tw:. Bestehende Klassennamen wie .hidden oder .container bleiben unberührt.
Utilities liegen in @layer utilities und verlieren gegen ungelayerte scoped Styles. Beim Umstellen einer
Komponente deshalb die scoped Regel für dieselbe Eigenschaft entfernen. Neue Komponenten nutzen
Utilities, bestehende werden bei Bedarf umgestellt (Pilot: LandingCta.vue).
src/assets/__tests__/tailwind.spec.ts sichert diese Regeln ab.
Übergabe an den Kodini Texteditor
Nach Kopieren oder Speichern unter… bietet ein Dialog an, die Wiedergabeliste im
Kodini Texteditor weiterzubearbeiten („Im Texteditor
öffnen“ / „Nicht jetzt“). Bei Zustimmung legt die App die Datei unter
localStorage['kodinitools-texteditor-handoff-v1'] ab ({ version: 1, source, name, content, mimeType, sharedAt }) und öffnet https://kodinitools.com/texteditor/app?source=playlist_generator
in einem neuen Tab. Der Editor übernimmt den Eintrag beim Start als neues Dokument und entfernt ihn.
Umsetzung: src/utils/textEditorHandoff.ts (getestet), Dialog in src/views/AppPage.vue.
Browser-Kompatibilität
Die Anwendung nutzt moderne Web-APIs:
- File API: Alle modernen Browser
- Canvas API: Alle modernen Browser
- File System Access API: Chrome 86+, Edge 86+ (für das Speichern)
Lizenz
MIT License
Migrationshinweise
Diese Anwendung wurde von Vanilla JavaScript zu Vue 3 migriert. Wichtige Änderungen:
- Reaktivität: Alle Zustandsverwaltung nutzt Vue's Reaktivitätssystem
- Komponenten: UI ist in wiederverwendbare Komponenten aufgeteilt
- Composables: Logik ist in Composables ausgelagert für bessere Wiederverwendbarkeit
- Single File Components: HTML, JavaScript und CSS-Scoping in .vue-Dateien
- Build-System: Vite für schnelles HMR (Hot Module Replacement)
Author
- Dinko Ramić - Kodini Tools - kodinitools.com
