zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/adc/#224-genre-view' into feature/adc/#242-liked-songs

Browse Source
This commit is contained in:
danis
2023-09-13 13:23:16 +02:00
parent b43c64962a 46ef0a7f1b
commit c21f5f0659
10 changed files with 313 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
back/src/song/song.service.ts
View File

@@ -6,6 +6,14 @@ import { PrismaService } from 'src/prisma/prisma.service';
export class SongService {
constructor(private prisma: PrismaService) {}
async songByArtist(data: number): Promise<Song[]> {
return this.prisma.song.findMany({
where: {
artistId: {equals: data},
},
});
}
async createSong(data: Prisma.SongCreateInput): Promise<Song> {
return this.prisma.song.create({
data,

53
front/API.ts
View File

@@ -289,6 +289,42 @@ export default class API {
};
}
/**
* @description retrieves songs from a specific artist
* @param artistId is the id of the artist that composed the songs aimed
* @returns a Promise of Songs type array
*/
public static getSongsByArtist(artistId: number): Query<Song[]> {
return {
key: ['artist', artistId, 'songs'],
exec: () =>
API.fetch(
{
route: `/song?artistId=${artistId}`,
},
{ handler: PlageHandler(SongHandler) }
).then(({ data }) => data),
};
}
/**
* Retrieves all songs corresponding to the given genre ID
* @param genreId the id of the genre we're aiming
* @returns a promise of an array of Songs
*/
public static getSongsByGenre(genreId: number): Query<Song[]> {
return {
key: ['genre', genreId, 'songs'],
exec: () =>
API.fetch(
{
route: `/song?genreId=${genreId}`,
},
{ handler: PlageHandler(SongHandler) }
).then(({ data }) => data),
};
}
/**
* Retrive a song's midi partition
* @param songId the id to find the song
@@ -324,6 +360,23 @@ export default class API {
return `${API.baseUrl}/genre/${genreId}/illustration`;
}
/**
* Retrieves a genre
* @param genreId the id of the aimed genre
*/
public static getGenre(genreId: number): Query<Genre> {
return {
key: ['genre', genreId],
exec: () =>
API.fetch(
{
route: `/genre/${genreId}`,
},
{ handler: GenreHandler }
),
};
}
/**
* Retrive a song's musicXML partition
* @param songId the id to find the song

6
front/Navigation.tsx
View File

@@ -28,6 +28,7 @@ import { Button, Center, VStack } from 'native-base';
import { unsetAccessToken } from './state/UserSlice';
import TextButton from './components/TextButton';
import ErrorView from './views/ErrorView';
import GenreDetailsView from './views/GenreDetailsView';
import GoogleView from './views/GoogleView';
// Util function to hide route props in URL
@@ -59,6 +60,11 @@ const protectedRoutes = () =>
options: { title: translate('artistFilter') },
link: '/artist/:artistId',
},
Genre: {
component: GenreDetailsView,
options: { title: translate('genreFilter') },
link: '/genre/:genreId',
},
Score: {
component: ScoreView,
options: { title: translate('score'), headerLeft: null },

34
front/components/RowCustom.tsx Normal file
View File

@@ -0,0 +1,34 @@
import { useColorScheme } from 'react-native';
import { RootState, useSelector } from '../state/Store';
import { Box, Pressable } from 'native-base';
const RowCustom = (props: Parameters<typeof Box>[0] & { onPress?: () => void }) => {
const settings = useSelector((state: RootState) => state.settings.local);
const systemColorMode = useColorScheme();
const colorScheme = settings.colorScheme;
return (
<Pressable onPress={props.onPress}>
{({ isHovered, isPressed }) => (
<Box
{...props}
py={3}
my={1}
bg={
(colorScheme == 'system' ? systemColorMode : colorScheme) == 'dark'
? isHovered || isPressed
? 'gray.800'
: undefined
: isHovered || isPressed
? 'coolGray.200'
: undefined
}
>
{props.children}
</Box>
)}
</Pressable>
);
};
export default RowCustom;

125
front/components/SearchResult.tsx
View File

@@ -1,20 +1,16 @@
import React, { useMemo } from 'react';
import {
HStack,
VStack,
Heading,
Text,
Pressable,
Box,
Card,
Image,
Flex,
useBreakpointValue,
Column,
ScrollView,
} from 'native-base';
import { SafeAreaView, useColorScheme } from 'react-native';
import { RootState, useSelector } from '../state/Store';
import { SafeAreaView } from 'react-native';
import { SearchContext } from '../views/SearchView';
import { useQueries, useQuery } from '../Queries';
import { translate } from '../i18n/i18n';
@@ -24,11 +20,11 @@ import ArtistCard from './ArtistCard';
import GenreCard from './GenreCard';
import SongCard from './SongCard';
import CardGridCustom from './CardGridCustom';
import TextButton from './TextButton';
import SearchHistoryCard from './HistoryCard';
import Song, { SongWithArtist } from '../models/Song';
import { useNavigation } from '../Navigation';
import Artist from '../models/Artist';
import SongRow from '../components/SongRow';
const swaToSongCardProps = (song: SongWithArtist) => ({
songId: song.id,
@@ -37,101 +33,6 @@ const swaToSongCardProps = (song: SongWithArtist) => ({
cover: song.cover ?? 'https://picsum.photos/200',
});
const RowCustom = (props: Parameters<typeof Box>[0] & { onPress?: () => void }) => {
const settings = useSelector((state: RootState) => state.settings.local);
const systemColorMode = useColorScheme();
const colorScheme = settings.colorScheme;
return (
<Pressable onPress={props.onPress}>
{({ isHovered, isPressed }) => (
<Box
{...props}
py={3}
my={1}
bg={
(colorScheme == 'system' ? systemColorMode : colorScheme) == 'dark'
? isHovered || isPressed
? 'gray.800'
: undefined
: isHovered || isPressed
? 'coolGray.200'
: undefined
}
>
{props.children}
</Box>
)}
</Pressable>
);
};
type SongRowProps = {
song: Song | SongWithArtist; // TODO: remove Song
onPress: () => void;
};
const SongRow = ({ song, onPress }: SongRowProps) => {
return (
<RowCustom width={'100%'}>
<HStack px={2} space={5} justifyContent={'space-between'}>
<Image
flexShrink={0}
flexGrow={0}
pl={10}
style={{ zIndex: 0, aspectRatio: 1, borderRadius: 5 }}
source={{ uri: song.cover }}
alt={song.name}
/>
<HStack
style={{
display: 'flex',
flexShrink: 1,
flexGrow: 1,
alignItems: 'center',
justifyContent: 'flex-start',
}}
space={6}
>
<Text
style={{
flexShrink: 1,
}}
isTruncated
pl={10}
maxW={'100%'}
bold
fontSize="md"
>
{song.name}
</Text>
<Text
style={{
flexShrink: 0,
}}
fontSize={'sm'}
>
{song.artistId ?? 'artist'}
</Text>
</HStack>
<TextButton
flexShrink={0}
flexGrow={0}
translate={{ translationKey: 'playBtn' }}
colorScheme="primary"
variant={'outline'}
size="sm"
onPress={onPress}
/>
</HStack>
</RowCustom>
);
};
SongRow.defaultProps = {
onPress: () => {},
};
const HomeSearchComponent = () => {
const { updateStringQuery } = React.useContext(SearchContext);
const { isLoading: isLoadingHistory, data: historyData = [] } = useQuery(
@@ -252,15 +153,17 @@ const ArtistSearchComponent = (props: ItemSearchComponentProps) => {
</Text>
{artistData?.length ? (
<CardGridCustom
content={artistData.slice(0, props.maxItems ?? artistData.length).map((a) => ({
image: API.getArtistIllustration(a.id),
name: a.name,
id: a.id,
onPress: () => {
API.createSearchHistoryEntry(a.name, 'artist');
navigation.navigate('Artist', { artistId: a.id });
},
}))}
content={artistData
.slice(0, props.maxItems ?? artistData.length)
.map((artistData) => ({
image: API.getArtistIllustration(artistData.id),
name: artistData.name,
id: artistData.id,
onPress: () => {
API.createSearchHistoryEntry(artistData.name, 'artist');
navigation.navigate('Artist', { artistId: artistData.id });
},
}))}
cardComponent={ArtistCard}
/>
) : (
@@ -287,7 +190,7 @@ const GenreSearchComponent = (props: ItemSearchComponentProps) => {
id: g.id,
onPress: () => {
API.createSearchHistoryEntry(g.name, 'genre');
navigation.navigate('Home');
navigation.navigate('Genre', { genreId: g.id });
},
}))}
cardComponent={GenreCard}

71
front/components/SongRow.tsx Normal file
View File

@@ -0,0 +1,71 @@
import { HStack, Image, Text } from 'native-base';
import Song, { SongWithArtist } from '../models/Song';
import RowCustom from './RowCustom';
import TextButton from './TextButton';
type SongRowProps = {
song: Song | SongWithArtist; // TODO: remove Song
onPress: () => void;
};
const SongRow = ({ song, onPress }: SongRowProps) => {
return (
<RowCustom width={'100%'}>
<HStack px={2} space={5} justifyContent={'space-between'}>
<Image
flexShrink={0}
flexGrow={0}
pl={10}
style={{ zIndex: 0, aspectRatio: 1, borderRadius: 5 }}
source={{ uri: song.cover }}
alt={song.name}
borderColor={'white'}
borderWidth={1}
/>
<HStack
style={{
display: 'flex',
flexShrink: 1,
flexGrow: 1,
alignItems: 'center',
justifyContent: 'flex-start',
}}
space={6}
>
<Text
style={{
flexShrink: 1,
}}
isTruncated
pl={5}
maxW={'100%'}
bold
fontSize="md"
>
{song.name}
</Text>
<Text
style={{
flexShrink: 0,
}}
fontSize={'sm'}
>
{song.artistId ?? 'artist'}
</Text>
</HStack>
<TextButton
flexShrink={0}
flexGrow={0}
translate={{ translationKey: 'playBtn' }}
colorScheme="primary"
variant={'outline'}
size="sm"
mr={5}
onPress={onPress}
/>
</HStack>
</RowCustom>
);
};
export default SongRow;

3
front/i18n/Translations.ts
View File

@@ -43,6 +43,7 @@ export const en = {
artistFilter: 'Artists',
songsFilter: 'Songs',
genreFilter: 'Genres',
favoriteFilter: 'Favorites',
// profile page
user: 'Profile',
@@ -231,6 +232,7 @@ export const fr: typeof en = {
artistFilter: 'Artistes',
songsFilter: 'Morceaux',
genreFilter: 'Genres',
favoriteFilter: 'Favoris',
// Difficulty settings
diffBtn: 'Difficulté',
@@ -428,6 +430,7 @@ export const sp: typeof en = {
artistFilter: 'Artistas',
songsFilter: 'canciones',
genreFilter: 'géneros',
favoriteFilter: 'Favorites',
// Difficulty settings
diffBtn: 'Dificultad',

75
front/views/ArtistDetailsView.tsx
View File

@@ -1,49 +1,60 @@
import { VStack, Image, Heading, IconButton, Icon, Container } from 'native-base';
import { Ionicons } from '@expo/vector-icons';
import { SafeAreaView } from 'react-native';
import { Box, Heading, useBreakpointValue, ScrollView, useColorModeValue } from 'native-base';
import { useQuery } from '../Queries';
import { LoadingView } from '../components/Loading';
import API from '../API';
import { useNavigation } from '../Navigation';
const handleFavorite = () => {};
import Song from '../models/Song';
import SongRow from '../components/SongRow';
import { Key } from 'react';
import { RouteProps, useNavigation } from '../Navigation';
import { ImageBackground } from 'react-native';
type ArtistDetailsViewProps = {
artistId: number;
};
const ArtistDetailsView = ({ artistId }: ArtistDetailsViewProps) => {
const ArtistDetailsView = ({ artistId }: RouteProps<ArtistDetailsViewProps>) => {
const artistQuery = useQuery(API.getArtist(artistId));
const songsQuery = useQuery(API.getSongsByArtist(artistId));
const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
const fadeColor = useColorModeValue('#ffffff', '#000000');
const isMobileView = screenSize == 'small';
const navigation = useNavigation();
const { isLoading, data: artistData, isError } = useQuery(API.getArtist(artistId));
if (isLoading) {
if (artistQuery.isError || songsQuery.isError) {
navigation.navigate('Error');
return <></>;
}
if (!artistQuery.data || songsQuery.data === undefined) {
return <LoadingView />;
}
if (isError) {
navigation.navigate('Error');
}
return (
<SafeAreaView>
<Container m={3}>
<Image
source={{ uri: 'https://picsum.photos/200' }}
alt={artistData?.name}
size={20}
borderRadius="full"
/>
<VStack space={3}>
<Heading>{artistData?.name}</Heading>
<IconButton
icon={<Icon as={Ionicons} name="heart" size={6} color="red.500" />}
onPress={() => handleFavorite()}
variant="unstyled"
_pressed={{ opacity: 0.6 }}
/>
</VStack>
</Container>
</SafeAreaView>
<ScrollView>
<ImageBackground
style={{ width: '100%', height: isMobileView ? 200 : 300 }}
source={{ uri: API.getArtistIllustration(artistQuery.data.id) }}
>
</ImageBackground>
<Box>
<Heading mt={-20} ml={3} fontSize={50}>
{artistQuery.data.name}
</Heading>
<ScrollView mt={3}>
<Box>
{songsQuery.data.map((comp: Song, index: Key | null | undefined) => (
<SongRow
key={index}
song={comp}
onPress={() => {
API.createSearchHistoryEntry(comp.name, 'song');
navigation.navigate('Song', { songId: comp.id });
}}
/>
))}
</Box>
</ScrollView>
</Box>
</ScrollView>
);
};

76
front/views/GenreDetailsView.tsx Normal file
View File

@@ -0,0 +1,76 @@
import { Flex, Heading, useBreakpointValue, ScrollView, useColorModeValue } from 'native-base';
import { useQueries, useQuery } from '../Queries';
import { LoadingView } from '../components/Loading';
import { RouteProps, useNavigation } from '../Navigation';
import API from '../API';
import CardGridCustom from '../components/CardGridCustom';
import SongCard from '../components/SongCard';
import { ImageBackground } from 'react-native';
type GenreDetailsViewProps = {
genreId: number;
};
const GenreDetailsView = ({ genreId }: RouteProps<GenreDetailsViewProps>) => {
const genreQuery = useQuery(API.getGenre(genreId));
const songsQuery = useQuery(API.getSongsByGenre(genreId));
const artistQueries = useQueries(
songsQuery.data?.map((song) => song.artistId).map((artistId) => API.getArtist(artistId)) ??
[]
);
// Here, .artist will always be defined
const songWithArtist = songsQuery?.data
?.map((song) => ({
...song,
artist: artistQueries.find((query) => query.data?.id == song.artistId)?.data,
}))
.filter((song) => song.artist !== undefined);
const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
const isMobileView = screenSize == 'small';
const fadeColor = useColorModeValue('#ffffff', '#000000');
const navigation = useNavigation();
if (genreQuery.isError || songsQuery.isError) {
navigation.navigate('Error');
return <></>;
}
if (!genreQuery.data || songsQuery.data === undefined || songWithArtist === undefined) {
return <LoadingView />;
}
return (
<ScrollView>
<ImageBackground
style={{ width: '100%', height: isMobileView ? 200 : 300 }}
source={{ uri: API.getGenreIllustration(genreQuery.data.id) }}
>
</ImageBackground>
<Heading ml={3} fontSize={50}>
{genreQuery.data.name}
</Heading>
<Flex
flexWrap="wrap"
direction={isMobileView ? 'column' : 'row'}
justifyContent={['flex-start']}
mt={4}
>
<CardGridCustom
content={songWithArtist.map((songData) => ({
name: songData.name,
cover: songData.cover,
artistName: songData.artist!.name,
songId: songData.id,
onPress: () => {
API.createSearchHistoryEntry(songData.name, 'song');
navigation.navigate('Song', { songId: songData.id });
},
}))}
cardComponent={SongCard}
/>
</Flex>
</ScrollView>
);
};
export default GenreDetailsView;

5
front/yarn.lock
View File

@@ -9138,6 +9138,11 @@ expo-keep-awake@~11.0.1:
resolved "https://registry.yarnpkg.com/expo-keep-awake/-/expo-keep-awake-11.0.1.tgz#ee354465892a94040ffe09901b85b469e7d54fb3"
integrity sha512-44ZjgLE4lnce2d40Pv8xsjMVc6R5GvgHOwZfkLYtGmgYG9TYrEJeEj5UfSeweXPL3pBFhXKfFU8xpGYMaHdP0A==
expo-linear-gradient@^12.3.0:
version "12.3.0"
resolved "https://registry.yarnpkg.com/expo-linear-gradient/-/expo-linear-gradient-12.3.0.tgz#7abd8fedbf0138c86805aebbdfbbf5e5fa865f19"
integrity sha512-f9e+Oxe5z7fNQarTBZXilMyswlkbYWQHONVfq8MqmiEnW3h9XsxxmVJLG8uVQSQPUsbW+x1UUT/tnU6mkMWeLg==
expo-linking@~3.3.1:
version "3.3.1"
resolved "https://registry.yarnpkg.com/expo-linking/-/expo-linking-3.3.1.tgz#253b183321e54cb6fa1a667a53d4594aa88a3357"