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

Added SongCardInfo for the V2 design and type fixes

Browse Source
This commit is contained in:
Clément Le Bihan
2023-09-20 00:35:10 +02:00
parent 94875d4c7f
commit 8e5c65e6f2
8 changed files with 503 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/components/V2/HomeMainSongCard.tsx
+94
View File
@@ -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 (
<Pressable onPress={props.onPress}>
{({ isHovered }) => (
<View
style={{
width: '100%',
height: '100%',
borderRadius: 12,
overflow: 'hidden',
position: 'relative',
}}
>
<Image
source={{
uri: props.image,
}}
style={{
aspectRatio: 1,
width: '100%',
height: '100%',
flexShrink: 1,
}}
/>
<PresenceTransition
style={{
width: '100%',
height: '100%',
position: 'absolute',
}}
visible={isHovered}
initial={{
opacity: 0,
}}
animate={{
opacity: 1,
}}
>
<View
style={{
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.75)',
justifyContent: 'flex-end',
alignItems: 'flex-start',
paddingHorizontal: 16,
paddingVertical: 36,
}}
>
<Text
style={{
color: 'white',
fontSize: 46,
fontWeight: 'bold',
}}
selectable={false}
>
{props.title}
</Text>
<Text
style={{
color: 'white',
fontSize: 16,
fontWeight: 'bold',
textAlign: 'center',
}}
selectable={false}
>
{props.artist}
</Text>
</View>
</PresenceTransition>
</View>
)}
</Pressable>
);
};
HomeMainSongCard.defaultProps = {
onPress: () => {},
};
export default HomeMainSongCard;
front/components/V2/SongCardInfo.tsx
+259
View File
@@ -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 (
<View
style={{
width: CardDims.width,
height: CardDims.height,
// @ts-expect-error boxShadow isn't yet supported by react native
boxShadow: '0px 4px 4px 0px rgba(0,0,0,0.25)',
backDropFilter: 'blur(2px)',
backgroundColor: 'rgba(16, 16, 20, 0.70)',
borderRadius: 12,
overflow: 'hidden',
}}
>
<Pressable
delayHoverIn={7}
isHovered={isPlayHovered ? true : undefined}
onPress={props.onPress}
style={{
width: '100%',
}}
onHoverIn={() => {
setIsHovered(true);
}}
onHoverOut={() => {
setIsHovered(false);
setIsSlided(false);
}}
>
<>
<View
style={{
width: CardDims.width,
height: CardDims.height,
backgroundColor: 'rgba(16, 16, 20, 0.7)',
borderRadius: 12,
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
}}
>
<View
style={{
width: '100%',
marginBottom: 8,
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
{Scores.map((score, idx) => (
<View
key={score.icon + idx}
style={{
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
// @ts-expect-error gap isn't yet supported by react native
gap: 5,
paddingHorizontal: 10,
}}
>
<Icon as={Ionicons} name={score.icon} size={17} color="white" />
<Text
style={{
color: 'white',
fontSize: 12,
fontWeight: 'bold',
}}
>
{score.score}
</Text>
</View>
))}
</View>
</View>
<PresenceTransition
style={{
width: '100%',
height: '100%',
position: 'absolute',
}}
visible={isHovered}
initial={{
translateY: 0,
}}
animate={{
translateY: -55,
}}
onTransitionComplete={() => {
if (isHovered) {
setIsSlided(true);
}
}}
>
<Image
source={{ uri: props.song.cover }}
style={{
position: 'relative',
width: CardDims.width,
height: CardDims.height,
borderRadius: 12,
}}
/>
<View
style={{
position: 'absolute',
width: '100%',
height: '100%',
backgroundColor: 'rgba(0, 0, 0, 0.75)',
justifyContent: 'flex-end',
alignItems: 'flex-start',
paddingHorizontal: 10,
paddingVertical: 7,
borderRadius: 12,
}}
>
<View
style={{
width: '100%',
display: 'flex',
flexDirection: 'row',
alignItems: 'flex-end',
justifyContent: 'space-between',
}}
>
<View
style={{
flexShrink: 1,
}}
>
<Text
numberOfLines={2}
style={{
color: 'white',
fontSize: 14,
fontWeight: 'bold',
marginBottom: 4,
}}
>
{props.song.name}
</Text>
<Text
numberOfLines={1}
style={{
color: 'white',
fontSize: 12,
fontWeight: 'normal',
}}
>
{props.song.artistId}
</Text>
</View>
<Ionicons
style={{
flexShrink: 0,
}}
name="bookmark-outline"
size={17}
color="#6075F9"
/>
</View>
</View>
</PresenceTransition>
{/* icon bu=outon appear in the middle of the card after the first presencetransition is done */}
<PresenceTransition
style={{
width: '100%',
height: '100%',
position: 'absolute',
}}
visible={isSlided}
initial={{
opacity: 0,
}}
animate={{
opacity: 1,
}}
>
<View
style={{
position: 'absolute',
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'flex-end',
alignItems: 'center',
}}
>
<Button
onHoverIn={() => {
setIsPlayHovered(true);
}}
onHoverOut={() => {
setIsPlayHovered(false);
}}
borderRadius={100}
marginBottom={35}
leftIcon={
<Ionicons
name="play-outline"
color={'white'}
size={20}
rounded="sm"
/>
}
onPress={props.onPlay}
/>
</View>
</PresenceTransition>
</>
</Pressable>
</View>
);
};
SongCardInfo.defaultProps = {
onPress: () => {},
onPlay: () => {},
};
export default SongCardInfo;
front/components/V2/TabNavigation.tsx
+30 -2
View File
@@ -66,6 +66,7 @@ const TabNavigation = () => {
const child = <HomeView />;
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}
<View
style={{
width: 'calc(100% - 5)',
height: '100%',
backgroundColor: 'rgba(16, 16, 20, 0.50)',
borderRadius: 12,
margin: 5,
// @ts-expect-error backDropFilter isn't yet supported by react native
backDropFilter: 'blur(2px)',
padding: 15,
}}
>
{child}
</View>
</TabNavigationPhone>
) : (
<TabNavigationDesktop
@@ -104,7 +118,21 @@ const TabNavigation = () => {
isCollapsed={isDesktopCollapsed}
setIsCollapsed={setIsDesktopCollapsed}
>
{child}
<View
style={{
width: 'calc(100% - 10)',
height: '100%',
backgroundColor: 'rgba(16, 16, 20, 0.50)',
borderRadius: 12,
marginVertical: 10,
marginRight: 10,
// @ts-expect-error backDropFilter isn't yet supported by react native
backDropFilter: 'blur(2px)',
padding: 20,
}}
>
{child}
</View>
</TabNavigationDesktop>
)}
</View>
front/components/V2/TabNavigationDesktop.tsx
+9 -5
View File
@@ -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) => {
</TabNavigationList>
</View>
</View>
<View style={{
height: '100%',
width: 'calc(100% - 300px)',
}}>{props.children}</View>
<ScrollView
style={{
height: '100%',
width: 'calc(100% - 300px)',
}}
>
{props.children}
</ScrollView>
</View>
);
};
front/components/V2/TabNavigationPhone.tsx
+9 -5
View File
@@ -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) => {
</View>
</Center>
</View>
<View style={{
width: '100%',
height: 'calc(100% - 90px)',
}}>{props.children}</View>
<ScrollView
style={{
width: '100%',
height: 'calc(100% - 90px)',
}}
>
{props.children}
</ScrollView>
</View>
);
};