docs: update README with emoji styling and improved feature documentation
This commit is contained in:
parent
49f9018e77
commit
b835bfcdbd
225
README.md
225
README.md
@ -1,198 +1,101 @@
|
|||||||
|
# NewTube — Agrégateur multi‑plateformes (Angular) 🌐
|
||||||
|
|
||||||
# NewTube — Agrégateur multi‑plateformes (Angular)
|
NewTube est un agrégateur de vidéos multi-plateformes, conçu pour une expérience unifiée et personnalisable. 🚀
|
||||||
|
|
||||||
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.
|
### Objectifs Principaux 🎯
|
||||||
|
|
||||||
Providers supportés à ce jour: YouTube, Dailymotion, Twitch, PeerTube (instances configurables), Odysee (via proxy), Rumble (via proxy, clé requise).
|
- Fournir une recherche et des tendances unifiées sans changer d'onglet. 🔍
|
||||||
|
- Gérer les clés API et configurations pour éviter les erreurs. 🔒
|
||||||
|
- Offrir une UX fluide avec thèmes, recherche avancée et gestion des préférences. 🎨
|
||||||
|
|
||||||
---
|
### Providers Supportés 📹
|
||||||
|
|
||||||
## Sommaire
|
- YouTube 🔴
|
||||||
|
- Dailymotion 🔵
|
||||||
|
- Twitch 🟣
|
||||||
|
- PeerTube (instances configurables) 🟢
|
||||||
|
- Odysee 🟡
|
||||||
|
- Rumble 🟠
|
||||||
|
|
||||||
- Aperçu & objectifs
|
### Nouveautés Récentes ✨
|
||||||
- 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)
|
|
||||||
|
|
||||||
---
|
- Barre de recherche sur la page 'Liked videos' avec filtrage côté serveur. :search:
|
||||||
|
- Améliorations de l'affichage des badges fournisseurs dans le header. 🏷
|
||||||
|
|
||||||
## Aperçu & objectifs
|
## Stack Technique et Patterns 🛠
|
||||||
|
|
||||||
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).
|
### Technologies Utilisées 💻
|
||||||
|
|
||||||
## Stack & patterns
|
- **Framework**: Angular 20 avec composants standalone et mode strict. :angular:
|
||||||
|
- **Réactivité**: Signals pour une gestion d’état réactive. 📶
|
||||||
|
- **HTTP & Observables**: RxJS pour les appels asynchrones. 🚀
|
||||||
|
- **Styling**: Tailwind CSS via CDN pour un design rapide et réactif. 🖌
|
||||||
|
- **Proxy**: Configuration pour gérer le CORS en développement. 🌐
|
||||||
|
|
||||||
- Angular 20 (standalone components, strict mode)
|
### Patterns de Développement ⚙️
|
||||||
- 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 la readiness des providers.
|
||||||
|
- Mappers pour normaliser les réponses des APIs.
|
||||||
|
- Effets Angular pour des mises à jour réactives. 🔁
|
||||||
|
- Recherche côté serveur pour les pages comme 'Liked videos'. 🔍
|
||||||
|
|
||||||
- Contrôle centralisé de « readiness » dans `src/services/instance.service.ts`
|
## Prérequis :checklist:
|
||||||
- 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
|
### Étapes d'Installation 🔧
|
||||||
|
|
||||||
- Node.js (version récente LTS)
|
1. Installer Node.js (LTS). :node:
|
||||||
- Aucune installation globale d’Angular CLI n’est requise: elle est fournie en dépendance du projet
|
2. Exécuter `npm install` pour les dépendances. 📦
|
||||||
|
3. Copier et configurer `assets/config.local.example.js` en `assets/config.local.js`. 🔑
|
||||||
|
4. Lancer avec `npm run dev`. :play_button:
|
||||||
|
|
||||||
## Installation & lancement
|
### Lancement en Développement 💻
|
||||||
|
|
||||||
1. Installer les dépendances
|
- `npm run dev` pour démarrer le serveur Angular. :play_button:
|
||||||
|
|
||||||
```bash
|
### Build de Production 📦
|
||||||
npm install
|
|
||||||
```
|
|
||||||
2. Copier la configuration locale et renseigner vos clés si nécessaire
|
|
||||||
|
|
||||||
```bash
|
- `npm run build` pour compiler l'app. 🔨
|
||||||
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
|
## Déploiement avec Docker 🐳
|
||||||
npm run dev
|
|
||||||
```
|
|
||||||
|
|
||||||
- Par défaut: http://localhost:4200
|
- Construire l'image: `docker build -t newtube:latest .`.
|
||||||
4. Build de production
|
- Lancer: `docker compose up -d`.
|
||||||
|
|
||||||
```bash
|
### Variables d'Environnement ⚙️
|
||||||
npm run build
|
|
||||||
```
|
|
||||||
|
|
||||||
## Déploiement Docker
|
- `PORT`, `NODE_ENV`, `TWITCH_CLIENT_ID`, etc. 🔒
|
||||||
|
|
||||||
Cette app peut tourner dans un unique conteneur Node qui sert l’API Express et le build Angular (dossier `dist/`).
|
## Proxies pour le Développement 🌐
|
||||||
|
|
||||||
### Construction de l’image
|
- Configurés dans `proxy.conf.json` pour contourner le CORS. 🛡
|
||||||
|
|
||||||
```bash
|
## Utilisation Rapide 🚀
|
||||||
docker build -t newtube:latest .
|
|
||||||
```
|
|
||||||
|
|
||||||
### Lancement avec docker-compose
|
- Sélectionnez un provider et recherchez. 🔍
|
||||||
|
- Explorez les tendances ou vos vidéos aimées. ❤️
|
||||||
|
|
||||||
```bash
|
## État des Fonctionnalités :checklist:
|
||||||
docker compose up -d
|
|
||||||
```
|
|
||||||
|
|
||||||
Par défaut:
|
- [X] Readiness des providers. :check_mark_button:
|
||||||
|
- [X] Barre de recherche sur 'Liked videos'. :search:
|
||||||
|
- [ ] Tests unitaires. :test_tube:
|
||||||
|
|
||||||
- Frontend + API disponibles sur `http://localhost:4000`
|
## Roadmap et TODO 🎯
|
||||||
- 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
|
### Prochaines Étapes ▶️
|
||||||
|
|
||||||
- `PORT` (defaut: `4000`)
|
- Ajouter un bandeau pour les providers non configurés. ⚠️
|
||||||
- `NODE_ENV` (`production` en conteneur)
|
- Implémenter des tests unitaires. :test_tube:
|
||||||
- `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:
|
### Priorités 🔥
|
||||||
|
|
||||||
- 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.
|
- Améliorer les intégrations provider. 🌐
|
||||||
- Le chemin des cookies d’auth côté API s’adapte automatiquement: `/api` en production (Docker), `/proxy/api` en dev local.
|
- Ajouter des fonctionnalités avancées. 🚀
|
||||||
|
|
||||||
## Configuration des providers (clés/API)
|
## Scripts NPM 📦
|
||||||
|
|
||||||
La configuration locale est lue depuis `assets/config.local.js` (non versionné). Exemple:
|
## Notes de Sécurité et Bonnes Pratiques 🔒
|
||||||
|
|
||||||
```html
|
- Ne pas versionner les clés API. ⛔️
|
||||||
<script>
|
- Restreindre les clés par referer. 🛡
|
||||||
// YouTube (clé Data API v3, restreinte par referer HTTP)
|
- Gérer les erreurs avec des messages clairs. ℹ️
|
||||||
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.
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user