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
|
||||
- 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)
|
||||
### Nouveautés Récentes ✨
|
||||
|
||||
---
|
||||
- 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)
|
||||
- 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`)
|
||||
### Patterns de Développement ⚙️
|
||||
|
||||
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`
|
||||
- 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 :checklist:
|
||||
|
||||
## Pré‑requis
|
||||
### Étapes d'Installation 🔧
|
||||
|
||||
- Node.js (version récente LTS)
|
||||
- Aucune installation globale d’Angular CLI n’est requise: elle est fournie en dépendance du projet
|
||||
1. Installer Node.js (LTS). :node:
|
||||
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
|
||||
npm install
|
||||
```
|
||||
2. Copier la configuration locale et renseigner vos clés si nécessaire
|
||||
### Build de Production 📦
|
||||
|
||||
```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
|
||||
- `npm run build` pour compiler l'app. 🔨
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
## Déploiement avec Docker 🐳
|
||||
|
||||
- Par défaut: http://localhost:4200
|
||||
4. Build de production
|
||||
- Construire l'image: `docker build -t newtube:latest .`.
|
||||
- Lancer: `docker compose up -d`.
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
### Variables d'Environnement ⚙️
|
||||
|
||||
## 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
|
||||
docker build -t newtube:latest .
|
||||
```
|
||||
## Utilisation Rapide 🚀
|
||||
|
||||
### Lancement avec docker-compose
|
||||
- Sélectionnez un provider et recherchez. 🔍
|
||||
- Explorez les tendances ou vos vidéos aimées. ❤️
|
||||
|
||||
```bash
|
||||
docker compose up -d
|
||||
```
|
||||
## État des Fonctionnalités :checklist:
|
||||
|
||||
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`
|
||||
- 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`
|
||||
## Roadmap et TODO 🎯
|
||||
|
||||
### Variables d’environnement utiles
|
||||
### Prochaines Étapes ▶️
|
||||
|
||||
- `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)
|
||||
- Ajouter un bandeau pour les providers non configurés. ⚠️
|
||||
- Implémenter des tests unitaires. :test_tube:
|
||||
|
||||
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.
|
||||
- Le chemin des cookies d’auth côté API s’adapte automatiquement: `/api` en production (Docker), `/proxy/api` en dev local.
|
||||
- Améliorer les intégrations provider. 🌐
|
||||
- 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
|
||||
<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.
|
||||
- Ne pas versionner les clés API. ⛔️
|
||||
- Restreindre les clés par referer. 🛡
|
||||
- Gérer les erreurs avec des messages clairs. ℹ️
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user