Fixed some bugs and added Playinfocard in top right corner of playview

This commit is contained in:
Clément Le Bihan
2023-10-16 18:47:19 +02:00
parent 94838ef1fc
commit 61ed8855ea
3 changed files with 78 additions and 15 deletions

View File

@@ -9125,7 +9125,7 @@ export default class API {
}`);
return {
key: ['cursorInfos', songId],
exec: async () => res2 as SongCursorInfos,
exec: async () => res as SongCursorInfos,
}
}
}

View File

@@ -16,7 +16,7 @@ export type ParitionMagicProps = {
};
const getSVGURL = (songID: number) => {
return 'https://cdn.discordapp.com/attachments/717080637038788731/1162519992722530354/Short.mxl_1.svg?ex=653c3c1c&is=6529c71c&hm=1788e4abe532f4a2af8c24cae6dadcfde369eaf58322f051ecd1d9110d8b699a&';
// return 'https://cdn.discordapp.com/attachments/717080637038788731/1162519992722530354/Short.mxl_1.svg?ex=653c3c1c&is=6529c71c&hm=1788e4abe532f4a2af8c24cae6dadcfde369eaf58322f051ecd1d9110d8b699a&';
return 'https://cdn.discordapp.com/attachments/717080637038788731/1161704545785757816/4.svg?ex=653944ab&is=6526cfab&hm=2416ee2cb414cc42fa9de8af58b8db544479d35f13393d76f02e8d9fe27aff45&';
};
@@ -126,6 +126,7 @@ const PartitionMagic = ({ songID, onEndReached, onError, onReady }: ParitionMagi
flex: 1,
alignItems: 'flex-start',
position: 'relative',
overflow: 'hidden',
}}
>
<View

View File

@@ -109,6 +109,27 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
[]
);
const infoCardInfos = [
{
icon: <Ionicons name="timer-outline" size={18} color="#6075F9" />,
label: 'Last Score',
id: 'lastScore',
value: 60,
},
{
icon: <Ionicons name="trophy-outline" size={18} color="#6075F9" />,
label: 'Best Score',
id: 'bestScore',
value: 60,
},
{
icon: <Ionicons name="bar-chart-outline" size={18} color="#6075F9" />,
label: 'Level',
id: 'level',
value: 3,
},
] as const;
const onPause = () => {
stopwatch.pause();
setPause(true);
@@ -331,8 +352,49 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
flexGrow: 1,
flexDirection: 'column',
padding: 20,
position: 'relative',
}}
>
<View
style={{
position: 'absolute',
top: 10,
right: 10,
display: 'flex',
flexDirection: 'row',
gap: 20,
borderRadius: 12,
backgroundColor: 'rgba(16, 16, 20, 0.5)',
padding: 10,
paddingHorizontal: 20,
}}
>
{infoCardInfos.map((info) => (
<View
key={info.id}
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text fontSize={12}>{info.label}</Text>
<View
style={{
display: 'flex',
flexDirection: 'row',
gap: 5,
}}
>
{info.icon}
<Text fontSize={12} bold>
{info.value}
</Text>
</View>
</View>
))}
</View>
<View
style={{
width: '100%',
@@ -343,20 +405,20 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
gap: 3,
}}
>
{/* <Animated.View style={{ opacity: fadeAnim }}>
<TextButton
disabled
label={lastScoreMessage?.content ?? ''}
colorScheme={lastScoreMessage?.color}
rounded="sm"
/>
</Animated.View> */}
<View>
<Text fontSize={32}>{score}</Text>
<Text fontSize={24}>{score}</Text>
</View>
<View>
<Text fontSize={30}>Cool</Text>
<Text fontSize={25} bold>
<View
style={{
display: 'flex',
flexDirection: 'row',
gap: 7,
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text fontSize={20}>Cool</Text>
<Text fontSize={15} bold>
x1
</Text>
</View>
@@ -420,7 +482,7 @@ const PlayView = ({ songId, type, route }: RouteProps<PlayViewProps>) => {
gap: 20,
}}
>
<Image src={song.data.cover} alt="cover" size={'md'} borderRadius={8} />
<Image src={song.data.cover} alt="cover" size={'sm'} borderRadius={8} />
<View
style={{
display: 'flex',