Studio, faire évoluer une interface vidéo métier dans la durée

Studio permet aux opérateurs de segmenter les vidéos en chapitres, de revoir, corriger et valider les suggestions générées par l'IA, puis de publier les résultats validés vers les systèmes des clients.

Au fil des années, Studio est devenu l'espace de travail commun à plusieurs produits, comme Smart Ad-Breaks, Smart Thumbnails ou Smart Binge, avec des usages et des règles propres à chacun.

Studio doit permettre aux opérateurs de travailler rapidement et précisément sur des contenus parfois longs et complexes. L'interface se rapproche pour cela des logiciels de montage vidéo professionnels : timeline interactive, nombreux raccourcis clavier, navigation image par image et modifications sauvegardées au fur et à mesure.

L'enjeu est d'intégrer de nouveaux usages et de nouveaux produits sans ralentir l'interface ni bousculer les habitudes des opérateurs. Cela demande aussi de garder synchronisés tous les éléments qui dépendent de la position courante dans la vidéo : le lecteur, la timeline et les outils d'édition.

Nous avons travaillé sur les interactions qui structurent le quotidien des opérateurs. Studio reprend de nombreux usages des logiciels de montage : raccourcis clavier pour naviguer dans la vidéo et éditer les contenus, navigation image par image, timecodes SMPTE, zone de travail, lecture avant un marqueur, vu-mètre et prise en charge de contrôleurs jog/shuttle.

La timeline organise les différents objets en pistes, comme les coupures publicitaires, les chapitres ou les personnalités. Son niveau de détail s'adapte au zoom, afin de passer d'une vue d'ensemble à une navigation précise tout en conservant une manipulation fluide des marqueurs.

Pour que ces usages restent confortables à distance, le lecteur s'appuie sur une version proxy de la vidéo, qui limite la quantité de données transférées. Son accès est protégé par des URL signées.

Nous avons porté la même attention aux sauvegardes et à la publication. Les modifications sont enregistrées au fur et à mesure dans une file d'attente, reprises en cas d'interruption et leur état reste visible dans l'interface. La publication est bloquée tant qu'une sauvegarde est en cours. Une fois la validation terminée, les résultats sont envoyés en arrière-plan vers les systèmes des clients, pendant que l'opérateur peut continuer à travailler.

De nombreux états de l'application dépendent de la position courante dans la vidéo, qui évolue en continu pendant la lecture. La fréquence de ces mises à jour représente un enjeu important de performance. Nous avons structuré leur gestion autour d'un store Redux et travaillé la manière dont elles se propagent dans l'interface afin de préserver la réactivité du lecteur, de la timeline et des outils d'édition.

Cette architecture a ensuite évolué progressivement avec les migrations de React, l'adoption de Redux Toolkit et RTK Query, ainsi que l'intégration du design system partagé.

J'ai été particulièrement impliqué dans la conception et le développement de la timeline, du lecteur vidéo et des parcours de sauvegarde et de publication.

J'ai posé les fondations de la version actuelle du front et contribué aux principaux choix technologiques, notamment autour de la gestion de l'état et des données. J'ai ensuite accompagné cette architecture dans la durée, au fil des migrations de React, des besoins de performance et de l'intégration du design system.

Ce travail s'est fait en lien avec les équipes produit et les utilisateurs. J'ai aussi contribué à la mise en place de tests fonctionnels avec Playwright pour fiabiliser les principaux parcours de l'application.

Studio réunit aujourd'hui dans une même interface la segmentation, la revue, la validation et la publication. Cette base commune accompagne plusieurs produits tout en conservant des parcours adaptés à chacun et un environnement de travail précis, fluide et fiable pour les opérateurs.