leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

search

Browse Source
This commit is contained in:
Thomas Demirdjian
2025-10-03 14:09:47 +02:00
parent 1907449dee
commit bfca92f9e0
10 changed files with 265 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/data/keys.js
+14
View File
@@ -19,3 +19,17 @@ export const GOOGLE_IOS_CLIENT_ID =
// Android client ID (client_type 1 from google-services.json)
export const GOOGLE_ANDROID_CLIENT_ID =
"305598753437-qck73beo37mi04qlautgafbpdl3ccaoh.apps.googleusercontent.com";
const AlgoliaAppId = "38AHXYR8S1";
const AlgoliaSearchKey = "2ac15d7b8b5e6490b53821067e4a0f03";
export const AlgoliaUserConfig = {
index: "users",
projectID: AlgoliaAppId,
publicKey: AlgoliaSearchKey,
};
export const AlgoliaProjectConfig = {
index: "projects",
projectID: AlgoliaAppId,
publicKey: AlgoliaSearchKey,
};
src/hooks/useSearch.js
+30 -209
View File
@@ -1,7 +1,7 @@
import { useEffect, useMemo, useState } from "react";
import { useGlobal } from "reactn";
import { usersRef, projectsRef } from "../config/firebase";
import useDataFromRef from "./useDataFromRef";
import { useState } from "react";
import useAlgoliaSearch from "react-native-minuit/src/hooks/useAlgoliaSearch";
import { AlgoliaUserConfig, AlgoliaProjectConfig } from "../data/keys";
import { useUserData } from "../providers/UserDataProvider";
const batchSizes = {
users: 5,
@@ -11,221 +11,42 @@ const batchSizes = {
const useSearch = () => {
const [selected, setSelected] = useState(null);
const [search, setSearch] = useState("");
const queryText = useMemo(() => search.trim(), [search]);
const queryLower = useMemo(
() => (search || "").toLowerCase().trim(),
[search],
);
const [currentUID] = useGlobal("currentUID");
const [autoLoads, setAutoLoads] = useState(0);
const { currentUID } = useUserData();
const usersQueryRef = useMemo(() => {
try {
const lower = queryLower;
if (lower) {
return usersRef
.orderBy("userNameLower")
.startAt(lower)
.endAt(lower + "\uf8ff");
}
return usersRef.orderBy("userNameLower");
} catch (_error) {
return null;
}
}, [queryLower]);
const projectsQueryRefLower = useMemo(() => {
try {
const lower = queryText ? queryText.toLowerCase() : "";
if (lower) {
return projectsRef
.orderBy("titleLower")
.startAt(lower)
.endAt(lower + "\uf8ff");
}
return null;
} catch (_error) {
return null;
}
}, [queryText]);
const projectsQueryRefCase = useMemo(() => {
try {
const raw = queryText || "";
if (raw) {
return projectsRef
.orderBy("title")
.startAt(raw)
.endAt(raw + "\uf8ff");
}
return null;
} catch (_error) {
return null;
}
}, [queryText]);
const {
data: userResults = [],
loading: usersLoading,
loadMore: loadMoreUsers,
} = useDataFromRef({
ref: usersQueryRef,
simpleRef: false,
listener: false,
condition: !!usersQueryRef,
refreshArray: [queryLower],
usePagination: true,
batchSize: batchSizes.users,
const { hits: users, loading: userLoading } = useAlgoliaSearch({
query: search,
algoliaObject: AlgoliaUserConfig,
batch: batchSizes.users,
searchParams: {
filters: `NOT objectID:${currentUID}`,
},
});
const filteredUsers = useMemo(() => {
const arr = Array.isArray(userResults) ? userResults : [];
const matchingUsers = queryLower
? arr.filter((user) => {
const nameLower = (
user?.userNameLower ||
user?.userName ||
""
).toLowerCase();
return nameLower.includes(queryLower);
})
: arr;
const seen = new Set();
const unique = [];
for (const user of matchingUsers) {
const id = user?.id;
if (!id || seen.has(id)) continue;
if (id === currentUID || user?.userID === currentUID) continue;
seen.add(id);
unique.push(user);
}
return unique;
}, [userResults, queryLower, currentUID]);
const {
data: projectResultsLower = [],
loading: projectsLoadingLower,
loadMore: loadMoreProjectsLower,
} = useDataFromRef({
ref: projectsQueryRefLower,
simpleRef: false,
listener: false,
condition: !!projectsQueryRefLower,
refreshArray: [queryText],
usePagination: true,
batchSize: batchSizes.projects,
const { hits: playbacks, loading: playbackLoading } = useAlgoliaSearch({
query: search,
algoliaObject: AlgoliaProjectConfig,
batch: batchSizes.projects,
searchParams: {
filters: `hasPlayback:true AND hasSong:true`,
},
});
const {
data: projectResultsCase = [],
loading: projectsLoadingCase,
loadMore: loadMoreProjectsCase,
} = useDataFromRef({
ref: projectsQueryRefCase,
simpleRef: false,
listener: false,
condition: !!projectsQueryRefCase,
refreshArray: [queryText],
usePagination: true,
batchSize: batchSizes.projects,
const { hits: musics, loading: musicLoading } = useAlgoliaSearch({
query: search,
algoliaObject: AlgoliaProjectConfig,
batch: batchSizes.projects,
searchParams: {
filters: `hasPlayback:false AND hasSong:true`,
},
});
const {
data: projectResultsDefault = [],
loading: projectsLoadingDefault,
loadMore: loadMoreProjectsDefault,
} = useDataFromRef({
ref: !queryText ? projectsRef.orderBy("updatedAt", "desc") : null,
simpleRef: false,
listener: false,
condition: !queryText,
refreshArray: [queryText],
usePagination: true,
batchSize: batchSizes.projects,
});
const projectsLoading = queryText
? projectsLoadingLower || projectsLoadingCase
: projectsLoadingDefault;
const loadMoreProjects = () => {
if (queryText) {
loadMoreProjectsLower?.();
loadMoreProjectsCase?.();
} else {
loadMoreProjectsDefault?.();
}
};
const filteredProjects = useMemo(() => {
const lowerMatches = Array.isArray(projectResultsLower)
? projectResultsLower
: [];
const caseMatches = Array.isArray(projectResultsCase)
? projectResultsCase
: [];
const defaultProjects = Array.isArray(projectResultsDefault)
? projectResultsDefault
: [];
const arr = queryText ? [...lowerMatches, ...caseMatches] : defaultProjects;
const seen = new Set();
const unique = [];
for (const project of arr) {
const id = project?.id;
if (!id || seen.has(id)) continue;
seen.add(id);
unique.push(project);
}
return unique;
}, [
queryText,
projectResultsLower,
projectResultsCase,
projectResultsDefault,
]);
useEffect(() => {
setAutoLoads(0);
}, [queryText]);
useEffect(() => {
if (
filteredUsers.length < batchSizes.users &&
usersQueryRef &&
!usersLoading
) {
if (autoLoads < 3) {
setAutoLoads((previous) => previous + 1);
loadMoreUsers?.();
}
}
}, [
filteredUsers.length,
usersLoading,
usersQueryRef,
autoLoads,
loadMoreUsers,
]);
const toggleSelected = (item) => {
setSelected((prev) => (prev === item ? null : item));
};
return {
search,
setSearch,
queryText,
queryLower,
selected,
setSelected,
toggleSelected,
filteredUsers,
usersLoading,
loadMoreUsers,
filteredProjects,
projectsLoading,
loadMoreProjects,
users,
musics,
playbacks,
loading: userLoading || musicLoading || playbackLoading,
};
};
src/screens/Library/Library.web.js
+36 -13
View File
@@ -1,4 +1,4 @@
import React, { useCallback, useEffect, useRef, useState } from "react";
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Image, Platform, ScrollView, Text, View } from "react-native";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { background, icons } from "../../assets";
@@ -50,15 +50,38 @@ const Library = () => {
setSearch,
selected,
setSelected,
toggleSelected,
filteredProjects,
projectsLoading,
loadMoreProjects,
filteredUsers,
usersLoading,
loadMoreUsers,
users = [],
musics = [],
playbacks = [],
loading,
} = useSearch();
const toggleSelected = useCallback(
(value) => {
setSelected((previous) => (previous === value ? null : value));
},
[setSelected],
);
const musicResults = useMemo(
() => (Array.isArray(musics) ? musics : []),
[musics],
);
const playbackResults = useMemo(
() => (Array.isArray(playbacks) ? playbacks : []),
[playbacks],
);
const userResults = useMemo(
() => (Array.isArray(users) ? users : []),
[users],
);
const musicsLoading = loading;
const playbacksLoading = loading;
const usersLoading = loading;
const [dropdownVisible, setDropdownVisible] = useState(false);
const searchWrapperRef = useRef(null);
@@ -152,12 +175,12 @@ const Library = () => {
/>
<SearchResultsList
selected={selected}
filteredProjects={filteredProjects}
projectsLoading={projectsLoading}
loadMoreProjects={loadMoreProjects}
filteredUsers={filteredUsers}
musics={musicResults}
musicsLoading={musicsLoading}
playbacks={playbackResults}
playbacksLoading={playbacksLoading}
users={userResults}
usersLoading={usersLoading}
loadMoreUsers={loadMoreUsers}
onResultSelected={closeDropdown}
style={{ flex: 0, maxHeight: 420 }}
/>
src/screens/Library/Research.js
+37 -13
View File
@@ -1,4 +1,4 @@
import React from "react";
import React, { useCallback, useMemo } from "react";
import { View } from "react-native";
import { background } from "../../assets";
import useSearch from "../../hooks/useSearch";
@@ -12,15 +12,39 @@ const Research = () => {
search,
setSearch,
selected,
toggleSelected,
filteredProjects,
projectsLoading,
loadMoreProjects,
filteredUsers,
usersLoading,
loadMoreUsers,
setSelected,
users = [],
musics = [],
playbacks = [],
loading,
} = useSearch();
const toggleSelected = useCallback(
(value) => {
setSelected((previous) => (previous === value ? null : value));
},
[setSelected],
);
const musicResults = useMemo(
() => (Array.isArray(musics) ? musics : []),
[musics],
);
const playbackResults = useMemo(
() => (Array.isArray(playbacks) ? playbacks : []),
[playbacks],
);
const userResults = useMemo(
() => (Array.isArray(users) ? users : []),
[users],
);
const musicsLoading = loading;
const playbacksLoading = loading;
const usersLoading = loading;
return (
<Page
headerType="NAVIGATION"
@@ -39,12 +63,12 @@ const Research = () => {
/>
<SearchResultsList
selected={selected}
filteredProjects={filteredProjects}
projectsLoading={projectsLoading}
loadMoreProjects={loadMoreProjects}
filteredUsers={filteredUsers}
musics={musicResults}
musicsLoading={musicsLoading}
playbacks={playbackResults}
playbacksLoading={playbacksLoading}
users={userResults}
usersLoading={usersLoading}
loadMoreUsers={loadMoreUsers}
/>
</View>
</Page>
src/screens/Library/components/SearchResultsList.js
+101 -61
View File
@@ -1,6 +1,6 @@
import { Image as ExpoImage } from "expo-image";
import React, { useState } from "react";
import { Pressable, ScrollView, Text, View } from "react-native";
import { Image as ExpoImage } from "expo-image";
import { img } from "../../../assets";
import MoreMenu from "../../../components/MoreMenu";
import { Routes } from "../../../navigation";
@@ -28,12 +28,12 @@ const EmptyText = ({ text }) => (
const SearchResultsList = ({
selected,
filteredProjects,
projectsLoading,
loadMoreProjects,
filteredUsers,
usersLoading,
loadMoreUsers,
musics = [],
musicsLoading = false,
playbacks = [],
playbacksLoading = false,
users = [],
usersLoading = false,
onResultSelected,
contentContainerStyle,
style,
@@ -52,14 +52,23 @@ const SearchResultsList = ({
onResultSelected?.();
};
const shouldShowMusics =
(!selected && (musics.length > 0 || musicsLoading)) || selected === "Musiques";
const shouldShowPlaybacks =
(!selected && (playbacks.length > 0 || playbacksLoading)) ||
selected === "Playbacks";
const shouldShowUsers =
(!selected && (users.length > 0 || usersLoading)) || selected === "Profils";
return (
<View style={[{ flex: 1 }, style]}>
<ScrollView
contentContainerStyle={{ paddingTop: 2, ...contentContainerStyle }}
showsVerticalScrollIndicator={false}
>
{((!selected && (filteredProjects.length > 0 || projectsLoading)) ||
selected === "Musiques") && (
{shouldShowMusics && (
<View style={{ paddingHorizontal: 2 }}>
<CreateLyricsHeader
gradientProps={{
@@ -67,10 +76,10 @@ const SearchResultsList = ({
end: { x: 0, y: 1 },
}}
>
{filteredProjects.length > 0 && (
{musics.length > 0 && (
<View style={{ gap: 10 }}>
{Array.isArray(filteredProjects) &&
filteredProjects.slice(0, 6).map((project) => (
{Array.isArray(musics) &&
musics.slice(0, 6).map((project) => (
<MusicCard
key={project.id}
title={project?.title || "Sans titre"}
@@ -85,46 +94,91 @@ const SearchResultsList = ({
setShowMenu(
(previous) =>
!previous ||
positionTop?.top !== (menuPosition?.top ?? null)
positionTop?.top !== (menuPosition?.top ?? null),
);
}}
/>
))}
{/* {(filteredProjects.length >= 6 || projectsLoading) && (
<Pressable
onPress={loadMoreProjects}
style={{ alignSelf: "center", marginTop: 6 }}
{musicsLoading && (
<Text
style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
alignSelf: "center",
}}
>
<Text
style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
opacity: projectsLoading ? 0.6 : 1,
}}
>
{projectsLoading ? "Chargement…" : "Charger plus"}
</Text>
</Pressable>
)} */}
{"Chargement…"}
</Text>
)}
</View>
)}
{filteredProjects.length === 0 && !projectsLoading && (
{musics.length === 0 && !musicsLoading && (
<EmptyText text={"Aucune musique trouvée"} />
)}
</CreateLyricsHeader>
</View>
)}
{((!selected && (filteredUsers.length > 0 || usersLoading)) ||
selected === "Profils") && (
{shouldShowPlaybacks && (
<View style={{ paddingHorizontal: 2, paddingTop: 10 }}>
<CreateLyricsHeader
gradientProps={{
start: { x: 0, y: 0 },
end: { x: 0, y: 1 },
}}
>
{playbacks.length > 0 && (
<View style={{ gap: 10 }}>
{Array.isArray(playbacks) &&
playbacks.slice(0, 6).map((project) => (
<MusicCard
key={project.id}
title={project?.title || "Sans titre"}
subtitle={"MusicLand"}
imageUri={project?.coverUrl || null}
projectId={project?.id}
likedBy={project?.likedBy || []}
onPress={() => handleProjectPress(project.id)}
onPressMore={(positionTop) => {
setSelectedProjectId(project.id);
setMenuPosition(positionTop);
setShowMenu(
(previous) =>
!previous ||
positionTop?.top !== (menuPosition?.top ?? null),
);
}}
/>
))}
{playbacksLoading && (
<Text
style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
alignSelf: "center",
}}
>
{"Chargement…"}
</Text>
)}
</View>
)}
{playbacks.length === 0 && !playbacksLoading && (
<EmptyText text={"Aucun playback trouvé"} />
)}
</CreateLyricsHeader>
</View>
)}
{shouldShowUsers && (
<View style={{ paddingHorizontal: 2, paddingTop: 10 }}>
<CreateLyricsHeader
gradientProps={{ start: { x: 0, y: 0 }, end: { x: 0, y: 1 } }}
>
{filteredUsers.length > 0 && (
{users.length > 0 && (
<View style={{ gap: 8 }}>
{Array.isArray(filteredUsers) &&
filteredUsers.slice(0, 5).map((user) => (
{Array.isArray(users) &&
users.slice(0, 5).map((user) => (
<Pressable
style={{ gap: 14, ...Style.containerRow }}
key={user.id}
@@ -163,40 +217,26 @@ const SearchResultsList = ({
</Text>
</Pressable>
))}
{/* {(filteredUsers.length >= 5 || usersLoading) && (
<Pressable
onPress={loadMoreUsers}
style={{ alignSelf: "center", marginTop: 6 }}
{usersLoading && (
<Text
style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
alignSelf: "center",
}}
>
<Text
style={{
fontSize: 12,
color: Palette.white,
fontFamily: FONT_FAMILY.InterRegular,
opacity: usersLoading ? 0.6 : 1,
}}
>
{usersLoading ? "Chargement…" : "Charger plus"}
</Text>
</Pressable>
)} */}
{"Chargement…"}
</Text>
)}
</View>
)}
{filteredUsers.length === 0 && !usersLoading && (
{users.length === 0 && !usersLoading && (
<EmptyText text={"Aucun profil trouvé"} />
)}
</CreateLyricsHeader>
</View>
)}
{selected === "Playbacks" && (
<View style={{ paddingHorizontal: 2, paddingTop: 10 }}>
<CreateLyricsHeader
gradientProps={{ start: { x: 0, y: 0 }, end: { x: 0, y: 1 } }}
>
<EmptyText text={"Aucun playback trouvé"} />
</CreateLyricsHeader>
</View>
)}
{selected === "Clips" && (
<View style={{ paddingHorizontal: 2, paddingTop: 10 }}>
<CreateLyricsHeader
src/screens/Writing/CreatingLyrics.js
-2
View File
@@ -87,7 +87,6 @@ const CreatingLyrics = ({ active, config, selections }) => {
await setIsLoading(true);
await updateProjectData({
title: result?.title || "",
titleLower: (result?.title || "").toLowerCase(),
lyrics: Array.isArray(result?.lyrics) ? result.lyrics : [],
description: result?.lyricsDescription,
config: config || null,
@@ -198,7 +197,6 @@ const CreatingLyrics = ({ active, config, selections }) => {
await setIsLoading(true);
await updateProjectData({
title: result?.title || "",
titleLower: (result?.title || "").toLowerCase(),
lyrics: Array.isArray(result?.lyrics)
? result.lyrics
: [],
src/screens/Writing/Lyrics.js
+6 -7
View File
@@ -112,7 +112,7 @@ const Lyrics = ({ navigation }) => {
if (invalid) {
Alert.alert(
"Champs incomplets",
"Chaque couplet et refrain doit contenir du texte."
"Chaque couplet et refrain doit contenir du texte.",
);
return;
}
@@ -133,7 +133,7 @@ const Lyrics = ({ navigation }) => {
normalizedOldLyrics.every(
(s, i) =>
s.type === normalizedNewLyrics[i]?.type &&
s.lyrics === normalizedNewLyrics[i]?.lyrics
s.lyrics === normalizedNewLyrics[i]?.lyrics,
);
// 1) Appel de la Cloud Function de modération avant tout enregistrement
@@ -157,7 +157,7 @@ const Lyrics = ({ navigation }) => {
: null;
Alert.alert(
"Contenu interdit",
[data?.message, quotes].filter(Boolean).join("\n\n")
[data?.message, quotes].filter(Boolean).join("\n\n"),
);
return; // stop here
}
@@ -165,7 +165,7 @@ const Lyrics = ({ navigation }) => {
if (data?.errorCode === "ANALYSE_FAILED") {
Alert.alert(
"Analyse indisponible",
"Impossible de vérifier la toxicité pour le moment. Réessayez plus tard."
"Impossible de vérifier la toxicité pour le moment. Réessayez plus tard.",
);
return;
}
@@ -200,18 +200,17 @@ const Lyrics = ({ navigation }) => {
} catch (moderationError) {
console.log(
"Moderation call failed",
moderationError?.message || moderationError
moderationError?.message || moderationError,
);
Alert.alert(
"Analyse indisponible",
"Impossible de vérifier la toxicité pour le moment. Réessayez plus tard."
"Impossible de vérifier la toxicité pour le moment. Réessayez plus tard.",
);
return;
}
const baseData = {
title: titleTrimmed,
titleLower: titleTrimmed.toLowerCase(),
lyrics: normalizedNewLyrics,
config: sanitize(projectConfig),
selections: sanitize(projectSelections),