vlibras-player-webjs
Version:
Biblioteca JavaScript moderna para integração do VLibras Player com React, Vue, Angular e vanilla JS
35 lines • 6.48 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { useVLibrasContext } from './VLibrasProvider';
import { useVLibrasAccessibility } from '../hooks/useVLibrasAccessibility';
export const VLibrasSettings = ({ showQuickSettings = true, position = 'top-right', onSettingsChange, className = '' }) => {
const { config, updateConfig } = useVLibrasContext();
const accessibility = useVLibrasAccessibility();
const [isOpen, setIsOpen] = useState(false);
const handleSpeedChange = (speed) => {
updateConfig({ playbackSpeed: speed });
onSettingsChange?.({ playbackSpeed: speed });
accessibility.announce(`Velocidade alterada para ${speed}x`);
};
const handleThemeChange = (theme) => {
updateConfig({ theme });
onSettingsChange?.({ theme });
accessibility.announce(`Tema alterado para ${theme}`);
};
const handleAccessibilityToggle = (option, value) => {
accessibility.updateOptions({ [option]: value });
accessibility.announce(`${option} ${value ? 'ativado' : 'desativado'}`);
};
const positionClasses = {
'top-right': 'top-4 right-4',
'top-left': 'top-4 left-4',
'bottom-right': 'bottom-4 right-4',
'bottom-left': 'bottom-4 left-4'
};
if (!showQuickSettings)
return null;
return (_jsxs("div", { className: `vlibras-settings fixed ${positionClasses[position]} z-50 ${className}`, children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: "vlibras-settings-toggle bg-blue-600 text-white p-3 rounded-full shadow-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500", "aria-label": isOpen ? 'Fechar configurações' : 'Abrir configurações', "aria-expanded": isOpen, children: "\u2699\uFE0F" }), isOpen && (_jsxs("div", { className: "vlibras-settings-panel absolute top-14 right-0 bg-white rounded-lg shadow-xl border p-4 w-80 max-h-96 overflow-y-auto", children: [_jsxs("div", { className: "mb-4", children: [_jsx("h3", { className: "text-lg font-semibold mb-2", children: "Configura\u00E7\u00F5es VLibras" }), _jsxs("div", { className: "mb-4", children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Velocidade de Reprodu\u00E7\u00E3o" }), _jsx("div", { className: "flex space-x-2", children: [0.5, 0.75, 1, 1.25, 1.5, 2].map(speed => (_jsxs("button", { onClick: () => handleSpeedChange(speed), className: `px-3 py-1 rounded text-sm ${config.playbackSpeed === speed
? 'bg-blue-600 text-white'
: 'bg-gray-200 hover:bg-gray-300'}`, "aria-pressed": config.playbackSpeed === speed, children: [speed, "x"] }, speed))) })] }), _jsxs("div", { className: "mb-4", children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Tema" }), _jsxs("select", { value: config.theme || 'auto', onChange: (e) => handleThemeChange(e.target.value), className: "w-full p-2 border rounded-md focus:ring-2 focus:ring-blue-500", children: [_jsx("option", { value: "auto", children: "Autom\u00E1tico" }), _jsx("option", { value: "light", children: "Claro" }), _jsx("option", { value: "dark", children: "Escuro" }), _jsx("option", { value: "high-contrast", children: "Alto Contraste" })] })] }), _jsxs("div", { className: "mb-4", children: [_jsx("h4", { className: "text-sm font-medium mb-2", children: "Acessibilidade" }), _jsxs("div", { className: "space-y-2", children: [_jsxs("label", { className: "flex items-center space-x-2", children: [_jsx("input", { type: "checkbox", checked: accessibility.options.announceTranslations, onChange: (e) => handleAccessibilityToggle('announceTranslations', e.target.checked), className: "rounded focus:ring-2 focus:ring-blue-500" }), _jsx("span", { className: "text-sm", children: "Anunciar tradu\u00E7\u00F5es" })] }), _jsxs("label", { className: "flex items-center space-x-2", children: [_jsx("input", { type: "checkbox", checked: accessibility.options.enableKeyboardNav, onChange: (e) => handleAccessibilityToggle('enableKeyboardNav', e.target.checked), className: "rounded focus:ring-2 focus:ring-blue-500" }), _jsx("span", { className: "text-sm", children: "Navega\u00E7\u00E3o por teclado" })] }), _jsxs("label", { className: "flex items-center space-x-2", children: [_jsx("input", { type: "checkbox", checked: accessibility.options.enableReducedMotion, onChange: (e) => handleAccessibilityToggle('enableReducedMotion', e.target.checked), className: "rounded focus:ring-2 focus:ring-blue-500" }), _jsx("span", { className: "text-sm", children: "Reduzir anima\u00E7\u00F5es" })] }), _jsxs("label", { className: "flex items-center space-x-2", children: [_jsx("input", { type: "checkbox", checked: accessibility.options.enableHighContrast, onChange: (e) => handleAccessibilityToggle('enableHighContrast', e.target.checked), className: "rounded focus:ring-2 focus:ring-blue-500" }), _jsx("span", { className: "text-sm", children: "Alto contraste" })] })] })] }), _jsxs("div", { className: "mb-4", children: [_jsx("label", { className: "block text-sm font-medium mb-2", children: "Tamanho do Texto" }), _jsxs("select", { value: accessibility.options.textSize || 'medium', onChange: (e) => accessibility.updateOptions({ textSize: e.target.value }), className: "w-full p-2 border rounded-md focus:ring-2 focus:ring-blue-500", children: [_jsx("option", { value: "small", children: "Pequeno" }), _jsx("option", { value: "medium", children: "M\u00E9dio" }), _jsx("option", { value: "large", children: "Grande" }), _jsx("option", { value: "x-large", children: "Extra Grande" })] })] }), _jsxs("div", { className: "mb-4", children: [_jsx("h4", { className: "text-sm font-medium mb-2", children: "Atalhos de Teclado" }), _jsx("div", { className: "text-xs space-y-1 text-gray-600", children: Object.entries(accessibility.getKeyboardShortcuts()).map(([key, description]) => (_jsxs("div", { className: "flex justify-between", children: [_jsx("span", { className: "font-mono bg-gray-100 px-1 rounded", children: key }), _jsx("span", { children: description })] }, key))) })] })] }), _jsx("div", { className: "border-t pt-3", children: _jsx("button", { onClick: () => setIsOpen(false), className: "w-full bg-gray-600 text-white py-2 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500", children: "Fechar" }) })] }))] }));
};
//# sourceMappingURL=VLibrasSettings.js.map