Rybená

https://docs.rybena.com.br
Admin
Rybená is a comprehensive digital accessibility solution and video player featuring 20+...
Tokens:65,509
Snippets:656
Trust Score:7.4
Update:6 months ago
Show doc for...
Tokens:
Raw
### Complete Examples

Source: https://docs.rybena.com.br/docs/api/player-control

Provides complete examples demonstrating various use cases of the Rybená API.

```APIDOC
### Example 1: Floating Player

This example creates a player that can be moved to different positions:

```javascript
RybenaApi.getInstance().handleLoaded(() => {
  // Show the player
  RybenaApi.getInstance().openPlayer();
  
  // Position in the top-right corner
  RybenaApi.getInstance().setCoordinates(
    window.innerWidth - 420,
    20
  );
  
  // Set smaller size
  RybenaApi.getInstance().setSize(0.8);
});
```
```

```APIDOC
### Example 2: Transparent Mode Player

This example shows how to use transparent mode for a more immersive experience:

```javascript
RybenaApi.getInstance().handleLoaded(() => {
  // Show the player
  RybenaApi.getInstance().openPlayer();
  
  // Set transparent mode
  RybenaApi.getInstance().setToTransparentMode();
  
  // Position in the center
  const centerX = window.innerWidth / 2 - 200;
  const centerY = window.innerHeight / 2 - 150;
  RybenaApi.getInstance().setCoordinates(centerX, centerY);
  
  // Translate a text
  RybenaApi.getInstance().translate("Welcome!");
});
```
```

```APIDOC
### Example 3: Responsive Player

This example adjusts the player's size and position based on the screen size:

```javascript
function adjustPlayerForScreen() {
  const isMobile = window.innerWidth < 768;
  
  if (isMobile) {
    // Smaller size for mobile
    RybenaApi.getInstance().setSize(0.6);
    RybenaApi.getInstance().setCoordinates(10, 10);
  } else {
    // Normal size for desktop
    RybenaApi.getInstance().setSize(1.0);
    RybenaApi.getInstance().setCoordinates(20, 20);
  }
}

RybenaApi.getInstance().handleLoaded(() => {
  RybenaApi.getInstance().openPlayer();
  adjustPlayerForScreen();
  
  // Adjust when the window is resized
  window.addEventListener('resize', adjustPlayerForScreen);
});
```
```

```APIDOC
### Example 4: Visibility Toggle

This example creates a button to toggle the player's visibility:

```javascript
let isPlayerVisible = false;

function togglePlayer() {
  if (isPlayerVisible) {
    RybenaApi.getInstance().closePlayer();
  } else {
    RybenaApi.getInstance().openPlayer();
  }
  isPlayerVisible = !isPlayerVisible;
}

RybenaApi.getInstance().handleLoaded(() => {
  // Configure button
  document.getElementById('togglePlayerBtn').addEventListener('click', togglePlayer);
});
```
```

--------------------------------

### Basic Initialization Example

Source: https://docs.rybena.com.br/docs/api/event-handlers

Demonstrates using handleLoaded to ensure the API is ready before opening the player and translating text.

```javascript
RybenaApi.getInstance().handleLoaded(() => {
  console.log("Rybená API está pronta!");
  
  // Mostra o player
  RybenaApi.getInstance().openPlayer();
  
  // Traduz um texto
  RybenaApi.getInstance().translate("Olá, bem-vindo à Rybená!");
});
```

--------------------------------

### Initialize Rybena API on Load

Source: https://docs.rybena.com.br/docs/api/accessibility-features

Logs a message to the console once the Rybena API is loaded. This is a basic setup for confirming the API is ready.

```javascript
RybenaApi.getInstance().handleLoaded(() => {
        console.log("Rybená carregada");
      });
```

--------------------------------

### Minimalist Configuration

Source: https://docs.rybena.com.br/docs/getting-started/configuration

A compact player setup positioned on the right without the LIBRAS button.

```html
<script
  type="text/javascript"
  src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?size=250&positionPlayer=right&disableLibrasButton=true"
></script>
```

--------------------------------

### Rybená Access Token URL Example

Source: https://docs.rybena.com.br/docs/integrations/mobile-apps

Shows how to construct the WebView URL for Rybená integration, including the necessary access token for authentication.

```javascript
// URL da WebView com token
const rybenaUrl = 'https://repository.rybena.com.br/webview/index.html?token=SEU-TOKEN-AQUI';
```

--------------------------------

### Translation State Verification Example

Source: https://docs.rybena.com.br/docs/api/event-handlers

Demonstrates checking the translation status immediately and after a delay.

```javascript
RybenaApi.getInstance().handleLoaded(() => {
  RybenaApi.getInstance().openPlayer();
  
  // Verifica se está traduzindo
  console.log("Está traduzindo:", RybenaApi.getInstance().isTranslating());
  
  // Traduz um texto
  RybenaApi.getInstance().translate("Verificando estado...");
  
  // Verifica novamente após 1 segundo
  setTimeout(() => {
    console.log("Está traduzindo:", RybenaApi.getInstance().isTranslating());
  }, 1000);
});
```

--------------------------------

### Sequential Translation Example

Source: https://docs.rybena.com.br/docs/api/event-handlers

Shows how to process an array of strings in sequence by chaining translation calls via the handleTranslate callback.

```javascript
const texts = [
  "Primeira frase",
  "Segunda frase",
  "Terceira frase"
];

let currentIndex = 0;

function translateNext() {
  if (currentIndex < texts.length) {
    console.log("Traduzindo:", texts[currentIndex]);
    RybenaApi.getInstance().translate(texts[currentIndex]);
    currentIndex++;
  } else {
    console.log("Todas as traduções concluídas!");
  }
}

RybenaApi.getInstance().handleLoaded(() => {
  RybenaApi.getInstance().openPlayer();
  
  // Configura callback para traduzir o próximo texto
  RybenaApi.getInstance().handleTranslate(() => {
    translateNext();
  });
  
  // Começa a tradução
  translateNext();
});
```

--------------------------------

### Flutter Dependency Installation

Source: https://docs.rybena.com.br/docs/integrations/mobile-apps

Add the webview_flutter package to your pubspec.yaml file.

```yaml
dependencies:
  webview_flutter: ^4.0.0
```

--------------------------------

### Initialization and Basic Usage

Source: https://docs.rybena.com.br/docs/api

How to initialize the Rybená script in API mode and perform basic operations like opening the player and translating text.

```APIDOC
## Initialization

### Description
Initialize the Rybená script with the `mode=api` parameter to enable background operation and remove presentation texts.

### Request Example
<script
  type="text/javascript"
  src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?mode=api"
></script>

## Basic Usage

### Description
Use the singleton instance `RybenaApi.getInstance()` to control the player and trigger translations.

### Code Example
// Aguarda a Rybená carregar
RybenaApi.getInstance().handleLoaded(() => {
  // Mostra o player
  RybenaApi.getInstance().openPlayer();

  // Traduz um texto
  RybenaApi.getInstance().translate("Olá, bem-vindo à Rybená!");
});
```

--------------------------------

### Exemplo Completo de Barra de Acessibilidade Customizada com Estilização

Source: https://docs.rybena.com.br/docs/getting-started/customization

Demonstração completa de uma barra de acessibilidade customizada, incluindo estilos CSS para a barra e seus botões. Note que ao usar uma barra customizada, configurações como 'positionBar' e 'backgroundColorBar' da barra padrão não terão efeito.

```html
<style>
  .custom-rybena-bar {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: #316181;
    border-radius: 8px;
  }

  .custom-rybena-bar button {
    padding: 8px 16px;
    background: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    color: #316181;
    transition: background 0.3s;
  }

  .custom-rybena-bar button:hover {
    background: #f0f0f0;
  }
</style>

<div id="custom-rybena-div" class="custom-rybena-bar">
  <button class="btn-rybena-sign-language">🤟 LIBRAS</button>
  <button class="btn-rybena-voice">🔊 Voz</button>
  <button class="btn-rybena-vision">♿ Acessibilidade</button>
</div>
```

--------------------------------

### Translation Completion Callback Example

Source: https://docs.rybena.com.br/docs/api/event-handlers

Shows how to trigger code specifically after a translation operation finishes.

```javascript
RybenaApi.getInstance().handleLoaded(() => {
  RybenaApi.getInstance().openPlayer();
  
  // Configura callback para quando a tradução terminar
  RybenaApi.getInstance().handleTranslate(() => {
    console.log("Tradução concluída!");
    alert("Tradução finalizada!");
  });
  
  // Traduz um texto
  RybenaApi.getInstance().translate("Este texto será traduzido");
});
```

--------------------------------

### GET /dom/master/latest/rybena.js

Source: https://docs.rybena.com.br/docs/getting-started/configuration

Configures the Rybená script behavior, appearance, and positioning using query parameters.

```APIDOC
## GET /dom/master/latest/rybena.js

### Description
Configures the Rybená translation script by appending parameters to the script source URL.

### Method
GET

### Endpoint
https://cdn.rybena.com.br/dom/master/latest/rybena.js

### Parameters
#### Query Parameters
- **positionPlayer** (string) - Optional - Horizontal position of the player (desktop): 'left', 'right'. Default: 'left'.
- **positionPlayerMobile** (string) - Optional - Horizontal position of the player (mobile): 'left', 'right'. Default: 'left'.
- **positionBar** (string) - Optional - Horizontal position of the accessibility bar: 'left', 'right'. Default: 'left'.
- **offsetTopBar** (string) - Optional - Vertical position of the bar (e.g., '40%', '100px'). Default: '40%'.
- **offsetX** (number) - Optional - Horizontal offset of the player in pixels. Default: 60.
- **offsetY** (number) - Optional - Vertical offset of the player in pixels. Default: 60.
- **size** (number) - Optional - Size of the player in pixels. Default: 280.
- **backgroundColorBar** (string) - Optional - Hexadecimal background color for the accessibility bar. Default: '#316181'.
- **zIndexBar** (number) - Optional - Z-index stack order for the accessibility bar.
- **renderTimeout** (number) - Optional - Render delay in milliseconds. Default: 0.
- **mode** (string) - Optional - Operation mode: 'full', 'api'. Default: 'full'.
```

--------------------------------

### Flutter Basic Implementation

Source: https://docs.rybena.com.br/docs/integrations/mobile-apps

A complete example of integrating Rybená within a Flutter StatefulWidget using WebViewController.

```dart
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class RybenáIntegration extends StatefulWidget {
  @override
  _RybenáIntegrationState createState() => _RybenáIntegrationState();
}

class _RybenáIntegrationState extends State<RybenáIntegration> {
  late WebViewController _controller;
  
  // URL da WebView da Rybená com seu token de autenticação
  final String rybenaUrl = 'https://repository.rybena.com.br/webview/index.html?token=SEU-TOKEN-AQUI';
  
  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageFinished: (String url) {
            // WebView carregada com sucesso
          },
        ),
      )
      ..loadRequest(Uri.parse(rybenaUrl));
  }
  
  // Função para manipular o tamanho da Rybená
  Future<void> setSize(int size) async {
    await _controller.runJavaScript(
      'RybenaApi.getInstance().setSize($size);'
    );
  }
  
  // Função para abrir o player
  Future<void> openPlayer() async {
    await _controller.runJavaScript(
      'RybenaApi.getInstance().openPlayer();'
    );
  }
  
  // Função para fechar o player
  Future<void> closePlayer() async {
    await _controller.runJavaScript(
      'RybenaApi.getInstance().closePlayer();'
    );
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Rybená Integration')),
      body: Column(
        children: [
          Expanded(
            child: WebViewWidget(controller: _controller),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(
                  onPressed: () => setSize(300),
                  child: Text('Definir Tamanho'),
                ),
                ElevatedButton(
                  onPressed: openPlayer,
                  child: Text('Abrir Player'),
                ),
                ElevatedButton(
                  onPressed: closePlayer,
                  child: Text('Fechar Player'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
```

--------------------------------

### Instalar Rybená no Wix

Source: https://docs.rybena.com.br/docs/integrations/wix

Cole este script na seção de Código Personalizado do Wix para aplicar a Rybená a todas as páginas.

```html
<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js"></script>
```

--------------------------------

### Exemplo Completo de Customização da Rybená com Barra Customizada

Source: https://docs.rybena.com.br/docs/getting-started/customization

Este exemplo demonstra a integração completa da Rybená, incluindo a barra de acessibilidade customizada, estilos CSS e o script principal da Rybená. Certifique-se de que o script da Rybená esteja incluído no cabeçalho do seu documento.

```html
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    {/* Rybená Script */}
    <script
      type="text/javascript"
      src="https://cdn.rybena.com.br/dom/master/latest/rybena.js"
    ></script>

    {/* Custom Styles */}
    <style>
      .custom-rybena-bar {
        display: flex;
        gap: 10px;
        padding: 10px;
        background: #316181;
        border-radius: 8px;
        margin: 20px 0;
      }

      .custom-rybena-bar button {
        padding: 8px 16px;
        background: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        color: #316181;
        transition: background 0.3s;
      }

      .custom-rybena-bar button:hover {
        background: #f0f0f0;
      }
    </style>
  </head>
  <body>
    {/* Custom Accessibility Bar */}
    <div id="custom-rybena-div" class="custom-rybena-bar">
      <button class="btn-rybena-sign-language">🤟 LIBRAS</button>
      <button class="btn-rybena-voice">🔊 Voz</button>
      <button class="btn-rybena-vision">♿ Acessibilidade</button>
    </div>

    {/* Your Content */}
    <h1>Bem-vindo ao Meu Site</h1>
    <p>Este é um exemplo de site com Rybená customizada.</p>
  </body>
</html>
```

--------------------------------

### Exemplo: Player Responsivo

Source: https://docs.rybena.com.br/docs/api/player-control

Ajusta o tamanho e a posição do player com base no tamanho da tela, garantindo uma boa experiência tanto em dispositivos móveis quanto em desktops. Inclui um listener para redimensionamento da janela.

```javascript
function adjustPlayerForScreen() {
  const isMobile = window.innerWidth < 768;
  
  if (isMobile) {
    // Tamanho menor para mobile
    RybenaApi.getInstance().setSize(0.6);
    RybenaApi.getInstance().setCoordinates(10, 10);
  } else {
    // Tamanho normal para desktop
    RybenaApi.getInstance().setSize(1.0);
    RybenaApi.getInstance().setCoordinates(20, 20);
  }
}

RybenaApi.getInstance().handleLoaded(() => {
  RybenaApi.getInstance().openPlayer();
  adjustPlayerForScreen();
  
  // Ajusta quando a janela é redimensionada
  window.addEventListener('resize', adjustPlayerForScreen);
});
```

--------------------------------

### Instalar Rybená em HTTP no Wix

Source: https://docs.rybena.com.br/docs/integrations/wix

Use este script se a sua página Wix não utiliza o protocolo HTTPS. Substitua 'https' por 'http'.

```html
<script type="text/javascript" src="http://cdn.rybena.com.br/dom/master/latest/rybena.js"></script>
```

--------------------------------

### Exemplo: Player em Modo Transparente

Source: https://docs.rybena.com.br/docs/api/player-control

Mostra como usar o modo transparente para uma experiência de usuário mais imersiva, combinando com posicionamento central e tradução de texto.

```javascript
RybenaApi.getInstance().handleLoaded(() => {
  // Mostra o player
  RybenaApi.getInstance().openPlayer();
  
  // Define modo transparente
  RybenaApi.getInstance().setToTransparentMode();
  
  // Posiciona no centro
  const centerX = window.innerWidth / 2 - 200;
  const centerY = window.innerHeight / 2 - 150;
  RybenaApi.getInstance().setCoordinates(centerX, centerY);
  
  // Traduz um texto
  RybenaApi.getInstance().translate("Bem-vindo!");
});
```

--------------------------------

### Integrate Rybená with Vue 3

Source: https://docs.rybena.com.br/docs/api/examples

A Vue 3 component setup using the Composition API to manage the Rybená script lifecycle and API interactions.

```typescript
<script setup lang="ts">
import { ref, onMounted } from 'vue';

declare global {
  interface Window {
    RybenaApi?: {
      getInstance: () => {
        handleLoaded: (callback: () => void) => void;
        openPlayer: () => void;
        closePlayer: () => void;
        translate: (text: string) => void;
        switchToLibras: () => void;
        switchToVoz: () => void;
        pause: () => void;
        play: () => void;
        stop: () => void;
        setSpeed: (speed: number) => void;
        isTranslating: () => boolean;
        handleTranslate: (callback: () => void) => void;
      };
    };
  }

const isLoaded = ref(false);
const isTranslating = ref(false);
const text = ref('');
const speed = ref(1.0);
const mode = ref<'libras' | 'voz'>('libras');

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://cdn.rybena.com.br/dom/master/latest/rybena.js?mode=api';
  script.async = true;
  script.onload = () => {
    if (window.RybenaApi) {
      window.RybenaApi.getInstance().handleLoaded(() => {
        isLoaded.value = true;
        window.RybenaApi.getInstance().openPlayer();
        window.RybenaApi.getInstance().switchToLibras();
      });
    }
  };
  document.head.appendChild(script);
});

const translate = () => {
  if (text.value && window.RybenaApi) {
    isTranslating.value = true;
    window.RybenaApi.getInstance().translate(text.value);
    
    window.RybenaApi.getInstance().handleTranslate(() => {
      isTranslating.value = false;
    });
  }
};

const pause = () => {
  if (window.RybenaApi) {
    window.RybenaApi.getInstance().pause();
  }
};

const play = () => {
  if (window.RybenaApi) {
    window.RybenaApi.getInstance().play();
  }
};

const stop = () => {
  if (window.RybenaApi) {
    window.RybenaApi.getInstance().stop();
    isTranslating.value = false;
  }
};

const setSpeed = (newSpeed: number) => {
  speed.value = newSpeed;
  if (window.RybenaApi) {
    window.RybenaApi.getInstance().setSpeed(newSpeed);
  }
};

const setMode = (newMode: 'libras' | 'voz') => {
  mode.value = newMode;
  if (window.RybenaApi) {
    if (newMode === 'libras') {
      window.RybenaApi.getInstance().switchToLibras();
    } else {
      window.RybenaApi.getInstance().switchToVoz();
    }
  }
};
</script>
```

--------------------------------

### Initialize and Configure Rybena API

Source: https://docs.rybena.com.br/docs/api/examples

This script initializes the Rybena API, sets up event handlers for loading and translation completion, and configures UI elements. It requires the Rybena JavaScript library to be loaded.

```javascript
    // Elementos DOM
    const loading = document.getElementById('loading');
    const controls = document.getElementById('controls');
    const textInput = document.getElementById('textInput');
    const status = document.getElementById('status');
    
    const librasBtn = document.getElementById('librasBtn');
    const vozBtn = document.getElementById('vozBtn');
    const slowBtn = document.getElementById('slowBtn');
    const normalBtn = document.getElementById('normalBtn');
    const fastBtn = document.getElementById('fastBtn');
    const translateBtn = document.getElementById('translateBtn');
    const pauseBtn = document.getElementById('pauseBtn');
    const playBtn = document.getElementById('playBtn');
    const stopBtn = document.getElementById('stopBtn');
    
    let currentMode = 'libras';
    let currentSpeed = 1.0;
    
    // Aguarda a Rybená carregar
    RybenaApi.getInstance().handleLoaded(() => {
      console.log('Rybená carregada!');
      
      // Mostra os controles
      loading.style.display = 'none';
      controls.style.display = 'block';
      
      // Abre o player
      RybenaApi.getInstance().openPlayer();
      RybenaApi.getInstance().switchToLibras();
    });
    
    // Configura callback para quando a tradução terminar
    RybenaApi.getInstance().handleTranslate(() => {
      console.log('Tradução concluída!');
      updateStatus('ready', 'Pronto para traduzir');
      updateButtonStates();
    });
    
    // Funções de controle
    function translate() {
      const text = textInput.value.trim();
      if (text) {
        updateStatus('translating', 'Traduzindo...');
        RybenaApi.getInstance().translate(text);
        updateButtonStates();
      }
    }
    
    function pause() {
      RybenaApi.getInstance().pause();
      updateStatus('ready', 'Tradução pausada');
    }
    
    function play() {
      RybenaApi.getInstance().play();
      updateStatus('translating', 'Traduzindo...');
    }
    
    function stop() {
      RybenaApi.getInstance().stop();
      updateStatus('ready', 'Tradução parada');
      updateButtonStates();
    }
    
    function setMode(mode) {
      currentMode = mode;
      if (mode === 'libras') {
        RybenaApi.getInstance().switchToLibras();
        librasBtn.classList.add('active');
        vozBtn.classList.remove('active');
      } else {
        RybenaApi.getInstance().switchToVoz();
        vozBtn.classList.add('active');
        librasBtn.classList.remove('active');
      }
    }
    
    function setSpeed(speed) {
      currentSpeed = speed;
      RybenaApi.getInstance().setSpeed(speed);
      
      slowBtn.classList.remove('active');
      normalBtn.classList.remove('active');
      fastBtn.classList.remove('active');
      
      if (speed === 0.75) {
        slowBtn.classList.add('active');
      } else if (speed === 1.0) {
        normalBtn.classList.add('active');
      } else if (speed === 1.5) {
        fastBtn.classList.add('active');
      }
    }
    
    function updateStatus(type, message) {
      status.className = 'status ' + type;
      status.textContent = message;
    }
    
    function updateButtonStates() {
      const isTranslating = RybenaApi.getInstance().isTranslating();
      const hasText = textInput.value.trim().length > 0;
      
      translateBtn.disabled = !hasText || isTranslating;
      pauseBtn.disabled = !isTranslating;
      playBtn.disabled = !isTranslating;
      stopBtn.disabled = !isTranslating;
    }
    
    // Event listeners
    translateBtn.addEventListener('click', translate);
    pauseBtn.addEventListener('click', pause);
    playBtn.addEventListener('click', play);
    stopBtn.addEventListener('click', stop);
    
    librasBtn.addEventListener('click', () => setMode('libras'));
    vozBtn.addEventListener('click', () => setMode('voz'));
    
    slowBtn.addEventListener('click', () => setSpeed(0.75));
    normalBtn.addEventListener('click', () => setSpeed(1.0));
    fastBtn.addEventListener('click', () => setSpeed(1.5));
    
    textInput.addEventListener('input', updateButtonStates);
  
```

--------------------------------

### Initialize Accessibility Manager and Apply Settings

Source: https://docs.rybena.com.br/docs/api/typescript-support

Instantiates the AccessibilityManager and demonstrates setting line height, contrast, and retrieving preferences. Ensure the API is loaded before use.

```typescript
RybenaApi.getInstance().handleLoaded(() => {
  const api = RybenaApi.getInstance();
  const accessibilityManager = new AccessibilityManager(api);
  
  // Ativa altura da linha
  accessibilityManager.toggleLineHeight();
  
  // Define contraste escuro
  accessibilityManager.setContrast('dark');
  
  // Obtém preferências atuais
  const prefs = accessibilityManager.getPreferences();
  console.log('Preferências:', prefs);
});
```

--------------------------------

### Exemplo de Barra de Acessibilidade com Links

Source: https://docs.rybena.com.br/docs/getting-started/customization

Use links em vez de botões para acionar as funcionalidades de acessibilidade. O atributo 'href' deve ser definido conforme a necessidade da navegação.

```html
<div id="custom-rybena-div">
  <a href="#" class="btn-rybena-sign-language"> Traduzir em LIBRAS </a>
  <a href="#" class="btn-rybena-voice"> Ouvir texto </a>
  <a href="#" class="btn-rybena-vision"> Acessibilidade </a>
</div>
```

--------------------------------

### Exemplo Completo: Tradução Básica Rybená

Source: https://docs.rybena.com.br/docs/api/translation-control

Demonstra como inicializar a API, abrir o player e traduzir um texto simples.

```javascript
RybenaApi.getInstance().handleLoaded(() => {
  // Mostra o player
  RybenaApi.getInstance().openPlayer();
  
  // Traduz um texto
  RybenaApi.getInstance().translate("Bem-vindo à Rybená!");
});
```

--------------------------------

### Exemplo Completo de Integração

Source: https://docs.rybena.com.br/docs/api/getting-started

Exemplo de uma página HTML completa integrando botões de controle com a API Rybená.

```html
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Rybená API Exemplo</title>
    <script
      type="text/javascript"
      src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?mode=api"
    ></script>
  </head>
  <body>
    <h1>Exemplo de API Rybená</h1>
    <button id="translateBtn">Traduzir Texto</button>
    <button id="pauseBtn">Pausar</button>
    <button id="playBtn">Continuar</button>

    <script>
      // Aguarda a Rybená carregar
      RybenaApi.getInstance().handleLoaded(() => {
        console.log("Rybená API está pronta!");

        // Mostra o player
        RybenaApi.getInstance().openPlayer();

        // Configura botões
        document
          .getElementById("translateBtn")
          .addEventListener("click", () => {
            RybenaApi.getInstance().translate(
              "Olá, este é um exemplo de tradução!"
            );
          });

        document.getElementById("pauseBtn").addEventListener("click", () => {
          RybenaApi.getInstance().pause();
        });

        document.getElementById("playBtn").addEventListener("click", () => {
          RybenaApi.getInstance().play();
        });
      });
    </script>
  </body>
</html>
```

--------------------------------

### Inicialização com Modo API e Idioma

Source: https://docs.rybena.com.br/docs/api/language-control

Combine o parâmetro 'mode=api' com o parâmetro de idioma para utilizar as funcionalidades programáticas da Rybená.

```html
<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?mode=api&lang=ptBR"></script>
```

--------------------------------

### Implementar site multilíngue com seletor

Source: https://docs.rybena.com.br/docs/getting-started/internationalization

Exemplo completo de estrutura HTML com estilos e script da Rybená para um site multilíngue.

```html
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Meu Site Multilíngue</title>

    <style>
      .language-selector {
        display: flex;
        gap: 10px;
        padding: 10px;
        background: #f5f5f5;
        border-radius: 8px;
      }

      .language-selector button {
        padding: 8px 16px;
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
      }

      .language-selector button:hover {
        background: #e0e0e0;
      }

      .language-selector button.active {
        background: #316181;
        color: white;
        border-color: #316181;
      }
    </style>

    <script
      type="text/javascript"
      src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?lang=ptBR"
    ></script>
  </head>
  <body>
    <!-- Seletor de idioma -->
    <div class="language-selector">
      <button class="ryb-language-ptBR active">🇧🇷 Português</button>
      <button class="ryb-language-esES">🇪🇸 Español</button>
      <button class="ryb-language-enUS">🇺🇸 English</button>
    </div>

    <!-- Conteúdo do site -->
    <h1>Bem-vindo ao Meu Site</h1>
    <p>Este é um exemplo de site multilíngue com Rybená.</p>
  </body>
</html>
```

--------------------------------

### Instalar dependência React Native WebView

Source: https://docs.rybena.com.br/docs/integrations/mobile-apps

Comando para adicionar o pacote necessário ao projeto React Native.

```bash
npm install react-native-webview
# ou
yarn add react-native-webview
```

--------------------------------

### Controlar Contraste Claro

Source: https://docs.rybena.com.br/docs/api/accessibility-features

Gerencie o modo de contraste claro. Use `toggleLightContrast` para alternar, `startLightContrast` para ativar e `stopLightContrast` para desativar.

```javascript
// Toggle
RybenaApi.getInstance().toggleLightContrast()

// Ativar
RybenaApi.getInstance().startLightContrast()

// Desativar
RybenaApi.getInstance().stopLightContrast()
```

--------------------------------

### Instalação Básica da Rybená

Source: https://docs.rybena.com.br/docs/getting-started/installation

Adicione este script dentro da tag head do seu documento HTML para carregar a Rybená.

```html
<script
  type="text/javascript"
  src="https://cdn.rybena.com.br/dom/master/latest/rybena.js"
></script>
```

--------------------------------

### Implementar Player de Tradução com Controles

Source: https://docs.rybena.com.br/docs/api/translation-control

Configura os botões da interface para interagir com o player, incluindo tradução, reprodução, alternância de modo e ajuste de velocidade.

```javascript
RybenaApi.getInstance().handleLoaded(() => {
  RybenaApi.getInstance().openPlayer();
  
  // Configura botões
  document.getElementById('translateBtn').addEventListener('click', () => {
    const text = document.getElementById('textInput').value;
    if (text) {
      RybenaApi.getInstance().translate(text);
    }
  });
  
  document.getElementById('pauseBtn').addEventListener('click', () => {
    RybenaApi.getInstance().pause();
  });
  
  document.getElementById('playBtn').addEventListener('click', () => {
    RybenaApi.getInstance().play();
  });
  
  document.getElementById('stopBtn').addEventListener('click', () => {
    RybenaApi.getInstance().stop();
  });
  
  document.getElementById('librasBtn').addEventListener('click', () => {
    RybenaApi.getInstance().switchToLibras();
  });
  
  document.getElementById('vozBtn').addEventListener('click', () => {
    RybenaApi.getInstance().switchToVoz();
  });
  
  // Controle de velocidade
  document.getElementById('speedSlow').addEventListener('click', () => {
    RybenaApi.getInstance().setSpeed(0.75);
  });
  
  document.getElementById('speedNormal').addEventListener('click', () => {
    RybenaApi.getInstance().setSpeed(1.0);
  });
  
  document.getElementById('speedFast').addEventListener('click', () => {
    RybenaApi.getInstance().setSpeed(1.5);
  });
});
```

--------------------------------

### Configure Multiple Callbacks for Translation Events

Source: https://docs.rybena.com.br/docs/api/event-handlers

Demonstrates setting up several distinct functions to execute when a translation event occurs. This allows for modular handling of different actions upon translation completion.

```javascript
RybenaApi.getInstance().handleLoaded(() => {
  console.log("1. Rybená carregada");
  
  RybenaApi.getInstance().openPlayer();
  
  // Callback 1: Log de tradução
  RybenaApi.getInstance().handleTranslate(() => {
    console.log("2. Tradução concluída");
  });
  
  // Callback 2: Atualizar interface
  RybenaApi.getInstance().handleTranslate(() => {
    document.getElementById('status').textContent = "Pronto";
  });
  
  // Callback 3: Traduzir próximo texto
  RybenaApi.getInstance().handleTranslate(() => {
    if (hasMoreTexts()) {
      translateNext();
    }
  });
  
  // Traduz um texto
  RybenaApi.getInstance().translate("Texto de exemplo");
});
```

--------------------------------

### Download do Plugin Rybená

Source: https://docs.rybena.com.br/docs/getting-started/pdf-integration

Link para baixar o plugin customizado necessário para a integração.

```text
https://drive.google.com/file/d/1qJZ8iIe0MBzSYnQz9VV38YRsrjAf8sPq/view?usp=sharing
```

--------------------------------

### Implementar visualizador de PDF acessível com Rybená

Source: https://docs.rybena.com.br/docs/getting-started/pdf-integration

Exemplo de estrutura HTML para exibir um PDF acessível através de um iframe, incluindo o script da Rybená e estilos básicos.

```html
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PDF com Acessibilidade Rybená</title>

    <style>
      .pdf-container {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
      }

      .pdf-iframe {
        width: 100%;
        height: 800px;
        border: 1px solid #ddd;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .pdf-header {
        margin-bottom: 20px;
        padding: 20px;
        background: #f5f5f5;
        border-radius: 8px;
      }

      .pdf-header h1 {
        margin: 0 0 10px 0;
        color: #316181;
      }

      .pdf-header p {
        margin: 0;
        color: #666;
      }
    </style>

    <script
      type="text/javascript"
      src="https://cdn.rybena.com.br/dom/master/latest/rybena.js"
    ></script>
  </head>
  <body>
    <div class="pdf-container">
      <div class="pdf-header">
        <h1>Manual do Usuário</h1>
        <p>
          Este documento está acessível com Rybená. Selecione qualquer texto
          para tradução em LIBRAS ou voz.
        </p>
      </div>

      <iframe
        class="pdf-iframe"
        src="https://seuservidor.com/pdfjs-rybena/web/index.html?file=https://seuservidor.com/documentos/manual.pdf#page=1&zoom=auto"
        title="Visualizador de PDF com acessibilidade Rybená"
      ></iframe>
    </div>
  </body>
</html>
```

--------------------------------

### Inicialização da API com Idioma Específico

Source: https://docs.rybena.com.br/docs/api/language-control

Adicione o parâmetro 'lang' à URL do script para definir o idioma de inicialização da Rybená.

```html
<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?lang=ptBR"></script>
```

```html
<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?lang=esES"></script>
```

```html
<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?lang=enUS"></script>
```

--------------------------------

### Integrate Rybená with Vanilla JavaScript

Source: https://docs.rybena.com.br/docs/api/examples

A basic HTML structure and CSS for implementing the Rybená service without a framework.

```html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rybená - Vanilla JavaScript</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    
    .container {
      background: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    textarea {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
      margin-bottom: 15px;
    }
    
    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 15px;
    }
    
    button {
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      background-color: #007bff;
      color: white;
      font-size: 14px;
    }
    
    button:hover {
      background-color: #0056b3;
    }
    
    button:disabled {
      background-color: #ccc;
      cursor: not-allowed;
    }
    
    button.active {
      background-color: #0056b3;
    }
    
    .status {
      padding: 10px;
      border-radius: 4px;
      margin-top: 15px;
    }
    
    .status.translating {
      background-color: #d4edda;
      color: #155724;
    }
    
    .status.ready {
      background-color: #d1ecf1;
      color: #0c5460;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Rybená - Vanilla JavaScript</h1>
    
    <div id="loading" style="display: none;">
      <p>Carregando Rybená...</p>
    </div>
    
    <div id="controls" style="display: none;">
      <textarea
        id="textInput"
        placeholder="Digite o texto para traduzir..."
        rows="4"
      ></textarea>
      
      <div class="controls">
```

--------------------------------

### handleLoaded() - API Load Callback

Source: https://docs.rybena.com.br/docs/api/event-handlers

Sets up a callback function to be executed once the Rybena API has finished loading. It's recommended to use this before making any API calls.

```APIDOC
## handleLoaded()

### Description
Configures a callback function that will be executed when the Rybena API finishes loading.

### Method
`RybenaApi.getInstance().handleLoaded(callback)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
RybenaApi.getInstance().handleLoaded(() => {
  console.log("Rybená está pronta!");
  RybenaApi.getInstance().openPlayer();
});
```

### Response
#### Success Response (200)
None (This is a configuration method)

#### Response Example
None
```

--------------------------------

### Acessar métodos da API

Source: https://docs.rybena.com.br/docs/api

A API utiliza um padrão singleton para acessar todos os métodos disponíveis.

```javascript
RybenaApi.getInstance().methodName();
```

--------------------------------

### Exemplo: Player Flutuante

Source: https://docs.rybena.com.br/docs/api/player-control

Demonstra como abrir, posicionar e redimensionar o player para criar um efeito flutuante, ideal para notificações ou elementos secundários.

```javascript
RybenaApi.getInstance().handleLoaded(() => {
  // Mostra o player
  RybenaApi.getInstance().openPlayer();
  
  // Posiciona no canto superior direito
  RybenaApi.getInstance().setCoordinates(
    window.innerWidth - 420,
    20
  );
  
  // Define tamanho menor
  RybenaApi.getInstance().setSize(0.8);
});
```

--------------------------------

### Exemplo de Script Customizado para Rybená

Source: https://docs.rybena.com.br/docs/integrations/brightspace

Adicione parâmetros à URL do script para customizar a aparência e o comportamento do player da Rybená. Certifique-se de que os parâmetros são válidos e compatíveis com a documentação da Rybená.

```html
<script type="text/javascript" src="https://cdn.rybena.com.br/dom/master/latest/rybena.js?positionPlayer=right&size=300"></script>
```

--------------------------------

### Configuração de CSP em Next.js

Source: https://docs.rybena.com.br/docs/getting-started/csp-configuration

Implemente a política de segurança através do arquivo next.config.js usando a função headers.

```javascript
// next.config.js
const cspHeader = `
  default-src 'self';
  script-src 'self' cdn.rybena.com.br libras.rybena.com.br;
  connect-src 'self' libras.rybena.com.br tts.rybena.com.br dicio.rybena.com.br repository.rybena.com.br;
  frame-src repository.rybena.com.br;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: cdn.rybena.com.br libras.rybena.com.br repository.rybena.com.br;
  font-src 'self' cdn.rybena.com.br repository.rybena.com.br;
  media-src 'self' repository.rybena.com.br;
  object-src 'none';
`;

module.exports = {
  async headers() {
    return [
      {
        source: "/:path*",
        headers: [
          {
            key: "Content-Security-Policy",
            value: cspHeader.replace(/\n/g, ""),
          },
        ],
      },
    ];
  },
};
```

--------------------------------

### Player de Tradução Completo

Source: https://docs.rybena.com.br/docs/api/translation-control

Este exemplo demonstra como criar um player de tradução completo com controles de UI para traduzir, pausar, reproduzir, parar, alternar entre LIBRAS e voz, e ajustar a velocidade da fala.

```APIDOC
## Exemplo 5: Player de Tradução

### Description
Este exemplo cria um player de tradução completo com controles de UI.

### Method
N/A (JavaScript Example)

### Endpoint
N/A (JavaScript Example)

### Parameters
N/A

### Request Example
```javascript
RybenaApi.getInstance().handleLoaded(() => {
  RybenaApi.getInstance().openPlayer();
  
  document.getElementById('translateBtn').addEventListener('click', () => {
    const text = document.getElementById('textInput').value;
    if (text) {
      RybenaApi.getInstance().translate(text);
    }
  });
  
  document.getElementById('pauseBtn').addEventListener('click', () => {
    RybenaApi.getInstance().pause();
  });
  
  document.getElementById('playBtn').addEventListener('click', () => {
    RybenaApi.getInstance().play();
  });
  
  document.getElementById('stopBtn').addEventListener('click', () => {
    RybenaApi.getInstance().stop();
  });
  
  document.getElementById('librasBtn').addEventListener('click', () => {
    RybenaApi.getInstance().switchToLibras();
  });
  
  document.getElementById('vozBtn').addEventListener('click', () => {
    RybenaApi.getInstance().switchToVoz();
  });
  
  document.getElementById('speedSlow').addEventListener('click', () => {
    RybenaApi.getInstance().setSpeed(0.75);
  });
  
  document.getElementById('speedNormal').addEventListener('click', () => {
    RybenaApi.getInstance().setSpeed(1.0);
  });
  
  document.getElementById('speedFast').addEventListener('click', () => {
    RybenaApi.getInstance().setSpeed(1.5);
  });
});
```

### Response
N/A (JavaScript Example)
```
Tokens:
Raw