Skip to content

Commit 160192f

Browse files
GustavPSGustavPS
authored
Add genre page (#3)
* Add genre pages WIP * Load all the content in the genre screen
1 parent dda3102 commit 160192f

8 files changed

Lines changed: 445 additions & 203 deletions

File tree

‎App.js‎

Lines changed: 125 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -15,21 +15,21 @@ import { MainServer } from './src/screens/setup/MainServer';
1515
import { Main } from './src/screens/Main';
1616

1717
import {
18-
SafeAreaView,
19-
ScrollView,
20-
StatusBar,
21-
StyleSheet,
22-
Text,
23-
useColorScheme,
24-
View,
18+
SafeAreaView,
19+
ScrollView,
20+
StatusBar,
21+
StyleSheet,
22+
Text,
23+
useColorScheme,
24+
View,
2525
} from 'react-native';
2626

2727
import {
28-
Colors,
29-
DebugInstructions,
30-
Header,
31-
LearnMoreLinks,
32-
ReloadInstructions,
28+
Colors,
29+
DebugInstructions,
30+
Header,
31+
LearnMoreLinks,
32+
ReloadInstructions,
3333
} from 'react-native/Libraries/NewAppScreen';
3434
import { Connect } from './src/screens/setup/Connect';
3535
import Token from './src/lib/Token';
@@ -40,121 +40,129 @@ import { Initial } from './src/screens/Initial';
4040
import { ShowInfo } from './src/screens/info/ShowInfo';
4141
import { SeasonInfo } from './src/screens/info/SeasonInfo';
4242
import { Search } from './src/screens/Search';
43+
import { Genre } from './src/screens/Genre';
4344

4445
const Stack = createNativeStackNavigator();
4546

4647
const App: () => Node = () => {
47-
const isDarkMode = true; //useColorScheme() === 'dark';
48-
const [signedIn, setSignedIn] = React.useState(false);
48+
const isDarkMode = true; //useColorScheme() === 'dark';
49+
const [signedIn, setSignedIn] = React.useState(false);
4950

50-
const backgroundStyle = {
51-
backgroundColor: Colors.darker
52-
};
51+
const backgroundStyle = {
52+
backgroundColor: Colors.darker
53+
};
5354

5455

55-
return (
56-
<NavigationContainer style={{ backgroundColor: Colors.darker }}>
57-
<Stack.Navigator
58-
initialRouteName="Initial"
59-
screenOptions={{
60-
cardStyle: backgroundStyle,
61-
headerStyle: { elevation: 0 },
62-
unmountOnBlur: true,
63-
}}
64-
unmountOnBlur={true}
65-
>
66-
<Stack.Screen
67-
name="Initial"
68-
component={Initial}
69-
options={{
70-
headerShown: false,
71-
}}
72-
/>
73-
<Stack.Screen
74-
name="Main"
75-
component={Main}
76-
options={{
77-
headerShown: false
78-
}}
79-
/>
80-
<Stack.Screen
81-
name="Search"
82-
component={Search}
83-
options={{
84-
headerShown: false
85-
}}
86-
/>
87-
<Stack.Screen
88-
name="MainServer"
89-
component={MainServer}
90-
options={{
91-
headerShown: false,
92-
}}
93-
/>
94-
<Stack.Screen
95-
name="MovieInfo"
96-
component={MovieInfo}
97-
options={{
98-
headerShown: false,
99-
}}
100-
/>
101-
<Stack.Screen
102-
name="ShowInfo"
103-
component={ShowInfo}
104-
options={{
105-
headerShown: false,
106-
}}
107-
/>
108-
<Stack.Screen
109-
name="SeasonInfo"
110-
component={SeasonInfo}
111-
options={{
112-
headerShown: false,
113-
}}
114-
/>
115-
<Stack.Screen
116-
name="Player"
117-
component={Player}
118-
options={{
119-
headerShown: false
120-
}}
121-
/>
122-
<Stack.Screen
123-
name="Connect"
124-
component={Connect}
125-
options={{
126-
headerShown: false
127-
}}
128-
/>
129-
<Stack.Screen
130-
name="ContentServer"
131-
component={ContentServerSetup}
132-
options={{
133-
headerShown: false
134-
}}
135-
/>
136-
</Stack.Navigator>
137-
</NavigationContainer >
138-
);
56+
return (
57+
<NavigationContainer style={{ backgroundColor: Colors.darker }}>
58+
<Stack.Navigator
59+
initialRouteName="Initial"
60+
screenOptions={{
61+
cardStyle: backgroundStyle,
62+
headerStyle: { elevation: 0 },
63+
unmountOnBlur: true,
64+
}}
65+
unmountOnBlur={true}
66+
>
67+
<Stack.Screen
68+
name="Initial"
69+
component={Initial}
70+
options={{
71+
headerShown: false,
72+
}}
73+
/>
74+
<Stack.Screen
75+
name="Main"
76+
component={Main}
77+
options={{
78+
headerShown: false
79+
}}
80+
/>
81+
<Stack.Screen
82+
name="Search"
83+
component={Search}
84+
options={{
85+
headerShown: false
86+
}}
87+
/>
88+
<Stack.Screen
89+
name="MainServer"
90+
component={MainServer}
91+
options={{
92+
headerShown: false,
93+
}}
94+
/>
95+
<Stack.Screen
96+
name="MovieInfo"
97+
component={MovieInfo}
98+
options={{
99+
headerShown: false,
100+
}}
101+
/>
102+
<Stack.Screen
103+
name="ShowInfo"
104+
component={ShowInfo}
105+
options={{
106+
headerShown: false,
107+
}}
108+
/>
109+
<Stack.Screen
110+
name="SeasonInfo"
111+
component={SeasonInfo}
112+
options={{
113+
headerShown: false,
114+
}}
115+
/>
116+
<Stack.Screen
117+
name="Player"
118+
component={Player}
119+
options={{
120+
headerShown: false
121+
}}
122+
/>
123+
<Stack.Screen
124+
name="Connect"
125+
component={Connect}
126+
options={{
127+
headerShown: false
128+
}}
129+
/>
130+
<Stack.Screen
131+
name="ContentServer"
132+
component={ContentServerSetup}
133+
options={{
134+
headerShown: false
135+
}}
136+
/>
137+
<Stack.Screen
138+
name="Genre"
139+
component={Genre}
140+
options={{
141+
headerShown: false
142+
}}
143+
/>
144+
</Stack.Navigator>
145+
</NavigationContainer >
146+
);
139147
};
140148

141149
const styles = StyleSheet.create({
142-
sectionContainer: {
143-
marginTop: 32,
144-
paddingHorizontal: 24,
145-
},
146-
sectionTitle: {
147-
fontSize: 24,
148-
fontWeight: '600',
149-
},
150-
sectionDescription: {
151-
marginTop: 8,
152-
fontSize: 18,
153-
fontWeight: '400',
154-
},
155-
highlight: {
156-
fontWeight: '700',
157-
},
150+
sectionContainer: {
151+
marginTop: 32,
152+
paddingHorizontal: 24,
153+
},
154+
sectionTitle: {
155+
fontSize: 24,
156+
fontWeight: '600',
157+
},
158+
sectionDescription: {
159+
marginTop: 8,
160+
fontSize: 18,
161+
fontWeight: '400',
162+
},
163+
highlight: {
164+
fontWeight: '700',
165+
},
158166
});
159167

160168
export default App;

‎android/app/build.gradle‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -153,12 +153,10 @@ android {
153153
keyPassword 'android'
154154
}
155155
release {
156-
if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
157-
storeFile file(MYAPP_RELEASE_STORE_FILE)
158-
storePassword MYAPP_RELEASE_STORE_PASSWORD
159-
keyAlias MYAPP_RELEASE_KEY_ALIAS
160-
keyPassword MYAPP_RELEASE_KEY_PASSWORD
161-
}
156+
storeFile file('your_key_name.keystore')
157+
storePassword '123123'
158+
keyAlias 'your_key_alias'
159+
keyPassword '123123'
162160
}
163161
}
164162

@@ -169,7 +167,7 @@ android {
169167
release {
170168
// Caution! In production, you need to generate your own keystore file.
171169
// see https://reactnative.dev/docs/signed-apk-android.
172-
signingConfig signingConfigs.debug
170+
signingConfig signingConfigs.release
173171
minifyEnabled enableProguardInReleaseBuilds
174172
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
175173
}

‎src/components/Gallery.js‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,22 @@ import React, { useEffect } from 'react';
22
import { StyleSheet, ScrollView, Text, View } from 'react-native';
33
import GalleryItem from './GalleryItem';
44

5-
const Gallery = ({ rowNumber, items, title, index, onFocus, onViewMoreFocus, onPress }) => {
5+
const Gallery = ({
6+
rowNumber,
7+
items,
8+
title,
9+
index,
10+
onFocus,
11+
onViewMoreFocus,
12+
onPress,
13+
onViewMorePress,
14+
hideViewMoreButton,
15+
}) => {
616
return (
717
<View style={styles.container}>
8-
<Text style={styles.title}>{title}</Text>
18+
{title != null &&
19+
<Text style={styles.title}>{title}</Text>
20+
}
921
<ScrollView
1022
horizontal style={styles.row}
1123
showsHorizontalScrollIndicator={false}
@@ -17,18 +29,22 @@ const Gallery = ({ rowNumber, items, title, index, onFocus, onViewMoreFocus, onP
1729
poster={`https://image.tmdb.org/t/p/w500/${item.poster}`}
1830
hasTVPreferredFocus={rowNumber === 0 && i === 0}
1931
blockFocusLeft={i === 0}
32+
blockFocusRight={(hideViewMoreButton && i === items.length - 1)}
2033
index={index}
2134
onPress={onPress}
2235
onFocus={onFocus}
2336
/>
2437
))}
25-
26-
<GalleryItem
27-
key={items.length + 1}
28-
index={index}
29-
blockFocusRight={true}
30-
onFocus={onViewMoreFocus}
31-
/>
38+
{!hideViewMoreButton &&
39+
<GalleryItem
40+
key={items.length + 1}
41+
index={index}
42+
item={title}
43+
blockFocusRight={true}
44+
onFocus={onViewMoreFocus}
45+
onPress={onViewMorePress}
46+
/>
47+
}
3248
</ScrollView>
3349
</View>
3450
);

‎src/components/GalleryList.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from "react";
22
import { FlatList, StyleSheet, View } from "react-native"
33
import Gallery from "./Gallery";
44

5-
export const GalleryList = ({ sections, style, onFocus, onItemSelected }) => {
5+
export const GalleryList = ({ sections, style, onFocus, onItemSelected, onViewMore, hideViewMoreButton }) => {
66
const sectionListRef = useRef();
77

88
const handleItemFocus = ({ item, index }) => {
@@ -25,13 +25,17 @@ export const GalleryList = ({ sections, style, onFocus, onItemSelected }) => {
2525
});
2626
}
2727

28+
const getSectionTitle = (section) => {
29+
return section.type === 'shows' ? `${section.title} Shows` : section.title;
30+
}
31+
2832
return (
2933
<FlatList
3034
style={[styles.sections, style]}
3135
showsVerticalScrollIndicator={false}
3236
decelerationRate={0}
3337
data={sections}
34-
keyExtractor={(item) => item.title}
38+
keyExtractor={(item, index) => index}
3539
ref={sectionListRef}
3640
scrollEnabled={false}
3741
initialScrollIndex={0}
@@ -40,13 +44,15 @@ export const GalleryList = ({ sections, style, onFocus, onItemSelected }) => {
4044
renderItem={({ item, index }) => {
4145
return (
4246
<Gallery
43-
title={item.title}
47+
title={getSectionTitle(item)}
4448
items={item.content}
4549
rowNumber={index}
4650
index={index}
4751
onFocus={handleItemFocus}
4852
onViewMoreFocus={onViewMoreFocus}
53+
onViewMorePress={() => onViewMore(item.title, item.type)}
4954
onPress={onItemSelected}
55+
hideViewMoreButton={hideViewMoreButton || !item.canLoadMore}
5056
/>
5157
)
5258
}}

0 commit comments

Comments
 (0)