Thomas Demirdjian
111 lines
3.1 KiB
JavaScript
111 lines
3.1 KiB
JavaScript
import { View, Text, Image, Platform, Pressable } from "react-native";
|
|
import React from "react";
|
|
import { BlurView } from "expo-blur";
|
|
import { img } from "../../../assets";
|
|
import { Palette, Style } from "../../../styles";
|
|
import { FONT_FAMILY } from "../../../styles/Fonts";
|
|
import SubscriptionBadge from "../../../components/SubscriptionBadge";
|
|
|
|
const PlaybacksCard = ({
|
|
rank = 1,
|
|
title = "Sans titre",
|
|
artist = "MusicLand",
|
|
thumbnailUrl = null,
|
|
coverUrl = null,
|
|
onPress = () => null,
|
|
subscriptionLevel = null,
|
|
}) => {
|
|
const resolveUri = (value) =>
|
|
typeof value === "string" && value.trim().length > 0 ? value : null;
|
|
const imageUri = resolveUri(thumbnailUrl) ?? resolveUri(coverUrl);
|
|
|
|
return (
|
|
<Pressable onPress={onPress}>
|
|
<BlurView
|
|
intensity={Platform.OS === "web" ? 40 : Platform.OS !== "ios" ? 10 : 20}
|
|
tint="dark"
|
|
style={{
|
|
...Style.containerSpaceBetween,
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 4,
|
|
borderRadius: 12,
|
|
backgroundColor: Palette.glass,
|
|
overflow: "hidden",
|
|
}}
|
|
// experimentalBlurMethod={
|
|
// Platform.OS !== "ios" ? "dimezisBlurView" : "none"
|
|
// }
|
|
>
|
|
<View
|
|
style={{
|
|
...Style.containerRow,
|
|
gap: 15,
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
...Style.containerRow,
|
|
gap: 15,
|
|
alignItems: "center",
|
|
flex: 1,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 22,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterSemiBold,
|
|
}}
|
|
>
|
|
{rank}
|
|
</Text>
|
|
<Image
|
|
source={imageUri ? { uri: imageUri } : img.placeholder3}
|
|
style={{ width: 67, height: 108, borderRadius: 16 }}
|
|
/>
|
|
<View style={{ flex: 1 }}>
|
|
<Text
|
|
style={{
|
|
fontSize: 16,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterMedium,
|
|
}}
|
|
numberOfLines={1}
|
|
>
|
|
{title}
|
|
</Text>
|
|
<View
|
|
style={{
|
|
...Style.containerRow,
|
|
gap: 6,
|
|
flexWrap: "wrap",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
fontSize: 12,
|
|
color: Palette.white,
|
|
fontFamily: FONT_FAMILY.InterRegular,
|
|
flexShrink: 1,
|
|
}}
|
|
numberOfLines={1}
|
|
>
|
|
{artist}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
<SubscriptionBadge level={subscriptionLevel} size={36} />
|
|
</View>
|
|
</BlurView>
|
|
</Pressable>
|
|
);
|
|
};
|
|
|
|
export default PlaybacksCard;
|