playback cards

src/screens/HitParade/HitParade.js

@@ -22,6 +22,16 @@ const HitParade = () => {
     listener: true,
     condition: true,
   });
+  const { data: topPlaybacks } = useDataFromRef({
+    // Firestore n'autorise pas 2 inégalités (>, <, >=, <=, !=) sur des champs différents.
+    // On ne garde qu'une inégalité côté requête (views > 0) et on filtre ensuite côté client.
+    // On surdimensionne le limit pour s'assurer d'obtenir 10 playbacks après filtrage.
+    ref: projectsRef.where("views", ">", 0).orderBy("views", "desc").limit(50),
+    format: (docs) => docs.filter((d) => d?.playbackUrl != null).slice(0, 10),
+    simpleRef: false,
+    listener: true,
+    condition: true,
+  });
 
   return (
     <Page backgroundImg={background.hitParadeBG} headerType="NONE">
@@ -114,8 +124,17 @@ const HitParade = () => {
                 gap: 10,
                 paddingBottom: responsiveHeight(20),
               }}
-              data={Array.from({ length: 5 })}
+              data={Array.isArray(topPlaybacks) ? topPlaybacks : []}
-              renderItem={() => <PlaybacksCard />}
+              keyExtractor={(item) => item.id}
+              renderItem={({ item, index }) => (
+                <PlaybacksCard
+                  rank={index + 1}
+                  title={item?.title || "Sans titre"}
+                  artist={"MusicLand"}
+                  coverUrl={item?.coverUrl || null}
+                  onPress={() => navigate(Routes.Playbacks, { projectId: item.id })}
+                />
+              )}
             />
           )}
           {selected === "Clips" && (

src/screens/HitParade/components/PlaybacksCard.js

@@ -1,4 +1,4 @@
-import { View, Text, Image, Platform } from "react-native";
+import { View, Text, Image, Platform, Pressable } from "react-native";
 import React from "react";
 import { BlurView } from "expo-blur";
 import { img } from "../../../assets";
@@ -6,65 +6,75 @@ import { Palette, Style } from "../../../styles";
 import { FONT_FAMILY } from "../../../styles/Fonts";
 import CoinBadge from "./CoinBadge";
 
-const PlaybacksCard = () => {
+const PlaybacksCard = ({
+  rank = 1,
+  title = "Sans titre",
+  artist = "MusicLand",
+  coverUrl = null,
+  onPress = () => null,
+}) => {
   return (
-    <BlurView
+    <Pressable onPress={onPress}>
-      intensity={20}
+      <BlurView
-      tint="dark"
+        intensity={20}
-      style={{
+        tint="dark"
-        ...Style.containerSpaceBetween,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 12,
-        backgroundColor: Palette.glass,
-        overflow: "hidden",
-      }}
-      experimentalBlurMethod={
-        Platform.OS !== "ios" ? "dimezisBlurView" : "none"
-      }
-    >
-      <View
         style={{
-          ...Style.containerRow,
+          ...Style.containerSpaceBetween,
-          gap: 15,
+          paddingHorizontal: 8,
+          paddingVertical: 4,
+          borderRadius: 12,
+          backgroundColor: Palette.glass,
+          overflow: "hidden",
         }}
+        experimentalBlurMethod={
+          Platform.OS !== "ios" ? "dimezisBlurView" : "none"
+        }
       >
-        <Text
+        <View
           style={{
-            fontSize: 22,
+            ...Style.containerRow,
-            color: Palette.white,
+            gap: 15,
-            fontFamily: FONT_FAMILY.InterSemiBold,
           }}
         >
-          1
-        </Text>
-        <Image
-          source={img.placeholder3}
-          style={{ width: 67, height: 108, borderRadius: 16 }}
-        />
-        <View>
           <Text
             style={{
-              fontSize: 16,
+              fontSize: 22,
               color: Palette.white,
-              fontFamily: FONT_FAMILY.InterMedium,
+              fontFamily: FONT_FAMILY.InterSemiBold,
             }}
           >
-            Alors on danse
+            {rank}
-          </Text>
-          <Text
-            style={{
-              fontSize: 12,
-              color: Palette.white,
-              fontFamily: FONT_FAMILY.InterRegular,
-            }}
-          >
-            Stromae
           </Text>
+          <Image
+            source={coverUrl ? { uri: coverUrl } : img.placeholder3}
+            style={{ width: 67, height: 108, borderRadius: 16 }}
+          />
+          <View>
+            <Text
+              style={{
+                fontSize: 16,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.InterMedium,
+              }}
+              numberOfLines={1}
+            >
+              {title}
+            </Text>
+            <Text
+              style={{
+                fontSize: 12,
+                color: Palette.white,
+                fontFamily: FONT_FAMILY.InterRegular,
+              }}
+              numberOfLines={1}
+            >
+              {artist}
+            </Text>
+          </View>
         </View>
-      </View>
+        <CoinBadge />
-      <CoinBadge />
+      </BlurView>
-    </BlurView>
+    </Pressable>
   );
 };