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

comments

Browse Source
This commit is contained in:
leon-morival
2025-09-03 14:55:01 +02:00
parent 2b24900e0c
commit 64fd988d2f
9 changed files with 187 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/icons/chatBubble.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

src/assets/index.js
+53 -55
View File
@@ -1,52 +1,52 @@
import home from "./UI/tabs/home.png";
import tasks from "./UI/tabs/tasks.png";
import chat from "./UI/tabs/chat.png";
import design from "./UI/tabs/design.png";
import quotes from "./UI/tabs/quotes.png";
import settings from "./UI/tabs/settings.png";
import addTab from "./UI/tabs/add.png";
import albums from "./UI/tabs/albums.png";
import ribbon from "./UI/tabs/ribbon.png";
import chat from "./UI/tabs/chat.png";
import design from "./UI/tabs/design.png";
import home from "./UI/tabs/home.png";
import mic from "./UI/tabs/mic.png";
import person from "./UI/tabs/person.png";
import quotes from "./UI/tabs/quotes.png";
import ribbon from "./UI/tabs/ribbon.png";
import settings from "./UI/tabs/settings.png";
import tasks from "./UI/tabs/tasks.png";
import bell from "./UI/bell.png";
import sort from "./UI/sort.png";
import chevronDown from "./UI/chevronDown.png";
import arrowRight from "./UI/arrowRight.png";
import chevronDown from "./UI/chevronDown.png";
import threeDots from "./UI/threeDots.png";
import thumbUp from "./UI/thumbUp.png";
import thumbDown from "./UI/thumbDown.png";
import thumbUp from "./UI/thumbUp.png";
import add from "./UI/add.png";
import search from "./UI/search.png";
import addFile from "./UI/addFile.png";
import send from "./UI/send.png";
import eye from "./UI/eye.png";
import edit from "./UI/edit.png";
import trash from "./UI/trash.png";
import message from "./UI/message.png";
import check from "./UI/check.png";
import checkCircle from "./UI/checkCircle.png";
import undo from "./UI/undo.png";
import shoppingBag from "./UI/shoppingBag.png";
import lock from "./UI/lock.png";
import deliveryTime from "./UI/deliveryTime.png";
import edit from "./UI/edit.png";
import eye from "./UI/eye.png";
import lock from "./UI/lock.png";
import message from "./UI/message.png";
import search from "./UI/search.png";
import send from "./UI/send.png";
import shoppingBag from "./UI/shoppingBag.png";
import tools from "./UI/tools.png";
import trash from "./UI/trash.png";
import undo from "./UI/undo.png";
import focus from "./UI/focus.png";
import picture from "./UI/picture.png";
import screenshot from "./UI/screenshot.png";
import focus from "./UI/focus.png";
import android from "./UI/android.png";
import ios from "./UI/ios.png";
import web from "./UI/web.png";
import user from "./UI/user.png";
import law from "./UI/law.png";
import support from "./UI/support.png";
import user from "./UI/user.png";
import attachment from "./UI/attachment.png";
@@ -54,65 +54,63 @@ import cloud from "./icons/cloud.png";
import dashboard from "./icons/dashboard.png";
import file from "./icons/file.png";
import figma from "./icons/figma.png";
import gitlab from "./icons/gitlab.png";
import circle from "./art/circle.png";
import gradientTriangle from "./art/gradientTriangle.png";
import square from "./art/square.png";
import triangle from "./art/triangle.png";
import algolia from "./icons/algolia.png";
import play from "./icons/play.png";
import disk from "./icons/disk.png";
import stars from "./icons/stars.png";
import musicLandLogo from "./icons/musicLandLogo.png";
import calendar from "./icons/calendar.png";
import chatBubble from "./icons/chatBubble.png";
import close from "./icons/close.png";
import coin from "./icons/coin.png";
import disk from "./icons/disk.png";
import figma from "./icons/figma.png";
import forward from "./icons/forward.png";
import gitlab from "./icons/gitlab.png";
import heart from "./icons/heart.png";
import heartOutline from "./icons/heartOutline.png";
import more from "./icons/more.png";
import forward from "./icons/forward.png";
import pause from "./icons/pause.png";
import share from "./icons/share.png";
import hitParadeLogo from "./icons/hitParadeLogo.png";
import calendar from "./icons/calendar.png";
import coin from "./icons/coin.png";
import more from "./icons/more.png";
import musicLandLogo from "./icons/musicLandLogo.png";
import pause from "./icons/pause.png";
import play from "./icons/play.png";
import share from "./icons/share.png";
import stars from "./icons/stars.png";
import triangle from "./art/triangle.png";
import circle from "./art/circle.png";
import square from "./art/square.png";
import gradientTriangle from "./art/gradientTriangle.png";
import threeCoins from "./art/threeCoins.png";
import boost from "./art/boost.png";
import boostBig from "./art/boostBig.png";
import threeCoins from "./art/threeCoins.png";
import welcome from "./tutorial/welcome.png";
import tutorialChat from "./tutorial/chat.png";
import coins from "./tutorial/coins.png";
import followProgress from "./tutorial/followProgress.png";
import tutorialTasks from "./tutorial/tasks.png";
import welcome from "./tutorial/welcome.png";
import loginAppDashboard from "./mockups/loginAppDashboard.png";
import writingBG from "./UI/writingBG.png";
import studioBG from "./UI/studioBG.png";
import studioBG2 from "./UI/studioBG2.png";
import productionBG from "./UI/productionBG.png";
import productionBG2 from "./UI/productionBG2.png";
import playbackBG from "./UI/playbackBG.png";
import playbackBG2 from "./UI/playbackBG2.png";
import libraryBG from "./UI/libraryBG.png";
import libraryBG2 from "./UI/libraryBG2.png";
import profileBG from "./UI/profileBG.png";
import hitParadeBG from "./UI/hitParadeBG.png";
import homeBG from "./UI/homeBG.png";
import libraryBG from "./UI/libraryBG.png";
import libraryBG2 from "./UI/libraryBG2.png";
import playbackBG from "./UI/playbackBG.png";
import playbackBG2 from "./UI/playbackBG2.png";
import productionBG from "./UI/productionBG.png";
import productionBG2 from "./UI/productionBG2.png";
import profileBG from "./UI/profileBG.png";
import studioBG from "./UI/studioBG.png";
import studioBG2 from "./UI/studioBG2.png";
import writingBG from "./UI/writingBG.png";
import nathalie from "./UI/nathalie.png";
import theo from "./UI/theo.png";
import bena from "./UI/bena.png";
import john from "./UI/john.png";
import nathalie from "./UI/nathalie.png";
import theo from "./UI/theo.png";
import goodVibe from "./UI/goodVibe.png";
import placeholder from "./UI/placeholder.jpg";
import placeholder2 from "./UI/placeholder2.jpg";
import placeholder3 from "./UI/placeholder3.png";
import placeholder4 from "./UI/placeholder4.jpg";
import profile from "./UI/profile.jpg";
import goodVibe from "./UI/goodVibe.png";
export const tabs = {
home,
@@ -139,7 +137,7 @@ export const icons = {
thumbUp,
thumbDown,
chatBubble,
add,
search,
addFile,
src/components/AppActionSheet.js
+4 -4
View File
@@ -1,9 +1,9 @@
import { View, Text, Platform } from "react-native";
import React from "react";
import ActionSheet from "react-native-actions-sheet";
import { gutters, Palette } from "../styles";
import { BlurView } from "expo-blur";
import React from "react";
import { Platform } from "react-native";
import ActionSheet from "react-native-actions-sheet";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { gutters, Palette } from "../styles";
const AppActionSheet = ({ children, props }) => {
const insets = useSafeAreaInsets();
src/components/modal/CommentsModal.js → src/components/bottomsheets/CommentsBottomSheet.js
+118 -35
View File
@@ -1,5 +1,18 @@
// CommentsBottomSheet.jsx
import {
BottomSheetBackdrop,
BottomSheetModal,
BottomSheetScrollView,
} from "@gorhom/bottom-sheet";
import { BlurView } from "expo-blur";
import React, { useMemo, useState } from "react";
import { Image as ExpoImage } from "expo-image";
import React, {
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from "react";
import {
Image,
Platform,
@@ -8,6 +21,7 @@ import {
TextInput,
View,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { icons } from "../../assets";
import { projectsRef, serverTimestamp } from "../../config/firebase";
import useDataFromRef from "../../hooks/useDataFromRef";
@@ -15,7 +29,11 @@ import { useUser } from "../../providers/UserDataProvider";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { size } from "../../styles/Style";
import AppActionSheet from "../AppActionSheet";
let externalOpen;
export const openComments = (projectId) => {
if (typeof externalOpen === "function") externalOpen(projectId);
};
const formatRelativeTime = (date) => {
try {
@@ -35,10 +53,26 @@ const formatRelativeTime = (date) => {
}
};
const CommentsModal = ({ sheetId, payload }) => {
const projectId = payload?.projectId || null;
const CommentsBottomSheet = () => {
const modalRef = useRef(null);
const insets = useSafeAreaInsets();
const { currentUID, currentUserData } = useUser();
const [projectId, setProjectId] = useState(null);
const [text, setText] = useState("");
const [typing, setTyping] = useState(false);
useEffect(() => {
externalOpen = (pid) => {
setProjectId(pid || null);
requestAnimationFrame(() => modalRef.current?.present());
};
return () => {
externalOpen = undefined;
};
}, []);
const snapPoints = useMemo(() => ["50%", "90%"], []);
const commentsRef = useMemo(() => {
try {
@@ -48,7 +82,7 @@ const CommentsModal = ({ sheetId, payload }) => {
.collection("comments")
.orderBy("createdAt", "desc")
: null;
} catch (e) {
} catch {
return null;
}
}, [projectId]);
@@ -66,38 +100,84 @@ const CommentsModal = ({ sheetId, payload }) => {
if (!value || !projectId || !currentUID) return;
try {
setText("");
const docRef = projectsRef.doc(projectId).collection("comments");
await docRef.add({
userId: currentUID,
userName: currentUserData?.userName || "",
profilePicture: currentUserData?.profilePictureURL || "",
text: value,
createdAt: serverTimestamp(),
});
} catch (e) {
// Ignore
await projectsRef
.doc(projectId)
.collection("comments")
.add({
userId: currentUID,
userName: currentUserData?.userName || "",
profilePicture: currentUserData?.profilePictureURL || "",
text: value,
createdAt: serverTimestamp(),
});
} catch {
// ignore
}
};
const renderBackdrop = useCallback(
(props) => (
<BottomSheetBackdrop
{...props}
appearsOnIndex={0}
disappearsOnIndex={-1}
pressBehavior={typing ? "none" : "close"}
/>
),
[typing]
);
return (
<AppActionSheet id="Comments" props={{ gestureEnabled: true }}>
<View style={{ gap: 14 }}>
<Text
style={{
fontSize: 22,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
alignSelf: "center",
<BottomSheetModal
ref={modalRef}
snapPoints={snapPoints}
keyboardBehavior="interactive" // l’input est dans le contenu → mode interactif OK
keyboardBlurBehavior="restore"
enablePanDownToClose={!typing} // évite un dismiss pendant la frappe
enableContentPanningGesture={!typing}
stackBehavior="push"
topInset={insets.top}
bottomInset={insets.bottom}
backdropComponent={renderBackdrop}
handleIndicatorStyle={{ backgroundColor: Palette.white }}
backgroundStyle={{ backgroundColor: "transparent" }}
>
<BlurView
intensity={20}
style={{ flex: 1, backgroundColor: Palette.glass }}
experimentalBlurMethod={
Platform.OS !== "ios" ? "dimezisBlurView" : "none"
}
>
<View style={{ paddingTop: 10, paddingBottom: 8 }}>
<Text
style={{
fontSize: 22,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
alignSelf: "center",
}}
>
Commentaires
</Text>
</View>
<BottomSheetScrollView
keyboardShouldPersistTaps="handled"
contentContainerStyle={{
paddingHorizontal: 14,
paddingBottom: (insets?.bottom || 0) + 12,
}}
showsVerticalScrollIndicator
>
Commentaires
</Text>
<View style={{ gap: 14, maxHeight: 400 }}>
{Array.isArray(comments) && comments.length > 0 ? (
comments.map((c) => (
<View key={c.id} style={{ flexDirection: "row", gap: 12 }}>
<View
key={c.id}
style={{ flexDirection: "row", gap: 12, marginBottom: 14 }}
>
{c?.profilePicture ? (
<Image
<ExpoImage
source={{ uri: c.profilePicture }}
cachePolicy="memory-disk"
priority="high"
@@ -168,9 +248,9 @@ const CommentsModal = ({ sheetId, payload }) => {
Aucun commentaire pour le moment
</Text>
)}
</View>
<View style={{ marginTop: 6 }}>
{/* INPUT en bas du contenu */}
<View style={{ height: 12 }} />
<BlurView
intensity={20}
style={{
@@ -179,9 +259,9 @@ const CommentsModal = ({ sheetId, payload }) => {
gap: 10,
paddingHorizontal: 16,
backgroundColor: Palette.glass,
borderRadius: 16,
overflow: "hidden",
height: 54,
borderRadius: 16,
}}
experimentalBlurMethod={
Platform.OS !== "ios" ? "dimezisBlurView" : "none"
@@ -192,6 +272,8 @@ const CommentsModal = ({ sheetId, payload }) => {
placeholderTextColor="#FFFFFFAA"
value={text}
onChangeText={setText}
onFocus={() => setTyping(true)}
onBlur={() => setTyping(false)}
style={{
flex: 1,
color: Palette.white,
@@ -207,10 +289,11 @@ const CommentsModal = ({ sheetId, payload }) => {
/>
</Pressable>
</BlurView>
</View>
</View>
</AppActionSheet>
<View style={{ height: (insets?.bottom || 0) + 8 }} />
</BottomSheetScrollView>
</BlurView>
</BottomSheetModal>
);
};
export default CommentsModal;
export default CommentsBottomSheet;
src/providers/SharedProviders.js
+2
View File
@@ -1,6 +1,7 @@
import React from "react";
import { ActionSheetProvider } from "@expo/react-native-action-sheet";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
import UserDataProvider from "./UserDataProvider";
import WebViewProvider from "./WebViewProvider";
@@ -18,6 +19,7 @@ const SharedProviders = ({ children }) => {
[UserDataProvider, {}],
[StripeEmbeddedProvider, {}],
[UniversalLinkProvider, {}],
[BottomSheetModalProvider, {}],
[SheetProvider, {}],
];
src/screens/Playbacks.js
+3 -9
View File
@@ -10,10 +10,10 @@ import React, {
useState,
} from "react";
import { Image, Platform, Pressable, Text, View } from "react-native";
import { SheetManager } from "react-native-actions-sheet";
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,
@@ -355,16 +355,10 @@ const PlaybackItem = ({ item, isActive, userCache, getUserByUid }) => {
)}
</Pressable>
<Pressable
onPress={() => {
if (item?.id) {
SheetManager.show("Comments", {
payload: { projectId: item.id },
});
}
}}
onPress={() => item?.id && openComments(item.id)}
style={{ alignItems: "center" }}
>
<Image source={icons.message} style={size({ size: 26 })} />
<Image source={icons.chatBubble} style={size({ size: 26 })} />
</Pressable>
<Pressable>
<Image source={icons.share} style={size({ size: 26 })} />
src/utils/Sheet.js
-2
View File
@@ -5,7 +5,6 @@ import DeleteAccountModal from "../components/modal/DeleteAccountModal";
import DeletePlaybackModal from "../components/modal/DeletePlaybackModal";
import DeleteAudioModal from "../components/modal/DeleteAudioModal";
import PlaylistModal from "../components/modal/PlaylistModal";
import CommentsModal from "../components/modal/CommentsModal";
registerSheet("Delete", DeleteModal);
registerSheet("ProfileSettings", ProfileSettingsModal);
@@ -13,6 +12,5 @@ registerSheet("DeleteAccount", DeleteAccountModal);
registerSheet("DeletePlayback", DeletePlaybackModal);
registerSheet("DeleteAudio", DeleteAudioModal);
registerSheet("Playlist", PlaylistModal);
registerSheet("Comments", CommentsModal);
export {};