@smitch/fluid/lib/videoplayer/VideoPlayer.js

A Next/React ui-component libray.

'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import { twMerge } from 'tailwind-merge';
import Video from './Video';
import VideoControls from './VideoControls';
var VideoPlayer = function (_a) {
    var src = _a.src, poster = _a.poster, loop = _a.loop, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.aspect, aspect = _c === void 0 ? 'video' : _c, preload = _a.preload, fallback = _a.fallback, _d = _a.formats, formats = _d === void 0 ? ['mp4'] : _d, _e = _a.defaultError, defaultError = _e === void 0 ? 'Oops! There was an unknown error.' : _e, _f = _a.muted, muted = _f === void 0 ? false : _f, autoplay = _a.autoplay, _g = _a.controlOptions, controlOptions = _g === void 0 ? ['sound', 'fullscreen', 'pip'] : _g, _h = _a.progressBg, progressBg = _h === void 0 ? '#cccccc' : _h, _j = _a.progressColor, progressColor = _j === void 0 ? '#ffffff' : _j, tracks = _a.tracks, srcLangs = _a.srcLangs, grayscale = _a.grayscale;
    var _k = useState(false), play = _k[0], setPlay = _k[1];
    var _l = useState(0), duration = _l[0], setDuration = _l[1];
    var _m = useState(0), time = _m[0], setTime = _m[1];
    var _o = useState(0), currentTime = _o[0], setCurrentTime = _o[1];
    var _p = useState(false), fullscreen = _p[0], setFullscreen = _p[1];
    var _q = useState(false), pictureInPicture = _q[0], setPictureInPicture = _q[1];
    var _r = useState(muted), mute = _r[0], setMute = _r[1];
    var _s = useState(5), volume = _s[0], setVolume = _s[1];
    var _t = useState(), trackIndex = _t[0], setTrackIndex = _t[1];
    useEffect(function () {
        var handleFullscreenChange = function () {
            if (fullscreen && !document.fullscreenElement)
                setFullscreen(false);
        };
        document.addEventListener('fullscreenchange', handleFullscreenChange);
        return function () {
            document.removeEventListener('keydown', handleFullscreenChange);
        };
    }, [setFullscreen, fullscreen]);
    useEffect(function () {
        setPlay(autoplay !== null && autoplay !== void 0 ? autoplay : false);
        return function () {
            setPlay(false);
        };
    }, [autoplay]);
    var handleScrubChange = function (time) {
        setTime(time);
        setCurrentTime(time);
    };
    var handleEnded = function () {
        setPlay(false);
        handleScrubChange(0);
    };
    var handleVolume = function (volume) {
        setVolume(volume);
        volume === 0 ? setMute(true) : setMute(false);
    };
    var handleTogglePlay = function () { return setPlay(!play); };
    var handleMute = function () { return setMute(!mute); };
    var handleFullscreen = function () {
        setFullscreen(!fullscreen);
        if (typeof document !== null) {
            var player = document.getElementById('player');
            if (player) {
                if (!fullscreen) {
                    player.requestFullscreen();
                }
                else
                    document.exitFullscreen();
            }
        }
    };
    var handlePiP = function () { return setPictureInPicture(!pictureInPicture); };
    var handleCaption = function (index) { return setTrackIndex(index); };
    return (_jsxs("div", { id: 'player', className: twMerge("video-player w-full dark bg-black group relative ".concat(fullscreen ? 'fullscreen' : ''), className), children: [_jsx(Video, { src: src, controls: false, poster: poster, aspect: aspect, loop: loop, setDuration: setDuration, setTime: setTime, currentTime: currentTime, togglePlay: handleTogglePlay, playEnded: handleEnded, play: play, muted: mute, autoplay: autoplay, preload: preload, fallback: fallback, volume: volume, formats: formats, pictureInPicture: pictureInPicture, defaultError: defaultError, tracks: tracks, srcLangs: srcLangs, trackIndex: trackIndex, grayscale: grayscale }), _jsx(VideoControls, { duration: duration, time: time, togglePlay: handleTogglePlay, play: play, onFullscreen: handleFullscreen, fullscreen: fullscreen, onMute: handleMute, muted: mute, onScrubChange: handleScrubChange, onVolume: handleVolume, onPIP: handlePiP, onCaption: handleCaption, controlOptions: controlOptions, progressBg: progressBg, progressColor: progressColor, tracks: tracks, srcLangs: srcLangs })] }));
};
export default VideoPlayer;