diff --git a/App.js b/App.js index ff2c10d..b230f2d 100644 --- a/App.js +++ b/App.js @@ -21,6 +21,7 @@ import { Palette } from "./src/styles"; import { navigationRef, reset } from "./src/navigation/NavigationService"; import initialGlobalState from "./src/config/initialGlobalState"; +import { MenuProvider } from 'react-native-popup-menu'; import firebase from "./src/config/firebase"; import Providers from "./src/providers"; @@ -117,26 +118,28 @@ const App = () => { > - - - options?.title - ? `${options?.title} - minuit.starter` - : "minuit.starter", - }} - > - - - + + + + options?.title + ? `${options?.title} - minuit.starter` + : "minuit.starter", + }} + > + + + + diff --git a/package.json b/package.json index 26fc6e6..4e00061 100644 --- a/package.json +++ b/package.json @@ -75,6 +75,7 @@ "react-native-keyboard-aware-scroll-view": "^0.9.5", "react-native-linear-gradient": "^2.8.3", "react-native-minuit": "^1.3.52", + "react-native-popup-menu": "^0.18.0", "react-native-reanimated": "~3.16.1", "react-native-reanimated-carousel": "^4.0.3", "react-native-responsive-dimensions": "^3.1.1", diff --git a/src/assets/UI/check.png b/src/assets/UI/check.png index 457ef91..f100b4b 100644 Binary files a/src/assets/UI/check.png and b/src/assets/UI/check.png differ diff --git a/src/assets/UI/libraryBG2.png b/src/assets/UI/libraryBG2.png new file mode 100644 index 0000000..343838d Binary files /dev/null and b/src/assets/UI/libraryBG2.png differ diff --git a/src/assets/UI/placeholder4.jpg b/src/assets/UI/placeholder4.jpg new file mode 100644 index 0000000..3fccb18 Binary files /dev/null and b/src/assets/UI/placeholder4.jpg differ diff --git a/src/assets/UI/profile.jpg b/src/assets/UI/profile.jpg new file mode 100644 index 0000000..4fc069c Binary files /dev/null and b/src/assets/UI/profile.jpg differ diff --git a/src/assets/UI/profileBG.png b/src/assets/UI/profileBG.png new file mode 100644 index 0000000..c255182 Binary files /dev/null and b/src/assets/UI/profileBG.png differ diff --git a/src/assets/icons/forward.png b/src/assets/icons/forward.png new file mode 100644 index 0000000..d9ff62d Binary files /dev/null and b/src/assets/icons/forward.png differ diff --git a/src/assets/icons/pause.png b/src/assets/icons/pause.png new file mode 100644 index 0000000..20d84fc Binary files /dev/null and b/src/assets/icons/pause.png differ diff --git a/src/assets/index.js b/src/assets/index.js index 91d1b3b..9e8c0b4 100644 --- a/src/assets/index.js +++ b/src/assets/index.js @@ -79,6 +79,8 @@ import close from "./icons/close.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"; export const icons = { bell, @@ -135,6 +137,8 @@ export const icons = { heart, heartOutline, more, + forward, + pause, }; import triangle from "./art/triangle.png"; @@ -186,6 +190,8 @@ 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"; export const background = { writingBG, @@ -196,6 +202,8 @@ export const background = { playbackBG, playbackBG2, libraryBG, + libraryBG2, + profileBG, }; import nathalie from "./UI/nathalie.png"; @@ -213,9 +221,13 @@ export const ai = { 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"; export const img = { placeholder, placeholder2, placeholder3, + placeholder4, + profile, }; diff --git a/src/components/NavigateHeader.js b/src/components/NavigateHeader.js index 015343e..d3213a4 100644 --- a/src/components/NavigateHeader.js +++ b/src/components/NavigateHeader.js @@ -2,14 +2,16 @@ import { Image, Pressable, View } from "react-native"; import { Motion } from "@legendapp/motion"; import { icons } from "../assets"; -import { Fonts, gutters, Style } from "../styles"; +import { Fonts, gutters, Palette, Style } from "../styles"; import { goBack } from "../navigation/NavigationService"; +import { FONT_FAMILY } from "../styles/Fonts"; export default ({ title = "", rightComponent = null, onBackPressed = null, containerStyle = {}, + headerTitleStyle = {}, }) => { return ( - onBackPressed?.() || goBack()}> - - + + onBackPressed?.() || goBack()}> + + + - {typeof title === "function" ? ( - title() - ) : title?.length > 0 ? ( - 15 - ? Fonts({ type: "section" }).fontSize - : Fonts({ type: "navigationTitle" }).fontSize, - }, - })} - > - {title} - - ) : null} + + {title} + - {rightComponent?.() || null} + + {rightComponent?.() || null} + ); }; diff --git a/src/components/SearchBar.js b/src/components/SearchBar.js index 745ed43..1db299c 100644 --- a/src/components/SearchBar.js +++ b/src/components/SearchBar.js @@ -6,7 +6,10 @@ import Style, { size } from "../styles/Style"; import { Palette } from "../styles"; import { FONT_FAMILY } from "../styles/Fonts"; -const SearchBar = ({ placeholder = "Que souhaites-tu écouter?" }) => { +const SearchBar = ({ + placeholder = "Que souhaites-tu écouter?", + textInputProps = {}, +}) => { return ( { fontFamily: FONT_FAMILY.HelveticaNeueRegular, flex: 1, }} + {...textInputProps} /> diff --git a/src/layouts/Page.js b/src/layouts/Page.js index dd355f0..eaad328 100644 --- a/src/layouts/Page.js +++ b/src/layouts/Page.js @@ -35,6 +35,7 @@ export default ({ onBackPressed = null, backgroundImg = background.writingBG, + headerTitleStyle = {}, }) => { const { currentUID } = useUserData(); @@ -76,15 +77,10 @@ export default ({ ) : ( 50 - ? title - : "" - } + title={title} rightComponent={rightComponent} onBackPressed={onBackPressed} + headerTitleStyle={headerTitleStyle} /> ) ) : null} @@ -103,20 +99,6 @@ export default ({ } : {})} > - {scrollEnabled && typeof title === "string" && title.length > 0 && ( - - {title} - - )} {children} diff --git a/src/navigation/MainStack.js b/src/navigation/MainStack.js index 98dd45c..d7447cf 100644 --- a/src/navigation/MainStack.js +++ b/src/navigation/MainStack.js @@ -45,6 +45,12 @@ import RecordedPlayback from "../screens/Playback/RecordedPlayback"; import ChooseDecor from "../screens/Playback/ChooseDecor"; import CreatingDecor from "../screens/Playback/CreatingDecor"; import VideoFinalize from "../screens/Playback/VideoFinalize"; +import AllMyMusic from "../screens/Library/AllMyMusic"; +import AllMyPlaylist from "../screens/Library/AllMyPlaylist"; +import AllMyLikedMusic from "../screens/Library/AllMyLikedMusic"; +import Research from "../screens/Library/Research"; +import MusicDetails from "../screens/Library/MusicDetails"; +import SingerProfile from "../screens/Profile/SingerProfile"; const screenOptions = { headerShown: false, @@ -208,6 +214,30 @@ const screens = [ name: Routes.VideoFinalize, component: VideoFinalize, }, + { + name: Routes.AllMyMusic, + component: AllMyMusic, + }, + { + name: Routes.AllMyPlaylist, + component: AllMyPlaylist, + }, + { + name: Routes.AllMyLikedMusic, + component: AllMyLikedMusic, + }, + { + name: Routes.Research, + component: Research, + }, + { + name: Routes.MusicDetails, + component: MusicDetails, + }, + { + name: Routes.SingerProfile, + component: SingerProfile, + }, ]; export default function Main() { diff --git a/src/navigation/Routes.js b/src/navigation/Routes.js index e5b248c..d2b6724 100644 --- a/src/navigation/Routes.js +++ b/src/navigation/Routes.js @@ -60,6 +60,14 @@ export const Routes = { Create: "Create", HitParade: "HitParade", Playbacks: "Playbacks", + Library: "Library", + AllMyMusic: "AllMyMusic", + AllMyPlaylist: "AllMyPlaylist", + AllMyLikedMusic: "AllMyLikedMusic", + Research: "Research", + MusicDetails: "MusicDetails", + Profile: "Profile", + SingerProfile: "SingerProfile", }; diff --git a/src/screens/Library/AllMyLikedMusic.js b/src/screens/Library/AllMyLikedMusic.js new file mode 100644 index 0000000..4545e4a --- /dev/null +++ b/src/screens/Library/AllMyLikedMusic.js @@ -0,0 +1,27 @@ +import { View, Text } from "react-native"; +import React from "react"; +import Page from "../../layouts/Page"; +import { background } from "../../assets"; +import { gutters } from "../../styles"; +import MusicCard from "./components/MusicCard"; + +const AllMyLikedMusic = () => { + return ( + + + + {Array.from({ length: 3 }).map((_, index) => ( + + ))} + + + + ); +}; + +export default AllMyLikedMusic; diff --git a/src/screens/Library/AllMyMusic.js b/src/screens/Library/AllMyMusic.js new file mode 100644 index 0000000..0ad59d8 --- /dev/null +++ b/src/screens/Library/AllMyMusic.js @@ -0,0 +1,73 @@ +import { View, Text, FlatList, Image, Pressable } from "react-native"; +import React, { useState } from "react"; +import Page from "../../layouts/Page"; +import { background, img } from "../../assets"; +import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader"; +import { gutters, Palette } from "../../styles"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import useLayoutType from "../../hooks/useLayoutType"; + +const AllMyMusic = () => { + const [containerLayout, setContainerLayout] = useState(null); + const { isWeb } = useLayoutType(); + + return ( + + setContainerLayout(e.nativeEvent.layout)} + > + + ( + console.log("PRESSED")} + > + + + Voiture + + + )} + /> + + + + ); +}; + +export default AllMyMusic; diff --git a/src/screens/Library/AllMyPlaylist.js b/src/screens/Library/AllMyPlaylist.js new file mode 100644 index 0000000..a0a27dd --- /dev/null +++ b/src/screens/Library/AllMyPlaylist.js @@ -0,0 +1,65 @@ +import { View, Text, Image, Pressable } from "react-native"; +import React from "react"; +import Page from "../../layouts/Page"; +import { background, icons } from "../../assets"; +import { gutters, Palette, Style } from "../../styles"; +import { BlurView } from "expo-blur"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import { size } from "../../styles/Style"; + +const AllMyPlaylist = () => { + return ( + + + + {[ + "Musiques de lover", + "Musiques triste", + "Happy new year", + "Happy songs", + ].map((item, index) => ( + + + + {item} + + + + + + + ))} + + + + ); +}; + +export default AllMyPlaylist; diff --git a/src/screens/Library/Library.js b/src/screens/Library/Library.js index 6b8a1f5..9652870 100644 --- a/src/screens/Library/Library.js +++ b/src/screens/Library/Library.js @@ -1,4 +1,4 @@ -import { View, Image, ScrollView } from "react-native"; +import { View, Image, ScrollView, Pressable } from "react-native"; import React from "react"; import Page from "../../layouts/Page"; import { background, icons } from "../../assets"; @@ -11,13 +11,21 @@ import LikedPlayback from "./components/LikedPlayback"; import LikedClips from "./components/LikedClips"; import { responsiveHeight } from "react-native-responsive-dimensions"; import MyPlaylist from "./components/MyPlaylist"; +import { navigate } from "../../navigation/NavigationService"; +import { Routes } from "../../navigation"; const Library = () => { return ( - + navigate(Routes.Research)}> + + { + const [fav, setFav] = useState(false); + + return ( + + + + + + + Lust for Life + Lana del Rey + + + setFav(!fav)}> + + + + + + + + + + + + + + + + + + + + + + + + + Description chanson. Viverra enim risus enim enim placerat. Integer + pulvinar tristique suscipit risus. Id hendrerit in odio phasellus + interdum lectus amet + + + Allô{"\n"}Écoute maman est près de toi{"\n"}Il faut lui dire "maman, + c'est quelqu'un pour toi"{"\n"}Ah, c'est le monsieur de la dernière + fois{"\n"}Bon, je vais la chercher{"\n"}Je crois qu'elle est dans + son bain{"\n"}Et je sais pas si elle va pouvoir venir + + + + + ); +}; + +export default MusicDetails; + +const styles = StyleSheet.create({ + img: { + width: 292, + height: 290, + borderRadius: 24, + alignSelf: "center", + }, + title: { + fontSize: 20, + color: Palette.white, + fontFamily: FONT_FAMILY.HelveticaNeueMedium, + }, + name: { + fontSize: 16, + color: Palette.white, + fontFamily: FONT_FAMILY.HelveticaNeueRegular, + }, +}); diff --git a/src/screens/Library/Research.js b/src/screens/Library/Research.js new file mode 100644 index 0000000..0bb6730 --- /dev/null +++ b/src/screens/Library/Research.js @@ -0,0 +1,145 @@ +import { + View, + Text, + StyleSheet, + Pressable, + ScrollView, + Image, +} from "react-native"; +import React, { useState } from "react"; +import Page from "../../layouts/Page"; +import { background, img } from "../../assets"; +import { gutters, Palette, Style } from "../../styles"; +import SearchBar from "../../components/SearchBar"; +import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import BorderGradient from "../../components/BorderGradient/BorderGradient"; +import { BlurView } from "expo-blur"; +import ResearchHeader from "./components/ResearchHeader"; +import MusicCard from "./components/MusicCard"; +import { size } from "../../styles/Style"; +import { navigate } from "../../navigation/NavigationService"; +import { Routes } from "../../navigation"; + +const Research = () => { + const [selected, setSelected] = useState(null); + + const onPressMenu = (item) => { + if (selected === item) { + setSelected(null); + } else { + setSelected(item); + } + }; + + return ( + + + onPressMenu(item)} + selected={selected} + /> + + + {(!selected || selected === "Musiques") && ( + + + + {Array.from({ length: 3 }).map((_, index) => ( + navigate(Routes.MusicDetails)} + /> + ))} + + + + )} + {(!selected || selected === "Clips") && ( + + + + {Array.from({ length: 3 }).map((_, index) => ( + + + + Pour Lili + + + ))} + + + + )} + {(!selected || selected === "Profils") && ( + + + + {Array.from({ length: 2 }).map((_, index) => ( + navigate(Routes.SingerProfile)} + > + + + ReggaetonLil + + + ))} + + + + )} + + + + + ); +}; + +export default Research; diff --git a/src/screens/Library/components/CardContainer.js b/src/screens/Library/components/CardContainer.js index 3a3151a..6ebb9ef 100644 --- a/src/screens/Library/components/CardContainer.js +++ b/src/screens/Library/components/CardContainer.js @@ -3,12 +3,12 @@ import React from "react"; import { Palette, Style } from "../../../styles"; import { FONT_FAMILY } from "../../../styles/Fonts"; -const CardContainer = ({ children, label = "" }) => { +const CardContainer = ({ children, label = "", onPress }) => { return ( {label} - + Voir tout diff --git a/src/screens/Library/components/LikedMusic.js b/src/screens/Library/components/LikedMusic.js index bc39d2f..b4593ae 100644 --- a/src/screens/Library/components/LikedMusic.js +++ b/src/screens/Library/components/LikedMusic.js @@ -3,10 +3,15 @@ import React from "react"; import CardContainer from "./CardContainer"; import { Style } from "../../../styles"; import { img } from "../../../assets"; +import { navigate } from "../../../navigation/NavigationService"; +import { Routes } from "../../../navigation"; const LikedMusic = () => { return ( - + navigate(Routes.AllMyLikedMusic)} + > { +const MusicCard = ({ onPress, onPressMore }) => { const [selected, setSelected] = useState(false); return ( - { resizeMode="contain" /> - + - + ); }; diff --git a/src/screens/Library/components/MyMusic.js b/src/screens/Library/components/MyMusic.js index aec6d26..22f868e 100644 --- a/src/screens/Library/components/MyMusic.js +++ b/src/screens/Library/components/MyMusic.js @@ -2,10 +2,15 @@ import { View } from "react-native"; import React from "react"; import CardContainer from "./CardContainer"; import MusicCard from "./MusicCard"; +import { navigate } from "../../../navigation/NavigationService"; +import { Routes } from "../../../navigation"; const MyMusic = () => { return ( - + navigate(Routes.AllMyMusic)} + > {Array.from({ length: 3 }).map((_, index) => ( diff --git a/src/screens/Library/components/MyPlaylist.js b/src/screens/Library/components/MyPlaylist.js index 0f56038..e2e73ee 100644 --- a/src/screens/Library/components/MyPlaylist.js +++ b/src/screens/Library/components/MyPlaylist.js @@ -6,10 +6,15 @@ import { icons } from "../../../assets"; import Style, { size } from "../../../styles/Style"; import { Palette } from "../../../styles"; import { FONT_FAMILY } from "../../../styles/Fonts"; +import { navigate } from "../../../navigation/NavigationService"; +import { Routes } from "../../../navigation"; const MyPlaylist = () => { return ( - + navigate(Routes.AllMyPlaylist)} + > {["Musiques de lover", "Musiques triste"].map((item, index) => ( diff --git a/src/screens/Library/components/ResearchHeader.js b/src/screens/Library/components/ResearchHeader.js new file mode 100644 index 0000000..19b013a --- /dev/null +++ b/src/screens/Library/components/ResearchHeader.js @@ -0,0 +1,74 @@ +import { View, Text, Pressable, StyleSheet } from "react-native"; +import React from "react"; +import SearchBar from "../../../components/SearchBar"; +import { Palette, Style } from "../../../styles"; +import BorderGradient from "../../../components/BorderGradient/BorderGradient"; +import { BlurView } from "expo-blur"; +import { FONT_FAMILY } from "../../../styles/Fonts"; + +const ResearchHeader = ({ onPress, selected }) => { + return ( + + + + {["Playbacks", "Clips", "Musiques", "Profils"].map((item, index) => ( + onPress(item)}> + + + + {item} + + + + ))} + + + ); +}; + +export default ResearchHeader; + +const styles = StyleSheet.create({ + menu: { + fontSize: 12, + color: Palette.white, + fontFamily: FONT_FAMILY.InterRegular, + }, + borderGradient: { + borderWidth: 1, + borderRadius: 100, + height: 30, + position: "absolute", + zIndex: 1, + width: "100%", + }, + blurContainer: { + height: 30, + zIndex: -1, + borderRadius: 100, + overflow: "hidden", + backgroundColor: Palette.glass, + }, + blurView: { + width: "100%", + height: "100%", + justifyContent: "center", + paddingHorizontal: 10, + }, +}); diff --git a/src/screens/Profile/Profile.js b/src/screens/Profile/Profile.js new file mode 100644 index 0000000..7f40cca --- /dev/null +++ b/src/screens/Profile/Profile.js @@ -0,0 +1,12 @@ +import { View, Text } from "react-native"; +import React from "react"; + +const Profile = () => { + return ( + + Profile + + ); +}; + +export default Profile; diff --git a/src/screens/Profile/SingerProfile.js b/src/screens/Profile/SingerProfile.js new file mode 100644 index 0000000..ffe8385 --- /dev/null +++ b/src/screens/Profile/SingerProfile.js @@ -0,0 +1,218 @@ +import { + View, + Text, + Pressable, + Image, + StyleSheet, + FlatList, +} from "react-native"; +import React, { useState } from "react"; +import Page from "../../layouts/Page"; +import { background, icons, img } from "../../assets"; +import { gutters, Palette } from "../../styles"; +import { BlurView } from "expo-blur"; +import Style, { size } from "../../styles/Style"; +import { responsiveHeight } from "react-native-responsive-dimensions"; +import { FONT_FAMILY } from "../../styles/Fonts"; +import GradientButton from "../../components/GradientButton"; +import BorderGradient from "../../components/BorderGradient/BorderGradient"; +import MusicCard from "../Library/components/MusicCard"; + +const SingerProfile = () => { + const [selected, setSelected] = useState(null); + + const onPressMenu = (item) => { + if (selected === item) { + setSelected(null); + } else { + setSelected(item); + } + }; + + return ( + ( + + + + )} + > + + + + + + + elia.mrn + + + + + 0 + playbacks + + + 880 + abonnés + + + 6 + abonnements + + + + + + + {["Playbacks", "Clips", "Chansons"].map((item, index) => ( + onPressMenu(item)} + style={{ flex: 1 }} + > + + + + {item} + + + + ))} + + {selected === "Playbacks" && ( + + ( + + + + Pour Lili + + + )} + /> + + )} + {selected === "Chansons" && ( + + } + /> + + )} + + + ); +}; + +export default SingerProfile; + +const styles = StyleSheet.create({ + value: { + fontSize: 16, + color: Palette.white, + fontFamily: FONT_FAMILY.InterRegular, + }, + label: { + fontSize: 12, + color: Palette.white, + fontFamily: FONT_FAMILY.InterRegular, + }, + menu: { + fontSize: 12, + color: Palette.white, + fontFamily: FONT_FAMILY.InterRegular, + }, + borderGradient: { + borderWidth: 1, + borderRadius: 10, + height: 33, + position: "absolute", + zIndex: 1, + width: "100%", + }, + blurContainer: { + height: 33, + zIndex: -1, + borderRadius: 10, + overflow: "hidden", + backgroundColor: Palette.glass, + }, + blurView: { + width: "100%", + height: "100%", + paddingHorizontal: 10, + ...Style.containerCenter, + }, +}); diff --git a/src/screens/Writing/components/CreateLyricsHeader.js b/src/screens/Writing/components/CreateLyricsHeader.js index 221e31a..22a2d5d 100644 --- a/src/screens/Writing/components/CreateLyricsHeader.js +++ b/src/screens/Writing/components/CreateLyricsHeader.js @@ -16,6 +16,7 @@ const CreateLyricsHeader = ({ tint = "dark", containerStyle = {}, onPress, + blurViewStyle = {}, }) => { const [onLayout, setOnLayout] = useState(null); const { isWeb } = useLayoutType(); @@ -33,11 +34,12 @@ const CreateLyricsHeader = ({ style={{ height: isWeb ? onLayout?.height + 2 : onLayout?.height, top: isWeb ? -1 : 0, - right: isWeb ? -1 : 0, borderWidth: 1, borderRadius: containerStyle?.borderRadius ?? 18, position: "absolute", - width: "100%", + width: isWeb ? onLayout?.width + 2 : onLayout?.width, + left: -1, + alignSelf: "center", }} /> {title && ( diff --git a/yarn.lock b/yarn.lock index ddf50a1..43b6717 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7402,6 +7402,11 @@ react-native-modalbox@^2.0.2: dependencies: prop-types "^15.5.10" +react-native-popup-menu@^0.18.0: + version "0.18.0" + resolved "https://registry.yarnpkg.com/react-native-popup-menu/-/react-native-popup-menu-0.18.0.tgz#723c4df6b790ee3cc92ae698e7e5844ee1a170f9" + integrity sha512-XD3gyp/hwL5YWw2J034DerfvbJ6S2YHqAzvqAFRU+UGnFD4JyTqggfm4UyynBD26O1PDoRb45Loil+NZCGfCnA== + react-native-reanimated-carousel@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/react-native-reanimated-carousel/-/react-native-reanimated-carousel-4.0.3.tgz#975f4ff3f5da5bb3790fe60850a46ad8119612bc"