mirror of
https://github.com/tcsenpai/swingmusic.git
synced 2025-06-10 13:07:35 +00:00
start migration to <script setup>
This commit is contained in:
parent
d6204946c2
commit
13ee2ed1d6
@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -70,7 +70,7 @@ def search_by_title():
|
||||
|
||||
artist_obj = {
|
||||
"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:
|
||||
@ -129,7 +129,7 @@ def get_album_artists(album, artist):
|
||||
for artist in artists:
|
||||
artist_obj = {
|
||||
"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)
|
||||
|
||||
@ -252,7 +252,7 @@ def getAlbumSongs(query: str):
|
||||
songs = []
|
||||
|
||||
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 = helpers.remove_duplicates(songs)
|
||||
@ -260,10 +260,10 @@ def getAlbumSongs(query: str):
|
||||
album_obj = {
|
||||
"name": album,
|
||||
"count": len(songs),
|
||||
"duration": sum(song['length'] for song in songs),
|
||||
"image": songs[0]['image'],
|
||||
"artist": songs[0]['album_artist'],
|
||||
"artist_image": "http://127.0.0.1:8900/images/artists/webp/" + songs[0]['album_artist'].replace('/', '::') + ".webp"
|
||||
"duration": "56 Minutes",
|
||||
"image": songs[0].image,
|
||||
"artist": songs[0].album_artist,
|
||||
"artist_image": "http://127.0.0.1:8900/images/artists/" + songs[0].album_artist.replace('/', '::') + ".webp"
|
||||
}
|
||||
|
||||
return {'songs': songs, 'info': album_obj}
|
||||
@ -275,20 +275,3 @@ def drop_db(title, artist):
|
||||
bio = functions.getAlbumBio(title, artist)
|
||||
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"
|
||||
|
@ -122,12 +122,12 @@ def extract_thumb(audio_file_path: str = None) -> str:
|
||||
img = Image.open(BytesIO(album_art))
|
||||
|
||||
try:
|
||||
small_img = img.resize((150, 150), Image.ANTIALIAS)
|
||||
small_img = img.resize((250, 250), Image.ANTIALIAS)
|
||||
small_img.save(img_path, format="webp")
|
||||
except OSError:
|
||||
try:
|
||||
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")
|
||||
except:
|
||||
return use_defaults()
|
||||
|
@ -75,7 +75,6 @@ export default {
|
||||
};
|
||||
|
||||
const collapseSearch = () => {
|
||||
console.log('hooooo')
|
||||
search.value = false;
|
||||
};
|
||||
|
||||
|
BIN
src/assets/images/icons/android-chrome-192x192.png
Normal file
BIN
src/assets/images/icons/android-chrome-192x192.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/images/icons/android-chrome-512x512.png
Normal file
BIN
src/assets/images/icons/android-chrome-512x512.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 38 KiB |
BIN
src/assets/images/icons/apple-touch-icon.png
Normal file
BIN
src/assets/images/icons/apple-touch-icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 9.5 KiB |
BIN
src/assets/images/icons/favicon-16x16.png
Normal file
BIN
src/assets/images/icons/favicon-16x16.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 591 B |
BIN
src/assets/images/icons/favicon-32x32.png
Normal file
BIN
src/assets/images/icons/favicon-32x32.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/images/icons/favicon.ico
Normal file
BIN
src/assets/images/icons/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
@ -4,6 +4,7 @@
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="index"></th>
|
||||
<th class="track-header">Track</th>
|
||||
<th class="artists-header">Artist</th>
|
||||
<th class="album-header">Album</th>
|
||||
@ -12,9 +13,10 @@
|
||||
</thead>
|
||||
<tbody>
|
||||
<SongItem
|
||||
v-for="song in props.songs"
|
||||
v-for="(song, index) in props.songs"
|
||||
:key="song"
|
||||
:song="song"
|
||||
:index="index + 1"
|
||||
@updateQueue="updateQueue"
|
||||
@loadAlbum="loadAlbum"
|
||||
/>
|
||||
@ -34,12 +36,13 @@
|
||||
<script setup>
|
||||
import { ref } from "@vue/reactivity";
|
||||
import { onMounted } from "@vue/runtime-core";
|
||||
// import { defineProps } from 'vue';
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
import SongItem from "../shared/SongItem.vue";
|
||||
|
||||
import routeLoader from "@/composables/routeLoader.js";
|
||||
import perks from "@/composables/perks.js";
|
||||
import state from "@/composables/state.js";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const props = defineProps({
|
||||
songs: {
|
||||
@ -48,7 +51,6 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
let route;
|
||||
|
||||
const search_query = ref(state.search_query);
|
||||
@ -144,6 +146,10 @@ table {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
th.index {
|
||||
width: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
@ -37,13 +37,16 @@ export default {
|
||||
|
||||
margin-left: $small;
|
||||
margin-top: $small;
|
||||
padding: $small 0;
|
||||
padding: $small 0;
|
||||
overflow-x: hidden;
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
|
||||
|
||||
flex-wrap: wrap;
|
||||
padding: 0 0 0 $small;
|
||||
gap: $small;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
@ -4,7 +4,12 @@
|
||||
<div class="items">
|
||||
<table>
|
||||
<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>
|
||||
</table>
|
||||
<LoadMore v-if="more" @loadMore="loadMore" />
|
||||
@ -12,26 +17,26 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import SongItem from "@/components/shared/SongItem.vue";
|
||||
import LoadMore from "./LoadMore.vue";
|
||||
|
||||
export default {
|
||||
props: ["tracks", "more"],
|
||||
components: {
|
||||
SongItem,
|
||||
LoadMore,
|
||||
const props = defineProps({
|
||||
tracks: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
function loadMore() {
|
||||
emit("loadMore", "tracks");
|
||||
}
|
||||
more: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
loadMore,
|
||||
};
|
||||
},
|
||||
};
|
||||
const emit = defineEmits(["loadMore"])
|
||||
|
||||
function loadMore() {
|
||||
emit("loadMore", "tracks");
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@ -40,4 +45,4 @@ export default {
|
||||
margin-left: $small;
|
||||
padding: $small;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
@ -1,14 +1,10 @@
|
||||
<template>
|
||||
<tr
|
||||
class="songlist-item"
|
||||
:class="{ current: current.id == song.id }"
|
||||
>
|
||||
<tr class="songlist-item" :class="{ current: current.id == song.id }">
|
||||
<td class="index">{{ index }}</td>
|
||||
<td class="flex" @click="emitUpdate(song)">
|
||||
<div
|
||||
class="album-art rounded image"
|
||||
:style="{
|
||||
backgroundImage: `url("${song.image}")`,
|
||||
}"
|
||||
:style="{ backgroundImage: `url("${song.image}"` }"
|
||||
>
|
||||
<div
|
||||
class="now-playing-track image"
|
||||
@ -20,9 +16,9 @@
|
||||
<span class="ellip">{{ song.title }}</span>
|
||||
<div class="separator no-border"></div>
|
||||
<div class="artist ellip">
|
||||
<span v-for="artist in putCommas(song.artists)" :key="artist">{{
|
||||
artist
|
||||
}}</span>
|
||||
<span v-for="artist in putCommas(song.artists)" :key="artist">
|
||||
{{ artist }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
@ -44,9 +40,7 @@
|
||||
{{ song.album }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="song-duration">
|
||||
{{ song.length }}
|
||||
</td>
|
||||
<td class="song-duration">{{ song.length }}</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
@ -55,15 +49,15 @@ import perks from "@/composables/perks.js";
|
||||
import state from "@/composables/state.js";
|
||||
|
||||
export default {
|
||||
props: ["song"],
|
||||
emits: ['updateQueue', 'loadAlbum'],
|
||||
props: ["song", "index"],
|
||||
emits: ["updateQueue", "loadAlbum"],
|
||||
setup(props, { emit }) {
|
||||
function emitUpdate(song) {
|
||||
emit("updateQueue", song);
|
||||
}
|
||||
|
||||
function emitLoadAlbum(title, artist) {
|
||||
console.log('hii')
|
||||
console.log("hii");
|
||||
emit("loadAlbum", title, artist);
|
||||
}
|
||||
|
||||
@ -80,8 +74,19 @@ export default {
|
||||
|
||||
<style lang="scss">
|
||||
.songlist-item {
|
||||
.index {
|
||||
color: grey;
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
width: 2rem;
|
||||
|
||||
@include phone-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@include phone-only {
|
||||
border: solid;
|
||||
width: 100%;
|
||||
|
||||
td {
|
||||
background-color: #14161a;
|
||||
@ -126,21 +131,37 @@ export default {
|
||||
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 {
|
||||
& {
|
||||
& td {
|
||||
background-color: rgb(5, 80, 150);
|
||||
}
|
||||
|
||||
& td:first-child {
|
||||
td:first-child {
|
||||
border-radius: $small 0 0 $small;
|
||||
}
|
||||
|
||||
td:nth-child(2) {
|
||||
border-radius: 0;
|
||||
|
||||
@include phone-only {
|
||||
border-radius: $small;
|
||||
}
|
||||
}
|
||||
|
||||
td:nth-child(2) {
|
||||
td:nth-child(3) {
|
||||
@include tablet-portrait {
|
||||
border-radius: 0 $small $small 0 !important;
|
||||
}
|
||||
@ -150,9 +171,10 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
& > td:nth-child(3) {
|
||||
& > td:nth-child(4) {
|
||||
@include tablet-landscape {
|
||||
border-radius: 0 $small $small 0 !important;
|
||||
// border: solid red !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -180,4 +202,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
Loading…
x
Reference in New Issue
Block a user