react_native_video_cache_proxy_url_conversion_quickstart.ts

1import React, { useEffect, useState } from 'react';
2import { StyleSheet, Text, View } from 'react-native';
3import convertToProxyURL from '@react-native-oh-tpl/react-native-video-cache';
4import Video from 'react-native-video';
5
6const VideoCacheExample = () => {
7  const originalUrl = "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 to enable caching
12    const url = convertToProxyURL(originalUrl);
13    setProxyUrl(url);
14    console.log('Original URL:', originalUrl);
15    console.log('Proxy URL:', url);
16  }, []);
17
18  return (
19    <View style={styles.container}>
20      <Text style={styles.title}>React Native Video Cache (OH-TPL)</Text>
21      {proxyUrl ? (
22        <Video
23          source={{ uri: proxyUrl }}
24          style={styles.video}
25          controls={true}
26          resizeMode="contain"
27        />
28      ) : (
29        <Text>Loading proxy URL...</Text>
30      )}
31      <Text style={styles.info}>Caching URL: {proxyUrl}</Text>
32    </View>
33  );
34};
35
36const styles = StyleSheet.create({
37  container: {
38    flex: 1,
39    justifyContent: 'center',
40    alignItems: 'center',
41    backgroundColor: '#F5FCFF',
42  },
43  title: {
44    fontSize: 20,
45    marginBottom: 20,
46  },
47  video: {
48    width: '100%',
49    height: 300,
50  },
51  info: {
52    marginTop: 20,
53    paddingHorizontal: 10,
54    fontSize: 12,
55    color: '#333',
56  },
57});
58
59export default VideoCacheExample;