O Zustube é um reprodutor de vídeos desenvolvido para um curso específico. O objetivo principal é fornecer aos usuários a capacidade de assistir aos vídeos do curso, que são organizados em módulos. Uma funcionalidade essencial do reprodutor é o recurso de reprodução automática ao finalizar um vídeo.
Para gerenciar os estados das informações no projeto, foi utilizado o Zustand, uma biblioteca de gerenciamento de estado para aplicativos React. O Zustand oferece uma abordagem simples e eficiente para compartilhar e atualizar o estado global do aplicativo, facilitando o controle das informações relacionadas aos vídeos, como progresso, reprodução automática e gerenciamento dos módulos.
Além disso, o reprodutor de vídeos utiliza a biblioteca "react-player" para exibir os vídeos de forma elegante e responsiva. Essa biblioteca fornece uma solução pronta para reproduzir diferentes formatos de vídeo e oferece recursos avançados, como controle de volume, reprodução em tela cheia e integração com legendas.
Para garantir a acessibilidade do reprodutor de vídeos, o projeto utiliza o Radix UI, uma biblioteca de componentes acessíveis para o React. Com o Radix UI, é possível criar elementos de interface de usuário que são compatíveis com as diretrizes de acessibilidade, permitindo que pessoas com deficiências possam desfrutar do conteúdo do curso sem obstáculos.
O Zustube é uma demonstração prática de como o Zustand pode ser aproveitado para gerenciar o estado global de um reprodutor de vídeos em um aplicativo React. Ele utiliza a biblioteca "react-player" para reproduzir vídeos e o Radix UI para garantir a acessibilidade. Com essa combinação de tecnologias, os usuários podem ter uma experiência agradável e interativa ao assistir aos vídeos de um curso.
Para instalar as bibliotecas e dependências necessárias, execute o seguinte comando no terminal:
npm installPara rodar a API, utilize o seguinte comando:
npm run serverIsso iniciará a API e estará disponível em http://localhost:3333.
Para rodar o cliente, utilize o seguinte comando:
npm run devIsso iniciará o servidor de desenvolvimento do cliente e estará disponível em http://localhost:5173.
- Reprodução de vídeos
- Auto play ao finalizar um vídeo
Este projeto está aberto a contribuições. Se você deseja contribuir, siga as etapas abaixo:
- Faça um fork deste repositório.
- Crie uma nova branch com sua modificação:
git checkout -b minha-modificacao. - Faça as alterações necessárias e faça commit:
git commit -am 'Minha modificação'. - Envie para o repositório remoto:
git push origin minha-modificacao. - Envie uma solicitação de pull para análise.
Este projeto está licenciado sob a MIT License.
Para obter suporte ou fazer perguntas relacionadas a este projeto, entre em contato através do GitHub: Link para o repositório do projeto.