Skip to content
This repository was archived by the owner on Nov 3, 2025. It is now read-only.

Commit 22ed7d6

Browse files
tpuccitpucci
committed
✨ (example) improve example
1 parent 13c7c3a commit 22ed7d6

21 files changed

Lines changed: 261 additions & 110 deletions

‎example/android/app/build.gradle‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ import com.android.build.OutputFile
7676
*/
7777

7878
project.ext.react = [
79-
entryFile: "index.js",
79+
entryFile: "index.ts",
8080
enableHermes: false, // clean and rebuild if changing
8181
]
8282

‎example/android/build.gradle‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ buildscript {
66
minSdkVersion = 16
77
compileSdkVersion = 28
88
targetSdkVersion = 28
9+
androidXCore = "1.0.2"
910
}
1011
repositories {
1112
google()

‎example/ios/Podfile.lock‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,8 @@ PODS:
205205
- react-native-google-cast/RNGoogleCast
206206
- react-native-google-cast/RNGoogleCast (3.2.2):
207207
- React
208+
- react-native-netinfo (4.6.1):
209+
- React
208210
- React-RCTActionSheet (0.61.5):
209211
- React-Core/RCTActionSheetHeaders (= 0.61.5)
210212
- React-RCTAnimation (0.61.5):
@@ -275,6 +277,7 @@ DEPENDENCIES:
275277
- React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
276278
- React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
277279
- react-native-google-cast/NoBluetooth (from `../node_modules/react-native-google-cast/ios/`)
280+
- "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
278281
- React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
279282
- React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
280283
- React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`)
@@ -333,6 +336,8 @@ EXTERNAL SOURCES:
333336
:path: "../node_modules/react-native/ReactCommon/jsinspector"
334337
react-native-google-cast:
335338
:path: "../node_modules/react-native-google-cast/ios/"
339+
react-native-netinfo:
340+
:path: "../node_modules/@react-native-community/netinfo"
336341
React-RCTActionSheet:
337342
:path: "../node_modules/react-native/Libraries/ActionSheetIOS"
338343
React-RCTAnimation:
@@ -383,6 +388,7 @@ SPEC CHECKSUMS:
383388
React-jsiexecutor: d5525f9ed5f782fdbacb64b9b01a43a9323d2386
384389
React-jsinspector: fa0ecc501688c3c4c34f28834a76302233e29dc0
385390
react-native-google-cast: 180a55aef6ff7b85bf0383d9fed3644627999e4d
391+
react-native-netinfo: a59d8426a8484f739fe3a95dd6ad5af1435db05f
386392
React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
387393
React-RCTAnimation: 791a87558389c80908ed06cc5dfc5e7920dfa360
388394
React-RCTBlob: d89293cc0236d9cb0933d85e430b0bbe81ad1d72

‎example/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"lint": "eslint ."
1313
},
1414
"dependencies": {
15+
"@react-native-community/netinfo": "^4.6.1",
1516
"@types/jest": "^24.0.23",
1617
"@types/react": "^16.9.15",
1718
"@types/react-native": "^0.60.23",

‎example/src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ console.disableYellowBox = true;
1818

1919
export const App = observer(() => (
2020
<FullScreenPortal>
21-
<StatusBar barStyle="light-content" />
21+
<StatusBar barStyle="light-content" backgroundColor="#111111" />
2222
<Canal style={styles.appContainer}>
2323
<Screen name="Home" Component={Home} visible />
2424
<Screen

‎example/src/atoms/Header.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,22 @@ export const Header = (props: {
2020
/>
2121
<LinearGradient
2222
colors={['#00000088', '#00000000']}
23-
style={{
24-
...StyleSheet.absoluteFill,
25-
height: 25,
26-
}}
23+
style={[
24+
StyleSheet.absoluteFill,
25+
{
26+
height: 25,
27+
},
28+
]}
2729
/>
2830
<LinearGradient
2931
colors={['#11111100', '#111111']}
30-
style={{
31-
...StyleSheet.absoluteFill,
32-
justifyContent: 'flex-end',
33-
paddingVertical: 15,
34-
}}>
32+
style={[
33+
StyleSheet.absoluteFill,
34+
{
35+
justifyContent: 'flex-end',
36+
paddingVertical: 15,
37+
},
38+
]}>
3539
<Text
3640
style={{
3741
fontSize: 24,

‎example/src/atoms/MovieCard.tsx‎

Lines changed: 51 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,7 @@ import LinearGradient from 'react-native-linear-gradient';
55
import Icon from 'react-native-vector-icons/FontAwesome5';
66
import {PlayerModule} from '../module/PlayerModule';
77

8-
export const MovieCard = (props: {
9-
imageUri: string;
10-
episode: string;
11-
progress: number;
12-
}) => (
8+
export const MovieCard = (props: {movie: any}) => (
139
<View
1410
style={{
1511
backgroundColor: '#111111',
@@ -25,27 +21,30 @@ export const MovieCard = (props: {
2521
marginHorizontal: 5,
2622
}}>
2723
<TouchableOpacity
28-
onPress={PlayerModule.playMovie}
24+
onPress={() => PlayerModule.playMovie(props.movie)}
25+
disabled={!props.movie.available}
2926
style={{
3027
height: 140,
3128
width: 100,
3229
borderRadius: 10,
33-
backgroundColor: 'red',
30+
backgroundColor: '#222222',
3431
overflow: 'hidden',
3532
}}>
3633
<Image
3734
style={StyleSheet.absoluteFill}
3835
source={{
39-
uri: props.imageUri,
36+
uri: props.movie.imageUri,
4037
priority: Image.priority.normal,
4138
}}
4239
resizeMode={Image.resizeMode.cover}
4340
/>
4441
<View
45-
style={{
46-
...StyleSheet.absoluteFill,
47-
justifyContent: 'flex-end',
48-
}}>
42+
style={[
43+
StyleSheet.absoluteFill,
44+
{
45+
justifyContent: 'flex-end',
46+
},
47+
]}>
4948
<LinearGradient colors={['#00000000', '#000000CC']}>
5049
<Text
5150
style={{
@@ -55,50 +54,60 @@ export const MovieCard = (props: {
5554
marginLeft: 10,
5655
paddingVertical: 10,
5756
}}>
58-
{props.episode}
57+
{props.movie.episode}
5958
</Text>
6059
<View style={{backgroundColor: '#444444', height: 4}}>
6160
<View
6261
style={{
6362
flex: 1,
6463
backgroundColor: '#e30612',
65-
width: `${props.progress * 100}%`,
64+
width: `${props.movie.progress * 100}%`,
6665
}}
6766
/>
6867
</View>
6968
</LinearGradient>
7069
</View>
71-
<View
72-
style={{
73-
...StyleSheet.absoluteFill,
74-
justifyContent: 'center',
75-
alignItems: 'center',
76-
}}>
70+
{props.movie.available ? (
7771
<View
78-
style={{
79-
width: 50,
80-
height: 50,
81-
justifyContent: 'center',
82-
alignItems: 'center',
83-
backgroundColor: '#FFFFFF',
84-
borderRadius: 25,
85-
shadowColor: '#000',
86-
shadowOffset: {
87-
width: 0,
88-
height: 1,
72+
style={[
73+
StyleSheet.absoluteFill,
74+
{
75+
justifyContent: 'center',
76+
alignItems: 'center',
8977
},
90-
shadowOpacity: 0.22,
91-
shadowRadius: 2.22,
92-
elevation: 3,
93-
}}>
94-
<Icon
95-
name="play"
96-
size={18}
97-
color="#000000"
98-
style={{paddingLeft: 4}}
99-
/>
78+
]}>
79+
<View
80+
style={{
81+
width: 50,
82+
height: 50,
83+
justifyContent: 'center',
84+
alignItems: 'center',
85+
backgroundColor: '#FFFFFF',
86+
borderRadius: 25,
87+
shadowColor: '#000',
88+
shadowOffset: {
89+
width: 0,
90+
height: 1,
91+
},
92+
shadowOpacity: 0.22,
93+
shadowRadius: 2.22,
94+
elevation: 3,
95+
}}>
96+
<Icon
97+
name="play"
98+
size={18}
99+
color="#000000"
100+
style={{paddingLeft: 4}}
101+
/>
102+
</View>
100103
</View>
101-
</View>
104+
) : (
105+
<View
106+
style={[
107+
StyleSheet.absoluteFill,
108+
{backgroundColor: '#000000', opacity: 0.7},
109+
]}></View>
110+
)}
102111
</TouchableOpacity>
103112
</View>
104113
);

‎example/src/canals/home/screens/BurgerMenuScreen.tsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,24 @@
11
import React from 'react';
2-
import {Text, TouchableOpacity, SafeAreaView} from 'react-native';
2+
import {
3+
Text,
4+
TouchableOpacity,
5+
SafeAreaView,
6+
StatusBar,
7+
Platform,
8+
} from 'react-native';
9+
import {Navigation} from 'react-nonav';
10+
import {HomeModule} from '../../../module/HomeModule';
311

412
export const BurgerMenuScreen = () => (
513
<SafeAreaView style={{backgroundColor: '#FFFFFF', flex: 1}}>
6-
<TouchableOpacity>
7-
<Text>Téléchargements</Text>
14+
{Platform.OS === 'ios' && <StatusBar barStyle="dark-content" />}
15+
<TouchableOpacity
16+
style={{paddingLeft: 10}}
17+
onPress={() => {
18+
Navigation.instance.back();
19+
HomeModule.filterDownloaded();
20+
}}>
21+
<Text style={{padding: 10, fontSize: 16}}>Téléchargements</Text>
822
</TouchableOpacity>
923
</SafeAreaView>
1024
);

‎example/src/canals/home/screens/DownloadScreen.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import React from 'react';
22
import {View, FlatList, Text} from 'react-native';
3+
import {observer} from 'mobx-react';
34
import {Header} from '../../../atoms/Header';
45
import {MovieCard} from '../../../atoms/MovieCard';
56
import {MoviesModule} from '../../../module/MoviesModule';
7+
import {PlayerModule} from '../../../module/PlayerModule';
68

79
const data = [
810
{
@@ -11,15 +13,15 @@ const data = [
1113
},
1214
];
1315

14-
export const DownloadScreen = () => {
16+
export const DownloadScreen = observer(() => {
1517
const headerMovie = MoviesModule.movies.filter(movie => movie.downloaded)[0];
1618
return (
1719
<View>
1820
<FlatList
1921
contentContainerStyle={{paddingBottom: 60}}
2022
ListHeaderComponent={
2123
<Header
22-
onPress={() => {}}
24+
onPress={() => PlayerModule.playMovie(headerMovie)}
2325
title={headerMovie.title}
2426
subtitle="10 épisodes téléchargés"
2527
imageUri={headerMovie.imageUri}
@@ -49,18 +51,12 @@ export const DownloadScreen = () => {
4951
paddingBottom: 10,
5052
}}
5153
horizontal
52-
renderItem={({item}) => (
53-
<MovieCard
54-
imageUri={item.imageUri}
55-
episode={item.episode}
56-
progress={item.progress}
57-
/>
58-
)}
54+
renderItem={({item}) => <MovieCard movie={item} />}
5955
/>
6056
</>
6157
);
6258
}}
6359
/>
6460
</View>
6561
);
66-
};
62+
});

0 commit comments

Comments
 (0)