@telefonica/mistica 16.64.0 → 16.66.0

package/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,

package/src/navigation-bar.css.ts

@@ -312,7 +312,7 @@ export const navigationBarContentRightExpanded = style([
         flex: 1,
     }),
     {
-        paddingLeft: 136,
+        paddingLeft: 56,
     },
 ]);
 

package/src/package-version.tsx

@@ -1,2 +1,2 @@
 // DO NOT EDIT THIS FILE. It's autogenerated by set-version.js
-export const PACKAGE_VERSION = '16.64.0' as string;
+export const PACKAGE_VERSION = '16.66.0' as string;

package/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,6 +127,12 @@ 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>(
@@ -123,6 +140,7 @@ 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') {