search

cookpete / react-player

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion
https://cookpete.github.io/react-player
MIT License
9.34k stars 1.15k forks source link

Updating video subtitles dynamically #1162

Closed gmariani closed 6 months ago

gmariani commented 3 years ago

This is a continuation of a previous ticket (which is currently marked closed) but I wanted to bring attention to it

https://github.com/CookPete/react-player/issues/329

When switching videos or toggling options with Config, the player does not appear to respond or update properly. i.e. subtitles from a previous video play instead of using the new subtitles.

mohitp22 commented 3 years ago

not related to this issue , but can we add time stamp in audio timeline?

cookpete commented 3 years ago

This is because we are using memoize-one here, which (incorrectly) assumes that the config will only ever change when the URL changes:

https://github.com/cookpete/react-player/blob/53e4aede5d116c7047e5371c530e55d291ef2ad8/src/ReactPlayer.js#L121-L129

I'm open to ideas. Maybe a config.key to indicate that the config has changed? I don't really want to remove memoize and run the merge.all logic on every update.

cookpete commented 3 years ago

not related to this issue , but can we add time stamp in audio timeline?

@mohitp22 ReactPlayer uses the native browser controls, so adding things like timestamps is not possible. Please create a new issue in the future rather than posting your question on a completely unrelated issue.

gmariani commented 3 years ago

@cookpete I do change the URL when switching subtitles, so I'm not sure why it doesn't pick up on it. I'd be open to use a config.key, that seems like a simple fix. Right now my player only updates the subtitles if ReactPlayer is removed and then re-added. If i switch from a video directly to a different video URL (and a different subtitle file) the config doesn't appear to pick up on the change.

Other use-cases to consider is when you want to switch subtitle files from English to Spanish, the URL would remain the same. Now that I think about it, I ran into this also when I wanted to toggle subtitles on and off. I ended up using a useEffect that would run when the subtitle flag changed. It would then target the actual video element (bypassing ReactPlayer) in order to change the track mode directly.

A possible alternative to config.key would be to break off the subtitle tracks into a separate prop much like URL is. So you could handle the subtitle tracks separately from the rest of the config. Maybe that would be light weight enough for you to update the subtitle tracks on every update.

ShahriarDhruvo commented 1 year ago

Yes, implement a config.key just like the player itself has a key... I guess that will be enough the user will decide when to update with that key.

After updating config.key the player shouldn't reload, the video will play just fine just the config (subtitle files content, files etc) should reload

As @gmariani mentioned above you can also handle subtitles url separately maybe that'll reduce your complexity but we really need a way to update the config whenever we want without updating the whole video player. Can you suggest me where should I change into the react player's source code if I want to do it myself? @cookpete

prayag17 commented 1 year ago

Any updates on this?

haxxxton commented 11 months ago

also looking for any updates on this :)

jimjacob29 commented 3 months ago

any updates on dynamic subtitles update