add - commentsCount
This commit is contained in:
Victor
+69
-63
@@ -1,33 +1,33 @@
|
||||
import { useIsFocused, useRoute } from "@react-navigation/native";
|
||||
import { useAudioPlayer } from "expo-audio";
|
||||
import { BlurView } from "expo-blur";
|
||||
import { VideoView, useVideoPlayer } from "expo-video";
|
||||
import { useIsFocused, useRoute } from '@react-navigation/native';
|
||||
import { useAudioPlayer } from 'expo-audio';
|
||||
import { BlurView } from 'expo-blur';
|
||||
import { VideoView, useVideoPlayer } from 'expo-video';
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { Image, Platform, Pressable, Share, Text, View } from "react-native";
|
||||
import Carousel from "react-native-reanimated-carousel";
|
||||
import { responsiveHeight } from "react-native-responsive-dimensions";
|
||||
import { icons, img } from "../assets";
|
||||
import { openComments } from "../components/bottomsheets/CommentsBottomSheet";
|
||||
import KaraokeLyrics from "../components/KaraokeLyrics";
|
||||
} from 'react';
|
||||
import { Image, Platform, Pressable, Share, Text, View } from 'react-native';
|
||||
import Carousel from 'react-native-reanimated-carousel';
|
||||
import { responsiveHeight } from 'react-native-responsive-dimensions';
|
||||
import { icons, img } from '../assets';
|
||||
import { openComments } from '../components/bottomsheets/CommentsBottomSheet';
|
||||
import KaraokeLyrics from '../components/KaraokeLyrics';
|
||||
import {
|
||||
arrayRemove,
|
||||
arrayUnion,
|
||||
projectsRef,
|
||||
usersRef,
|
||||
} from "../config/firebase";
|
||||
import useDataFromRef from "../hooks/useDataFromRef";
|
||||
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";
|
||||
} from '../config/firebase';
|
||||
import useDataFromRef from '../hooks/useDataFromRef';
|
||||
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';
|
||||
|
||||
const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
|
||||
const { currentUID, followUser, unfollowUser } = useUser() || {};
|
||||
@@ -45,6 +45,11 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
|
||||
);
|
||||
const [likesCount, setLikesCount] = useState(initialLikedBy.length);
|
||||
|
||||
const commentsCount = useMemo(
|
||||
() => Number(item?.commentsCount || 0),
|
||||
[item?.commentsCount]
|
||||
);
|
||||
|
||||
const [owner, setOwner] = useState(
|
||||
item?.userId && userCache?.current?.get(item.userId)
|
||||
? userCache.current.get(item.userId)
|
||||
@@ -171,7 +176,7 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
|
||||
|
||||
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),
|
||||
}));
|
||||
@@ -197,47 +202,43 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
|
||||
<View
|
||||
style={{
|
||||
height: responsiveHeight(100),
|
||||
position: "relative",
|
||||
backgroundColor: "black",
|
||||
}}
|
||||
>
|
||||
position: 'relative',
|
||||
backgroundColor: 'black',
|
||||
}}>
|
||||
{!!videoUrl ? (
|
||||
<VideoView
|
||||
player={videoPlayer}
|
||||
nativeControls={false}
|
||||
contentFit="cover"
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
source={img.placeholder3}
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
style={{ width: '100%', height: '100%' }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Right side actions */}
|
||||
<View
|
||||
style={{
|
||||
position: "absolute",
|
||||
width: "100%",
|
||||
position: 'absolute',
|
||||
width: '100%',
|
||||
bottom: 130,
|
||||
gap: 18,
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<View
|
||||
style={{
|
||||
alignSelf: "flex-end",
|
||||
alignItems: "center",
|
||||
alignSelf: 'flex-end',
|
||||
alignItems: 'center',
|
||||
gap: 20,
|
||||
paddingHorizontal: 13,
|
||||
}}
|
||||
>
|
||||
<View style={{ gap: 6, alignItems: "center" }}>
|
||||
}}>
|
||||
<View style={{ gap: 6, alignItems: 'center' }}>
|
||||
<Pressable
|
||||
onPress={() => {
|
||||
navigate(Routes.SingerProfile, { userId: item?.userId });
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
{owner?.profilePictureURL ? (
|
||||
<Image
|
||||
source={{ uri: owner.profilePictureURL }}
|
||||
@@ -278,19 +279,18 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
|
||||
// rollback on failure
|
||||
setIsFollowing((v) => !v);
|
||||
}
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<BlurView
|
||||
tint="dark"
|
||||
intensity={Platform.OS !== "ios" ? 10 : 20}
|
||||
intensity={Platform.OS !== 'ios' ? 10 : 20}
|
||||
style={{
|
||||
paddingVertical: 6,
|
||||
paddingHorizontal: 12,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: Palette.white,
|
||||
overflow: "hidden",
|
||||
backgroundColor: isFollowing ? "#FFFFFF1A" : undefined,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: isFollowing ? '#FFFFFF1A' : undefined,
|
||||
}}
|
||||
// experimentalBlurMethod={
|
||||
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
|
||||
@@ -301,9 +301,8 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
|
||||
fontSize: 13,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
}}
|
||||
>
|
||||
{isFollowing ? "Ne plus suivre" : "Suivre"}
|
||||
}}>
|
||||
{isFollowing ? 'Ne plus suivre' : 'Suivre'}
|
||||
</Text>
|
||||
</BlurView>
|
||||
</Pressable>
|
||||
@@ -333,8 +332,7 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
|
||||
setLikesCount((c) => (isLiked ? c + 1 : Math.max(0, c - 1)));
|
||||
}
|
||||
}}
|
||||
style={{ alignItems: "center" }}
|
||||
>
|
||||
style={{ alignItems: 'center' }}>
|
||||
<Image
|
||||
source={isLiked ? icons.heart : icons.heartOutline}
|
||||
style={size({ size: 26 })}
|
||||
@@ -347,24 +345,34 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
|
||||
fontSize: 11,
|
||||
marginTop: 4,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
{likesCount}
|
||||
</Text>
|
||||
)}
|
||||
</Pressable>
|
||||
<Pressable
|
||||
onPress={() => item?.id && openComments(item.id)}
|
||||
style={{ alignItems: "center" }}
|
||||
>
|
||||
style={{ alignItems: 'center' }}>
|
||||
<Image source={icons.chatBubble} style={size({ size: 26 })} />
|
||||
{!!commentsCount && (
|
||||
<Text
|
||||
style={{
|
||||
color: Palette.white,
|
||||
fontSize: 11,
|
||||
marginTop: 4,
|
||||
fontFamily: FONT_FAMILY.InterMedium,
|
||||
textAlign: 'center',
|
||||
}}>
|
||||
{commentsCount}
|
||||
</Text>
|
||||
)}
|
||||
</Pressable>
|
||||
<Pressable
|
||||
onPress={async () => {
|
||||
try {
|
||||
const url = item?.playbackUrl || "";
|
||||
const title = item?.title || "Partager";
|
||||
const url = item?.playbackUrl || '';
|
||||
const title = item?.title || 'Partager';
|
||||
const base = item?.title
|
||||
? `Découvre « ${item.title} » sur MusicLand`
|
||||
: `Découvre ce playback sur MusicLand`;
|
||||
@@ -377,21 +385,20 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
|
||||
})
|
||||
);
|
||||
} catch (e) {}
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<Image source={icons.share} style={size({ size: 26 })} />
|
||||
</Pressable>
|
||||
</View>
|
||||
<View style={{ paddingHorizontal: 28 }}>
|
||||
<BlurView
|
||||
tint="dark"
|
||||
intensity={Platform.OS !== "ios" ? 10 : 20}
|
||||
intensity={Platform.OS !== 'ios' ? 10 : 20}
|
||||
style={{
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 20,
|
||||
backgroundColor: Palette.glass,
|
||||
overflow: "hidden",
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
// experimentalBlurMethod={
|
||||
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
|
||||
@@ -408,9 +415,8 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
|
||||
fontSize: 12,
|
||||
color: Palette.white,
|
||||
fontFamily: FONT_FAMILY.InterRegular,
|
||||
}}
|
||||
>
|
||||
{item?.title || "Description chanson"}
|
||||
}}>
|
||||
{item?.title || 'Description chanson'}
|
||||
</Text>
|
||||
)}
|
||||
</BlurView>
|
||||
@@ -430,7 +436,7 @@ const Playbacks = () => {
|
||||
const { getUserByUid } = useUser() || {};
|
||||
const isFocused = useIsFocused();
|
||||
const { data: playbacks = [], loadMore } = useDataFromRef({
|
||||
ref: projectsRef.where("playbackUrl", "!=", null),
|
||||
ref: projectsRef.where('playbackUrl', '!=', null),
|
||||
simpleRef: false,
|
||||
listener: false,
|
||||
usePagination: true,
|
||||
@@ -469,7 +475,7 @@ const Playbacks = () => {
|
||||
}, [focusProjectId, playbacks, loadMore]);
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: "black" }}>
|
||||
<View style={{ flex: 1, backgroundColor: 'black' }}>
|
||||
<Carousel
|
||||
ref={carouselRef}
|
||||
data={playbacks}
|
||||
|
||||
Reference in New Issue
Block a user