Architecture technique

Vue d'ensemble

Stack technique

Composant	Technologie	Rôle
Framework desktop	Tauri 2.x (Rust)	Fenêtre native, IPC, packaging
Interface	Vue.js 3 + Composition API	UI réactive
État global	Pinia	State management
Internationalisation	vue-i18n	FR / EN / ES / JA
Communication	WebSocket (tokio-tungstenite)	OBS overlay + Stream Deck
Tests unitaires	Vitest	Composables, stores
Tests E2E	Playwright	Flux complets

Les quatre composants

1. Application principale (Tauri)

Le cœur du système. L'utilisateur y gère sa setlist, configure ses platines et contrôle la lecture. Toute modification déclenche un broadcast WebSocket vers tous les clients connectés.

Construite avec Vue.js 3 côté UI et Rust côté backend. Tauri assure le pont entre les deux via des commandes IPC typées.

2. OBS Overlay

Un simple fichier HTML (obs-overlay/index.html) ajouté comme Browser Source dans OBS Studio. Il se connecte au WebSocket de l'application et met à jour l'affichage à chaque message PLAYING_UPDATE. Aucun serveur externe requis — tout passe par localhost.

3. Plugin Stream Deck

Un plugin JavaScript pour Elgato Stream Deck. Chaque bouton représente une platine. Il se connecte au même WebSocket et envoie des commandes en retour (TOGGLE_DECK, PLAY_TRACK, STOP_DECK). Les boutons se mettent à jour dynamiquement (pochette, titre, état playing/idle).

4. Widget npm dlp-player

Un package JavaScript autonome (publication npm à venir). Il lit un JSON de playlist exporté depuis DLP et synchronise l'affichage des tracks avec un lecteur média (<video>, <audio>, iframe YouTube ou SoundCloud). Deux modes d'affichage : list (tracklist à côté du lecteur) et overlay (superposé en bas). Aucune dépendance avec l'application desktop — fonctionne entièrement côté client.

Le serveur WebSocket

Le backend Rust démarre un serveur WebSocket sur localhost:9876 au lancement de l'application. Il gère :

• Les connexions multiples — OBS Overlay + Stream Deck peuvent être connectés simultanément
• Le broadcast — quand un track change, tous les clients reçoivent PLAYING_UPDATE
• La synchronisation config — le plugin Stream Deck demande GET_DECKS_CONFIG au démarrage pour récupérer les platines configurées

Protocole

Tout client WebSocket peut se connecter — pas d'authentification, le serveur est uniquement local.

const ws = new WebSocket('ws://localhost:9876')

ws.onmessage = (event) => {
  const { type, payload } = JSON.parse(event.data)
  if (type === 'PLAYING_UPDATE') {
    // Mettre à jour l'affichage
  }
}

Messages sortants (App → Clients)

PLAYING_UPDATE — Envoyé quand les tracks en cours de lecture changent.

{
  "type": "PLAYING_UPDATE",
  "payload": {
    "tracks": [
      {
        "id": "uuid",
        "title": "Titre du morceau",
        "artist": "Nom de l'artiste",
        "image": "data:image/jpeg;base64,... ou URL",
        "deckName": "Vinyl 1",
        "qrCodeUrl": "https://..."
      }
    ]
  }
}

DECK_CANDIDATES — Réponse à GET_DECK_CANDIDATES. Fournit les tracks disponibles pour une platine donnée.

{
  "type": "DECK_CANDIDATES",
  "payload": {
    "deckId": "deck-1",
    "currentlyPlaying": { "id": "...", "title": "...", "artist": "...", "image": "..." },
    "lastPlayed":       { "id": "...", "title": "...", "artist": "...", "image": "..." },
    "nextUnplayed":     { "id": "...", "title": "...", "artist": "...", "image": "..." }
  }
}

DECKS_CONFIG — Réponse à GET_DECKS_CONFIG. Liste toutes les platines configurées.

{
  "type": "DECKS_CONFIG",
  "payload": {
    "decks": [
      { "id": "deck-1", "name": "Vinyl 1", "deckType": "vinyl", "image": "data:image/png;base64,..." },
      { "id": "deck-2", "name": "CDJ 1",   "deckType": "cd",    "image": "data:image/png;base64,..." }
    ]
  }
}

CONFIG_UPDATE — Envoyé quand la configuration visuelle de l'overlay change (thème, options d'affichage, animations).

Messages entrants (Clients → App)

Message	Payload	Description
GET_DECKS_CONFIG	{}	Demander la liste des platines configurées
TOGGLE_DECK	{ "deck_id": "deck-1" }	Activer/désactiver une platine
GET_DECK_CANDIDATES	{ "deck_id": "deck-1" }	Demander les tracks candidates pour une platine
PLAY_TRACK	{ "track_id": "uuid" }	Lancer la lecture d'un track
STOP_DECK	{ "deck_id": "deck-1" }	Arrêter une platine

Types de platine

Valeur	Description
vinyl	Platine vinyle
cd	Lecteur CD / CDJ
controller	Contrôleur DJ
software	Logiciel (Rekordbox, Serato, Traktor...)

Gestion des versions

La version est définie une seule fois dans package.json et synchronisée automatiquement vers tauri.conf.json et Cargo.toml via un script sync-version.js, appelé automatiquement avant chaque build et tauri via les hooks npm prebuild / pretauri.