tcsenpai/swingmusic
1
0
Fork 0
mirror of https://github.com/tcsenpai/swingmusic.git synced 2025-06-10 04:57:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

start migration to <script setup>

Browse Source
This commit is contained in:
geoffrey45 2022-01-26 10:01:35 +03:00
parent d6204946c2
commit 13ee2ed1d6
14 changed files with 91 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="img/favicon.ico" /> <link rel="icon" href="./src/assets/images/icons/favicon.ico" />
<title>MusicX</title> <title>MusicX</title>
</head> </head>
<body> <body>

31
server/app/api.py
View File

@ -70,7 +70,7 @@ def search_by_title():
artist_obj = { artist_obj = {
"name": artist, "name": artist,
"image": "http://0.0.0.0:8900/images/artists/webp/" + artist.replace("/", "::") + ".webp" "image": "http://0.0.0.0:8900/images/artists/" + artist.replace("/", "::") + ".webp"
} }
if artist_obj not in artists_dicts: if artist_obj not in artists_dicts:
@ -129,7 +129,7 @@ def get_album_artists(album, artist):
for artist in artists: for artist in artists:
artist_obj = { artist_obj = {
"name": artist, "name": artist,
"image": "http://0.0.0.0:8900/images/artists/webp/" + artist.replace('/', '::') + ".webp" "image": "http://0.0.0.0:8900/images/artists/" + artist.replace('/', '::') + ".webp"
} }
final_artists.append(artist_obj) final_artists.append(artist_obj)
@ -252,7 +252,7 @@ def getAlbumSongs(query: str):
songs = [] songs = []
for track in all_the_f_music: for track in all_the_f_music:
if track['album'] == album and track['album_artist'] == artist: if track.album == album and track.album_artist == artist:
songs.append(track) songs.append(track)
songs = helpers.remove_duplicates(songs) songs = helpers.remove_duplicates(songs)
@ -260,10 +260,10 @@ def getAlbumSongs(query: str):
album_obj = { album_obj = {
"name": album, "name": album,
"count": len(songs), "count": len(songs),
"duration": sum(song['length'] for song in songs), "duration": "56 Minutes",
"image": songs[0]['image'], "image": songs[0].image,
"artist": songs[0]['album_artist'], "artist": songs[0].album_artist,
"artist_image": "http://127.0.0.1:8900/images/artists/webp/" + songs[0]['album_artist'].replace('/', '::') + ".webp" "artist_image": "http://127.0.0.1:8900/images/artists/" + songs[0].album_artist.replace('/', '::') + ".webp"
} }
return {'songs': songs, 'info': album_obj} return {'songs': songs, 'info': album_obj}
@ -275,20 +275,3 @@ def drop_db(title, artist):
bio = functions.getAlbumBio(title, artist) bio = functions.getAlbumBio(title, artist)
return {'bio': bio}, 200 return {'bio': bio}, 200
@bp.route('/convert')
def convert_images_to_webp():
path = os.path.join(home_dir, helpers.app_dir, 'images', 'artists')
final_path = os.path.join(
home_dir, helpers.app_dir, 'images', 'artists', 'webp')
for file in os.scandir(path):
if file.name.endswith(".jpg"):
print(file.name)
print(os.path.join(final_path, file.name.replace('.jpg', '.webp')))
img = helpers.Image.open(os.path.join(path, file.name)).resize(
(150, 150), helpers.Image.ANTIALIAS)
img.save(os.path.join(final_path, file.name.replace(
'.jpg', '.webp')), format='webp')
return "Done"

4
server/app/functions.py
View File

@ -122,12 +122,12 @@ def extract_thumb(audio_file_path: str = None) -> str:
img = Image.open(BytesIO(album_art)) img = Image.open(BytesIO(album_art))
try: try:
small_img = img.resize((150, 150), Image.ANTIALIAS) small_img = img.resize((250, 250), Image.ANTIALIAS)
small_img.save(img_path, format="webp") small_img.save(img_path, format="webp")
except OSError: except OSError:
try: try:
png = img.convert('RGB') png = img.convert('RGB')
small_img = png.resize((150, 150), Image.ANTIALIAS) small_img = png.resize((250, 250), Image.ANTIALIAS)
small_img.save(img_path, format="webp") small_img.save(img_path, format="webp")
except: except:
return use_defaults() return use_defaults()

1
src/App.vue
View File

@ -75,7 +75,6 @@ export default {
}; };
const collapseSearch = () => { const collapseSearch = () => {
console.log('hooooo')
search.value = false; search.value = false;
}; };

BIN
src/assets/images/icons/android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/images/icons/android-chrome-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
src/assets/images/icons/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
src/assets/images/icons/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 591 B

BIN
src/assets/images/icons/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/images/icons/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

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

@ -4,6 +4,7 @@
<table> <table>
<thead> <thead>
<tr> <tr>
<th class="index"></th>
<th class="track-header">Track</th> <th class="track-header">Track</th>
<th class="artists-header">Artist</th> <th class="artists-header">Artist</th>
<th class="album-header">Album</th> <th class="album-header">Album</th>
@ -12,9 +13,10 @@
</thead> </thead>
<tbody> <tbody>
<SongItem <SongItem
v-for="song in props.songs" v-for="(song, index) in props.songs"
:key="song" :key="song"
:song="song" :song="song"
:index="index + 1"
@updateQueue="updateQueue" @updateQueue="updateQueue"
@loadAlbum="loadAlbum" @loadAlbum="loadAlbum"
/> />
@ -34,12 +36,13 @@
<script setup> <script setup>
import { ref } from "@vue/reactivity"; import { ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core"; import { onMounted } from "@vue/runtime-core";
// import { defineProps } from 'vue'; import { useRoute } from "vue-router";
import SongItem from "../shared/SongItem.vue"; import SongItem from "../shared/SongItem.vue";
import routeLoader from "@/composables/routeLoader.js"; import routeLoader from "@/composables/routeLoader.js";
import perks from "@/composables/perks.js"; import perks from "@/composables/perks.js";
import state from "@/composables/state.js"; import state from "@/composables/state.js";
import { useRoute } from "vue-router";
const props = defineProps({ const props = defineProps({
songs: { songs: {
@ -48,7 +51,6 @@ const props = defineProps({
} }
}); });
let route; let route;
const search_query = ref(state.search_query); const search_query = ref(state.search_query);
@ -144,6 +146,10 @@ table {
display: none; display: none;
} }
} }
th.index {
width: 2rem;
}
} }
} }
</style> </style>

9
src/components/Search/AlbumGrid.vue
View File

@ -37,13 +37,16 @@ export default {
margin-left: $small; margin-left: $small;
margin-top: $small; margin-top: $small;
padding: $small 0; padding: $small 0;
overflow-x: hidden;
.grid { .grid {
display: flex; display: grid;
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
flex-wrap: wrap; flex-wrap: wrap;
padding: 0 0 0 $small; padding: 0 0 0 $small;
gap: $small; gap: $small;
} }
} }
</style> </style>

39
src/components/Search/TracksGrid.vue
View File

@ -4,7 +4,12 @@
<div class="items"> <div class="items">
<table> <table>
<tbody> <tbody>
<SongItem v-for="track in tracks" :key="track" :song="track" /> <SongItem
v-for="(track, index) in props.tracks"
:key="track"
:song="track"
:index="index + 1"
/>
</tbody> </tbody>
</table> </table>
<LoadMore v-if="more" @loadMore="loadMore" /> <LoadMore v-if="more" @loadMore="loadMore" />
@ -12,26 +17,26 @@
</div> </div>
</template> </template>
<script> <script setup>
import SongItem from "@/components/shared/SongItem.vue"; import SongItem from "@/components/shared/SongItem.vue";
import LoadMore from "./LoadMore.vue"; import LoadMore from "./LoadMore.vue";
export default { const props = defineProps({
props: ["tracks", "more"], tracks: {
components: { type: Object,
SongItem, required: true,
LoadMore,
}, },
setup(props, { emit }) { more: {
function loadMore() { type: Boolean,
emit("loadMore", "tracks"); required: true,
} },
});
return { const emit = defineEmits(["loadMore"])
loadMore,
}; function loadMore() {
}, emit("loadMore", "tracks");
}; }
</script> </script>
<style lang="scss"> <style lang="scss">
@ -40,4 +45,4 @@ export default {
margin-left: $small; margin-left: $small;
padding: $small; padding: $small;
} }
</style> </style>

64
src/components/shared/SongItem.vue
View File

@ -1,14 +1,10 @@
<template> <template>
<tr <tr class="songlist-item" :class="{ current: current.id == song.id }">
class="songlist-item" <td class="index">{{ index }}</td>
:class="{ current: current.id == song.id }"
>
<td class="flex" @click="emitUpdate(song)"> <td class="flex" @click="emitUpdate(song)">
<div <div
class="album-art rounded image" class="album-art rounded image"
:style="{ :style="{ backgroundImage: `url(&quot;${song.image}&quot;` }"
backgroundImage: `url(&quot;${song.image}&quot;)`,
}"
> >
<div <div
class="now-playing-track image" class="now-playing-track image"
@ -20,9 +16,9 @@
<span class="ellip">{{ song.title }}</span> <span class="ellip">{{ song.title }}</span>
<div class="separator no-border"></div> <div class="separator no-border"></div>
<div 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>
</div> </div>
</div> </div>
</td> </td>
@ -44,9 +40,7 @@
{{ song.album }} {{ song.album }}
</div> </div>
</td> </td>
<td class="song-duration"> <td class="song-duration">{{ song.length }}</td>
{{ song.length }}
</td>
</tr> </tr>
</template> </template>
@ -55,15 +49,15 @@ import perks from "@/composables/perks.js";
import state from "@/composables/state.js"; import state from "@/composables/state.js";
export default { export default {
props: ["song"], props: ["song", "index"],
emits: ['updateQueue', 'loadAlbum'], emits: ["updateQueue", "loadAlbum"],
setup(props, { emit }) { setup(props, { emit }) {
function emitUpdate(song) { function emitUpdate(song) {
emit("updateQueue", song); emit("updateQueue", song);
} }
function emitLoadAlbum(title, artist) { function emitLoadAlbum(title, artist) {
console.log('hii') console.log("hii");
emit("loadAlbum", title, artist); emit("loadAlbum", title, artist);
} }
@ -80,8 +74,19 @@ export default {
<style lang="scss"> <style lang="scss">
.songlist-item { .songlist-item {
.index {
color: grey;
font-size: 0.8rem;
text-align: center;
width: 2rem;
@include phone-only {
display: none;
}
}
@include phone-only { @include phone-only {
border: solid; width: 100%;
td { td {
background-color: #14161a; background-color: #14161a;
@ -126,21 +131,37 @@ export default {
padding: $small; padding: $small;
} }
td:first-child {
border-radius: $small 0 0 $small;
}
td:nth-child(2){
border-radius: 0 $small $small 0;
@include phone-only {
border-radius: $small;
}
}
&:hover { &:hover {
& { & {
& td { & td {
background-color: rgb(5, 80, 150); background-color: rgb(5, 80, 150);
} }
& td:first-child { td:first-child {
border-radius: $small 0 0 $small; border-radius: $small 0 0 $small;
}
td:nth-child(2) {
border-radius: 0;
@include phone-only { @include phone-only {
border-radius: $small; border-radius: $small;
} }
} }
td:nth-child(2) { td:nth-child(3) {
@include tablet-portrait { @include tablet-portrait {
border-radius: 0 $small $small 0 !important; border-radius: 0 $small $small 0 !important;
} }
@ -150,9 +171,10 @@ export default {
} }
} }
& > td:nth-child(3) { & > td:nth-child(4) {
@include tablet-landscape { @include tablet-landscape {
border-radius: 0 $small $small 0 !important; border-radius: 0 $small $small 0 !important;
// border: solid red !important;
} }
} }
@ -180,4 +202,4 @@ export default {
} }
} }
} }
</style> </style>