feat: fixes and formatter
This commit is contained in:
@@ -1,13 +1,7 @@
|
||||
import { BlurView } from "expo-blur";
|
||||
import moment from "moment";
|
||||
import "moment/locale/fr";
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { BlurView } from 'expo-blur'
|
||||
import moment from 'moment'
|
||||
import 'moment/locale/fr'
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
||||
import {
|
||||
Image,
|
||||
Platform,
|
||||
@@ -17,32 +11,28 @@ import {
|
||||
Text,
|
||||
TextInput,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { icons } from "../../../assets";
|
||||
import ProfilePicture from "../../../components/ProfilePicture";
|
||||
import {
|
||||
increment,
|
||||
projectsRef,
|
||||
serverTimestamp,
|
||||
} from "../../../config/firebase";
|
||||
import useDataFromRef from "../../../hooks/useDataFromRef";
|
||||
import { useUser } from "../../../providers/UserDataProvider";
|
||||
import { Palette } from "../../../styles";
|
||||
import { FONT_FAMILY } from "../../../styles/Fonts";
|
||||
import { size } from "../../../styles/Style";
|
||||
import { getArtistDisplayName } from "../../../utils/artistName";
|
||||
import { ensureAuthenticated } from "../../../utils/authRedirect";
|
||||
} from 'react-native'
|
||||
import { icons } from '../../../assets'
|
||||
import ProfilePicture from '../../../components/ProfilePicture'
|
||||
import { increment, projectsRef, serverTimestamp } from '../../../config/firebase'
|
||||
import useDataFromRef from '../../../hooks/useDataFromRef'
|
||||
import { useUser } from '../../../providers/UserDataProvider'
|
||||
import { Palette } from '../../../styles'
|
||||
import { FONT_FAMILY } from '../../../styles/Fonts'
|
||||
import { size } from '../../../styles/Style'
|
||||
import { getArtistDisplayName } from '../../../utils/artistName'
|
||||
import { ensureAuthenticated } from '../../../utils/authRedirect'
|
||||
|
||||
moment.locale("fr");
|
||||
moment.locale('fr')
|
||||
|
||||
const formatRelativeTime = (date) => {
|
||||
try {
|
||||
const d = date instanceof Date ? date : date?.toDate?.() || null;
|
||||
return d ? moment(d).fromNow() : "";
|
||||
const d = date instanceof Date ? date : date?.toDate?.() || null
|
||||
return d ? moment(d).fromNow() : ''
|
||||
} catch (_e) {
|
||||
return "";
|
||||
return ''
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const CommentsPanel = ({
|
||||
projectId,
|
||||
@@ -52,37 +42,31 @@ const CommentsPanel = ({
|
||||
inputRef,
|
||||
panelHeight,
|
||||
}) => {
|
||||
const { currentUID, currentUserData } = useUser() || {};
|
||||
const { currentUID, currentUserData } = useUser() || {}
|
||||
const currentUserDisplayName = useMemo(
|
||||
() => getArtistDisplayName(currentUserData, ""),
|
||||
() => getArtistDisplayName(currentUserData, ''),
|
||||
[currentUserData]
|
||||
);
|
||||
const [text, setText] = useState("");
|
||||
const scrollRef = useRef(null);
|
||||
const requireAuth = useCallback(
|
||||
() => ensureAuthenticated(currentUID),
|
||||
[currentUID]
|
||||
);
|
||||
)
|
||||
const [text, setText] = useState('')
|
||||
const scrollRef = useRef(null)
|
||||
const requireAuth = useCallback(() => ensureAuthenticated(currentUID), [currentUID])
|
||||
|
||||
useEffect(() => {
|
||||
setText("");
|
||||
setText('')
|
||||
try {
|
||||
scrollRef.current?.scrollTo({ y: 0, animated: false });
|
||||
scrollRef.current?.scrollTo({ y: 0, animated: false })
|
||||
} catch (_e) {}
|
||||
}, [projectId]);
|
||||
}, [projectId])
|
||||
|
||||
const commentsRef = useMemo(() => {
|
||||
try {
|
||||
return projectId
|
||||
? projectsRef
|
||||
.doc(projectId)
|
||||
.collection("comments")
|
||||
.orderBy("createdAt", "desc")
|
||||
: null;
|
||||
? projectsRef.doc(projectId).collection('comments').orderBy('createdAt', 'desc')
|
||||
: null
|
||||
} catch (_e) {
|
||||
return null;
|
||||
return null
|
||||
}
|
||||
}, [projectId]);
|
||||
}, [projectId])
|
||||
|
||||
const {
|
||||
data: comments = [],
|
||||
@@ -96,85 +80,65 @@ const CommentsPanel = ({
|
||||
refreshArray: [projectId],
|
||||
usePagination: true,
|
||||
batchSize: 20,
|
||||
});
|
||||
})
|
||||
|
||||
const handleScroll = useCallback(
|
||||
({ nativeEvent }) => {
|
||||
try {
|
||||
const { layoutMeasurement, contentOffset, contentSize } =
|
||||
nativeEvent || {};
|
||||
if (
|
||||
layoutMeasurement?.height + contentOffset?.y >=
|
||||
(contentSize?.height || 0) - 120
|
||||
) {
|
||||
loadMore?.();
|
||||
const { layoutMeasurement, contentOffset, contentSize } = nativeEvent || {}
|
||||
if (layoutMeasurement?.height + contentOffset?.y >= (contentSize?.height || 0) - 120) {
|
||||
loadMore?.()
|
||||
}
|
||||
} catch (_e) {}
|
||||
},
|
||||
[loadMore]
|
||||
);
|
||||
)
|
||||
|
||||
const onSend = useCallback(async () => {
|
||||
const value = (text || "").trim();
|
||||
if (!value || !projectId) return;
|
||||
if (!requireAuth()) return;
|
||||
const value = (text || '').trim()
|
||||
if (!value || !projectId) return
|
||||
if (!requireAuth()) return
|
||||
try {
|
||||
setText("");
|
||||
setText('')
|
||||
const docRef = await projectsRef
|
||||
.doc(projectId)
|
||||
.collection("comments")
|
||||
.collection('comments')
|
||||
.add({
|
||||
userId: currentUID,
|
||||
userName: currentUserDisplayName,
|
||||
profilePicture: currentUserData?.profilePictureURL || "",
|
||||
profilePicture: currentUserData?.profilePictureURL || '',
|
||||
text: value,
|
||||
createdAt: serverTimestamp(),
|
||||
});
|
||||
})
|
||||
try {
|
||||
await projectsRef
|
||||
.doc(projectId)
|
||||
.set({ commentsCount: increment(1) }, { merge: true });
|
||||
await projectsRef.doc(projectId).set({ commentsCount: increment(1) }, { merge: true })
|
||||
} catch (_e) {}
|
||||
const optimistic = {
|
||||
id: docRef?.id || Math.random().toString(36).slice(2),
|
||||
userId: currentUID,
|
||||
userName: currentUserDisplayName,
|
||||
profilePicture: currentUserData?.profilePictureURL || "",
|
||||
profilePicture: currentUserData?.profilePictureURL || '',
|
||||
text: value,
|
||||
createdAt: new Date(),
|
||||
};
|
||||
setComments((prev = []) => [
|
||||
optimistic,
|
||||
...prev.filter((x) => x?.id !== optimistic.id),
|
||||
]);
|
||||
onCommentAdded?.();
|
||||
}
|
||||
setComments((prev = []) => [optimistic, ...prev.filter((x) => x?.id !== optimistic.id)])
|
||||
onCommentAdded?.()
|
||||
requestAnimationFrame(() => {
|
||||
try {
|
||||
scrollRef.current?.scrollTo({ y: 0, animated: true });
|
||||
scrollRef.current?.scrollTo({ y: 0, animated: true })
|
||||
} catch (_e) {}
|
||||
});
|
||||
})
|
||||
} catch (_e) {}
|
||||
}, [
|
||||
currentUID,
|
||||
currentUserData,
|
||||
onCommentAdded,
|
||||
projectId,
|
||||
requireAuth,
|
||||
setComments,
|
||||
text,
|
||||
]);
|
||||
}, [currentUID, currentUserData, onCommentAdded, projectId, requireAuth, setComments, text])
|
||||
|
||||
const canComment = !!currentUID;
|
||||
const descriptionText = (description || "").trim();
|
||||
const canComment = !!currentUID
|
||||
const descriptionText = (description || '').trim()
|
||||
|
||||
return (
|
||||
<BlurView
|
||||
intensity={Platform.OS !== "ios" ? 10 : 20}
|
||||
intensity={Platform.OS !== 'ios' ? 10 : 20}
|
||||
tint="dark"
|
||||
style={[
|
||||
styles.commentsWrapper,
|
||||
panelHeight ? { height: panelHeight } : null,
|
||||
]}
|
||||
style={[styles.commentsWrapper, panelHeight ? { height: panelHeight } : null]}
|
||||
>
|
||||
<View style={styles.commentsInner}>
|
||||
<ScrollView
|
||||
@@ -190,21 +154,15 @@ const CommentsPanel = ({
|
||||
<Text style={styles.sectionTitle}>Description</Text>
|
||||
<View style={styles.descriptionCard}>
|
||||
<Text style={styles.descriptionText}>
|
||||
{descriptionText || "Description chanson..."}
|
||||
{descriptionText || 'Description chanson...'}
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={[styles.sectionTitle, styles.sectionSpacing]}>
|
||||
{`Commentaires${commentsCount ? ` (${commentsCount})` : ""}`}
|
||||
{`Commentaires${commentsCount ? ` (${commentsCount})` : ''}`}
|
||||
</Text>
|
||||
{Array.isArray(comments) && comments.length > 0 ? (
|
||||
comments.map((c, index) => (
|
||||
<View
|
||||
key={c.id}
|
||||
style={[
|
||||
styles.commentRow,
|
||||
index > 0 && styles.commentRowSpacing,
|
||||
]}
|
||||
>
|
||||
<View key={c.id} style={[styles.commentRow, index > 0 && styles.commentRowSpacing]}>
|
||||
<ProfilePicture
|
||||
uri={c?.profilePicture || null}
|
||||
size={48}
|
||||
@@ -213,20 +171,16 @@ const CommentsPanel = ({
|
||||
<View style={styles.commentBubble}>
|
||||
<View style={styles.commentHeader}>
|
||||
<Text style={styles.commentAuthor}>
|
||||
{c?.userId === currentUID ? "vous" : c?.userName || ""}
|
||||
</Text>
|
||||
<Text style={styles.commentMeta}>
|
||||
• {formatRelativeTime(c?.createdAt)}
|
||||
{c?.userId === currentUID ? 'vous' : c?.userName || ''}
|
||||
</Text>
|
||||
<Text style={styles.commentMeta}>• {formatRelativeTime(c?.createdAt)}</Text>
|
||||
</View>
|
||||
<Text style={styles.commentBody}>{c?.text}</Text>
|
||||
</View>
|
||||
</View>
|
||||
))
|
||||
) : (
|
||||
<Text style={styles.emptyState}>
|
||||
Aucun commentaire pour le moment
|
||||
</Text>
|
||||
<Text style={styles.emptyState}>Aucun commentaire pour le moment</Text>
|
||||
)}
|
||||
</ScrollView>
|
||||
<View style={styles.commentInputContainer}>
|
||||
@@ -235,28 +189,24 @@ const CommentsPanel = ({
|
||||
value={text}
|
||||
onChangeText={(value) => {
|
||||
if (!requireAuth()) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
setText(value);
|
||||
setText(value)
|
||||
}}
|
||||
placeholder={
|
||||
canComment
|
||||
? "Commente"
|
||||
: "Connecte-toi pour laisser un commentaire"
|
||||
}
|
||||
placeholder={canComment ? 'Commente' : 'Connecte-toi pour laisser un commentaire'}
|
||||
placeholderTextColor="#FFFFFF90"
|
||||
editable
|
||||
onFocus={() => {
|
||||
if (!requireAuth()) {
|
||||
try {
|
||||
inputRef.current?.blur?.();
|
||||
inputRef.current?.blur?.()
|
||||
} catch (_e) {}
|
||||
}
|
||||
}}
|
||||
onPressIn={() => {
|
||||
if (!requireAuth()) {
|
||||
try {
|
||||
inputRef.current?.blur?.();
|
||||
inputRef.current?.blur?.()
|
||||
} catch (_e) {}
|
||||
}
|
||||
}}
|
||||
@@ -271,32 +221,28 @@ const CommentsPanel = ({
|
||||
pressed && text.trim() && styles.sendButtonPressed,
|
||||
]}
|
||||
>
|
||||
<Image
|
||||
source={icons.send}
|
||||
style={styles.sendIcon}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
<Image source={icons.send} style={styles.sendIcon} resizeMode="contain" />
|
||||
</Pressable>
|
||||
</View>
|
||||
</View>
|
||||
</BlurView>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default CommentsPanel;
|
||||
export default CommentsPanel
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
commentsWrapper: {
|
||||
flex: 1,
|
||||
borderRadius: 28,
|
||||
overflow: "hidden",
|
||||
overflow: 'hidden',
|
||||
padding: 24,
|
||||
backgroundColor: Palette.glass,
|
||||
minHeight: 0,
|
||||
},
|
||||
commentsInner: {
|
||||
flex: 1,
|
||||
justifyContent: "space-between",
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
commentsScroll: {
|
||||
flex: 1,
|
||||
@@ -316,7 +262,7 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
descriptionCard: {
|
||||
borderRadius: 18,
|
||||
backgroundColor: "#FFFFFF14",
|
||||
backgroundColor: '#FFFFFF14',
|
||||
paddingHorizontal: 18,
|
||||
paddingVertical: 14,
|
||||
},
|
||||
@@ -327,8 +273,8 @@ const styles = StyleSheet.create({
|
||||
lineHeight: 20,
|
||||
},
|
||||
commentRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "flex-start",
|
||||
flexDirection: 'row',
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
commentRowSpacing: {
|
||||
marginTop: 16,
|
||||
@@ -338,14 +284,14 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
commentBubble: {
|
||||
flex: 1,
|
||||
backgroundColor: "#FFFFFF18",
|
||||
backgroundColor: '#FFFFFF18',
|
||||
borderRadius: 20,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
commentHeader: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
marginBottom: 4,
|
||||
},
|
||||
commentAuthor: {
|
||||
@@ -355,7 +301,7 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
commentMeta: {
|
||||
fontSize: 12,
|
||||
color: "#FFFFFFA0",
|
||||
color: '#FFFFFFA0',
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
marginLeft: 8,
|
||||
},
|
||||
@@ -367,14 +313,14 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
emptyState: {
|
||||
fontSize: 14,
|
||||
color: "#FFFFFFBB",
|
||||
color: '#FFFFFFBB',
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
},
|
||||
commentInputContainer: {
|
||||
marginTop: 20,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
backgroundColor: "#FFFFFF14",
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#FFFFFF14',
|
||||
borderRadius: 18,
|
||||
paddingHorizontal: 18,
|
||||
paddingVertical: 10,
|
||||
@@ -390,19 +336,19 @@ const styles = StyleSheet.create({
|
||||
sendButton: {
|
||||
...size({ size: 38 }),
|
||||
borderRadius: 19,
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: Palette.primary,
|
||||
},
|
||||
sendButtonPressed: {
|
||||
transform: [{ scale: 0.95 }],
|
||||
},
|
||||
sendButtonDisabled: {
|
||||
backgroundColor: "#FFFFFF33",
|
||||
backgroundColor: '#FFFFFF33',
|
||||
},
|
||||
sendIcon: {
|
||||
width: 22,
|
||||
height: 22,
|
||||
tintColor: Palette.white,
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
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";
|
||||
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,
|
||||
@@ -30,22 +30,20 @@ const PlaybackActions = ({
|
||||
<ProfilePicture
|
||||
uri={owner?.profilePictureURL || null}
|
||||
size={45}
|
||||
imageProps={{ priority: "high" }}
|
||||
imageProps={{ priority: 'high' }}
|
||||
/>
|
||||
</Pressable>
|
||||
{owner?.id && owner.id !== currentUID && (
|
||||
<Pressable disabled={isFollowActionPending} onPress={onToggleFollow}>
|
||||
<BlurView
|
||||
tint="dark"
|
||||
intensity={Platform.OS !== "ios" ? 10 : 20}
|
||||
intensity={Platform.OS !== 'ios' ? 10 : 20}
|
||||
style={[
|
||||
styles.followButton,
|
||||
{ backgroundColor: isFollowing ? "#FFFFFF1A" : undefined },
|
||||
{ backgroundColor: isFollowing ? '#FFFFFF1A' : undefined },
|
||||
]}
|
||||
>
|
||||
<Text style={styles.followText}>
|
||||
{isFollowing ? "Suivi(e)" : "Suivre"}
|
||||
</Text>
|
||||
<Text style={styles.followText}>{isFollowing ? 'Suivi(e)' : 'Suivre'}</Text>
|
||||
</BlurView>
|
||||
</Pressable>
|
||||
)}
|
||||
@@ -70,38 +68,38 @@ const PlaybackActions = ({
|
||||
<Text style={styles.countText}>Signaler</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
actionsColumn: {
|
||||
alignSelf: "flex-end",
|
||||
alignItems: "center",
|
||||
alignSelf: 'flex-end',
|
||||
alignItems: 'center',
|
||||
gap: 20,
|
||||
paddingHorizontal: 13,
|
||||
},
|
||||
profileWrapper: { gap: 6, alignItems: "center" },
|
||||
profileWrapper: { gap: 6, alignItems: 'center' },
|
||||
followButton: {
|
||||
paddingVertical: 6,
|
||||
paddingHorizontal: 12,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: Palette.white,
|
||||
overflow: "hidden",
|
||||
overflow: 'hidden',
|
||||
},
|
||||
followText: {
|
||||
fontSize: 13,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
},
|
||||
centered: { alignItems: "center" },
|
||||
centered: { alignItems: 'center' },
|
||||
countText: {
|
||||
color: Palette.white,
|
||||
fontSize: 11,
|
||||
marginTop: 4,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
textAlign: "center",
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
export default PlaybackActions;
|
||||
export default PlaybackActions
|
||||
|
||||
@@ -1,147 +1,131 @@
|
||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { View, StyleSheet } from "react-native";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import { SheetManager } from "react-native-actions-sheet";
|
||||
import { useUser } from "../../../providers/UserDataProvider";
|
||||
import { Routes } from "../../../navigation";
|
||||
import { navigate } from "../../../navigation/NavigationService";
|
||||
import { openComments } from "../../../components/bottomsheets/CommentsBottomSheet";
|
||||
import {
|
||||
createPlaybackSharePayload,
|
||||
openShareSheet,
|
||||
} from "../../../utils/shareSheet";
|
||||
import {
|
||||
getProjectLikes,
|
||||
LIKE_TARGET,
|
||||
toggleProjectLike,
|
||||
} from "../../../utils/likes";
|
||||
import { ensureAuthenticated } from "../../../utils/authRedirect";
|
||||
import PlaybackVideo from "./PlaybackVideo";
|
||||
import PlaybackActions from "./PlaybackActions";
|
||||
import PlaybackLyricsCard from "./PlaybackLyricsCard";
|
||||
import usePlaybackOwner from "./usePlaybackOwner";
|
||||
import usePlaybackPlayer from "./usePlaybackPlayer";
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { View, StyleSheet } from 'react-native'
|
||||
import { responsiveHeight } from 'react-native-responsive-dimensions'
|
||||
import { SheetManager } from 'react-native-actions-sheet'
|
||||
import { useUser } from '../../../providers/UserDataProvider'
|
||||
import { Routes } from '../../../navigation'
|
||||
import { navigate } from '../../../navigation/NavigationService'
|
||||
import { openComments } from '../../../components/bottomsheets/CommentsBottomSheet'
|
||||
import { createPlaybackSharePayload, openShareSheet } from '../../../utils/shareSheet'
|
||||
import { getProjectLikes, LIKE_TARGET, toggleProjectLike } from '../../../utils/likes'
|
||||
import { ensureAuthenticated } from '../../../utils/authRedirect'
|
||||
import PlaybackVideo from './PlaybackVideo'
|
||||
import PlaybackActions from './PlaybackActions'
|
||||
import PlaybackLyricsCard from './PlaybackLyricsCard'
|
||||
import usePlaybackOwner from './usePlaybackOwner'
|
||||
import usePlaybackPlayer from './usePlaybackPlayer'
|
||||
|
||||
const PlaybackItem = ({ item, isActive, userCache }) => {
|
||||
const { currentUID, followUser, unfollowUser, getUserByUid } = useUser() || {};
|
||||
const { owner, isFollowing, isFollowActionPending, toggleFollow } =
|
||||
usePlaybackOwner({
|
||||
item,
|
||||
userCache,
|
||||
getUserByUid,
|
||||
currentUID,
|
||||
followUser,
|
||||
unfollowUser,
|
||||
});
|
||||
const { currentUID, followUser, unfollowUser, getUserByUid } = useUser() || {}
|
||||
const { owner, isFollowing, isFollowActionPending, toggleFollow } = usePlaybackOwner({
|
||||
item,
|
||||
userCache,
|
||||
getUserByUid,
|
||||
currentUID,
|
||||
followUser,
|
||||
unfollowUser,
|
||||
})
|
||||
|
||||
const initialLikedBy = getProjectLikes(item, LIKE_TARGET.PLAYBACK);
|
||||
const [isLiked, setIsLiked] = useState(
|
||||
currentUID ? initialLikedBy.includes(currentUID) : false
|
||||
);
|
||||
const [likesCount, setLikesCount] = useState(initialLikedBy.length);
|
||||
const initialLikedBy = getProjectLikes(item, LIKE_TARGET.PLAYBACK)
|
||||
const [isLiked, setIsLiked] = useState(currentUID ? initialLikedBy.includes(currentUID) : false)
|
||||
const [likesCount, setLikesCount] = useState(initialLikedBy.length)
|
||||
|
||||
useEffect(() => {
|
||||
const lb = getProjectLikes(item, LIKE_TARGET.PLAYBACK);
|
||||
setLikesCount(lb.length);
|
||||
setIsLiked(currentUID ? lb.includes(currentUID) : false);
|
||||
}, [item?.likes?.playback, currentUID]);
|
||||
const lb = getProjectLikes(item, LIKE_TARGET.PLAYBACK)
|
||||
setLikesCount(lb.length)
|
||||
setIsLiked(currentUID ? lb.includes(currentUID) : false)
|
||||
}, [item?.likes?.playback, currentUID])
|
||||
|
||||
const commentsCount = useMemo(
|
||||
() => Number(item?.commentsCount || 0),
|
||||
[item?.commentsCount]
|
||||
);
|
||||
const commentsCount = useMemo(() => Number(item?.commentsCount || 0), [item?.commentsCount])
|
||||
|
||||
const projectTitle = typeof item?.title === "string" ? item.title.trim() : "";
|
||||
const projectTitle = typeof item?.title === 'string' ? item.title.trim() : ''
|
||||
|
||||
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]);
|
||||
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 { videoUrl, videoPlayer, currentTimeS } = usePlaybackPlayer({
|
||||
item,
|
||||
isActive,
|
||||
});
|
||||
})
|
||||
|
||||
const alignedWords = useMemo(() => {
|
||||
const idx = Number(item?.songIndex) || 0;
|
||||
const ts = item?.musicTimestamps?.[idx];
|
||||
const arr = Array.isArray(ts?.alignedWords) ? ts.alignedWords : [];
|
||||
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 ?? ""),
|
||||
word: String(w?.word ?? ''),
|
||||
startS: Number(w?.startS ?? 0),
|
||||
endS: Number(w?.endS ?? 0),
|
||||
}));
|
||||
}, [item?.musicTimestamps, item?.songIndex]);
|
||||
}))
|
||||
}, [item?.musicTimestamps, item?.songIndex])
|
||||
|
||||
const sharePayload = useMemo(() => {
|
||||
if (!item?.id) return null;
|
||||
if (!item?.id) return null
|
||||
return createPlaybackSharePayload({
|
||||
projectId: item.id,
|
||||
title: projectTitle || undefined,
|
||||
artist: creatorName || undefined,
|
||||
playbackUrl: videoUrl || undefined,
|
||||
});
|
||||
}, [creatorName, item?.id, projectTitle, videoUrl]);
|
||||
})
|
||||
}, [creatorName, item?.id, projectTitle, videoUrl])
|
||||
|
||||
const handleShare = useCallback(() => {
|
||||
if (sharePayload) {
|
||||
openShareSheet(sharePayload);
|
||||
openShareSheet(sharePayload)
|
||||
}
|
||||
}, [sharePayload]);
|
||||
}, [sharePayload])
|
||||
|
||||
const handleReport = useCallback(() => {
|
||||
if (!item?.id) return;
|
||||
SheetManager.show("Report", {
|
||||
if (!item?.id) return
|
||||
SheetManager.show('Report', {
|
||||
payload: {
|
||||
targetType: "playback",
|
||||
targetType: 'playback',
|
||||
projectId: item?.id || null,
|
||||
playbackId: item?.id || null,
|
||||
title: item?.title || "",
|
||||
title: item?.title || '',
|
||||
ownerId: item?.userId || null,
|
||||
},
|
||||
});
|
||||
}, [item?.id, item?.title, item?.userId]);
|
||||
})
|
||||
}, [item?.id, item?.title, item?.userId])
|
||||
|
||||
const handleLike = useCallback(async () => {
|
||||
try {
|
||||
if (!item?.id) return;
|
||||
if (!item?.id) return
|
||||
if (!ensureAuthenticated(currentUID)) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
const nextLiked = !isLiked;
|
||||
setIsLiked(nextLiked);
|
||||
setLikesCount((c) => Math.max(0, c + (nextLiked ? 1 : -1)));
|
||||
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)));
|
||||
setIsLiked((v) => !v)
|
||||
setLikesCount((c) => (isLiked ? c + 1 : Math.max(0, c - 1)))
|
||||
}
|
||||
}, [currentUID, isLiked, item?.id]);
|
||||
}, [currentUID, isLiked, item?.id])
|
||||
|
||||
const handleCommentPress = useCallback(() => {
|
||||
if (item?.id) openComments(item.id);
|
||||
}, [item?.id]);
|
||||
if (item?.id) openComments(item.id)
|
||||
}, [item?.id])
|
||||
|
||||
const onOpenProfile = useCallback(() => {
|
||||
navigate(Routes.SingerProfile, { userId: item?.userId });
|
||||
}, [item?.userId]);
|
||||
navigate(Routes.SingerProfile, { userId: item?.userId })
|
||||
}, [item?.userId])
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<PlaybackVideo
|
||||
videoUrl={videoUrl}
|
||||
videoPlayer={videoPlayer}
|
||||
/>
|
||||
<PlaybackVideo videoUrl={videoUrl} videoPlayer={videoPlayer} />
|
||||
<View style={styles.overlay}>
|
||||
<PlaybackActions
|
||||
owner={owner}
|
||||
@@ -165,21 +149,21 @@ const PlaybackItem = ({ item, isActive, userCache }) => {
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
height: responsiveHeight(100),
|
||||
position: "relative",
|
||||
backgroundColor: "black",
|
||||
position: 'relative',
|
||||
backgroundColor: 'black',
|
||||
},
|
||||
overlay: {
|
||||
position: "absolute",
|
||||
width: "100%",
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
bottom: 130,
|
||||
gap: 18,
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
export default PlaybackItem;
|
||||
export default PlaybackItem
|
||||
|
||||
@@ -1,365 +1,330 @@
|
||||
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";
|
||||
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;
|
||||
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 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 [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 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 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);
|
||||
)
|
||||
const [commentsCount, setCommentsCount] = useState(computedCommentsCount)
|
||||
useEffect(() => {
|
||||
setCommentsCount(computedCommentsCount);
|
||||
}, [computedCommentsCount]);
|
||||
setCommentsCount(computedCommentsCount)
|
||||
}, [computedCommentsCount])
|
||||
|
||||
const [owner, setOwner] = useState(
|
||||
item?.userId && userCache?.current?.get(item.userId)
|
||||
? userCache.current.get(item.userId)
|
||||
: null
|
||||
);
|
||||
item?.userId && userCache?.current?.get(item.userId) ? userCache.current.get(item.userId) : null
|
||||
)
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
let cancelled = false
|
||||
const run = async () => {
|
||||
try {
|
||||
const uid = item?.userId;
|
||||
if (!uid || !userCache) return;
|
||||
const cached = userCache.current.get(uid);
|
||||
const uid = item?.userId
|
||||
if (!uid || !userCache) return
|
||||
const cached = userCache.current.get(uid)
|
||||
if (cached) {
|
||||
if (!cancelled) setOwner(cached);
|
||||
return;
|
||||
if (!cancelled) setOwner(cached)
|
||||
return
|
||||
}
|
||||
const user = await getUserByUid?.(uid);
|
||||
const user = await getUserByUid?.(uid)
|
||||
if (!cancelled && user) {
|
||||
userCache.current.set(uid, user);
|
||||
setOwner(user);
|
||||
userCache.current.set(uid, user)
|
||||
setOwner(user)
|
||||
}
|
||||
} catch (_e) {}
|
||||
};
|
||||
run();
|
||||
}
|
||||
run()
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [item?.userId, userCache, getUserByUid]);
|
||||
cancelled = true
|
||||
}
|
||||
}, [item?.userId, userCache, getUserByUid])
|
||||
|
||||
useEffect(() => {
|
||||
const uid = item?.userId;
|
||||
if (!uid) return;
|
||||
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);
|
||||
const data = { id: doc.id, ...doc.data() }
|
||||
setOwner(data)
|
||||
try {
|
||||
userCache?.current?.set(uid, data);
|
||||
userCache?.current?.set(uid, data)
|
||||
} catch (_e) {}
|
||||
}
|
||||
},
|
||||
() => {}
|
||||
);
|
||||
return () => unsub?.();
|
||||
}, [item?.userId, userCache]);
|
||||
)
|
||||
return () => unsub?.()
|
||||
}, [item?.userId, userCache])
|
||||
|
||||
const [isFollowing, setIsFollowing] = useState(false);
|
||||
const [isFollowing, setIsFollowing] = useState(false)
|
||||
useEffect(() => {
|
||||
const list = Array.isArray(owner?.followedBy) ? owner.followedBy : [];
|
||||
setIsFollowing(currentUID ? list.includes(currentUID) : false);
|
||||
}, [owner?.followedBy, currentUID]);
|
||||
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]);
|
||||
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]);
|
||||
startedRef.current = false
|
||||
}, [videoUrl])
|
||||
|
||||
// Start/reset when active, using the video's own audio
|
||||
useEffect(() => {
|
||||
const el = videoRef.current;
|
||||
if (!el) return;
|
||||
const el = videoRef.current
|
||||
if (!el) return
|
||||
|
||||
if (!isActive) {
|
||||
try {
|
||||
if (!el.paused) el.pause();
|
||||
if (!el.paused) el.pause()
|
||||
} catch (_e) {}
|
||||
try {
|
||||
el.muted = true;
|
||||
el.muted = true
|
||||
} catch (_e) {}
|
||||
startedRef.current = false;
|
||||
onBackgroundSync?.({ isPlaying: false });
|
||||
return;
|
||||
startedRef.current = false
|
||||
onBackgroundSync?.({ isPlaying: false })
|
||||
return
|
||||
}
|
||||
|
||||
const start = async () => {
|
||||
try {
|
||||
if (!startedRef.current) {
|
||||
startedRef.current = true;
|
||||
startedRef.current = true
|
||||
const resetToStart = () => {
|
||||
try {
|
||||
el.currentTime = 0;
|
||||
el.currentTime = 0
|
||||
} catch (_e) {}
|
||||
};
|
||||
}
|
||||
if (el.readyState >= 1) {
|
||||
resetToStart();
|
||||
resetToStart()
|
||||
} else {
|
||||
const handleLoaded = () => {
|
||||
resetToStart();
|
||||
};
|
||||
el.addEventListener("loadeddata", handleLoaded, { once: true });
|
||||
resetToStart()
|
||||
}
|
||||
el.addEventListener('loadeddata', handleLoaded, { once: true })
|
||||
}
|
||||
}
|
||||
el.muted = false;
|
||||
el.muted = false
|
||||
await el.play().catch((error) => {
|
||||
if (DEBUG_PLAYBACK_WEB) {
|
||||
console.log("[PlaybackItem.web] play() rejected", error);
|
||||
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);
|
||||
console.log('[PlaybackItem.web] start error', _e)
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
start();
|
||||
}, [isActive, videoUrl, onBackgroundSync]);
|
||||
start()
|
||||
}, [isActive, videoUrl, onBackgroundSync])
|
||||
|
||||
// Pause all on unmount
|
||||
useEffect(() => {
|
||||
const el = videoRef.current;
|
||||
const el = videoRef.current
|
||||
return () => {
|
||||
try {
|
||||
if (el && !el.paused) el.pause();
|
||||
if (el && !el.paused) el.pause()
|
||||
} catch (_e) {}
|
||||
onBackgroundSync?.({ isPlaying: false });
|
||||
};
|
||||
}, [onBackgroundSync]);
|
||||
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 : [];
|
||||
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 ?? ""),
|
||||
word: String(w?.word ?? ''),
|
||||
startS: Number(w?.startS ?? 0),
|
||||
endS: Number(w?.endS ?? 0),
|
||||
}));
|
||||
}, [item?.musicTimestamps, item?.songIndex]);
|
||||
}))
|
||||
}, [item?.musicTimestamps, item?.songIndex])
|
||||
|
||||
const [currentTimeS, setCurrentTimeS] = useState(0);
|
||||
const [currentTimeS, setCurrentTimeS] = useState(0)
|
||||
useEffect(() => {
|
||||
if (!isActive) return;
|
||||
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);
|
||||
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]);
|
||||
}, 250)
|
||||
return () => clearInterval(id)
|
||||
}, [isActive, onBackgroundSync])
|
||||
|
||||
useEffect(() => {
|
||||
if (!onBackgroundSync) return undefined;
|
||||
if (!onBackgroundSync) return undefined
|
||||
if (isActive) {
|
||||
wasActiveRef.current = true;
|
||||
return undefined;
|
||||
wasActiveRef.current = true
|
||||
return undefined
|
||||
}
|
||||
if (wasActiveRef.current) {
|
||||
onBackgroundSync({ isPlaying: false });
|
||||
wasActiveRef.current = false;
|
||||
onBackgroundSync({ isPlaying: false })
|
||||
wasActiveRef.current = false
|
||||
}
|
||||
return undefined;
|
||||
}, [isActive, onBackgroundSync]);
|
||||
return undefined
|
||||
}, [isActive, onBackgroundSync])
|
||||
|
||||
const descriptionText =
|
||||
item?.description || item?.title || "Description chanson";
|
||||
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]);
|
||||
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;
|
||||
if (!item?.id) return null
|
||||
return createPlaybackSharePayload({
|
||||
projectId: item.id,
|
||||
title: typeof item?.title === "string" ? item.title.trim() : undefined,
|
||||
title: typeof item?.title === 'string' ? item.title.trim() : undefined,
|
||||
artist: creatorName || undefined,
|
||||
playbackUrl: videoUrl || undefined,
|
||||
});
|
||||
}, [creatorName, item?.id, item?.title, videoUrl]);
|
||||
})
|
||||
}, [creatorName, item?.id, item?.title, videoUrl])
|
||||
|
||||
const handleShare = useCallback(() => {
|
||||
if (sharePayload) {
|
||||
openShareSheet(sharePayload);
|
||||
openShareSheet(sharePayload)
|
||||
}
|
||||
}, [sharePayload]);
|
||||
}, [sharePayload])
|
||||
|
||||
const handleReport = useCallback(() => {
|
||||
if (!item?.id) return;
|
||||
SheetManager.show("Report", {
|
||||
if (!item?.id) return
|
||||
SheetManager.show('Report', {
|
||||
payload: {
|
||||
targetType: "playback",
|
||||
targetType: 'playback',
|
||||
projectId: item?.id || null,
|
||||
playbackId: item?.id || null,
|
||||
title: item?.title || "",
|
||||
title: item?.title || '',
|
||||
ownerId: item?.userId || null,
|
||||
},
|
||||
});
|
||||
}, [item?.id, item?.title, item?.userId]);
|
||||
})
|
||||
}, [item?.id, item?.title, item?.userId])
|
||||
|
||||
const handleLayout = useCallback((event) => {
|
||||
const { width = 0, height = 0 } = event?.nativeEvent?.layout || {};
|
||||
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 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;
|
||||
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);
|
||||
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);
|
||||
videoHeight = desiredHeight
|
||||
videoWidth = videoHeight * (9 / 16)
|
||||
}
|
||||
let commentsWidth = Math.min(
|
||||
maxCommentsWidth,
|
||||
Math.max(minCommentsWidth, innerWidth - videoWidth - gapBetweenColumns)
|
||||
);
|
||||
const panelHeight = Math.min(videoHeight, desiredHeight);
|
||||
)
|
||||
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 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, {
|
||||
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));
|
||||
'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));
|
||||
};
|
||||
}, []);
|
||||
events.forEach((ev) => el.removeEventListener(ev, handler))
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<View
|
||||
@@ -368,18 +333,13 @@ const PlaybackItem = ({
|
||||
styles.itemContainerBase,
|
||||
styles.itemContainerRow,
|
||||
{
|
||||
height: "90%",
|
||||
height: '90%',
|
||||
paddingHorizontal: horizontalPadding,
|
||||
paddingVertical: Math.max((layoutHeight - panelHeight) / 2, 24),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<View
|
||||
style={[
|
||||
styles.videoColumn,
|
||||
{ width: videoWidth, marginRight: gapBetweenColumns },
|
||||
]}
|
||||
>
|
||||
<View style={[styles.videoColumn, { width: videoWidth, marginRight: gapBetweenColumns }]}>
|
||||
<View style={[styles.videoSurface, { height: panelHeight }]}>
|
||||
<View style={styles.videoContainer}>
|
||||
{!!videoUrl ? (
|
||||
@@ -392,12 +352,12 @@ const PlaybackItem = ({
|
||||
preload="auto"
|
||||
// Using web CSS properties here on purpose
|
||||
style={{
|
||||
position: "absolute",
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
objectFit: "cover",
|
||||
display: "block",
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
display: 'block',
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
@@ -413,7 +373,7 @@ const PlaybackItem = ({
|
||||
<Pressable
|
||||
style={styles.ownerAvatarButton}
|
||||
onPress={() => {
|
||||
navigate(Routes.SingerProfile, { userId: item?.userId });
|
||||
navigate(Routes.SingerProfile, { userId: item?.userId })
|
||||
}}
|
||||
>
|
||||
{owner?.profilePictureURL && (
|
||||
@@ -435,38 +395,32 @@ const PlaybackItem = ({
|
||||
if (
|
||||
!ensureAuthenticated(currentUID, {
|
||||
onIntercept: () => {
|
||||
setIsFollowing(false);
|
||||
setIsFollowing(false)
|
||||
},
|
||||
})
|
||||
) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
try {
|
||||
const next = !isFollowing;
|
||||
setIsFollowing(next);
|
||||
const next = !isFollowing
|
||||
setIsFollowing(next)
|
||||
setOwner((prev) => {
|
||||
const fb = Array.isArray(prev?.followedBy)
|
||||
? prev.followedBy
|
||||
: [];
|
||||
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);
|
||||
: 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);
|
||||
setIsFollowing((v) => !v)
|
||||
}
|
||||
}}
|
||||
>
|
||||
<BlurView
|
||||
tint="dark"
|
||||
intensity={20}
|
||||
style={styles.followButton}
|
||||
>
|
||||
<BlurView tint="dark" intensity={20} style={styles.followButton}>
|
||||
<Text style={styles.followButtonText}>
|
||||
{isFollowing ? "Suivi(e)" : "Suivre"}
|
||||
{isFollowing ? 'Suivi(e)' : 'Suivre'}
|
||||
</Text>
|
||||
</BlurView>
|
||||
</Pressable>
|
||||
@@ -475,25 +429,23 @@ const PlaybackItem = ({
|
||||
<Pressable
|
||||
onPress={async () => {
|
||||
try {
|
||||
if (!item?.id) return;
|
||||
if (!item?.id) return
|
||||
if (!ensureAuthenticated(currentUID)) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
const nextLiked = !isLiked;
|
||||
setIsLiked(nextLiked);
|
||||
setLikesCount((c) => Math.max(0, c + (nextLiked ? 1 : -1)));
|
||||
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)
|
||||
);
|
||||
setIsLiked((v) => !v)
|
||||
setLikesCount((c) => (isLiked ? c + 1 : Math.max(0, c - 1)))
|
||||
}
|
||||
}}
|
||||
style={[styles.actionButton, styles.actionSpacing]}
|
||||
@@ -503,37 +455,16 @@ const PlaybackItem = ({
|
||||
style={styles.actionIcon}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
{!!likesCount && (
|
||||
<Text style={styles.actionLabel}>{likesCount}</Text>
|
||||
)}
|
||||
{!!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 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 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]}
|
||||
>
|
||||
<Pressable onPress={handleReport} style={[styles.actionButton, styles.actionSpacing]}>
|
||||
<Feather name="flag" size={20} color={Palette.white} />
|
||||
<Text style={styles.actionLabel}>Signaler</Text>
|
||||
</Pressable>
|
||||
@@ -542,10 +473,7 @@ const PlaybackItem = ({
|
||||
<View style={styles.lyricsContainer}>
|
||||
<BlurView tint="dark" intensity={20} style={styles.lyricsCard}>
|
||||
{alignedWords?.length > 0 ? (
|
||||
<KaraokeLyrics
|
||||
alignedWords={alignedWords}
|
||||
currentTimeS={currentTimeS}
|
||||
/>
|
||||
<KaraokeLyrics alignedWords={alignedWords} currentTimeS={currentTimeS} />
|
||||
) : (
|
||||
<Text style={styles.lyricsText}>{descriptionText}</Text>
|
||||
)}
|
||||
@@ -556,52 +484,45 @@ const PlaybackItem = ({
|
||||
</View>
|
||||
|
||||
{openComments && (
|
||||
<View
|
||||
style={[
|
||||
styles.commentsColumn,
|
||||
{ width: commentsWidth, height: panelHeight },
|
||||
]}
|
||||
>
|
||||
<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))
|
||||
}
|
||||
onCommentAdded={() => setCommentsCount((c) => Math.max(0, Number(c || 0) + 1))}
|
||||
inputRef={commentInputRef}
|
||||
panelHeight={panelHeight}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
export default PlaybackItem;
|
||||
export default PlaybackItem
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
itemContainerBase: {
|
||||
width: "100%",
|
||||
width: '100%',
|
||||
paddingVertical: 36,
|
||||
alignItems: "center",
|
||||
alignItems: 'center',
|
||||
},
|
||||
itemContainerRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
videoColumn: {
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
videoSurface: {
|
||||
alignSelf: "center",
|
||||
alignSelf: 'center',
|
||||
aspectRatio: 9 / 16,
|
||||
borderRadius: 32,
|
||||
overflow: "hidden",
|
||||
backgroundColor: "#07040D",
|
||||
shadowColor: "#000",
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#07040D',
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.45,
|
||||
shadowRadius: 30,
|
||||
shadowOffset: { width: 0, height: 20 },
|
||||
@@ -609,16 +530,16 @@ const styles = StyleSheet.create({
|
||||
},
|
||||
videoContainer: {
|
||||
flex: 1,
|
||||
position: "relative",
|
||||
position: 'relative',
|
||||
},
|
||||
actionStack: {
|
||||
position: "absolute",
|
||||
position: 'absolute',
|
||||
right: 18,
|
||||
top: 150,
|
||||
alignItems: "center",
|
||||
alignItems: 'center',
|
||||
},
|
||||
ownerBlock: {
|
||||
alignItems: "center",
|
||||
alignItems: 'center',
|
||||
marginBottom: 26,
|
||||
},
|
||||
ownerAvatarButton: {
|
||||
@@ -629,7 +550,7 @@ const styles = StyleSheet.create({
|
||||
borderRadius: 100,
|
||||
},
|
||||
followPressable: {
|
||||
alignSelf: "center",
|
||||
alignSelf: 'center',
|
||||
},
|
||||
followButton: {
|
||||
paddingVertical: 8,
|
||||
@@ -637,8 +558,8 @@ const styles = StyleSheet.create({
|
||||
borderRadius: 14,
|
||||
borderWidth: 1,
|
||||
borderColor: Palette.white,
|
||||
backgroundColor: "#FFFFFF20",
|
||||
overflow: "hidden",
|
||||
backgroundColor: '#FFFFFF20',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
followButtonText: {
|
||||
fontSize: 14,
|
||||
@@ -646,8 +567,8 @@ const styles = StyleSheet.create({
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
},
|
||||
actionButton: {
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
actionSpacing: {
|
||||
marginTop: 24,
|
||||
@@ -660,10 +581,10 @@ const styles = StyleSheet.create({
|
||||
fontSize: 13,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
textAlign: "center",
|
||||
textAlign: 'center',
|
||||
},
|
||||
lyricsContainer: {
|
||||
position: "absolute",
|
||||
position: 'absolute',
|
||||
left: 24,
|
||||
right: 24,
|
||||
bottom: 32,
|
||||
@@ -673,7 +594,7 @@ const styles = StyleSheet.create({
|
||||
paddingVertical: 12,
|
||||
borderRadius: 22,
|
||||
backgroundColor: Palette.glass,
|
||||
overflow: "hidden",
|
||||
overflow: 'hidden',
|
||||
},
|
||||
lyricsText: {
|
||||
fontSize: 14,
|
||||
@@ -681,6 +602,6 @@ const styles = StyleSheet.create({
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
},
|
||||
commentsColumn: {
|
||||
alignSelf: "stretch",
|
||||
alignSelf: 'stretch',
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
@@ -1,27 +1,23 @@
|
||||
import { BlurView } from "expo-blur";
|
||||
import React from "react";
|
||||
import { Platform, StyleSheet, Text, View } from "react-native";
|
||||
import KaraokeLyrics from "../../../components/KaraokeLyrics";
|
||||
import { Palette } from "../../../styles";
|
||||
import { FONT_FAMILY } from "../../../styles/Fonts";
|
||||
import { BlurView } from 'expo-blur'
|
||||
import React from 'react'
|
||||
import { Platform, StyleSheet, Text, View } from 'react-native'
|
||||
import KaraokeLyrics from '../../../components/KaraokeLyrics'
|
||||
import { Palette } from '../../../styles'
|
||||
import { FONT_FAMILY } from '../../../styles/Fonts'
|
||||
|
||||
const PlaybackLyricsCard = ({ alignedWords, currentTimeS, fallbackTitle }) => {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<BlurView
|
||||
tint="dark"
|
||||
intensity={Platform.OS !== "ios" ? 10 : 20}
|
||||
style={styles.blur}
|
||||
>
|
||||
<BlurView tint="dark" intensity={Platform.OS !== 'ios' ? 10 : 20} style={styles.blur}>
|
||||
{alignedWords?.length > 0 ? (
|
||||
<KaraokeLyrics alignedWords={alignedWords} currentTimeS={currentTimeS} />
|
||||
) : (
|
||||
<Text style={styles.title}>{fallbackTitle || "Description chanson"}</Text>
|
||||
<Text style={styles.title}>{fallbackTitle || 'Description chanson'}</Text>
|
||||
)}
|
||||
</BlurView>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
@@ -32,13 +28,13 @@ const styles = StyleSheet.create({
|
||||
paddingVertical: 8,
|
||||
borderRadius: 20,
|
||||
backgroundColor: Palette.glass,
|
||||
overflow: "hidden",
|
||||
overflow: 'hidden',
|
||||
},
|
||||
title: {
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
export default PlaybackLyricsCard;
|
||||
export default PlaybackLyricsCard
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { VideoView } from "expo-video";
|
||||
import React from "react";
|
||||
import { Image, StyleSheet, View } from "react-native";
|
||||
import { img } from "../../../assets";
|
||||
import { VideoView } from 'expo-video'
|
||||
import React from 'react'
|
||||
import { Image, StyleSheet, View } from 'react-native'
|
||||
import { img } from '../../../assets'
|
||||
|
||||
const PlaybackVideo = ({ videoUrl, videoPlayer }) => {
|
||||
return (
|
||||
@@ -16,19 +16,18 @@ const PlaybackVideo = ({ videoUrl, videoPlayer }) => {
|
||||
) : (
|
||||
<Image source={img.placeholder3} style={styles.fill} />
|
||||
)}
|
||||
|
||||
</View>
|
||||
);
|
||||
};
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
},
|
||||
fill: {
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
export default PlaybackVideo;
|
||||
export default PlaybackVideo
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { usersRef } from "../../../config/firebase";
|
||||
import { ensureAuthenticated } from "../../../utils/authRedirect";
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { usersRef } from '../../../config/firebase'
|
||||
import { ensureAuthenticated } from '../../../utils/authRedirect'
|
||||
|
||||
const usePlaybackOwner = ({
|
||||
item,
|
||||
@@ -11,102 +11,93 @@ const usePlaybackOwner = ({
|
||||
unfollowUser,
|
||||
}) => {
|
||||
const [owner, setOwner] = useState(
|
||||
item?.userId && userCache?.current?.get(item.userId)
|
||||
? userCache.current.get(item.userId)
|
||||
: null
|
||||
);
|
||||
item?.userId && userCache?.current?.get(item.userId) ? userCache.current.get(item.userId) : null
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
let cancelled = false
|
||||
const run = async () => {
|
||||
try {
|
||||
const uid = item?.userId;
|
||||
if (!uid || !userCache) return;
|
||||
const cached = userCache.current.get(uid);
|
||||
const uid = item?.userId
|
||||
if (!uid || !userCache) return
|
||||
const cached = userCache.current.get(uid)
|
||||
if (cached) {
|
||||
if (!cancelled) setOwner(cached);
|
||||
return;
|
||||
if (!cancelled) setOwner(cached)
|
||||
return
|
||||
}
|
||||
const user = await getUserByUid?.(uid);
|
||||
const user = await getUserByUid?.(uid)
|
||||
if (!cancelled && user) {
|
||||
userCache.current.set(uid, user);
|
||||
setOwner(user);
|
||||
userCache.current.set(uid, user)
|
||||
setOwner(user)
|
||||
}
|
||||
} catch (e) {}
|
||||
};
|
||||
run();
|
||||
}
|
||||
run()
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [item?.userId, userCache, getUserByUid]);
|
||||
cancelled = true
|
||||
}
|
||||
}, [item?.userId, userCache, getUserByUid])
|
||||
|
||||
useEffect(() => {
|
||||
const uid = item?.userId;
|
||||
if (!uid) return;
|
||||
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);
|
||||
const data = { id: doc.id, ...doc.data() }
|
||||
setOwner(data)
|
||||
try {
|
||||
userCache?.current?.set(uid, data);
|
||||
userCache?.current?.set(uid, data)
|
||||
} catch (e) {}
|
||||
}
|
||||
},
|
||||
() => {}
|
||||
);
|
||||
return () => unsub?.();
|
||||
}, [item?.userId, userCache]);
|
||||
)
|
||||
return () => unsub?.()
|
||||
}, [item?.userId, userCache])
|
||||
|
||||
const [isFollowing, setIsFollowing] = useState(false);
|
||||
const [isFollowActionPending, setIsFollowActionPending] = useState(false);
|
||||
const [isFollowing, setIsFollowing] = useState(false)
|
||||
const [isFollowActionPending, setIsFollowActionPending] = useState(false)
|
||||
useEffect(() => {
|
||||
const list = Array.isArray(owner?.followedBy) ? owner.followedBy : [];
|
||||
setIsFollowing(currentUID ? list.includes(currentUID) : false);
|
||||
}, [owner?.followedBy, currentUID]);
|
||||
const list = Array.isArray(owner?.followedBy) ? owner.followedBy : []
|
||||
setIsFollowing(currentUID ? list.includes(currentUID) : false)
|
||||
}, [owner?.followedBy, currentUID])
|
||||
|
||||
const toggleFollow = useCallback(async () => {
|
||||
if (!owner?.id || owner.id === currentUID) return;
|
||||
if (isFollowActionPending) return;
|
||||
if (!owner?.id || owner.id === currentUID) return
|
||||
if (isFollowActionPending) return
|
||||
if (
|
||||
!ensureAuthenticated(currentUID, {
|
||||
onIntercept: () => {
|
||||
setIsFollowActionPending(false);
|
||||
setIsFollowActionPending(false)
|
||||
},
|
||||
})
|
||||
) {
|
||||
return;
|
||||
return
|
||||
}
|
||||
try {
|
||||
setIsFollowActionPending(true);
|
||||
const next = !isFollowing;
|
||||
setIsFollowing(next);
|
||||
setIsFollowActionPending(true)
|
||||
const next = !isFollowing
|
||||
setIsFollowing(next)
|
||||
setOwner((prev) => {
|
||||
const fb = Array.isArray(prev?.followedBy) ? prev.followedBy : [];
|
||||
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);
|
||||
: fb.filter((x) => x !== currentUID)
|
||||
return prev ? { ...prev, followedBy: newFb } : prev
|
||||
})
|
||||
if (next) await followUser?.(owner.id)
|
||||
else await unfollowUser?.(owner.id)
|
||||
global.setTimeout(() => {
|
||||
setIsFollowActionPending(false);
|
||||
}, 1000);
|
||||
setIsFollowActionPending(false)
|
||||
}, 1000)
|
||||
} catch (e) {
|
||||
setIsFollowing((v) => !v);
|
||||
setIsFollowActionPending(false);
|
||||
setIsFollowing((v) => !v)
|
||||
setIsFollowActionPending(false)
|
||||
}
|
||||
}, [
|
||||
currentUID,
|
||||
followUser,
|
||||
isFollowActionPending,
|
||||
isFollowing,
|
||||
owner?.id,
|
||||
unfollowUser,
|
||||
]);
|
||||
}, [currentUID, followUser, isFollowActionPending, isFollowing, owner?.id, unfollowUser])
|
||||
|
||||
return { owner, isFollowing, isFollowActionPending, toggleFollow };
|
||||
};
|
||||
return { owner, isFollowing, isFollowActionPending, toggleFollow }
|
||||
}
|
||||
|
||||
export default usePlaybackOwner;
|
||||
export default usePlaybackOwner
|
||||
|
||||
@@ -1,50 +1,50 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { useVideoPlayer } from "expo-video";
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useVideoPlayer } from 'expo-video'
|
||||
|
||||
const usePlaybackPlayer = ({ item, isActive }) => {
|
||||
const baseVideoUrl = item?.playbackUrl || null;
|
||||
const videoUrl = baseVideoUrl;
|
||||
const baseVideoUrl = item?.playbackUrl || null
|
||||
const videoUrl = baseVideoUrl
|
||||
|
||||
const videoPlayer = useVideoPlayer(videoUrl || null, (player) => {
|
||||
player.loop = false;
|
||||
player.muted = false;
|
||||
player.timeUpdateEventInterval = 0.2;
|
||||
});
|
||||
player.loop = false
|
||||
player.muted = false
|
||||
player.timeUpdateEventInterval = 0.2
|
||||
})
|
||||
|
||||
const shouldAutoPlay = isActive;
|
||||
const shouldAutoPlay = isActive
|
||||
|
||||
useEffect(() => {
|
||||
if (!videoPlayer) return;
|
||||
if (!videoPlayer) return
|
||||
if (shouldAutoPlay) {
|
||||
try {
|
||||
videoPlayer.currentTime = 0;
|
||||
videoPlayer.play();
|
||||
videoPlayer.currentTime = 0
|
||||
videoPlayer.play()
|
||||
} catch (e) {}
|
||||
} else if (videoPlayer?.playing) {
|
||||
try {
|
||||
videoPlayer.pause();
|
||||
videoPlayer.pause()
|
||||
} catch (e) {}
|
||||
}
|
||||
}, [shouldAutoPlay, videoPlayer]);
|
||||
}, [shouldAutoPlay, videoPlayer])
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
try {
|
||||
if (videoPlayer?.playing) videoPlayer.pause();
|
||||
if (videoPlayer?.playing) videoPlayer.pause()
|
||||
} catch (e) {}
|
||||
};
|
||||
}, [videoPlayer]);
|
||||
}
|
||||
}, [videoPlayer])
|
||||
|
||||
const [currentTimeS, setCurrentTimeS] = useState(0);
|
||||
const [currentTimeS, setCurrentTimeS] = useState(0)
|
||||
useEffect(() => {
|
||||
if (!isActive) return;
|
||||
if (!isActive) return
|
||||
const id = global.setInterval(() => {
|
||||
try {
|
||||
setCurrentTimeS(Number(videoPlayer?.currentTime || 0));
|
||||
setCurrentTimeS(Number(videoPlayer?.currentTime || 0))
|
||||
} catch (e) {}
|
||||
}, 250);
|
||||
return () => global.clearInterval(id);
|
||||
}, [isActive, videoPlayer]);
|
||||
}, 250)
|
||||
return () => global.clearInterval(id)
|
||||
}, [isActive, videoPlayer])
|
||||
|
||||
const playerState = useMemo(
|
||||
() => ({
|
||||
@@ -53,9 +53,9 @@ const usePlaybackPlayer = ({ item, isActive }) => {
|
||||
currentTimeS,
|
||||
}),
|
||||
[videoPlayer, videoUrl, currentTimeS]
|
||||
);
|
||||
)
|
||||
|
||||
return playerState;
|
||||
};
|
||||
return playerState
|
||||
}
|
||||
|
||||
export default usePlaybackPlayer;
|
||||
export default usePlaybackPlayer
|
||||
|
||||
Reference in New Issue
Block a user