[BUG]: resizeMode glitch while move to another video

[krisnapy]

Version

6.1.2

What platforms are you having the problem on?

Android

System Version

All android

On what device are you experiencing the issue?

Real device

Architecture

Old architecture

What happened?

Video posters glitch when moving from one video to another.

Evidence:

https://github.com/TheWidlarzGroup/react-native-video/assets/96037957/ad11eef6-09ac-400f-84c1-8a5b3ee1b842

Reproduction

repository link

Reproduction

Step to reproduce this bug are:

1. Video resizeMode is CONTAIN & video source is portrait orientation.
2. Move to another video.
3. Video poster looks landscape while buffering to another video.

[freeboub]

Can you post you <Video usage (all the props) please ? I think it is due to hideShutterView prop or shutterViewColor transparent... I don't think I will be able to fix it ...

[krisnapy]

Here is

     <Video
        ref={videoRef}
        source={{ uri }}
        style={sx(utility.flexOne)}
        resizeMode={ResizeMode.CONTAIN}
        paused={!playing}
        muted={!enableAudio}
        onLoad={data => {
          progressRef?.current?.stop()

          duration.current = data.duration
          forceShowThumbnail(data)
          onStart && onStart()
        }}
        onLoadStart={() => progressRef?.current?.start()}
        onEnd={onEnd}
        onBuffer={() => progressRef?.current?.start()}
        onProgress={e => {
          updateProgress(e)
          progressRef?.current?.stop()
        }}
        progressUpdateInterval={100}
        repeat={loop}
        ignoreSilentSwitch={playInBackground ? IgnoreSilentSwitchType.IGNORE : undefined}
        hideShutterView={true}
      />

[freeboub]

Thank you, so I am right, the issue is due to hideShutterView={true} Can you try to remove it ?

[krisnapy]

Looks flickering now after removed.

https://github.com/TheWidlarzGroup/react-native-video/assets/96037957/e41c6749-dced-4df7-aa97-a2d27bb1e513

[freeboub]

Did you also try with 6.2.0 ? I think there was a fix on this version if I remember well

[krisnapy]

Haven't tried it yet. Let me try it.

[krisnapy]

Tried 6.2.0 and the flickering is still happening.

[freeboub]

Ok, can you please provide a sample to reproduce the issue ? I am not sure on how to handle this issue without a sample ... Maybe you can try to use your streams with the sample app in the repo ?

[krisnapy]

After I tried to figure it out, it turned out that the problem was only with some of the videos. You can try the code bellow:

import React, { useRef, useState } from 'react'
import { Pressable, View } from 'react-native'
import Video, { IgnoreSilentSwitchType, PosterResizeModeType, ResizeMode, VideoRef } from 'react-native-video'

function App(): JSX.Element {
  const videoRef = useRef<VideoRef>(null)

  const [currentUri, setCurrentUri] = useState(0)

  const uris = [
    'https://d1c40hpuz0tre6.cloudfront.net/stories/01J0311A6CNE1034G9GCNBG267.mp4',
    'https://d1c40hpuz0tre6.cloudfront.net/stories/01J02SR2R6FPGKAKYDJYZPWX14.mp4',
    'https://d1c40hpuz0tre6.cloudfront.net/stories/01HZRREJ1W14VPGD2XQZ2RRTQZ.mp4',
  ]

  return (
    <View style={{ flex: 1, backgroundColor: 'white' }}>
      <Pressable
        style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 4 }}
        onPress={() => {
          videoRef.current.seek(0)
          if (currentUri === uris.length - 1) return setCurrentUri(0)

          setCurrentUri(prev => prev + 1)
        }}
      />
      <Video
        ref={videoRef}
        source={{ uri:uris[currentUri] }}
        style={{ flex: 1 }}
        resizeMode={ResizeMode.CONTAIN}
        posterResizeMode={PosterResizeModeType.CONTAIN}
        progressUpdateInterval={100}
        ignoreSilentSwitch={IgnoreSilentSwitchType.IGNORE}
      />
    </View>
  )
}

export default App

Result:

https://github.com/TheWidlarzGroup/react-native-video/assets/96037957/952a8249-d5fc-4981-abc5-5eb8993f4267

[krisnapy]

Is there any update?

[hieppd79]

3713 same here

[PauZeA]

I'm having the same issue, is there any update?

[quangtuan28200]

same issue, I'm using v6.4.5 I need to use hideShutterView={true} to avoid flickering when the video changes

I used v6.3.0 before with props useTextureView={true} hideShutterView={true}, and the issue not happened but with v6.4.5 and prop viewType={ViewType.TEXTURE} did seem not to work.

resizeMode will change to STRETCH when the video is changed you can try setting resizeMode={ResizeMode.STRETCH}, the problem is gone but the video is stretched.

[kgaspar]

Can confirm I had the same problem of a stutter between video due to the view resizing. Stretch stops the stutter.

I noticed that it misbehaves when using the component without preset width/height, as shown in the example code in the documentation:

let styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

Any kind of dynamic width/height triggers the stutter. I rollbacked to v6.3.0 and the issue was gone.

[freeboub]

following PR (https://github.com/TheWidlarzGroup/react-native-video/pull/4185) Fix a glitch when playback source change, can you please test it ? This is a big PR which change source management, I would really be happy to have some feedbacks !

[quangtuan28200]

I fixed that by not using resizeMode and using a style like this: style={{ width: '100%', aspectRatio: 16 / 9 }}

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity. If there won't be any activity in the next 14 days, this issue will be closed automatically.