eric/pmomusic
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases 3 Wiki Activity

debug de l'application vue

Browse Source
This commit is contained in:
Eric Coissac
2025-10-26 18:30:50 +01:00
parent 79271514b4
commit bbecd8efb5
4 changed files with 88 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
pmoapp/webapp/src/components/AudioCacheManager.vue
View File

@@ -93,8 +93,8 @@
</div>
<div class="pk">{{ track.pk }}</div>
<div class="meta">
<span v-if="track.metadata?.duration_ms">
{{ formatDuration(track.metadata.duration_ms) }}
<span v-if="durationMs(track) !== undefined">
{{ formatDuration(durationMs(track)!) }}
</span>
<span v-if="track.metadata?.sample_rate">
{{ formatSampleRate(track.metadata.sample_rate) }}
@@ -147,7 +147,9 @@
<p v-if="selectedTrack.metadata.year"><strong>Year:</strong> {{ selectedTrack.metadata.year }}</p>
<p v-if="selectedTrack.metadata.genre"><strong>Genre:</strong> {{ selectedTrack.metadata.genre }}</p>
<p v-if="selectedTrack.metadata.track_number"><strong>Track:</strong> {{ selectedTrack.metadata.track_number }}</p>
<p v-if="selectedTrack.metadata.duration_ms"><strong>Duration:</strong> {{ formatDuration(selectedTrack.metadata.duration_ms) }}</p>
<p v-if="durationMs(selectedTrack) !== undefined">
<strong>Duration:</strong> {{ formatDuration(durationMs(selectedTrack)!) }}
</p>
<p v-if="selectedTrack.metadata.sample_rate"><strong>Sample Rate:</strong> {{ formatSampleRate(selectedTrack.metadata.sample_rate) }}</p>
<p v-if="selectedTrack.metadata.bitrate"><strong>Bitrate:</strong> {{ formatBitrate(selectedTrack.metadata.bitrate) }}</p>
<p v-if="selectedTrack.metadata.channels"><strong>Channels:</strong> {{ selectedTrack.metadata.channels }}</p>
@@ -155,7 +157,11 @@
<div class="cache-section">
<h4>Cache Info</h4>
<p><strong>PK:</strong> {{ selectedTrack.pk }}</p>
<p><strong>Source URL:</strong> <a :href="selectedTrack.source_url" target="_blank">{{ selectedTrack.source_url }}</a></p>
<p v-if="resolveTrackOrigin(selectedTrack)">
<strong>Source URL:</strong>
<a :href="resolveTrackOrigin(selectedTrack)" target="_blank">{{ resolveTrackOrigin(selectedTrack) }}</a>
</p>
<p v-else><strong>Source URL:</strong> Unknown</p>
<p><strong>Hits:</strong> {{ selectedTrack.hits }}</p>
<p v-if="selectedTrack.collection"><strong>Collection:</strong> {{ selectedTrack.collection }}</p>
<p v-if="selectedTrack.last_used"><strong>Last Used:</strong> {{ formatDate(selectedTrack.last_used) }}</p>
@@ -206,6 +212,8 @@ import {
consolidateCache,
getTrackUrl,
getOriginalTrackUrl,
getOriginUrl,
getDurationMs,
formatDuration,
formatBitrate,
formatSampleRate,
@@ -388,6 +396,14 @@ function copyTrackUrl(pk: string) {
alert("✅ URL copied!");
}
function resolveTrackOrigin(track: AudioCacheEntry | null): string | undefined {
return track ? getOriginUrl(track) : undefined;
}
function durationMs(track: AudioCacheEntry | null): number | undefined {
return track ? getDurationMs(track.metadata) : undefined;
}
function formatDate(dateString: string) {
const d = new Date(dateString);
const diff = Date.now() - d.getTime();

24
pmoapp/webapp/src/components/CoverCacheManager.vue
View File

@@ -71,7 +71,7 @@
<div class="image-wrapper">
<img
:src="getImageUrl(image.pk, 256)"
:alt="image.source_url"
:alt="resolveOrigin(image) || image.pk"
loading="lazy"
@error="handleImageError"
/>
@@ -81,8 +81,8 @@
</div>
<div class="image-info">
<div class="pk">{{ image.pk }}</div>
<div class="url" :title="image.source_url">
{{ truncateUrl(image.source_url) }}
<div class="url" :title="resolveOrigin(image) || 'Unknown source'">
{{ truncateUrl(resolveOrigin(image)) }}
</div>
<div class="meta">
<span v-if="image.last_used" class="last-used">
@@ -108,13 +108,17 @@
<button class="modal-close" @click="selectedImage = null">✕</button>
<img
:src="getImageUrl(selectedImage.pk)"
:alt="selectedImage.source_url"
:alt="resolveOrigin(selectedImage) || selectedImage.pk"
class="modal-image"
/>
<div class="modal-info">
<h3>Image Details</h3>
<p><strong>PK:</strong> {{ selectedImage.pk }}</p>
<p><strong>Source URL:</strong> <a :href="selectedImage.source_url" target="_blank">{{ selectedImage.source_url }}</a></p>
<p v-if="resolveOrigin(selectedImage)">
<strong>Source URL:</strong>
<a :href="resolveOrigin(selectedImage)" target="_blank">{{ resolveOrigin(selectedImage) }}</a>
</p>
<p v-else><strong>Source URL:</strong> Unknown</p>
<p><strong>Hits:</strong> {{ selectedImage.hits }}</p>
<p v-if="selectedImage.last_used"><strong>Last Used:</strong> {{ formatDate(selectedImage.last_used) }}</p>
<div class="modal-actions">
@@ -141,6 +145,7 @@ import {
purgeCache,
consolidateCache,
getImageUrl,
getOriginUrl,
waitForDownload,
} from "../services/coverCache";
@@ -229,7 +234,14 @@ function copyImageUrl(pk:string){
alert("✅ URL copied!");
}
function truncateUrl(url:string,maxLength=40){ return url.length<=maxLength?url:url.slice(0,maxLength-3)+"..."; }
function resolveOrigin(entry: CacheEntry | null): string | undefined {
return entry ? getOriginUrl(entry) : undefined;
}
function truncateUrl(url?:string,maxLength=40){
if(!url) return "Unknown source";
return url.length<=maxLength?url:url.slice(0,maxLength-3)+"...";
}
function formatDate(dateString:string){
const d=new Date(dateString), diff=Date.now()-d.getTime(), days=Math.floor(diff/(1000*60*60*24));
if(days===0)return"Today"; if(days===1)return"Yesterday"; if(days<7)return`${days} days ago`; return d.toLocaleDateString();

35
pmoapp/webapp/src/services/audioCache.ts
View File

@@ -2,27 +2,32 @@
* Service API pour interagir avec le cache de pistes audio
*/
export interface AudioMetadata {
export interface AudioCacheMetadata {
origin_url?: string;
title?: string;
artist?: string;
album?: string;
year?: number;
genre?: string;
track_number?: number;
track_total?: number;
disc_number?: number;
disc_total?: number;
duration_ms?: number;
duration_secs?: number;
sample_rate?: number;
bitrate?: number;
channels?: number;
[key: string]: unknown;
}
export interface AudioCacheEntry {
pk: string;
source_url: string;
id: string | null;
hits: number;
last_used: string | null;
collection?: string;
metadata?: AudioMetadata;
collection?: string | null;
metadata?: AudioCacheMetadata | null;
}
export interface AddTrackRequest {
@@ -48,6 +53,28 @@ export interface ApiError {
message: string;
}
export function getOriginUrl(entry: AudioCacheEntry): string | undefined {
const metadata = entry.metadata;
if (metadata && typeof metadata === "object") {
const origin = (metadata as { origin_url?: unknown }).origin_url;
if (typeof origin === "string" && origin.trim().length > 0) {
return origin;
}
}
return undefined;
}
export function getDurationMs(metadata?: AudioCacheMetadata | null): number | undefined {
if (!metadata) return undefined;
if (typeof metadata.duration_ms === "number" && !Number.isNaN(metadata.duration_ms)) {
return metadata.duration_ms;
}
if (typeof metadata.duration_secs === "number" && !Number.isNaN(metadata.duration_secs)) {
return metadata.duration_secs * 1000;
}
return undefined;
}
/**
* Liste toutes les pistes en cache
*/

20
pmoapp/webapp/src/services/coverCache.ts
View File

@@ -2,11 +2,18 @@
* Service API pour interagir avec le cache d'images de couvertures
*/
export interface CacheMetadata {
origin_url?: string;
[key: string]: unknown;
}
export interface CacheEntry {
pk: string;
source_url: string;
id: string | null;
collection?: string | null;
hits: number;
last_used: string | null;
metadata?: CacheMetadata | null;
}
export interface AddImageRequest {
@@ -168,6 +175,17 @@ export async function waitForDownload(
/**
* Génère l'URL pour afficher une image
*/
export function getOriginUrl(entry: CacheEntry): string | undefined {
const metadata = entry.metadata;
if (metadata && typeof metadata === "object") {
const origin = (metadata as { origin_url?: unknown }).origin_url;
if (typeof origin === "string" && origin.trim().length > 0) {
return origin;
}
}
return undefined;
}
export function getImageUrl(pk: string, size?: number): string {
if (size) {
return `/covers/image/${pk}/${size}`;