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

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

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.VideoStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const useId_1 = require("../../hooks/useId/useId");
const progressBar_1 = require("../progressBar/progressBar");
const linkAndActionButton_1 = require("./components/linkAndActionButton");
const playStopButton_1 = require("./components/playStopButton");
const screenButtons_1 = require("./components/screenButtons");
const subtitleFullScreenButtons_1 = require("./components/subtitleFullScreenButtons");
const time_1 = require("./components/time");
const videoSkeleton_1 = require("./components/videoSkeleton");
const volume_1 = require("./components/volume");
const video_styled_1 = require("./video.styled");
const VIDEO_BASE_ID = 'video';
const VideoStandAloneComponent = ({ dataTestIdOverlay = 'overlay', dataTestIdParentContainer = 'video', dataTestIdVideoSkeleton = 'skeleton', dataTestIdVolumeInput = 'volume-input', ...props }, ref) => {
    const BASE_ID = (0, useId_1.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 ((0, jsx_runtime_1.jsx)(videoSkeleton_1.VideoSkeleton, { dataTestIdVideoSkeleton: dataTestIdVideoSkeleton, skeletonText: props.skeletonText, styles: props.styles }));
    }
    return ((0, jsx_runtime_1.jsxs)(video_styled_1.ContainerStyled, { ref: ref, "data-testid": dataTestIdParentContainer, styles: props.styles, children: [(0, jsx_runtime_1.jsxs)(video_styled_1.VideoContainerStyled, { ref: props.videoContainerRef, styles: props.styles, children: [props.hasOverlay && ((0, jsx_runtime_1.jsx)(video_styled_1.OverlayStyled, { "data-testid": dataTestIdOverlay, styles: props.styles })), (0, jsx_runtime_1.jsxs)(video_styled_1.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: [(0, jsx_runtime_1.jsx)("source", { src: props.videoSrc, type: props.videoType }), props.subtitlesActivated && ((0, jsx_runtime_1.jsx)("track", { default: true, kind: props.trackKind, label: props.trackLabel, src: props.trackSrc, srcLang: props.trackSrcLang }))] }), props.showScreenButtons && ((0, jsx_runtime_1.jsx)(screenButtons_1.ScreenButtons, { handlePlayStopVideo: props.onTogglePlay, loading: props.loading, playing: props.playing, screenLoadingIcon: props.screenLoadingIcon, screenPlayIcon: props.screenPlayIcon, styles: props.styles })), !props.loading && !props.hasOverlay && ((0, jsx_runtime_1.jsxs)(video_styled_1.ControlsContainerStyled, { id: controlsContainerId, showControls: props.showControls, styles: props.styles, children: [(0, jsx_runtime_1.jsx)(progressBar_1.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 }), (0, jsx_runtime_1.jsxs)(video_styled_1.ButtonsContainerStyled, { styles: props.styles, children: [(0, jsx_runtime_1.jsxs)(video_styled_1.ButtonsBarFirstSubcontainerStyled, { styles: props.styles, children: [(0, jsx_runtime_1.jsx)(playStopButton_1.PlayStopButton, { buttonsBarPlayIcon: props.buttonsBarPlayIcon, buttonsBarPlayIconToTransition: props.buttonsBarPlayIconToTransition, buttonsBarPlayIconTooltip: props.buttonsBarPlayIconTooltip, handlePlayStopVideo: props.onTogglePlay, playing: props.playing, styles: props.styles }), (0, jsx_runtime_1.jsx)(volume_1.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 }), (0, jsx_runtime_1.jsx)(time_1.Time, { currentTime: props.currentTime, duration: props.duration, styles: props.styles })] }), (0, jsx_runtime_1.jsx)(video_styled_1.ButtonsBarSecondSubontainerStyled, { styles: props.styles, children: (0, jsx_runtime_1.jsx)(subtitleFullScreenButtons_1.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 }) })] })] }))] }), (0, jsx_runtime_1.jsx)(linkAndActionButton_1.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 })] }));
};
exports.VideoStandAlone = react_1.default.forwardRef(VideoStandAloneComponent);
//# sourceMappingURL=videoStandAlone.js.map