Pular para o conteúdo principal

Integração de Player de Vídeo nas Notas de Promotoria

Visão Geral​

Para enriquecer a aplicação, foi introduzida a capacidade de exibir vídeos de forma genérica. Seja a partir de arquivos de upload (Blob) ou de fontes externas como o YouTube, essa funcionalidade provê um player de vídeo consistente e performático, encapsulado em um modal.

A implementação é baseada na biblioteca Vidstack/react e utiliza um padrão de contexto global para gerenciar o estado do player, garantindo que o modal de vídeo possa ser invocado de qualquer parte da aplicação de forma desacoplada e eficiente.

Arquitetura da Solução​

A solução é composta por três partes principais:

  1. Contexto Global de Vídeo (VideoViewerContext): Um novo contexto React para gerenciar a visibilidade e os dados do vídeo a ser exibido.
  2. Componente de Carrossel (CarouselSection): Atualizado para suportar tanto imagens quanto vídeos, tratando-os como "itens de mídia" e renderizando uma thumbnail apropriada para cada tipo.
  3. Integração com a Página (PromoterNotePage): A página de atendimento do promotor agora busca os dados de vídeo da API e os fornece ao CarouselSection.

Fluxo de Dados​

  1. A página [nuPrm].tsx busca os dados da nota, que agora incluem um array VIDEOS.
  2. Os vídeos são filtrados e passados para o componente CarouselSection.
  3. O CarouselSection unifica imagens e vídeos em uma única lista (mediaItems).
  4. Ao clicar em um item de vídeo, o componente dispara o fluxo de download e exibição.
  5. O VideoViewerContextProvider renderiza um modal (Dialog) contendo o player MediaPlayer do Vidstack.

Componentes Detalhados​

VideoViewerContext​

Este contexto fornece uma solução global para a visualização de vídeos em um modal. Ele abstrai o gerenciamento de estado e a renderização do player, permitindo que qualquer componente invoque o modal de vídeo de forma desacoplada.

Para uma análise aprofundada da sua implementação, estado interno e hooks, consulte a documentação completa do VideoViewerContext.

CarouselSection​

Este componente foi projetado para exibir uma coleção de mídias (imagens e vídeos) em um carrossel interativo. Ele gerencia a abertura do visualizador correto para cada tipo de mídia e orquestra o download sob demanda e a geração de thumbnails para os vídeos.

Para entender em detalhes suas props, a lógica de unificação de mídias e o gerenciamento de estado, veja a documentação completa do CarouselSection.

Configuração e Tipagem​

  • package.json: Adicionada a dependência @vidstack/react.
  • _app.tsx: O VideoViewerContextProvider foi adicionado à árvore de provedores globais para garantir que o modal de vídeo esteja disponível em toda a aplicação.
  • types.d.ts:
    • A interface Note em src/service/promoter/types.d.ts foi estendida para incluir VIDEOS: VideoData[].
    • A configuração global Settings agora inclui UTILIZAVIDEO?: 'S' | 'N', permitindo que a funcionalidade seja ativada ou desativada por configuração.

Conclusão​

Esta implementação robustece a coleta de informações em campo, oferecendo uma experiência de usuário fluida e integrada para visualização de mídias. A arquitetura baseada em contexto e hooks customizados promove alta coesão, baixo acoplamento e excelente manutenibilidade, permitindo que a funcionalidade de visualização de vídeo seja facilmente reutilizada ou estendida no futuro.