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

loadmore tracks, albums, artists

Browse Source
This commit is contained in:
geoffrey45
2022-02-26 07:57:02 +03:00
parent 2143ad7139
commit 8459310258
11 changed files with 198 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -9,6 +9,7 @@
"lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
},
"dependencies": {
"axios": "^0.26.0",
"mitt": "^3.0.0",
"register-service-worker": "^1.7.1",
"sass": "^1.49.0",
server/app/api.py
+47 -9
View File
@@ -1,4 +1,5 @@
import os
from pprint import pprint
import urllib
from typing import List
from flask import Blueprint, request, send_file
@@ -54,6 +55,13 @@ def get_artists(artist: str) -> List:
]
search_results = {
"tracks": [],
"albums": [],
"artists": [],
}
@bp.route("/search")
def search_by_title():
"""
@@ -64,6 +72,7 @@ def search_by_title():
albums = get_search_albums(query)
albums_dicts = []
artists_dicts = []
search_results.clear()
for song in albums:
album_obj = {
@@ -86,8 +95,8 @@ def search_by_title():
artist_obj = {
"name": artist,
"image": "http://0.0.0.0:8900/images/artists/"
+ artist.replace("/", "::")
+ ".webp",
+ artist.replace("/", "::")
+ ".webp",
}
if artist_obj not in artists_dicts:
@@ -95,6 +104,10 @@ def search_by_title():
tracks = helpers.remove_duplicates(get_tracks(query))
search_results["tracks"] = tracks
search_results["albums"] = albums_dicts
search_results["artists"] = artists_dicts
return {
"data": [
{"tracks": tracks[:5], "more": len(tracks) > 5},
@@ -104,6 +117,33 @@ def search_by_title():
}
@bp.route("/search/loadmore")
def search_load_more():
"""
Returns more songs, albums or artists from a search query.
"""
type = request.args.get("type")
start = int(request.args.get("start"))
if type == "tracks":
return {
"tracks": search_results["tracks"][start : start + 5],
"more": len(search_results["tracks"]) > start + 5,
}
elif type == "albums":
return {
"albums": search_results["albums"][start : start + 6],
"more": len(search_results["albums"]) > start + 6,
}
elif type == "artists":
return {
"artists": search_results["artists"][start : start + 6],
"more": len(search_results["artists"]) > start + 6,
}
@bp.route("/populate")
def find_tracks():
"""call the populate function"""
@@ -136,8 +176,8 @@ def get_albumartists(album, artist):
artist_obj = {
"name": artist,
"image": "http://0.0.0.0:8900/images/artists/"
+ artist.replace("/", "::")
+ ".webp",
+ artist.replace("/", "::")
+ ".webp",
}
final_artists.append(artist_obj)
@@ -272,8 +312,8 @@ def get_album_tracks(title: str, artist: str):
"date": songs[0].date,
"artist": songs[0].albumartist,
"artist_image": "http://127.0.0.1:8900/images/artists/"
+ songs[0].albumartist.replace("/", "::")
+ ".webp",
+ songs[0].albumartist.replace("/", "::")
+ ".webp",
}
return {"songs": songs, "info": album_obj}
@@ -293,9 +333,7 @@ def send_track_file(trackid):
Returns an audio file that matches the passed id to the client.
"""
try:
filepath = instances.songs_instance.get_song_by_id(trackid)['filepath']
filepath = instances.songs_instance.get_song_by_id(trackid)["filepath"]
return send_file(filepath, mimetype="audio/mp3")
except FileNotFoundError:
return "File not found", 404
src/components/AlbumView/Header.vue
+12 -4
View File
@@ -10,8 +10,9 @@
</div>
<div class="separator no-border"></div>
<div class="bottom">
<div class="stats">
{{ album_info.count }} Tracks • {{ album_info.duration }} • {{album_info.date}}
<div class="stats shadow-sm">
{{ album_info.count }} Tracks • {{ album_info.duration }} •
{{ album_info.date }}
</div>
<div class="play rounded" @click="playAlbum">
<div class="icon"></div>
@@ -60,7 +61,14 @@ export default {
align-items: center;
padding: $small;
height: 100%;
background-image: url("../../assets/images/abg.webp");
background-image: linear-gradient(
56deg,
$gray 0%,
$gray4 25%,
$gray1 50%,
$gray1 75%,
$gray 100%
);
background-position: 0% 60%;
background-repeat: no-repeat;
background-size: cover;
@@ -97,7 +105,7 @@ export default {
position: relative;
.stats {
background-color: #1f1f1f8e;
background-color: $gray;
padding: $small;
border-radius: $small;
position: absolute;
src/components/LeftSidebar/Navigation.vue
+1 -2
View File
@@ -17,7 +17,6 @@
</template>
<script setup>
const menus = [
{
name: "home",
@@ -85,7 +84,7 @@ const props = defineProps({
padding: 0.6rem 0 0.6rem 0;
&:hover {
background-color: rgba(73, 73, 73, 0.13);
background-color: $gray;
#home-icon {
background-color: rgba(145, 58, 58, 0.555);
src/components/RightSideBar/Queue.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<template>
<div class="up-next">
<div class="r-grid">
<div class="main-item border" >
<div class="main-item border">
<p class="heading">COMING UP NEXT</p>
<div class="itemx" @click="playNext">
<div
@@ -78,7 +78,7 @@ export default {
border-radius: 0.5rem;
&:hover {
background-color: $blue;
background-color: $gray;
}
}
src/components/RightSideBar/Search.vue
+69 -26
View File
@@ -2,47 +2,51 @@
<div class="right-search">
<div>
<div class="input">
<Filters :filters="filters" @removeFilter="removeFilter"/>
<Filters :filters="filters" @removeFilter="removeFilter" />
<div class="input-loader border">
<input
id="search"
v-model="query"
placeholder="find your music"
type="text"
@keyup.backspace="removeLastFilter"
id="search"
v-model="query"
placeholder="find your music"
type="text"
@keyup.backspace="removeLastFilter"
/>
<div class="_loader">
<Loader/>
<Loader />
</div>
</div>
</div>
<div class="separator no-border"></div>
<Options @addFilter="addFilter"/>
<Options @addFilter="addFilter" />
</div>
<div class="scrollable">
<div class="scrollable" ref="search_thing">
<TracksGrid
v-if="tracks.tracks.length"
:more="tracks.more"
:tracks="tracks.tracks"
v-if="tracks.tracks.length"
:more="tracks.more"
:tracks="tracks.tracks"
@loadMore="loadMoreTracks"
/>
<AlbumGrid
v-if="albums.albums.length"
:albums="albums.albums"
:more="albums.more"
v-if="albums.albums.length"
:albums="albums.albums"
:more="albums.more"
@loadMore="loadMoreAlbums"
/>
<div class="separator no-border" v-if="albums.albums.length"></div>
<ArtistGrid
v-if="artists.artists.length"
:artists="artists.artists"
:more="artists.more"
v-if="artists.artists.length"
:artists="artists.artists"
:more="artists.more"
@loadMore="loadMoreArtists"
/>
<div
v-if="
v-if="
!artists.artists.length &&
!tracks.tracks.length &&
!albums.albums.length && query.length !== 0
!albums.albums.length &&
query.length !== 0
"
class="no-res border rounded"
class="no-res border rounded"
>
<div class="no-res-text">
No results for <span class="highlight rounded">{{ query }}</span>
@@ -56,9 +60,9 @@
</template>
<script>
import {reactive, ref} from "@vue/reactivity";
import { reactive, ref } from "@vue/reactivity";
import {watch} from "@vue/runtime-core";
import { watch } from "@vue/runtime-core";
import state from "@/composables/state.js";
import searchMusic from "@/composables/searchMusic.js";
import useDebouncedRef from "@/composables/useDebouncedRef";
@@ -69,6 +73,7 @@ import Loader from "@/components/Search/Loader.vue";
import Options from "@/components/Search/Options.vue";
import Filters from "@/components/Search/Filters.vue";
import "@/assets/css/Search/Search.scss";
import loadMore from "../../composables/loadmore";
export default {
components: {
@@ -81,6 +86,7 @@ export default {
},
setup() {
const search_thing = ref(null);
const loading = ref(state.loading);
const filters = ref([]);
@@ -123,8 +129,43 @@ export default {
}
}
function scrollSearchThing() {
search_thing.value.scroll({
top: search_thing.value.scrollTop + 330,
left: 0,
behavior: "smooth",
});
}
function loadMoreTracks(start) {
// scrollSearchThing();
loadMore.loadMoreTracks(start).then((response) => {
tracks.tracks = [...tracks.tracks, ...response.tracks];
tracks.more = response.more;
});
}
function loadMoreAlbums(start) {
loadMore.loadMoreAlbums(start).then((response) => {
albums.albums = [...albums.albums, ...response.albums];
albums.more = response.more;
});
}
function loadMoreArtists(start) {
scrollSearchThing();
loadMore.loadMoreArtists(start).then((response) => {
artists.artists = [...artists.artists, ...response.artists];
artists.more = response.more;
});
}
watch(query, (new_query) => {
if (query.value === "" || query.value === " " || query.value.length < 2) {
if (
query.value === "" ||
query.value === " " ||
query.value.length < 2
) {
albums.albums = [];
artists.artists = [];
tracks.tracks = [];
@@ -132,7 +173,6 @@ export default {
return;
}
searchMusic(new_query).then((res) => {
albums.albums = res.albums.albums;
albums.more = res.albums.more;
@@ -149,13 +189,16 @@ export default {
addFilter,
removeFilter,
removeLastFilter,
loadMoreTracks,
loadMoreAlbums,
loadMoreArtists,
tracks,
albums,
artists,
query,
filters,
loading,
search_thing,
};
},
};
src/components/Search/AlbumGrid.vue
+4 -1
View File
@@ -19,8 +19,11 @@ export default {
LoadMore,
},
setup(props, { emit }) {
let counter = 0;
function loadMore() {
emit("loadMore");
counter += 6;
emit("loadMore", counter);
}
return {
src/components/Search/ArtistGrid.vue
+4 -1
View File
@@ -19,8 +19,11 @@ export default {
LoadMore,
},
setup(props, { emit }) {
let counter = 0;
function loadMore() {
emit("loadMore");
counter += 6;
emit("loadMore", counter);
}
return {
src/components/Search/TracksGrid.vue
+4 -1
View File
@@ -20,6 +20,8 @@
import LoadMore from "./LoadMore.vue";
import TrackItem from "../shared/TrackItem.vue";
let counter = 0;
const props = defineProps({
tracks: {
type: Object,
@@ -34,7 +36,8 @@ const props = defineProps({
const emit = defineEmits(["loadMore"]);
function loadMore() {
emit("loadMore", "tracks");
counter += 5;
emit("loadMore", counter);
}
</script>
src/composables/loadmore.js
+42
View File
@@ -0,0 +1,42 @@
import axios from "axios";
const url = "http://0.0.0.0:9876/search/loadmore";
async function loadMoreTracks(start) {
const response = await axios.get(url, {
params: {
type: "tracks",
start: start,
},
});
return response.data;
}
async function loadMoreAlbums(start) {
const response = await axios.get(url, {
params: {
type: "albums",
start: start,
},
});
return response.data;
}
async function loadMoreArtists(start) {
const response = await axios.get(url, {
params: {
type: "artists",
start: start,
},
});
return response.data;
}
export default {
loadMoreTracks,
loadMoreAlbums,
loadMoreArtists,
};
yarn.lock
+12
View File
@@ -353,6 +353,13 @@ argparse@^2.0.1:
resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
axios@^0.26.0:
version "0.26.0"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.26.0.tgz#9a318f1c69ec108f8cd5f3c3d390366635e13928"
integrity sha512-lKoGLMYtHvFrPVt3r+RBMp9nh34N0M8zEfCWqdWZx6phynIEhQqAdydpyBAAG211zlhX9Rgu08cOamy6XjE5Og==
dependencies:
follow-redirects "^1.14.8"
balanced-match@^1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -807,6 +814,11 @@ flatted@^3.1.0:
resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
follow-redirects@^1.14.8:
version "1.14.9"
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
fs.realpath@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"