From 7b790199b22fc1f8d953313fb0abb42558e46fef Mon Sep 17 00:00:00 2001 From: Suryaa <0x0is1@protonmail.com> Date: Thu, 17 Oct 2024 02:19:24 +0530 Subject: [PATCH] Enhancement: Refactored UI and added specialized emojis --- src/screens/AlbumsScreen/components/Card.jsx | 67 ++++++++---------- .../AlbumsScreen/components/Category.jsx | 24 ++++--- .../FloatingPlayerScreen.jsx | 8 +-- src/utils/emoticanGenerator.js | 70 +++++++++++++++++-- 4 files changed, 114 insertions(+), 55 deletions(-) diff --git a/src/screens/AlbumsScreen/components/Card.jsx b/src/screens/AlbumsScreen/components/Card.jsx index 3f40667..e7e7772 100644 --- a/src/screens/AlbumsScreen/components/Card.jsx +++ b/src/screens/AlbumsScreen/components/Card.jsx @@ -14,41 +14,41 @@ import { fonts } from "../../../constants/fonts"; const Card = ({ albumData, index }) => { const navigation = useNavigation(); - albumData.title = albumData.title ? albumData.title : albumData.name; + const { title, name, image } = albumData; + + const albumTitle = title || name; + const displayTitle = decode( + albumTitle.length > 25 ? `${albumTitle.substring(0, 25)}...` : albumTitle + ); + + const optimizedImageUri = image + .replace("150x150", "500x500") + .replace("50x50", "500x500"); + + const handlePress = () => + handleAlbum({ + albumData, + image_: image, + title_: albumTitle, + navigation, + }); + + const cardHeight = index % 3 === 0 ? 240 : 200; return ( - - handleAlbum({ - albumData: albumData, - image_: albumData.image, - title_: albumData.title, - navigation: navigation, - }) - } - style={[ - styles.card, - { height: index % 3 === 0 ? 240 : 200 }, - ]} + - - {decode( - albumData.title.length > 20 - ? `${albumData.title.substring(0, 20)}...` - : albumData.title - )} - + {displayTitle} ); @@ -58,8 +58,6 @@ export default Card; const styles = StyleSheet.create({ card: { - maxWidth: 190, - minWidth: 170, backgroundColor: colors.secondaryColor, borderRadius: 10, shadowColor: colors.primaryColor, @@ -68,15 +66,13 @@ const styles = StyleSheet.create({ shadowOffset: { width: 0, height: 3 }, elevation: 6, overflow: "hidden", - marginHorizontal: 10, - marginVertical: 12, + marginHorizontal: 6, + marginVertical: 6, }, image: { width: "100%", height: "100%", justifyContent: "flex-end", - position: "relative", - overflow: "hidden", }, imageOverlay: { borderRadius: 10, @@ -88,11 +84,10 @@ const styles = StyleSheet.create({ }, title: { position: "absolute", - bottom: 12, - left: 12, - fontSize: 18, + bottom: 8, + left: 8, + fontSize: 16, color: colors.secondaryColor, - letterSpacing: 0.5, fontFamily: fonts.poppinsSecondary, }, }); diff --git a/src/screens/AlbumsScreen/components/Category.jsx b/src/screens/AlbumsScreen/components/Category.jsx index f5fdc78..934108a 100644 --- a/src/screens/AlbumsScreen/components/Category.jsx +++ b/src/screens/AlbumsScreen/components/Category.jsx @@ -1,5 +1,5 @@ import { StyleSheet, Text, View } from "react-native"; -import React from "react"; +import React, { useCallback, useMemo } from "react"; import MasonryList from "@react-native-seoul/masonry-list"; import Card from "./Card"; import generateEmoji from "../../../utils/emoticanGenerator"; @@ -7,18 +7,21 @@ import { fonts } from "../../../constants/fonts"; import { colors } from "../../../constants/colors"; const Category = ({ categoryName, categoryData }) => { - categoryData = categoryData.map((item, index) => ({ - ...item, - index, - })); - const renderCard = ({ item }) => ; + const transformedData = useMemo( + () => categoryData.map((item, index) => ({ ...item, index })), + [categoryData] + ); + + const emoji = useMemo(() => generateEmoji(), []); + + const renderCard = useCallback(({ item }) => , []); return ( - {categoryName} {generateEmoji()} + {categoryName} {emoji} item.id} + data={transformedData} + keyExtractor={(item) => item.id.toString()} numColumns={2} showsVerticalScrollIndicator={false} renderItem={renderCard} @@ -39,6 +42,7 @@ const styles = StyleSheet.create({ borderBottomColor: 'gray', borderBottomLeftRadius: 10, borderBottomRightRadius: 10, + paddingBottom: 20 }, categoryTitle: { color: colors.categoryColorPrimary, @@ -46,6 +50,6 @@ const styles = StyleSheet.create({ fontFamily: fonts.poppinsSecondary, textAlign: "left", marginHorizontal: 10, - marginTop: 5, + marginTop: 20, }, }); diff --git a/src/screens/FloatingPlayerScreen/FloatingPlayerScreen.jsx b/src/screens/FloatingPlayerScreen/FloatingPlayerScreen.jsx index 1a1a19d..18f11c9 100644 --- a/src/screens/FloatingPlayerScreen/FloatingPlayerScreen.jsx +++ b/src/screens/FloatingPlayerScreen/FloatingPlayerScreen.jsx @@ -186,7 +186,7 @@ const styles = StyleSheet.create({ bottom: 5, width: "94%", marginHorizontal: "3%", - borderRadius: 10, + borderRadius: 8, backgroundColor: colors.floatingPlayerBgPrimary, paddingHorizontal: 8, paddingTop: 4, @@ -227,7 +227,7 @@ const styles = StyleSheet.create({ albumArt: { width: 40, height: 40, - borderRadius: 8, + borderRadius: 6, marginRight: 12, }, textWrapper: { @@ -235,12 +235,12 @@ const styles = StyleSheet.create({ justifyContent: "center", }, songTitle: { - fontSize: 16, + fontSize: 14, color: colors.secondaryColor, fontFamily: fonts.poppinsSecondary }, artistName: { - fontSize: 14, + fontSize: 12, color: colors.floatingPlayerColorSecomdary, fontFamily: fonts.poppinsPrimary }, diff --git a/src/utils/emoticanGenerator.js b/src/utils/emoticanGenerator.js index 09c3c04..187df52 100644 --- a/src/utils/emoticanGenerator.js +++ b/src/utils/emoticanGenerator.js @@ -1,6 +1,66 @@ export default function generateEmoji() { - const emoticonRangeStart = 0x1F600; - const emoticonRangeEnd = 0x1F64F; - const randomCodePoint = Math.floor(Math.random() * (emoticonRangeEnd - emoticonRangeStart + 1)) + emoticonRangeStart; - return String.fromCodePoint(randomCodePoint); -} \ No newline at end of file + const cuteEmojis = [ + 0x1F60A, // Smiling Face with Smiling Eyes + 0x1F60D, // Smiling Face with Heart-Eyes + 0x1F618, // Face Blowing a Kiss + 0x1F61A, // Kissing Face with Closed Eyes + 0x1F970, // Smiling Face with Hearts + 0x1F63A, // Smiling Cat Face with Open Mouth + 0x1F638, // Grinning Cat Face with Smiling Eyes + 0x1F431, // Cat Face + 0x1F436, // Dog Face + 0x1F42D, // Mouse Face + 0x1F430, // Rabbit Face + 0x1F43C, // Panda Face + 0x1F981, // Lion Face + 0x1F42F, // Tiger Face + 0x1F439, // Hamster Face + 0x1F43B, // Bear Face + 0x1F43A, // Wolf Face + 0x1F424, // Chick + 0x1F426, // Bird + 0x1F427, // Penguin + 0x1F43D, // Pig Nose + 0x1F428, // Koala + 0x1F98B, // Butterfly + 0x1F98E, // Lizard + 0x1F984, // Unicorn Face + 0x1F493, // Beating Heart + 0x1F496, // Sparkling Heart + 0x1F49B, // Yellow Heart + 0x1F49A, // Green Heart + 0x1F499, // Blue Heart + 0x1F49C, // Purple Heart + 0x1F495, // Two Hearts + 0x1F48B, // Kiss Mark + 0x1F44D, // Thumbs Up + 0x1F44C, // OK Hand + 0x1F44F, // Clapping Hands + 0x1F389, // Party Popper + 0x1F381, // Wrapped Gift + 0x1F3C6, // Trophy + 0x1F37E, // Bottle with Popping Cork + 0x1F9E1, // Orange Heart + 0x1F9E2, // Party Hat + 0x1F497, // Growing Heart + 0x1F9F8, // Teddy Bear + 0x1F43E, // Paw Prints + 0x1F430, // Rabbit Face + 0x1F98A, // Fox Face + 0x1F99D, // Raccoon + 0x1F43F, // Chipmunk + 0x1F425, // Front-Facing Baby Chick + 0x1F418, // Elephant + 0x1F422, // Turtle + 0x1F98C, // Deer + 0x1F40C, // Snail + 0x1F43B, // Bear Face + 0x1F987, // Bat + 0x1F419, // Octopus + 0x1F41F, // Fish + 0x1F996, // T-Rex + ]; + + const randomEmoji = cuteEmojis[Math.floor(Math.random() * cuteEmojis.length)]; + return String.fromCodePoint(randomEmoji); +}