Controle do Player

A API Rybená oferece métodos completos para controlar a visibilidade, posição, tamanho e modo de exibição do player.

Visibilidade do Player

openPlayer()

Mostra o player Rybená na tela.

RybenaApi.getInstance().openPlayer()

Retorno: void

Exemplo:

RybenaApi.getInstance().handleLoaded(() => {
  RybenaApi.getInstance().openPlayer();
});

closePlayer()

Esconde o player Rybená da tela.

RybenaApi.getInstance().closePlayer()

Retorno: void

Exemplo:

// Esconde o player após 5 segundos
setTimeout(() => {
  RybenaApi.getInstance().closePlayer();
}, 5000);

Modo de Exibição

setToNormalMode()

Define o player para o modo normal, com cabeçalho e botões de ação visíveis.

RybenaApi.getInstance().setToNormalMode()

Retorno: void

Exemplo:

RybenaApi.getInstance().setToNormalMode();

setToTransparentMode()

Define o player para o modo transparente, sem cabeçalho e botões de ação.

RybenaApi.getInstance().setToTransparentMode()

Retorno: `void**

Atenção: Neste modo, a Rybená não terá suas funções de controle de tradução, e não será possível interagir com a Rybená.

Exemplo:

RybenaApi.getInstance().setToTransparentMode();

Posicionamento

setCoordinates(x, y)

Posiciona o player Rybená nas coordenadas especificadas.

RybenaApi.getInstance().setCoordinates(x, y)

Parâmetros:

x (number): Coordenada horizontal em pixels
y (number): Coordenada vertical em pixels

Retorno: void

Exemplo:

// Posiciona o player no canto superior esquerdo
RybenaApi.getInstance().setCoordinates(20, 20);

// Posiciona o player no centro da tela
const centerX = window.innerWidth / 2 - 200;
const centerY = window.innerHeight / 2 - 150;
RybenaApi.getInstance().setCoordinates(centerX, centerY);

Dica: Use window.innerWidth e window.innerHeight para calcular posições relativas ao tamanho da janela.

Tamanho

setSize(value)

Modifica o tamanho do player de forma proporcional.

RybenaApi.getInstance().setSize(value)

Parâmetros:

value (number): Valor de escala (ex: 1.0 para tamanho normal, 1.5 para 50% maior)

Retorno: `void**

Exemplo:

// Tamanho normal
RybenaApi.getInstance().setSize(1.0);

// 50% maior
RybenaApi.getInstance().setSize(1.5);

// 25% menor
RybenaApi.getInstance().setSize(0.75);

Exemplos Completos

Exemplo 1: Player Flutuante

Este exemplo cria um player que pode ser movido para diferentes posições:

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 2: Player em Modo Transparente

Este exemplo mostra como usar o modo transparente para uma experiência mais imersiva:

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!");
});

Exemplo 3: Player Responsivo

Este exemplo ajusta o tamanho e posição do player baseado no tamanho da tela:

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);
});

Exemplo 4: Toggle de Visibilidade

Este exemplo cria um botão para alternar a visibilidade do player:

let isPlayerVisible = false;

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

RybenaApi.getInstance().handleLoaded(() => {
  // Configura botão
  document.getElementById('togglePlayerBtn').addEventListener('click', togglePlayer);
});

Boas Práticas

Dica: Sempre chame openPlayer() antes de definir posição ou tamanho para garantir que o player esteja visível.

Atenção: O modo transparente remove todos os controles do player. Use apenas quando você não precisa de interação direta com o player.

Sugestão: Para uma melhor experiência do usuário, considere salvar as preferências de posição e tamanho do player em localStorage.

Resumo dos Métodos

Método	Descrição	Parâmetros
`openPlayer()`	Mostra o player	Nenhum
`closePlayer()`	Esconde o player	Nenhum
`setToNormalMode()`	Modo normal com controles	Nenhum
`setToTransparentMode()`	Modo transparente sem controles	Nenhum
`setCoordinates(x, y)`	Define posição	`x` (number), `y` (number)
`setSize(value)`	Define tamanho	`value` (number)

Controle do Player

Visibilidade do Player

openPlayer()

closePlayer()

Modo de Exibição

setToNormalMode()

setToTransparentMode()

Posicionamento

setCoordinates(x, y)

Tamanho

setSize(value)

Exemplos Completos

Exemplo 1: Player Flutuante

Exemplo 2: Player em Modo Transparente

Exemplo 3: Player Responsivo

Exemplo 4: Toggle de Visibilidade

Boas Práticas

Resumo dos Métodos

Conteúdo Relacionado

Controle de Tradução

Event Handlers

Exemplos

Nesta página