vlibras-player-webjs
Version:
Biblioteca JavaScript moderna para integração do VLibras Player com React, Vue, Angular e vanilla JS
137 lines • 5.47 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AccessibilityNotifierPlugin = void 0;
/**
* Plugin exemplo para notificações de acessibilidade
*/
class AccessibilityNotifierPlugin {
constructor() {
this.name = 'accessibility-notifier';
this.version = '1.0.0';
this.description = 'Fornece notificações auditivas e visuais para melhor acessibilidade';
this.announcements = null;
this.hooks = {
beforePlay: async (text) => {
this.announce(`Preparando para reproduzir tradução de ${text.length} caracteres`);
return text;
},
onReady: async () => {
this.announce('Sistema VLibras inicializado com suporte a acessibilidade');
}
};
}
async init(context) {
console.log('♿ Accessibility Notifier Plugin iniciado');
// Criar região de anúncios para leitores de tela
this.createAnnouncementRegion();
// Configurar eventos
this.setupEventListeners(context);
}
createAnnouncementRegion() {
this.announcements = document.createElement('div');
this.announcements.id = 'vlibras-accessibility-announcements';
this.announcements.setAttribute('aria-live', 'polite');
this.announcements.setAttribute('aria-atomic', 'true');
this.announcements.style.position = 'absolute';
this.announcements.style.left = '-10000px';
this.announcements.style.width = '1px';
this.announcements.style.height = '1px';
this.announcements.style.overflow = 'hidden';
document.body.appendChild(this.announcements);
}
announce(message, priority = 'polite') {
if (!this.announcements)
return;
this.announcements.setAttribute('aria-live', priority);
this.announcements.textContent = message;
// Limpar após um tempo
setTimeout(() => {
if (this.announcements) {
this.announcements.textContent = '';
}
}, 1000);
}
setupEventListeners(context) {
if (context.events) {
context.events.on('player:ready', () => {
this.announce('VLibras carregado e pronto para uso');
this.showVisualNotification('✅ VLibras Pronto', 'success');
});
context.events.on('translation:start', () => {
this.announce('Iniciando tradução para Libras');
this.showVisualNotification('🔄 Traduzindo...', 'info');
});
context.events.on('translation:complete', () => {
this.announce('Tradução concluída');
this.showVisualNotification('✅ Tradução Concluída', 'success');
});
context.events.on('animation:start', () => {
this.announce('Reproduzindo tradução em Libras');
this.showVisualNotification('▶️ Reproduzindo', 'info');
});
context.events.on('animation:complete', () => {
this.announce('Reprodução da tradução concluída');
});
context.events.on('player:error', (data) => {
this.announce(`Erro no VLibras: ${data.error?.message || 'Erro desconhecido'}`, 'assertive');
this.showVisualNotification('❌ Erro no VLibras', 'error');
});
}
}
showVisualNotification(message, type) {
const notification = document.createElement('div');
notification.className = `vlibras-notification vlibras-notification-${type}`;
notification.textContent = message;
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: ${this.getNotificationColor(type)};
color: white;
padding: 12px 16px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 10000;
font-family: system-ui, -apple-system, sans-serif;
font-size: 14px;
font-weight: 500;
max-width: 300px;
opacity: 0;
transform: translateX(100%);
transition: all 0.3s ease;
`;
document.body.appendChild(notification);
// Animar entrada
requestAnimationFrame(() => {
notification.style.opacity = '1';
notification.style.transform = 'translateX(0)';
});
// Remover após alguns segundos
setTimeout(() => {
notification.style.opacity = '0';
notification.style.transform = 'translateX(100%)';
setTimeout(() => {
if (notification.parentNode) {
notification.parentNode.removeChild(notification);
}
}, 300);
}, 3000);
}
getNotificationColor(type) {
const colors = {
success: '#10B981',
error: '#EF4444',
info: '#3B82F6',
warning: '#F59E0B'
};
return colors[type] || colors.info;
}
async destroy() {
console.log('♿ Accessibility Notifier Plugin destruído');
if (this.announcements && this.announcements.parentNode) {
this.announcements.parentNode.removeChild(this.announcements);
}
}
}
exports.AccessibilityNotifierPlugin = AccessibilityNotifierPlugin;
//# sourceMappingURL=AccessibilityNotifierPlugin.js.map