vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: animated covers

Browse source
This commit is contained in:
Eduard Prigoana 2026-02-24 12:43:36 +00:00
parent 700645919c
commit 424ee12d04
4 changed files with 203 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
js/api.js
View file

@ -1247,6 +1247,19 @@ export class LosslessAPI {
return `https://resources.tidal.com/images/${formattedId}/${size}x${size}.jpg`;
}
getVideoCoverUrl(id, size = '1280') {
if (!id) {
return null;
}
const parts = id.split('-');
if (parts.length !== 5) {
return null;
}
return `https://resources.tidal.com/videos/${parts[0]}/${parts[1]}/${parts[2]}/${parts[3]}/${parts[4]}/${size}x${size}.mp4`;
}
getArtistPictureUrl(id, size = '320') {
if (!id) {
return `https://picsum.photos/seed/${Math.random()}/${size}`;

8
js/music-api.js
View file

@ -131,6 +131,14 @@ export class MusicAPI {
return this.tidalAPI.getCoverUrl(id, size);
}
getVideoCoverUrl(videoCoverId, fallbackCoverId, size = '1280') {
if (videoCoverId) {
const videoUrl = this.tidalAPI.getVideoCoverUrl(videoCoverId, size);
if (videoUrl) return videoUrl;
}
return this.getCoverUrl(fallbackCoverId, size);
}
getArtistPictureUrl(id, size = '320') {
if (typeof id === 'string' && id.startsWith('q:')) {
return this.qobuzAPI.getArtistPictureUrl(id.slice(2), size);

59
js/player.js
View file

@ -173,7 +173,34 @@ export class Player {
const albumEl = document.querySelector('.now-playing-bar .album');
const artistEl = document.querySelector('.now-playing-bar .artist');
if (coverEl) coverEl.src = this.api.getCoverUrl(track.album?.cover);
if (coverEl) {
const videoCoverUrl = track.album?.videoCover
? this.api.tidalAPI.getVideoCoverUrl(track.album.videoCover)
: null;
const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.album?.cover);
if (videoCoverUrl) {
if (coverEl.tagName === 'IMG') {
const video = document.createElement('video');
video.src = videoCoverUrl;
video.autoplay = true;
video.loop = true;
video.muted = true;
video.playsInline = true;
video.className = coverEl.className;
coverEl.replaceWith(video);
}
} else {
if (coverEl.tagName === 'VIDEO') {
const img = document.createElement('img');
img.src = coverUrl;
img.className = coverEl.className;
coverEl.replaceWith(img);
} else {
coverEl.src = coverUrl;
}
}
}
if (titleEl) {
const qualityBadge = createQualityBadgeHTML(track);
titleEl.innerHTML = `${escapeHtml(trackTitle)} ${qualityBadge}`;
@ -365,7 +392,35 @@ export class Player {
const trackArtistsHTML = getTrackArtistsHTML(track);
const yearDisplay = getTrackYearDisplay(track);
document.querySelector('.now-playing-bar .cover').src = this.api.getCoverUrl(track.album?.cover);
const coverEl = document.querySelector('.now-playing-bar .cover');
if (coverEl) {
const videoCoverUrl = track.album?.videoCover
? this.api.tidalAPI.getVideoCoverUrl(track.album.videoCover)
: null;
const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.album?.cover);
if (videoCoverUrl) {
if (coverEl.tagName === 'IMG') {
const video = document.createElement('video');
video.src = videoCoverUrl;
video.autoplay = true;
video.loop = true;
video.muted = true;
video.playsInline = true;
video.className = coverEl.className;
coverEl.replaceWith(video);
}
} else {
if (coverEl.tagName === 'VIDEO') {
const img = document.createElement('img');
img.src = coverUrl;
img.className = coverEl.className;
coverEl.replaceWith(img);
} else {
coverEl.src = coverUrl;
}
}
}
document.querySelector('.now-playing-bar .title').innerHTML =
`${escapeHtml(trackTitle)} ${createQualityBadgeHTML(track)}`;
const albumEl = document.querySelector('.now-playing-bar .album');

139
js/ui.js
View file

@ -334,7 +334,7 @@ export class UIRenderer {
const isUnavailable = track.isUnavailable;
const isBlocked = contentBlockingSettings?.shouldHideTrack(track);
const trackImageHTML = showCover
? `<img src="${this.api.getCoverUrl(track.album?.cover)}" alt="Track Cover" class="track-item-cover" loading="lazy">`
? this.getCoverHTML(track.album?.videoCover, track.album?.cover, 'Track Cover', 'track-item-cover')
: '';
let displayIndex;
@ -405,6 +405,14 @@ export class UIRenderer {
`;
}
getCoverHTML(videoCover, cover, alt, className = 'card-image', loading = 'lazy') {
const videoUrl = videoCover ? this.api.tidalAPI.getVideoCoverUrl(videoCover) : null;
if (videoUrl) {
return `<video src="${videoUrl}" class="${className}" alt="${alt}" autoplay loop muted playsinline></video>`;
}
return `<img src="${this.api.getCoverUrl(cover)}" class="${className}" alt="${alt}" loading="${loading}">`;
}
createBaseCardHTML({
type,
id,
@ -608,7 +616,7 @@ export class UIRenderer {
href: `/album/${album.id}`,
title: `${escapeHtml(album.title)} ${explicitBadge} ${qualityBadge}`,
subtitle: `${escapeHtml(artistName)} • ${yearDisplay}${typeLabel}`,
imageHTML: `<img src="${this.api.getCoverUrl(album.cover)}" alt="${escapeHtml(album.title)}" class="card-image" loading="lazy">`,
imageHTML: this.getCoverHTML(album.videoCover, album.cover, escapeHtml(album.title)),
actionButtonsHTML: `
<button class="like-btn card-like-btn" data-action="toggle-like" data-type="album" title="Add to Liked">
${this.createHeartIcon(false)}
@ -893,19 +901,45 @@ export class UIRenderer {
const artist = document.getElementById('fullscreen-track-artist');
const nextTrackEl = document.getElementById('fullscreen-next-track');
const coverUrl = this.api.getCoverUrl(track.album?.cover, '1280');
const videoCoverUrl = track.album?.videoCover
? this.api.tidalAPI.getVideoCoverUrl(track.album.videoCover, '1280')
: null;
const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.album?.cover, '1280');
const fsLikeBtn = document.getElementById('fs-like-btn');
if (fsLikeBtn) {
this.updateLikeState(fsLikeBtn.parentElement, 'track', track.id);
}
if (image.src !== coverUrl) {
image.src = coverUrl;
overlay.style.setProperty('--bg-image', `url('${coverUrl}')`);
this.extractAndApplyColor(coverUrl);
if (videoCoverUrl) {
if (image.tagName === 'IMG') {
const video = document.createElement('video');
video.src = videoCoverUrl;
video.autoplay = true;
video.loop = true;
video.muted = true;
video.playsInline = true;
video.id = image.id;
video.className = image.className;
image.replaceWith(video);
}
} else {
if (image.tagName === 'VIDEO') {
const img = document.createElement('img');
img.src = coverUrl;
img.id = image.id;
img.className = image.className;
image.replaceWith(img);
}
}
const currentImage = document.getElementById('fullscreen-cover-image');
if (currentImage.src !== coverUrl || !videoCoverUrl) {
currentImage.src = coverUrl;
}
overlay.style.setProperty('--bg-image', `url('${coverUrl}')`);
this.extractAndApplyColor(this.api.getCoverUrl(track.album?.cover, '80'));
const qualityBadge = createQualityBadgeHTML(track);
title.innerHTML = `${escapeHtml(track.title)} ${qualityBadge}`;
artist.textContent = getTrackArtists(track);
@ -1683,7 +1717,7 @@ export class UIRenderer {
href: `/track/${track.id}`,
title: `${escapeHtml(getTrackTitle(track))} ${explicitBadge} ${qualityBadge}`,
subtitle: escapeHtml(getTrackArtists(track)),
imageHTML: `<img src="${this.api.getCoverUrl(track.album?.cover)}" alt="${escapeHtml(track.title)}" class="card-image" loading="lazy">`,
imageHTML: this.getCoverHTML(track.album?.videoCover, track.album?.cover, escapeHtml(track.title)),
actionButtonsHTML: `
<button class="like-btn card-like-btn" data-action="toggle-like" data-type="track" title="Add to Liked">
${this.createHeartIcon(false)}
@ -2245,8 +2279,32 @@ export class UIRenderer {
try {
const { album, tracks } = await this.api.getAlbum(albumId, provider);
const coverUrl = this.api.getCoverUrl(album.cover);
imageEl.src = coverUrl;
const videoCoverUrl = album.videoCover ? this.api.tidalAPI.getVideoCoverUrl(album.videoCover) : null;
const coverUrl = videoCoverUrl || this.api.getCoverUrl(album.cover);
if (videoCoverUrl) {
if (imageEl.tagName === 'IMG') {
const video = document.createElement('video');
video.src = videoCoverUrl;
video.autoplay = true;
video.loop = true;
video.muted = true;
video.playsInline = true;
video.className = imageEl.className;
imageEl.replaceWith(video);
} else {
imageEl.src = videoCoverUrl;
}
} else {
if (imageEl.tagName === 'VIDEO') {
const img = document.createElement('img');
img.src = coverUrl;
img.className = imageEl.className;
imageEl.replaceWith(img);
} else {
imageEl.src = coverUrl;
}
}
imageEl.style.backgroundColor = '';
// Set background and vibrant color
@ -2970,8 +3028,35 @@ export class UIRenderer {
} else {
// Try to get cover from first track album
if (tracks.length > 0 && tracks[0].album?.cover) {
imageEl.src = this.api.getCoverUrl(tracks[0].album.cover);
this.setPageBackground(imageEl.src);
const videoCoverUrl = tracks[0].album?.videoCover
? this.api.tidalAPI.getVideoCoverUrl(tracks[0].album.videoCover)
: null;
const coverUrl = videoCoverUrl || this.api.getCoverUrl(tracks[0].album.cover);
if (videoCoverUrl) {
if (imageEl.tagName === 'IMG') {
const video = document.createElement('video');
video.src = videoCoverUrl;
video.autoplay = true;
video.loop = true;
video.muted = true;
video.playsInline = true;
video.className = imageEl.className;
imageEl.replaceWith(video);
} else {
imageEl.src = videoCoverUrl;
}
} else {
if (imageEl.tagName === 'VIDEO') {
const img = document.createElement('img');
img.src = coverUrl;
img.className = imageEl.className;
imageEl.replaceWith(img);
} else {
imageEl.src = coverUrl;
}
}
this.setPageBackground(coverUrl);
this.extractAndApplyColor(this.api.getCoverUrl(tracks[0].album.cover, '160'));
} else {
imageEl.src = '/assets/appicon.png';
@ -3986,8 +4071,34 @@ export class UIRenderer {
track = await this.api.getTrackMetadata(trackId, provider);
}
const coverUrl = this.api.getCoverUrl(track.album?.cover);
imageEl.src = coverUrl;
const videoCoverUrl = track.album?.videoCover
? this.api.tidalAPI.getVideoCoverUrl(track.album.videoCover)
: null;
const coverUrl = videoCoverUrl || this.api.getCoverUrl(track.album?.cover);
if (videoCoverUrl) {
if (imageEl.tagName === 'IMG') {
const video = document.createElement('video');
video.src = videoCoverUrl;
video.autoplay = true;
video.loop = true;
video.muted = true;
video.playsInline = true;
video.className = imageEl.className;
imageEl.replaceWith(video);
} else {
imageEl.src = videoCoverUrl;
}
} else {
if (imageEl.tagName === 'VIDEO') {
const img = document.createElement('img');
img.src = coverUrl;
img.className = imageEl.className;
imageEl.replaceWith(img);
} else {
imageEl.src = coverUrl;
}
}
imageEl.style.backgroundColor = '';
this.setPageBackground(coverUrl);