Skip to content

Commit 5e1f293

Browse files
dansupdansup
committed
Update VideoPlayer, fix android bug
1 parent f328104 commit 5e1f293

File tree

1 file changed

+101
-91
lines changed

1 file changed

+101
-91
lines changed

‎src/components/feed/VideoPlayer.tsx‎

Lines changed: 101 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
StyleSheet,
1414
Text,
1515
TouchableOpacity,
16-
View
16+
View,
1717
} from 'react-native';
1818

1919
const { height: SCREEN_HEIGHT, width: SCREEN_WIDTH } = Dimensions.get('window');
@@ -34,7 +34,7 @@ export default function VideoPlayer({
3434
otherOpen,
3535
navigation,
3636
onNavigate,
37-
tabBarHeight = 60
37+
tabBarHeight = 60,
3838
}) {
3939
const [isLiked, setIsLiked] = useState(item.has_liked);
4040
const [isBookmarked, setIsBookmarked] = useState(item.has_bookmarked);
@@ -97,7 +97,16 @@ export default function VideoPlayer({
9797
} catch (error) {
9898
console.log('Player control error:', error);
9999
}
100-
}, [isActive, commentsOpen, shareOpen, otherOpen, screenFocused, player, item.is_sensitive, playSensitive]);
100+
}, [
101+
isActive,
102+
commentsOpen,
103+
shareOpen,
104+
otherOpen,
105+
screenFocused,
106+
player,
107+
item.is_sensitive,
108+
playSensitive,
109+
]);
101110

102111
useEffect(() => {
103112
if (!isActive) {
@@ -112,9 +121,9 @@ export default function VideoPlayer({
112121
};
113122

114123
const handleBookmark = () => {
115-
setIsBookmarked(!isBookmarked)
116-
onBookmark(item.id, !isBookmarked)
117-
}
124+
setIsBookmarked(!isBookmarked);
125+
onBookmark(item.id, !isBookmarked);
126+
};
118127

119128
const togglePlayPause = () => {
120129
if (!player || !isMountedRef.current) return;
@@ -138,7 +147,7 @@ export default function VideoPlayer({
138147
if (!isMountedRef.current) {
139148
return;
140149
}
141-
150+
142151
const newShowControls = !showControls;
143152
setShowControls(newShowControls);
144153

@@ -172,60 +181,60 @@ export default function VideoPlayer({
172181
setPlaySensitive(true);
173182
};
174183

175-
176-
if(item.is_sensitive && !playSensitive) {
184+
if (item.is_sensitive && !playSensitive) {
177185
return (
178-
<View style={styles.videoContainer}>
179-
<View
180-
style={styles.sensitiveOverlay}
181-
accessible={true}
182-
accessibilityLabel="Sensitive content warning. This video may contain sensitive content."
183-
accessibilityRole="alert">
184-
<View style={styles.sensitiveContent}>
185-
<View style={styles.sensitiveIconWrapper}>
186-
<Ionicons name="eye-off-outline" size={48} color="white" />
187-
</View>
188-
<Text style={styles.sensitiveTitle}>Sensitive Content</Text>
189-
<Text style={styles.sensitiveDescription}>
190-
This video may contain sensitive content
191-
</Text>
192-
<View style={styles.buttonContainer}>
193-
<TouchableOpacity
194-
style={styles.viewButton}
195-
onPress={handleViewSensitiveContent}
196-
activeOpacity={0.8}
197-
accessible={true}
198-
accessibilityLabel="Watch video anyway"
199-
accessibilityRole="button"
200-
accessibilityHint="Dismisses the sensitive content warning and plays the video"
201-
>
202-
<Text style={styles.viewButtonText}>Watch anyways</Text>
203-
</TouchableOpacity>
186+
<View style={styles.videoContainer}>
187+
<View
188+
style={styles.sensitiveOverlay}
189+
accessible={true}
190+
accessibilityLabel="Sensitive content warning. This video may contain sensitive content."
191+
accessibilityRole="alert">
192+
<View style={styles.sensitiveContent}>
193+
<View style={styles.sensitiveIconWrapper}>
194+
<Ionicons name="eye-off-outline" size={48} color="white" />
195+
</View>
196+
<Text style={styles.sensitiveTitle}>Sensitive Content</Text>
197+
<Text style={styles.sensitiveDescription}>
198+
This video may contain sensitive content
199+
</Text>
200+
<View style={styles.buttonContainer}>
201+
<TouchableOpacity
202+
style={styles.viewButton}
203+
onPress={handleViewSensitiveContent}
204+
activeOpacity={0.8}
205+
accessible={true}
206+
accessibilityLabel="Watch video anyway"
207+
accessibilityRole="button"
208+
accessibilityHint="Dismisses the sensitive content warning and plays the video">
209+
<Text style={styles.viewButtonText}>Watch anyways</Text>
210+
</TouchableOpacity>
211+
</View>
204212
</View>
205213
</View>
206214
</View>
207-
</View>
208-
)
215+
);
209216
}
210217

211218
return (
212219
<View style={styles.videoContainer}>
213-
<Pressable
214-
style={styles.videoWrapper}
215-
onPress={() => handleScreenPress()}
216-
disabled={showControls}
217-
>
220+
<View style={styles.videoWrapper}>
218221
<VideoView
219222
style={styles.video}
220223
player={player}
221224
allowsPictureInPicture={false}
222225
nativeControls={false}
223226
accessible={true}
224-
accessibilityLabel={item.media.alt_text || "Video content"}
227+
accessibilityLabel={item.media.alt_text || 'Video content'}
225228
accessibilityHint="Double tap to play or pause"
226229
contentFit="contain"
227230
/>
228231

232+
<Pressable
233+
style={StyleSheet.absoluteFill}
234+
onPress={() => handleScreenPress()}
235+
disabled={showControls}
236+
/>
237+
229238
{showControls && (
230239
<View style={styles.controlsOverlay} pointerEvents="box-none">
231240
<TouchableOpacity
@@ -234,17 +243,12 @@ export default function VideoPlayer({
234243
togglePlayPause();
235244
}}
236245
style={styles.playButton}
237-
activeOpacity={0.7}
238-
>
239-
<Ionicons
240-
name={isPlaying ? 'pause' : 'play'}
241-
size={60}
242-
color="white"
243-
/>
246+
activeOpacity={0.7}>
247+
<Ionicons name={isPlaying ? 'pause' : 'play'} size={60} color="white" />
244248
</TouchableOpacity>
245249
</View>
246250
)}
247-
</Pressable>
251+
</View>
248252

249253
<LinearGradient
250254
colors={['transparent', 'rgba(0,0,0,0.4)', 'rgba(0,0,0,0.7)']}
@@ -253,18 +257,16 @@ export default function VideoPlayer({
253257
/>
254258

255259
<View style={[styles.rightActions, { bottom: bottomInset + tabBarHeight + 20 }]}>
256-
<PressableHaptics style={styles.actionButton} onPress={() => router.push(`/private/profile/${item.account.id}`)}>
260+
<PressableHaptics
261+
style={styles.actionButton}
262+
onPress={() => router.push(`/private/profile/${item.account.id}`)}>
257263
<View style={styles.avatarContainer}>
258264
<Avatar url={item.account?.avatar} />
259265
</View>
260266
</PressableHaptics>
261267

262268
<PressableHaptics style={styles.actionButton} onPress={handleLike}>
263-
<Ionicons
264-
name={'heart'}
265-
size={35}
266-
color={isLiked ? '#FF2D55' : 'white'}
267-
/>
269+
<Ionicons name={'heart'} size={35} color={isLiked ? '#FF2D55' : 'white'} />
268270
<Text style={styles.actionText}>
269271
{item.likes + (isLiked && !item.has_liked ? 1 : 0)}
270272
</Text>
@@ -278,8 +280,14 @@ export default function VideoPlayer({
278280
</TouchableOpacity>
279281

280282
<TouchableOpacity style={styles.actionButton} onPress={handleBookmark}>
281-
<Ionicons name="bookmark" size={32} color={isBookmarked ? '#FF2D55' : 'white'} />
282-
<Text style={styles.actionText}>{item.bookmarks + (isBookmarked && !item.has_bookmarked ? 1 : 0)}</Text>
283+
<Ionicons
284+
name="bookmark"
285+
size={32}
286+
color={isBookmarked ? '#FF2D55' : 'white'}
287+
/>
288+
<Text style={styles.actionText}>
289+
{item.bookmarks + (isBookmarked && !item.has_bookmarked ? 1 : 0)}
290+
</Text>
283291
</TouchableOpacity>
284292

285293
<TouchableOpacity style={styles.actionButton} onPress={() => onShare(item)}>
@@ -296,27 +304,28 @@ export default function VideoPlayer({
296304
<TouchableOpacity
297305
onPress={() => {
298306
onNavigate?.();
299-
router.push(`/private/profile/${item.account.id}`)
300-
}}
301-
>
307+
router.push(`/private/profile/${item.account.id}`);
308+
}}>
302309
<Text style={styles.username}>@{item.account.username}</Text>
303310
</TouchableOpacity>
304-
{ item.caption && (<LinkifiedCaption
305-
caption={item.caption}
306-
tags={item.tags || []}
307-
mentions={item.mentions || []}
308-
style={styles.caption}
309-
numberOfLines={1}
310-
onHashtagPress={(tag) => {
311-
onNavigate?.();
312-
router.push(`/private/search?query=${tag}`)
313-
}}
314-
onMentionPress={(username, profileId) => {
315-
onNavigate?.();
316-
router.push(`/private/profile/${profileId}`)
317-
}}
318-
onMorePress={() => onComment(item)}
319-
/>) }
311+
{item.caption && (
312+
<LinkifiedCaption
313+
caption={item.caption}
314+
tags={item.tags || []}
315+
mentions={item.mentions || []}
316+
style={styles.caption}
317+
numberOfLines={1}
318+
onHashtagPress={(tag) => {
319+
onNavigate?.();
320+
router.push(`/private/search?query=${tag}`);
321+
}}
322+
onMentionPress={(username, profileId) => {
323+
onNavigate?.();
324+
router.push(`/private/profile/${profileId}`);
325+
}}
326+
onMorePress={() => onComment(item)}
327+
/>
328+
)}
320329

321330
{item?.meta?.contains_ai && (
322331
<View>
@@ -340,7 +349,7 @@ export default function VideoPlayer({
340349
</View>
341350
</View>
342351
);
343-
};
352+
}
344353

345354
const styles = StyleSheet.create({
346355
videoContainer: {
@@ -391,7 +400,7 @@ const styles = StyleSheet.create({
391400
sensitiveIconWrapper: {
392401
padding: 20,
393402
borderRadius: 90,
394-
backgroundColor: 'rgba(255, 255, 255, 0.2)'
403+
backgroundColor: 'rgba(255, 255, 255, 0.2)',
395404
},
396405
sensitiveTitle: {
397406
color: 'white',
@@ -441,16 +450,17 @@ const styles = StyleSheet.create({
441450
},
442451
android: {
443452
filter: [
444-
{
445-
dropShadow: {
446-
offsetX: 0,
447-
offsetY: 2,
448-
standardDeviation: '3px',
449-
color: '#0000004D', // 30% opacity
453+
{
454+
dropShadow: {
455+
offsetX: 0,
456+
offsetY: 2,
457+
standardDeviation: '3px',
458+
color: '#0000004D', // 30% opacity
459+
},
450460
},
451-
}],
452-
}
453-
})
461+
],
462+
},
463+
}),
454464
},
455465
avatarContainer: {
456466
borderWidth: 2,
@@ -527,5 +537,5 @@ const styles = StyleSheet.create({
527537
aiLabelText: {
528538
color: '#ffffff',
529539
fontWeight: 500,
530-
}
531-
});
540+
},
541+
});

0 commit comments

Comments
 (0)