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

separate playFolder and playAlbum

Browse Source
This commit is contained in:
geoffrey45
2022-01-15 10:58:32 +03:00
parent 42acaba87c
commit 1b9e6821d6
13 changed files with 138 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/app/api.py
+4 -7
View File
@@ -13,7 +13,7 @@ all_the_f_music = helpers.getAllSongs()
def initialize() -> None:
helpers.create_config_dir()
helpers.check_for_new_songs()
# helpers.check_for_new_songs()
initialize()
@@ -208,7 +208,6 @@ def getFolderTree(folder: str = None):
return {"files": helpers.remove_duplicates(songs), "folders": sorted(folders, key=lambda i: i['name'])}
@bp.route('/qwerty')
def populateArtists():
all_songs = instances.songs_instance.get_all_songs()
@@ -230,7 +229,6 @@ def populateArtists():
return {'songs': artists}
@bp.route('/albums')
def getAlbums():
s = instances.songs_instance.get_all_songs()
@@ -248,16 +246,14 @@ def getAlbums():
return {'albums': albums}
@bp.route('/albums/<query>')
@cache.cached()
def getAlbumSongs(query: str):
album = query.split('::')[0].replace('|', '/')
artist = query.split('::')[1].replace('|', '/')
songs = instances.songs_instance.find_songs_by_album(album, artist)
print(artist)
for song in songs:
song['artists'] = song['artists'].split(', ')
song['image'] = "http://127.0.0.1:8900/images/thumbnails/" + song['image']
@@ -269,4 +265,5 @@ def getAlbumSongs(query: str):
"image": songs[0]['image'],
"artist": songs[0]['album_artist']
}
return {'songs': songs, 'info': album_obj}
return {'songs': helpers.remove_duplicates(songs), 'info': album_obj}
server/app/functions.py
-6
View File
@@ -20,8 +20,6 @@ def populate():
'''
files = helpers.run_fast_scandir(helpers.home_dir, [".flac", ".mp3"])[1]
bar = Bar('Indexing files', max=len(files))
for file in files:
file_in_db_obj = instances.songs_instance.find_song_by_path(file)
@@ -39,10 +37,6 @@ def populate():
except MutagenError:
pass
bar.next()
bar.finish()
return {'msg': 'updated everything'}
server/app/instances.py
-2
View File
@@ -3,5 +3,3 @@ from app.models import Artists
songs_instance = AllSongs()
artist_instance = Artists()
""
src/components/AlbumView/Header.vue
+16 -18
View File
@@ -1,6 +1,5 @@
<template>
<div class="a-header rounded">
<div id="header-blur"></div>
<div
class="art rounded"
:style="{
@@ -17,45 +16,44 @@
<div class="stats">
{{ album_info.count }} Tracks • {{ album_info.duration }} • 2021
</div>
<div class="play rounded">
<button class="play rounded" @click="playAlbum">
<div class="icon"></div>
<div>Play</div>
</div>
</button>
</div>
</div>
<div class="most-played">
<!-- <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> -->
</div>
</template>
<script>
import state from "@/composables/state.js"
import perks from "@/composables/perks.js"
export default {
props: ["album_info"],
setup() {},
setup() {
function playAlbum() {
perks.updateQueue(state.album_song_list.value[0], "album")
}
return {
playAlbum
}
},
};
</script>
<style lang="scss">
#header-blur {
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
left: 0;
backdrop-filter: blur(40px);
}
.a-header {
position: relative;
height: 14rem;
background: #232526;
background: -webkit-linear-gradient(to right, #414345, #232526);
background: linear-gradient(to right, #050107, #00090e);
background: $card-dark;
backdrop-filter: blur(40px);
overflow: hidden;
src/components/FolderView/Header.vue
+7 -2
View File
@@ -1,7 +1,7 @@
<template>
<div class="folder-top flex">
<div class="fname">
<button class="play image" @click="playThis(first_song)">
<button class="play image" @click="playFolder(first_song)">
<div class="icon"></div>
Play
</button>
@@ -25,12 +25,17 @@
<script>
import perks from "@/composables/perks.js";
import state from "@/composables/state.js"
export default {
props: ["path", "first_song"],
setup() {
function playFolder(song) {
perks.updateQueue(song, "folder")
}
return {
playThis: perks.updateQueue,
playFolder,
search_query: state.search_query
};
},
};
src/components/FolderView/SongList.vue
+42 -4
View File
@@ -19,6 +19,7 @@
:song="song"
:current="current"
@updateQueue="updateQueue"
@loadAlbum="loadAlbum"
/>
</tbody>
</table>
@@ -38,8 +39,10 @@ import { ref } from "@vue/reactivity";
import { onMounted, onUnmounted } from "@vue/runtime-core";
import SongItem from "../SongItem.vue";
import getAlbum from "@/composables/getAlbum.js";
import perks from "@/composables/perks.js";
import state from "@/composables/state.js";
import { useRouter, useRoute } from "vue-router";
export default {
props: ["songs"],
@@ -51,6 +54,11 @@ export default {
const songTitleWidth = ref(null);
const minWidth = ref(300);
let routex;
const current = ref(perks.current);
const search_query = ref(state.search_query);
const route = useRouter();
const resizeSongTitleWidth = () => {
try {
@@ -63,6 +71,8 @@ export default {
};
onMounted(() => {
routex = useRoute().name;
resizeSongTitleWidth();
window.addEventListener("resize", () => {
@@ -76,15 +86,42 @@ export default {
});
});
const current = ref(perks.current);
const search_query = ref(state.search_query);
function updateQueue(song) {
let type;
function updateQueue(song){
perks.updateQueue(song)
switch (routex) {
case "FolderView":
type = "folder";
break;
case "AlbumView":
type = "album";
break;
}
perks.updateQueue(song, type);
}
function loadAlbum(title, album_artist) {
state.loading.value = true;
getAlbum(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 {
updateQueue,
loadAlbum,
songtitle,
songTitleWidth,
minWidth,
@@ -107,6 +144,7 @@ export default {
width: 100%;
height: 100%;
overflow-y: auto;
background-color: $card-dark;
&::-webkit-scrollbar {
display: none;
src/components/SongItem.vue
+13 -9
View File
@@ -1,5 +1,5 @@
<template>
<tr :class="{ current: current._id == song._id }">
<tr :class="{ current: current._id.$oid == song._id.$oid }">
<td
:style="{ width: songTitleWidth + 'px' }"
class="flex"
@@ -13,7 +13,7 @@
>
<div
class="now-playing-track image"
v-if="current._id == song._id"
v-if="current._id.$oid == song._id.$oid"
:class="{ active: is_playing, not_active: !is_playing }"
></div>
</div>
@@ -35,13 +35,10 @@
</div>
</td>
<td :style="{ width: songTitleWidth + 'px' }">
<router-link
<div
class="ellip"
:to="{
name: 'AlbumView',
params: { album: song.album, artist: song.album_artist },
}"
>{{ song.album }}</router-link
@click="emitLoadAlbum(song.album, song.album_artist)"
>{{ song.album }}</div
>
</td>
<td
@@ -58,16 +55,23 @@ import perks from "@/composables/perks.js";
import state from "@/composables/state.js";
export default {
props: ["song", "current", "songTitleWidth", "minWidth"],
props: ["song", "songTitleWidth", "minWidth"],
setup(props, { emit }) {
function emitUpdate(song) {
emit("updateQueue", song);
}
function emitLoadAlbum(title, artist){
console.log(title, artist)
emit("loadAlbum", title, artist)
}
return {
putCommas: perks.putCommas,
emitUpdate,
emitLoadAlbum,
is_playing: state.is_playing,
current: state.current
};
},
};
src/composables/getAlbum.js
+1 -1
View File
@@ -1,7 +1,7 @@
let base_uri = "http://127.0.0.1:9876";
const getAlbum = async (name, artist) => {
const res = await fetch(base_uri + "/albums/" + name.replaceAll("/", "|") + "::" + artist.replaceAll("/", "|"));
const res = await fetch(base_uri + "/albums/" + encodeURIComponent(name.replaceAll("/", "|")) + "::" + encodeURIComponent(artist.replaceAll("/", "|")));
if (!res.ok) {
const message = `An error has occured: ${res.status}`;
src/composables/perks.js
+13 -3
View File
@@ -80,11 +80,21 @@ const readQueue = () => {
}
};
const updateQueue = async (song) => {
const updateQueue = async (song, type) => {
playAudio.playAudio(song.filepath)
let list;
if (state.queue.value[0]._id.$oid !== state.song_list.value[0]._id.$oid) {
const new_queue = state.song_list.value;
switch (type) {
case "folder":
list = state.folder_song_list.value;
break;
case "album":
list = state.album_song_list.value;
break;
}
if (state.queue.value[0]._id.$oid !==list[0]._id.$oid) {
const new_queue =list;
localStorage.setItem("queue", JSON.stringify(new_queue));
state.queue.value = new_queue;
}
src/composables/searchMusic.js
+1 -1
View File
@@ -3,7 +3,7 @@ import state from "./state.js";
const base_url = "http://127.0.0.1:9876/search?q=";
async function search(query) {
const url = base_url + query;
const url = base_url + encodeURIComponent(query);
const res = await fetch(url);
const json = await res.json();
src/composables/state.js
+7 -2
View File
@@ -12,7 +12,7 @@ const queue = ref([
},
]);
const song_list = ref([])
const folder_song_list = ref([])
const folder_list = ref([])
const current = ref({
@@ -31,6 +31,9 @@ const prev = ref({
},
});
const album_song_list = ref([])
const album_info = ref([])
const filters = ref([]);
const magic_flag = ref(false);
const loading = ref(false);
@@ -44,7 +47,7 @@ const search_artists = ref([]);
export default {
search_query,
queue,
song_list,
folder_song_list,
folder_list,
current,
prev,
@@ -55,4 +58,6 @@ export default {
search_tracks,
search_albums,
search_artists,
album_song_list,
album_info
};
src/views/AlbumView.vue
+27 -15
View File
@@ -1,10 +1,10 @@
<template>
<div class="al-view rounded">
<div class="header">
<div>
<Header :album_info="album_info" />
</div>
<div class="separator" id="av-sep"></div>
<div>
<div class="songs rounded">
<SongList :songs="album_songs" />
</div>
<div class="separator" id="av-sep"></div>
@@ -18,7 +18,7 @@
<script>
import { useRoute } from "vue-router";
import { onMounted, ref } from "@vue/runtime-core";
import { onMounted } from "@vue/runtime-core";
import Header from "../components/AlbumView/Header.vue";
import AlbumBio from "../components/AlbumView/AlbumBio.vue";
@@ -29,6 +29,7 @@ import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue";
import getAlbum from "../composables/getAlbum.js";
import state from "@/composables/state.js";
import { onUnmounted } from "@vue/runtime-core";
export default {
components: {
@@ -40,23 +41,28 @@ export default {
},
setup() {
const route = useRoute();
const album_name = route.params.album;
const title = route.params.album;
const album_artists = route.params.artist;
const album_songs = ref([]);
const album_info = ref({});
onMounted(() => {
state.loading.value = true;
getAlbum(album_name, album_artists).then((data) => {
album_songs.value = data.songs;
album_info.value = data.info;
state.loading.value = false;
});
if (!state.album_song_list.value.length) {
getAlbum(title, album_artists).then((data) => {
state.album_song_list.value = data.songs;
state.album_info.value = data.info;
state.loading.value = false;
});
}
});
onUnmounted(() => {
state.album_song_list.value = [];
state.album_info.value = {};
});
return {
album_songs,
album_info,
album_songs: state.album_song_list,
album_info: state.album_info,
};
},
};
@@ -64,8 +70,14 @@ export default {
<style lang="scss">
.al-view {
height: 100%;
height: calc(100% - 1rem);
overflow: auto;
margin-top: $small;
.songs {
padding: $small;
background-color: $card-dark;
}
&::-webkit-scrollbar {
display: none;
src/views/FolderView.vue
+7 -4
View File
@@ -4,9 +4,9 @@
<Header :path="path" :first_song="songs[0]" />
</div>
<div id="scrollable" ref="scrollable">
<SongList :songs="songs" />
<div class="separator" v-if="folders.length && songs.length"></div>
<FolderList :folders="folders" />
<div class="separator" v-if="folders.length && songs.length"></div>
<SongList :songs="songs" />
</div>
</div>
</template>
@@ -33,7 +33,7 @@ export default {
const route = useRoute();
const path = ref(route.params.path);
const song_list = ref(state.song_list);
const song_list = ref(state.folder_song_list);
const folders = ref(state.folder_list);
const scrollable = ref(null);
@@ -80,7 +80,7 @@ export default {
getData(path, last_id).then((data) => {
scrollable.value.scrollTop = 0;
state.song_list.value = data.songs;
state.folder_song_list.value = data.songs;
state.folder_list.value = data.folders;
state.loading.value = false;
@@ -92,6 +92,9 @@ export default {
watch(route, (new_route) => {
state.search_query.value = "";
path.value = new_route.params.path;
if (!path.value) return;
getPathFolders(path.value);
});
});