start migration to <script setup>

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

View File

@ -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>

View File

@ -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"

View File

@ -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()

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 591 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -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>

View File

@ -38,9 +38,12 @@ export default {
margin-left: $small;
margin-top: $small;
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;

View File

@ -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 }) {
more: {
type: Boolean,
required: true,
},
});
const emit = defineEmits(["loadMore"])
function loadMore() {
emit("loadMore", "tracks");
}
return {
loadMore,
};
},
};
</script>
<style lang="scss">

View File

@ -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(&quot;${song.image}&quot;)`,
}"
:style="{ backgroundImage: `url(&quot;${song.image}&quot;` }"
>
<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 {
border: solid;
display: none;
}
}
@include phone-only {
width: 100%;
td {
background-color: #14161a;
@ -126,21 +131,37 @@ export default {
padding: $small;
}
&:hover {
& {
& td {
background-color: rgb(5, 80, 150);
td:first-child {
border-radius: $small 0 0 $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 {
border-radius: $small 0 0 $small;
}
td:nth-child(2) {
border-radius: 0;
@include phone-only {
border-radius: $small;
}
}
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;
}
}