[BUG]: Video first frame do flickering when player load video and start playing, Demo Attached

ZakirBangash commented 5 months ago

Version

react-native-video: ^6.0.0-rc.0

react-native: 0.71.14

Video URL: HLS m3u8

What platforms are you having the problem on?

Android

Architecture

Old architecture

What happened?

I have a TikTok-like app where, on the home screen, when we try to scroll the video, there is a flickering issue. While this problem was not present in the previous version (v5), it has appeared now. I have recorded a demo video demonstrating this issue, and it is attached

Reproduction

repository link

Reproduction

Steps to reproduce this bug are: Swipable videos like TikTok, and swiping the video, a flicker will appear. like when we swipe to video, the first frame is small having black spaces, then suddenly remove black spaces, goes to full mode

ZakirBangash commented 5 months ago

v6 with flickering issue

https://github.com/react-native-video/react-native-video/assets/66157395/f30bf1bf-8c52-4fe4-92a6-2742fd39201d

**v5 with smooth scroll*

https://github.com/react-native-video/react-native-video/assets/66157395/57a37e89-7f40-4c54-b5eb-33b8ba87dd51

ZakirBangash commented 5 months ago

@KrzysztofMoch @freeboub You guys are doing a really good job, Thank you for your contribution, the latest v6 has made our lives easier, and only a few issues currently we are facing, Let me know if you need anything else from my end 🙌

tdammy92 commented 5 months ago

@ZakirBangash mind if we connect, working on somthing similar.

ZakirBangash commented 5 months ago

Yeah sure Let's connect

MdAbubakar commented 5 months ago

@ZakirBangash You can use the react-native-video@6.0.0-alpha.11 this solves for me.

Now I request the maintainers to fix this issue this happens when we change the video quality or change the video on the fly. So, please fix this issue The flickering is not happening in v6.0.0-alpha.11 and I tried it in v6.0.0-beta.4 and there also the flickering happens so please do this as it's in v6.0.0-alpha.11 so this will be fixed.

Thanks in advance.

freeboub commented 5 months ago

In my mind (maybe I am wrong) there is no change regarding to View management between alpha.11 & next release. Not sure where you investigated, but I think the fix shall be around shuttterView management. I had a look, but I did find anything relevant yet ...

freeboub commented 5 months ago

@MdAbubakar @tdammy92 @ZakirBangash I think I have found a solution to fix this issue. can you please test linked PR ? I tested it sucessfully with the sample, but I think this is safer to test it with a real life app !

ZakirBangash commented 5 months ago

@MdAbubakar @tdammy92 @ZakirBangash I think I have found a solution to fix this issue. can you please test linked PR ? I tested it sucessfully with the sample, but I think this is safer to test it with a real life app !

Thank you @freeboub for prompt attention to this matter, I think it is part of new release, Let me see it

ZakirBangash commented 5 months ago

Hi @freeboub I just tried the latest release @6.0.0-rc.1, which contains this PR, this time player does not even load the video

freeboub commented 5 months ago

@ZakirBangash can you try to revert my last change please ?

ZakirBangash commented 5 months ago

@freeboub I reverted the last changes related to shuttterView management and created PR, but I have verify it, then will let you know

ZakirBangash commented 5 months ago

@freeboub I reverted the last changes and created PR, tested it out, and the video is loading now.

tdammy92 commented 5 months ago

@freeboub @ZakirBangash which version is more stable now , @6.0.0-rc.1 or v6.0.0-alpha.11 ?

MdAbubakar commented 5 months ago

@tdammy92 for this flickering issue the v6.0.0-alpha.11 is more stable.

freeboub commented 5 months ago

Notice this is a duplicate of https://github.com/TheWidlarzGroup/react-native-video/issues/3653

freeboub commented 5 months ago

I just push another version of the fix, can you please test it ? Thank you

ZakirBangash commented 5 months ago

I will test it on Monday morning, I will let you know then, as I'm away from the keyboard atm 🙏

ZakirBangash commented 5 months ago

Hey @freeboub I tested it, The flickering is gone, but only the first frame of the video plays,then the rest of the frames paused, and the video frame movements stopped, but the audio is still going on, and most of the time the first frame is also not playing . Let me share the recording

freeboub commented 5 months ago

Please share a sample url !

ZakirBangash commented 5 months ago

We are using m3u8, I will share few m3u8 urls as well

https://github.com/TheWidlarzGroup/react-native-video/assets/66157395/ad4be56c-aa9d-46fc-96f7-4b2bb6073c63

ZakirBangash commented 5 months ago

Video URL : https://stream.mux.com/GBhY017Qx3X3PlDyQAx201Y3kTSADrOm4nMuD00YeLV602g.m3u8 thumbnail URL: https://image.mux.com/GBhY017Qx3X3PlDyQAx201Y3kTSADrOm4nMuD00YeLV602g/thumbnail.webp?time=0

freeboub commented 5 months ago

@ZakirBangash I am too far to peint your wall to a normal color 😆 BTW, I don't reproduce the issue with the sample ... The video play well when switching between streams (you video included) Can it be linked to any other props like poster ? I suppose you use it as you provided thumbnail url. Can you please try to simplify your usage of <Video and maybe identify if another prop make the issue ? Did you try to reproduce it with the sample included in the repo ? (the video freeze)

ZakirBangash commented 5 months ago

@freeboub When I remove poster prop, it works fine then, can you guide me what should I do?

i have poster prop and directly giving thumbnail URL. wondering how could i replace poster

freeboub commented 5 months ago

Can you please try to apply following patch locally. It is just a test to see if it work better.

diff --git a/src/Video.tsx b/src/Video.tsx
index 7cdbc211..aebda7ee 100644
--- a/src/Video.tsx
+++ b/src/Video.tsx
@@ -130,6 +130,7 @@ const Video = forwardRef<VideoRef, ReactVideoProps>(
           posterResizeMode && posterResizeMode !== 'none'
             ? posterResizeMode
             : 'contain',
+        opacity: 0.9,
       }),
       [posterResizeMode],
     );

freeboub commented 5 months ago

another solution can be to change (in the same file) how poster display is done. Instead of hiding it when onLoad is thrown, try to move it in onReadyForDisplay callback

Honggilseong commented 5 months ago

I've encountered the same issue with the poster continuously showing. A simple solution I found is to add onReadyForDisplay to your Video component. what i've done

        <Video
          onReadyForDisplay={() => {
            console.log("onReadyForDisplay");
          }} //add
          poster={poster}
          posterResizeMode="cover"
          ignoreSilentSwitch="ignore"
        />

ZakirBangash commented 5 months ago

@freeboub Giving onReadyForDisplay callback works, we just need to give onReadyForDisplay an empty callback, and then it works. carbon

freeboub commented 5 months ago

@ZakirBangash This is a very good clue to understand the issue, I was able to reproduce it with the sample now ! I just push a patch to fix it ! Notice that you can keep the onReadyForDisplay patch to continue using 6.0.0-RC.1 or 6.0.0-RC.2 In fact the poster stayed displayed, it is not the first frame of the video !

rayhanmhd123 commented 2 months ago

@freeboub Giving onReadyForDisplay callback works, we just need to give onReadyForDisplay an empty callback, and then it works.

@ZakirBangash Can you explain the process of creating a poster using the ‘updateThumbnailWith0Frame’ method?

TheWidlarzGroup / react-native-video