⚛ React Netflix Player

A React Player based in Netflix Designer

ℹ Player de video com as funcionalidades existentes no atual player da Netflix Web.

📦 Recursos implementados

1. Reprodução de vídeos com Loading e Memória temporária (Buffer);
2. Listagem de lista de reprodução com marcação do vídeo atual e auto sequência;
3. Ação para prosseguir para o próximo item;
4. Tratamento de evento de término de vídeo;
5. Recursos de Play/Pause, Avançar/Retroceder e FullScreen;
6. Suporte a múltiplos links de reprodução;
7. Informações da mídia em execução;
8. Playback Rate, Possibilitando alterar a velocidade de Reprodução;
9. Sistema de ocultação dos controles mediante tempo de espera;
10. Customização de cor e fonte;
11. Tratamento de erros;
12. Disponível em Inglês e Português.

🧱 Tecnologias

No desenvolvimento desse projeto foi ultilizado

• React

• Sass

• Styled Components

• Babel

• Webpack

Qualidade de Código

• ESlint

• Prettier

⚙ 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.

1. O botão de fechar é exibido

2. 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

Na pasta example coontém a implementação do player para testes

Para rodar a aplicação, execute

    yarn start

Um servidor local estará disponível para visualização

Geralmente o endereço será o http://localhost:8080/

Caso não seja, verifique o endereço listado em seu terminal após o comando anterior.

✔ O Player será renderizado com um vídeo de teste. Se este estiver indisponível, altere no arquivo example/index.js a propriedade src do componente para um endereço válido.

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.

1. Faça um fork do projeto.
2. Crie uma nova branch com as suas alterações: git checkout -b my-feature
3. Salve as alterações e crie uma mensagem de commit contando o que você fez: git commit -m "feature: My new feature"
4. 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 | | :------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: |

📝 Licença

Este projeto esta sobe a licença MIT.

Feito com ❤ e ☕ por Lucas Dias. 👋🏽 Entre em contato!