⚛ React Netflix Player
A React Player based in Netflix Designer
ℹ Player de video com as funcionalidades existentes no atual player da Netflix Web.
Recursos | Tecnologias | Como Utilizar | Propriedades | Estilização | Eventos | Modos | Controles | Como Desenvolver
📦 Recursos implementados
- Reprodução de vídeos com Loading e Memória temporária (Buffer);
- Listagem de lista de reprodução com marcação do vídeo atual e auto sequência;
- Ação para prosseguir para o próximo item;
- Tratamento de evento de término de vídeo;
- Recursos de Play/Pause, Avançar/Retroceder e FullScreen;
- Suporte a múltiplos links de reprodução;
- Informações da mídia em execução;
- Playback Rate, Possibilitando alterar a velocidade de Reprodução;
- Sistema de ocultação dos controles mediante tempo de espera;
- Customização de cor e fonte;
- Tratamento de erros;
- Disponível em Inglês e Português.
🧱 Tecnologias
No desenvolvimento desse projeto foi ultilizado
-
[Sass](https://sass-lang.com/) - Webpack
Qualidade de Código
⚙ Como utilizar
Adicione o react-netflix-player em seu projeto executando:
npm install react-netflix-player
ou
yarn add react-netflix-player
Após realize o import do componente no arquivo que deseja adicionar o player
import { ReactNetflixPlayer } from "react-netflix-player"
Pronto, seu componente já está pronto para ser utililado, basta criá-lo em seu arquivo.
<ReactNetflixPlayer/>
📃 Propriedades
src: string | vídeo
Parâmetro Obrigatório
Vídeo ou endereço do vídeo a ser reproduzido
Ao alterar esse parâmetro todo o estado do componente é restaurado para o inicial, como informações de posição, buffer e controles.
title: string,
Texto ao ser exibido como título do vídeo em execução, este texto aparece quando o vídeo fica em situação PAUSADO por muito tempo.
Se essa informação não for informada, nenhuma informação será exibida na tela.
subTitle: string
Texto auxiliar ao parâmetro de title, sua informação será exibida abaixo do título se informada.
titleMedia: string
Texto localizado na barra de controles, seguindo o design da Netflix, este campo contém o Título da Mídia em reprodução ou o nome da Playlists.
Se não for enviado, nenhuma informação será apresentada na barra de controles.
extraInfoMedia: string
Texto auxiliar ao parâmetro de titleMedia, sua informação será exibida ao lado do título se informada.
playerLanguage: language
Informa em qual língua os textos do player devem ser mostrados. Por padrão os textos são apresentados em Português.
Línguas disponíveis: pt (Português) e en (Inglês)
👋 Hey! Sabe escrever em outro idioma? Vai ser um prazer receber a sua contribuição.
overlayEnabled: true
Informa se o modo StandyBy estará ativo. (Tela com informações do vídeo no modo PAUSADO)
Informando false, o player não apresentará a tela.
autoControllCloseEnabled: true
Informa se os controles do player devem se auto ocultar.
Informando false os controles ficarão fixos em tela durante todo o vídeo.
fullPlayer: true
Parâmetro informa se player deve ocupar toda a área da WebView, por padrão é setado como true
Observações: Esse parâmetro não se refere ao modo FullScreen do navegador. Se esse parâmetro for passado como false, o player ocupara a área disponível informada em seu componente pai.
backButton: false
Informa se o botão de voltar ⬅ será visível quando os controles estiverem ativos, por padrão ele está desativado.
autoPlay: false
Informa se o vídeo deverá iniciar automáticamente, por padrão o valor é false;
Obs: Funcionalidade pode apresentar problemas nas versões mas recentes do navegador Chrome, que bloqueia o autoplay de vídeos se não existir uma interação do usuário.
startPosition: 0
Informa em qual segundo a reprodução do vídeo deverá iniciar
playbackRateEnable: true
Informa se as opções de Playback Rate podem ser acessadas, por padrão o valor é true
playbackRateOptions: []
Array com as velocidades disponíveis no player.
Valor padrão [‘0.25’, ‘0.5’, ‘0.75’, ‘Normal’, ‘1.25’, ‘1.5’, ‘2’]
Observação: os valores devem ser informados na ordem em que se deseja que sejem listados. O valor Normal poderá ser substituído por 1, porém, ele sempre será mostrado como Normal.
É necessário que o valor playbackRateEnable esteje ativado.
playbackRateStart: 1
Velocidade inicial do vídeo
Valor padrão 1
dataNext: {}
Objeto com os dados a serem renderizados na área de Próximo Vídeo, este parâmetro não é obrigatório para utilizar a funcionalidade. É possível enviar somente a função a ser executada.
{
title: 'Texto a ser exibido',
description: 'Descrição'
}
reprodutionList: []
Array com itens que compõem a lista de reprodução, devem ser informados já ordenados
Os itens devem ser informados como objetos
{
id: int // Identificador, será enviado a função informada,
playing: boolean // Utilizado para diferenciar o item que está em reprodução no momento
}
onCanPlay: function()
Função disparada no momento em que o vídeo se tornar pronto para reprodução.
Ela tem a mesma função do evento onCanPlay() da tag <video>, recebendo os mesmo parâmetros da função.
onTimeUpdate: function()
Função disparada a cada alteração de frames do vídeo.
Ela tem a mesma função do evento onTimeUpdate() da tag <video>, recebendo os mesmo parâmetros da função.
onEnded: function()
Função disparada ao término do vídeo
Ela tem a mesma função do evento onEnded() da tag <video>, recebendo os mesmo parâmetros da função.
onErrorVideo: function()
Função disparada quando um erro acontecer na reprodução/busca do vídeo.
Ela tem a mesma função do evento onErrorVideo() da tag <video>, recebendo os mesmo parâmetros da função.
onNextClick: function()
Função disparada ao clicar no controle de Próximo Video, sem esse parâmetro o ícone não estará disponível
onClickItemListReproduction: function()
Função disparada ao selecionar um ítem da lista de reprodução criada com o parâmetro reprodutionList, será enviada a função o id relacionado ao item
onCrossClick: function()
Função disparada ao fechar o vídeo
Observações: O Fechar vídeo só estará disponível enquanto o vídeo não estiver pronto para reprodução.
Ele foi implementado como rota de fulga do usuário caso o vídeo demore muito a iniciar. O parâmetro não é obrigatório e a sua ausência não remove o ícone de fechar, sendo aconselhável a sua implementação.
qualities: [] (BETA)
Array com as qualidades da mídia em execução.
Não deve ser implemtado na atual versão do Player
💅 Estilização
Para alterar as cores do Player e fontes, utilize os seguintes parâmetros.
primaryColor ‘#HEX’
Cor de destaque para os intens primários, a cor padrão é a #03dffc para alterar informe a cor desejada em hexadecimal, rgb ou rgba.
secundaryColor ‘#HEX’
Cor de destaque para os intens secundários, a cor padrão é a #ffffff para alterar informe a cor desejada em hexadecimal, rgb ou rgba.
fontFamily ‘Font’
Fonte informada para todos os textos do player
Valor padrão:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
🧨 Eventos
Erro
Caso ocorra algum erro com o vídeo em execução, será renderizado a informação do erro, com a listagem de outros links, para que o usuário possa tentar reproduzir o vídeo em outra qualidade.
-
O botão de fechar é exibido
-
A função onErrorVideo será disparada.
Controles
Quando o mouse não se move por mais de 5 segundos, automáticamente os controlles são ocultados em tela, voltando a aparecer ao mover o cursor.
StandBy
O standby, é uma tela visível quando o vídeo está pausado e não existe movimentos do cursor.
Ao mover o mouse, ou executar o play pelo space o modo é desativado.
Loading
Quando o vídeo está buscando frames para reprodução e não existem frames suficientes o loading é ativado.
🕹 Controles
Double Click
Ativa/Desativa o FullScreen (Tela cheia).
Space
Dispara o evento Pause/Play
🔎 Modos
Loading Inicial
Ao exibir o componente, ele inicia a busca dos dados do vídeo, até o vídeo estar pronto para reprodução.
Controles
Controles disponível com o vídeo em execução.
Observações: Player configurado com todas as propriedades aceitáveis, no modo FullScreen
StandBy
Player PAUSADO em estado de standby, as informações do título são renderizadas.
👩💻 Ajude-me a desenvolver
Para testar/desenvolver o projeto siga os seguintes passos.
📦 Requisitos
yarn ⬇ Baixe aqui.
Git ⬇ Baixe aqui.
Com o yarn instalado, faça o clone do projeto
git clone https://github.com/Lucasmg37/react-netflix-player
Navegue até a pasta do projeto e instale as dependências
yarn
Terminado, você já pode começar a desenvolver
Servidor de testes local removido temporariamente. ⚠️
Para fazer o build, execute
yarn run build
O arquivo final estará disponível na pasta dist
✨ Melhorei o projeto, e agora?
Chegou a hora de virar um contribuidor! Siga estes passos.
- Faça um fork do projeto.
- Crie uma nova branch com as suas alterações:
git checkout -b my-feature - Salve as alterações e crie uma mensagem de commit contando o que você fez:
git commit -m "feature: My new feature" - Envie as suas alterações:
git push origin my-feature
Em pouco tempo você será retornado.
Caso tenha alguma dúvida confira este guia de como contribuir no GitHub
✌️ Contribuidores
|
@Prophetaa |
@lfoliveir4 |
@romilodev |
@ridhwaans |
| :——————————————————————————————————————————————: | :—————————————————————————————————————————-: | :————————————————————————————————————————–: | :————————————————————————————————————————–: |
📝 Licença
Este projeto esta sobe a licença MIT.
Feito com ❤ e ☕ por Lucas Dias. 👋🏽 Entre em contato!