Bump version to 0.3.10
Update version number from 0.3.9 to 0.3.10 in Cargo.toml and version.txt files. Also, enhance image loading handling in multiple Vue components (ContainerItem, CurrentTrack, MediaItem, QueueItem, ServerDrawer) by: - Adding ref and watch for tracking image loading states - Implementing proper load and error handlers - Using v-show to control image visibility based on loading state - Adding image state tracking for each item in ServerDrawer - Improving placeholder display logic
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { ref, computed, watch, reactive } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import {
|
||||
X,
|
||||
@@ -53,6 +53,29 @@ const isLoading = ref(false);
|
||||
// État du menu dropdown (pour chaque item, on stocke si son menu est ouvert)
|
||||
const openMenuId = ref<string | null>(null);
|
||||
|
||||
// Track image loading state per item
|
||||
const imageStates = reactive<Map<string, { loaded: boolean; error: boolean }>>(
|
||||
new Map(),
|
||||
);
|
||||
|
||||
function getImageState(itemId: string) {
|
||||
if (!imageStates.has(itemId)) {
|
||||
imageStates.set(itemId, { loaded: false, error: false });
|
||||
}
|
||||
return imageStates.get(itemId)!;
|
||||
}
|
||||
|
||||
function handleImageLoad(itemId: string) {
|
||||
const state = getImageState(itemId);
|
||||
state.loaded = true;
|
||||
state.error = false;
|
||||
}
|
||||
|
||||
function handleImageError(itemId: string) {
|
||||
const state = getImageState(itemId);
|
||||
state.error = true;
|
||||
}
|
||||
|
||||
// Rafraîchir la liste quand le drawer s'ouvre
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
@@ -65,6 +88,7 @@ watch(
|
||||
browseData.value = null;
|
||||
clearPath();
|
||||
closeMenu();
|
||||
imageStates.clear();
|
||||
}
|
||||
},
|
||||
);
|
||||
@@ -470,33 +494,25 @@ function handleSettingsClick() {
|
||||
<!-- Cover avec image ou icône -->
|
||||
<div class="content-cover">
|
||||
<img
|
||||
v-if="item.album_art_uri"
|
||||
v-if="
|
||||
item.album_art_uri &&
|
||||
!getImageState(item.id).error
|
||||
"
|
||||
v-show="getImageState(item.id).loaded"
|
||||
:src="item.album_art_uri"
|
||||
:alt="item.title"
|
||||
class="cover-image"
|
||||
loading="lazy"
|
||||
@error="
|
||||
(e) => {
|
||||
(
|
||||
e.target as HTMLImageElement
|
||||
).style.display = 'none';
|
||||
const placeholder = (
|
||||
e.target as HTMLElement
|
||||
)
|
||||
.nextElementSibling as HTMLElement;
|
||||
if (placeholder)
|
||||
placeholder.style.display =
|
||||
'flex';
|
||||
}
|
||||
"
|
||||
@load="handleImageLoad(item.id)"
|
||||
@error="handleImageError(item.id)"
|
||||
/>
|
||||
<div
|
||||
v-if="
|
||||
!item.album_art_uri ||
|
||||
getImageState(item.id).error ||
|
||||
!getImageState(item.id).loaded
|
||||
"
|
||||
class="cover-placeholder"
|
||||
:style="{
|
||||
display: item.album_art_uri
|
||||
? 'none'
|
||||
: 'flex',
|
||||
}"
|
||||
>
|
||||
<Folder
|
||||
v-if="item.is_container"
|
||||
|
||||
Reference in New Issue
Block a user