tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-08 20:25:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

add a new playlist view header

Browse Source
This commit is contained in:
geoffrey45 2022-01-19 02:10:56 +03:00
parent a3d1b3aaea
commit 06f1e53fa1
14 changed files with 247 additions and 364 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/App.vue
View File

@ -63,7 +63,7 @@ export default {
collapsed.value = !collapsed.value; collapsed.value = !collapsed.value;
} }
let up_next = ref(false); let up_next = ref(true);
let search = ref(false); let search = ref(false);
const expandQueue = () => { const expandQueue = () => {
@ -98,6 +98,18 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
#toggle {
position: absolute;
left: 0.2rem;
width: 4rem;
height: 100%;
background: url(./assets/icons/menu.svg);
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
} }
.logo { .logo {
height: 2rem; height: 2rem;
@ -112,18 +124,6 @@ export default {
animation-iteration-count: 1; animation-iteration-count: 1;
} }
.l-container #toggle {
position: absolute;
left: 0.2rem;
width: 4rem;
height: 100%;
background: url(./assets/icons/menu.svg);
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
}
.r-sidebar { .r-sidebar {
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: none; display: none;

1
src/assets/css/_variables.scss
View File

@ -5,6 +5,7 @@ $red: #df4646;
$blue: rgb(5, 80, 150); $blue: rgb(5, 80, 150);
$green: rgb(67, 148, 67); $green: rgb(67, 148, 67);
$separator: #ffffff46; $separator: #ffffff46;
$pink: rgb(196, 58, 58);
// sizes // sizes
$small: .5em; $small: .5em;
$smaller: .25em; $smaller: .25em;

8
src/assets/css/global.scss
View File

@ -64,9 +64,13 @@ button {
color: inherit; color: inherit;
font-size: 1rem; font-size: 1rem;
cursor: pointer; cursor: pointer;
display: flex;
align-items: center;
background-color: $blue;
border-radius: $small;
&:hover { &:hover {
background-color: rgb(158, 58, 58) !important; background-color: $pink !important;
} }
} }
@ -231,7 +235,7 @@ button {
width: 2rem; width: 2rem;
border-radius: 50%; border-radius: 50%;
background-color: #fff; background-color: #fff;
margin-top: 0rem; margin-top: 0;
background-size: 60%; background-size: 60%;
} }

8
src/components/AlbumView/Header.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="album-h"> <div class="album-h">
<div class="a-header rounded card-dark"> <div class="a-header rounded card-dark border">
<div <div
class="art rounded border" class="art rounded border"
:style="{ :style="{
@ -12,7 +12,7 @@
<div class="title">{{ album_info.name }}</div> <div class="title">{{ album_info.name }}</div>
<div class="artist">{{ album_info.artist }}</div> <div class="artist">{{ album_info.artist }}</div>
</div> </div>
<div class="separator"></div> <div class="separator no-border"></div>
<div class="bottom"> <div class="bottom">
<div class="stats"> <div class="stats">
{{ album_info.count }} Tracks • {{ album_info.duration }} • 2021 {{ album_info.count }} Tracks • {{ album_info.duration }} • 2021
@ -24,7 +24,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="right rounded card-dark"> <div class="right rounded card-dark border">
<div class="circle circular"></div> <div class="circle circular"></div>
<div class="rect rounded"></div> <div class="rect rounded"></div>
<div <div
@ -61,6 +61,7 @@ export default {
gap: $small; gap: $small;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
height: 15rem;
.right { .right {
padding: $small; padding: $small;
@ -132,7 +133,6 @@ export default {
} }
.a-header { .a-header {
position: relative; position: relative;
height: 14rem;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;

3
src/components/FolderView/Header.vue
View File

@ -81,9 +81,6 @@ export default {
height: 100%; height: 100%;
width: 5em; width: 5em;
background-color: rgb(5, 74, 131); background-color: rgb(5, 74, 131);
border-radius: $small;
display: flex;
align-items: center;
padding-left: $small; padding-left: $small;
margin-right: $small; margin-right: $small;

25
src/components/FolderView/SongList.vue
View File

@ -47,20 +47,20 @@ export default {
SongItem, SongItem,
}, },
setup() { setup() {
let routex; let route;
const current = ref(perks.current); const current = ref(perks.current);
const search_query = ref(state.search_query); const search_query = ref(state.search_query);
// const route = useRouter();
onMounted(() => { onMounted(() => {
routex = useRoute().name; route = useRoute().name;
}); });
function updateQueue(song) { function updateQueue(song) {
let type; let type;
switch (routex) { switch (route) {
// check which route the play request come from
case "FolderView": case "FolderView":
type = "folder"; type = "folder";
break; break;
@ -73,24 +73,7 @@ export default {
} }
function loadAlbum(title, album_artist) { function loadAlbum(title, album_artist) {
// console.log(typeof(title), album_artist)
routeLoader.toAlbum(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;
// route.push({
// name: "AlbumView",
// params: {
// album: title,
// artist: album_artist,
// },
// });
// state.loading.value = false;
// });
} }
return { return {

6
src/components/LeftSidebar/Navigation.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="side-nav-container" :class="{ collapsed: collapsed }"> <div class="side-nav-container border" :class="{ collapsed: collapsed }">
<router-link :to="{ name: 'Home' }"> <router-link :to="{ name: 'Home' }">
<div class="nav-button" id="home-button"> <div class="nav-button" id="home-button">
<div class="in"> <div class="in">
@ -93,7 +93,6 @@ export default {
.side-nav-container { .side-nav-container {
padding: $small; padding: $small;
color: #fff; color: #fff;
border-top: 1px solid var(--separator);
margin-bottom: 10px; margin-bottom: 10px;
padding-top: 10px; padding-top: 10px;
@ -112,8 +111,7 @@ export default {
.nav-icon { .nav-icon {
height: 2rem; height: 2rem;
width: 2rem; width: 2rem;
margin-right: 0.5rem; margin: 0 $small 0 $small;
margin-left: 0.6rem;
border-radius: $small; border-radius: $small;
background-color: rgb(26, 24, 24); background-color: rgb(26, 24, 24);
} }

266
src/components/PlaylistView/Header.vue
View File

@ -1,28 +1,23 @@
<template> <template>
<div class="p-header rounded"> <div class="p-header rounded border">
<div class="info rounded"> <div class="info rounded card-dark">
<p class="name">Because I Got High Radio</p> <div>
<p class="text"> <div class="name">Makaveli Radio</div>
The best music to fade to while doing my thing. Featuring artists like <div class="metrics rounded border">45 Tracks • 3 Hours 4 Minutes</div>
Wiz Khalifa, Lil Wayne, Ne-Yo, Ace Of Base, ...
</p>
<div class="lower">
<div class="statistics">
<div class="count s-item"><p>45 Tracks</p></div>
<div class="duration s-item"><p>3 Hrs 45 Min</p></div>
</div> </div>
<hr /> <div class="buttons">
<div class="btns"> <button class="play">
<div class="play s-item"><p>Play Now</p></div> <div class="icon"></div>
<div class="options s-item image"></div> Play
</button>
<button class="menu">
<div class="icon"></div>
</button>
</div> </div>
</div> </div>
<!-- --> <div class="last-updated">
<div class="albums"> Last updated yesterday |
<div class="item third image"></div> <span class="edit">Edit</span>
<div class="item second image"></div>
<div class="item first image"></div>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -32,162 +27,85 @@
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
height: 15rem; height: 15rem;
margin-bottom: 1em; background-image: url("../../assets/images/eggs.jpg");
background: rgb(42, 46, 54); position: relative;
}
.p-header hr { .last-updated {
border: none; position: absolute;
} bottom: $small;
right: $small;
.p-header .info {
background-color: rgb(1, 5, 17);
padding: 0.5rem; padding: 0.5rem;
position: relative; background-color: rgba(0, 0, 0, 0.699);
overflow: hidden; color: rgb(255, 255, 255);
} font-size: 0.9rem;
border-radius: $smaller;
.p-header .info .name { .edit {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 2rem;
font-weight: bold;
margin: 0.2em 0 0.5em 0;
}
.p-header .info .text {
margin: 0.5rem 1em 0.5rem 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: 4em;
}
.p-header .banner {
margin: 0.5rem;
background-color: $blue;
background: url("../../assets/images/null.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.p-header .info .statistics {
display: flex;
}
.p-header .info .count {
background: url(../../assets/icons/album.svg);
}
.p-header .info .duration {
background-image: url(../../assets/icons/clock.svg);
}
.p-header .info .s-item {
background-size: 1.2rem;
background-position: 10% 50%;
width: 9rem;
display: flex;
align-items: center;
font-weight: lighter;
margin-right: $small;
height: 2rem;
border: solid 1px rgba(255, 255, 255, 0.445);
border-radius: $small;
background-repeat: no-repeat;
}
.p-header .info .lower p {
margin-left: 2.5rem;
}
.p-header .info .btns {
height: 2.5rem;
display: flex;
}
.p-header .info .btns .play {
width: 8rem;
height: 100%;
background-color: $green;
border: none;
background-image: url(../../assets/icons/play.svg);
}
.p-header .info .btns .options {
width: 2.5rem;
height: 100%;
background-color: #0465a7;
border-radius: 50%;
background-image: url(../../assets/icons/options.svg);
background-size: 80%;
background-position: center;
border: none;
transition: all 0.5s ease;
}
.p-header .info .btns .options:hover {
transform: rotate(90deg);
transition: all 0.5s ease;
background-color: #2da8c7;
}
.p-header .info .albums {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0.5rem;
position: absolute;
bottom: -0.5em;
right: -1em;
}
.p-header .info .albums .item {
height: 5em;
width: 5em;
background-color: $blue;
border-radius: $small;
transition: transform 1s;
}
.p-header .info .albums .first {
position: absolute;
transform: rotate(-30deg);
right: 0.5em;
bottom: 0em;
background-color: $red;
background-image: url("../../assets/images/null.webp");
}
.p-header .info .albums .second {
position: absolute;
transform: rotate(10deg);
right: 4em;
bottom: -1em !important;
background-color: $green;
background-image: url("../../assets/images/null.webp");
z-index: 1;
}
.p-header .info .albums .third {
position: absolute;
transform: rotate(-10deg);
bottom: -1em;
right: 9em;
background-color: $green;
background-image: url("../../assets/images/null.webp");
z-index: 2;
}
.p-header .info .albums .item:hover {
transition: transform .5s;
transform: scale(1.5);
cursor: pointer; cursor: pointer;
z-index: 3; }
}
.info {
position: absolute;
width: 25rem;
height: 10rem;
bottom: $small;
left: $small;
padding: $small;
display: flex;
flex-direction: row;
align-items: end;
padding-bottom: 3.5rem;
.name {
font-size: 1.5rem;
font-weight: bold;
&::before {
content: "😎 ";
}
}
.metrics {
margin-top: $small;
background-color: rgba(47, 55, 129, 0.233);
color: rgb(0, 60, 255);
padding: $small;
width: fit-content;
border-radius: $smaller;
}
.buttons {
position: absolute;
bottom: $small;
left: $small;
display: flex;
gap: $small;
.play {
width: 5rem;
height: 2.5rem;
padding: 0.25rem $small;
.icon {
width: 1.5rem;
height: 1.5rem;
background-image: url("../../assets/icons/play.svg");
background-size: 1.5rem;
background-position: center;
margin-right: 0.25rem;
}
}
.menu {
width: 2.5rem;
height: 2.5rem;
background-image: url("../../assets/icons/options.svg");
background-size: 2rem;
background-repeat: no-repeat;
background-position: center;
}
}
}
} }
</style> </style>

2
src/components/RightSideBar/NowPlaying.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="now-playing"> <div class="now-playing border">
<div class="art-tags"> <div class="art-tags">
<div <div
class="album-art image" class="album-art image"

2
src/components/RightSideBar/Recommendation.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="r-tracks rounded"> <div class="r-tracks rounded border">
<p class="heading">SIMILAR TRACKS</p> <p class="heading">SIMILAR TRACKS</p>
<div class="tracks"> <div class="tracks">
<div class="song-item" v-for="song in songs" :key="song"> <div class="song-item" v-for="song in songs" :key="song">

90
src/components/RightSideBar/UpNext.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div class="up-next"> <div class="up-next border">
<p class="heading"> <p class="heading">
COMING UP NEXT <span class="more" @click="collapse">SEE ALL</span> COMING UP NEXT <span class="more" @click="collapse">SEE ALL</span>
</p> </p>
<div class="main-item h-1" @click="playNext"> <div class="main-item h-1 border" @click="playNext">
<div <div
class="album-art image" class="album-art image"
:style="{ :style="{
@ -22,10 +22,9 @@
</div> </div>
<div> <div>
<div <div
:class="{ hr: is_expanded, v0x: !is_expanded, v1x: is_expanded }" :class="{ v0: !is_expanded, v1: is_expanded }"
class="all-items" class="scrollable border"
> >
<div :class="{ v0: !is_expanded, v1: is_expanded }" class="scrollable">
<div <div
class="song-item h-1" class="song-item h-1"
v-for="song in queue" v-for="song in queue"
@ -48,13 +47,12 @@
></div> ></div>
</div> </div>
<div class="tags"> <div class="tags">
<p class="title ellip">{{ song.title }}</p> <div class="title ellip">{{ song.title }}</div>
<hr /> <hr />
<p class="artist ellip"> <div class="artist ellip">
<span v-for="artist in putCommas(song.artists)" :key="artist">{{ <span v-for="artist in putCommas(song.artists)" :key="artist">{{
artist artist
}}</span> }}</span>
</p>
</div> </div>
</div> </div>
</div> </div>
@ -118,19 +116,10 @@ export default {
<style lang="scss"> <style lang="scss">
.up-next .v0 { .up-next .v0 {
max-height: 0em; max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease; transition: max-height 0.5s ease;
} visibility: hidden;
padding: 0;
.up-next .v0x {
background-color: transparent !important;
transition: all 0.5s ease;
}
.up-next .v1x {
transition: all .5s ease;
background-color: rgb(218, 72, 96);
} }
.up-next .v1 { .up-next .v1 {
@ -139,7 +128,11 @@ export default {
padding: $small; padding: $small;
.currentInQueue { .currentInQueue {
background-color: rgba(0, 125, 241, 0.562); border: 2px solid $pink;
&:hover {
color: #fff;
}
} }
} }
@ -152,21 +145,21 @@ export default {
.up-next .heading { .up-next .heading {
position: relative; position: relative;
margin: 0.5rem 0 1rem 0rem; margin: 0.5rem 0 1rem 0;
}
.up-next > p > span { span {
position: absolute; position: absolute;
right: 0.5rem; right: 0.5rem;
padding: 0.5rem; padding: 0.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
user-select: none; user-select: none;
}
.up-next > p > span:hover { &:hover {
background: $blue; background: $blue;
cursor: pointer; cursor: pointer;
} }
}
}
.up-next .main-item { .up-next .main-item {
display: flex; display: flex;
@ -176,12 +169,7 @@ export default {
cursor: pointer; cursor: pointer;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
&:hover { .album-art {
background-color: $blue;
}
}
.up-next .main-item .album-art {
width: 4.5rem; width: 4.5rem;
height: 4.5rem; height: 4.5rem;
background-image: url(../../assets/images/null.webp); background-image: url(../../assets/images/null.webp);
@ -189,29 +177,28 @@ export default {
border-radius: 0.5rem; border-radius: 0.5rem;
} }
.up-next .main-item .tags hr { .tags {
hr {
border: none; border: none;
margin: 0.3rem; margin: 0.3rem;
} }
.title {
.up-next .main-item .tags .title {
width: 20rem; width: 20rem;
margin: 0; margin: 0;
} }
.artist {
.up-next .main-item .tags .artist {
width: 20rem; width: 20rem;
margin: 0; margin: 0;
font-size: small; font-size: small;
} }
.up-next .all-items {
padding-top: $small;
border-radius: 0.5rem;
padding: $small;
} }
.up-next .all-items .scrollable { &:hover {
background-color: $blue;
}
}
.up-next .scrollable {
overflow-y: auto; overflow-y: auto;
background-color: $card-dark; background-color: $card-dark;
border-radius: 0.5rem; border-radius: 0.5rem;
@ -221,28 +208,23 @@ export default {
} }
} }
.up-next .all-items p { .up-next .scrollable .song-item {
margin: 0;
}
.up-next .all-items .scrollable .song-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.5rem; padding: 0.5rem;
border-radius: 0.5rem; border-radius: 0.5rem;
}
.up-next .all-items .scrollable .song-item:hover { &:hover {
cursor: pointer; cursor: pointer;
background-color: $blue; background-color: $blue;
} }
.up-next .all-items .scrollable .song-item hr { hr {
border: none; border: none;
margin: 0.1rem; margin: 0.1rem;
} }
.up-next .all-items .album-art { .album-art {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -253,10 +235,10 @@ export default {
border-radius: 0.5rem; border-radius: 0.5rem;
background-image: url(../../assets/images/null.webp); background-image: url(../../assets/images/null.webp);
} }
.artist {
.up-next .all-items .song-item .artist {
width: 20rem; width: 20rem;
font-size: small; font-size: small;
color: rgba(255, 255, 255, 0.637); color: rgba(255, 255, 255, 0.637);
} }
}
</style> </style>

2
src/views/AlbumView.vue
View File

@ -4,7 +4,7 @@
<Header :album_info="album_info" /> <Header :album_info="album_info" />
</div> </div>
<div class="separator" id="av-sep"></div> <div class="separator" id="av-sep"></div>
<div class="songs rounded"> <div class="songs rounded border">
<SongList :songs="album_songs" /> <SongList :songs="album_songs" />
</div> </div>
<div class="separator" id="av-sep"></div> <div class="separator" id="av-sep"></div>

2
src/views/FolderView.vue
View File

@ -127,7 +127,7 @@ export default {
} }
#scrollable { #scrollable {
overflow-y: scroll; overflow-y: auto;
height: calc(100% - $small); height: calc(100% - $small);
padding-right: $small; padding-right: $small;
} }

56
src/views/PlaylistView.vue
View File

@ -1,22 +1,21 @@
<template> <template>
<Header /> <div class="playlist-view rounded">
<div class="p-bg rounded"> <Header :playlist_info="playlist_info" />
<div class="clip"> <div class="separator no-border"></div>
<div class="scrollable">
<div class="songlist rounded border">
<SongList :songs="songs" /> <SongList :songs="songs" />
</div> </div>
</div> <div class="separator no-border"></div>
<div class="f-artists-p">
<FeaturedArtists /> <FeaturedArtists />
</div> </div>
</div>
</template> </template>
<script> <script>
import Header from "@/components/PlaylistView/Header.vue"; import Header from "@/components/PlaylistView/Header.vue";
import SongList from "@/components/FolderView/SongList.vue"; import SongList from "@/components/FolderView/SongList.vue";
import FeaturedArtists from "@/components/PlaylistView/FeaturedArtists.vue"; import FeaturedArtists from "@/components/PlaylistView/FeaturedArtists.vue";
import state from "@/composables/state.js";
export default { export default {
components: { components: {
Header, Header,
@ -25,32 +24,33 @@ export default {
}, },
setup() { setup() {
return { return {
songs: [], songs: state.folder_song_list,
playlist_info: {
name: "Dax Radio",
count: state.folder_song_list.value.length,
duration: "0:00",
image: "../../assets/images/null.webp",
artist: "",
artist_image: "",
},
}; };
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
.p-bg { .playlist-view {
position: relative; height: calc(100% - 1rem);
background: $card-dark;
height: calc(100% - 16em);
padding: $small;
}
.p-bg .clip {
height: calc(100% - 12em);
padding-bottom: $small;
border-bottom: solid 1px $separator;
}
.p-bg .scrollable {
height: 100%;
border-radius: $small;
}
.p-bg .f-artists-p {
margin-top: $small; margin-top: $small;
overflow: auto;
&::-webkit-scrollbar {
display: none;
}
.songlist {
background-color: $card-dark;
padding: $small;
min-height: 100%;
}
} }
</style> </style>