Skip to content

Commit f6f2f06

Browse files
anwersolangianwersolangi
committed
Updated the rendered function and optimizations
1 parent 8ebd95c commit f6f2f06

File tree

1 file changed

+137
-146
lines changed

1 file changed

+137
-146
lines changed

‎src/Screens/Player.js‎

Lines changed: 137 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,131 @@ const Player = props => {
126126
}
127127
};
128128

129+
const renderedItems = ({item, index}) => {
130+
return (
131+
<Pressable
132+
onPress={() =>
133+
props.navigation.navigate('Player', {
134+
videoIndex: index,
135+
})
136+
}
137+
style={styles.autoPlayContainer}>
138+
<Image
139+
source={{
140+
uri: `http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/${item?.thumb}`,
141+
}}
142+
resizeMode="cover"
143+
style={styles.thumbnail}
144+
/>
145+
<View style={styles.detailContainer}>
146+
<View style={styles.titleContainer}>
147+
<Text style={styles.listVideoTitle} numberOfLines={2}>
148+
{item?.title}
149+
</Text>
150+
<Text style={styles.videoDescription} numberOfLines={2}>
151+
{`${item?.views} views . ${
152+
item?.uploaded === 'just now'
153+
? 'just now'
154+
: `${item?.uploaded} ago`
155+
}`}
156+
</Text>
157+
</View>
158+
</View>
159+
</Pressable>
160+
);
161+
};
162+
163+
const HeaderComp = () => {
164+
return (
165+
<View>
166+
<View style={styles.descHead}>
167+
<Text style={styles.heading} numberOfLines={2}>
168+
{data?.title}
169+
</Text>
170+
<Pressable onPress={() => setDescModal(true)}>
171+
<Icon name="chevron-down-outline" color="#040201" size={24} />
172+
</Pressable>
173+
</View>
174+
<Text style={styles.videoDesc} numberOfLines={2}>
175+
{`${numberFormat(data?.views)} views . ${
176+
data?.uploaded === 'just now' ? 'just now' : `${data?.uploaded} ago`
177+
}`}
178+
</Text>
179+
<View style={styles.optionsContainer}>
180+
<View style={styles.option}>
181+
<Icon name="heart-outline" color="#040201" size={30} />
182+
<Text style={styles.optionCounter}>
183+
{numberFormat(data?.likes)}
184+
</Text>
185+
</View>
186+
<View style={styles.option}>
187+
<Icon name="heart-dislike-outline" color="#040201" size={30} />
188+
<Text style={styles.optionCounter}>{data?.dislikes}</Text>
189+
</View>
190+
<View style={styles.option}>
191+
<Icon name="share-social-outline" color="#040201" size={30} />
192+
<Text style={styles.optionCounter}>Share</Text>
193+
</View>
194+
<View style={styles.option}>
195+
<Icon name="download-outline" color="#040201" size={30} />
196+
<Text style={styles.optionCounter}>Download</Text>
197+
</View>
198+
<View style={styles.option}>
199+
<Icon name="bookmark-outline" color="#040201" size={30} />
200+
<Text style={styles.optionCounter}>Save</Text>
201+
</View>
202+
</View>
203+
<View style={styles.seperator} />
204+
<View style={styles.channelContainer}>
205+
<TouchableOpacity
206+
style={styles.channel}
207+
onPress={() =>
208+
props.navigation.navigate('ChannelScreen', {
209+
channelName: data?.channel,
210+
channelIndex: data?.channelId,
211+
})
212+
}>
213+
<Image
214+
source={{
215+
uri: 'https://s3.envato.com/files/335035895/thumbnail.png',
216+
}}
217+
style={styles.channelAvtar}
218+
/>
219+
<Text style={styles.channelName}>{data?.channel}</Text>
220+
</TouchableOpacity>
221+
<TouchableOpacity style={styles.followButton}>
222+
<Text style={styles.followText}>Follow</Text>
223+
</TouchableOpacity>
224+
</View>
225+
<View style={styles.seperator} />
226+
<Pressable
227+
style={styles.commentContainer}
228+
onPress={() => setCommentModal(true)}>
229+
<View style={styles.descHead}>
230+
<Text style={styles.commentText}>
231+
Comments <Text style={styles.commentCount}>23</Text>
232+
</Text>
233+
<Icon name="ellipsis-horizontal" color="#040201" size={24} />
234+
</View>
235+
<View style={styles.commentAccount}>
236+
<Image
237+
source={{uri: 'https://picsum.photos/200/300'}}
238+
style={styles.commentAvtar}
239+
/>
240+
<Text style={styles.userCommentText}>
241+
This is the dummy comment
242+
</Text>
243+
</View>
244+
</Pressable>
245+
<View style={styles.seperator} />
246+
</View>
247+
);
248+
};
249+
250+
const AutoFooter = () => {
251+
return <View />;
252+
};
253+
129254
return (
130255
<View style={styles.container}>
131256
<StatusBar hidden={fullScreen} />
@@ -192,153 +317,12 @@ const Player = props => {
192317
<VirtualizedList
193318
data={HomeData}
194319
getItemCount={() => HomeData.length}
195-
getItem={(data, index) => data[index]}
320+
getItem={(item, index) => item[index]}
196321
contentContainerStyle={styles.descContainer}
197-
ListFooterComponent={() => <View />}
322+
ListFooterComponent={AutoFooter}
198323
ListFooterComponentStyle={{height: 15}}
199-
ListHeaderComponent={() => {
200-
return (
201-
<View>
202-
<View style={styles.descHead}>
203-
<Text style={styles.heading} numberOfLines={2}>
204-
{data?.title}
205-
</Text>
206-
<Pressable onPress={() => setDescModal(true)}>
207-
<Icon
208-
name="chevron-down-outline"
209-
color="#040201"
210-
size={24}
211-
/>
212-
</Pressable>
213-
</View>
214-
<Text style={styles.videoDesc} numberOfLines={2}>
215-
{`${numberFormat(data?.views)} views . ${
216-
data?.uploaded === 'just now'
217-
? 'just now'
218-
: `${data?.uploaded} ago`
219-
}`}
220-
</Text>
221-
<View style={styles.optionsContainer}>
222-
<View style={styles.option}>
223-
<Icon name="heart-outline" color="#040201" size={30} />
224-
<Text style={styles.optionCounter}>
225-
{numberFormat(data?.likes)}
226-
</Text>
227-
</View>
228-
<View style={styles.option}>
229-
<Icon
230-
name="heart-dislike-outline"
231-
color="#040201"
232-
size={30}
233-
/>
234-
<Text style={styles.optionCounter}>{data?.dislikes}</Text>
235-
</View>
236-
<View style={styles.option}>
237-
<Icon
238-
name="share-social-outline"
239-
color="#040201"
240-
size={30}
241-
/>
242-
<Text style={styles.optionCounter}>Share</Text>
243-
</View>
244-
<View style={styles.option}>
245-
<Icon name="download-outline" color="#040201" size={30} />
246-
<Text style={styles.optionCounter}>Download</Text>
247-
</View>
248-
<View style={styles.option}>
249-
<Icon name="bookmark-outline" color="#040201" size={30} />
250-
<Text style={styles.optionCounter}>Save</Text>
251-
</View>
252-
</View>
253-
<View style={styles.seperator} />
254-
<View style={styles.channelContainer}>
255-
<TouchableOpacity
256-
style={styles.channel}
257-
onPress={() =>
258-
props.navigation.navigate('ChannelScreen', {
259-
channelName: data?.channel,
260-
channelIndex: data?.channelId,
261-
})
262-
}>
263-
<Image
264-
source={{
265-
uri: 'https://s3.envato.com/files/335035895/thumbnail.png',
266-
}}
267-
style={styles.channelAvtar}
268-
/>
269-
<Text style={styles.channelName}>{data?.channel}</Text>
270-
</TouchableOpacity>
271-
<TouchableOpacity style={styles.followButton}>
272-
<Text style={styles.followText}>Follow</Text>
273-
</TouchableOpacity>
274-
</View>
275-
<View style={styles.seperator} />
276-
<Pressable
277-
style={styles.commentContainer}
278-
onPress={() => setCommentModal(true)}>
279-
<View style={styles.descHead}>
280-
<Text style={styles.commentText}>
281-
Comments <Text style={styles.commentCount}>23</Text>
282-
</Text>
283-
<Icon
284-
name="ellipsis-horizontal"
285-
color="#040201"
286-
size={24}
287-
/>
288-
</View>
289-
<View style={styles.commentAccount}>
290-
<Image
291-
source={{uri: 'https://picsum.photos/200/300'}}
292-
style={styles.commentAvtar}
293-
/>
294-
<Text style={styles.userCommentText}>
295-
This is the dummy comment
296-
</Text>
297-
</View>
298-
</Pressable>
299-
<View style={styles.seperator} />
300-
</View>
301-
);
302-
}}
303-
renderItem={({item, index}) => {
304-
return (
305-
<Pressable
306-
onPress={() =>
307-
props.navigation.navigate('Player', {
308-
videoIndex: index,
309-
})
310-
}
311-
style={{
312-
flexDirection: 'row',
313-
marginHorizontal: 10,
314-
marginVertical: 8,
315-
width: '100%',
316-
alignItems: 'flex-start',
317-
}}>
318-
<Image
319-
source={{
320-
uri: `http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/${item?.thumb}`,
321-
}}
322-
resizeMode="cover"
323-
style={styles.thumbnail}
324-
/>
325-
<View style={styles.detailContainer}>
326-
<View style={styles.titleContainer}>
327-
<Text style={styles.listVideoTitle} numberOfLines={2}>
328-
{item?.title}
329-
</Text>
330-
<Text style={styles.videoDescription} numberOfLines={2}>
331-
{`${item?.views} views . ${
332-
item?.uploaded === 'just now'
333-
? 'just now'
334-
: `${item?.uploaded} ago`
335-
}`}
336-
</Text>
337-
</View>
338-
</View>
339-
</Pressable>
340-
);
341-
}}
324+
ListHeaderComponent={HeaderComp}
325+
renderItem={renderedItems}
342326
keyExtractor={(item, index) => index.toString()}
343327
/>
344328
)}
@@ -376,7 +360,7 @@ const Player = props => {
376360
<VirtualizedList
377361
data={CommentsData}
378362
getItemCount={() => CommentsData.length}
379-
getItem={(data, index) => data[index]}
363+
getItem={(item, index) => item[index]}
380364
keyExtractor={(item, index) => index.toString()}
381365
renderItem={({item}) => {
382366
return (
@@ -835,6 +819,13 @@ const styles = StyleSheet.create({
835819
fontFamily: 'Roboto-Medium',
836820
fontSize: 12,
837821
},
822+
autoPlayContainer: {
823+
flexDirection: 'row',
824+
marginHorizontal: 10,
825+
marginVertical: 8,
826+
width: '100%',
827+
alignItems: 'flex-start',
828+
},
838829
});
839830

840831
export default Player;

0 commit comments

Comments
 (0)