jwplayer / jwplayer-react-native

MIT License
32 stars 9 forks source link

[FEAT] Don't change video thumbnail to black background during load #79

Open dominictobias opened 3 months ago

dominictobias commented 3 months ago

Is your feature request related to a problem? Please describe.

It would be preferable for us if during a video load, the thumbnail isn't removed.

This illustrates the problem. Note the flash of black on every video as it is played:

https://github.com/user-attachments/assets/848ba030-2450-4dd5-a4b7-c8ec8a0dcc7f

trevorpreston commented 1 month ago

This is a big one for me. I am using this library for an enterprise-level application, which, much like @dominictobias' demo, is a continuous feed videos with a few images here and there. This problem where the screen flashes to black is happening any time a user scrolls between frames, and is unfortunately holding up our release. If anyone has successfully built a scrolling feed of videos like the one above and not experienced this issue, I'd greatly appreciate your insight.

Forgive my ignorance, but does the "enhancement" tag imply that this is the current intended behavior? My instinct says this feels like a bug, but every open source project interprets things differently. Does the tag say anything about the priority of this ticket? cc: @Jmilham21

I am digging through the module and looking for a fix. If I find a solution I'll certainly PR it, but I am being limited to the end of this week before being tasked with searching for a different player. Any assistance is greatly appreciated!

dominictobias commented 1 month ago

I know this isn't ideal but we actually removed the thumbs:

// Because JW initially shows the thumb, then goes black while loading the video,
  // it actually looks worse than just starting with black as it causes a flicker.
  // Raised https://github.com/jwplayer/jwplayer-react-native/issues/79
  const playlistWithoutThumb = useMemo(
    () =>
      playlist.map(item => ({
        ...item,
        image: undefined,
      })),
    [playlist],
  )

Another thing you could try is to overlay the thumb on top of the video and then hide it yourself on a load event.

Neither solution is of course ideal 🤷‍♂️

Jmilham21 commented 1 month ago

This use case is possible with some customization of the UI but I agree the UI/UX isn't ideal out of the box. I'd ask you to create a JWP Support ticket for this, so we can better internally review and come up with a solution for you here.

I have created something similar for Android in the past, where the video thumbnail is loaded into a separate view and hidden/shown when the content is not playing. It's certainly possible to do here, but it would require some custom logic or a modification to the native SDK to allow thumbnails to be displayed whenever content is loading.

The use case is valuable and something we should look into, so please create the internal ticket so I can get it up for internal review. If you wanted to try it yourself, I'd suggest taking the path I explained above, with a