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 })}
-              renderItem={() => <PlaybacksCard />}
+              data={Array.isArray(topPlaybacks) ? topPlaybacks : []}
+              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" && (