[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:

2024-06-11-12-52-46.online-video-cutter.com.mp4

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.

[Olivier Bouillet]

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}
      />

[Olivier Bouillet]

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.

2024-06-11-15-53-32.online-video-cutter.com.mp4

[Olivier Bouillet]

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.

[Olivier Bouillet]

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:

2024-06-12-11-54-55.mp4

[krisnapy]

Is there any update?