Pular para o conteúdo principal

Componentes de Vídeo

Última atualização: 30 de julho de 2024

Visão Geral​

Este documento descreve os principais componentes React Native utilizados para implementar a funcionalidade de vídeo no aplicativo Promoter.

Componentes Principais​

VideoCard​

O componente VideoCard é responsável por exibir miniaturas dos vídeos na interface do usuário.

Localização: src/screens/ActivityNote/components/VideoCard/index.tsx

Funcionalidades:

  • Exibe uma miniatura do vídeo
  • Converte Base64 para URI de arquivo
  • Fornece interação para abrir o vídeo em tela cheia

Exemplo de Uso:

<VideoCard
  base64Uri={attachment.value}
  id={attachment.id}
  onPress={handleOpenVideo}
  currentType="before"
/>

VideoModal​

O componente VideoModal é responsável por exibir vídeos em tela cheia com controles de reprodução.

Localização: src/screens/ActivityNote/components/VideoModal/index.tsx

Funcionalidades:

  • Reprodução de vídeo em tela cheia
  • Controles de play/pause
  • Opção para excluir o vídeo
  • Fechamento automático ao final da reprodução

Exemplo de Uso:

<VideoModal
  visible={videoModalVisible}
  onClose={() => setVideoModalVisible(false)}
  videoUri={currentVideoUri}
  handleDelete={() => handleDeleteVideo(currentVideoId)}
/>

Controladores​

CheckinTabController​

O controlador CheckinTabController gerencia a lógica de captura e processamento de vídeos.

Localização: src/screens/ActivityNote/subscreens/Checkin/checkinTabController.ts

Funcionalidades:

  • Iniciar e parar gravação de vídeo
  • Processar vídeo capturado
  • Salvar vídeo no banco de dados local
  • Atualizar estado da aplicação

Métodos Principais:

  • startVideoRecording(): Inicia a gravação de vídeo
  • stopVideoRecording(): Finaliza a gravação de vídeo
  • processVideoResult(): Processa o vídeo capturado
  • saveVideoToDatabase(): Salva o vídeo no banco de dados local

Telas​

Checkin​

A tela Checkin implementa a interface para captura de vídeos no início de uma atividade.

Localização: src/screens/ActivityNote/subscreens/Checkin/index.tsx

Funcionalidades:

  • Interface para captura de vídeo
  • Exibição de miniaturas de vídeos capturados
  • Indicador de gravação em andamento
  • Contador de tempo de gravação

Checkout​

A tela Checkout implementa a interface para captura de vídeos no final de uma atividade.

Localização: src/screens/ActivityNote/subscreens/Checkout/index.tsx

Funcionalidades:

  • Interface para captura de vídeo
  • Exibição de miniaturas de vídeos capturados
  • Comparação entre vídeos "antes" e "depois"

Compartilhamento​

ShareBottomSheet​

O componente ShareBottomSheet permite compartilhar vídeos com aplicativos externos.

Localização: src/screens/Records/components/RecordOfflineCard/ShareBottomSheet/index.tsx

Funcionalidades:

  • Compartilhamento de vídeos via intent do sistema
  • Opções para compartilhar por WhatsApp, e-mail, etc.
  • Geração de arquivos temporários para compartilhamento

Considerações de UI/UX​

Indicadores Visuais​

  • Ícone de Vídeo: Diferencia vídeos de imagens na interface
  • Indicador de Gravação: Círculo vermelho pulsante durante a gravação
  • Contador de Tempo: Exibe o tempo decorrido durante a gravação

Feedback ao Usuário​

  • Carregamento: Indicador visual durante o processamento do vídeo
  • Confirmação: Feedback após salvamento bem-sucedido
  • Erro: Mensagens claras em caso de falha na gravação

Boas Práticas​

  1. Limpeza de Recursos: Liberar recursos de câmera e vídeo quando não estiverem em uso
  2. Tratamento de Erros: Implementar tratamento adequado para falhas na captura de vídeo
  3. Responsividade: Garantir que os componentes de vídeo se adaptem a diferentes tamanhos de tela
  4. Acessibilidade: Fornecer alternativas para usuários com necessidades especiais