diff --git a/front/Navigation.tsx b/front/Navigation.tsx
index 70107a6..2081c00 100644
--- a/front/Navigation.tsx
+++ b/front/Navigation.tsx
@@ -39,10 +39,15 @@ const removeMe = () => '';
const protectedRoutes = () =>
({
Home: {
- component: TabNavigation,
- options: { title: translate('welcome'), headerShown: false },
+ component: HomeView,
+ options: { title: translate('welcome'), headerLeft: null },
link: '/',
},
+ HomeNew: {
+ component: TabNavigation,
+ options: { headerShown: false },
+ link: '/V2',
+ },
Play: { component: PlayView, options: { title: translate('play') }, link: '/play/:songId' },
Settings: {
component: SetttingsNavigator,
diff --git a/front/components/V2/HomeMainSongCard.tsx b/front/components/V2/HomeMainSongCard.tsx
new file mode 100644
index 0000000..6b2fc51
--- /dev/null
+++ b/front/components/V2/HomeMainSongCard.tsx
@@ -0,0 +1,94 @@
+import { Image, View } from 'react-native';
+import { Text, Pressable, PresenceTransition } from 'native-base';
+
+type HomeMainSongCardProps = {
+ image: string;
+ title: string;
+ artist: string;
+ onPress: () => void;
+};
+
+const HomeMainSongCard = (props: HomeMainSongCardProps) => {
+ // on hover darken the image and show the title and artist with fade in
+ return (
+
+ {({ isHovered }) => (
+
+
+
+
+
+ {props.title}
+
+
+ {props.artist}
+
+
+
+
+ )}
+
+ );
+};
+
+HomeMainSongCard.defaultProps = {
+ onPress: () => {},
+};
+
+export default HomeMainSongCard;
diff --git a/front/components/V2/SongCardInfo.tsx b/front/components/V2/SongCardInfo.tsx
new file mode 100644
index 0000000..06cc507
--- /dev/null
+++ b/front/components/V2/SongCardInfo.tsx
@@ -0,0 +1,259 @@
+import Song from '../../models/Song';
+import React from 'react';
+import { Image, View } from 'react-native';
+import { Pressable, Text, PresenceTransition, Icon, Button } from 'native-base';
+import { Ionicons } from '@expo/vector-icons';
+
+type SongCardInfoProps = {
+ song: Song;
+ onPress: () => void;
+ onPlay: () => void;
+};
+
+const CardDims = {
+ height: 200,
+ width: 200,
+};
+
+const Scores = [
+ {
+ icon: 'warning',
+ score: 3,
+ },
+ {
+ icon: 'star',
+ score: -225,
+ },
+ {
+ icon: 'trophy',
+ score: 100,
+ },
+];
+
+const SongCardInfo = (props: SongCardInfoProps) => {
+ const [isPlayHovered, setIsPlayHovered] = React.useState(false);
+ const [isHovered, setIsHovered] = React.useState(false);
+ const [isSlided, setIsSlided] = React.useState(false);
+
+ return (
+
+ {
+ setIsHovered(true);
+ }}
+ onHoverOut={() => {
+ setIsHovered(false);
+ setIsSlided(false);
+ }}
+ >
+ <>
+
+
+ {Scores.map((score, idx) => (
+
+
+
+ {score.score}
+
+
+ ))}
+
+
+ {
+ if (isHovered) {
+ setIsSlided(true);
+ }
+ }}
+ >
+
+
+
+
+
+ {props.song.name}
+
+
+ {props.song.artistId}
+
+
+
+
+
+
+ {/* icon bu=outon appear in the middle of the card after the first presencetransition is done */}
+
+
+
+
+
+
+
+ );
+};
+
+SongCardInfo.defaultProps = {
+ onPress: () => {},
+ onPlay: () => {},
+};
+
+export default SongCardInfo;
diff --git a/front/components/V2/TabNavigation.tsx b/front/components/V2/TabNavigation.tsx
index 6a3c724..3cdb6bc 100644
--- a/front/components/V2/TabNavigation.tsx
+++ b/front/components/V2/TabNavigation.tsx
@@ -66,6 +66,7 @@ const TabNavigation = () => {
const child = ;
const appTabs = tabs.map((t) => {
+ // use the same instance of a component between desktop and mobile
return {
...t,
onPress: () => setActiveTab(t.id),
@@ -94,7 +95,20 @@ const TabNavigation = () => {
activeTabID={activeTab}
setActiveTabID={setActiveTab}
>
- {child}
+
+ {child}
+
) : (
{
isCollapsed={isDesktopCollapsed}
setIsCollapsed={setIsDesktopCollapsed}
>
- {child}
+
+ {child}
+
)}
diff --git a/front/components/V2/TabNavigationDesktop.tsx b/front/components/V2/TabNavigationDesktop.tsx
index 2fe80c7..e903576 100644
--- a/front/components/V2/TabNavigationDesktop.tsx
+++ b/front/components/V2/TabNavigationDesktop.tsx
@@ -1,5 +1,5 @@
import { View, Image } from 'react-native';
-import { Divider, Text, Center } from 'native-base';
+import { Divider, Text, Center, ScrollView } from 'native-base';
import TabNavigationButton from './TabNavigationButton';
import TabNavigationList from './TabNavigationList';
import { useAssets } from 'expo-asset';
@@ -140,10 +140,14 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
- {props.children}
+
+ {props.children}
+
);
};
diff --git a/front/components/V2/TabNavigationPhone.tsx b/front/components/V2/TabNavigationPhone.tsx
index 16485e1..85f2161 100644
--- a/front/components/V2/TabNavigationPhone.tsx
+++ b/front/components/V2/TabNavigationPhone.tsx
@@ -1,5 +1,5 @@
import { View } from 'react-native';
-import { Text, Center } from 'native-base';
+import { Center, ScrollView } from 'native-base';
import TabNavigationButton from './TabNavigationButton';
import { NaviTab } from './TabNavigation';
@@ -55,10 +55,14 @@ const TabNavigationPhone = (props: TabNavigationPhoneProps) => {
- {props.children}
+
+ {props.children}
+
);
};
diff --git a/front/views/HomeView.tsx b/front/views/HomeView.tsx
index 131b74f..abfb414 100644
--- a/front/views/HomeView.tsx
+++ b/front/views/HomeView.tsx
@@ -136,6 +136,12 @@ const HomeView = () => {
size="sm"
onPress={() => navigation.navigate('Settings')}
/>
+ navigation.navigate('HomeNew')}
+ />
diff --git a/front/views/V2/HomeView.tsx b/front/views/V2/HomeView.tsx
index c5441f8..da00538 100644
--- a/front/views/V2/HomeView.tsx
+++ b/front/views/V2/HomeView.tsx
@@ -1,11 +1,48 @@
-import { View, Image } from 'react-native';
-import { Text } from 'native-base';
+import { View } from 'react-native';
+import { Text, useBreakpointValue } from 'native-base';
import React from 'react';
+import { useQuery } from '../../Queries';
+import HomeMainSongCard from '../../components/V2/HomeMainSongCard';
+import SongCardInfo from '../../components/V2/SongCardInfo';
+import API from '../../API';
-const bigSideRatio = 100;
-const smallSideRatio = 61;
+const bigSideRatio = 1000;
+const smallSideRatio = 618;
+
+type HomeCardProps = {
+ image: string;
+ title: string;
+ artist: string;
+};
+
+const cards = [
+ {
+ image: 'https://media.discordapp.net/attachments/717080637038788731/1153688155292180560/image_homeview1.png',
+ title: 'Beethoven',
+ artist: 'Synphony No. 9',
+ },
+ {
+ image: 'https://media.discordapp.net/attachments/717080637038788731/1153688154923090093/image_homeview2.png',
+ title: 'Mozart',
+ artist: 'Lieder Kantate KV 619',
+ },
+ {
+ image: 'https://media.discordapp.net/attachments/717080637038788731/1153688154499457096/image_homeview3.png',
+ title: 'Back',
+ artist: 'Truc Truc',
+ },
+ {
+ image: 'https://media.discordapp.net/attachments/717080637038788731/1153688154109394985/image_homeview4.png',
+ title: 'Mozart',
+ artist: 'Machin Machin',
+ },
+] as [HomeCardProps, HomeCardProps, HomeCardProps, HomeCardProps];
const HomeView = () => {
+ const songsQuery = useQuery(API.getSongSuggestions);
+ const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
+ const isPhone = screenSize === 'small';
+
return (
{
flexDirection: 'column',
}}
>
-
+
{
flexGrow: bigSideRatio,
}}
>
-
+
{
flexGrow: bigSideRatio,
}}
>
-
+
{
flexGrow: bigSideRatio,
}}
>
-
+
-
+
- More
-
+ >
@@ -137,7 +135,39 @@ const HomeView = () => {
width: '100%',
}}
>
- Footer
+
+ {'Suggestions'}
+
+ {songsQuery.isLoading && Loading...}
+
+ {songsQuery.data?.map((song) => (
+ {
+ console.log('SongCardInfo pressed');
+ }}
+ />
+ ))}
+
);