vlibras-player-webjs
Version:
Biblioteca JavaScript moderna para integração do VLibras Player com React, Vue, Angular e vanilla JS
73 lines • 4.24 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useEffect, useRef, useState } from 'react';
import { useVLibrasContext } from './VLibrasProvider';
export const VLibrasPlayer = 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 } = useVLibrasContext();
const containerRef = useRef(null);
const [localError, setLocalError] = useState(null);
const error = contextError || localError;
// Initialize player in container
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
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 (_jsx("div", { ref: ref, className: `vlibras-error ${className}`, style: { width, height }, ...props, children: _jsxs("div", { className: "error-content", children: [_jsxs("p", { children: ["\u274C ", error.message] }), text && (_jsx("button", { onClick: handleTranslate, className: "retry-button", children: "Tentar novamente" }))] }) }));
}
return (_jsxs("div", { ref: ref || containerRef, className: `vlibras-player ${variantClasses[variant]} ${className}`, style: { width, height }, ...props, children: [!isLoaded && (_jsxs("div", { className: "loading-state", children: [_jsx("div", { className: "spinner" }), _jsx("p", { children: "Carregando VLibras..." })] })), showControls && isLoaded && (_jsxs("div", { className: "vlibras-controls", children: [text && (_jsx("button", { onClick: handleTranslate, disabled: isPlaying, className: "translate-button", children: "\uD83D\uDCDD Traduzir" })), _jsx("button", { onClick: handlePlay, disabled: isPlaying || !text, className: "play-button", children: "\u25B6\uFE0F Reproduzir" }), isPlaying && (_jsx("button", { onClick: handlePause, className: "pause-button", children: "\u23F8\uFE0F Pausar" })), allowReplay && !isPlaying && text && (_jsx("button", { onClick: handlePlay, className: "replay-button", children: "\uD83D\uDD04 Repetir" }))] }))] }));
});
VLibrasPlayer.displayName = 'VLibrasPlayer';
//# sourceMappingURL=VLibrasPlayer.js.map