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

update

Browse Source
This commit is contained in:
Philip Cesar Garay
2025-08-18 15:34:56 +08:00
parent a8ebe8bcc3
commit 5fd72ba2c0
5 changed files with 219 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AppCheckbox.js
+48
View File
@@ -0,0 +1,48 @@
import { View, Text, Pressable } from "react-native";
import React from "react";
import { Palette, Style } from "../styles";
import { size } from "../styles/Style";
import { FONT_FAMILY } from "../styles/Fonts";
const AppCheckbox = ({ onPress, selected, label }) => {
return (
<Pressable
style={{
...Style.containerRow,
gap: 6,
}}
onPress={onPress}
>
<View
style={{
...size({ size: 17 }),
...Style.containerCenter,
borderWidth: 1,
borderRadius: 100,
borderColor: Palette.white,
}}
>
{selected && (
<View
style={{
...size({ size: 9 }),
borderRadius: 100,
backgroundColor: Palette.white,
}}
/>
)}
</View>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
}}
>
{label}
</Text>
</Pressable>
);
};
export default AppCheckbox;
src/components/modal/PlaylistModal.js
+163
View File
@@ -0,0 +1,163 @@
import {
View,
Text,
FlatList,
Pressable,
Image,
Dimensions,
TextInput,
} from "react-native";
import React, { useRef, useState } from "react";
import AppActionSheet from "../AppActionSheet";
import AppCheckbox from "../AppCheckbox";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { icons } from "../../assets";
import Style, { size } from "../../styles/Style";
import SwiperFlatList from "react-native-swiper-flatlist";
import GradientButton from "../GradientButton";
import { SheetManager } from "react-native-actions-sheet";
const PLAYLIST = ["Ménage", "Voiture", "Roadtrip"];
const { width } = Dimensions.get("window");
const PlaylistModal = () => {
const scrollRef = useRef(null);
const [selected, setSelected] = useState("");
const [playlist, setPlaylist] = useState("");
return (
<AppActionSheet id="Playlist">
<SwiperFlatList
style={{ width, left: -14 }}
ref={scrollRef}
disableGesture
>
<View style={{ width, paddingHorizontal: 14 }}>
<View style={{ gap: 20 }}>
<Text
style={{
fontSize: 22,
color: Palette.white,
fontFamily: FONT_FAMILY.InterSemiBold,
textAlign: "center",
}}
>
Ajouter ce titre à une playlist
</Text>
<FlatList
data={PLAYLIST}
contentContainerStyle={{ gap: 20 }}
ListHeaderComponent={
<Pressable
style={{
...Style.containerRow,
gap: 10,
}}
onPress={() =>
scrollRef.current.scrollToIndex({
index: 1,
animated: true,
})
}
>
<Image source={icons.add} style={size({ size: 15 })} />
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
}}
>
Créer une nouvelle playlist
</Text>
</Pressable>
}
renderItem={({ item }) => (
<AppCheckbox
label={item}
onPress={() => setSelected(item)}
selected={selected === item}
/>
)}
/>
<GradientButton
title="Valider"
containerStyle={{
width: "80%",
alignSelf: "center",
}}
onPress={() => SheetManager.hide("Playlist")}
/>
</View>
</View>
<View style={{ width, paddingHorizontal: 14 }}>
<View style={{ gap: 20 }}>
<Pressable
onPress={() => {
scrollRef.current.scrollToIndex({
index: 0,
animated: true,
});
setPlaylist("");
}}
>
<Text
style={{
fontSize: 12,
color: Palette.gray,
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
}}
>
Annuler
</Text>
</Pressable>
<View style={{ ...Style.containerCenter, gap: 14 }}>
<Text
style={{
fontSize: 20,
color: Palette.white,
fontFamily: FONT_FAMILY.HelveticaNeueMedium,
}}
>
Nommer la playlist
</Text>
<TextInput
style={{
paddingVertical: 6,
borderBottomWidth: 1,
borderColor: Palette.white,
fontSize: 20,
color: Palette.white,
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
minWidth: "30%",
maxWidth: "80%",
}}
value={playlist}
onChangeText={setPlaylist}
textAlign="center"
/>
</View>
<GradientButton
title="Créer la playlist"
containerStyle={{
width: "80%",
alignSelf: "center",
}}
onPress={() => {
scrollRef.current.scrollToIndex({
index: 0,
animated: true,
});
setPlaylist("");
}}
/>
</View>
</View>
</SwiperFlatList>
</AppActionSheet>
);
};
export default PlaylistModal;
src/screens/Library/MusicDetails.js
+1 -1
View File
@@ -62,7 +62,7 @@ const MusicDetails = () => {
resizeMode="contain"
/>
</Pressable>
<Pressable>
<Pressable onPress={() => SheetManager.show("Playlist")}>
<Image
source={icons.check}
style={{ ...size({ size: 24 }) }}
src/screens/Profile/Language.js
+4 -34
View File
@@ -7,6 +7,7 @@ import { responsiveHeight } from "react-native-responsive-dimensions";
import { BlurView } from "expo-blur";
import { FONT_FAMILY } from "../../styles/Fonts";
import Style, { size } from "../../styles/Style";
import AppCheckbox from "../../components/AppCheckbox";
const LANGUAGE = ["Anglais", "Français", "Chinois", "Japonais", "Coreen"];
@@ -48,43 +49,12 @@ const Language = () => {
</Text>
<View style={{ gap: 12 }}>
{LANGUAGE.map((item, index) => (
<Pressable
<AppCheckbox
key={index}
style={{
...Style.containerRow,
gap: 6,
}}
label={item}
onPress={() => setSelected(item)}
>
<View
style={{
...size({ size: 17 }),
...Style.containerCenter,
borderWidth: 1,
borderRadius: 100,
borderColor: Palette.white,
}}
>
{selected === item && (
<View
style={{
...size({ size: 9 }),
borderRadius: 100,
backgroundColor: Palette.white,
}}
selected={selected === item}
/>
)}
</View>
<Text
style={{
fontSize: 16,
color: Palette.white,
fontFamily: FONT_FAMILY.HelveticaNeueRegular,
}}
>
{item}
</Text>
</Pressable>
))}
</View>
</BlurView>
src/utils/Sheet.js
+2
View File
@@ -4,11 +4,13 @@ import ProfileSettingsModal from "../components/modal/ProfileSettingsModal";
import DeleteAccountModal from "../components/modal/DeleteAccountModal";
import DeletePlaybackModal from "../components/modal/DeletePlaybackModal";
import DeleteAudioModal from "../components/modal/DeleteAudioModal";
import PlaylistModal from "../components/modal/PlaylistModal";
registerSheet("Delete", DeleteModal);
registerSheet("ProfileSettings", ProfileSettingsModal);
registerSheet("DeleteAccount", DeleteAccountModal);
registerSheet("DeletePlayback", DeletePlaybackModal);
registerSheet("DeleteAudio", DeleteAudioModal);
registerSheet("Playlist", PlaylistModal);
export {};