lucasmg37 / react-netflix-player

The video player based in Netflix Player

👋 Hello, Eu sou o Lucas Dias

💡 Desenvolvedor Web Fullstack

👨‍💻 Colaborador na 4All.

🎓 Graduado em Gestão da Tecnologia da Informação

📦 Principais tecnologias que já trabalhei

✨ Como você pode me encontrar

react-netflix-player's Issues

Video controls, buttons are not visible on the player

I am using the ReactNetflixPlayer in a React application
First, I installed via npm install react-netflix-player and imported import ReactNetflixPlayer from "react-netflix-player"

<div>
      <ReactNetflixPlayer 
          fullPlayer 
          autoPlay
          startPosition = { 0 }
          overlayEnabled
          src={url_path} 
          title={title}
          playerLanguage = "en"/>
  </div>

There is no controls or icons for the play/pause button, rewind, fast-forward, volume, go next, episode list, settings or fullscreen

All the player buttons seen in the demo and readme are missing
Only one button is showing which is the list of choosing playback speed i..e 1x, 1.25x, 2x etc

Perhaps the type of the video source does not allow the controls to be showing?

edit:
it looks like a css issue. not everything is brought to front

Uncaught Error in <ReactPlayer> invalid hook

hello,
I upgraded react to the latest version and now there is an issue rendering the ReactPlayer component. Didnt happen before

react-dom.development.js:18687 The above error occurred in one of your React components:
...
line 115341
line 115342    e.default = function (n) {
line 115343        var e = n.title,
line 115344             t = void 0 !== e && e,
line 115345             a = n.subTitle,
    ...
    at e.default (http://localhost:3000/static/js/bundle.js:115343:15)
    at div
    at Player (http://localhost:3000/static/js/bundle.js:8314:108)
    at div
    at div
    at Tab (http://localhost:3000/static/js/bundle.js:6132:104)
    at Routes (http://localhost:3000/static/js/bundle.js:122353:5)
    at Router (http://localhost:3000/static/js/bundle.js:122286:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:121095:5)
    at SWRConfig$1 (http://localhost:3000/static/js/bundle.js:137530:21)
    at App (http://localhost:3000/static/js/bundle.js:2528:86)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

react-dom.development.js:12056  Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1476:1)
    at useRef (react.development.js:1515:1)
    at e.default (ReactNetflixPlayer.js:1:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)

here is the package.json

"dependencies": {
     "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-netflix-player": "^1.1.7",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "redux": "^4.2.0",
},

Ran the same example

import React, { useEffect, useContext } from 'react';
import ReactNetflixPlayer from "react-netflix-player";

const Player = () => {
const [playerItem, setPlayerItem] = useSharedState('playerContext')

 return (
      <React.Fragment>
      {playerItem && (
        <div id={"player"} >
          <ReactNetflixPlayer
          ...
          />
        </div>
        )}
        </React.Fragment>
    );
}
export default Player

do you have any clue why this is happening? thank you

Set a default font

Implement multi language (EN/PT)

When mouse on progress bar, showing the image of that time?

Some video player has a feature: When you come on progress bar with your mouse, it shows you the image of that time. Can we add this feature?

netflix example: http://prntscr.com/t7ic3l

Funciona na web?

Olá Lucas, beleza?
Mano, esse player é top das galaxias kkk, existe alguma forma de usar ele na web? seja usando php ou html+css+java+php

Abraços.

Phone Support

Hi I was wondering if this player is supported by phones?

When using latest version of react, error occurs.

×
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Aceitar cor como parâmetro

Permitir customização de player com cor predefinida pelo usuário.

I get indicates a memory leak in my application warning when implement React-netflix-player.

Hello, I have this warning only whenever I try to implement

<ReactNetflixPlayer src={myMp4FileState}/>

into my component, if I disable the React-netflix-player and switch to a standard HTML tag like:

<video controls>
<source src = {myMp4FileState} />
</video>

the warning will disappear and everything is fine again, no more warning fire out, I've tested it a few times by disabling and enabling the React-netflix-player, so I think it's from the React-netflix-player, hope you can have a look, thanks.

For more specific, it's said:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at c.default

ReferenceError react is not defined

Hi @Lucasmg37

I am trying out the new version but

ReferenceError
react is not defined
eval
https://2v37wj.csb.app/node_modules/react-netflix-player/dist/ReactNetflixPlayer.js:1:348
$csb$eval
https://2v37wj.csb.app/node_modules/react-netflix-player/dist/ReactNetflixPlayer.js:1:14623
H
https://codesandbox.io/static/js/sandbox.d75da7eb7.js:1:100039
K.evaluate
https://codesandbox.io/static/js/sandbox.d75da7eb7.js:1:112791
ge.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.d75da7eb7.js:1:123173
c
https://codesandbox.io/static/js/sandbox.d75da7eb7.js:1:112406
$csb$eval
/src/components/Player/index.js:3
> 3 | import ReactNetflixPlayer from "react-netflix-player";

ERROR in ./src/components/Player/index.js 8:0-54

Module not found: Error: Can't resolve 'react-netflix-player' in './src/components/Player'

Found this related thread
https://stackoverflow.com/questions/32070303/uncaught-referenceerror-react-is-not-defined

They are saying the solution is to either remove externals: { 'react': 'React' } in webpack.config, (so React will be bundled with your javascript) or load the React framework externally before this file is executed

Help me investigate?
reproducible sandbox -> https://codesandbox.io/s/debugging-2v37wj?file=/package.json

Thank you

Criar Read.me

• Criar Texto Base
• Criar imagem de exibição
• Adicionar Recursos da API
• Adicionar dependências
• Adicionar NPM

Unable to configure playback rate

Hi. I wanted to configure the playback rate in the player and set it to custom values.

Is there any way to do it?

Also, in the latest release (1.1.5), the player language is still being taken as Portuguese even after setting it to English.

Possibility to style the colors and fonts Player's

• Apply Colors

• Apply Default Font

• Implement Styled Components https://styled-components.com/

Update styled components

Atualização da Lib de scss para styled components

Full Screen on Safari

When I click to see the full screen on safari, it doesn't work, only on chrome.

PlaybackRate

Implements PlaybackRate on player

HLS Support

Hls Streams are not working

Adding Subtitle Options?

Hi,
Thats a great work.. Can you add subtitle options? Its necessary to use i think.

High CPU Usage while playing Mp4

Playing

Pausing

player becume unresponsive