608 lines
19 KiB
JavaScript
608 lines
19 KiB
JavaScript
import { BlurView } from 'expo-blur'
|
|
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
|
import { Image, Pressable, StyleSheet, Text, View, useWindowDimensions } from 'react-native'
|
|
import { icons, img } from '../../../assets'
|
|
import KaraokeLyrics from '../../../components/KaraokeLyrics'
|
|
import { usersRef } from '../../../config/firebase'
|
|
import { Routes } from '../../../navigation'
|
|
import { navigate } from '../../../navigation/NavigationService'
|
|
import { useUser } from '../../../providers/UserDataProvider'
|
|
import { Palette } from '../../../styles'
|
|
import { FONT_FAMILY } from '../../../styles/Fonts'
|
|
import { size } from '../../../styles/Style'
|
|
import CommentsPanel from './CommentsPanel.web'
|
|
import { getProjectLikes, LIKE_TARGET, toggleProjectLike } from '../../../utils/likes'
|
|
import { ensureAuthenticated } from '../../../utils/authRedirect'
|
|
import { createPlaybackSharePayload, openShareSheet } from '../../../utils/shareSheet'
|
|
import { SheetManager } from 'react-native-actions-sheet'
|
|
import { Feather } from '@expo/vector-icons'
|
|
|
|
// Debug logging toggle for web playback
|
|
const DEBUG_PLAYBACK_WEB = true
|
|
|
|
// NOTE: Web-only implementation that uses a native <video> element instead of expo-video
|
|
// - No Platform checks
|
|
// - Audio now comes directly from the MP4 playbackUrl
|
|
|
|
const PlaybackItem = ({ item, isActive, userCache, getUserByUid, onBackgroundSync }) => {
|
|
const { width: viewportWidth, height: viewportHeight } = useWindowDimensions()
|
|
|
|
const [layoutSize, setLayoutSize] = useState({
|
|
width: viewportWidth,
|
|
height: viewportHeight,
|
|
})
|
|
const [openComments] = useState(true)
|
|
const commentInputRef = useRef(null)
|
|
const { currentUID, followUser, unfollowUser } = useUser() || {}
|
|
|
|
const videoUrl = item?.playbackUrl || null
|
|
const videoRef = useRef(null) // HTMLVideoElement
|
|
const wasActiveRef = useRef(false)
|
|
const startedRef = useRef(false)
|
|
|
|
const initialLikedBy = getProjectLikes(item, LIKE_TARGET.PLAYBACK)
|
|
const [isLiked, setIsLiked] = useState(currentUID ? initialLikedBy.includes(currentUID) : false)
|
|
const [likesCount, setLikesCount] = useState(initialLikedBy.length)
|
|
|
|
const computedCommentsCount = useMemo(
|
|
() => Number(item?.commentsCount || 0),
|
|
[item?.commentsCount]
|
|
)
|
|
const [commentsCount, setCommentsCount] = useState(computedCommentsCount)
|
|
useEffect(() => {
|
|
setCommentsCount(computedCommentsCount)
|
|
}, [computedCommentsCount])
|
|
|
|
const [owner, setOwner] = useState(
|
|
item?.userId && userCache?.current?.get(item.userId) ? userCache.current.get(item.userId) : null
|
|
)
|
|
useEffect(() => {
|
|
let cancelled = false
|
|
const run = async () => {
|
|
try {
|
|
const uid = item?.userId
|
|
if (!uid || !userCache) return
|
|
const cached = userCache.current.get(uid)
|
|
if (cached) {
|
|
if (!cancelled) setOwner(cached)
|
|
return
|
|
}
|
|
const user = await getUserByUid?.(uid)
|
|
if (!cancelled && user) {
|
|
userCache.current.set(uid, user)
|
|
setOwner(user)
|
|
}
|
|
} catch (_e) {}
|
|
}
|
|
run()
|
|
return () => {
|
|
cancelled = true
|
|
}
|
|
}, [item?.userId, userCache, getUserByUid])
|
|
|
|
useEffect(() => {
|
|
const uid = item?.userId
|
|
if (!uid) return
|
|
const unsub = usersRef.doc(uid).onSnapshot(
|
|
(doc) => {
|
|
if (doc?.exists) {
|
|
const data = { id: doc.id, ...doc.data() }
|
|
setOwner(data)
|
|
try {
|
|
userCache?.current?.set(uid, data)
|
|
} catch (_e) {}
|
|
}
|
|
},
|
|
() => {}
|
|
)
|
|
return () => unsub?.()
|
|
}, [item?.userId, userCache])
|
|
|
|
const [isFollowing, setIsFollowing] = useState(false)
|
|
useEffect(() => {
|
|
const list = Array.isArray(owner?.followedBy) ? owner.followedBy : []
|
|
setIsFollowing(currentUID ? list.includes(currentUID) : false)
|
|
}, [owner?.followedBy, currentUID])
|
|
|
|
useEffect(() => {
|
|
const lb = getProjectLikes(item, LIKE_TARGET.PLAYBACK)
|
|
setLikesCount(lb.length)
|
|
setIsLiked(currentUID ? lb.includes(currentUID) : false)
|
|
}, [item?.likes?.playback, currentUID])
|
|
|
|
useEffect(() => {
|
|
startedRef.current = false
|
|
}, [videoUrl])
|
|
|
|
// Start/reset when active, using the video's own audio
|
|
useEffect(() => {
|
|
const el = videoRef.current
|
|
if (!el) return
|
|
|
|
if (!isActive) {
|
|
try {
|
|
if (!el.paused) el.pause()
|
|
} catch (_e) {}
|
|
try {
|
|
el.muted = true
|
|
} catch (_e) {}
|
|
startedRef.current = false
|
|
onBackgroundSync?.({ isPlaying: false })
|
|
return
|
|
}
|
|
|
|
const start = async () => {
|
|
try {
|
|
if (!startedRef.current) {
|
|
startedRef.current = true
|
|
const resetToStart = () => {
|
|
try {
|
|
el.currentTime = 0
|
|
} catch (_e) {}
|
|
}
|
|
if (el.readyState >= 1) {
|
|
resetToStart()
|
|
} else {
|
|
const handleLoaded = () => {
|
|
resetToStart()
|
|
}
|
|
el.addEventListener('loadeddata', handleLoaded, { once: true })
|
|
}
|
|
}
|
|
el.muted = false
|
|
await el.play().catch((error) => {
|
|
if (DEBUG_PLAYBACK_WEB) {
|
|
console.log('[PlaybackItem.web] play() rejected', error)
|
|
}
|
|
})
|
|
onBackgroundSync?.({
|
|
currentTime: Number(el.currentTime || 0),
|
|
isPlaying: !el.paused,
|
|
})
|
|
} catch (_e) {
|
|
if (DEBUG_PLAYBACK_WEB) {
|
|
console.log('[PlaybackItem.web] start error', _e)
|
|
}
|
|
}
|
|
}
|
|
|
|
start()
|
|
}, [isActive, videoUrl, onBackgroundSync])
|
|
|
|
// Pause all on unmount
|
|
useEffect(() => {
|
|
const el = videoRef.current
|
|
return () => {
|
|
try {
|
|
if (el && !el.paused) el.pause()
|
|
} catch (_e) {}
|
|
onBackgroundSync?.({ isPlaying: false })
|
|
}
|
|
}, [onBackgroundSync])
|
|
|
|
// Lyrics timing based on video clock
|
|
const alignedWords = useMemo(() => {
|
|
const idx = Number(item?.songIndex) || 0
|
|
const ts = item?.musicTimestamps?.[idx]
|
|
const arr = Array.isArray(ts?.alignedWords) ? ts.alignedWords : []
|
|
return arr.map((w) => ({
|
|
word: String(w?.word ?? ''),
|
|
startS: Number(w?.startS ?? 0),
|
|
endS: Number(w?.endS ?? 0),
|
|
}))
|
|
}, [item?.musicTimestamps, item?.songIndex])
|
|
|
|
const [currentTimeS, setCurrentTimeS] = useState(0)
|
|
useEffect(() => {
|
|
if (!isActive) return
|
|
const id = setInterval(() => {
|
|
try {
|
|
const el = videoRef.current
|
|
const videoTime = Number(el?.currentTime || 0)
|
|
const safeTime = Number.isFinite(videoTime) ? videoTime : 0
|
|
setCurrentTimeS(safeTime)
|
|
|
|
onBackgroundSync?.({
|
|
currentTime: safeTime,
|
|
isPlaying: !!el && !el.paused,
|
|
})
|
|
} catch (_e) {}
|
|
}, 250)
|
|
return () => clearInterval(id)
|
|
}, [isActive, onBackgroundSync])
|
|
|
|
useEffect(() => {
|
|
if (!onBackgroundSync) return undefined
|
|
if (isActive) {
|
|
wasActiveRef.current = true
|
|
return undefined
|
|
}
|
|
if (wasActiveRef.current) {
|
|
onBackgroundSync({ isPlaying: false })
|
|
wasActiveRef.current = false
|
|
}
|
|
return undefined
|
|
}, [isActive, onBackgroundSync])
|
|
|
|
const descriptionText = item?.description || item?.title || 'Description chanson'
|
|
|
|
const creatorName = useMemo(() => {
|
|
if (owner?.displayName) return owner.displayName
|
|
if (owner?.artistName) return owner.artistName
|
|
if (owner?.userName) return owner.userName
|
|
if (typeof item?.userName === 'string') return item.userName
|
|
return ''
|
|
}, [item?.userName, owner?.artistName, owner?.displayName, owner?.userName])
|
|
|
|
const sharePayload = useMemo(() => {
|
|
if (!item?.id) return null
|
|
return createPlaybackSharePayload({
|
|
projectId: item.id,
|
|
title: typeof item?.title === 'string' ? item.title.trim() : undefined,
|
|
artist: creatorName || undefined,
|
|
playbackUrl: videoUrl || undefined,
|
|
})
|
|
}, [creatorName, item?.id, item?.title, videoUrl])
|
|
|
|
const handleShare = useCallback(() => {
|
|
if (sharePayload) {
|
|
openShareSheet(sharePayload)
|
|
}
|
|
}, [sharePayload])
|
|
|
|
const handleReport = useCallback(() => {
|
|
if (!item?.id) return
|
|
SheetManager.show('Report', {
|
|
payload: {
|
|
targetType: 'playback',
|
|
projectId: item?.id || null,
|
|
playbackId: item?.id || null,
|
|
title: item?.title || '',
|
|
ownerId: item?.userId || null,
|
|
},
|
|
})
|
|
}, [item?.id, item?.title, item?.userId])
|
|
|
|
const handleLayout = useCallback((event) => {
|
|
const { width = 0, height = 0 } = event?.nativeEvent?.layout || {}
|
|
setLayoutSize((prev) => ({
|
|
width: width > 0 ? width : prev.width,
|
|
height: height > 0 ? height : prev.height,
|
|
}))
|
|
}, [])
|
|
|
|
const layoutWidth = layoutSize.width || viewportWidth
|
|
const layoutHeight = layoutSize.height || viewportHeight
|
|
|
|
const horizontalPadding = 64
|
|
const innerWidth = Math.max(layoutWidth - horizontalPadding * 2, 0)
|
|
const gapBetweenColumns = 40
|
|
const minVideoWidth = 420
|
|
const maxVideoWidth = 720
|
|
const minCommentsWidth = 300
|
|
const maxCommentsWidth = 420
|
|
|
|
let desiredHeight = Math.max(420, layoutHeight * 0.8)
|
|
let videoWidth = Math.min(maxVideoWidth, Math.max(minVideoWidth, innerWidth * 0.58))
|
|
let videoHeight = videoWidth * (16 / 9)
|
|
if (videoHeight > desiredHeight) {
|
|
videoHeight = desiredHeight
|
|
videoWidth = videoHeight * (9 / 16)
|
|
}
|
|
let commentsWidth = Math.min(
|
|
maxCommentsWidth,
|
|
Math.max(minCommentsWidth, innerWidth - videoWidth - gapBetweenColumns)
|
|
)
|
|
const panelHeight = Math.min(videoHeight, desiredHeight)
|
|
|
|
// Attach verbose event listeners on the HTML video element
|
|
useEffect(() => {
|
|
const el = videoRef.current
|
|
if (!el || !DEBUG_PLAYBACK_WEB) return undefined
|
|
const handler = (e) => {
|
|
// Avoid heavy logs: only show key events and brief state
|
|
console.log('[PlaybackItem.web] video:', e.type, {
|
|
t: Number(el.currentTime || 0).toFixed(2),
|
|
paused: el.paused,
|
|
rs: el.readyState,
|
|
})
|
|
}
|
|
const events = [
|
|
'loadedmetadata',
|
|
'loadeddata',
|
|
'play',
|
|
'playing',
|
|
'pause',
|
|
'seeking',
|
|
'seeked',
|
|
'stalled',
|
|
'waiting',
|
|
'ended',
|
|
'error',
|
|
]
|
|
events.forEach((ev) => el.addEventListener(ev, handler))
|
|
return () => {
|
|
events.forEach((ev) => el.removeEventListener(ev, handler))
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<View
|
|
onLayout={handleLayout}
|
|
style={[
|
|
styles.itemContainerBase,
|
|
styles.itemContainerRow,
|
|
{
|
|
height: '90%',
|
|
paddingHorizontal: horizontalPadding,
|
|
paddingVertical: Math.max((layoutHeight - panelHeight) / 2, 24),
|
|
},
|
|
]}
|
|
>
|
|
<View style={[styles.videoColumn, { width: videoWidth, marginRight: gapBetweenColumns }]}>
|
|
<View style={[styles.videoSurface, { height: panelHeight }]}>
|
|
<View style={styles.videoContainer}>
|
|
{!!videoUrl ? (
|
|
// Native HTML video for web
|
|
<video
|
|
ref={videoRef}
|
|
src={videoUrl}
|
|
playsInline
|
|
muted={!isActive}
|
|
preload="auto"
|
|
// Using web CSS properties here on purpose
|
|
style={{
|
|
position: 'absolute',
|
|
inset: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
objectFit: 'cover',
|
|
display: 'block',
|
|
}}
|
|
/>
|
|
) : (
|
|
<Image
|
|
source={img.placeholder3}
|
|
style={StyleSheet.absoluteFillObject}
|
|
resizeMode="cover"
|
|
/>
|
|
)}
|
|
|
|
<View style={styles.actionStack}>
|
|
<View style={styles.ownerBlock}>
|
|
<Pressable
|
|
style={styles.ownerAvatarButton}
|
|
onPress={() => {
|
|
navigate(Routes.SingerProfile, { userId: item?.userId })
|
|
}}
|
|
>
|
|
{owner?.profilePictureURL && (
|
|
<Image
|
|
source={{ uri: owner.profilePictureURL }}
|
|
style={[
|
|
styles.ownerAvatar,
|
|
owner && !owner.profilePictureURL
|
|
? { backgroundColor: Palette.gray }
|
|
: null,
|
|
]}
|
|
/>
|
|
)}
|
|
</Pressable>
|
|
{owner?.id && owner.id !== currentUID && (
|
|
<Pressable
|
|
style={styles.followPressable}
|
|
onPress={async () => {
|
|
if (
|
|
!ensureAuthenticated(currentUID, {
|
|
onIntercept: () => {
|
|
setIsFollowing(false)
|
|
},
|
|
})
|
|
) {
|
|
return
|
|
}
|
|
try {
|
|
const next = !isFollowing
|
|
setIsFollowing(next)
|
|
setOwner((prev) => {
|
|
const fb = Array.isArray(prev?.followedBy) ? prev.followedBy : []
|
|
const newFb = next
|
|
? Array.from(new Set([...fb, currentUID]))
|
|
: fb.filter((x) => x !== currentUID)
|
|
return prev ? { ...prev, followedBy: newFb } : prev
|
|
})
|
|
if (next) await followUser?.(owner.id)
|
|
else await unfollowUser?.(owner.id)
|
|
} catch (_e) {
|
|
setIsFollowing((v) => !v)
|
|
}
|
|
}}
|
|
>
|
|
<BlurView tint="dark" intensity={20} style={styles.followButton}>
|
|
<Text style={styles.followButtonText}>
|
|
{isFollowing ? 'Suivi(e)' : 'Suivre'}
|
|
</Text>
|
|
</BlurView>
|
|
</Pressable>
|
|
)}
|
|
</View>
|
|
<Pressable
|
|
onPress={async () => {
|
|
try {
|
|
if (!item?.id) return
|
|
if (!ensureAuthenticated(currentUID)) {
|
|
return
|
|
}
|
|
const nextLiked = !isLiked
|
|
setIsLiked(nextLiked)
|
|
setLikesCount((c) => Math.max(0, c + (nextLiked ? 1 : -1)))
|
|
|
|
await toggleProjectLike({
|
|
projectId: item.id,
|
|
currentUID,
|
|
target: LIKE_TARGET.PLAYBACK,
|
|
next: nextLiked,
|
|
})
|
|
} catch (_e) {
|
|
setIsLiked((v) => !v)
|
|
setLikesCount((c) => (isLiked ? c + 1 : Math.max(0, c - 1)))
|
|
}
|
|
}}
|
|
style={[styles.actionButton, styles.actionSpacing]}
|
|
>
|
|
<Image
|
|
source={isLiked ? icons.heart : icons.heartOutline}
|
|
style={styles.actionIcon}
|
|
resizeMode="contain"
|
|
/>
|
|
{!!likesCount && <Text style={styles.actionLabel}>{likesCount}</Text>}
|
|
</Pressable>
|
|
<Pressable onPress={() => {}} style={[styles.actionButton, styles.actionSpacing]}>
|
|
<Image source={icons.chatBubble} style={styles.actionIcon} resizeMode="contain" />
|
|
{!!commentsCount && <Text style={styles.actionLabel}>{commentsCount}</Text>}
|
|
</Pressable>
|
|
<Pressable onPress={handleShare} style={[styles.actionButton, styles.actionSpacing]}>
|
|
<Image source={icons.share} style={styles.actionIcon} resizeMode="contain" />
|
|
</Pressable>
|
|
<Pressable onPress={handleReport} style={[styles.actionButton, styles.actionSpacing]}>
|
|
<Feather name="flag" size={20} color={Palette.white} />
|
|
<Text style={styles.actionLabel}>Signaler</Text>
|
|
</Pressable>
|
|
</View>
|
|
|
|
<View style={styles.lyricsContainer}>
|
|
<BlurView tint="dark" intensity={20} style={styles.lyricsCard}>
|
|
{alignedWords?.length > 0 ? (
|
|
<KaraokeLyrics alignedWords={alignedWords} currentTimeS={currentTimeS} />
|
|
) : (
|
|
<Text style={styles.lyricsText}>{descriptionText}</Text>
|
|
)}
|
|
</BlurView>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
{openComments && (
|
|
<View style={[styles.commentsColumn, { width: commentsWidth, height: panelHeight }]}>
|
|
<CommentsPanel
|
|
projectId={item?.id}
|
|
description={descriptionText}
|
|
commentsCount={commentsCount}
|
|
onCommentAdded={() => setCommentsCount((c) => Math.max(0, Number(c || 0) + 1))}
|
|
inputRef={commentInputRef}
|
|
panelHeight={panelHeight}
|
|
/>
|
|
</View>
|
|
)}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default PlaybackItem
|
|
|
|
const styles = StyleSheet.create({
|
|
itemContainerBase: {
|
|
width: '100%',
|
|
paddingVertical: 36,
|
|
alignItems: 'center',
|
|
},
|
|
itemContainerRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
videoColumn: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
videoSurface: {
|
|
alignSelf: 'center',
|
|
aspectRatio: 9 / 16,
|
|
borderRadius: 32,
|
|
overflow: 'hidden',
|
|
backgroundColor: '#07040D',
|
|
shadowColor: '#000',
|
|
shadowOpacity: 0.45,
|
|
shadowRadius: 30,
|
|
shadowOffset: { width: 0, height: 20 },
|
|
elevation: 12,
|
|
},
|
|
videoContainer: {
|
|
flex: 1,
|
|
position: 'relative',
|
|
},
|
|
actionStack: {
|
|
position: 'absolute',
|
|
right: 18,
|
|
top: 150,
|
|
alignItems: 'center',
|
|
},
|
|
ownerBlock: {
|
|
alignItems: 'center',
|
|
marginBottom: 26,
|
|
},
|
|
ownerAvatarButton: {
|
|
marginBottom: 16,
|
|
},
|
|
ownerAvatar: {
|
|
...size({ size: 56 }),
|
|
borderRadius: 100,
|
|
},
|
|
followPressable: {
|
|
alignSelf: 'center',
|
|
},
|
|
followButton: {
|
|
paddingVertical: 8,
|
|
paddingHorizontal: 18,
|
|
borderRadius: 14,
|
|
borderWidth: 1,
|
|
borderColor: Palette.white,
|
|
backgroundColor: '#FFFFFF20',
|
|
overflow: 'hidden',
|
|
},
|
|
followButtonText: {
|
|
fontSize: 14,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterMedium,
|
|
},
|
|
actionButton: {
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
actionSpacing: {
|
|
marginTop: 24,
|
|
},
|
|
actionIcon: {
|
|
...size({ size: 30 }),
|
|
},
|
|
actionLabel: {
|
|
marginTop: 6,
|
|
fontSize: 13,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterMedium,
|
|
textAlign: 'center',
|
|
},
|
|
lyricsContainer: {
|
|
position: 'absolute',
|
|
left: 24,
|
|
right: 24,
|
|
bottom: 32,
|
|
},
|
|
lyricsCard: {
|
|
paddingHorizontal: 18,
|
|
paddingVertical: 12,
|
|
borderRadius: 22,
|
|
backgroundColor: Palette.glass,
|
|
overflow: 'hidden',
|
|
},
|
|
lyricsText: {
|
|
fontSize: 14,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
},
|
|
commentsColumn: {
|
|
alignSelf: 'stretch',
|
|
},
|
|
})
|