components
Video
v.1.0.0 | SaturnUsage
The name of the tokens object to style video is VIDEO_STYLES.
You can not change the name of the tokens object.
Video component style can be configured through the variant prop:
- Variant: modify the styles of the Video.
The structure of the VIDEO_STYLES object is:
Variants
Variants can modify the styles for the Video.
The tokens used are:
- 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; };
12345678910
const VIDEO_STYLES = { [VARIANT]: { progressBarVariant?: string; progressBarSize?: string; container?: CommonStyleType; videoContainer?: CommonStyleType; videoElement?: CommonStyleType; subtitles?: CommonStyleType & TypographyTypes & { padding_bottom?: string;
Example
video theme object example:
12345678910
const VIDEO_STYLES = { [VARIANT]: { progressBarVariant: 'INTERACTIVE', progressBarSize: 'MEDIUM', buttonsContainer: { padding: 'padding', background_color: 'background-color', justify_content: 'justify-content', width: 'width', MOBILE: {
Types
12345678910
type MediaButtonType = { variant?: string; color?: string; backgroundColor?: string; size?: \{ [key in DeviceBreakpointsType]?: MediaButtonSizeType \}; }; type SkeletonType = { width?: string; height?: string; variant?: string;