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

A lightweight, Tailwind-powered React/Next.js UI component library.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import { CaptionsControl, FullscreenControl, SoundControl, PipControl } from "./controls/";
import { FaPlay, FaPause } from "react-icons/fa";
import { Button } from "..";
var toHHMMSS = function (secs) {
    var s = secs || 0;
    var sec_num = parseInt(String(s), 10);
    var hours = Math.floor(sec_num / 3600);
    var minutes = Math.floor(sec_num / 60) % 60;
    var seconds = sec_num % 60;
    return [hours, minutes, seconds]
        .map(function (v) { return (v < 10 ? "0" + v : String(v)); })
        .filter(function (v, i) { return v !== "00" || i > 0; })
        .join(":");
};
var VideoControls = function (_a) {
    var duration = _a.duration, _b = _a.time, time = _b === void 0 ? 0 : _b, togglePlay = _a.togglePlay, _c = _a.play, play = _c === void 0 ? false : _c, fullscreen = _a.fullscreen, onFullscreen = _a.onFullscreen, muted = _a.muted, onMute = _a.onMute, onScrubChange = _a.onScrubChange, onVolume = _a.onVolume, onPIP = _a.onPIP, onCaption = _a.onCaption, controlOptions = _a.controlOptions, progressBg = _a.progressBg, progressColor = _a.progressColor, tracks = _a.tracks, srcLangs = _a.srcLangs;
    var _d = useState(0), scrubRange = _d[0], setScrubRange = _d[1];
    var _e = useState(5), volumeLevel = _e[0], setVolumeLevel = _e[1];
    useEffect(function () {
        if (time)
            setScrubRange((time / duration) * 100);
        else
            setScrubRange(0);
    }, [time, duration]);
    var scrubStyle = {
        backgroundImage: "linear-gradient(to right, ".concat(progressColor, " 0%, ").concat(progressColor, " ").concat(scrubRange, "%, ").concat(progressBg, " ").concat(scrubRange, "%, ").concat(progressBg, " 100%)"),
    };
    var handleScrubChange = function (event) {
        setScrubRange(Number(event.target.value));
        if (onScrubChange)
            onScrubChange((scrubRange * duration) / 100);
    };
    var handleVolumeChange = function (event) {
        var value = Number(event.target.value);
        setVolumeLevel(value);
        if (onVolume)
            onVolume(value);
    };
    var handleCaptionChange = function (value) {
        if (onCaption)
            onCaption(value);
    };
    return (_jsxs("div", { className: "bg-gradient-to-t from-black from-60% to-transparent text-light absolute bottom-0 w-full flex flex-col justify-between opacity-0 group-hover:opacity-100", children: [_jsx("div", { className: "mx-2 ".concat(duration > 0 ? "block" : "hidden"), children: _jsx("input", { type: "range", min: "0", max: "100", step: "any", id: "scrubRange", value: scrubRange, onChange: handleScrubChange, onInputCapture: handleScrubChange, style: scrubStyle, className: "w-full rounded-none [&&::-webkit-slider-thumb]:duration-500 [&&::-webkit-slider-thumb]:transition-all [&&::-webkit-slider-thumb]:cursor-grab h-1 cursor-pointer appearance-none [&&::-webkit-slider-thumb]:appearance-none" }) }), _jsxs("div", { className: "flex justify-between", children: [_jsxs("p", { className: "flex justify-start gap-2 items-center", children: [_jsxs(Button, { title: play ? "Pause" : "Play", onClick: togglePlay, btnBackground: "transparent", btnColor: "light", size: "sm", children: [play ? _jsx(FaPause, {}) : _jsx(FaPlay, {}), _jsx("span", { className: "sr-only", children: "Toggle Play" })] }), _jsxs("span", { className: "video-time font-mono text-sm", children: [_jsx("time", { children: toHHMMSS(time) }), " ", duration > 0 && (_jsxs("span", { children: ["/ ", _jsx("time", { children: toHHMMSS(duration) })] }))] })] }), _jsx("div", { className: "flex justify-end gap-2 items-center", children: controlOptions
                            ? controlOptions.map(function (option, index) {
                                switch (option) {
                                    case "sound":
                                        return (_jsx("div", { children: SoundControl(muted, onMute, duration, volumeLevel, handleVolumeChange) }, index));
                                    case "fullscreen":
                                        return (_jsx("div", { children: FullscreenControl(fullscreen, duration, onFullscreen) }, index));
                                    case "pip":
                                        return _jsx("div", { children: PipControl(duration, onPIP) }, index);
                                    case "captions":
                                        return (_jsx("div", { children: CaptionsControl(handleCaptionChange, tracks || [], srcLangs || []) }, index));
                                    default:
                                        return null;
                                }
                            })
                            : null })] })] }));
};
export default VideoControls;
//# sourceMappingURL=VideoControls.js.map