@kubit-ui-web/react-components/dist/esm/components/video/videoStandAlone.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { useId } from '../../hooks/useId/useId';
import { ProgressBar } from '../progressBar/progressBar';
import { LinkAndActionButton } from './components/linkAndActionButton';
import { PlayStopButton } from './components/playStopButton';
import { ScreenButtons } from './components/screenButtons';
import { SubtitleFullScreenButtons } from './components/subtitleFullScreenButtons';
import { Time } from './components/time';
import { VideoSkeleton } from './components/videoSkeleton';
import { Volume } from './components/volume';
import { ButtonsBarFirstSubcontainerStyled, ButtonsBarSecondSubontainerStyled, ButtonsContainerStyled, ContainerStyled, ControlsContainerStyled, OverlayStyled, VideoContainerStyled, VideoElement, } from './video.styled';
const VIDEO_BASE_ID = 'video';
const VideoStandAloneComponent = ({ dataTestIdOverlay = 'overlay', dataTestIdParentContainer = 'video', dataTestIdVideoSkeleton = 'skeleton', dataTestIdVolumeInput = 'volume-input', ...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: dataTestIdVideoSkeleton, skeletonText: props.skeletonText, styles: props.styles }));
    }
    return (_jsxs(ContainerStyled, { ref: ref, "data-testid": dataTestIdParentContainer, styles: props.styles, children: [_jsxs(VideoContainerStyled, { ref: props.videoContainerRef, styles: props.styles, children: [props.hasOverlay && (_jsx(OverlayStyled, { "data-testid": 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: 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