juli0n21/pwa-player
1
0
Fork 0
mirror of https://github.com/JuLi0n21/pwa-player.git synced 2026-04-19 23:40:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

resizing images ondemand

Browse Source
This commit is contained in:
ju09279
2024-08-16 00:28:14 +02:00
parent c3c4de3c44
commit b4ac10c006
9 changed files with 119 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/views/CollectionView.vue
View File

@@ -11,7 +11,7 @@ const collections = ref<CollectionPreview[]>([]);
onMounted(async () => {
const data = await userStore.fetchCollections();
data.forEach(song => {
song.previewimage = `${userStore.baseUrl}api/v1/images/${song.previewimage}`;
song.previewimage = `${userStore.baseUrl}api/v1/images/${song.previewimage}?h=80&w=80`;
})
collections.value = data;
@@ -21,12 +21,7 @@ onMounted(async () => {
<template>
<main class="flex-1 text-center flex flex-col h-full overflow-scroll">
<div class="flex flex-col overflow-scroll">
<CollectionListItem
v-for="(collection, index) in collections"
:key="index"
:collection="collection"
/>
<CollectionListItem v-for="(collection, index) in collections" :key="index" :collection="collection" />
</div>
</main>
</template>

11
frontend/src/views/NowPlayingView.vue
View File

@@ -23,8 +23,9 @@ const audioStore = useAudioStore();
<div class="flex flex-col justify-around">
<div class="relative">
<i class="relative p-36 fa-solid fa-play">
<img class="h-72 absolute top-4 left-0 bottom-0 right-0 bg-center bg-cover rounded-lg" :src="encodeURI(audioStore.bgimg)" :key="audioStore.bgimg" />
<img class="h-72 absolute top-4 left-0 bottom-0 right-0 bg-center bg-cover rounded-lg"
:src="encodeURI(audioStore.bgimg + '?h=500&w=500')" :key="audioStore.bgimg" />
</i>
</div>
@@ -46,11 +47,11 @@ const audioStore = useAudioStore();
<p>{{ audioStore.artist }}</p>
</div>
<div class="flex flex-col justify-between mb-4">
<i @click="audioStore.toggleRepeat" :class="[audioStore.repeat ? 'text-pink-500' : '']"
class="fa-solid fa-repeat"></i>
<i @click="audioStore.toggleRepeat" :class="[audioStore.repeat ? 'text-pink-500' : '']"
class="fa-solid fa-repeat"></i>
<i @click="this.$router.go(-1);" class="fa-solid fa-arrow-down"></i>
</div>
</div>
</div>
<div class="flex">
<input
class="appearance-none mx-4 flex-1 bg-yellow-200 bg-opacity-20 accent-yellow-600 rounded-lg outline-none slider"