Prevent the reading of video react native

Question

I am currently developing an application that enables the user to view sports videos and I would like to implement the following feature : The user is presented with a list of videos but can only see the next ones if he first views the first ones. At the moment I have simply added a lock on the thumbnail of the videos that should be blocked but the user can still click a bit aside and play the video. I have look through all the props of the package react-native-video but didn't see any that would fit my need. At Would you have ideas ?

Here is also a sample of the code :

<View style={styles.videoRow}>
            <View>
              <Video
                style={styles.image}
                source={{uri: 'https://firebasestorage.googleapis.com/v0/b/roundpower-88ef9.appspot.com/o/BootyAbsPower%2FTuto%2013.mp4?alt=media&token=da011245-fce2-4796-a78b-3abc518c73ef'}}
                useNativeControls
                resizeMode="contain"
                isLooping
                onPlaybackStatusUpdate={(playbackStatus) => onPlaybackStatusUpdate3(playbackStatus)}
              />
              {!debloque3 ? <View>
                <FontAwesome5 name="lock" size={40} color="white" style={styles.icon}/>
              </View> : <Text>''</Text>}

            </View>
            <View>
              <Video
                style={styles.image}
                source={{uri: 'https://firebasestorage.googleapis.com/v0/b/roundpower-88ef9.appspot.com/o/BootyAbsPower%2FTuto%2014.mp4?alt=media&token=cd3d12be-05fd-4fc4-91d9-cd518faf14ce'}}
                useNativeControls
                resizeMode="contain"
                isLooping
                onPlaybackStatusUpdate={(playbackStatus) => onPlaybackStatusUpdate4(playbackStatus)}
              />
              {!debloque4 ? <View>
                <FontAwesome5 name="lock" size={40} color="white" style={styles.icon}/>
              </View> : <Text>''</Text>}
            </View>
          </View>

score 1 · Answer 1 · answered Nov 10 '21 at 21:02

Yeah, a really easy way you can do this is just prevent the thing you don't want to the user to tap on from receiving any pointerEvents (i.e. touch events).

A really simple quick-and-dirty way of doing this like so:

import * as React from 'react';
import {TouchableOpacity, StyleSheet, View} from 'react-native';

const onPress = () => console.error("I don't want this to happen.");

export default () => (
  <View style={[StyleSheet.absoluteFill, styles.center]}>
    {/* red box in the middle */}
    <View style={{width: 50, height: 50, backgroundColor: 'red'}}>
      <TouchableOpacity
        onPress={onPress}
        style={StyleSheet.absoluteFill}
      />
      {/* Obscure the TouchableOpacity with a View which completely covers it */}
      {shouldPreventTouches && <View style={StyleSheet.absoluteFill} />}
    </View>
  </View>
);

Alternatively, you could also just wrap the <Video /> component within a <View /> and useState to toggle between pointerEvents="none" and pointerEvents="auto". Both have the same effect of preventing touch information from being passed to children:

import * as React from 'react';
import {TouchableOpacity, StyleSheet, View} from 'react-native';

const onPress = () => console.error("I don't want this to happen.");

export default () => (
  <View style={[StyleSheet.absoluteFill, styles.center]}>
    {/* red box in the middle */}
    <View
      pointerEvents={shouldPreventTouches ? 'none' : 'auto'}
      style={{width: 50, height: 50, backgroundColor: 'red'}}>
      <TouchableOpacity
        onPress={onPress}
        style={StyleSheet.absoluteFill}
      />
    </View>
  </View>
);

Depends what you prefer.

score 1 · Answer 2 · answered Nov 10 '21 at 21:36

1

You could reuse the logic you have for showing the lock or not on the video element, and render the video only if it is unlocked.

    <View>
    {
        debloque ? <Video/> : <FontAwesome5 name="lock" size={40} color="white" style={styles.icon} />
    }
    </View>

Alternatively you could set the source of the video to null until it is unlocked, to initialize the player but prevent anything to be played, according to the docs.

answered Nov 10 '21 at 21:36

TetrΔ

88
1
9

Thanks a lot but the problem is that I want the user to see the thumbnail of the video. But what I can do is replace the video with just the video thumbnail if the video is locked ! Thanks a lot ! – Hadrien Jaubert Nov 11 '21 at 14:04

Prevent the reading of video react native

2 Answers2