Jacques_tirot
96 lines
2.4 KiB
JavaScript
96 lines
2.4 KiB
JavaScript
import { MaterialIcons } from '@expo/vector-icons'
|
|
import { VideoView, useVideoPlayer } from 'expo-video'
|
|
import React, { useEffect, useMemo, useState } from 'react'
|
|
import { Pressable, StyleSheet, Text, View } from 'react-native'
|
|
|
|
const BackgroundVideo = ({ source, silent = false }) => {
|
|
const [muted, setMuted] = useState(false)
|
|
const resolvedSource = useMemo(
|
|
() => (source ? (typeof source === 'string' ? { uri: source } : source) : null),
|
|
[source]
|
|
)
|
|
|
|
const player = useVideoPlayer(resolvedSource, (nextPlayer) => {
|
|
nextPlayer.loop = true
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (!source) {
|
|
player?.pause?.()
|
|
return
|
|
}
|
|
|
|
player.muted = silent || muted
|
|
player.play()
|
|
}, [muted, player, silent, source])
|
|
|
|
if (!source) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<View pointerEvents="box-none" style={styles.container}>
|
|
<VideoView
|
|
player={player}
|
|
nativeControls={false}
|
|
contentFit="cover"
|
|
style={StyleSheet.absoluteFill}
|
|
/>
|
|
<View pointerEvents="none" style={styles.scrim} />
|
|
{!silent ? (
|
|
<Pressable
|
|
accessibilityRole="button"
|
|
accessibilityLabel={muted ? 'Activer le son' : 'Couper le son'}
|
|
onPress={() => setMuted((currentMuted) => !currentMuted)}
|
|
style={({ pressed }) => [styles.soundButton, pressed && styles.soundButtonPressed]}
|
|
>
|
|
<MaterialIcons
|
|
name={muted ? 'volume-off' : 'volume-up'}
|
|
size={20}
|
|
color="#FFFFFF"
|
|
/>
|
|
<Text style={styles.soundButtonText}>
|
|
{muted ? 'Activer le son' : 'Couper le son'}
|
|
</Text>
|
|
</Pressable>
|
|
) : null}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default React.memo(BackgroundVideo)
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
...StyleSheet.absoluteFillObject,
|
|
overflow: 'hidden',
|
|
},
|
|
scrim: {
|
|
...StyleSheet.absoluteFillObject,
|
|
backgroundColor: 'rgba(5, 7, 12, 0.52)',
|
|
},
|
|
soundButton: {
|
|
position: 'absolute',
|
|
top: 80,
|
|
left: 16,
|
|
zIndex: 30,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 10,
|
|
borderRadius: 22,
|
|
borderWidth: 1,
|
|
borderColor: 'rgba(255, 255, 255, 0.42)',
|
|
backgroundColor: 'rgba(7, 9, 14, 0.68)',
|
|
},
|
|
soundButtonPressed: {
|
|
opacity: 0.78,
|
|
},
|
|
soundButtonText: {
|
|
color: '#FFFFFF',
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
},
|
|
})
|