Qu'est-ce que c'est ?
J'ai créé Video Chain Player, une application web qui vous permet de « chaîner uniquement les segments nécessaires de vidéos et de les lire/partager comme une expérience unique. »
🔗 Essayez maintenant : https://video-chain-player.sloth255.com/
- Découpez une vidéo en spécifiant les heures de début et de fin
- Chaînez (mettez en file d'attente) plusieurs clips pour une lecture continue
- Encodez l'état de la chaîne dans une URL et partagez en un seul lien
Parfait pour créer des expériences « montrer uniquement cette partie » comme des flux d'entraînement, des points forts de cours ou des compilations.
Ce que les utilisateurs peuvent faire
- Créer des clips : Ajouter des vidéos en entrant l'URL/ID et les temps de début/fin
- Réordonner : Ajuster la séquence par glisser-déposer
- Prévisualiser : Lire sur place pour vérifier le timing
- Partager : Copier l'URL et l'envoyer (les destinataires ouvrent la même chaîne)
- Multilingue : Changer de langue via URL (par exemple,
?lang=ja)
Stack technique
| Domaine | Technologie | Notes |
|---|---|---|
| Frontend | React 18 + TypeScript | Maintenabilité de l'UI et sécurité des types |
| Build/Serveur de dev | Vite | HMR rapide, excellente DX |
| Routing | React Router v6 | Exprimer l'état via chemin + requête |
| Gestion d'état | Zustand | Léger, adapté à la synchronisation URL |
| UI Drag & Drop | @dnd-kit | Implémenter la réorganisation |
| Lecteur vidéo | react-youtube (IFrame Player API) | Lecture embarquée rapide |
| i18n | i18next + react-i18next | Traduire toutes les chaînes UI |
| Chargement des traductions | i18next-http-backend | Fetch au runtime depuis /public/locales/... |
| Détection de langue | i18next-browser-languagedetector | Priorité : ?lang= / localStorage / navigateur |
| Analytics | GA4 (gtag) | SPA page_view + événements personnalisés |
| Hébergement | S3 Static Site + CloudFront | Distribution CDN |
| IaC | AWS SAM Template | Gérer S3/CloudFront en tant que code |
| CI/CD | GitHub Actions + OIDC | Déployer sans clés à long terme |
| Tests | Vitest + Testing Library | Tester composants/logique |
| Lint/Format | ESLint + Prettier | Prévenir les changements cassants |
Architecture et points d'implémentation notables
1) Synchroniser l'état Zustand avec l'URL pour un partage instantané
Pour minimiser la friction de partage, j'ai conçu l'application pour encoder les informations essentielles de la chaîne dans l'URL.
- Pas de stockage côté serveur (pas de compte nécessaire)
- Les destinataires peuvent reproduire le même état en ouvrant simplement le lien
Pour éviter le gonflement de l'URL (qui rend le partage difficile), j'ai minimisé les informations encodées dans l'URL.
- Encoder uniquement l'
idde la vidéo et les tempsstart/end - Compléter les titres et miniatures plus tard pour l'affichage (évite le gonflement de l'URL)
Exemple d'encodage minimal :
// Encoder uniquement les infos essentielles (id/start/end) dans l'URL
const minimalSegments = segments.map(({ id, start, end }) => ({ id, start, end }));
De plus, les liens partagés n'incluent pas la position de lecture (quel clip est en cours de lecture), garantissant que « l'ouverture du lien commence depuis le début. »
2) Chargement i18n au runtime via HTTP Backend (indépendant du build)
Initialement, j'ai envisagé d'importer les JSON de traduction au moment du build, mais pour une meilleure compatibilité avec l'hébergement statique et le CI, j'ai opté pour un fetch via HTTP depuis /public/locales/{{lng}}/translation.json.
- Facile à maintenir — il suffit d'ajouter des fichiers de langue
- Le processus de build ne dépend pas des imports de traductions
3) Gérer les variations d'URL de manière robuste (watch / Shorts / embed)
Supporter « uniquement les URLs standard » serait gênant, donc j'ai étendu les patterns d'entrée :
- URLs watch standard
- Shorts
- URLs embed
En conséquence, le taux de succès « coller simplement » a augmenté, rendant l'enregistrement en lot beaucoup plus facile.
4) Déploiement : S3 + CloudFront, CI : GitHub Actions (OIDC)
Comme il s'agit d'un site statique, le déploiement est simple :
- S3 (hébergement statique)
- CloudFront (CDN)
Le CI/CD est automatisé via GitHub Actions : build → synchronisation S3 → invalidation du cache CloudFront.
Le point clé est OIDC, permettant le déploiement sans stocker de clés à long terme (minimisant les Secrets tout en maintenant un contrôle au niveau de l'environnement).
Même pour les sites statiques, mettre CloudFront en frontal offre :
- Chargement rapide via le caching
- Assistance facile au routage SPA (par exemple, fallback vers
/)
Résumé
Video Chain Player se concentre sur « clips × lecture continue × partage par URL », avec l'accent mis sur :
- L'encodage de l'état dans les URLs pour minimiser la friction de partage
- i18n + synchronisation de langue URL pour que les destinataires voient la même langue
- Le rendre « prêt pour la production » y compris le déploiement et les analytics
Techniquement, j'ai pu combiner :
- Développement rapide avec Vite
- Synchronisation de l'état Zustand vers les URLs pour une meilleure partageabilité
- Gestion légère des traductions avec le backend HTTP d'i18next
- Déploiement sécurisé avec OIDC
Construire cette « stack opérationnelle complète » en une seule fois a été le point fort.