vlibras-player-webjs
Version:
Biblioteca JavaScript moderna para integração do VLibras Player com React, Vue, Angular e vanilla JS
76 lines • 4.63 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.VLibrasPlayer = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const VLibrasProvider_1 = require("./VLibrasProvider");
exports.VLibrasPlayer = (0, react_1.forwardRef)(({ text, autoPlay = false, showControls = true, allowReplay = true, width = 320, height = 240, variant = 'default', onReady, onTranslationStart, onTranslationComplete, onError, className = '', ...props }, ref) => {
const { player, isLoaded, isPlaying, error: contextError } = (0, VLibrasProvider_1.useVLibrasContext)();
const containerRef = (0, react_1.useRef)(null);
const [localError, setLocalError] = (0, react_1.useState)(null);
const error = contextError || localError;
// Initialize player in container
(0, react_1.useEffect)(() => {
if (isLoaded && player && containerRef.current) {
try {
// Player já é inicializado no contexto, apenas configura o container se necessário
onReady?.();
}
catch (err) {
const error = err instanceof Error ? err : new Error('Erro ao inicializar player');
setLocalError(error);
onError?.(error);
}
}
}, [isLoaded, player, onReady, onError]);
// Auto-translate when text changes
(0, react_1.useEffect)(() => {
if (text && player && isLoaded && autoPlay) {
onTranslationStart?.(text);
player.translateAsync(text)
.then(() => onTranslationComplete?.())
.catch(err => {
const error = err instanceof Error ? err : new Error('Erro na tradução');
setLocalError(error);
onError?.(error);
});
}
}, [text, player, isLoaded, autoPlay, onTranslationStart, onTranslationComplete, onError]);
const handleTranslate = () => {
if (text && player && isLoaded) {
onTranslationStart?.(text);
player.translateAsync(text)
.then(() => onTranslationComplete?.())
.catch(err => {
const error = err instanceof Error ? err : new Error('Erro na tradução');
setLocalError(error);
onError?.(error);
});
}
};
const handlePlay = () => {
if (player && isLoaded) {
player.playAsync().catch(err => {
const error = err instanceof Error ? err : new Error('Erro ao reproduzir');
setLocalError(error);
onError?.(error);
});
}
};
const handlePause = () => {
if (player && isLoaded) {
player.pause();
}
};
const variantClasses = {
default: 'vlibras-player-default',
minimal: 'vlibras-player-minimal',
compact: 'vlibras-player-compact'
};
if (error) {
return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: `vlibras-error ${className}`, style: { width, height }, ...props, children: (0, jsx_runtime_1.jsxs)("div", { className: "error-content", children: [(0, jsx_runtime_1.jsxs)("p", { children: ["\u274C ", error.message] }), text && ((0, jsx_runtime_1.jsx)("button", { onClick: handleTranslate, className: "retry-button", children: "Tentar novamente" }))] }) }));
}
return ((0, jsx_runtime_1.jsxs)("div", { ref: ref || containerRef, className: `vlibras-player ${variantClasses[variant]} ${className}`, style: { width, height }, ...props, children: [!isLoaded && ((0, jsx_runtime_1.jsxs)("div", { className: "loading-state", children: [(0, jsx_runtime_1.jsx)("div", { className: "spinner" }), (0, jsx_runtime_1.jsx)("p", { children: "Carregando VLibras..." })] })), showControls && isLoaded && ((0, jsx_runtime_1.jsxs)("div", { className: "vlibras-controls", children: [text && ((0, jsx_runtime_1.jsx)("button", { onClick: handleTranslate, disabled: isPlaying, className: "translate-button", children: "\uD83D\uDCDD Traduzir" })), (0, jsx_runtime_1.jsx)("button", { onClick: handlePlay, disabled: isPlaying || !text, className: "play-button", children: "\u25B6\uFE0F Reproduzir" }), isPlaying && ((0, jsx_runtime_1.jsx)("button", { onClick: handlePause, className: "pause-button", children: "\u23F8\uFE0F Pausar" })), allowReplay && !isPlaying && text && ((0, jsx_runtime_1.jsx)("button", { onClick: handlePlay, className: "replay-button", children: "\uD83D\uDD04 Repetir" }))] }))] }));
});
exports.VLibrasPlayer.displayName = 'VLibrasPlayer';
//# sourceMappingURL=VLibrasPlayer.js.map