@smitch/fluid/lib/videoplayer/controls/CaptionsControl.js

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

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from 'react';
import { FaClosedCaptioning } from 'react-icons/fa';
import { Button, Select } from '../..';
var CaptionsControl = function (handleCaptionChange, tracks, srcLangs) {
    var _a = useState(false), showSelect = _a[0], setShowSelect = _a[1];
    var onCaptionChange = function (e) {
        setShowSelect(false);
        if (handleCaptionChange)
            handleCaptionChange(e.target.value);
    };
    return tracks ? (_jsxs("div", { id: 'captions-control', className: 'relative', children: [_jsxs(Button, { title: 'Toggle caption options', onClick: function () { return setShowSelect(!showSelect); }, btnBackground: 'transparent', btnColor: 'light', size: 'sm', className: 'lg:-ml-2', children: [_jsx(FaClosedCaptioning, {}), _jsx("span", { className: 'sr-only', children: "Toggle caption options" })] }), _jsx(Select, { title: 'Select Captions', className: "!bg-light !text-dark bottom-8 right-0 absolute ".concat(showSelect ? 'block' : 'hidden'), onChange: onCaptionChange, dropdownSize: 'sm', rows: tracks.length + 1, children: _jsxs(_Fragment, { children: [_jsx("option", { value: '-1', children: "off" }), tracks.map(function (_track, index) { return (_jsx("option", { value: "".concat(index), children: srcLangs[index] }, index)); })] }) })] })) : null;
};
export default CaptionsControl;
//# sourceMappingURL=CaptionsControl.js.map