LunatiqueCoder/react-native-media-console

Touching controlcomponents to show and hide control has a long delay

tmKnight01 opened this issue · 2 comments

Hello, I am very happy to be able to use such a great component, but I encountered a problem on the Android side.
When I touch the video to show and hide the controls, the delay reaches more than 10s.
I read the source code, but I don’t know what happened What.

import React from 'react';
import {
 View,
 StyleSheet,
 Image,

} from 'react-native';
import {AssetItem} from '@/services/api';
import {isEmpty, get} from 'lodash-es';
import VideoPlayer from 'react-native-media-console';
import pxToDp from 'utils/pxToDp';

interface ItemProps {
 item: AssetItem;
}

function RenderItem({item}: ItemProps) {
 const isStartsWithHttp = (str: string) => str.startsWith('http');
 if (isEmpty(item)) return null;

 if ((get(item?.t?.split('/'), '[0]', '') as string) == 'video')
   return (
     <View style={{width: pxToDp(300), height: pxToDp(250)}}>
       <VideoPlayer
         disableBack
         repeat
         showOnStart
         source={{uri: 'https://media.w3.org/2010/05/sintel/trailer.mp4'}}
       />
     </View>
   );

 if ((get(item?.t?.split('/'), '[0]', '') as string) == 'image') {
   if (isStartsWithHttp(item?.b)) {
     return (
       <Image
         onError={e => console.log(e.nativeEvent.error)}
         style={CSS.itemBox}
         source={{uri: item?.b}}
       />
     );
   }
   return (
     <Image
       style={CSS.itemBox}
       onError={e => console.log(e.nativeEvent.error)}
       source={{uri: 'data:image/png;base64,' + item?.b}}
     />
   );
 }
}

const CSS = StyleSheet.create({
 itemBox: {
   width: pxToDp(200),
   height: pxToDp(150),
   marginTop: pxToDp(40),
 },
});

export default RenderItem;

it`s my code pls help me - -

Hello @tmKnight01

Unfortunately, we cannot reproduce it on our side and if we copy paste your code of course it won't work. I suggest you create a reproduction repository, that way you'll definitely receive help faster. Start a fresh react-native project by using npx react-native init in your terminal and see if the problem persists. If you cannot reproduce it on a new project, perhaps there are some issues in a parent component that's using the videoplayer?

Also, did you try the react-native-video alpha version 6? We're using that in production, since v5 has a lot of issues.

Note: react-native-video is in a pretty bad shape right now, our clients are considering to move to expo-av, and thus a new videoplayer will be required.

Closing for now. Will be reopened if needed.