TDvorak/swingmusic-extended
1
0
Fork 0
mirror of https://github.com/Dvorinka/swingmusic-extended.git synced 2026-06-04 04:23:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add featured artists in albumview

Browse Source
This commit is contained in:
geoffrey45
2022-01-15 18:18:55 +03:00
parent 1b9e6821d6
commit a720891c20
13 changed files with 166 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/css/global.scss
+1
View File
@@ -52,6 +52,7 @@ a {
button {
border: none;
outline: none;
color: inherit;
font-size: 1rem;
cursor: pointer;
src/components/FolderView/Header.vue
+12 -6
View File
@@ -5,9 +5,11 @@
<div class="icon"></div>
Play
</button>
<div class="ellip text">
<div class="text">
<div class="icon image"></div>
{{ path.split("/").splice(-1) + "" }}
<div class="ellip">
{{ path.split("/").splice(-1) + "" }}
</div>
</div>
</div>
<div class="search">
@@ -25,17 +27,17 @@
<script>
import perks from "@/composables/perks.js";
import state from "@/composables/state.js"
import state from "@/composables/state.js";
export default {
props: ["path", "first_song"],
setup() {
function playFolder(song) {
perks.updateQueue(song, "folder")
perks.updateQueue(song, "folder");
}
return {
playFolder,
search_query: state.search_query
search_query: state.search_query,
};
},
};
@@ -60,7 +62,7 @@ export default {
max-width: 20rem;
width: 100%;
border: 1px solid $separator;
border-radius: .5rem;
border-radius: 0.5rem;
padding-left: 1rem;
background-color: #46454500;
color: #fff;
@@ -96,14 +98,18 @@ export default {
}
.text {
position: relative;
display: flex;
align-items: center;
border-radius: $small;
background-color: rgb(24, 22, 22);
padding: $small;
padding-left: 2.25rem;
.icon {
position: absolute;
left: $small;
height: 1.5rem;
width: 1.5rem;
background-image: url(../../assets/icons/folder.svg);
src/components/FolderView/SongList.vue
+3 -3
View File
@@ -39,7 +39,7 @@ import { ref } from "@vue/reactivity";
import { onMounted, onUnmounted } from "@vue/runtime-core";
import SongItem from "../SongItem.vue";
import getAlbum from "@/composables/getAlbum.js";
import album from "@/composables/album.js";
import perks from "@/composables/perks.js";
import state from "@/composables/state.js";
import { useRouter, useRoute } from "vue-router";
@@ -104,7 +104,7 @@ export default {
function loadAlbum(title, album_artist) {
state.loading.value = true;
getAlbum(title, album_artist).then((data) => {
album.getAlbumTracks(title, album_artist).then((data) => {
state.album_song_list.value = data.songs;
state.album_info.value = data.info;
@@ -189,7 +189,7 @@ th {
th {
text-transform: uppercase;
font-weight: normal;
display: none;
// display: none;
}
td .artist {
src/components/LeftSidebar/Navigation.vue
+22 -15
View File
@@ -4,7 +4,7 @@
<div class="nav-button" id="home-button">
<div class="in">
<div class="nav-icon image" id="home-icon"></div>
<span id="text">Home</span>
<span>Home</span>
</div>
</div>
</router-link>
@@ -13,7 +13,7 @@
<div class="nav-button" id="album-button">
<div class="in">
<div class="nav-icon image" id="album-icon"></div>
<span id="text">Albums</span>
<span>Albums</span>
</div>
</div>
</router-link>
@@ -22,7 +22,7 @@
<div class="nav-button" id="artists-button">
<div class="in">
<div class="nav-icon image" id="artists-icon"></div>
<span id="text">Artists</span>
<span>Artists</span>
</div>
</div>
</router-link>
@@ -31,7 +31,7 @@
<div class="nav-button" id="playlists-button">
<div class="in">
<div class="nav-icon image" id="playlists-icon"></div>
<span id="text">Playlist</span>
<span>Playlist</span>
</div>
</div>
</router-link>
@@ -40,7 +40,7 @@
<div class="nav-button" id="mixes-button">
<div class="in">
<div class="nav-icon image" id="mixes-icon"></div>
<span id="text">Mixes</span>
<span>Mixes</span>
</div>
</div>
</router-link>
@@ -49,7 +49,7 @@
<div class="nav-button" id="folders-button">
<div class="in">
<div class="nav-icon image" id="folders-icon"></div>
<span id="text">Folders</span>
<span>Folders</span>
</div>
</div>
</router-link>
@@ -58,7 +58,7 @@
<div class="nav-button" id="folders-button">
<div class="in">
<div class="nav-icon image" id="settings-icon"></div>
<span id="text">Settings</span>
<span>Settings</span>
</div>
</div>
</router-link>
@@ -97,7 +97,6 @@ export default {
display: flex;
align-items: flex-start;
justify-content: flex-start;
background-color: transparent;
height: 100%;
padding: 0.6rem 0 0.6rem 0;
@@ -106,10 +105,12 @@ export default {
}
.nav-icon {
height: 1.5rem;
width: 1.5rem;
height: 2rem;
width: 2rem;
margin-right: 0.5rem;
margin-left: 10px;
margin-left: 0.6rem;
border-radius: $small;
background-color: rgb(26, 24, 24);
}
.in {
@@ -117,6 +118,16 @@ export default {
align-items: center;
}
#home-icon,
#album-icon,
#artists-icon,
#playlists-icon,
#mixes-icon,
#folders-icon,
#settings-icon {
background-size: 1.5rem;
}
#home-icon {
background-image: url(../../assets/icons/home.svg);
}
@@ -125,10 +136,6 @@ export default {
background-image: url(../../assets/icons/album.svg);
}
#text {
margin-top: 5px;
}
#artists-icon {
background-image: url(../../assets/icons/artist.svg);
}
src/components/PlaylistView/FeaturedArtists.vue
+19 -45
View File
@@ -1,10 +1,10 @@
<template>
<div class="f-artists">
<div class="xcontrols">
<div class="prev" @click="scrollLeftX"></div>
<div class="next" @click="scrollRightX"></div>
<div class="prev" @click="scrollLeft"></div>
<div class="next" @click="scrollRight"></div>
</div>
<div class="artists" ref="artists_dom" v-on:mouseover="say">
<div class="artists" ref="artists_dom" v-on:mouseover="scrollArtists">
<div class="artist c1">
<div class="blur"></div>
<div class="s2"></div>
@@ -12,8 +12,11 @@
</div>
<div class="artist" v-for="artist in artists" :key="artist">
<div>
<div class="artist-image image"></div>
<p class="artist-name ellipsis">{{ artist }}</p>
<div
class="artist-image image"
:style="{ backgroundImage: `url('${artist.image}')` }"
></div>
<p class="artist-name ellipsis">{{ artist.name }}</p>
<div class="a-circle"></div>
</div>
</div>
@@ -24,24 +27,11 @@
import { ref } from "@vue/reactivity";
export default {
props: ["artists"],
setup() {
const artists = [
"Michael John Montgomery",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
];
const artists_dom = ref(null);
const scrollLeftX = () => {
const scrollLeft = () => {
const dom = artists_dom.value;
dom.scrollBy({
left: -700,
@@ -49,7 +39,7 @@ export default {
});
};
const scrollRightX = () => {
const scrollRight = () => {
const dom = artists_dom.value;
dom.scrollBy({
left: 700,
@@ -64,7 +54,7 @@ export default {
});
};
const say = () => {
const scrollArtists = () => {
artists_dom.value.addEventListener("wheel", (e) => {
e.preventDefault();
scroll(e);
@@ -72,11 +62,10 @@ export default {
};
return {
artists,
artists_dom,
say,
scrollLeftX,
scrollRightX,
scrollArtists,
scrollLeft,
scrollRight,
};
},
};
@@ -87,7 +76,7 @@ export default {
position: relative;
height: 13em;
width: calc(100%);
background-color: #1f1e1d;
background-color: $card-dark;
padding: $small;
border-radius: $small;
user-select: none;
@@ -127,7 +116,7 @@ export default {
.next:hover,
.prev:hover {
background-color: rgb(3, 1, 1);
background-color: $blue;
transition: all 0.5s ease;
}
}
@@ -156,7 +145,7 @@ export default {
width: 9em;
height: 9em;
border-radius: $small;
background-color: #fd5c63;
background-color: #0f0e0e;
display: flex;
align-items: center;
justify-content: center;
@@ -189,11 +178,8 @@ export default {
.f-artists .c1 {
position: relative;
background: rgb(145, 42, 56);
background: rgb(16, 25, 51);
width: 15em;
background-image: url(../../assets/images/gradient1.gif);
overflow: hidden;
margin-left: -0.1rem;
&:hover > .s2 {
background: rgba(53, 53, 146, 0.8);
@@ -206,23 +192,11 @@ export default {
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;
left: -2em;
src/components/SongItem.vue
-1
View File
@@ -62,7 +62,6 @@ export default {
}
function emitLoadAlbum(title, artist){
console.log(title, artist)
emit("loadAlbum", title, artist)
}
src/composables/album.js
+44
View File
@@ -0,0 +1,44 @@
let base_uri = "http://127.0.0.1:9876";
const getAlbumTracks = async (name, artist) => {
const res = await fetch(
base_uri +
"/albums/" +
encodeURIComponent(name.replaceAll("/", "|")) +
"::" +
encodeURIComponent(artist.replaceAll("/", "|"))
);
if (!res.ok) {
const message = `An error has occured: ${res.status}`;
throw new Error(message);
}
const data = await res.json();
return data;
};
const getAlbumArtists = async (name, artist) => {
const res = await fetch(
base_uri +
"/album/" +
encodeURIComponent(name.replaceAll("/", "|")) +
"/" +
encodeURIComponent(artist.replaceAll("/", "|")) +
"/artists"
);
if (!res.ok) {
const message = `An error has occured: ${res.status}`;
throw new Error(message);
}
const data = await res.json();
return data.artists;
};
export default {
getAlbumTracks,
getAlbumArtists,
};
src/composables/getAlbum.js
-16
View File
@@ -1,16 +0,0 @@
let base_uri = "http://127.0.0.1:9876";
const getAlbum = async (name, artist) => {
const res = await fetch(base_uri + "/albums/" + encodeURIComponent(name.replaceAll("/", "|")) + "::" + encodeURIComponent(artist.replaceAll("/", "|")));
if (!res.ok) {
const message = `An error has occured: ${res.status}`;
throw new Error(message);
}
const data = await res.json();
return data;
};
export default getAlbum;
src/composables/state.js
+4 -2
View File
@@ -33,8 +33,9 @@ const prev = ref({
const album_song_list = ref([])
const album_info = ref([])
const album_artists = ref([])
const filters = ref([]);
const magic_flag = ref(false);
const loading = ref(false);
@@ -59,5 +60,6 @@ export default {
search_albums,
search_artists,
album_song_list,
album_info
album_info,
album_artists
};
src/views/AlbumView.vue
+12 -3
View File
@@ -8,7 +8,7 @@
<SongList :songs="album_songs" />
</div>
<div class="separator" id="av-sep"></div>
<FeaturedArtists />
<FeaturedArtists :artists="artists" />
<div class="separator" id="av-sep"></div>
<AlbumBio />
<div class="separator" id="av-sep"></div>
@@ -27,7 +27,7 @@ import FromTheSameArtist from "../components/AlbumView/FromTheSameArtist.vue";
import SongList from "../components/FolderView/SongList.vue";
import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue";
import getAlbum from "../composables/getAlbum.js";
import album from "@/composables/album.js";
import state from "@/composables/state.js";
import { onUnmounted } from "@vue/runtime-core";
@@ -46,23 +46,32 @@ export default {
onMounted(() => {
if (!state.album_song_list.value.length) {
getAlbum(title, album_artists).then((data) => {
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;
console.log(state.album_artists.value)
});
}
});
onUnmounted(() => {
state.album_song_list.value = [];
state.album_info.value = {};
state.album_artists.value = [];
});
return {
album_songs: state.album_song_list,
album_info: state.album_info,
artists: state.album_artists,
};
},
};