NewTube — Agrégateur multi‑plateformes (Angular)

NewTube est une application Angular légère permettant de découvrir des vidéos « tendances » et d’effectuer des recherches sur plusieurs plateformes à partir d’une seule interface.

Providers supportés à ce jour: YouTube, Dailymotion, Twitch, PeerTube (instances configurables), Odysee (via proxy), Rumble (via proxy, clé requise).

---

Sommaire

• Aperçu & objectifs
• Stack & patterns
• Pré‑requis
• Installation & lancement
• Configuration des providers (clés/API)
• Proxies de développement
• Utilisation rapide
• État des fonctionnalités (checklist)
• Roadmap / TODO (priorités)

---

Aperçu & objectifs

L’objectif de NewTube est d’offrir une expérience unifiée pour explorer les contenus vidéo sans basculer entre plusieurs sites. L’app expose un sélecteur de provider et une zone de recherche, et propose une page d’accueil « Tendance ». Les appels réseaux sont pré‑filtrés par un contrôle centralisé d’aptitude (« readiness ») afin d’éviter des erreurs lorsque des clés manquent (YouTube, Twitch, Rumble) ou lorsqu’un provider nécessite une configuration préalable (PeerTube).

Stack & patterns

• Angular 20 (standalone components, strict mode)
• Signals (signal, computed, effect) pour la réactivité UI
• RxJS pour la composition d’appels HTTP
• Tailwind CSS via CDN pour le style rapide
• Proxy de dev Angular pour contourner le CORS (voir proxy.conf.json)

Principes de code:

• Contrôle centralisé de « readiness » dans src/services/instance.service.ts
• Un service unique src/services/youtube-api.service.ts qui route les appels selon le provider
• Mappers par provider pour convertir les réponses en modèle interne Video
• Effets dans les composants (Home, Search, Watch) pour réagir aux changements de provider/région/instance

Pré‑requis

• Node.js (version récente LTS)
• Aucune installation globale d’Angular CLI n’est requise: elle est fournie en dépendance du projet

Installation & lancement

1. Installer les dépendances

   npm install
   

2. Copier la configuration locale et renseigner vos clés si nécessaire

   cp assets/config.local.example.js assets/config.local.js
   # Éditer assets/config.local.js et compléter les clés
   

3. Lancer le serveur de développement

   npm run dev
   

   • Par défaut: http://localhost:4200

4. Build de production

   npm run build
   

Déploiement Docker

Cette app peut tourner dans un unique conteneur Node qui sert l’API Express et le build Angular (dossier dist/).

Construction de l’image

docker build -t newtube:latest .

Lancement avec docker-compose

docker compose up -d

Par défaut:

• Frontend + API disponibles sur http://localhost:4000
• Le build Angular est servi statiquement par server/index.mjs depuis ./dist
• La base SQLite et les téléchargements temporaires sont persistés via des volumes:
  • ./db monté sur /app/db
  • ./tmp/downloads monté sur /app/tmp/downloads

Variables d’environnement utiles

• PORT (defaut: 4000)
• NODE_ENV (production en conteneur)
• TWITCH_CLIENT_ID, TWITCH_CLIENT_SECRET (pour la recherche Twitch)
• YOUTUBE_API_KEY ou YOUTUBE_API_KEYS (clé unique ou liste pour la recherche YouTube)
• YT_CACHE_TTL_MS (TTL du cache côté serveur pour YouTube)

Notes:

• Les clés front (YouTube) peuvent aussi être définies dans assets/config.local.js. En prod Docker, préférez les variables d’environnement côté serveur quand c’est pris en charge par le provider.
• Le chemin des cookies d’auth côté API s’adapte automatiquement: /api en production (Docker), /proxy/api en dev local.

Configuration des providers (clés/API)

La configuration locale est lue depuis assets/config.local.js (non versionné). Exemple:

<script>
  // YouTube (clé Data API v3, restreinte par referer HTTP)
  window.YOUTUBE_API_KEY = 'VOTRE_CLE_YOUTUBE';

  // Google Gemini (optionnel, pour la synthèse des commentaires sur la page Watch)
  // window.GEMINI_API_KEY = 'VOTRE_CLE_GEMINI';

  // Twitch (requis pour les appels Helix)
  window.TWITCH_CLIENT_ID = 'VOTRE_CLIENT_ID';
  window.TWITCH_CLIENT_SECRET = 'VOTRE_CLIENT_SECRET';

  // Rumble (requis pour utiliser Rumble dans cette app)
  // Certaines API publiques Rumble étant limitées, l’app attend une clé exposée côté navigateur.
  window.RUMBLE_API_KEY = 'VOTRE_CLE_RUMBLE';

  // Odysee: aucune clé requise (les requêtes passent via un proxy côté dev)
</script>

Notes:

• YouTube: restreignez la clé par referer HTTP (ex: http://localhost:4200/*) et n’activez que les APIs nécessaires.
• Odysee: aucune clé; appels proxifiés vers https://api.na-backend.odysee.com/api/v1/proxy.
• Rumble: clé requise pour activer Trending et Search.
• PeerTube: nécessite la sélection d’une instance active (voir en‑tête de l’app).

Proxies de développement

Le fichier proxy.conf.json redirige les requêtes suivantes:

• /proxy/yt → https://www.googleapis.com
• /proxy/dm → https://api.dailymotion.com
• /proxy/twitch-api → https://api.twitch.tv
• /proxy/twitch-auth → https://id.twitch.tv
• /proxy/odysee → https://api.na-backend.odysee.com
• /proxy/rumble → https://rumble.com/api/v0

Ces routes sont utilisées par YoutubeApiService pour contourner le CORS en dev.

Utilisation rapide

• Sélectionnez un provider et (si disponible) une région; pour PeerTube, choisissez l’instance.
• Page d’accueil: vidéos tendances du provider actif.
• Recherche: résultats selon les capacités du provider (YouTube/Dailymotion: vidéos, Twitch: chaînes, Odysee/Rumble: vidéos).
• Page Watch: bouton « Résumer les commentaires » (Gemini). Le bouton est désactivé si la clé manque.
• Si une clé/instance est manquante, une notice claire s’affiche et l’app évite les appels réseau inutiles.

État des fonctionnalités (checklist)

• Contrôle centralisé de readiness par provider (InstanceService.getProviderReadiness)
• Gating readiness dans Home/Search pour éviter les appels et afficher des notices
• Intégration Odysee (Trending + Search) via proxy /proxy/odysee (+ mapping)
• Intégration Rumble (Trending + Search) via proxy /proxy/rumble (+ mapping, clé requise)
• Suppression d’Utreon
• Proxies vérifiés/ajoutés (YouTube, Dailymotion, Twitch, Odysee, Rumble)
• Gating Gemini dans la page Watch (désactivation bouton + message si clé manquante)
• Messages spécifiques (YouTube: clé invalide ou referer HTTP)
• Détails vidéo/Commentaires par provider sur la page Watch (implémentations dédiées)
• Vérification de disponibilité d’instance PeerTube (reachability check)

Roadmap / TODO (priorités)

1. [Haute] Notice globale dans l’en‑tête quand le provider sélectionné n’est pas prêt (readiness banner)
2. [Haute] Tests unitaires pour InstanceService.getProviderReadiness et comportements des composants
3. [Moyenne] Finaliser/Renforcer l’intégration Rumble (endpoints/documentation officielle, meilleurs mappers)
4. [Moyenne] Reachability check des instances PeerTube (ping + fallback)
5. [Moyenne] Implémenter getVideoDetails et récupération des commentaires par provider pour la page Watch
6. [Basse] Option: masquer dans le sélecteur les providers non prêts (ou les griser avec explication)
7. [Basse] Améliorer l’UX (avatars réels pour YouTube/Twitch, états vides plus parlants)

---

Scripts NPM

• npm run dev — démarre le serveur de dev Angular (proxy activé)
• npm run build — build de production (dist)
• npm run preview — sert le build avec configuration production

Notes de sécurité & bonnes pratiques

• Ne versionnez jamais vos clés. Utilisez assets/config.local.js (ignoré par git).
• Pour les clés front (YouTube), appliquez des restrictions de referer HTTP et quotas.
• Les intégrations Odysee/Rumble sont basées sur des endpoints publics et peuvent évoluer; l’app gère les erreurs en douceur et affiche des notices.