From 13dee0a78282fb10515b3ed3a106a3eb07d20ea4 Mon Sep 17 00:00:00 2001 From: Nayan Date: Fri, 4 Oct 2024 23:12:29 +0530 Subject: [PATCH] added: collection page and their routes --- package-lock.json | 137 ++++++++- package.json | 1 + src/App.jsx | 8 + .../images/equaliser-animated-green.gif | Bin 0 -> 3342 bytes src/assets/styles/globals.css | 24 ++ .../HorizontalCard.module.css | 4 + .../LeftSection/VerticalCard/VerticalCard.jsx | 8 +- .../MusicController/MusicController.jsx | 4 +- src/constants/cleanUpData.js | 6 +- src/pages/Collection/Collection.jsx | 199 +++++++++++++ src/pages/Collection/Collection.module.css | 278 ++++++++++++++++++ src/pages/Playlist/Playlist.jsx | 14 + src/pages/Playlist/Playlist.module.css | 0 13 files changed, 672 insertions(+), 11 deletions(-) create mode 100644 src/assets/images/equaliser-animated-green.gif create mode 100644 src/pages/Collection/Collection.jsx create mode 100644 src/pages/Collection/Collection.module.css create mode 100644 src/pages/Playlist/Playlist.jsx create mode 100644 src/pages/Playlist/Playlist.module.css diff --git a/package-lock.json b/package-lock.json index 23cbe5e..ddfa26e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.2.1", + "react-loader-spinner": "^6.1.6", "react-player": "^2.16.0", "react-router-dom": "^6.24.1", "universal-cookie": "^7.2.0" @@ -398,6 +399,27 @@ "node": ">=6.9.0" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "license": "MIT", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==", + "license": "MIT" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", + "license": "MIT" + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", @@ -1313,6 +1335,12 @@ "@types/react": "*" } }, + "node_modules/@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==", + "license": "MIT" + }, "node_modules/@ungap/structured-clone": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", @@ -1673,6 +1701,15 @@ "node": ">=6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001638", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001638.tgz", @@ -1776,11 +1813,30 @@ "node": ">= 8" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "license": "ISC", + "engines": { + "node": ">=4" + } + }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "license": "MIT", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "dev": true, "license": "MIT" }, "node_modules/data-view-buffer": { @@ -3563,7 +3619,6 @@ "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", - "dev": true, "funding": [ { "type": "github", @@ -3827,7 +3882,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==", - "dev": true, "license": "ISC" }, "node_modules/possible-typed-array-names": { @@ -3844,7 +3898,6 @@ "version": "8.4.38", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", - "dev": true, "funding": [ { "type": "opencollective", @@ -3869,6 +3922,12 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "license": "MIT" + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -3973,6 +4032,29 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "license": "MIT" }, + "node_modules/react-loader-spinner": { + "version": "6.1.6", + "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-6.1.6.tgz", + "integrity": "sha512-x5h1Jcit7Qn03MuKlrWcMG9o12cp9SNDVHVJTNRi9TgtGPKcjKiXkou4NRfLAtXaFB3+Z8yZsVzONmPzhv2ErA==", + "license": "MIT", + "dependencies": { + "react-is": "^18.2.0", + "styled-components": "^6.1.2" + }, + "engines": { + "node": ">= 12" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/react-loader-spinner/node_modules/react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", + "license": "MIT" + }, "node_modules/react-player": { "version": "2.16.0", "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.16.0.tgz", @@ -4278,6 +4360,12 @@ "node": ">= 0.4" } }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -4324,7 +4412,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", - "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -4435,6 +4522,40 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/styled-components": { + "version": "6.1.13", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz", + "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==", + "license": "MIT", + "dependencies": { + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.38", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==", + "license": "MIT" + }, "node_modules/supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", @@ -4478,6 +4599,12 @@ "node": ">=4" } }, + "node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "license": "0BSD" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/package.json b/package.json index f7295d1..0a8bee3 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.2.1", + "react-loader-spinner": "^6.1.6", "react-player": "^2.16.0", "react-router-dom": "^6.24.1", "universal-cookie": "^7.2.0" diff --git a/src/App.jsx b/src/App.jsx index 8be81c5..c7a2559 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -11,6 +11,8 @@ import Search from './pages/Search/Search'; import Library from './pages/Library/Library'; import Login from './pages/Login/Login'; import NotFound from './pages/NotFound/NotFound'; +import Collection from './pages/Collection/Collection'; +import Playlist from './pages/Playlist/Playlist'; function App() { return ( @@ -21,6 +23,12 @@ function App() { } /> } /> } /> + } /> + } /> + + + + } /> } /> diff --git a/src/assets/images/equaliser-animated-green.gif b/src/assets/images/equaliser-animated-green.gif new file mode 100644 index 0000000000000000000000000000000000000000..f8b271f7c0fd44d78d577080a23a08200a7c64df GIT binary patch literal 3342 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 F{{i#q*h~Nb literal 0 HcmV?d00001 diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css index 8775357..345997e 100644 --- a/src/assets/styles/globals.css +++ b/src/assets/styles/globals.css @@ -5,6 +5,18 @@ --playlist-card-bg: rgba(167, 167, 167, 0.68); --des-font-color: rgba(0, 0, 0, 0.53); --spotify-green-theme: #1db954; + --primary-header-bg: rgb(102 64 228); + --primary-header-gradient-bg: linear-gradient( + 212deg, + rgba(70, 50, 136, 1) 0%, + rgb(101 68 212) 100% + ); + --primary-table-bg: rgb(55, 55, 55); + --primary-table-gradient-bg: linear-gradient( + 180deg, + rgb(192 192 192) 100%, + rgb(192 192 192) 100% + ); } * { margin: 0; @@ -24,5 +36,17 @@ body { --primary-font-color: #e9e9e9; --playlist-card-bg: rgba(49, 49, 49, 0.68); --des-font-color: rgba(255, 255, 255, 0.53); + --primary-header-bg: rgb(70, 50, 136); + --primary-header-gradient-bg: linear-gradient( + 212deg, + rgba(70, 50, 136, 1) 0%, + rgba(39, 28, 76, 1) 100% + ); + --primary-table-bg: rgb(55, 55, 55); + --primary-table-gradient-bg: linear-gradient( + 180deg, + rgba(55, 55, 55, 1) 0%, + rgba(0, 0, 0, 1) 100% + ); } } diff --git a/src/components/HorizontalScrollCard/HorizontalCard.module.css b/src/components/HorizontalScrollCard/HorizontalCard.module.css index 7d7b2f2..16efda8 100644 --- a/src/components/HorizontalScrollCard/HorizontalCard.module.css +++ b/src/components/HorizontalScrollCard/HorizontalCard.module.css @@ -54,9 +54,13 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + display: flex; + align-items: center; + justify-content: space-around; } .text:hover { overflow: visible; + text-overflow: clip; } @media only screen and (max-width: 425px) { .cardImg > img { diff --git a/src/components/LeftSection/VerticalCard/VerticalCard.jsx b/src/components/LeftSection/VerticalCard/VerticalCard.jsx index ea7eb8d..6aefcb5 100644 --- a/src/components/LeftSection/VerticalCard/VerticalCard.jsx +++ b/src/components/LeftSection/VerticalCard/VerticalCard.jsx @@ -1,7 +1,10 @@ import React from 'react'; +import { useNavigate } from 'react-router-dom'; import styles from './VerticalCard.module.css'; function VerticalCard({ collectionData }) { + const navigate = useNavigate(); + return (
{collectionData.map((data, index) => { @@ -10,8 +13,7 @@ function VerticalCard({ collectionData }) {
navigate(`/${data.routePath}/${data.id}`)} >
{data.type == 'artist' ? ( @@ -37,7 +39,7 @@ function VerticalCard({ collectionData }) { {data.type}
- {'•' + data.songs} + {data.songs != null ? '•' + data.songs : ''}
diff --git a/src/components/MusicController/MusicController.jsx b/src/components/MusicController/MusicController.jsx index c26f200..fa235a2 100644 --- a/src/components/MusicController/MusicController.jsx +++ b/src/components/MusicController/MusicController.jsx @@ -7,7 +7,7 @@ import { HiOutlineQueueList } from 'react-icons/hi2'; import { CgMusicSpeaker } from 'react-icons/cg'; import { HiOutlineVolumeUp, HiOutlineVolumeOff } from 'react-icons/hi'; import { BsArrowsAngleExpand } from 'react-icons/bs'; -import { IoPlaySharp, IoPause } from 'react-icons/io5'; +import { IoMdPlay, IoMdPause } from 'react-icons/io'; import { TbRepeat } from 'react-icons/tb'; import { RxShuffle } from 'react-icons/rx'; import { MdSkipPrevious, MdSkipNext } from 'react-icons/md'; @@ -51,7 +51,7 @@ function MusicController() {
diff --git a/src/constants/cleanUpData.js b/src/constants/cleanUpData.js index e9f12ba..fe85c4b 100644 --- a/src/constants/cleanUpData.js +++ b/src/constants/cleanUpData.js @@ -25,9 +25,10 @@ const LikedSongs = (userData) => { }, ], songs: userData.total, - id: null, + id: 'tracks', href: userData.href, items: userData.items, + routePath: 'collection', }; } }; @@ -42,6 +43,7 @@ const album = (albumData) => { id: obj.album.id, href: obj.album.href, items: null, + routePath: obj.album.type, }; }); } @@ -57,6 +59,7 @@ const playlist = (playlistData) => { id: obj.id, href: obj.href, items: null, + routePath: obj.type, }; }); } @@ -72,6 +75,7 @@ const artists = (artistsData) => { id: obj.id, href: obj.href, items: null, + routePath: obj.type, }; }); } diff --git a/src/pages/Collection/Collection.jsx b/src/pages/Collection/Collection.jsx new file mode 100644 index 0000000..0bb6920 --- /dev/null +++ b/src/pages/Collection/Collection.jsx @@ -0,0 +1,199 @@ +import React, { useState, useEffect, useContext } from 'react'; +import styles from './Collection.module.css'; +import { Icon } from '../../Icons'; +import { FaArrowLeft } from 'react-icons/fa6'; +import { RiMore2Line } from 'react-icons/ri'; +import { LuClock3 } from 'react-icons/lu'; +import { IoPlay } from 'react-icons/io5'; +import NavBar from '../../components/NavBar/NavBar'; +import { Link, useNavigate } from 'react-router-dom'; +import { useAuth } from '../../hooks/useAuth'; +import { Liked_Songs } from '../../constants/constant'; +import equ from '../../assets/images/equaliser-animated-green.gif'; +import { DataContext } from '../../context/DataCacheContext'; +import { ThreeDots } from 'react-loader-spinner'; + +function Collection() { + const navigate = useNavigate(); + const [cardHover, setCardHover] = useState(false); + const [savedTracks, setSavedTracks] = useState(null); + const { fetchData } = useAuth(); + const { profileData } = useContext(DataContext); + + const DateConverter = (zuluTime) => { + const date = new Date(zuluTime); + const months = [ + 'Jan', + 'Feb', + 'Mar', + 'Apr', + 'May', + 'Jun', + 'Jul', + 'Aug', + 'Sep', + 'Oct', + 'Nov', + 'Dec', + ]; + const day = String(date.getUTCDate()).padStart(2, '0'); + const month = months[date.getUTCMonth()]; + const year = date.getUTCFullYear(); + return `${day} ${month} ${year}`; + }; + + const msToTime = (milliseconds) => { + const totalSeconds = Math.floor(milliseconds / 1000); + + const minutes = Math.floor((totalSeconds % 3600) / 60); + const seconds = totalSeconds % 60; + + const formattedMinutes = String(minutes).padStart(2, '0'); + const formattedSeconds = String(seconds).padStart(2, '0'); + + return `${formattedMinutes}:${formattedSeconds}`; + }; + useEffect(() => { + // do { + fetchData(Liked_Songs) + .then((res) => { + setSavedTracks(res); + }) + .catch((err) => { + console.log(err); + }); + // } while (savedTracks != null); + }, []); + + return ( +
+ {!savedTracks ? ( +
+ +
+ ) : ( +
+
+ +
+ +
+
+
+ liked songs +
+
+
+
+ playlist +
+
+

liked songs

+
+
+
+ + {profileData ? profileData.display_name : 'user'} + +
+ +  • {savedTracks.total} songs + +
+
+
+
+
+ + + + + + + + + + + + {savedTracks.items.map((data, index) => { + return ( + + + + + + + + + ); + })} + +
#titlealbumdate added + +
+ {cardHover ? : {index + 1}} + {/* */} + +
+ +
+
+
+ + {data.track.name} + +
+
+ {data.track.artists.map((obj, index) => { + return ( + + {obj.name}, + + ); + })} +
+
+ 		+
+ + {data.track.album.name} + +
+ 		+ {DateConverter(data.added_at)} + + {msToTime(data.track.duration_ms)} + + +
+
+
+ )} +
+ ); +} + +export default Collection; diff --git a/src/pages/Collection/Collection.module.css b/src/pages/Collection/Collection.module.css new file mode 100644 index 0000000..a4d3258 --- /dev/null +++ b/src/pages/Collection/Collection.module.css @@ -0,0 +1,278 @@ +.collectionSection { + width: 100%; + text-transform: capitalize; + overflow-y: auto; +} +.collectionSection::-webkit-scrollbar { + display: none; +} +.loaderSection { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background-color: var(--primary-section-bg); +} +.cell { + display: grid; + align-items: center; + /* grid-template-columns: 1fr 3fr 2fr 2fr 1fr; */ +} +.innerSection { + display: flex; + flex-direction: column; + background: var(--primary-header-bg); + background: var(--primary-header-gradient-bg); +} +.innerSection a { + color: var(--primary-font-color); +} +.innerSection a:hover { + text-decoration: underline; +} +.innerSection nav { + width: 100%; + display: flex; + flex-direction: column; +} +.navigationBtn { + display: flex; + padding: 0.5rem 0.5rem 0.5rem 1rem; +} +.navigationBtn button { + border: none; + padding: 0.1rem; + background: none; +} +.innerSection header { + padding: 1rem; + display: flex; + align-items: start; + justify-content: start; +} +.desc { + color: gray; + display: flex; + align-items: center; +} +.songManageSection { + display: flex; + align-items: center; + justify-content: space-evenly; +} +.searchBar { + width: 70%; + padding: 0.5rem; + border-radius: 0.2rem; + display: flex; + align-items: center; + justify-content: center; + background-color: brown; +} +.searchBar input { + width: 100%; +} +.searchBar input, +button { + border: none; + background: none; +} +.sortBtn { + padding: 0.5rem; + border-radius: 0.2rem; +} +.type { + color: #b8b8b8e0; +} +.title h1 { + font-size: x-large; + font-weight: bolder; + color: #ffffff; +} +.desc { + font-size: medium; +} +.desc h5 { + color: #000000; +} +.songCount { + color: #b8b8b8e0; +} +.detailsSection { + display: flex; + flex-direction: column; +} +.tableContainer { + background: var(--primary-table-bg); + background: var(--primary-table-gradient-bg); +} +.tableContainer table { + width: 100%; + margin-bottom: 1rem; +} +.tableContainer table td { + text-align: center; + overflow: hidden; +} +.tableContainer table thead { + background-color: rgba(71, 71, 71, 0.603); + position: sticky; + top: 0; +} +.tableContainer table thead tr th { + margin-left: 1rem; + padding: 1rem; + color: var(--primary-section-bg); +} +.tableContainer table tbody tr td { + color: var(--primary-font-color); + padding: 0.5rem 0.5rem 0.5rem 1rem; +} +.tableSongTitleLabel { + display: flex; +} +.songMainData { + display: flex; + align-items: center; + justify-content: flex-start; +} +.songAvatar { + display: flex; +} +.songAvatar img { + width: 2.8rem; + height: 2.8rem; + border-radius: 4px; +} +.songDetails { + margin-left: 0.5rem; + display: flex; + flex-direction: column; + text-align: start; + overflow: hidden; +} +.songName { + width: 7em; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.songName:hover { + overflow: visible; + text-overflow: clip; + animation: scroll 10s linear infinite; +} +.artistName { + margin-top: 0.3rem; + width: 7em; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.artistName:hover { + overflow: visible; + text-overflow: clip; + animation: scroll 10s linear infinite; +} +.albumNameSection { + width: 6.5em; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.albumNameSection:hover { + overflow: visible; + text-overflow: clip; + animation: scroll 10s linear infinite; +} +@media only screen and (max-width: 426px) { + .navigationBar { + display: none; + } + .imgSection div img { + display: none; + } + .songManageSection { + display: none; + } + .type { + display: none; + } + .tableContainer { + padding-bottom: 8rem; + } + .tableContainer table thead { + display: none; + } + .songNo { + display: none; + } + .songDuration { + display: none; + } +} +@media only screen and (min-width: 426px) { + .innerSection { + border-radius: 5px 5px 0 0; + } + .innerSection header { + align-items: center; + } + .imgSection div img { + width: 80px; + height: 80px; + border-radius: 0.2rem; + } + .innerSection nav { + display: none; + } + .detailsSection { + padding: 1rem; + } + .detailsSection > div { + margin: 0.2rem; + } + .title h1 { + font-size: xx-large; + } + .collectionSection { + border-radius: 0.5rem; + } + .moreBtn { + display: none; + } +} +@media only screen and (max-width: 768px) { + .tableSongAlbumLabel { + display: none; + } + .tableSongDateLabel { + display: none; + } + .songAlbumName { + display: none; + } + .songAddedTime { + display: none; + } +} +@media only screen and (min-width: 768px) { + .innerSection { + border-radius: 5px 5px 0 0; + } + .imgSection div img { + width: 120px; + height: 120px; + } + .title h1 { + font-size: 3rem; + } +} +@keyframes scroll { + 0% { + transform: translateX(0%); + } + 100% { + transform: translateX(-100%); + } +} diff --git a/src/pages/Playlist/Playlist.jsx b/src/pages/Playlist/Playlist.jsx new file mode 100644 index 0000000..98c14dd --- /dev/null +++ b/src/pages/Playlist/Playlist.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import styles from './Playlist.module.css'; +import { Icon } from '../../Icons'; +import { FaArrowLeft } from 'react-icons/fa6'; +import { RiMore2Line } from 'react-icons/ri'; +import { LuClock3 } from 'react-icons/lu'; +import NavBar from '../../components/NavBar/NavBar'; +import { Link } from 'react-router-dom'; + +function Playlist() { + return <>; +} + +export default Playlist; diff --git a/src/pages/Playlist/Playlist.module.css b/src/pages/Playlist/Playlist.module.css new file mode 100644 index 0000000..e69de29