@smitch/fluid
Version:
A Next/React ui-component libray.
63 lines (62 loc) • 4.81 kB
JavaScript
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) {
secs = secs || 0;
var sec_num = parseInt(secs, 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 : 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, onFullscreen, duration) }, index));
case 'pip':
return _jsx("div", { children: PipControl(onPIP, duration) }, index);
case 'captions':
return (_jsx("div", { children: CaptionsControl(handleCaptionChange, tracks || [], srcLangs || []) }, index));
default:
return null;
}
})
: null })] })] }));
};
export default VideoControls;