@kubit-ui-web/react-components 1.12.0 → 1.13.1

package/dist/esm/components/video/components/screenButtons.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { MediaButton } from '../../../components/mediaButton/mediaButton';
+import { useMediaDevice } from '../../../hooks';
+import { ScreenIconContainerStyled } from '../video.styled';
+export const ScreenButtons = (props) => {
+    const device = useMediaDevice();
+    return (_jsxs(_Fragment, { children: [!props.playing && (_jsx(ScreenIconContainerStyled, { styles: props.styles, children: props.styles.screenPlayLoadingIcon?.size?.[device] && (_jsx(MediaButton, { hasBackground: true, icon: props.screenPlayIcon, size: props.styles.screenPlayLoadingIcon?.size?.[device], variant: props.styles.screenPlayLoadingIcon?.variant, onClick: props.handlePlayStopVideo })) })), props.loading && (_jsx(ScreenIconContainerStyled, { styles: props.styles, children: props.styles.screenPlayLoadingIcon?.size?.[device] && (_jsx(MediaButton, { hasBackground: true, icon: props.screenLoadingIcon, size: props.styles.screenPlayLoadingIcon?.size?.[device], variant: props.styles.screenPlayLoadingIcon?.variant })) }))] }));
+};
+//# sourceMappingURL=screenButtons.js.map

package/dist/esm/components/video/components/screenButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"screenButtons.js","sourceRoot":"","sources":["../../../../../src/components/video/components/screenButtons.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAEnE,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzC,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAW5D,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAqB,EAAe,EAAE;IAClE,MAAM,MAAM,GAAG,cAAc,EAAE,CAAC;IAEhC,OAAO,CACL,8BACG,CAAC,KAAK,CAAC,OAAO,IAAI,CACjB,KAAC,yBAAyB,IAAC,MAAM,EAAE,KAAK,CAAC,MAAM,YAC5C,KAAK,CAAC,MAAM,CAAC,qBAAqB,EAAE,IAAI,EAAE,CAAC,MAAM,CAAC,IAAI,CACrD,KAAC,WAAW,IACV,aAAa,EAAE,IAAI,EACnB,IAAI,EAAE,KAAK,CAAC,cAAc,EAC1B,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,qBAAqB,EAAE,IAAI,EAAE,CAAC,MAAM,CAAwB,EAC/E,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,qBAAqB,EAAE,OAAO,EACpD,OAAO,EAAE,KAAK,CAAC,mBAAmB,GAClC,CACH,GACyB,CAC7B,EACA,KAAK,CAAC,OAAO,IAAI,CAChB,KAAC,yBAAyB,IAAC,MAAM,EAAE,KAAK,CAAC,MAAM,YAC5C,KAAK,CAAC,MAAM,CAAC,qBAAqB,EAAE,IAAI,EAAE,CAAC,MAAM,CAAC,IAAI,CACrD,KAAC,WAAW,IACV,aAAa,EAAE,IAAI,EACnB,IAAI,EAAE,KAAK,CAAC,iBAAiB,EAC7B,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,qBAAqB,EAAE,IAAI,EAAE,CAAC,MAAM,CAAwB,EAC/E,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,qBAAqB,EAAE,OAAO,GACpD,CACH,GACyB,CAC7B,IACA,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/video/components/subtitleFullScreenButtons.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { IElementOrIcon } from '../../../components/elementOrIcon/types/elementOrIcon';
+import { VideoStyleType } from '../types/videoTheme';
+interface IButtonBarSubtitles {
+    styles: VideoStyleType;
+    buttonsBarSubtitlesIcon: IElementOrIcon;
+    buttonsBarSubtitlesIconToTransition?: IElementOrIcon;
+    subtitlesActivated: boolean;
+    onSubtitlesClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+interface IButtonBarFullScreen {
+    styles: VideoStyleType;
+    buttonsBarFullScreenIcon: IElementOrIcon;
+    buttonsBarFullScreenIconToTransition?: IElementOrIcon;
+    fullScreen: boolean;
+    onFullScreenClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+interface ISubtitleFullScreenButtons extends IButtonBarSubtitles, IButtonBarFullScreen {
+    buttonsBarSubtitlesIconTooltip: JSX.Element | string;
+    buttonsBarFullScreenIconTooltip: JSX.Element | string;
+}
+export declare const SubtitleFullScreenButtons: (props: ISubtitleFullScreenButtons) => JSX.Element;
+export {};

package/dist/esm/components/video/components/subtitleFullScreenButtons.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { MediaButton } from '../../../components/mediaButton/mediaButton';
+import { TooltipUnControlled as Tooltip } from '../../../components/tooltip/tooltipUnControlled';
+import { useMediaDevice } from '../../../hooks/useMediaDevice/useMediaDevice';
+import { DeviceBreakpointsType } from '../../../types';
+export const SubtitleFullScreenButtons = (props) => {
+    const device = useMediaDevice();
+    const ButtonBarSubtitles = (props) => props.styles.buttonsBarSubtitlesIcon?.size?.[device] ? (_jsx(MediaButton, { hasBackground: false, icon: props.buttonsBarSubtitlesIcon, size: props.styles.buttonsBarSubtitlesIcon?.size?.[device], twisted: props.subtitlesActivated, twistedIcon: props.buttonsBarSubtitlesIconToTransition, variant: props.styles.buttonsBarSubtitlesIcon?.variant, onClick: props.onSubtitlesClick })) : null;
+    const ButtonBarFullScreen = (props) => props.styles.buttonsBarFullScreenIcon?.size?.[device] ? (_jsx(MediaButton, { hasBackground: false, icon: props.buttonsBarFullScreenIcon, size: props.styles.buttonsBarFullScreenIcon?.size?.[device], twisted: props.fullScreen, twistedIcon: props.buttonsBarFullScreenIconToTransition, variant: props.styles.buttonsBarFullScreenIcon?.variant, onClick: props.onFullScreenClick })) : null;
+    return device === DeviceBreakpointsType.DESKTOP ? (_jsxs(_Fragment, { children: [_jsx(Tooltip, { childrenAsButton: false, content: { content: props.buttonsBarSubtitlesIconTooltip }, tooltipAsModal: false, variant: props.styles.tooltip?.variant, children: _jsx(ButtonBarSubtitles, { ...props }) }), _jsx(Tooltip, { childrenAsButton: false, content: { content: props.buttonsBarFullScreenIconTooltip }, tooltipAsModal: false, variant: props.styles.tooltip?.variant, children: _jsx(ButtonBarFullScreen, { ...props }) })] })) : (_jsxs(_Fragment, { children: [_jsx(ButtonBarSubtitles, { ...props }), _jsx(ButtonBarFullScreen, { ...props })] }));
+};
+//# sourceMappingURL=subtitleFullScreenButtons.js.map

package/dist/esm/components/video/components/subtitleFullScreenButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"subtitleFullScreenButtons.js","sourceRoot":"","sources":["../../../../../src/components/video/components/subtitleFullScreenButtons.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAEnE,OAAO,EAAE,mBAAmB,IAAI,OAAO,EAAE,MAAM,0CAA0C,CAAC;AAC1F,OAAO,EAAE,cAAc,EAAE,MAAM,uCAAuC,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAyBhD,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAiC,EAAe,EAAE;IAC1F,MAAM,MAAM,GAAG,cAAc,EAAE,CAAC;IAEhC,MAAM,kBAAkB,GAAG,CAAC,KAA0B,EAAsB,EAAE,CAC5E,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CACrD,KAAC,WAAW,IACV,aAAa,EAAE,KAAK,EACpB,IAAI,EAAE,KAAK,CAAC,uBAAuB,EACnC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE,IAAI,EAAE,CAAC,MAAM,CAAwB,EACjF,OAAO,EAAE,KAAK,CAAC,kBAAkB,EACjC,WAAW,EAAE,KAAK,CAAC,mCAAmC,EACtD,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,uBAAuB,EAAE,OAAO,EACtD,OAAO,EAAE,KAAK,CAAC,gBAAgB,GAC/B,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;IAEX,MAAM,mBAAmB,GAAG,CAAC,KAA2B,EAAsB,EAAE,CAC9E,KAAK,CAAC,MAAM,CAAC,wBAAwB,EAAE,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CACtD,KAAC,WAAW,IACV,aAAa,EAAE,KAAK,EACpB,IAAI,EAAE,KAAK,CAAC,wBAAwB,EACpC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,wBAAwB,EAAE,IAAI,EAAE,CAAC,MAAM,CAAwB,EAClF,OAAO,EAAE,KAAK,CAAC,UAAU,EACzB,WAAW,EAAE,KAAK,CAAC,oCAAoC,EACvD,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,wBAAwB,EAAE,OAAO,EACvD,OAAO,EAAE,KAAK,CAAC,iBAAiB,GAChC,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;IAEX,OAAO,MAAM,KAAK,qBAAqB,CAAC,OAAO,CAAC,CAAC,CAAC,CAChD,8BACE,KAAC,OAAO,IACN,gBAAgB,EAAE,KAAK,EACvB,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,8BAA8B,EAAE,EAC1D,cAAc,EAAE,KAAK,EACrB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,OAAO,YAEtC,KAAC,kBAAkB,OAAK,KAAK,GAAI,GACzB,EACV,KAAC,OAAO,IACN,gBAAgB,EAAE,KAAK,EACvB,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,+BAA+B,EAAE,EAC3D,cAAc,EAAE,KAAK,EACrB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,OAAO,YAEtC,KAAC,mBAAmB,OAAK,KAAK,GAAI,GAC1B,IACT,CACJ,CAAC,CAAC,CAAC,CACF,8BACE,KAAC,kBAAkB,OAAK,KAAK,GAAI,EACjC,KAAC,mBAAmB,OAAK,KAAK,GAAI,IACjC,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/video/components/time.d.ts

@@ -0,0 +1,8 @@
+import { VideoStyleType } from '../types/videoTheme';
+interface ITime {
+    styles: VideoStyleType;
+    currentTime: number;
+    duration: number;
+}
+export declare const Time: (props: ITime) => JSX.Element;
+export {};

package/dist/esm/components/video/components/time.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from '../../../components/text/text';
+import { TextComponentType } from '../../../components/text/types/component';
+import { videoFormatTime } from '../../../utils/time/time';
+export const Time = (props) => {
+    return (_jsx(Text, { component: TextComponentType.SPAN, customTypography: props.styles.videoDuration, children: videoFormatTime(props.currentTime, props.duration) }));
+};
+//# sourceMappingURL=time.js.map

package/dist/esm/components/video/components/time.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time.js","sourceRoot":"","sources":["../../../../../src/components/video/components/time.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAUpD,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,KAAY,EAAe,EAAE;IAChD,OAAO,CACL,KAAC,IAAI,IAAC,SAAS,EAAE,iBAAiB,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,YAClF,eAAe,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,GAC9C,CACR,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/video/components/videoSkeleton.d.ts

@@ -0,0 +1,8 @@
+import { VideoStyleType } from '../types/videoTheme';
+interface IVideoSkeleton {
+    styles: VideoStyleType;
+    skeletonText?: string;
+    dataTestIdVideoSkeleton?: string;
+}
+export declare const VideoSkeleton: (props: IVideoSkeleton) => JSX.Element;
+export {};

package/dist/esm/components/video/components/videoSkeleton.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScreenReaderOnly } from '../../../components/screenReaderOnly';
+import { Skeleton } from '../../../components/skeleton';
+import { ButtonsSkeletonContainerStyled, VideoSkeletonContainerStyled } from '../video.styled';
+export const VideoSkeleton = (props) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(VideoSkeletonContainerStyled, { styles: props.styles, children: [props.styles.videoSkeleton?.variant &&
+                        props.styles.videoSkeleton?.height &&
+                        props.styles.videoSkeleton?.width && (_jsx(Skeleton, { dataTestId: props.dataTestIdVideoSkeleton, height: props.styles.videoSkeleton?.height, shapeVariant: props.styles.videoSkeleton?.shapeVariant, variant: props.styles.videoSkeleton?.variant, width: props.styles.videoSkeleton?.width })), _jsx(ButtonsSkeletonContainerStyled, { styles: props.styles, children: props.styles.buttonSkeleton?.variant &&
+                            props.styles.buttonSkeleton?.height &&
+                            props.styles.buttonSkeleton?.width && (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: props.styles.buttonSkeleton?.height, shapeVariant: props.styles.buttonSkeleton?.shapeVariant, variant: props.styles.buttonSkeleton?.variant, width: props.styles.buttonSkeleton?.width }), _jsx(Skeleton, { height: props.styles.buttonSkeleton?.height, shapeVariant: props.styles.buttonSkeleton?.shapeVariant, variant: props.styles.buttonSkeleton?.variant, width: props.styles.buttonSkeleton?.width })] })) })] }), _jsx(ScreenReaderOnly, { children: props.skeletonText })] }));
+};
+//# sourceMappingURL=videoSkeleton.js.map

package/dist/esm/components/video/components/videoSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"videoSkeleton.js","sourceRoot":"","sources":["../../../../../src/components/video/components/videoSkeleton.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EAAE,8BAA8B,EAAE,4BAA4B,EAAE,MAAM,iBAAiB,CAAC;AAQ/F,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAqB,EAAe,EAAE;IAClE,OAAO,CACL,8BACE,MAAC,4BAA4B,IAAC,MAAM,EAAE,KAAK,CAAC,MAAM,aAC/C,KAAK,CAAC,MAAM,CAAC,aAAa,EAAE,OAAO;wBAClC,KAAK,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM;wBAClC,KAAK,CAAC,MAAM,CAAC,aAAa,EAAE,KAAK,IAAI,CACnC,KAAC,QAAQ,IACP,UAAU,EAAE,KAAK,CAAC,uBAAuB,EACzC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,EAAE,MAAM,EAC1C,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,EAAE,YAAY,EACtD,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,EAAE,OAAO,EAC5C,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,aAAa,EAAE,KAAK,GACxC,CACH,EACH,KAAC,8BAA8B,IAAC,MAAM,EAAE,KAAK,CAAC,MAAM,YACjD,KAAK,CAAC,MAAM,CAAC,cAAc,EAAE,OAAO;4BACnC,KAAK,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM;4BACnC,KAAK,CAAC,MAAM,CAAC,cAAc,EAAE,KAAK,IAAI,CACpC,8BACE,KAAC,QAAQ,IACP,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,EAC3C,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,EAAE,YAAY,EACvD,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,EAAE,OAAO,EAC7C,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,EAAE,KAAK,GACzC,EACF,KAAC,QAAQ,IACP,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,EAC3C,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,EAAE,YAAY,EACvD,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,EAAE,OAAO,EAC7C,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,EAAE,KAAK,GACzC,IACD,CACJ,GAC4B,IACJ,EAC/B,KAAC,gBAAgB,cAAE,KAAK,CAAC,YAAY,GAAoB,IACxD,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/video/components/volume.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { IElementOrIcon } from '../../../components/elementOrIcon';
+import { VideoStyleType } from '../types/videoTheme';
+interface IVolume {
+    styles: VideoStyleType;
+    buttonsBarVolumeIcon: IElementOrIcon;
+    buttonsBarVolumeIconTooltip: JSX.Element | string;
+    buttonsBarVolumeIconToTransition?: IElementOrIcon;
+    volume: string;
+    volumeBarAriaLabel?: string;
+    onVolumeButtonClick?: React.MouseEventHandler<HTMLButtonElement>;
+    onVolumeChange?: React.ChangeEventHandler<HTMLInputElement>;
+    dataTestIdVolumeInput?: string;
+}
+interface IButtonBarVolume {
+    styles: VideoStyleType;
+    buttonsBarVolumeIcon: IElementOrIcon;
+    buttonsBarVolumeIconToTransition?: IElementOrIcon;
+    volume: string;
+    volumeBarAriaLabel?: string;
+    onVolumeButtonClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+interface IVolumeInput {
+    styles: VideoStyleType;
+    volume: string;
+    volumeBarAriaLabel?: string;
+    dataTestIdVolumeInput?: string;
+    onVolumeChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+interface IVolume extends IButtonBarVolume, IVolumeInput {
+    buttonsBarVolumeIconTooltip: JSX.Element | string;
+}
+export declare const Volume: (props: IVolume) => JSX.Element;
+export {};

package/dist/esm/components/video/components/volume.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { MediaButton } from '../../../components/mediaButton/mediaButton';
+import { TooltipUnControlled as Tooltip } from '../../../components/tooltip/tooltipUnControlled';
+import { useMediaDevice } from '../../../hooks';
+import { DeviceBreakpointsType } from '../../../types';
+import { VolumeContainerStyled } from '../video.styled';
+export const Volume = (props) => {
+    const device = useMediaDevice();
+    const ButtonBarVolume = props.styles.buttonsBarVolumeIcon?.size?.[device] ? (_jsx(MediaButton, { hasBackground: false, icon: props.buttonsBarVolumeIcon, size: props.styles.buttonsBarVolumeIcon?.size?.[device], twisted: props.volume === '0', twistedIcon: props.buttonsBarVolumeIconToTransition, variant: props.styles.buttonsBarVolumeIcon?.variant, onClick: props.onVolumeButtonClick })) : null;
+    const VolumeInput = (_jsx(VolumeContainerStyled, { "aria-label": props.volumeBarAriaLabel, "data-testid": props.dataTestIdVolumeInput, max: "100", min: "0", styles: props.styles, type: "range", value: props.volume, onChange: props.onVolumeChange }));
+    return device === DeviceBreakpointsType.DESKTOP ? (_jsxs(_Fragment, { children: [_jsx(Tooltip, { childrenAsButton: false, content: { content: props.buttonsBarVolumeIconTooltip }, tooltipAsModal: false, variant: props.styles.tooltip?.variant, children: ButtonBarVolume }), VolumeInput] })) : (_jsxs(_Fragment, { children: [ButtonBarVolume, VolumeInput] }));
+};
+//# sourceMappingURL=volume.js.map

package/dist/esm/components/video/components/volume.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume.js","sourceRoot":"","sources":["../../../../../src/components/video/components/volume.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAEnE,OAAO,EAAE,mBAAmB,IAAI,OAAO,EAAE,MAAM,0CAA0C,CAAC;AAC1F,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAGhD,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAmCxD,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,KAAc,EAAe,EAAE;IACpD,MAAM,MAAM,GAAG,cAAc,EAAE,CAAC;IAEhC,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,oBAAoB,EAAE,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAC1E,KAAC,WAAW,IACV,aAAa,EAAE,KAAK,EACpB,IAAI,EAAE,KAAK,CAAC,oBAAoB,EAChC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,oBAAoB,EAAE,IAAI,EAAE,CAAC,MAAM,CAAwB,EAC9E,OAAO,EAAE,KAAK,CAAC,MAAM,KAAK,GAAG,EAC7B,WAAW,EAAE,KAAK,CAAC,gCAAgC,EACnD,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,oBAAoB,EAAE,OAAO,EACnD,OAAO,EAAE,KAAK,CAAC,mBAAmB,GAClC,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,WAAW,GAAG,CAClB,KAAC,qBAAqB,kBACR,KAAK,CAAC,kBAAkB,iBACvB,KAAK,CAAC,qBAAqB,EACxC,GAAG,EAAC,KAAK,EACT,GAAG,EAAC,GAAG,EACP,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,CAAC,MAAM,EACnB,QAAQ,EAAE,KAAK,CAAC,cAAc,GAC9B,CACH,CAAC;IACF,OAAO,MAAM,KAAK,qBAAqB,CAAC,OAAO,CAAC,CAAC,CAAC,CAChD,8BACE,KAAC,OAAO,IACN,gBAAgB,EAAE,KAAK,EACvB,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,CAAC,2BAA2B,EAAE,EACvD,cAAc,EAAE,KAAK,EACrB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,OAAO,YAErC,eAAe,GACR,EACT,WAAW,IACX,CACJ,CAAC,CAAC,CAAC,CACF,8BACG,eAAe,EACf,WAAW,IACX,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/video/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export { VideoStandAlone } from './videoStandAlone';
+export { VideoControlled } from './videoControlled';
+export { VideoUnControlled as Video } from './videoUnControlled';

package/dist/esm/components/video/index.js

@@ -0,0 +1,5 @@
+export * from './types';
+export { VideoStandAlone } from './videoStandAlone';
+export { VideoControlled } from './videoControlled';
+export { VideoUnControlled as Video } from './videoUnControlled';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/video/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/video/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AAExB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,iBAAiB,IAAI,KAAK,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/esm/components/video/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './video';
+export type { VideoStylesType, VideoStyleType, MediaButtonType, SkeletonType } from './videoTheme';

package/dist/esm/components/video/types/index.js

@@ -0,0 +1,2 @@
+export * from './video';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/video/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/video/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/esm/components/video/types/video.d.ts

@@ -0,0 +1,96 @@
+import { IButton } from '../../../components/button';
+import { IElementOrIcon } from '../../../components/elementOrIcon';
+import { LinkTargetType } from '../../../components/link';
+import { GenericLinkType } from '../../../provider/genericComponents';
+import { CustomTokenTypes } from '../../../types';
+import { TrackKindType, VideoType } from '../../../types/video';
+import { VideoStyleType } from './videoTheme';
+export declare enum LinkAndActionButtonAlignment {
+    LEFT = "flex-start",
+    CENTER = "center",
+    RIGHT = "flex-end"
+}
+export type VideoButtonType = Omit<IButton, 'children' | 'variant' | 'size'> & {
+    content: string;
+    variant?: string;
+    size?: string;
+};
+export interface IVideoStandAlone {
+    videoSrc: string;
+    styles: VideoStyleType;
+    posterUrl?: string;
+    videoType: VideoType;
+    trackKind?: TrackKindType;
+    trackLabel?: string;
+    trackSrc?: string;
+    trackSrcLang?: string;
+    screenPlayIcon: IElementOrIcon;
+    screenLoadingIcon: IElementOrIcon;
+    showButtonsBar?: boolean;
+    buttonsBarPlayIcon: IElementOrIcon;
+    buttonsBarPlayIconTooltip: JSX.Element | string;
+    buttonsBarPlayIconToTransition: IElementOrIcon;
+    buttonsBarVolumeIcon: IElementOrIcon;
+    buttonsBarVolumeIconTooltip: JSX.Element | string;
+    buttonsBarVolumeIconToTransition?: IElementOrIcon;
+    volumeBarAriaLabel?: string;
+    buttonsBarSubtitlesIcon: IElementOrIcon;
+    buttonsBarSubtitlesIconTooltip: JSX.Element | string;
+    buttonsBarSubtitlesIconToTransition?: IElementOrIcon;
+    buttonsBarFullScreenIcon: IElementOrIcon;
+    buttonsBarFullScreenIconTooltip: JSX.Element | string;
+    buttonsBarFullScreenIconToTransition?: IElementOrIcon;
+    linkAndActionButtonAlignment?: LinkAndActionButtonAlignment;
+    videoRef: React.RefObject<HTMLVideoElement>;
+    videoContainerRef: React.RefObject<HTMLDivElement>;
+    fullScreen: boolean;
+    autoFullScreen?: boolean;
+    playing: boolean;
+    loading: boolean;
+    subtitlesActivated: boolean;
+    volume: string;
+    currentTime: number;
+    duration: number;
+    barAriaLabel?: string;
+    actionButton?: VideoButtonType;
+    linkText?: string;
+    linkUrl?: string;
+    linkTarget?: LinkTargetType;
+    componentLink: GenericLinkType;
+    hasSkeleton?: boolean;
+    skeletonText?: string;
+    showControls: boolean;
+    showScreenButtons?: boolean;
+    hasOverlay: boolean;
+    onLinkClick?: React.MouseEventHandler<HTMLElement>;
+    onFullScreenClick?: React.MouseEventHandler<HTMLButtonElement>;
+    onVolumeChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onVolumeButtonClick?: React.MouseEventHandler<HTMLButtonElement>;
+    onSubtitlesClick?: React.MouseEventHandler<HTMLButtonElement>;
+    onTogglePlay?: React.MouseEventHandler<HTMLVideoElement> | React.MouseEventHandler<HTMLButtonElement>;
+    onCanPlay?: React.ReactEventHandler<HTMLVideoElement>;
+    onLoadedMetadata?: React.ReactEventHandler<HTMLVideoElement>;
+    onVideoPause?: React.ReactEventHandler<HTMLVideoElement>;
+    onVideoPlay?: React.ReactEventHandler<HTMLVideoElement>;
+    onTimeUpdate?: React.ReactEventHandler<HTMLVideoElement>;
+    onProgressBarChange?: (value: number) => void;
+    onProgressBarDragEnd?: () => void;
+    onProgressBarDragStart?: () => void;
+    dataTestIdParentContainer?: string;
+    dataTestIdOverlay?: string;
+    dataTestIdVideoSkeleton?: string;
+    dataTestIdVolumeInput?: string;
+}
+export interface IVideoControlled<V = undefined extends string ? unknown : string> extends Omit<IVideoStandAlone, 'styles' | 'formatTime' | 'componentLink'>, Omit<CustomTokenTypes<VideoStyleType>, 'cts' | 'extraCt'> {
+    variant: V;
+}
+type propsToOmit = 'styles' | 'videoRef' | 'videoContainerRef' | 'fullScreen' | 'playing' | 'showButtonsBar' | 'loading' | 'subtitlesActivated' | 'volume' | 'currentTime' | 'duration' | 'hasOverlay' | 'showControls' | 'showScreenButtons' | 'onTogglePlay' | 'onProgressBarChange' | 'onProgressBarDragStart' | 'onProgressBarDragEnd' | 'onVolumeButtonClick' | 'onSubtitlesClick' | 'onFullScreenClick';
+export interface IVideoUnControlled<V = undefined extends string ? unknown : string> extends Omit<IVideoControlled<V>, propsToOmit> {
+    hasInitialOverlay?: boolean;
+    timeToHideButtonsBar?: number;
+    onSubtitlesClick?: (event: React.MouseEvent<HTMLButtonElement>, activated: boolean) => void;
+    onFullScreenClick?: (event: React.MouseEvent<HTMLButtonElement>, activated: boolean) => void;
+    onVolumeButtonClick?: (event: React.MouseEvent<HTMLButtonElement>, valume: string) => void;
+    onTogglePlay?: (event: React.MouseEvent<HTMLVideoElement | HTMLButtonElement, MouseEvent>, playing: boolean) => void;
+}
+export {};

package/dist/esm/components/video/types/video.js

@@ -0,0 +1,7 @@
+export var LinkAndActionButtonAlignment;
+(function (LinkAndActionButtonAlignment) {
+    LinkAndActionButtonAlignment["LEFT"] = "flex-start";
+    LinkAndActionButtonAlignment["CENTER"] = "center";
+    LinkAndActionButtonAlignment["RIGHT"] = "flex-end";
+})(LinkAndActionButtonAlignment || (LinkAndActionButtonAlignment = {}));
+//# sourceMappingURL=video.js.map

package/dist/esm/components/video/types/video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video.js","sourceRoot":"","sources":["../../../../../src/components/video/types/video.ts"],"names":[],"mappings":"AASA,MAAM,CAAN,IAAY,4BAIX;AAJD,WAAY,4BAA4B;IACtC,mDAAmB,CAAA;IACnB,iDAAiB,CAAA;IACjB,kDAAkB,CAAA;AACpB,CAAC,EAJW,4BAA4B,KAA5B,4BAA4B,QAIvC"}

package/dist/esm/components/video/types/videoTheme.d.ts

@@ -0,0 +1,57 @@
+import { MediaButtonSizeType } from '../../../components/mediaButton/types/sizes';
+import { DeviceBreakpointsType } from '../../../types';
+import { CommonStyleType, TypographyTypes } from '../../../types/styles';
+export type MediaButtonType = {
+    variant?: string;
+    color?: string;
+    backgroundColor?: string;
+    size?: {
+        [key in DeviceBreakpointsType]?: MediaButtonSizeType;
+    };
+};
+export type SkeletonType = {
+    width?: string;
+    height?: string;
+    variant?: string;
+    shapeVariant?: string;
+};
+export type VideoStyleType = {
+    progressBarVariant?: string;
+    progressBarSize?: string;
+    container?: CommonStyleType;
+    videoContainer?: CommonStyleType;
+    videoElement?: CommonStyleType;
+    subtitles?: CommonStyleType & TypographyTypes & {
+        padding_bottom?: string;
+        additionalPaddingForSubtitles?: string;
+    };
+    screenIconContainer?: CommonStyleType;
+    controlsContainer?: CommonStyleType;
+    buttonsContainer?: CommonStyleType;
+    screenPlayLoadingIcon?: MediaButtonType;
+    buttonsBarPlayIcon?: MediaButtonType;
+    buttonsBarVolumeIcon?: MediaButtonType;
+    volumeBar?: CommonStyleType;
+    videoDuration?: TypographyTypes;
+    buttonsBarSubtitlesIcon?: MediaButtonType;
+    buttonsBarFullScreenIcon?: MediaButtonType;
+    buttonsBarFirstSubcontainer?: CommonStyleType;
+    buttonsBarSecondSubcontainer?: CommonStyleType;
+    bottomContainer?: CommonStyleType;
+    link?: TypographyTypes;
+    actionButton?: {
+        size?: string;
+        variant?: string;
+    };
+    videoSkeletonContainer?: CommonStyleType;
+    videoSkeleton?: SkeletonType;
+    buttonsSkeletonContainer?: CommonStyleType;
+    buttonSkeleton?: SkeletonType;
+    overlay?: CommonStyleType;
+    tooltip?: {
+        variant?: string;
+    };
+};
+export type VideoStylesType<P extends string | number | symbol> = {
+    [key in P]: VideoStyleType;
+};

package/dist/esm/components/video/types/videoTheme.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=videoTheme.js.map

package/dist/esm/components/video/types/videoTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"videoTheme.js","sourceRoot":"","sources":["../../../../../src/components/video/types/videoTheme.ts"],"names":[],"mappings":""}

package/dist/esm/components/video/video.styled.d.ts

@@ -0,0 +1,26 @@
+import { LinkAndActionButtonAlignment, VideoStyleType } from './types';
+type VideoPropsStyleType = {
+    styles: VideoStyleType;
+};
+export declare const ContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, VideoPropsStyleType>> & string;
+export declare const VideoContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, VideoPropsStyleType>> & string;
+export declare const VideoElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, VideoPropsStyleType & {
+    paddingBottomSubtitles: string;
+} & {
+    isFullScreen: boolean;
+}>> & string;
+export declare const ScreenIconContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, VideoPropsStyleType>> & string;
+export declare const ControlsContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, VideoPropsStyleType & {
+    showControls: boolean;
+}>> & string;
+export declare const ButtonsContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, VideoPropsStyleType>> & string;
+export declare const VolumeContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, VideoPropsStyleType>> & string;
+export declare const ButtonsBarFirstSubcontainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, VideoPropsStyleType>> & string;
+export declare const ButtonsBarSecondSubontainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, VideoPropsStyleType>> & string;
+export declare const BottomContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, VideoPropsStyleType & {
+    linkAndActionButtonAlignment?: LinkAndActionButtonAlignment;
+}>> & string;
+export declare const VideoSkeletonContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, VideoPropsStyleType>> & string;
+export declare const ButtonsSkeletonContainerStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, VideoPropsStyleType>> & string;
+export declare const OverlayStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, VideoPropsStyleType>> & string;
+export {};

package/dist/esm/components/video/video.styled.js

@@ -0,0 +1,130 @@
+import styled, { css } from 'styled-components';
+import { getStyles } from '../../utils/getStyles/getStyles';
+export const ContainerStyled = styled.div `
+  ${({ styles }) => getStyles(styles?.container)}
+`;
+export const VideoContainerStyled = styled.div `
+  ${({ styles }) => getStyles(styles?.videoContainer)}
+`;
+export const VideoElement = styled.video `
+  // Allow to set aspect radio to 16:9
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  object-fit: ${({ isFullScreen }) => (isFullScreen ? 'content' : 'fill')};
+  ${({ styles }) => getStyles(styles?.videoElement)};
+  //Style text subtitles
+  ::cue {
+    ${({ styles, theme: { MEDIA_QUERIES: { onlyDesktop, onlyTablet, onlyMobile }, }, }) => css `
+      ${onlyDesktop} {
+        color: ${styles?.subtitles?.color};
+        font-size: ${styles?.subtitles?.DESKTOP?.font_size};
+        line-height: ${styles?.subtitles?.DESKTOP?.line_height};
+        font-weight: ${styles?.subtitles?.font_weight};
+        background-color: ${styles?.subtitles?.background_color};
+      }
+      ${onlyTablet} {
+        color: ${styles?.subtitles?.color};
+        font-size: ${styles?.subtitles?.TABLET?.font_size};
+        line-height: ${styles?.subtitles?.TABLET?.line_height};
+        font-weight: ${styles?.subtitles?.font_weight};
+        background-color: ${styles?.subtitles?.background_color};
+        margin-bottom: ${styles?.subtitles?.margin_bottom};
+      }
+      ${onlyMobile} {
+        color: ${styles?.subtitles?.color};
+        font-size: ${styles?.subtitles?.MOBILE?.font_size};
+        line-height: ${styles?.subtitles?.MOBILE?.line_height};
+        font-weight: ${styles?.subtitles?.font_weight};
+        background-color: ${styles?.subtitles?.background_color};
+        margin-bottom: ${styles?.subtitles?.margin_bottom};
+      }
+    `};
+  }
+  ::-webkit-media-text-track-display {
+    padding-bottom: ${({ paddingBottomSubtitles }) => paddingBottomSubtitles};
+  }
+  // Safari: get margins/paddings for subtitles containers
+  ::-webkit-media-text-track-container {
+    padding-bottom: ${({ paddingBottomSubtitles }) => paddingBottomSubtitles};
+  }
+  //Safari. If "::cue" doesnt work, use this
+  /* ::-webkit-media-text-track-display-backdrop {
+    ${({ styles, theme: { MEDIA_QUERIES: { onlyDesktop, onlyTablet, onlyMobile }, }, }) => css `
+    ${onlyDesktop} {
+      color: ${styles?.subtitles?.color};
+      font-size: ${styles?.subtitles?.DESKTOP?.font_size};
+      line-height: ${styles?.subtitles?.DESKTOP?.line_height};
+      font-weight: ${styles?.subtitles?.font_weight};
+      background-color: ${styles?.subtitles?.background_color};
+    }
+    ${onlyTablet} {
+      color: ${styles?.subtitles?.color};
+      font-size: ${styles?.subtitles?.TABLET?.font_size};
+      line-height: ${styles?.subtitles?.TABLET?.line_height};
+      font-weight: ${styles?.subtitles?.font_weight};
+      background-color: ${styles?.subtitles?.background_color};
+      margin-bottom: ${styles?.subtitles?.margin_bottom};
+    }
+    ${onlyMobile} {
+      color: ${styles?.subtitles?.color};
+      font-size: ${styles?.subtitles?.MOBILE?.font_size};
+      line-height: ${styles?.subtitles?.MOBILE?.line_height};
+      font-weight: ${styles?.subtitles?.font_weight};
+      background-color: ${styles?.subtitles?.background_color};
+      margin-bottom: ${styles?.subtitles?.margin_bottom};
+    }
+  `};
+  } */
+`;
+export const ScreenIconContainerStyled = styled.div `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  ${({ styles }) => getStyles(styles?.screenIconContainer)}
+`;
+export const ControlsContainerStyled = styled.div `
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+  ${({ styles }) => getStyles(styles?.controlsContainer)}
+  opacity: ${({ showControls }) => (!showControls ? '0' : undefined)};
+`;
+export const ButtonsContainerStyled = styled.div `
+  display: flex;
+  ${({ styles }) => getStyles(styles?.buttonsContainer)}
+`;
+export const VolumeContainerStyled = styled.input `
+  ${({ styles }) => getStyles(styles?.volumeBar)}
+`;
+export const ButtonsBarFirstSubcontainerStyled = styled.div `
+  display: flex;
+  ${({ styles }) => getStyles(styles?.buttonsBarFirstSubcontainer)}
+`;
+export const ButtonsBarSecondSubontainerStyled = styled.div `
+  display: flex;
+  ${({ styles }) => getStyles(styles?.buttonsBarSecondSubcontainer)}
+`;
+export const BottomContainerStyled = styled.div `
+  display: flex;
+  justify-content: ${({ linkAndActionButtonAlignment }) => linkAndActionButtonAlignment ?? 'flex-end'};
+  width: 100%;
+  ${({ styles }) => getStyles(styles?.bottomContainer)}
+`;
+export const VideoSkeletonContainerStyled = styled.div `
+  ${({ styles }) => getStyles(styles?.videoSkeletonContainer)}
+`;
+export const ButtonsSkeletonContainerStyled = styled.div `
+  display: flex;
+  ${({ styles }) => getStyles(styles?.buttonsSkeletonContainer)}
+`;
+export const OverlayStyled = styled.div `
+  ${({ styles }) => getStyles(styles?.overlay)}
+`;
+//# sourceMappingURL=video.styled.js.map

package/dist/esm/components/video/video.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video.styled.js","sourceRoot":"","sources":["../../../../src/components/video/video.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AASxD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAqB;IAC1D,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC;CAC/C,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAqB;IAC/D,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,cAAc,CAAC;CACpD,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAA0D;;;;;;;gBAOlF,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IACrE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC;;;MAG7C,CAAC,EACD,MAAM,EACN,KAAK,EAAE,EACL,aAAa,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,GACvD,GACF,EAAE,EAAE,CAAC,GAAG,CAAA;QACL,WAAW;iBACF,MAAM,EAAE,SAAS,EAAE,KAAK;qBACpB,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS;uBACnC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW;uBACvC,MAAM,EAAE,SAAS,EAAE,WAAW;4BACzB,MAAM,EAAE,SAAS,EAAE,gBAAgB;;QAEvD,UAAU;iBACD,MAAM,EAAE,SAAS,EAAE,KAAK;qBACpB,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS;uBAClC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW;uBACtC,MAAM,EAAE,SAAS,EAAE,WAAW;4BACzB,MAAM,EAAE,SAAS,EAAE,gBAAgB;yBACtC,MAAM,EAAE,SAAS,EAAE,aAAa;;QAEjD,UAAU;iBACD,MAAM,EAAE,SAAS,EAAE,KAAK;qBACpB,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS;uBAClC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW;uBACtC,MAAM,EAAE,SAAS,EAAE,WAAW;4BACzB,MAAM,EAAE,SAAS,EAAE,gBAAgB;yBACtC,MAAM,EAAE,SAAS,EAAE,aAAa;;KAEpD;;;sBAGiB,CAAC,EAAE,sBAAsB,EAAE,EAAE,EAAE,CAAC,sBAAsB;;;;sBAItD,CAAC,EAAE,sBAAsB,EAAE,EAAE,EAAE,CAAC,sBAAsB;;;;MAItE,CAAC,EACH,MAAM,EACN,KAAK,EAAE,EACL,aAAa,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,GACvD,GACF,EAAE,EAAE,CAAC,GAAG,CAAA;MACL,WAAW;eACF,MAAM,EAAE,SAAS,EAAE,KAAK;mBACpB,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS;qBACnC,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW;qBACvC,MAAM,EAAE,SAAS,EAAE,WAAW;0BACzB,MAAM,EAAE,SAAS,EAAE,gBAAgB;;MAEvD,UAAU;eACD,MAAM,EAAE,SAAS,EAAE,KAAK;mBACpB,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS;qBAClC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW;qBACtC,MAAM,EAAE,SAAS,EAAE,WAAW;0BACzB,MAAM,EAAE,SAAS,EAAE,gBAAgB;uBACtC,MAAM,EAAE,SAAS,EAAE,aAAa;;MAEjD,UAAU;eACD,MAAM,EAAE,SAAS,EAAE,KAAK;mBACpB,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS;qBAClC,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW;qBACtC,MAAM,EAAE,SAAS,EAAE,WAAW;0BACzB,MAAM,EAAE,SAAS,EAAE,gBAAgB;uBACtC,MAAM,EAAE,SAAS,EAAE,aAAa;;GAEpD;;CAEF,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,CAAqB;;;;;IAKpE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,mBAAmB,CAAC;CACzD,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAiD;;;;;;;IAO9F,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,iBAAiB,CAAC;aAC3C,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;CACnE,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAqB;;IAEjE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,gBAAgB,CAAC;CACtD,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,KAAK,CAAqB;IAClE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,SAAS,CAAC;CAC/C,CAAC;AAEF,MAAM,CAAC,MAAM,iCAAiC,GAAG,MAAM,CAAC,GAAG,CAAqB;;IAE5E,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,2BAA2B,CAAC;CACjE,CAAC;AAEF,MAAM,CAAC,MAAM,iCAAiC,GAAG,MAAM,CAAC,GAAG,CAAqB;;IAE5E,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,4BAA4B,CAAC;CAClE,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAE9C;;qBAEoB,CAAC,EAAE,4BAA4B,EAAE,EAAE,EAAE,CACtD,4BAA4B,IAAI,UAAU;;IAE1C,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,eAAe,CAAC;CACrD,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAqB;IACvE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,sBAAsB,CAAC;CAC5D,CAAC;AAEF,MAAM,CAAC,MAAM,8BAA8B,GAAG,MAAM,CAAC,GAAG,CAAqB;;IAEzE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,wBAAwB,CAAC;CAC9D,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAqB;IACxD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC;CAC7C,CAAC"}

package/dist/esm/components/video/videoControlled.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { IVideoControlled } from './types/video';
+declare const VideoBoundary: <V extends string | unknown>(props: IVideoControlled<V>, ref: React.ForwardedRef<HTMLDivElement> | undefined | null) => JSX.Element;
+declare const VideoControlled: <V>(props: React.PropsWithChildren<IVideoControlled<V>> & {
+    ref?: React.ForwardedRef<HTMLDivElement> | undefined | null;
+}) => ReturnType<typeof VideoBoundary>;
+export { VideoControlled };

package/dist/esm/components/video/videoControlled.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { STYLES_NAME } from '../../constants';
+import { useStyles } from '../../hooks/useStyles/useStyles';
+import { ErrorBoundary, FallbackComponent } from '../../provider/errorBoundary';
+import { useGenericComponents } from '../../provider/genericComponents';
+import { VideoStandAlone } from './videoStandAlone';
+const VideoControlledComponent = React.forwardRef(({ variant, ctv, ...props }, ref) => {
+    const variantStyles = useStyles(STYLES_NAME.VIDEO, variant, ctv);
+    const { LINK: genericLinkComponent } = useGenericComponents();
+    return (_jsx(VideoStandAlone, { ...props, ref: ref, componentLink: genericLinkComponent, styles: variantStyles }));
+});
+VideoControlledComponent.displayName = 'VideoControlledComponent';
+const VideoBoundary = (props, ref) => (_jsx(ErrorBoundary, { fallBackComponent: _jsx(FallbackComponent, { children: _jsx(VideoStandAlone, { ...props, ref: ref }) }), children: _jsx(VideoControlledComponent, { ...props, ref: ref }) }));
+const VideoControlled = React.forwardRef(VideoBoundary);
+export { VideoControlled };
+//# sourceMappingURL=videoControlled.js.map

package/dist/esm/components/video/videoControlled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"videoControlled.js","sourceRoot":"","sources":["../../../../src/components/video/videoControlled.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAIpE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,wBAAwB,GAAG,KAAK,CAAC,UAAU,CAC/C,CACE,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,EAAuB,EAC/C,GAA0D,EAC7C,EAAE;IACf,MAAM,aAAa,GAAG,SAAS,CAAoB,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC;IACpF,MAAM,EAAE,IAAI,EAAE,oBAAoB,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAE9D,OAAO,CACL,KAAC,eAAe,OACV,KAAK,EACT,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,oBAAoB,EACnC,MAAM,EAAE,aAAa,GACrB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AACF,wBAAwB,CAAC,WAAW,GAAG,0BAA0B,CAAC;AAElE,MAAM,aAAa,GAAG,CACpB,KAA0B,EAC1B,GAA0D,EAC7C,EAAE,CAAC,CAChB,KAAC,aAAa,IACZ,iBAAiB,EACf,KAAC,iBAAiB,cAChB,KAAC,eAAe,OAAM,KAAqC,EAAE,GAAG,EAAE,GAAG,GAAI,GACvD,YAGtB,KAAC,wBAAwB,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,GAAI,GACnC,CACjB,CAAC;AAEF,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAIjB,CAAC;AAEtC,OAAO,EAAE,eAAe,EAAE,CAAC"}

package/dist/esm/components/video/videoStandAlone.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IVideoStandAlone } from './types';
+export declare const VideoStandAlone: React.ForwardRefExoticComponent<IVideoStandAlone & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/video/videoStandAlone.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useId } from '../../hooks';
+import { ProgressBar } from '../progressBar';
+import { LinkAndActionButton, PlayStopButton, ScreenButtons, SubtitleFullScreenButtons, Time, VideoSkeleton, Volume, } from './components';
+import { ButtonsBarFirstSubcontainerStyled, ButtonsBarSecondSubontainerStyled, ButtonsContainerStyled, ContainerStyled, ControlsContainerStyled, OverlayStyled, VideoContainerStyled, VideoElement, } from './video.styled';
+const VIDEO_BASE_ID = 'video';
+const VideoStandAloneComponent = (props, ref) => {
+    const BASE_ID = useId(VIDEO_BASE_ID);
+    const controlsContainerId = `${BASE_ID}-controlsContainer`;
+    const getPaddingBottomSubtitles = () => {
+        //This padding must be pressent always
+        const paddingBottom = parseFloat(props.styles.subtitles?.padding_bottom ?? '0');
+        //This additional padding only should be present when controls container is showed
+        const additionalPadding = parseFloat(props.styles.subtitles?.additionalPaddingForSubtitles ?? '0');
+        return `${paddingBottom + additionalPadding}rem`;
+    };
+    if (props.hasSkeleton) {
+        return (_jsx(VideoSkeleton, { dataTestIdVideoSkeleton: props.dataTestIdVideoSkeleton, skeletonText: props.skeletonText, styles: props.styles }));
+    }
+    return (_jsxs(ContainerStyled, { ref: ref, "data-testid": props.dataTestIdParentContainer, styles: props.styles, children: [_jsxs(VideoContainerStyled, { ref: props.videoContainerRef, styles: props.styles, children: [props.hasOverlay && (_jsx(OverlayStyled, { "data-testid": props.dataTestIdOverlay, styles: props.styles })), _jsxs(VideoElement, { ref: props.videoRef, controls: false, isFullScreen: props.fullScreen, paddingBottomSubtitles: getPaddingBottomSubtitles(), poster: props.posterUrl, styles: props.styles, width: "100%", onCanPlay: props.onCanPlay, onClick: props.onTogglePlay, onLoadedMetadata: props.onLoadedMetadata, onPause: props.onVideoPause, onPlay: props.onVideoPlay, onTimeUpdate: props.onTimeUpdate, children: [_jsx("source", { src: props.videoSrc, type: props.videoType }), props.subtitlesActivated && (_jsx("track", { default: true, kind: props.trackKind, label: props.trackLabel, src: props.trackSrc, srcLang: props.trackSrcLang }))] }), props.showScreenButtons && (_jsx(ScreenButtons, { handlePlayStopVideo: props.onTogglePlay, loading: props.loading, playing: props.playing, screenLoadingIcon: props.screenLoadingIcon, screenPlayIcon: props.screenPlayIcon, styles: props.styles })), !props.loading && !props.hasOverlay && (_jsxs(ControlsContainerStyled, { id: controlsContainerId, showControls: props.showControls, styles: props.styles, children: [_jsx(ProgressBar, { barAriaLabel: props.barAriaLabel, percentProgressCompleted: (props.currentTime / (props.duration || 1)) * 100, size: props.styles.progressBarSize, variant: props.styles.progressBarVariant, onChange: props.onProgressBarChange, onDragEnd: props.onProgressBarDragEnd, onDragStart: props.onProgressBarDragStart }), _jsxs(ButtonsContainerStyled, { styles: props.styles, children: [_jsxs(ButtonsBarFirstSubcontainerStyled, { styles: props.styles, children: [_jsx(PlayStopButton, { buttonsBarPlayIcon: props.buttonsBarPlayIcon, buttonsBarPlayIconToTransition: props.buttonsBarPlayIconToTransition, buttonsBarPlayIconTooltip: props.buttonsBarPlayIconTooltip, handlePlayStopVideo: props.onTogglePlay, playing: props.playing, styles: props.styles }), _jsx(Volume, { buttonsBarVolumeIcon: props.buttonsBarVolumeIcon, buttonsBarVolumeIconToTransition: props.buttonsBarVolumeIconToTransition, buttonsBarVolumeIconTooltip: props.buttonsBarVolumeIconTooltip, dataTestIdVolumeInput: props.dataTestIdVolumeInput, styles: props.styles, volume: props.volume, volumeBarAriaLabel: props.volumeBarAriaLabel, onVolumeButtonClick: props.onVolumeButtonClick, onVolumeChange: props.onVolumeChange }), _jsx(Time, { currentTime: props.currentTime, duration: props.duration, styles: props.styles })] }), _jsx(ButtonsBarSecondSubontainerStyled, { styles: props.styles, children: _jsx(SubtitleFullScreenButtons, { buttonsBarFullScreenIcon: props.buttonsBarFullScreenIcon, buttonsBarFullScreenIconToTransition: props.buttonsBarFullScreenIconToTransition, buttonsBarFullScreenIconTooltip: props.buttonsBarFullScreenIconTooltip, buttonsBarSubtitlesIcon: props.buttonsBarSubtitlesIcon, buttonsBarSubtitlesIconToTransition: props.buttonsBarSubtitlesIconToTransition, buttonsBarSubtitlesIconTooltip: props.buttonsBarSubtitlesIconTooltip, fullScreen: props.fullScreen, styles: props.styles, subtitlesActivated: props.subtitlesActivated, onFullScreenClick: props.onFullScreenClick, onSubtitlesClick: props.onSubtitlesClick }) })] })] }))] }), _jsx(LinkAndActionButton, { actionButton: props.actionButton, componentLink: props.componentLink, linkAndActionButtonAlignment: props.linkAndActionButtonAlignment, linkTarget: props.linkTarget, linkText: props.linkText, linkUrl: props.linkUrl, styles: props.styles, onLinkClick: props.onLinkClick })] }));
+};
+export const VideoStandAlone = React.forwardRef(VideoStandAloneComponent);
+//# sourceMappingURL=videoStandAlone.js.map