106 lines
3.1 KiB
JavaScript
106 lines
3.1 KiB
JavaScript
import { BlurView } from 'expo-blur'
|
|
import React from 'react'
|
|
import { Image, Platform, Pressable, StyleSheet, Text, View } from 'react-native'
|
|
import { Feather } from '@expo/vector-icons'
|
|
import ProfilePicture from '../../../components/ProfilePicture'
|
|
import { icons } from '../../../assets'
|
|
import { Palette } from '../../../styles'
|
|
import { FONT_FAMILY } from '../../../styles/Fonts'
|
|
import { size } from '../../../styles/Style'
|
|
|
|
const PlaybackActions = ({
|
|
owner,
|
|
currentUID,
|
|
isFollowing,
|
|
isFollowActionPending,
|
|
onToggleFollow,
|
|
likesCount,
|
|
isLiked,
|
|
onToggleLike,
|
|
commentsCount,
|
|
onCommentsPress,
|
|
onShare,
|
|
onReport,
|
|
onOpenProfile,
|
|
}) => {
|
|
return (
|
|
<View style={styles.actionsColumn}>
|
|
<View style={styles.profileWrapper}>
|
|
<Pressable onPress={onOpenProfile}>
|
|
<ProfilePicture
|
|
uri={owner?.profilePictureURL || null}
|
|
size={45}
|
|
imageProps={{ priority: 'high' }}
|
|
/>
|
|
</Pressable>
|
|
{owner?.id && owner.id !== currentUID && (
|
|
<Pressable disabled={isFollowActionPending} onPress={onToggleFollow}>
|
|
<BlurView
|
|
tint="dark"
|
|
intensity={Platform.OS !== 'ios' ? 10 : 20}
|
|
style={[
|
|
styles.followButton,
|
|
{ backgroundColor: isFollowing ? '#FFFFFF1A' : undefined },
|
|
]}
|
|
>
|
|
<Text style={styles.followText}>{isFollowing ? 'Suivi(e)' : 'Suivre'}</Text>
|
|
</BlurView>
|
|
</Pressable>
|
|
)}
|
|
</View>
|
|
<Pressable onPress={onToggleLike} style={styles.centered}>
|
|
<Image
|
|
source={isLiked ? icons.heart : icons.heartOutline}
|
|
style={size({ size: 26 })}
|
|
resizeMode="contain"
|
|
/>
|
|
{!!likesCount && <Text style={styles.countText}>{likesCount}</Text>}
|
|
</Pressable>
|
|
<Pressable onPress={onCommentsPress} style={styles.centered}>
|
|
<Image source={icons.chatBubble} style={size({ size: 26 })} />
|
|
{!!commentsCount && <Text style={styles.countText}>{commentsCount}</Text>}
|
|
</Pressable>
|
|
<Pressable onPress={onShare}>
|
|
<Image source={icons.share} style={size({ size: 26 })} />
|
|
</Pressable>
|
|
<Pressable onPress={onReport} style={styles.centered}>
|
|
<Feather name="flag" size={26} color={Palette.white} />
|
|
<Text style={styles.countText}>Signaler</Text>
|
|
</Pressable>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
actionsColumn: {
|
|
alignSelf: 'flex-end',
|
|
alignItems: 'center',
|
|
gap: 20,
|
|
paddingHorizontal: 13,
|
|
},
|
|
profileWrapper: { gap: 6, alignItems: 'center' },
|
|
followButton: {
|
|
paddingVertical: 6,
|
|
paddingHorizontal: 12,
|
|
borderRadius: 12,
|
|
borderWidth: 1,
|
|
borderColor: Palette.white,
|
|
overflow: 'hidden',
|
|
},
|
|
followText: {
|
|
fontSize: 13,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterMedium,
|
|
},
|
|
centered: { alignItems: 'center' },
|
|
countText: {
|
|
color: Palette.white,
|
|
fontSize: 11,
|
|
marginTop: 4,
|
|
fontFamily: FONT_FAMILY.InterMedium,
|
|
textAlign: 'center',
|
|
},
|
|
})
|
|
|
|
export default PlaybackActions
|