Gitfed
Explorer/bastien-mrq/multi-twitch

bastien-mrq/multi-twitch

public

propriétaire: bastien-mrq@git.neuromancer.ovh

1 commits · 1 contributeurs · HTML

main
main
Commits (1) Merge requests
Télécharger
main.tar.gz main.zip
lecture seule https://git.neuromancer.ovh/bastien-mrq/multi-twitch.git
ssh://git@git.neuromancer.ovh:2222/bastien-mrq/multi-twitch.git
docsdossier
.gitignorefichier
README.mdfichier
index.htmlfichier
start.shfichier
README

Multi-Twitch — ZEvent

Front local pour regarder plusieurs streams Twitch en même temps, pensé pour le ZEvent : tout l'écran est utilisé (pas de scroll, pas de gap), un seul fichier HTML, zéro dépendance.

screenshot

Démarrage rapide

./start.sh          # sert l'app sur http://localhost:8123 et ouvre le navigateur
./start.sh 9000     # autre port si besoin

⚠️ Il faut passer par http://localhost : le player Twitch exige un paramètre parent et refuse de se charger depuis un fichier ouvert en file://.

Technologie

  • Un seul fichier index.html : HTML + CSS + JavaScript vanilla, sans framework, sans build, sans npm.
  • Seule brique externe : le SDK officiel du player Twitch (player.twitch.tv/js/embed/v1.js), qui affiche les streams et expose l'API JS (play/pause, setMuted, setVolume, setQuality, getPlaybackStats…).
  • CSS Grid pour la disposition, localStorage pour retenir chaînes et volumes.
  • Serveur : n'importe quel serveur statique (python3 -m http.server), aucune logique côté serveur.

Fonctionnalités

  • Recherche ⌘K avec autocomplétion sur un annuaire d'habitués du ZEvent (constante KNOWN dans index.html, modifiable). N'importe quel pseudo Twitch peut être tapé pour ajouter une chaîne hors annuaire.
  • Grille sans scroll : le découpage lignes × colonnes est recalculé à chaque redimensionnement pour maximiser la surface vidéo 16:9 (fonction bestGrid).
  • Trois modes : grille / plein écran avec colonne latérale (F) / plein écran (⌘⇧K).
  • Bandeau au survol uniquement : nom, numéro, boutons (🔊 son solo, slider de volume, ⏯ play/pause, ⛶ plein écran, ✕ fermer). Le reste du temps, 100 % vidéo.
  • Mixeur de son : un slider de volume par stream — plusieurs streams audibles en même temps à des niveaux différents. Les touches 1–9/A restent le mode « solo » (le son sur un seul stream). Volumes mémorisés.
  • Jamais de pause : relance automatique sur événement pause + chien de garde toutes les 2 s + relance à chaque changement de disposition. La pause volontaire (⏯/Espace) est respectée (badge « ⏸ PAUSE »).
  • Anti-gel : un flux à 0 fps pendant ~6 s alors qu'il devrait jouer voit son player reconstruit automatiquement. La détection ne s'arme qu'après un premier démarrage réel (sinon elle tuerait les streams en cours de chargement).
  • Anti-pub (best effort) : pub détectée sur le stream qui a le son → le son (et la mise en avant) bascule sur le stream suivant sans pub, puis revient à la fin. Twitch n'expose pas officiellement cet événement sur les embeds (détection par écoute des messages internes du player), donc P fait la même bascule manuellement.
  • Qualité adaptative : en mode plein écran/colonne, les petits streams passent en basse qualité pour ne pas saturer le décodeur vidéo (cause classique de vignettes figées) ; le stream principal reste en auto.
  • Turbo / compte Twitch : rien à configurer — le player embarqué utilise la session twitch.tv du navigateur (cookies tiers requis : OK sur Chrome par défaut, bloqué sur Safari). Connecté avec Turbo = plus de pubs. Aucun risque de ban : c'est l'usage officiel des embeds.

Raccourcis clavier

Touche Action
⌘K Recherche / autocomplétion (re-focus si déjà ouverte)
⌘⇧K Plein écran du stream sélectionné (aller-retour)
F Plein écran ⇄ plein écran + colonne latérale
Entrée Met le stream sélectionné en avant
1–9 Son solo sur le stream n° N
← → ↑ ↓ Déplace la sélection dans la grille
A Son solo sur le stream sélectionné
− / + Volume du stream sélectionné dans le mix
Espace Play/pause du stream sélectionné
P Pub sur le stream audio → passe au suivant
M ou 0 Coupe tout le son
X ou Suppr Ferme le stream sélectionné
R Tout recharger (reconstruit les players, débloque les flux figés)
Échap Retour à la grille

Tous les raccourcis sont rappelés dans la barre en bas de l'écran. Si tu cliques dans un player, l'iframe Twitch capte le clavier : le focus est automatiquement rendu à la page après ~2,5 s.

Le piège à connaître : la politique de visibilité de Twitch

La leçon durement apprise de ce projet : Twitch bloque l'autoplay d'un player recouvert par un autre élément, même totalement transparent (erreur console « Autoplay disabled — minimum requirements not met: style visibility »).

Conséquences dans le code :

  • les liserés de sélection/son sont des bordures de la tuile, jamais des calques posés sur la vidéo ;
  • le bandeau au survol est en display: none (pas opacity: 0) tant qu'il n'est pas affiché ;
  • en plein écran, les autres streams ne sont pas cachés derrière le principal mais gardés sur une bande visible de 8 px au bord droit.

Si tu modifies le CSS, ne pose jamais d'élément permanent au-dessus des players.

Debug

  • window.__mt en console expose tiles, state, playAll, addChannel pour inspecter l'état réel des players (__mt.tiles.zerator.player.getPlaybackStats()).
  • Le comportement a été validé par des tests automatisés en Chrome headless (puppeteer-core) : autoplay, fps > 0 sur chaînes live, absence d'avertissements.

Fichiers

  • index.html — toute l'application (CSS + JS inclus)
  • start.sh — lance un serveur statique et ouvre le navigateur
  • README.md — ce fichier