feat: refine creation and registration flows
This commit is contained in:
Sacha
@@ -0,0 +1,91 @@
|
||||
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 }) => {
|
||||
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 = muted
|
||||
player.play()
|
||||
}, [muted, player, 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} />
|
||||
<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>
|
||||
</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',
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,175 @@
|
||||
import { MaterialIcons } from '@expo/vector-icons'
|
||||
import { Asset } from 'expo-asset'
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import { Pressable, StyleSheet, Text, View } from 'react-native'
|
||||
|
||||
const resolveModuleUri = async (source) => {
|
||||
const asset = Asset.fromModule(source)
|
||||
|
||||
if (!asset.localUri && !asset.uri) {
|
||||
await asset.downloadAsync()
|
||||
}
|
||||
|
||||
return asset.localUri ?? asset.uri ?? null
|
||||
}
|
||||
|
||||
const BackgroundVideo = ({ source, soundButtonStyle = null }) => {
|
||||
const videoRef = useRef(null)
|
||||
const [uri, setUri] = useState(null)
|
||||
const [muted, setMuted] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true
|
||||
|
||||
if (!source) {
|
||||
setUri(null)
|
||||
return () => {
|
||||
isMounted = false
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof source === 'string') {
|
||||
setUri(source)
|
||||
return () => {
|
||||
isMounted = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadSource = async () => {
|
||||
try {
|
||||
const nextUri = await resolveModuleUri(source)
|
||||
if (isMounted) {
|
||||
setUri(nextUri)
|
||||
}
|
||||
} catch {
|
||||
if (isMounted) {
|
||||
setUri(null)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
loadSource()
|
||||
|
||||
return () => {
|
||||
isMounted = false
|
||||
}
|
||||
}, [source])
|
||||
|
||||
useEffect(() => {
|
||||
const video = videoRef.current
|
||||
|
||||
if (!video || !uri) {
|
||||
return
|
||||
}
|
||||
|
||||
const playResult = video.play()
|
||||
playResult?.catch?.((error) => {
|
||||
if (error?.name === 'NotAllowedError') {
|
||||
setMuted(true)
|
||||
video.muted = true
|
||||
video.play()?.catch?.(() => {})
|
||||
}
|
||||
})
|
||||
}, [uri])
|
||||
|
||||
useEffect(() => {
|
||||
const video = videoRef.current
|
||||
|
||||
if (!video) {
|
||||
return
|
||||
}
|
||||
|
||||
video.muted = muted
|
||||
if (video.paused) {
|
||||
video.play()?.catch?.(() => {})
|
||||
}
|
||||
}, [muted])
|
||||
|
||||
if (!uri) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<View pointerEvents="box-none" style={styles.container}>
|
||||
<video
|
||||
ref={videoRef}
|
||||
src={uri}
|
||||
style={styles.video}
|
||||
playsInline
|
||||
autoPlay
|
||||
loop
|
||||
muted={muted}
|
||||
controls={false}
|
||||
/>
|
||||
<View pointerEvents="none" style={styles.scrim} />
|
||||
<Pressable
|
||||
accessibilityRole="button"
|
||||
accessibilityLabel={muted ? 'Activer le son' : 'Couper le son'}
|
||||
onPress={() => setMuted((currentMuted) => !currentMuted)}
|
||||
style={({ hovered, pressed }) => [
|
||||
styles.soundButton,
|
||||
soundButtonStyle,
|
||||
hovered && styles.soundButtonHovered,
|
||||
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>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(BackgroundVideo)
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
video: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
},
|
||||
scrim: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: 'rgba(5, 7, 12, 0.52)',
|
||||
},
|
||||
soundButton: {
|
||||
position: 'absolute',
|
||||
top: 78,
|
||||
left: 24,
|
||||
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)',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
soundButtonHovered: {
|
||||
backgroundColor: 'rgba(7, 9, 14, 0.82)',
|
||||
},
|
||||
soundButtonPressed: {
|
||||
opacity: 0.78,
|
||||
},
|
||||
soundButtonText: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
},
|
||||
})
|
||||
@@ -0,0 +1,92 @@
|
||||
import { Image as ExpoImage } from 'expo-image'
|
||||
import React from 'react'
|
||||
import { StyleSheet, Text, View } from 'react-native'
|
||||
import { img } from '../assets'
|
||||
import { FONT_FAMILY } from '../styles/Fonts'
|
||||
|
||||
const MusiclandPlaybackCover = ({
|
||||
artistName,
|
||||
profilePictureURL,
|
||||
coverUrl,
|
||||
style,
|
||||
}) => {
|
||||
const displayName =
|
||||
typeof artistName === 'string' && artistName.trim() ? artistName.trim() : 'MusicLand'
|
||||
|
||||
return (
|
||||
<View style={[styles.container, style]}>
|
||||
<ExpoImage
|
||||
source={coverUrl ? { uri: coverUrl } : img.musiclandPlaybackCover}
|
||||
contentFit="cover"
|
||||
cachePolicy="memory-disk"
|
||||
priority="high"
|
||||
style={StyleSheet.absoluteFillObject}
|
||||
/>
|
||||
{!coverUrl && profilePictureURL ? (
|
||||
<ExpoImage
|
||||
source={{ uri: profilePictureURL }}
|
||||
contentFit="cover"
|
||||
cachePolicy="memory-disk"
|
||||
style={styles.profilePicture}
|
||||
/>
|
||||
) : null}
|
||||
{!coverUrl ? (
|
||||
<>
|
||||
<Text
|
||||
adjustsFontSizeToFit
|
||||
minimumFontScale={0.55}
|
||||
numberOfLines={1}
|
||||
style={styles.artistName}
|
||||
>
|
||||
{displayName}
|
||||
</Text>
|
||||
<Text style={styles.playbacker}>PLAYBACKER</Text>
|
||||
</>
|
||||
) : null}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
width: '100%',
|
||||
aspectRatio: 1,
|
||||
borderRadius: 20,
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
},
|
||||
profilePicture: {
|
||||
position: 'absolute',
|
||||
width: '22.3%',
|
||||
aspectRatio: 1,
|
||||
left: '38.85%',
|
||||
top: '44.3%',
|
||||
borderRadius: 999,
|
||||
},
|
||||
artistName: {
|
||||
position: 'absolute',
|
||||
top: '76.5%',
|
||||
left: '16%',
|
||||
width: '68%',
|
||||
color: '#FFFFFF',
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
fontSize: 21,
|
||||
lineHeight: 26,
|
||||
letterSpacing: 1.2,
|
||||
textAlign: 'center',
|
||||
},
|
||||
playbacker: {
|
||||
position: 'absolute',
|
||||
bottom: '3%',
|
||||
left: '10%',
|
||||
width: '80%',
|
||||
color: '#FFFFFF',
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
fontSize: 20,
|
||||
lineHeight: 25,
|
||||
letterSpacing: 1.4,
|
||||
textAlign: 'center',
|
||||
},
|
||||
})
|
||||
|
||||
export default React.memo(MusiclandPlaybackCover)
|
||||
Reference in New Issue
Block a user