ACCOUNT-30901 add support for tracks in video component (#1540)

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: andyindahouse

src/__stories__/story.d.ts

@@ -9,3 +9,4 @@ declare type StoryComponent<T = {children?: ReactNode}> = {(props: T): JSX.Eleme
 declare module '*.jpg';
 declare module '*.png';
 declare module '*.mp4';
+declare module '*.vtt';

src/__stories__/video-story.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import {Stack, ButtonPrimary, Inline, Video, Text3, Title3} from '..';
 import beachVideo from './videos/beach.mp4';
+import subtitlesExampleEn from './videos/test-subtitles-en.vtt';
+import subtitlesExampleEs from './videos/test-subtitles-es.vtt';
 import beachImg from './images/beach.jpg';
 
 import type {AspectRatio} from '../video';
@@ -40,6 +42,8 @@ export default {
 
 const VIDEO_SRC = beachVideo;
 const POSTER_SRC = beachImg;
+const SUBTITLES_SRC_EN = subtitlesExampleEn;
+const SUBTITLES_SRC_ES = subtitlesExampleEs;
 
 type Args = {
     type: 'width and height' | 'width and aspect ratio' | 'full width';
@@ -60,8 +64,20 @@ export const Default: StoryComponent<Args> = ({
     poster,
     emptySource,
 }) => {
+    const [enSubtitlesVisible, setEnSubtitlesVisible] = React.useState(true);
+    const [esSubtitlesVisible, setEsSubtitlesVisible] = React.useState(false);
     const videoRef = React.useRef<VideoElement>(null);
 
+    const toggleSubtitles = (index: number) => {
+        const next = index === 0 ? !enSubtitlesVisible : !esSubtitlesVisible;
+        videoRef.current?.setTrackMode(index, next ? 'showing' : 'disabled');
+        if (index === 0) {
+            setEnSubtitlesVisible(next);
+        } else {
+            setEsSubtitlesVisible(next);
+        }
+    };
+
     const props = {
         width: type !== 'full width' ? width : undefined,
         height: type === 'width and height' ? height : undefined,
@@ -76,7 +92,28 @@ export const Default: StoryComponent<Args> = ({
         dataAttributes: {testid: 'video'},
     };
 
-    const video = <Video src={!emptySource ? VIDEO_SRC : ''} {...props} ref={videoRef} />;
+    const video = (
+        <Video
+            src={!emptySource ? VIDEO_SRC : ''}
+            {...props}
+            ref={videoRef}
+            tracks={[
+                {
+                    src: SUBTITLES_SRC_EN,
+                    kind: 'subtitles',
+                    srcLang: 'en',
+                    label: 'English',
+                    default: true,
+                },
+                {
+                    src: SUBTITLES_SRC_ES,
+                    kind: 'subtitles',
+                    srcLang: 'es',
+                    label: 'Spanish',
+                },
+            ]}
+        />
+    );
 
     return (
         <Stack space={32}>
@@ -123,6 +160,12 @@ export const Default: StoryComponent<Args> = ({
                     >
                         Stop
                     </ButtonPrimary>
+                    <ButtonPrimary small onPress={() => toggleSubtitles(0)}>
+                        {enSubtitlesVisible ? 'Hide EN subtitles' : 'Show EN subtitles'}
+                    </ButtonPrimary>
+                    <ButtonPrimary small onPress={() => toggleSubtitles(1)}>
+                        {esSubtitlesVisible ? 'Hide ES subtitles' : 'Show ES subtitles'}
+                    </ButtonPrimary>
                 </Inline>
 
                 {video}

src/__stories__/videos/test-subtitles-en.vtt

@@ -0,0 +1,13 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:03.000
+This is the first subtitle
+
+00:00:03.000 --> 00:00:06.000
+This is the second subtitle
+
+00:00:06.000 --> 00:00:09.000
+This is the third subtitle
+
+00:00:09.000 --> 00:00:12.000
+Testing subtitles

src/__stories__/videos/test-subtitles-es.vtt

@@ -0,0 +1,13 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:03.000
+Este es el primer subtitulo
+
+00:00:03.000 --> 00:00:06.000
+Este es el segundo subtitulo
+
+00:00:06.000 --> 00:00:09.000
+Este es el tercer subtitulo
+
+00:00:09.000 --> 00:00:12.000
+Testeando subtitulos

src/index.tsx

@@ -127,7 +127,7 @@ export {
 export {default as Image} from './image';
 export {default as Chip} from './chip';
 export {default as Video} from './video';
-export type {VideoElement} from './video';
+export type {VideoElement, VideoTrack} from './video';
 export {
     Carousel,
     CenteredCarousel,

src/video.tsx

@@ -72,6 +72,15 @@ type VideoSourceWithType = {
     type?: string; // video/webm, video/mp4...
 };
 
+export type VideoTrack = {
+    src: string;
+    kind: 'subtitles' | 'captions';
+    /** https://developer.mozilla.org/en-US/docs/Glossary/BCP_47_language_tag */
+    srcLang: string;
+    label?: string;
+    default?: boolean;
+};
+
 export type VideoSource =
     | string
     | ReadonlyArray<string>
@@ -103,6 +112,8 @@ export type VideoProps = {
     onPause?: () => void;
     onLoad?: () => void;
     poster?: string;
+    /** text track elements for subtitles and captions */
+    tracks?: ReadonlyArray<VideoTrack>;
     children?: void;
     /** defaults to none */
     preload?: 'none' | 'metadata' | 'auto';
@@ -116,13 +127,20 @@ export interface VideoElement extends HTMLDivElement {
     /** Stops the video and shows the poster image (if available) */
     stop: () => void;
     setCurrentTime: (time: number) => void;
+    /**
+     * Sets the display mode of a track by its index.
+     * - 'showing': track is visible
+     * - 'disabled': track is inactive
+     */
+    setTrackMode: (index: number, mode: 'showing' | 'disabled') => void;
 }
 
 const Video = React.forwardRef<VideoElement, VideoProps>(
     (
         {
             src,
             poster,
+            tracks,
             autoPlay = 'when-loaded',
             muted = true,
             loop = true,
@@ -210,6 +228,7 @@ const Video = React.forwardRef<VideoElement, VideoProps>(
                 disableRemotePlayback
                 muted={muted}
                 loop={loop}
+                crossOrigin={tracks?.length ? 'anonymous' : undefined}
                 className={classNames(styles.video, mediaStyles.defaultBorderRadius)}
                 preload={preload}
                 onError={handleError}
@@ -242,6 +261,16 @@ const Video = React.forwardRef<VideoElement, VideoProps>(
                 {sources.map(({src, type}, index) => (
                     <source key={index} src={src} type={type} />
                 ))}
+                {tracks?.map(({src, kind, srcLang, label, default: isDefault}, index) => (
+                    <track
+                        key={index}
+                        src={src}
+                        kind={kind}
+                        srcLang={srcLang}
+                        label={label}
+                        default={isDefault}
+                    />
+                ))}
             </video>
         );
 
@@ -326,6 +355,13 @@ const Video = React.forwardRef<VideoElement, VideoProps>(
                                     dispatch('stop');
                                 }
                             };
+                            containerElement.setTrackMode = (index: number, mode: 'showing' | 'disabled') => {
+                                const trackElements = videoRef.current?.querySelectorAll('track');
+                                const trackElement = trackElements?.[index] as HTMLTrackElement | undefined;
+                                if (trackElement?.track) {
+                                    trackElement.track.mode = mode;
+                                }
+                            };
                         }
 
                         if (typeof ref === 'function') {