[BUG]: Android: The old video on the screen is displayed in the new video in the modal

[forchello]

Version

6.4.3

What platforms are you having the problem on?

Android

System Version

android 12+

On what device are you experiencing the issue?

Real device

Architecture

Old architecture

What happened?

I noticed that when I use screen video and call modalfy ( react-native-modalfy ) with the same video, I see the screen video on modal ( with dimensions from the screen ). This goes on for a few seconds. When I close the modal, the opposite situation happens

yellow is screen, red is modal

2024-08-02.16.38.32.mp4

Reproduction

repository link

Reproduction

Step to reproduce this bug are:

It is important that the video on the modal be at the same coordinates as the video on the screen

Code of the component:

import {useModal} from 'react-native-modalfy';

const VideoTestContainer = () => {
  const {openModal} = useModal();

  const handleOnPress = () => {
    openModal('VideoTestModal', {});
  };

  return (
    <View
      style={{
        justifyContent: 'center',
        flex: 1,
        alignItems: 'center',
        backgroundColor: 'yellow',
      }}>
      <Video
        source={{
          uri: 'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
          type: 'mp4',
        }}
        style={{
          width: 400,
          height: 300,
        }}
        controls
        repeat
        resizeMode={'contain'}
        rate={1}
        playInBackground={false}
        playWhenInactive={false}
        hideShutterView
        shutterColor="transparent"
        renderLoader={null}
        muted
      />
      <Button onPress={handleOnPress} title="Invoke the modal" />
    </View>
  );
};

Code of the modal:

import {Button, View} from 'react-native';
import Video from 'react-native-video';
import {ModalfyParams} from 'react-native-modalfy';

interface Props {
  modal: ModalfyParams;
}

const VideoTestModal = ({modal: {closeModal}}: Props) => {
  const handleOnPress = () => {
    closeModal();
  };

  return (
    <View
      style={{
        justifyContent: 'center',
        width: Dimensions.get('window').width,
        height: Math.round(Dimensions.get('screen').height),
        alignItems: 'center',
        backgroundColor: 'red',
      }}>
      <Video
        source={{
          uri: 'https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
          type: 'mp4',
        }}
        style={{
          width: 400,
          height: 300,
        }}
        repeat
        resizeMode={'contain'}
        rate={1}
        playInBackground={false}
        playWhenInactive={false}
        hideShutterView
        shutterColor="transparent"
        renderLoader={null}
        muted
      />
      <Button onPress={handleOnPress} title="Close the modal" />
    </View>
  );
};

[seyedmostafahasani]

@forchello you can use the getCurrentPosition method to get the current position of the video: ref.current?.getCurrentPosition(). Then, you can pass the current position to the modal and, after mounting, use the seek method to seek to the current position.

[forchello]

@forchello you can use the getCurrentPosition method to get the current position of the video: ref.current?.getCurrentPosition(). Then, you can pass the current position to the modal and, after mounting, use the seek method to seek to the current position.

I think the problem is different, namely that the old source (along with time and other parameters) remains in the new component. Please look at the video, there in the red modal you can see the old video from the yellow screen.

[freeboub]

@forchello is it possible to share a git repo with your sample please ?
Additionnally, you should remove shutterColor="transparent" it should fix the issue I think

[forchello]

@forchello is it possible to share a git repo with your sample please ? Additionnally, you should remove shutterColor="transparent" it should fix the issue I think

Hi, I will create a repository for you one of these days where you can see the problem.

Regarding shutterColor, I added it because I wanted to fix issue #4045 at that time.

[forchello]

Repository for you where you can reproduce this issue https://github.com/forchello/VideoTest

[forchello]

P.S. if you remove shutterColor="transparent" from modal component - it`s fix the issue, but what about black screen until video fully loaded?

[freeboub]

Thank you for the sample !
I tested the sample, I think this issue come from 'global behavior'.

In fact, after opening the modal, you have 2 video playback in parallel (one in HomeScreen and one in VideoModalTest).
To avoid that issue, I just add following line at the beginning of the home screen:

if (modalfy().currentModal !== null) return null

Then the screen is totally unmounted and the first video is not display anymore (video decoder are released, less RAM consumption, ...).

I think this is fixing the issue in the sample.

Can you try this solution in your app please ?