diff --git a/server/app/api.py b/server/app/api.py index 007c4632..65922c60 100644 --- a/server/app/api.py +++ b/server/app/api.py @@ -90,8 +90,6 @@ def get_album_artists(album, artist): artists = [] for track in tracks: - print(track['artists']) - for artist in track['artists']: if artist not in artists: artists.append(artist) @@ -100,7 +98,7 @@ def get_album_artists(album, artist): for artist in artists: artist_obj = { "name": artist, - "image": "http://127.0.0.1:8900/images/artists/" + artist.replace('/', '::') + ".jpg" + "image": "http://127.0.0.1:8900/images/artists/webp/" + artist.replace('/', '::') + ".webp" } final_artists.append(artist_obj) @@ -245,17 +243,38 @@ def getAlbumSongs(query: str): if track['album'] == album and track['album_artist'] == artist: songs.append(track) + songs = helpers.remove_duplicates(songs) + album_obj = { "name": album, "count": len(songs), "duration": sum(song['length'] for song in songs), "image": songs[0]['image'], - "artist": songs[0]['album_artist'] + "artist": songs[0]['album_artist'], + "artist_image": "http://127.0.0.1:8900/images/artists/webp/" + songs[0]['album_artist'].replace('/', '::') + ".webp" } - return {'songs': helpers.remove_duplicates(songs), 'info': album_obj} + return {'songs': songs, 'info': album_obj} @bp.route('/album//<artist>/bio') +@cache.cached() def drop_db(title, artist): - return functions.getAlbumBio(title, artist) + bio = functions.getAlbumBio(title, artist) + return {'bio': bio} + + +@bp.route('/convert') +def convert_images_to_webp(): + path = os.path.join(home_dir, helpers.app_dir, 'images', 'artists') + final_path = os.path.join( + home_dir, helpers.app_dir, 'images', 'artists', 'webp') + + for file in os.scandir(path): + if file.name.endswith(".jpg"): + print(file.name) + print(os.path.join(final_path, file.name.replace('.jpg', '.webp'))) + img = helpers.Image.open(os.path.join(path, file.name)).resize((150, 150), helpers.Image.ANTIALIAS) + img.save(os.path.join(final_path, file.name.replace('.jpg', '.webp')), format='webp') + + return "Done" diff --git a/server/app/functions.py b/server/app/functions.py index c1efc9d4..df0972cc 100644 --- a/server/app/functions.py +++ b/server/app/functions.py @@ -60,7 +60,7 @@ def populate_images(): try: response = requests.get(url) - except: + except requests.ConnectionError: print('\n sleeping for 5 seconds') time.sleep(5) response = requests.get(url) @@ -225,16 +225,19 @@ def getTags(full_path: str) -> dict: def getAlbumBio(title: str, album_artist: str) -> dict: last_fm_url = 'http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key={}&artist={}&album={}&format=json'.format( helpers.last_fm_api_key, album_artist, title) - - response = requests.get(last_fm_url) - data = response.json() - + try: - bio = data['album']['wiki']['content'] + response = requests.get(last_fm_url) + data = response.json() + except requests.ConnectionError: + return "None" + + try: + bio = data['album']['wiki']['summary'].split('<a href="https://www.last.fm/')[0] except KeyError: bio = None if bio is None: return "None" - return {'data': data} + return bio diff --git a/src/assets/css/_variables.scss b/src/assets/css/_variables.scss index f0ba04bf..1ea250cf 100644 --- a/src/assets/css/_variables.scss +++ b/src/assets/css/_variables.scss @@ -1,6 +1,6 @@ // colors -$card-dark: #000203; +$card-dark: #08090C; $red: #df4646; $blue: rgb(5, 80, 150); $green: rgb(67, 148, 67); diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss index bc56122f..7a96559e 100644 --- a/src/assets/css/global.scss +++ b/src/assets/css/global.scss @@ -36,6 +36,10 @@ a { color: #fff; } +.border { + border: solid 1px rgba(39, 38, 38, 0.329); +} + .separator { border-top: 0.1px $separator solid; color: transparent; @@ -46,6 +50,10 @@ a { border: none; } +.card-dark { + background-color: $card-dark; +} + .hidden { display: none; } diff --git a/src/assets/images/Jim_Reeves.png b/src/assets/images/Jim_Reeves.png deleted file mode 100644 index 22da0535..00000000 Binary files a/src/assets/images/Jim_Reeves.png and /dev/null differ diff --git a/src/assets/images/banner.jpg b/src/assets/images/banner.jpg deleted file mode 100644 index 0a8ff7cd..00000000 Binary files a/src/assets/images/banner.jpg and /dev/null differ diff --git a/src/assets/images/dark-bg.jpg b/src/assets/images/dark-bg.jpg deleted file mode 100644 index 61d086b4..00000000 Binary files a/src/assets/images/dark-bg.jpg and /dev/null differ diff --git a/src/assets/images/eggs.jpg b/src/assets/images/eggs.jpg new file mode 100644 index 00000000..148dfd98 Binary files /dev/null and b/src/assets/images/eggs.jpg differ diff --git a/src/assets/images/featured-artists.webp b/src/assets/images/featured-artists.webp deleted file mode 100644 index 2f0fc5b1..00000000 Binary files a/src/assets/images/featured-artists.webp and /dev/null differ diff --git a/src/assets/images/girl1.jpg b/src/assets/images/girl1.jpg deleted file mode 100644 index 04db3370..00000000 Binary files a/src/assets/images/girl1.jpg and /dev/null differ diff --git a/src/assets/images/girl2.jpg b/src/assets/images/girl2.jpg deleted file mode 100644 index 76785dd3..00000000 Binary files a/src/assets/images/girl2.jpg and /dev/null differ diff --git a/src/assets/images/girl3.jpg b/src/assets/images/girl3.jpg deleted file mode 100644 index 3b5c4395..00000000 Binary files a/src/assets/images/girl3.jpg and /dev/null differ diff --git a/src/assets/images/girl4.jpg b/src/assets/images/girl4.jpg deleted file mode 100644 index 4212c875..00000000 Binary files a/src/assets/images/girl4.jpg and /dev/null differ diff --git a/src/assets/images/girl5.jpg b/src/assets/images/girl5.jpg deleted file mode 100644 index 410506bc..00000000 Binary files a/src/assets/images/girl5.jpg and /dev/null differ diff --git a/src/assets/images/gradient1.gif b/src/assets/images/gradient1.gif deleted file mode 100644 index 489aca67..00000000 Binary files a/src/assets/images/gradient1.gif and /dev/null differ diff --git a/src/assets/images/gradient2.gif b/src/assets/images/gradient2.gif deleted file mode 100644 index 853548d3..00000000 Binary files a/src/assets/images/gradient2.gif and /dev/null differ diff --git a/src/assets/images/htf.jpeg b/src/assets/images/htf.jpeg deleted file mode 100644 index 6c422538..00000000 Binary files a/src/assets/images/htf.jpeg and /dev/null differ diff --git a/src/assets/images/jw.jpeg b/src/assets/images/jw.jpeg deleted file mode 100644 index e30a2f00..00000000 Binary files a/src/assets/images/jw.jpeg and /dev/null differ diff --git a/src/assets/images/light-bg.jpg b/src/assets/images/light-bg.jpg deleted file mode 100644 index 1dd20b97..00000000 Binary files a/src/assets/images/light-bg.jpg and /dev/null differ diff --git a/src/assets/images/thriller.jpg b/src/assets/images/thriller.jpg deleted file mode 100644 index 4191ade2..00000000 Binary files a/src/assets/images/thriller.jpg and /dev/null differ diff --git a/src/assets/images/tk.jpg b/src/assets/images/tk.jpg deleted file mode 100644 index c03af780..00000000 Binary files a/src/assets/images/tk.jpg and /dev/null differ diff --git a/src/assets/images/weed.jpg b/src/assets/images/weed.jpg deleted file mode 100644 index 0a467662..00000000 Binary files a/src/assets/images/weed.jpg and /dev/null differ diff --git a/src/components/AlbumView/AlbumBio.vue b/src/components/AlbumView/AlbumBio.vue index 93c5bc06..f87017a7 100644 --- a/src/components/AlbumView/AlbumBio.vue +++ b/src/components/AlbumView/AlbumBio.vue @@ -1,88 +1,71 @@ <template> - <div class="al-bio rounded"> - <div class="heading"> - The Very Best Of UB40: ALBUM BIOGRAPHY - <div class="tags"> - <div class="item" v-for="tag in tags" :key="tag"> - {{ tag }} - </div> - </div> - </div> - <div class="separator"></div> - <div class="content"> - Two years after he prematurely left us, the Juice WRLD story continues - with Fighting Demons. The rapper's second posthumous album dropped at - midnight, and is the followup to Legends Never Die, which arrived in July - 2020 and hit No. 1 on the Billboard 200 chart. - <br /><br /> - Featuring the previously-released numbers “Wandered to LA” with Justin - Bieber, and “Already Dead,” Fighting Demons is a call to arms, a reminder - for addicts to get help and for those struggling with mental health - problems to keep up the fight. The rising hip-hop star (real name Jarad - Higgins) was just 21 when he died of an accidental overdose of oxycodone - and codeine. Following his death on Dec. 9, 2019, his mother, Carmela - Wallace, created the Live Free 999 Fund, to help youth struggling with - mental health and substance use issues. - <br /><br /> - “Jarad was always searingly honest about his struggles and through his - musical genius he articulated what was on his heart and mind vividly - through his art. He never gave up and his friends and family never gave up - on offering their support to him,” she continued. “We encourage all of you - who struggle with addiction and mental health to never give up the fight." - Juice's fast rise in the hip-hop space and untimely passing is the focus - of Into the Abyss, a Tommy Oliver-directed documentary set to premiere - Dec. 16 at 8PM on HBO Max. + <div class="al-bio rounded border card-dark"> + <div class="left rounded border"> + <div class="rect rounded"></div> + <div class="circle"></div> </div> + <div class="bio rounded border" v-html="bio"></div> </div> </template> <script> export default { - setup() { - const tags = ["reggea", "ub40", "ali campbell", "astro"]; - return { - tags, - }; - }, + props: ['bio'], }; </script> <style lang="scss"> .al-bio { - background-color: #1f1e1d; padding: $small; + display: grid; + grid-template-columns: 1fr 1fr; + gap: $small; + min-height: 15rem; - .heading { - margin: 0 0 0 $small; - height: 2rem; + .left { position: relative; + height: 100%; + width: 100%; + margin-right: $small; + overflow: hidden; + background-image: url("../../assets/images/eggs.jpg"); + background-position: center; - .tags { + .rect { + width: 10rem; + height: 10rem; position: absolute; - right: 0; - display: flex; - font-weight: normal; + background-color: rgb(196, 58, 58); + box-shadow: 0px 0px 2rem rgb(0, 0, 0); + bottom: -10rem; + left: 7rem; + transform: rotate(45deg) translate(-1rem, -9rem); + z-index: 1; + transition: all .5s ease-in-out; - .item { - padding: $small; - background-color: rgb(15, 74, 114); - margin-left: $small; - border-radius: $small; - } - .item::before { - content: "#" + &:hover { + transition: all .5s ease-in-out; } } - } - .content { - display: inline-block; + .circle { + width: 7rem; + height: 7rem; + position: absolute; + right: 0; + background-color: $blue; + border-radius: 50%; + transform: translateX(-11rem) translateY(7rem); + box-shadow: 0px 0px 2rem rgb(0, 0, 0); + } + } + .bio { + padding: $small; line-height: 1.5rem; - font-size: large; - columns: 2; - column-rule: 1px solid $separator; - font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; - user-select: text; + + &::after { + content: "..."; + } } } </style> \ No newline at end of file diff --git a/src/components/AlbumView/FromTheSameArtist.vue b/src/components/AlbumView/FromTheSameArtist.vue deleted file mode 100644 index 7a26f801..00000000 --- a/src/components/AlbumView/FromTheSameArtist.vue +++ /dev/null @@ -1,241 +0,0 @@ -<template> - <div class="f-a-artists"> - <div class="xcontrols"> - <div class="prev" @click="scrollLeftX"></div> - <div class="next" @click="scrollRightX"></div> - </div> - <div class="artists" ref="artists_dom" v-on:mouseover="say"> - <div class="artist c1"> - <div class="blur"></div> - <div class="s2"></div> - <p>From The Same Artists</p> - </div> - <div class="artist" v-for="album in albums" :key="album"> - <div> - <div class="artist-image rounded"></div> - <p class="artist-name ellipsis">{{ album }}</p> - <div class="a-circle"></div> - </div> - </div> - </div> - </div> -</template> -<script> -import { ref } from "@vue/reactivity"; - -export default { - setup() { - const albums = [ - "Michael John Montgomery", - "2", - "3", - "4", - "5", - "6", - "7", - "8", - "9", - "10", - "11", - ]; - - const artists_dom = ref(null); - - const scrollLeftX = () => { - const dom = artists_dom.value; - dom.scrollBy({ - left: -700, - behavior: "smooth", - }); - }; - - const scrollRightX = () => { - const dom = artists_dom.value; - dom.scrollBy({ - left: 700, - behavior: "smooth", - }); - }; - - const scroll = (e) => { - artists_dom.value.scrollBy({ - left: e.deltaY < 0 ? -700 : 700, - behavior: "smooth", - }); - }; - - const say = () => { - artists_dom.value.addEventListener("wheel", (e) => { - e.preventDefault(); - scroll(e); - }); - }; - - return { - albums, - artists_dom, - say, - scrollLeftX, - scrollRightX, - }; - }, -}; -</script> - -<style lang="scss"> -.f-a-artists { - position: relative; - height: 14em; - width: calc(100%); - background-color: #1f1e1d; - padding: $small; - border-radius: $small; - user-select: none; -} - -.f-a-artists .xcontrols { - z-index: 1; - width: 5rem; - height: 2rem; - position: absolute; - top: 0.5rem; - right: 0.5rem; - display: flex; - justify-content: space-between; - - &:hover { - z-index: 1; - } - - .next { - background: url(../../assets/icons/right-arrow.svg) no-repeat center; - } - - .prev { - background: url(../../assets/icons/right-arrow.svg) no-repeat center; - transform: rotate(180deg); - } - .next, - .prev { - width: 2em; - height: 2em; - background-color: rgb(79, 80, 80); - border-radius: $small; - cursor: pointer; - transition: all 0.5s ease; - } - - .next:hover, - .prev:hover { - background-color: rgb(3, 1, 1); - transition: all 0.5s ease; - } -} - -.f-a-artists .artists { - position: absolute; - bottom: 1em; - width: calc(100% - 1em); - height: 13em; - display: flex; - align-items: flex-end; - flex-wrap: nowrap; - overflow-x: scroll; - - &::-webkit-scrollbar { - display: none; - } -} - -.f-a-artists .artist { - flex: 0 0 auto; - overflow: hidden; - position: relative; - margin-left: $smaller; - margin-right: $smaller; - width: 9em; - height: 10em; - border-radius: $small; - background-color: #064e92; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.5s ease-in-out; - cursor: pointer; - - .artist-image { - width: 7em; - height: 7em; - margin-left: 0.5em; - margin-bottom: $small; - background: no-repeat center/cover url(../../assets/images/girl4.jpg); - } - - .artist-name { - margin: 0; - text-align: center; - font-size: small; - width: 10em; - } - &:hover { - transform: translateY(-0.5em); - transition: all 0.5s ease-in-out; - } -} - -.f-a-artists .c1 { - position: relative; - background: rgb(145, 42, 56); - width: 15em; - overflow: hidden; - margin-left: -0.1rem; - - background: linear-gradient(239deg, #704bca, #d77422, #064e92, #9cb0c3); - background-size: 800% 800%; - - -webkit-animation: similarAlbums 29s ease infinite; - -moz-animation: similarAlbums 29s ease infinite; - -o-animation: similarAlbums 29s ease infinite; - animation: similarAlbums 29s ease infinite; - - &:hover > .s2 { - transition: all 0.5s ease; - background: rgba(53, 53, 146, 0.8); - width: 12em; - height: 12em; - } - - p { - position: absolute; - bottom: -2rem; - margin-left: 0.5rem; - z-index: 1; - font-size: 2rem; - font-weight: 700; - color: #ffffff; - } - - .blur { - position: absolute; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0); - backdrop-filter: blur(40px); - -webkit-backdrop-filter: blur(40px); - -moz-backdrop-filter: blur(40px); - border-radius: $small; - } - - .s2 { - position: absolute; - display: n; - right: -3em; - bottom: -3em; - width: 10em; - height: 10em; - background: rgba(53, 53, 146, 0.445); - border-radius: 50%; - transition: all 0.5s ease; - } -} -</style> \ No newline at end of file diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue index e1b50637..7df6cec0 100644 --- a/src/components/AlbumView/Header.vue +++ b/src/components/AlbumView/Header.vue @@ -1,96 +1,143 @@ <template> - <div class="a-header rounded"> - <div - class="art rounded" - :style="{ - backgroundImage: `url("${album_info.image}")`, - }" - ></div> - <div class="info"> - <div class="top"> - <div class="title">{{ album_info.name }}</div> - <div class="artist">{{ album_info.artist }}</div> - </div> - <div class="separator"></div> - <div class="bottom"> - <div class="stats"> - {{ album_info.count }} Tracks • {{ album_info.duration }} • 2021 + <div class="album-h"> + <div class="a-header rounded card-dark"> + <div + class="art rounded border" + :style="{ + backgroundImage: `url("${album_info.image}")`, + }" + ></div> + <div class="info"> + <div class="top"> + <div class="title">{{ album_info.name }}</div> + <div class="artist">{{ album_info.artist }}</div> + </div> + <div class="separator"></div> + <div class="bottom"> + <div class="stats"> + {{ album_info.count }} Tracks • {{ album_info.duration }} • 2021 + </div> + <button class="play rounded" @click="playAlbum"> + <div class="icon"></div> + <div>Play</div> + </button> </div> - <button class="play rounded" @click="playAlbum"> - <div class="icon"></div> - <div>Play</div> - </button> </div> </div> - <!-- <div class="most-played"> - <div class="art image rounded"></div> - <div> - <div class="title">Girl Of My Dreams</div> - <div class="artist">Juice Wrld, Suga [BTS]</div> - </div> - </div> --> + <div class="right rounded card-dark"> + <div class="circle circular"></div> + <div class="rect rounded"></div> + <div + class="avatar image" + :style="{ + backgroundImage: `url("${album_info.artist_image}")`, + }" + ></div> + </div> </div> </template> <script> -import state from "@/composables/state.js" -import perks from "@/composables/perks.js" +import state from "@/composables/state.js"; +import perks from "@/composables/perks.js"; export default { props: ["album_info"], setup() { function playAlbum() { - perks.updateQueue(state.album_song_list.value[0], "album") + perks.updateQueue(state.album_song_list.value[0], "album"); } return { - playAlbum - } + playAlbum, + }; }, }; </script> <style lang="scss"> +.album-h { + display: grid; + grid-template-columns: 1fr 1fr; + gap: $small; + position: relative; + overflow: hidden; + + .right { + padding: $small; + position: relative; + + .avatar { + height: 8rem; + width: 8rem; + border-radius: 50%; + background-image: url("../../assets/images/null.webp"); + position: absolute; + left: -4.2rem; + top: 3rem; + box-shadow: 0px 0px 1.5rem rgb(0, 0, 0); + + } + + .rect { + width: 20rem; + height: 10rem; + position: absolute; + right: 0; + background-color: rgb(196, 58, 58); + transform: rotate(-45deg) translate(20%, -50%); + z-index: 1; + box-shadow: 0px 0px 2rem rgb(0, 0, 0); + transition: all .5s ease-in-out; + + &:hover { + transition: all .5s ease-in-out; + + right: 2rem; + } + + } + + .circle { + width: 7rem; + height: 7rem; + position: absolute; + right: 0; + background-color: $blue; + border-radius: 50%; + transform: translateX(-11rem) translateY(7rem); + box-shadow: 0px 0px 2rem rgba(0, 0, 0, 0.164); + transition: all .5s ease-in-out; + + &:hover { + transition: all .5s ease-in-out; + + right: 1rem; + } + } + + &:hover { + transition: all .5s ease-in-out; + + .circle { + border-radius: 0; + transform: translateX(-11rem) translateY(7rem) rotate(360deg); + } + + .rect { + border-radius: 0; + transform: translate(20%, -50%) rotate(360deg); + } + } + } +} .a-header { position: relative; height: 14rem; - background: $card-dark; - - backdrop-filter: blur(40px); overflow: hidden; - display: flex; align-items: center; padding: 0 1rem 0 1rem; - .most-played { - position: absolute; - display: flex; - align-items: center; - padding: 0 0 0 $small; - background-color: rgb(24, 24, 24); - border-radius: 1rem; - right: 1rem; - bottom: 1rem; - width: 25rem; - height: 5rem; - - .art { - width: 4rem; - height: 4rem; - background-image: url(../../assets/images/jw.jpeg); - } - - .title { - margin-left: $small; - margin-bottom: $small; - } - - .artist { - font-size: small; - margin-left: $small; - } - } - .art { width: 12rem; height: 12rem; @@ -107,7 +154,7 @@ export default { .top { .title { - font-size: 2rem; + font-size: 1.5rem; font-weight: bold; color: white; } diff --git a/src/components/AlbumsExplorer/AlbumList.vue b/src/components/AlbumsExplorer/AlbumList.vue index a262621f..ac58b1d1 100644 --- a/src/components/AlbumsExplorer/AlbumList.vue +++ b/src/components/AlbumsExplorer/AlbumList.vue @@ -164,7 +164,7 @@ export default { .album-art { height: 9em; width: 9em; - background-image: url(../../assets/images/girl1.jpg); + background-image: url(../../assets/images/null.webp); } .name { diff --git a/src/components/AlbumsExplorer/TopAlbums.vue b/src/components/AlbumsExplorer/TopAlbums.vue index 40fb42a6..99b522d6 100644 --- a/src/components/AlbumsExplorer/TopAlbums.vue +++ b/src/components/AlbumsExplorer/TopAlbums.vue @@ -85,7 +85,7 @@ export default { .image { height: 7rem; width: 7rem; - background-image: url(../../assets/images/girl1.jpg); + background-image: url(../../assets/images/null.webp); border-radius: $small; } @@ -144,7 +144,7 @@ export default { background-color: rgb(177, 116, 2); .image { - background-image: url(../../assets/images/girl2.jpg); + background-image: url(../../assets/images/null.webp); } } @@ -152,7 +152,7 @@ export default { background-color: rgb(0, 74, 117); .image { - background-image: url(../../assets/images/girl3.jpg); + background-image: url(../../assets/images/null.webp); } } diff --git a/src/components/ArtistsExplorer/ArtistsList.vue b/src/components/ArtistsExplorer/ArtistsList.vue index 752eb4b7..d1a9eef1 100644 --- a/src/components/ArtistsExplorer/ArtistsList.vue +++ b/src/components/ArtistsExplorer/ArtistsList.vue @@ -81,7 +81,7 @@ export default { height: 9em; width: 9em; border-radius: 50%; - background-image: url(../../assets/images/girl1.jpg); + background-image: url(../../assets/images/null.webp); } .name { diff --git a/src/components/ArtistsExplorer/TopArtists.vue b/src/components/ArtistsExplorer/TopArtists.vue index 80a3e54f..72de04e0 100644 --- a/src/components/ArtistsExplorer/TopArtists.vue +++ b/src/components/ArtistsExplorer/TopArtists.vue @@ -81,7 +81,7 @@ export default { .image { height: 7rem; width: 7rem; - background-image: url(../../assets/images/girl1.jpg); + background-image: url("../../assets/images/null.webp"); border-radius: 50%; } @@ -140,7 +140,7 @@ export default { background-color: rgb(177, 116, 2); .image { - background-image: url(../../assets/images/girl2.jpg); + background-image: url("../../assets/images/null.webp"); } } @@ -148,7 +148,7 @@ export default { background-color: rgb(0, 74, 117); .image { - background-image: url(../../assets/images/girl3.jpg); + background-image: url("../../assets/images/null.webp"); } } diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue index be5b2b0d..5fccf71c 100644 --- a/src/components/FolderView/SongList.vue +++ b/src/components/FolderView/SongList.vue @@ -36,10 +36,10 @@ import { ref } from "@vue/reactivity"; import { onMounted } from "@vue/runtime-core"; import SongItem from "../SongItem.vue"; -import album from "@/composables/album.js"; +import routeLoader from "@/composables/routeLoader.js"; import perks from "@/composables/perks.js"; import state from "@/composables/state.js"; -import { useRouter, useRoute } from "vue-router"; +import { useRoute } from "vue-router"; export default { props: ["songs"], @@ -51,7 +51,7 @@ export default { const current = ref(perks.current); const search_query = ref(state.search_query); - const route = useRouter(); + // const route = useRouter(); onMounted(() => { routex = useRoute().name; @@ -73,21 +73,24 @@ export default { } function loadAlbum(title, album_artist) { - state.loading.value = true; + // console.log(typeof(title), album_artist) + routeLoader.toAlbum(title, album_artist); + // state.loading.value = true; - album.getAlbumTracks(title, album_artist).then((data) => { - state.album_song_list.value = data.songs; - state.album_info.value = data.info; + // album.getAlbumTracks(title, album_artist).then((data) => { + // state.album_song_list.value = data.songs; + // state.album_info.value = data.info; + + // route.push({ + // name: "AlbumView", + // params: { + // album: title, + // artist: album_artist, + // }, + // }); + // state.loading.value = false; + // }); - route.push({ - name: "AlbumView", - params: { - album: title, - artist: album_artist, - }, - }); - state.loading.value = false; - }); } return { diff --git a/src/components/PlaylistView/FeaturedArtists.vue b/src/components/PlaylistView/FeaturedArtists.vue index 4db3044a..2445b252 100644 --- a/src/components/PlaylistView/FeaturedArtists.vue +++ b/src/components/PlaylistView/FeaturedArtists.vue @@ -1,16 +1,16 @@ <template> - <div class="f-artists"> + <div class="f-artists border"> <div class="xcontrols"> - <div class="prev" @click="scrollLeft"></div> - <div class="next" @click="scrollRight"></div> + <div class="prev border" @click="scrollLeft"></div> + <div class="next border" @click="scrollRight"></div> </div> - <div class="artists" ref="artists_dom" v-on:mouseover="scrollArtists"> - <div class="artist c1 image"> + <div class="artists" ref="artists_dom"> + <div class="artist border c1 image"> <div class="blur"></div> <div class="s2"></div> <p>Featured Artists</p> </div> - <div class="artist" v-for="artist in artists" :key="artist"> + <div class="artist border" v-for="artist in artists" :key="artist"> <div> <div class="artist-image image" @@ -47,23 +47,8 @@ export default { }); }; - const scroll = (e) => { - artists_dom.value.scrollBy({ - left: e.deltaY < 0 ? -700 : 700, - behavior: "smooth", - }); - }; - - const scrollArtists = () => { - artists_dom.value.addEventListener("wheel", (e) => { - e.preventDefault(); - scroll(e); - }); - }; - return { artists_dom, - scrollArtists, scrollLeft, scrollRight, }; @@ -145,24 +130,23 @@ export default { width: 9em; height: 11em; border-radius: $small; - background-color: #0f0e0e; + background-color: #232452; display: flex; align-items: center; justify-content: center; cursor: pointer; - border: solid 1px rgba(165, 151, 151, 0.055); .artist-image { width: 7em; height: 7em; border-radius: 50%; margin-bottom: $small; - background: url(../../assets/images/girl1.jpg); + background: url("../../assets/images/null.webp"); background-size: 7rem 7rem; background-repeat: no-repeat; background-position: center; - transition: all 0.75s ease-in-out; - border: solid 1px rgba(165, 151, 151, 0.055); + transition: all 0.5s ease-in-out; + border: solid 1px rgba(5, 5, 5, 0.055); box-shadow: 0px 0px 80px rgb(0, 0, 0); } @@ -190,15 +174,15 @@ export default { background-image: linear-gradient( 320deg, - hsl(0deg 3% 6%) 13%, - hsl(211deg 81% 23%) 50%, - hsl(209deg 94% 30%) 87% + #b63939 13%, + #232452 50%, + #232452 100% ); - transition: all 0.75s ease-in-out; + transition: all 0.5s ease-in-out; &:hover { - background-position: 10%; + background-position: 0%; } p { diff --git a/src/components/PlaylistView/Header.vue b/src/components/PlaylistView/Header.vue index d5e25283..cb78253b 100644 --- a/src/components/PlaylistView/Header.vue +++ b/src/components/PlaylistView/Header.vue @@ -70,7 +70,7 @@ .p-header .banner { margin: 0.5rem; background-color: $blue; - background: url(../../assets/images/girl5.jpg); + background: url("../../assets/images/null.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; @@ -161,7 +161,7 @@ right: 0.5em; bottom: 0em; background-color: $red; - background-image: url(../../assets/images/girl2.jpg); + background-image: url("../../assets/images/null.webp"); } .p-header .info .albums .second { @@ -170,7 +170,7 @@ right: 4em; bottom: -1em !important; background-color: $green; - background-image: url(../../assets/images/girl1.jpg); + background-image: url("../../assets/images/null.webp"); z-index: 1; } @@ -180,7 +180,7 @@ bottom: -1em; right: 9em; background-color: $green; - background-image: url(../../assets/images/girl3.jpg); + background-image: url("../../assets/images/null.webp"); z-index: 2; } diff --git a/src/components/Search.vue b/src/components/Search.vue index 5c29875e..6dcfd72f 100644 --- a/src/components/Search.vue +++ b/src/components/Search.vue @@ -1,5 +1,5 @@ <template> - <div class="right-search" ref="searchComponent"> + <div class="right-search border" ref="searchComponent"> <div class="input"> <div class="search-icon image"></div> <div class="filter"> @@ -424,7 +424,7 @@ export default { background-color: rgb(27, 150, 74); border-radius: 0.5rem; margin: 0 $small 0 $small; - background-image: url(../assets/images/girl3.jpg); + background-image: url(../assets/images/null.webp); } .tags .artist { diff --git a/src/composables/album.js b/src/composables/album.js index 15510d33..93152430 100644 --- a/src/composables/album.js +++ b/src/composables/album.js @@ -38,7 +38,27 @@ const getAlbumArtists = async (name, artist) => { return data.artists; }; +const getAlbumBio = async(name, artist) => { + const res = await fetch( + base_uri + + "/album/" + + encodeURIComponent(name.replaceAll("/", "|")) + + "/" + + encodeURIComponent(artist.replaceAll("/", "|")) + + "/bio" + ); + + if (!res.ok) { + const message = `An error has occured: ${res.status}`; + throw new Error(message); + } + + const data = await res.json(); + return data.bio; +}; + export default { getAlbumTracks, getAlbumArtists, + getAlbumBio }; diff --git a/src/composables/routeLoader.js b/src/composables/routeLoader.js new file mode 100644 index 00000000..69826397 --- /dev/null +++ b/src/composables/routeLoader.js @@ -0,0 +1,43 @@ +import Router from "@/router"; + +import album from "./album.js"; +import state from "./state.js"; + +function toAlbum(title, artist) { + album + .getAlbumTracks(title, artist) + .then((data) => { + state.album_song_list.value = data.songs; + state.album_info.value = data.info; + }) + .then( + album.getAlbumArtists(title, artist).then((data) => { + state.album_artists.value = data; + }) + ) + .then( + album.getAlbumBio(title, artist).then((data) => { + if (data == "None") { + state.album_bio.value = null; + } else { + state.album_bio.value = data; + } + }) + ) + .then( + Router.push({ + name: "AlbumView", + params: { + album: title, + artist: artist, + }, + }) + ) + .catch((error) => { + console.log(error); + }); +} + +export default { + toAlbum, +}; diff --git a/src/composables/state.js b/src/composables/state.js index cd3ead94..06d95659 100644 --- a/src/composables/state.js +++ b/src/composables/state.js @@ -36,6 +36,8 @@ const prev = ref({ const album_song_list = ref([]); const album_info = ref([]); const album_artists = ref([]); +const album_bio = ref(""); + const filters = ref([]); const magic_flag = ref(false); @@ -64,4 +66,5 @@ export default { album_song_list, album_info, album_artists, + album_bio, }; diff --git a/src/views/AlbumView.vue b/src/views/AlbumView.vue index 72bb086a..7dccb5b8 100644 --- a/src/views/AlbumView.vue +++ b/src/views/AlbumView.vue @@ -10,32 +10,29 @@ <div class="separator" id="av-sep"></div> <FeaturedArtists :artists="artists" /> <div class="separator" id="av-sep"></div> - <AlbumBio /> + <AlbumBio :bio="bio" v-if="bio"/> <div class="separator" id="av-sep"></div> - <FromTheSameArtist /> </div> </template> <script> import { useRoute } from "vue-router"; import { onMounted } from "@vue/runtime-core"; +import { onUnmounted } from "@vue/runtime-core"; import Header from "../components/AlbumView/Header.vue"; import AlbumBio from "../components/AlbumView/AlbumBio.vue"; -import FromTheSameArtist from "../components/AlbumView/FromTheSameArtist.vue"; import SongList from "../components/FolderView/SongList.vue"; import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue"; -import album from "@/composables/album.js"; import state from "@/composables/state.js"; -import { onUnmounted } from "@vue/runtime-core"; +import routeLoader from "@/composables/routeLoader.js" export default { components: { Header, AlbumBio, - FromTheSameArtist, SongList, FeaturedArtists, }, @@ -46,18 +43,7 @@ export default { onMounted(() => { if (!state.album_song_list.value.length) { - album.getAlbumTracks(title, album_artists).then((data) => { - state.album_song_list.value = data.songs; - state.album_info.value = data.info; - - state.loading.value = false; - }); - } - - if (state.album_artists.value.length == 0) { - album.getAlbumArtists(title, album_artists).then((data) => { - state.album_artists.value = data; - }); + routeLoader.toAlbum(title, album_artists); } }); @@ -65,12 +51,14 @@ export default { state.album_song_list.value = []; state.album_info.value = {}; state.album_artists.value = []; + state.album_bio.value = ""; }); return { album_songs: state.album_song_list, album_info: state.album_info, artists: state.album_artists, + bio: state.album_bio, }; }, }; diff --git a/src/views/PlaylistView.vue b/src/views/PlaylistView.vue index d67217a1..886c5c5f 100644 --- a/src/views/PlaylistView.vue +++ b/src/views/PlaylistView.vue @@ -3,7 +3,7 @@ <div class="p-bg rounded"> <div class="clip"> <div class="scrollable"> - <SongList /> + <SongList :songs="songs"/> </div> </div> <div class="f-artists-p"> @@ -24,7 +24,9 @@ export default { FeaturedArtists, }, setup() { - return {}; + return { + songs: [], + }; }, }; </script>