garliqbread/react-netflix-player

The video player based in Netflix Player

⚛ 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   |    Eventos   |    Modos   |    Controles   |    Como Desenvolver

📦 Recursos implementados

1. Reprodução de vídeos com Loading e Memória temporária;
2. Listagem de lista de reprodução com marcação do vídeo em atual;
3. Ação para prosseguir para o próximo item;
4. Ação definida ao fim do 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 (Feature);
11. Tratamento de erros.

🧱 Tecnologias

No desenvolvimento desse projeto foi ultilizado

• React

• Sass

• Babel

• Webpack

Qualidade de Código

• ESlint

• Prettier

⚙ Como utilizar

Em seu projeto react, execute o comando npm install react-netflix-player para adicionar o react-netflix-player em seu projeto.

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 Produção em andamento, pode ser usado para inserir o nome da lista de reprodução.

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.

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

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

Observações: As opções não podem ser alteradas. Disponíveis as velocidades 0.25, 0.5, 0.75, Normal, 1.25, 1.5 e 2.

dataNext: {}

Objeto com os dados a serem redenizados 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

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

onEnded: function()

Função disparada ao término do vídeo

Ela tem a mesma função do evento onEnded() da tag

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

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

🧨 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 do mouse.

StandBy

O standby, é uma tela visível quando o vídeo está pausado e não existe moviementos do cursor de mouse.

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

Coloca player em modo de Tela Cheia ou Sai do modo de 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

NodeJs ⬇ Baixe aqui.

Git ⬇ Baixe aqui.

Com o node 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

    npm install

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

    npm 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

    npm 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

📝 Licença

Este projeto esta sobe a licença MIT.

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