-
-
handleScroll(e)} className={cx('body')}>
+
+
isTracking && handleScroll(e)} className={cx('body')}>
+
-
+
+
+
+
+
+
+
+
+
+
+
)
diff --git a/src/pages/Playlist/Playlist.module.scss b/src/pages/Playlist/Playlist.module.scss
new file mode 100644
index 0000000..13bdfd4
--- /dev/null
+++ b/src/pages/Playlist/Playlist.module.scss
@@ -0,0 +1,70 @@
+@import '../../scss/variable';
+@import '../../scss/mixin';
+
+.wrapper {
+ height: 100%;
+ position: relative;
+ overflow: hidden;
+ background-color: $bg-base;
+}
+
+
+.body {
+ height: 100%;
+ overflow: hidden;
+ overflow-y: scroll;
+ padding-bottom: 32px;
+ padding-top: $navbar-height;
+ position: relative;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
+}
+
+.song-list {
+ position: relative;
+
+ .bg-blur {
+ position: absolute;
+ height: 232px;
+ top: 0;
+ left: 0;
+ right: 0;
+ background-image: linear-gradient(rgba(0, 0, 0, .6) 0, $bg-base 100%), $bg-noise;
+ z-index: 0;
+ }
+
+ .main {
+ position: relative;
+ padding-inline: 24px;
+
+ .action-bar {
+ display: flex;
+ position: relative;
+ padding: 24px;
+ align-items: center;
+ gap: 32px;
+
+ .heart {
+ @include button-icon(42px, transparent, transparent);
+ color: $text-subdued;
+ transition: none;
+
+ &:hover {
+ color: $white;
+ }
+ }
+ }
+
+ }
+}
+
+.grid-md {
+ grid-template-columns: 16px minmax(300px, 4fr) 2fr 50px !important;
+}
+
+.pivot-tracking {
+ position: absolute;
+ z-index: -999;
+}
\ No newline at end of file
diff --git a/src/pages/Playlist/Playlist.tsx b/src/pages/Playlist/Playlist.tsx
new file mode 100644
index 0000000..91177a5
--- /dev/null
+++ b/src/pages/Playlist/Playlist.tsx
@@ -0,0 +1,161 @@
+/* eslint-disable react-refresh/only-export-components */
+import categoryApi from '@/apis/categoryApi'
+import { HeartIcon } from '@/assets/icons'
+import { Footer, Header, Navbar, SongList } from '@/components'
+import { PlayButton } from '@/components/UIs'
+import { PlayerContext } from '@/contexts/PlayerContext'
+import { useComponentSize } from '@/hooks'
+import { PlaylistData } from '@/types/playlist'
+import { documentTitle } from '@/utils'
+import classNames from 'classnames/bind'
+import { usePalette } from 'color-thief-react'
+import React, { memo, useContext, useEffect, useRef, useState } from 'react'
+import { useInView } from 'react-intersection-observer'
+import { useNavigate, useParams } from 'react-router-dom'
+import styles from './Playlist.module.scss'
+
+const cx = classNames.bind(styles)
+
+const Playlist: React.FC = () => {
+ const {
+ setQueue,
+ setCurrentTrack,
+ setCurrentTrackIndex,
+ calNextTrackIndex,
+ setPlayingType,
+ isPlaying,
+ prevDocumentTitle,
+ } = useContext(PlayerContext)
+ const [navOpacity, setNavOpacity] = useState
(0)
+ const [data, setData] = useState()
+ const [isLoading, setLoading] = useState(true)
+ const [navPlayBtnVisible, setNavPlayBtnVisible] = useState(false)
+
+ // const bgColor = useRaiseColorTone(useDominantColor(data?.images?.[0]?.url) || '#121212')
+
+ const { data: dataColor } = usePalette(data?.images?.[0]?.url as string, 10, 'hex', {
+ crossOrigin: 'Anonymous',
+ quality: 100,
+ })
+
+ const bgColor = dataColor?.[2] ?? '#121212'
+
+ const { ref: pivotTrackingRef, inView: isTracking } = useInView({
+ threshold: 0,
+ })
+
+ useEffect(() => {
+ if (isPlaying) {
+ prevDocumentTitle.current = `${
+ data?.name ? data?.name : 'Playlist'
+ } | Spotify Playlist`
+ } else {
+ documentTitle(`${data?.name ? data?.name : 'Playlist'} | Spotify Playlist`)
+ }
+ }, [isPlaying, data])
+
+ const headerRef = useRef()
+ const { height: headerHeight } = useComponentSize(headerRef)
+
+ const { id } = useParams()
+
+ const navigate = useNavigate()
+
+ useEffect(() => {
+ const fetchData = async () => {
+ const data = await categoryApi({
+ type: 'playlists',
+ id: id,
+ })
+ if (data?.error) {
+ navigate('/not-found')
+ } else {
+ setData({ ...data })
+ }
+ }
+ if (id !== 'undefined') {
+ fetchData()
+ }
+ }, [id])
+
+ useEffect(() => {
+ setLoading(Boolean(!data))
+ }, [data])
+
+ const handleScroll = (e: React.UIEvent): void => {
+ const yAxis = e.currentTarget.scrollTop
+ if (yAxis > 64) {
+ setNavOpacity(1)
+ } else setNavOpacity(yAxis / 64)
+ if (yAxis > headerHeight + 14) {
+ setNavPlayBtnVisible(true)
+ } else setNavPlayBtnVisible(false)
+ }
+
+ const handleClickPlayBtn = () => {
+ setQueue(data?.tracks?.items?.map((item) => item.track) || [])
+ setCurrentTrack(data?.tracks?.items?.[0]?.track)
+ setCurrentTrackIndex(0)
+ calNextTrackIndex()
+ setPlayingType('track')
+ }
+
+ return (
+
+
+ isTracking && handleScroll(e)} className={cx('body')}>
+
+
+
+
+
+
+
+ {queueNormalized.length !== 0 ? (
+ <>
+
Queue
+
+
Now playing
+
+
+ {queue?.filter((item) => item)?.length > 1 && (
+
+
Next
+ track?.id !== currentTrack?.id)
+ : queueNormalized.slice(currentTrackIndex + 1)
+ }
+ adjustOrder={1}
+ />
+
+ )}
+
+ ) : (
+
+
No Queue Tracks
+
+
Home
+
+
+ Help
+
+
+ )}
+
+
-
-
+
+
+ {debounceValue &&
}
+
+
+
+
+
isTracking && handleScroll(e)}>
+
+
+
+
+
+
+
test
+}
+
+export default Test
diff --git a/src/scss/_animations.scss b/src/scss/_animations.scss
index efaa70d..93471b9 100644
--- a/src/scss/_animations.scss
+++ b/src/scss/_animations.scss
@@ -1,3 +1,3 @@
@mixin text-transition {
- transition: all .2s cubic-bezier(0.215, 0.610, 0.355, 1) ;
-}
\ No newline at end of file
+ transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
diff --git a/src/scss/_global.scss b/src/scss/_global.scss
index 759c8c6..1050e90 100644
--- a/src/scss/_global.scss
+++ b/src/scss/_global.scss
@@ -1,7 +1,12 @@
-@import './variable';
+@import './variable';
-*, *::after, *::before {
+*,
+*::after,
+*::before {
box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+
+ scrollbar-width: none;
}
html {
@@ -13,4 +18,17 @@ body {
color: $white;
}
+a {
+ text-decoration: none;
+}
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+span {
+ line-height: 1.3;
+}
diff --git a/src/scss/_mixin.scss b/src/scss/_mixin.scss
index f27519c..c1271ec 100644
--- a/src/scss/_mixin.scss
+++ b/src/scss/_mixin.scss
@@ -1,3 +1,5 @@
+@import './variable';
+
@mixin backgroundImg($url) {
background-image: url($url);
background-position: center;
@@ -12,9 +14,19 @@
}
@mixin button-base {
+ color: $black;
border: none;
cursor: pointer;
- transition: all ease-in-out .2s;
+ transition: all ease-in-out 0.2s;
+}
+
+@mixin reset-button {
+ border: none;
+ outline: none;
+
+ &:focus {
+ outline: none;
+ }
}
@mixin button-icon($size, $bg, $bg-highlight) {
@@ -31,13 +43,58 @@
}
}
-
@mixin button-text($padding, $bg, $bg-highlight) {
+ @include button-base();
padding: $padding;
background-color: $bg;
- @include button-base();
&:hover {
background-color: $bg-highlight;
}
-}
\ No newline at end of file
+}
+
+@mixin text-line-clamp($line-number) {
+ display: -webkit-box;
+ -webkit-line-clamp: $line-number;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ white-space: normal;
+}
+
+@mixin text-in-one-line {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+@mixin text-shadow {
+ text-shadow: 0px 0px 2px #7d7d7d;
+}
+
+@mixin button-active {
+ color: $secondary !important;
+ position: relative;
+
+ &::after {
+ content: '';
+ height: 4px;
+ width: 4px;
+ position: absolute;
+ background-color: $secondary;
+ border-radius: 50%;
+ bottom: 4px;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+
+ &:hover {
+ color: $primary;
+ }
+}
+
+@mixin default-thumb {
+ @include item-center();
+ width: 100%;
+ height: 100%;
+ background-color: $bg-card-highlight;
+}
diff --git a/src/scss/_variable.scss b/src/scss/_variable.scss
index e8e7d85..0bbe99b 100644
--- a/src/scss/_variable.scss
+++ b/src/scss/_variable.scss
@@ -1,18 +1,20 @@
$black: #000;
$white: #fff;
$primary: #1ed760;
-
-
+$secondary: #1db954;
+$tertiary: #1dcf5d;
$bg-base: #121212;
$bg-highlight: #1a1a1a;
$bg-elevated-base: #242424;
$bg-elevated-highlight: #2a2a2a;
+$bg-card: #181818;
+$bg-card-highlight: #282828;
+$essential-subdued: #727272;
$bg-button: rgba(255, 255, 255, 0.07);
$bg-button-highlight: rgba(255, 255, 255, 0.1);
$bg-noise: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIGJhc2VGcmVxdWVuY3k9Ii43NSIgc3RpdGNoVGlsZXM9InN0aXRjaCIgdHlwZT0iZnJhY3RhbE5vaXNlIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGQ9Ik0wIDBoMzAwdjMwMEgweiIgZmlsdGVyPSJ1cmwoI2EpIiBvcGFjaXR5PSIuMDUiLz48L3N2Zz4=);
-
$text-subdued: #a7a7a7;
$text-neutral: #b3b3b3;
@@ -20,5 +22,6 @@ $panel-gap: 8px;
$row-gap: 16px;
$col-gap: 24px;
+$panel-border-radius: 8px;
-$panel-border-radius: 8px;
\ No newline at end of file
+$navbar-height: 64px;
diff --git a/src/types/album.ts b/src/types/album.ts
new file mode 100644
index 0000000..7236be5
--- /dev/null
+++ b/src/types/album.ts
@@ -0,0 +1,36 @@
+import { ArtistData } from './artist'
+import { ImageSource } from './others'
+import { SpotifyTrack } from './track'
+
+export interface AlbumItem {
+ title?: string
+ imageUrl?: string
+ id?: string
+ author?: string
+ dateTime?: string
+ album?: {
+ id?: string
+ images?: ImageSource[]
+ name?: string
+ artists?: ArtistData[]
+ }
+}
+
+export interface SpotifyAlbum {
+ artists?: ArtistData[]
+ images?: ImageSource[]
+ id?: string
+ name?: string
+ album_type?: 'album' | 'Playlist' | 'single' | 'compilation' | 'podcast' | 'episode'
+
+ release_date?: string
+ description?: string
+ tracks?: {
+ total?: number
+ items: SpotifyTrack[]
+ }
+ copyrights?: {
+ text?: string
+ type?: string
+ }[]
+}
diff --git a/src/types/artist.ts b/src/types/artist.ts
new file mode 100644
index 0000000..1ece26e
--- /dev/null
+++ b/src/types/artist.ts
@@ -0,0 +1,50 @@
+import { ExtractedColors, Gallery, HeaderImage, ImageSource } from './others'
+
+export interface ArtistData {
+ name: string
+ id: string
+}
+
+export interface ArtistItem {
+ name?: string
+ imageUrl?: string
+ id?: string
+ images?: ImageSource[]
+}
+
+export interface ArtistProfile {
+ id: string | undefined
+ name: string | undefined
+ bio: string | undefined
+ isVerified: boolean | undefined
+ biography?: { text: string }
+}
+
+export interface ArtistTopCity {
+ city: string
+ country: string
+ numberOfListeners: number
+ region: string
+}
+
+export interface ArtistStats {
+ followers: number
+ monthlyListeners: number
+ topCities: { items: ArtistTopCity[] }
+}
+
+interface AvatarImage {
+ sources: ImageSource[]
+ extractedColors: ExtractedColors
+}
+
+export interface Visuals {
+ avatarImage: AvatarImage
+ gallery: Gallery
+ headerImage: HeaderImage
+}
+
+export interface ExternalLink {
+ name: string
+ url: string
+}
diff --git a/src/types/countries.ts b/src/types/countries.ts
new file mode 100644
index 0000000..5cc4ecb
--- /dev/null
+++ b/src/types/countries.ts
@@ -0,0 +1,185 @@
+export type countries =
+ | 'AD'
+ | 'AE'
+ | 'AG'
+ | 'AL'
+ | 'AM'
+ | 'AO'
+ | 'AR'
+ | 'AT'
+ | 'AU'
+ | 'AZ'
+ | 'BA'
+ | 'BB'
+ | 'BD'
+ | 'BE'
+ | 'BF'
+ | 'BG'
+ | 'BH'
+ | 'BI'
+ | 'BJ'
+ | 'BN'
+ | 'BO'
+ | 'BR'
+ | 'BS'
+ | 'BT'
+ | 'BW'
+ | 'BY'
+ | 'BZ'
+ | 'CA'
+ | 'CD'
+ | 'CG'
+ | 'CH'
+ | 'CI'
+ | 'CL'
+ | 'CM'
+ | 'CO'
+ | 'CR'
+ | 'CV'
+ | 'CW'
+ | 'CY'
+ | 'CZ'
+ | 'DE'
+ | 'DJ'
+ | 'DK'
+ | 'DM'
+ | 'DO'
+ | 'DZ'
+ | 'EC'
+ | 'EE'
+ | 'EG'
+ | 'ES'
+ | 'ET'
+ | 'FI'
+ | 'FJ'
+ | 'FM'
+ | 'FR'
+ | 'GA'
+ | 'GB'
+ | 'GD'
+ | 'GE'
+ | 'GH'
+ | 'GM'
+ | 'GN'
+ | 'GQ'
+ | 'GR'
+ | 'GT'
+ | 'GW'
+ | 'GY'
+ | 'HK'
+ | 'HN'
+ | 'HR'
+ | 'HT'
+ | 'HU'
+ | 'ID'
+ | 'IE'
+ | 'IL'
+ | 'IN'
+ | 'IQ'
+ | 'IS'
+ | 'IT'
+ | 'JM'
+ | 'JO'
+ | 'JP'
+ | 'KE'
+ | 'KG'
+ | 'KH'
+ | 'KI'
+ | 'KM'
+ | 'KN'
+ | 'KR'
+ | 'KW'
+ | 'KZ'
+ | 'LA'
+ | 'LB'
+ | 'LC'
+ | 'LI'
+ | 'LK'
+ | 'LR'
+ | 'LS'
+ | 'LT'
+ | 'LU'
+ | 'LV'
+ | 'LY'
+ | 'MA'
+ | 'MC'
+ | 'MD'
+ | 'ME'
+ | 'MG'
+ | 'MH'
+ | 'MK'
+ | 'ML'
+ | 'MN'
+ | 'MO'
+ | 'MR'
+ | 'MT'
+ | 'MU'
+ | 'MV'
+ | 'MW'
+ | 'MX'
+ | 'MY'
+ | 'MZ'
+ | 'NA'
+ | 'NE'
+ | 'NG'
+ | 'NI'
+ | 'NL'
+ | 'NO'
+ | 'NP'
+ | 'NR'
+ | 'NZ'
+ | 'OM'
+ | 'PA'
+ | 'PE'
+ | 'PG'
+ | 'PH'
+ | 'PK'
+ | 'PL'
+ | 'PS'
+ | 'PT'
+ | 'PW'
+ | 'PY'
+ | 'QA'
+ | 'RO'
+ | 'RS'
+ | 'RW'
+ | 'SA'
+ | 'SB'
+ | 'SC'
+ | 'SE'
+ | 'SG'
+ | 'SI'
+ | 'SK'
+ | 'SL'
+ | 'SM'
+ | 'SN'
+ | 'SR'
+ | 'ST'
+ | 'SV'
+ | 'SZ'
+ | 'TD'
+ | 'TG'
+ | 'TH'
+ | 'TJ'
+ | 'TL'
+ | 'TN'
+ | 'TO'
+ | 'TR'
+ | 'TT'
+ | 'TV'
+ | 'TW'
+ | 'TZ'
+ | 'UA'
+ | 'UG'
+ | 'US'
+ | 'UY'
+ | 'UZ'
+ | 'VC'
+ | 'VE'
+ | 'VN'
+ | 'VU'
+ | 'WS'
+ | 'XK'
+ | 'ZA'
+ | 'ZM'
+ | 'ZW'
diff --git a/src/types/homePage.ts b/src/types/homePage.ts
new file mode 100644
index 0000000..2eca90e
--- /dev/null
+++ b/src/types/homePage.ts
@@ -0,0 +1,13 @@
+import { countries } from "./countries"
+
+export interface NewReleasesArgs {
+ accessToken: string
+ limit: number
+ country: countries
+}
+
+export interface FeaturedPlaylistsProps {
+ limit: number
+ accessToken: string
+ country: countries
+}
diff --git a/src/types/others.ts b/src/types/others.ts
new file mode 100644
index 0000000..8350c2e
--- /dev/null
+++ b/src/types/others.ts
@@ -0,0 +1,50 @@
+import { ArtistData } from "./artist"
+
+export interface ImageSource {
+ url: string
+ width: number
+ height: number
+}
+
+export interface ColorRaw {
+ hex: string
+}
+
+export interface ExtractedColors {
+ colorRaw: ColorRaw
+}
+
+export interface GalleryItem {
+ sources: ImageSource[]
+}
+
+export interface Gallery {
+ items: GalleryItem[]
+}
+
+export interface AvatarImage {
+ sources: ImageSource[]
+ extractedColors: ExtractedColors
+}
+
+export interface HeaderImage {
+ sources: ImageSource[]
+ extractedColors: ExtractedColors
+}
+
+export interface HeaderProps {
+ title?: string
+ thumbnail?: string
+ quantity?: number
+ type?: 'Playlist' | 'album' | 'single' | 'compilation' | 'podcast' | 'episode'
+ bgColor?: string
+ desc?: string
+ isLoading?: boolean
+ artists?: ArtistData[]
+ releaseDate?: string
+ isWhiteColor?: boolean
+ headerType?: 'playlist' | 'album' | 'show' | 'genre'
+ publisher?: string
+ showName?: string
+ showId?: string
+}
diff --git a/src/types/playlist.ts b/src/types/playlist.ts
new file mode 100644
index 0000000..ccb957c
--- /dev/null
+++ b/src/types/playlist.ts
@@ -0,0 +1,27 @@
+import { ImageSource } from './others'
+import { SpotifyTrack } from './track'
+
+export interface PlayListItem {
+ title?: string
+ imageUrl?: string
+ author?: string
+ id?: string
+ name?: string
+ description?: string
+ images?: ImageSource[]
+}
+
+export interface PlaylistData {
+ description?: string
+ id?: string
+ name?: string
+ images?: ImageSource[]
+ owner?: {
+ display_name?: string
+ id?: string
+ }
+ tracks?: {
+ items?: { track: SpotifyTrack }[]
+ total?: number
+ }
+}
diff --git a/src/types/search.ts b/src/types/search.ts
new file mode 100644
index 0000000..6c21f7f
--- /dev/null
+++ b/src/types/search.ts
@@ -0,0 +1,16 @@
+export interface SearchBannerItem {
+ title?: string
+ imgUrl?: string
+ id?: string
+ bgColor?: string
+}
+
+export interface CategoryItem {
+ icons: {
+ height: number
+ width: number
+ url: string
+ }[]
+ id: string
+ name: string
+}
diff --git a/src/types/section.ts b/src/types/section.ts
new file mode 100644
index 0000000..e6a0f46
--- /dev/null
+++ b/src/types/section.ts
@@ -0,0 +1,49 @@
+import { AlbumItem } from './album'
+import { ArtistData, ArtistItem, Visuals } from './artist'
+import { ImageSource } from './others'
+import { PlayListItem } from './playlist'
+
+export interface SectionItemI extends PlayListItem, ArtistItem, AlbumItem {
+ isArtist?: boolean
+ isLoading?: boolean
+ columnWidth?: number
+ dataType?: string
+ artists?: ArtistData[]
+ desc?: string
+ publisher?: string
+ dateAdd?: string
+ type?: 'default' | 'playlist' | 'album' | 'artistList' | 'artist' | 'show'
+}
+
+export interface SectionProps {
+ title?: string
+ href?: string
+ data?: ResponseSectionItem[]
+ dataType?: string
+ isFull?: boolean
+ isClickable?: boolean
+ hideHeader?: boolean
+ type?: 'default' | 'playlist' | 'album' | 'artistList' | 'artist' | 'show'
+ apiType?: 'spotify' | 'rapid'
+ pageType?: 'section' | 'genre'
+}
+
+export interface ResponseSectionItem {
+ id?: string
+ name?: string
+ images: ImageSource[] | any
+ publisher?: string
+ artists?: ArtistData[]
+ description?: string
+ owner?: {
+ display_name: string
+ }
+ release_date?: string
+ uri?: string
+ visuals?: Visuals
+ profile?: any
+ releases?: any
+ coverArt?: any
+ date?: any
+ albumId?: string
+}
diff --git a/src/types/show.ts b/src/types/show.ts
new file mode 100644
index 0000000..b5fe5b2
--- /dev/null
+++ b/src/types/show.ts
@@ -0,0 +1,45 @@
+import { ImageSource } from './others'
+
+export interface ShowItem {
+ description?: string
+ html_description?: string
+ duration_ms?: number
+ explicit?: boolean
+ id?: string
+ images?: ImageSource[]
+ name?: string
+ release_date?: string
+ type?: string
+}
+
+export interface ShowData {
+ description?: string
+ html_description?: string
+ episodes?: {
+ items?: ShowItem[]
+ }
+ explicit?: boolean
+ id?: string
+ images?: ImageSource[]
+ name?: string
+ publisher?: string
+ total_episodes?: number
+}
+
+export interface Episode extends ShowItem {
+ show?: {
+ id?: string
+ images?: ImageSource[]
+ name?: string
+ publisher?: string
+ }
+}
+
+export interface Episode extends ShowItem {
+ show?: {
+ id?: string
+ images?: ImageSource[]
+ name?: string
+ publisher?: string
+ }
+}
diff --git a/src/types/sidebar.ts b/src/types/sidebar.ts
new file mode 100644
index 0000000..fb99724
--- /dev/null
+++ b/src/types/sidebar.ts
@@ -0,0 +1,38 @@
+import { AlbumItem } from './album'
+import { ArtistData, ArtistItem } from './artist'
+import { PlayListItem } from './playlist'
+
+export type LibSelection = {
+ title: string
+ id: string
+ type: 'playlist' | 'album' | 'artist'
+ active: boolean
+}
+
+export interface ResponseLibItem {
+ id?: string
+ owner?: {
+ display_name?: string
+ }
+ artists?: ArtistData[]
+ name?: string
+ images?: {
+ url?: string
+ }[]
+}
+
+export interface SidebarItemProps {
+ author?: string
+ type?: 'playlist' | 'artist' | 'album'
+ thumbnail?: string | undefined
+ name?: string | undefined
+ id?: string
+ artists?: ArtistData[]
+}
+
+export interface LibDataItem extends PlayListItem, AlbumItem, ArtistItem {
+ owner?: {
+ display_name: string
+ }
+ artists?: ArtistData[]
+}
diff --git a/src/types/track.ts b/src/types/track.ts
new file mode 100644
index 0000000..3788bfe
--- /dev/null
+++ b/src/types/track.ts
@@ -0,0 +1,87 @@
+import { SpotifyAlbum } from './album'
+import { ArtistData } from './artist'
+import { ImageSource } from './others'
+
+export interface SongItemTagProps {
+ thumbnailUrl?: string
+ name?: string
+ isLoading?: boolean
+ id?: string
+ setBgColor: React.Dispatch>
+ albumId?: string
+}
+
+export interface SongItemProps {
+ songName?: string
+ artists?: ArtistData[]
+ thumb?: string
+ duration?: number
+ order?: number
+ isLoading?: boolean
+ albumData?: SpotifyAlbum
+ dateAdd?: string
+ isExplicit?: boolean
+ type?: 'default' | 'playlist' | 'album' | 'search' | 'artist'
+ id?: string
+ originalData?: SpotifyTrack
+ isPlaying?: boolean
+}
+
+export interface SongListProps {
+ songList?: SongItemProps[] | { track?: SpotifyTrack }[]
+ pivotTop?: number
+ top?: number
+ isLoading?: boolean
+ type?: 'default' | 'playlist' | 'album' | 'search' | 'artist'
+ albumId?: string
+ albumImages?: ImageSource[]
+ inclHeader?: boolean
+ albumName?: string
+ albumType?:
+ | 'album'
+ | 'Playlist'
+ | 'single'
+ | 'compilation'
+ | 'podcast'
+ | 'episode'
+ | undefined
+ adjustOrder?: number
+}
+
+export interface SpotifyTrack {
+ album?: SpotifyAlbum
+ artists?: ArtistData[]
+ explicit?: boolean
+ duration_ms?: number
+ name?: string
+ id?: string
+ popularity?: number
+}
+
+// -----------Rapid----------
+
+export interface RapidTrack {
+ soundcloudTrack?: {
+ audio?: {
+ quality?: string
+ url?: string
+ durationMs?: number
+ durationText?: string
+ }[]
+ }
+}
+
+export interface RapidArtistTrack {
+ uid?: string
+ track?: {
+ album?: any
+ artists?: any
+ id?: string
+ name?: string
+ uri?: string
+ playcount?: string
+ duration?: {
+ totalMilliseconds?: number
+ }
+ }
+}
diff --git a/src/types/types.ts b/src/types/types.ts
new file mode 100644
index 0000000..3598597
--- /dev/null
+++ b/src/types/types.ts
@@ -0,0 +1,482 @@
+// export type countries =
+// | 'AD'
+// | 'AE'
+// | 'AG'
+// | 'AL'
+// | 'AM'
+// | 'AO'
+// | 'AR'
+// | 'AT'
+// | 'AU'
+// | 'AZ'
+// | 'BA'
+// | 'BB'
+// | 'BD'
+// | 'BE'
+// | 'BF'
+// | 'BG'
+// | 'BH'
+// | 'BI'
+// | 'BJ'
+// | 'BN'
+// | 'BO'
+// | 'BR'
+// | 'BS'
+// | 'BT'
+// | 'BW'
+// | 'BY'
+// | 'BZ'
+// | 'CA'
+// | 'CD'
+// | 'CG'
+// | 'CH'
+// | 'CI'
+// | 'CL'
+// | 'CM'
+// | 'CO'
+// | 'CR'
+// | 'CV'
+// | 'CW'
+// | 'CY'
+// | 'CZ'
+// | 'DE'
+// | 'DJ'
+// | 'DK'
+// | 'DM'
+// | 'DO'
+// | 'DZ'
+// | 'EC'
+// | 'EE'
+// | 'EG'
+// | 'ES'
+// | 'ET'
+// | 'FI'
+// | 'FJ'
+// | 'FM'
+// | 'FR'
+// | 'GA'
+// | 'GB'
+// | 'GD'
+// | 'GE'
+// | 'GH'
+// | 'GM'
+// | 'GN'
+// | 'GQ'
+// | 'GR'
+// | 'GT'
+// | 'GW'
+// | 'GY'
+// | 'HK'
+// | 'HN'
+// | 'HR'
+// | 'HT'
+// | 'HU'
+// | 'ID'
+// | 'IE'
+// | 'IL'
+// | 'IN'
+// | 'IQ'
+// | 'IS'
+// | 'IT'
+// | 'JM'
+// | 'JO'
+// | 'JP'
+// | 'KE'
+// | 'KG'
+// | 'KH'
+// | 'KI'
+// | 'KM'
+// | 'KN'
+// | 'KR'
+// | 'KW'
+// | 'KZ'
+// | 'LA'
+// | 'LB'
+// | 'LC'
+// | 'LI'
+// | 'LK'
+// | 'LR'
+// | 'LS'
+// | 'LT'
+// | 'LU'
+// | 'LV'
+// | 'LY'
+// | 'MA'
+// | 'MC'
+// | 'MD'
+// | 'ME'
+// | 'MG'
+// | 'MH'
+// | 'MK'
+// | 'ML'
+// | 'MN'
+// | 'MO'
+// | 'MR'
+// | 'MT'
+// | 'MU'
+// | 'MV'
+// | 'MW'
+// | 'MX'
+// | 'MY'
+// | 'MZ'
+// | 'NA'
+// | 'NE'
+// | 'NG'
+// | 'NI'
+// | 'NL'
+// | 'NO'
+// | 'NP'
+// | 'NR'
+// | 'NZ'
+// | 'OM'
+// | 'PA'
+// | 'PE'
+// | 'PG'
+// | 'PH'
+// | 'PK'
+// | 'PL'
+// | 'PS'
+// | 'PT'
+// | 'PW'
+// | 'PY'
+// | 'QA'
+// | 'RO'
+// | 'RS'
+// | 'RW'
+// | 'SA'
+// | 'SB'
+// | 'SC'
+// | 'SE'
+// | 'SG'
+// | 'SI'
+// | 'SK'
+// | 'SL'
+// | 'SM'
+// | 'SN'
+// | 'SR'
+// | 'ST'
+// | 'SV'
+// | 'SZ'
+// | 'TD'
+// | 'TG'
+// | 'TH'
+// | 'TJ'
+// | 'TL'
+// | 'TN'
+// | 'TO'
+// | 'TR'
+// | 'TT'
+// | 'TV'
+// | 'TW'
+// | 'TZ'
+// | 'UA'
+// | 'UG'
+// | 'US'
+// | 'UY'
+// | 'UZ'
+// | 'VC'
+// | 'VE'
+// | 'VN'
+// | 'VU'
+// | 'WS'
+// | 'XK'
+// | 'ZA'
+// | 'ZM'
+// | 'ZW'
+
+// // API fetching
+// export interface NewReleasesArgs {
+// accessToken: string
+// limit: number
+// country: countries
+// }
+
+// export interface FeaturedPlaylistsProps {
+// limit: number
+// accessToken: string
+// country: countries
+// }
+
+// export interface RequestArg {
+// type: 'playlists' | 'albums'
+// accessToken: string
+// id: string
+// }
+
+// // ----------------------------------------------------
+
+// export interface ImageSource {
+// url: string
+// width: number
+// height: number
+// }
+
+// interface ColorRaw {
+// hex: string
+// }
+
+// interface ExtractedColors {
+// colorRaw: ColorRaw
+// }
+
+// interface GalleryItem {
+// sources: ImageSource[]
+// }
+
+// interface Gallery {
+// items: GalleryItem[]
+// }
+
+// interface AvatarImage {
+// sources: ImageSource[]
+// extractedColors: ExtractedColors
+// }
+
+// interface HeaderImage {
+// sources: ImageSource[]
+// extractedColors: ExtractedColors
+// }
+
+// interface Visuals {
+// avatarImage: AvatarImage
+// gallery: Gallery
+// headerImage: HeaderImage
+// }
+
+// export interface ArtistData {
+// name: string
+// id: string
+// }
+// export interface SearchBannerItem {
+// title?: string
+// imageUrl?: string
+// bgColor?: string
+// }
+
+// export interface PlayListItem {
+// title?: string
+// imageUrl?: string
+// author?: string
+// id?: string
+// }
+
+// export interface ArtistItem {
+// name?: string
+// imageUrl?: string
+// id?: string
+// }
+
+// export interface AlbumItem {
+// title?: string
+// imageUrl?: string
+// id?: string
+// author?: string
+// dateTime?: string
+// }
+
+// export interface SectionItemI extends PlayListItem, ArtistItem, AlbumItem {
+// isArtist?: boolean
+// isLoading?: boolean
+// columnWidth?: number
+// dataType?: string
+// artists?: ArtistData[]
+// desc?: string
+// publisher?: string
+// dateAdd?: string
+// type?: 'default' | 'playlist' | 'album' | 'artistList' | 'artist' | 'show'
+// }
+
+// export interface SectionProps {
+// title?: string
+// href?: string
+// data?: ResponseSectionItem[]
+// dataType?: string
+// isFull?: boolean
+// isClickable?: boolean
+// hideHeader?: boolean
+// type?: 'default' | 'playlist' | 'album' | 'artistList' | 'artist' | 'show'
+// apiType: 'spotify' | 'rapid' | undefined
+// }
+
+// export interface SongItemTagProps {
+// thumbnailUrl?: string
+// name?: string
+// isLoading?: boolean
+// id?: string
+// setBgColor: React.Dispatch>
+// }
+
+// export interface HeaderProps {
+// title?: string
+// thumbnail?: string
+// quantity?: number
+// type?: 'Playlist' | 'album' | 'single' | 'compilation' | 'podcast' | 'episode'
+// bgColor?: string
+// desc?: string
+// isLoading?: boolean
+// artists?: string
+// releaseDate?: string
+// isWhiteColor?: boolean
+// headerType?: 'playlist' | 'album' | 'show'
+// publisher?: string
+// showName?: string
+// showId?: string
+// }
+
+// export type LibSelection = {
+// title: string
+// id: string
+// type: 'playlist' | 'album' | 'artist'
+// active: boolean
+// }
+
+// export interface ResponseLibItem {
+// id?: string
+// owner?: {
+// display_name?: string
+// }
+// artists?: ArtistData[]
+// name?: string
+// images?: {
+// url?: string
+// }[]
+// }
+
+// export interface ResponseSectionItem {
+// id?: string
+// name?: string
+// images:
+// | {
+// url: string
+// }[]
+// | any
+// publisher?: string
+// artists?: ArtistData[]
+// description?: string
+// owner?: {
+// display_name: string
+// }
+// release_date?: string
+// uri?: string
+// visuals?: Visuals
+// profile?: any
+// releases?: any
+// coverArt?: any
+// date?: any
+// }
+
+// export interface SongItemProps {
+// songName?: string
+// artists?: ArtistData[]
+// thumb?: string
+// duration?: number
+// order?: number
+// isLoading?: boolean
+// albumData?: SpotifyAlbum
+// dateAdd?: string
+// isExplicit?: boolean
+// type?: 'default' | 'playlist' | 'album' | 'search' | 'artist'
+// id?: string
+// }
+// export interface SongListProps {
+// songList: SongItemProps[]
+// pivotTop: number
+// top: number
+// isLoading?: boolean
+// type?: 'default' | 'playlist' | 'album' | 'search' | 'artist'
+// }
+
+// // ____________Artist______________
+
+// export interface ArtistProfile {
+// id: string | undefined
+// name: string | undefined
+// bio: string | undefined
+// isVerified: boolean | undefined
+// biography?: { text: string }
+// }
+
+// export interface ArtistTopCity {
+// city: string
+// country: string
+// numberOfListeners: number
+// region: string
+// }
+
+// export interface ArtistStats {
+// followers: number
+// monthlyListeners: number
+// topCities: { items: ArtistTopCity[] }
+// }
+
+// export interface SpotifyAlbum {
+// artists?: ArtistData[]
+// images?: { url?: string }[]
+// id?: string
+// name?: string
+// }
+
+// export interface SpotifyTrack {
+// album?: SpotifyAlbum
+// artists?: ArtistData[]
+// duration_ms?: number
+// name?: string
+// id?: string
+// }
+
+// export interface RapidTrack {
+// soundcloudTrack?: {
+// audio?: {
+// quality?: string
+// url?: string
+// durationMs?: number
+// durationText?: string
+// }[]
+// }
+// }
+
+// // ------Shows------
+
+// export interface ShowItem {
+// description?: string
+// html_description?: string
+// duration_ms?: number
+// explicit?: boolean
+// id?: string
+// images?: ImageSource[]
+// name?: string
+// release_date?: string
+// }
+
+// export interface ShowData {
+// description?: string
+// html_description?: string
+// episodes?: {
+// items?: ShowItem[]
+// }
+// explicit?: boolean
+// id?: string
+// images?: ImageSource[]
+// name?: string
+// publisher?: string
+// total_episodes?: number
+// }
+
+// export interface Episode extends ShowItem {
+// show?: {
+// id?: string
+// images?: ImageSource[]
+// name?: string
+// publisher?: string
+// }
+// }
+
+// // ------user------
+// export interface UserData {
+// display_name?: string
+// id?: string
+// images?: ImageSource[]
+// email?: string
+// country?: countries
+// followers?: { total?: number }
+// }
\ No newline at end of file
diff --git a/src/types/user.ts b/src/types/user.ts
new file mode 100644
index 0000000..788a89e
--- /dev/null
+++ b/src/types/user.ts
@@ -0,0 +1,11 @@
+import { countries } from './countries'
+import { ImageSource } from './others'
+
+export interface UserData {
+ display_name?: string
+ id?: string
+ images?: ImageSource[]
+ email?: string
+ country?: countries
+ followers?: { total?: number }
+}
diff --git a/src/utils/dateFormatConvertor.ts b/src/utils/dateFormatConvertor.ts
new file mode 100644
index 0000000..dd4d9c6
--- /dev/null
+++ b/src/utils/dateFormatConvertor.ts
@@ -0,0 +1,11 @@
+const dateFormatConvertor = (dateString: string | undefined): string => {
+ if(!dateString) return ''
+ const date = new Date(dateString)
+ return date.toLocaleDateString('en-US', {
+ month: 'long',
+ day: 'numeric',
+ year: 'numeric',
+ })
+}
+
+export default dateFormatConvertor
diff --git a/src/utils/deleteAllCookies.ts b/src/utils/deleteAllCookies.ts
new file mode 100644
index 0000000..5d60571
--- /dev/null
+++ b/src/utils/deleteAllCookies.ts
@@ -0,0 +1,25 @@
+//fix 403 Forbidden
+
+const deleteAllCookies = () => {
+ document.cookie = document.cookie.split(';').reduce((newCookie1, keyVal) => {
+ const pair = keyVal.trim().split('=')
+ if (pair[0]) {
+ if (pair[0] !== 'path' && pair[0] !== 'expires') {
+ newCookie1 += pair[0] + '=;'
+ }
+ }
+ return newCookie1
+ }, 'expires=Thu, 01 Jan 1970 00:00:00 UTC; path:/;')
+
+ caches.keys().then((keys) => {
+ keys.forEach((key) => caches.delete(key))
+ })
+
+ // indexedDB.databases().then((dbs) => {
+ // dbs.forEach((db) => indexedDB.deleteDatabase(db.name as string))
+ // })
+
+ sessionStorage.clear()
+}
+
+export default deleteAllCookies
diff --git a/src/utils/documentTitle.ts b/src/utils/documentTitle.ts
new file mode 100644
index 0000000..45d1387
--- /dev/null
+++ b/src/utils/documentTitle.ts
@@ -0,0 +1,6 @@
+const documentTitle = (title: string): void => {
+ if (!title) return
+ window.document.title = title
+}
+
+export default documentTitle
\ No newline at end of file
diff --git a/src/utils/durationConvertor.ts b/src/utils/durationConvertor.ts
new file mode 100644
index 0000000..f252f6a
--- /dev/null
+++ b/src/utils/durationConvertor.ts
@@ -0,0 +1,29 @@
+interface durationConvertorParams {
+ milliseconds?: number
+ type?: 'short' | 'long'
+}
+
+const durationConvertor = (params: Partial): string => {
+ const { milliseconds, type = 'short' } = params
+ if (!milliseconds && milliseconds !== 0) return ''
+ const totalSeconds = Math.floor(milliseconds / 1000)
+ const hours = Math.floor(totalSeconds / 3600)
+ const minutes = `${('0' + Math.floor((totalSeconds % 3600) / 60)).slice(-2)}`
+ const seconds = `${('0' + (totalSeconds % 60)).slice(-2)}`
+
+ if (type === 'short') {
+ if (hours > 0) {
+ return `${hours}:${minutes}:${seconds}`
+ }
+
+ return `${minutes}:${seconds}`
+ } else {
+ if (hours > 0) {
+ return `${hours} hours ${minutes} min ${seconds} sec`
+ }
+
+ return `${minutes} min ${seconds} sec`
+ }
+}
+
+export default durationConvertor
diff --git a/src/utils/fetchData.ts b/src/utils/fetchData.ts
deleted file mode 100644
index 87fd60d..0000000
--- a/src/utils/fetchData.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import axios from 'axios'
-
-export const types = {
- albums: 'albums',
- artists: 'artists',
- episodes: 'episodes',
- genres: 'genres',
- playlists: 'playlists',
- podcasts: 'podcasts',
- tracks: 'tracks',
- users: 'users',
- multi: 'multi',
-}
-
-export const options = {
- search: 'search',
- artists: 'artists',
- tracks: 'tracks',
-}
-
-
-export const fetchData = async (
- option: string,
- param: string,
- type = 'multi',
- limit = 10
-) => {
- const options = {
- method: 'GET',
- url: `https://spotify-web2.p.rapidapi.com/${option}/`,
- params: {
- q: param,
- type: type,
- offset: '0',
- limit: `${limit}`,
- numberOfTopResults: '5',
- },
- headers: {
- 'X-RapidAPI-Key': process.env.RAPID_SPOTIFY_API,
- 'X-RapidAPI-Host': 'spotify-web2.p.rapidapi.com',
- },
- }
- const response = await axios.request(options)
- return response
-}
diff --git a/src/utils/fetchHomePageData.ts b/src/utils/fetchHomePageData.ts
new file mode 100644
index 0000000..45c56f1
--- /dev/null
+++ b/src/utils/fetchHomePageData.ts
@@ -0,0 +1,114 @@
+import browserApi from '@/apis/browserApi'
+import { getCategoryPlaylist } from '@/apis/categoriesApi'
+import searchApi from '@/apis/searchApi'
+import { SectionProps } from '@/types/section'
+
+interface PropsType {
+ type: 'newRelease' | 'featuredPlaylists' | 'topMixes' | 'suggestedArtists' | 'category'
+ setData: React.Dispatch>
+ limit?: number
+ categoryId?: string
+ categoryName?: string
+}
+
+const fetchHomePageData = (params: Partial) => {
+ const { type, setData, limit = 50, categoryId, categoryName } = params
+
+ if (type === 'category') {
+ const fetchData = async () => {
+ const data = await getCategoryPlaylist({ id: categoryId, limit: 20 })
+ const dataNormalized = data?.playlists?.items?.filter((item: any) => item)
+ setData!({
+ title: categoryName,
+ href: `/genre/${categoryId}`,
+ apiType: 'spotify',
+ data: dataNormalized,
+ dataType: 'playlist',
+ })
+ }
+ fetchData()
+ return
+ }
+
+ switch (type) {
+ case 'newRelease': {
+ const fetchData = async () => {
+ const response = await browserApi({
+ limit: limit,
+ country: 'VN',
+ type: 'new-releases',
+ })
+ setData!({
+ title: 'New Releases',
+ href: '/section/newReleases',
+ dataType: 'album',
+ data: response,
+ apiType: 'spotify',
+ })
+ }
+ fetchData()
+ break
+ }
+
+ case 'featuredPlaylists': {
+ const fetchData = async () => {
+ const response = await browserApi({
+ limit: limit,
+ country: 'VN',
+ type: 'featured-playlists',
+ })
+ setData!({
+ title: 'Featured Playlists',
+ href: '/section/featurePlaylist',
+ dataType: 'playlist',
+ data: response,
+ apiType: 'spotify',
+ })
+ }
+ fetchData()
+ break
+ }
+
+ case 'topMixes': {
+ const fetchData = async () => {
+ const response = await searchApi({
+ query: 'chill mix lofi',
+ types: ['playlist'],
+ limit: limit,
+ })
+ setData!({
+ title: 'Top mixes',
+ href: '/section/topMixes',
+ dataType: 'playlist',
+ data: response?.playlists.items,
+ apiType: 'spotify',
+ })
+ }
+ fetchData()
+ break
+ }
+
+ case 'suggestedArtists': {
+ const fetchData = async () => {
+ const response = await searchApi({
+ query: 'artist',
+ types: ['artist'],
+ limit: limit,
+ })
+ setData!({
+ title: 'Suggested artists',
+ href: '/section/suggestedArtists',
+ dataType: 'artist',
+ data: response?.artists.items
+ .sort((a: any, b: any) => -a.popularity + b.popularity)
+ .filter((artist: any) => artist.images.length !== 0),
+ apiType: 'spotify',
+ })
+ }
+ fetchData()
+ break
+ }
+ }
+}
+
+export default fetchHomePageData
diff --git a/src/utils/fetchLocalData.ts b/src/utils/fetchLocalData.ts
new file mode 100644
index 0000000..3fb1bf1
--- /dev/null
+++ b/src/utils/fetchLocalData.ts
@@ -0,0 +1,8 @@
+const fetchLocalData = async (fileName: string) => {
+ const response = await fetch(`../assets/data/${fileName}.json`)
+ const data = await response.json()
+
+ return data
+}
+
+export default fetchLocalData
diff --git a/src/utils/fetchSidebarData.ts b/src/utils/fetchSidebarData.ts
new file mode 100644
index 0000000..04a3697
--- /dev/null
+++ b/src/utils/fetchSidebarData.ts
@@ -0,0 +1,33 @@
+import { getUserAlbum, getUserPlaylist, getUserTopArtists } from '@/apis/userApi'
+
+interface argsProps {
+ type: 'playlist' | 'album' | 'artist'
+ userId: string
+}
+
+const fetchSidebarData = async (args: Partial) => {
+ const { type, userId } = args
+
+ switch (type) {
+ case 'playlist': {
+ if (!userId) return
+ const data = await getUserPlaylist(userId as string)
+ return data?.items
+ }
+ case 'artist': {
+ const data = await getUserTopArtists()
+ return data?.items
+ }
+ case 'album': {
+ const data = await getUserAlbum()
+ return data?.items
+ }
+ default: {
+ if (!userId) return
+ const data = await getUserPlaylist(userId as string)
+ return data?.items
+ }
+ }
+}
+
+export default fetchSidebarData
diff --git a/src/utils/generateRandomString.ts b/src/utils/generateRandomString.ts
new file mode 100644
index 0000000..42df06e
--- /dev/null
+++ b/src/utils/generateRandomString.ts
@@ -0,0 +1,11 @@
+const generateRandomString = (length: number) => {
+ let text = ''
+ const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+
+ for (let i = 0; i < length; i++) {
+ text += possible.charAt(Math.floor(Math.random() * possible.length))
+ }
+ return text
+}
+
+export default generateRandomString
diff --git a/src/utils/htmlCleaner.ts b/src/utils/htmlCleaner.ts
new file mode 100644
index 0000000..9d42208
--- /dev/null
+++ b/src/utils/htmlCleaner.ts
@@ -0,0 +1,26 @@
+import { ArtistData } from '@/types/artist'
+
+export default function htmlCleaner(
+ htmlString: string | undefined
+): ArtistData[] | null | string {
+ if (!htmlString) return null
+ const parser = new DOMParser()
+ const doc = parser.parseFromString(htmlString, 'text/html')
+ const playlists: ArtistData[] = []
+
+ const links = doc.querySelectorAll('a')
+ if (links.length === 0) {
+ return htmlString
+ }
+
+ links.forEach((link) => {
+ const name = link.textContent?.trim()
+ const href = link.getAttribute('href')
+ if (name && href && href.startsWith('spotify:playlist:')) {
+ const id = href.split(':')[2]
+ playlists.push({ name, id })
+ }
+ })
+
+ return playlists
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..94048d8
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,27 @@
+import dateFormatConvertor from './dateFormatConvertor'
+import fetchLocalData from './fetchLocalData'
+import fetchSidebarData from './fetchSidebarData'
+import htmlCleaner from './htmlCleaner'
+import stringCleaner from './stringCleaner'
+import { unicodeDecoder } from './unicodeDecoder'
+import fetchHomePageData from './fetchHomePageData'
+import normalizeAlbum from './normalizeAlbum'
+import normalizeTrack from './normalizeTrack'
+import transformDomain from './transformDomain'
+import documentTitle from './documentTitle'
+import deleteAllCookies from './deleteAllCookies'
+
+export {
+ dateFormatConvertor,
+ fetchLocalData,
+ fetchSidebarData,
+ htmlCleaner,
+ stringCleaner,
+ unicodeDecoder,
+ fetchHomePageData,
+ normalizeAlbum,
+ normalizeTrack,
+ transformDomain,
+ documentTitle,
+ deleteAllCookies,
+}
diff --git a/src/utils/normalizeAlbum.ts b/src/utils/normalizeAlbum.ts
new file mode 100644
index 0000000..622ba5b
--- /dev/null
+++ b/src/utils/normalizeAlbum.ts
@@ -0,0 +1,10 @@
+import { SpotifyAlbum } from '@/types/album'
+
+const normalizeAlbum = (album: any): SpotifyAlbum => {
+ return {
+ images: album.coverArt.sources,
+ id: album.uri.split(':').pop(),
+ }
+}
+
+export default normalizeAlbum
diff --git a/src/utils/normalizeTrack.ts b/src/utils/normalizeTrack.ts
new file mode 100644
index 0000000..bc436c0
--- /dev/null
+++ b/src/utils/normalizeTrack.ts
@@ -0,0 +1,16 @@
+import { RapidArtistTrack, SpotifyTrack } from '@/types/track'
+import { normalizeAlbum } from '.'
+
+const normalizeTrack = (rapidTrack: RapidArtistTrack): SpotifyTrack => {
+ return {
+ album: normalizeAlbum(rapidTrack?.track?.album),
+ artists: rapidTrack?.track?.artists.items.map((item: any) => {
+ return { name: item?.profile?.name, id: item?.uri.split(':').pop() }
+ }),
+ duration_ms: rapidTrack?.track?.duration?.totalMilliseconds,
+ name: rapidTrack?.track?.name,
+ id: rapidTrack?.track?.id,
+ }
+}
+
+export default normalizeTrack
diff --git a/src/utils/stringCleaner.ts b/src/utils/stringCleaner.ts
new file mode 100644
index 0000000..089bd12
--- /dev/null
+++ b/src/utils/stringCleaner.ts
@@ -0,0 +1,14 @@
+const stringCleaner = (input?: string): string => {
+ if(!input) return ''
+ // Replace HTML entities
+ const replacedEntities = input
+ .replace(/&/g, "&")
+ .replace(///g, "/");
+
+ // Remove duplicate slashes
+ const cleanedString = replacedEntities.replace(/\/{2,}/g, "/");
+
+ return cleanedString;
+}
+
+export default stringCleaner
\ No newline at end of file
diff --git a/src/utils/transformDomain.ts b/src/utils/transformDomain.ts
new file mode 100644
index 0000000..56fa27d
--- /dev/null
+++ b/src/utils/transformDomain.ts
@@ -0,0 +1,7 @@
+import { REDIRECT_URI } from '@/constants/auth'
+
+const transformDomain = (inputString: string): string => {
+ return inputString.replace(/https:\/\/open\.spotify\.com\//g, REDIRECT_URI)
+}
+
+export default transformDomain
diff --git a/src/utils/unicodeDecoder.ts b/src/utils/unicodeDecoder.ts
new file mode 100644
index 0000000..4ef57df
--- /dev/null
+++ b/src/utils/unicodeDecoder.ts
@@ -0,0 +1,9 @@
+export const unicodeDecoder = (input: string | undefined): string => {
+ if(!input) return ''
+ return input.replace(
+ /&#(\d+);/g,
+ (_: string, dec: string): string => {
+ return String.fromCharCode(parseInt(dec, 10))
+ }
+ )
+}
diff --git a/types.d.ts b/types.d.ts
new file mode 100644
index 0000000..bfff402
--- /dev/null
+++ b/types.d.ts
@@ -0,0 +1 @@
+declare module '@uidotdev/usehooks';
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 4c71434..2f6343f 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,7 +6,7 @@ export default defineConfig({
plugins: [react()],
resolve: {
alias: {
- '@': '/src'
- }
- }
+ '@': '/src',
+ },
+ },
})