Front: Prettier
This commit is contained in:
+46
-25
@@ -90,7 +90,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
|
||||
const [paused, setPause] = useState<boolean>(true);
|
||||
const stopwatch = useStopwatch();
|
||||
const [time, setTime] = useState(0);
|
||||
const songHistory = useQuery(API.getSongHistory(songId), { refetchOnWindowFocus: true });
|
||||
const songHistory = useQuery(API.getSongHistory(songId));
|
||||
const [partitionRendered, setPartitionRendered] = useState(false); // Used to know when partitionview can render
|
||||
const [score, setScore] = useState(0); // Between 0 and 100
|
||||
// const fadeAnim = useRef(new Animated.Value(0)).current;
|
||||
@@ -109,7 +109,8 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
|
||||
});
|
||||
const colorScheme = useColorScheme();
|
||||
const { colors } = useTheme();
|
||||
const textColor = colorScheme == 'dark' ? colors.lightText : colors.coolGray[800];
|
||||
const textColor = colors.text;
|
||||
const statColor = colors.lightText;
|
||||
|
||||
const onPause = () => {
|
||||
stopwatch.pause();
|
||||
@@ -303,7 +304,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
|
||||
}
|
||||
}, [song.data, partitionRendered]);
|
||||
|
||||
if (!song.data || !songHistory.data) {
|
||||
if (!song.data) {
|
||||
return <LoadingView />;
|
||||
}
|
||||
return (
|
||||
@@ -335,12 +336,16 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
|
||||
title={translate('selectPlayMode')}
|
||||
description={translate('selectPlayModeExplaination')}
|
||||
isVisible={type === undefined}
|
||||
setIsVisible={navigation.canGoBack() ? (isVisible) => {
|
||||
if (!isVisible) {
|
||||
// If we dismiss the popup, Go to previous page
|
||||
navigation.goBack();
|
||||
}
|
||||
} : undefined}
|
||||
setIsVisible={
|
||||
navigation.canGoBack()
|
||||
? (isVisible) => {
|
||||
if (!isVisible) {
|
||||
// If we dismiss the popup, Go to previous page
|
||||
navigation.goBack();
|
||||
}
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<Row style={{ justifyContent: 'space-between' }}>
|
||||
<ButtonBase
|
||||
@@ -351,16 +356,26 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
|
||||
/>
|
||||
<ButtonBase
|
||||
style={{}}
|
||||
type='filled'
|
||||
type="filled"
|
||||
title={translate('playBtn')}
|
||||
onPress={async () => setType('normal')}
|
||||
/>
|
||||
</Row>
|
||||
</PopupCC>
|
||||
|
||||
{/* eslint-disable-next-line react/jsx-key*/}
|
||||
{([['lastScore', songHistory.data.best ?? 0, <Clock color={textColor.toString()}/>], ['bestScore', songHistory.data.history.at(0)?.score ?? 0, <Cup color={textColor.toString()}/>]] as const)
|
||||
.map(([label, value, icon]) => (
|
||||
{(
|
||||
[
|
||||
[
|
||||
'lastScore',
|
||||
songHistory.data?.best ?? 0,
|
||||
() => <Clock color={statColor} />,
|
||||
] as const,
|
||||
[
|
||||
'bestScore',
|
||||
songHistory.data?.history.at(0)?.score ?? 0,
|
||||
() => <Cup color={statColor} />,
|
||||
],
|
||||
] as const
|
||||
).map(([label, value, icon]) => (
|
||||
<View
|
||||
key={label}
|
||||
style={{
|
||||
@@ -370,8 +385,8 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Text color={textColor} fontSize={12}>
|
||||
<Translate translationKey={label}/>
|
||||
<Text color={statColor} fontSize={12}>
|
||||
<Translate translationKey={label} />
|
||||
</Text>
|
||||
<View
|
||||
style={{
|
||||
@@ -380,8 +395,8 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
|
||||
gap: 5,
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
<Text color={textColor} fontSize={12} bold>
|
||||
{icon()}
|
||||
<Text color={statColor} fontSize={12} bold>
|
||||
{value}
|
||||
</Text>
|
||||
</View>
|
||||
@@ -410,7 +425,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
|
||||
borderRadius: 12,
|
||||
}}
|
||||
>
|
||||
<Text color={textColor} fontSize={24}>
|
||||
<Text color={textColor[900]} fontSize={24}>
|
||||
{score}
|
||||
</Text>
|
||||
</View>
|
||||
@@ -428,10 +443,10 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
|
||||
borderRadius: 12,
|
||||
}}
|
||||
>
|
||||
<Text color={textColor} fontSize={20}>
|
||||
<Text color={textColor[900]} fontSize={20}>
|
||||
{lastScoreMessage?.content}
|
||||
</Text>
|
||||
<Text color={textColor} fontSize={15} bold>
|
||||
<Text color={textColor[900]} fontSize={15} bold>
|
||||
{streak > 0 && `x${streak}`}
|
||||
</Text>
|
||||
</View>
|
||||
@@ -516,7 +531,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
color={textColor}
|
||||
color={textColor[800]}
|
||||
fontSize={14}
|
||||
maxW={'100%'}
|
||||
isTruncated
|
||||
@@ -524,7 +539,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
|
||||
{song.data.name}
|
||||
</Text>
|
||||
<Text
|
||||
color={textColor}
|
||||
color={textColor[900]}
|
||||
fontSize={12}
|
||||
maxW={'100%'}
|
||||
isTruncated
|
||||
@@ -548,7 +563,13 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
|
||||
<IconButton
|
||||
size="sm"
|
||||
variant="solid"
|
||||
icon={<Icon as={Ionicons} name={paused ? 'play' : 'pause'} />}
|
||||
icon={
|
||||
<Icon
|
||||
as={Ionicons}
|
||||
color={colors.coolGray[900]}
|
||||
name={paused ? 'play' : 'pause'}
|
||||
/>
|
||||
}
|
||||
onPress={() => {
|
||||
if (paused) {
|
||||
onResume();
|
||||
@@ -570,7 +591,7 @@ const PlayView = ({ songId, route }: RouteProps<PlayViewProps>) => {
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<Text color={textColor}>
|
||||
<Text color={textColor[900]}>
|
||||
{time < 0
|
||||
? paused
|
||||
? '0:00'
|
||||
|
||||
Reference in New Issue
Block a user