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

move loader to search bar

Browse Source
This commit is contained in:
geoffrey45
2021-12-31 21:56:38 +03:00
parent d74aee0c46
commit 1cb6843dc3
12 changed files with 76 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/app/api.py
+3 -4
View File
@@ -7,11 +7,11 @@ from app.helpers import (
convert_to_json,
remove_duplicates,
save_image,
isValidFile,
# isValidFile,
create_config_dir,
extract_thumb,
run_fast_scandir,
home_dir, app_dir,
run_fast_scandir
)
from app import cache
@@ -358,7 +358,7 @@ def getAlbumSongs(query: str):
artist = query.split('::')[1].replace('|', '/')
songs = all_songs_instance.find_songs_by_album(album, artist)
songs_array = convert_to_json(songs)
songs_array = remove_duplicates(convert_to_json(songs))
print(artist)
@@ -372,6 +372,5 @@ def getAlbumSongs(query: str):
"duration": sum(song['length'] for song in songs_array),
"image": songs_array[0]['image'],
"artist": songs_array[0]['album_artist']
# "date": songs_array[0]['date']
}
return {'songs': songs_array, 'info': album_obj}
server/app/helpers.py
+1 -1
View File
@@ -127,7 +127,7 @@ def getTags(full_path):
try:
title = audio['TIT2'][0]
except:
title = 'Unknown'
title = full_path.split('/')[-1]
except:
title = full_path.split('/')[-1]
src/App.vue
+1 -1
View File
@@ -143,7 +143,7 @@ export default {
.content {
position: relative;
padding: 0.5rem;
padding-top: 4.5rem;
padding-top: 3.75rem;
.search-box {
width: calc(100% - 1rem);
src/components/AlbumView/Header.vue
+4 -3
View File
@@ -24,7 +24,7 @@
</div>
</div>
<div class="most-played">
<div class="image rounded"></div>
<div class="art image rounded"></div>
<div>
<div class="title">Girl Of My Dreams</div>
<div class="artist">Juice Wrld, Suga [BTS]</div>
@@ -76,7 +76,7 @@ export default {
width: 25rem;
height: 5rem;
.image {
.art {
width: 4rem;
height: 4rem;
background-image: url(../../assets/images/jw.jpeg);
@@ -96,7 +96,7 @@ export default {
.art {
width: 12rem;
height: 12rem;
background: no-repeat center/cover url(../../assets/images/null.webp);
background: no-repeat center/cover;
margin-right: 1rem;
}
@@ -116,6 +116,7 @@ export default {
.artist {
margin-top: $small;
color: rgba(255, 255, 255, 0.856);
}
}
src/components/FolderView/SearchBox.vue
+1 -24
View File
@@ -9,14 +9,13 @@
<div>
<input type="search" placeholder="Search this directory" />
</div>
<div v-if="loading" class="loader"></div>
</div>
</div>
</template>
<script>
export default {
props: ["path", "loading"],
props: ["path"],
};
</script>
@@ -39,28 +38,6 @@ export default {
position: relative;
width: 50%;
padding-right: 3rem;
.loader {
position: absolute;
top: $small;
right: 0;
width: 2rem;
height: 2rem;
border-radius: 50%;
border: solid;
border-top: solid rgb(255, 174, 0);
border-left: solid rgb(255, 174, 0);
animation: spin .2s linear infinite;
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
}
}
.folder-top .fsearch div {
src/components/RightSideBar/NowPlaying.vue
+1 -3
View File
@@ -67,8 +67,6 @@ export default {
return (s - (s %= 60)) / 60 + (9 < s ? ":" : ":0") + s;
}
// const duration = ref()
const { playNext } = playAudio;
const { playPrev } = playAudio;
const { playPause } = playAudio;
@@ -97,7 +95,7 @@ export default {
.now-playing {
border-radius: 0.5rem;
height: 14rem;
margin-top: 1rem;
margin-top: .5rem;
padding: 0.5rem;
background: rgb(14, 14, 14);
background: linear-gradient(
src/components/RightSideBar/UpNext.vue
+1 -2
View File
@@ -116,7 +116,7 @@ export default {
}
.up-next .v1 {
max-height: 20em;
max-height: 21em;
transition: max-height 0.5s ease;
padding: $small;
@@ -189,7 +189,6 @@ export default {
}
.up-next .all-items .scrollable {
height: 20rem;
overflow-y: auto;
background-color: rgba(2, 6, 14, 0.425);
border-radius: 0.5rem;
src/components/Search.vue
+39 -19
View File
@@ -1,8 +1,5 @@
<template>
<div
class="right-search"
ref="searchComponent"
>
<div class="right-search" ref="searchComponent">
<div class="input">
<div class="search-icon image"></div>
<div class="filter">
@@ -24,6 +21,7 @@
placeholder="find your music"
v-model="query"
/>
<div class="loader" v-if="loading"></div>
<div
class="suggestions v00"
:class="{
@@ -90,7 +88,6 @@ import { onMounted, watch } from "@vue/runtime-core";
import state from "@/composables/state.js";
export default {
emits: ["expandSearch", "collapseSearch"],
props: ["search"],
setup(props, { emit }) {
@@ -126,10 +123,11 @@ export default {
icon: "📁",
},
{
title: "🈁 Here",
title: "🈁 This folder",
icon: "🈁",
}
},
];
const loading = ref(state.loading)
const searchComponent = ref(null);
const filters = ref(state.filters);
const albums = [
@@ -139,7 +137,7 @@ export default {
];
const artists = ["Michael Jackson waihenya", "Jackson 5"];
const query = ref(state.searh_query);
const query = ref(state.search_query);
const magic_flag = ref(state.magic_flag);
const is_hidden = toRefs(props).search;
@@ -177,24 +175,25 @@ export default {
(!filters.value.length && query.value == null) ||
query.value == ""
) {
console.log(query.value);
state.magic_flag.value = false;
}
}, 300);
}, 3000);
}
watch(query, (new_query) => {
state.search_query.value = new_query;
if (new_query !== "") {
counter = 0;
emit("expandSearch");
if (!filters.value.includes("🈁")) {
emit("expandSearch");
}
} else {
emit("collapseSearch");
}
});
onMounted(() => {
const dom = document.getElementsByClassName("right-search")[0]
const dom = document.getElementsByClassName("right-search")[0];
document.addEventListener("click", (e) => {
var isClickedInside = dom.contains(e.target);
@@ -220,12 +219,33 @@ export default {
options,
filters,
searchComponent,
loading
};
},
};
</script>
<style lang="scss">
.loader {
position: absolute;
right: 0;
width: 2rem;
height: 2rem;
border: solid #fff;
border-radius: 50%;
border-bottom: solid rgb(255, 174, 0);
border-top: solid rgb(255, 174, 0);
animation: spin .3s linear infinite;
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
}
.right-search .v0 {
max-height: 0em;
transition: max-height 0.5s ease;
@@ -238,21 +258,23 @@ export default {
.right-search {
position: relative;
border-radius: 1rem;
border-radius: $small;
margin: 0.5rem 0 0 0;
padding: $small $small 0 0;
padding: 1rem $small 0 0;
background-color: #000000;
overflow: hidden;
.item {
position: relative;
background-color: rgb(39, 37, 37);
background-color: rgba(39, 37, 37, 0.555);
padding: 0.5rem;
border-radius: 0.5rem;
cursor: pointer;
margin: 0 $small 0 0;
display: flex;
align-items: center;
font-size: .9rem;
color: rgb(151, 150, 150);
&:hover {
background-color: rgb(170, 50, 50);
@@ -309,7 +331,7 @@ export default {
gap: 0.5rem;
margin-left: 1rem;
position: absolute;
right: 0;
right: 2.5rem;
.item::before {
content: "#";
@@ -355,14 +377,12 @@ export default {
}
.right-search input {
width: 100%;
height: 2.5rem;
width: calc(100% - 6rem);
border: none;
border-radius: 0.5rem;
background-color: transparent;
color: rgba(255, 255, 255, 0.479);
font-size: 1rem;
line-height: 3rem;
outline: none;
transition: all 0.5s ease;
}
src/composables/perks.js
+6
View File
@@ -107,6 +107,12 @@ setTimeout(() => {
});
}, 1000);
window.addEventListener('keyup', (e) => {
if (e.code) {
console.log(e.code);
}
});
export default {
putCommas,
readQueue,
src/composables/state.js
+2
View File
@@ -30,6 +30,7 @@ const prev = ref({
const filters = ref([]);
const magic_flag = ref(false);
const loading = ref(false);
export default {
@@ -39,4 +40,5 @@ export default {
prev,
filters,
magic_flag,
loading,
};
src/views/AlbumView.vue
+5 -2
View File
@@ -1,11 +1,11 @@
<template>
<div class="al-view rounded">
<div class="header">
<Header :album_info="album_info"/>
<Header :album_info="album_info" />
</div>
<div class="separator" id="av-sep"></div>
<div>
<SongList :songs="album_songs"/>
<SongList :songs="album_songs" />
</div>
<div class="separator" id="av-sep"></div>
<FeaturedArtists />
@@ -28,6 +28,7 @@ import SongList from "../components/FolderView/SongList.vue";
import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue";
import getAlbum from "../composables/getAlbum.js";
import state from "@/composables/state.js";
export default {
components: {
@@ -45,9 +46,11 @@ export default {
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;
});
});
src/views/FolderView.vue
+10 -7
View File
@@ -1,7 +1,7 @@
<template>
<div id="f-view-parent" class="rounded">
<div class="fixed">
<SearchBox :path="path" :loading="loading" />
<SearchBox :path="path"/>
</div>
<div id="scrollable" ref="scrollable">
<FolderList :folders="folders" />
@@ -20,7 +20,7 @@ import SearchBox from "@/components/FolderView/SearchBox.vue";
import getData from "../composables/getFiles.js";
import { onMounted, watch } from "@vue/runtime-core";
import perks from "@/composables/perks.js";
import state from "@/composables/state.js";
export default {
components: {
@@ -36,36 +36,39 @@ export default {
const folders = ref([]);
const scrollable = ref(null);
const loading = ref(false);
function focusSearch() {
console.log("focusSearch");
}
onMounted(() => {
const getPathFolders = (path, last_id) => {
loading.value = true;
state.loading.value = true;
getData(path, last_id).then((data) => {
scrollable.value.scrollTop = 0;
songs.value = data.songs;
folders.value = data.folders;
loading.value = false;
state.loading.value = false;
});
};
getPathFolders(path.value);
watch(route, (new_route) => {
perks.search.value = "";
state.search_query.value = "";
path.value = new_route.params.path;
getPathFolders(path.value);
});
});
return {
focusSearch,
songs,
folders,
path,
scrollable,
loading,
};
},
};