199 lines
8.1 KiB
Markdown
199 lines
8.1 KiB
Markdown
|
||
# 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
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
2. Copier la configuration locale et renseigner vos clés si nécessaire
|
||
|
||
```bash
|
||
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
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
- Par défaut: http://localhost:4200
|
||
4. Build de production
|
||
|
||
```bash
|
||
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
|
||
|
||
```bash
|
||
docker build -t newtube:latest .
|
||
```
|
||
|
||
### Lancement avec docker-compose
|
||
|
||
```bash
|
||
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:
|
||
|
||
```html
|
||
<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)
|
||
|
||
- [X] Contrôle centralisé de readiness par provider (`InstanceService.getProviderReadiness`)
|
||
- [X] Gating readiness dans `Home`/`Search` pour éviter les appels et afficher des notices
|
||
- [X] Intégration Odysee (Trending + Search) via proxy `/proxy/odysee` (+ mapping)
|
||
- [X] Intégration Rumble (Trending + Search) via proxy `/proxy/rumble` (+ mapping, clé requise)
|
||
- [X] Suppression d’Utreon
|
||
- [X] Proxies vérifiés/ajoutés (YouTube, Dailymotion, Twitch, Odysee, Rumble)
|
||
- [X] Gating Gemini dans la page Watch (désactivation bouton + message si clé manquante)
|
||
- [X] 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.
|