react_native_video_cache_proxy_url_android_renpho.ts

1import React, { useEffect, useState } from 'react';
2import { StyleSheet, View } from 'react-native';
3import Video from 'react-native-video';
4import convertToProxyURL from 'renpho-android-react-native-video-cache';
5
6const VideoCacheExample: React.FC = () => {
7  const originalUrl: string = "https://www.w3schools.com/html/mov_bbb.mp4";
8  const [proxyUrl, setProxyUrl] = useState<string>("");
9
10  useEffect(() => {
11    // Convert the original URL to a local proxy URL. 
12    // On Android, this routes the request through a local server to cache the data.
13    const url = convertToProxyURL(originalUrl);
14    setProxyUrl(url);
15  }, [originalUrl]);
16
17  return (
18    <View style={styles.container}>
19      {proxyUrl !== "" && (
20        <Video
21          source={{ uri: proxyUrl }}
22          style={styles.video}
23          controls={true}
24          resizeMode="contain"
25        />
26      )}
27    </View>
28  );
29};
30
31const styles = StyleSheet.create({
32  container: {
33    flex: 1,
34    backgroundColor: '#000',
35    justifyContent: 'center',
36    alignItems: 'center',
37  },
38  video: {
39    width: '100%',
40    height: 300,
41  },
42});
43
44export default VideoCacheExample;