-
+ ${SVG_EQUAL(16)}
${isBlocked ? '--:--' : formatTime(track.duration)}
`;
@@ -307,9 +307,7 @@ export function initializeUIInteractions(player, api, ui) {
syncManager.syncLibraryItem('track', track, added);
likeBtn.classList.toggle('active', added);
- likeBtn.innerHTML = added
- ? SVG_HEART.replace('class="heart-icon"', 'class="heart-icon filled"')
- : SVG_HEART;
+ likeBtn.innerHTML = added ? SVG_HEART_FILLED(20) : SVG_HEART(20);
showNotification(added ? `Added to Liked: ${track.title}` : `Removed from Liked: ${track.title}`);
}
@@ -462,9 +460,7 @@ export function initializeUIInteractions(player, api, ui) {
if (likeBtn && track) {
const isLiked = await db.isFavorite('track', track.id);
likeBtn.classList.toggle('active', isLiked);
- likeBtn.innerHTML = isLiked
- ? SVG_HEART.replace('class="heart-icon"', 'class="heart-icon filled"')
- : SVG_HEART;
+ likeBtn.innerHTML = isLiked ? SVG_HEART_FILLED(20) : SVG_HEART(20);
}
});
diff --git a/js/ui.js b/js/ui.js
index de410d5..80236e4 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -1,12 +1,6 @@
//js/ui.js
import { showNotification } from './downloads.js';
import {
- SVG_PLAY,
- SVG_DOWNLOAD,
- SVG_MENU,
- SVG_HEART,
- SVG_VOLUME,
- SVG_MUTE,
formatTime,
createPlaceholder,
trackDataStore,
@@ -55,22 +49,41 @@ import Hls from 'hls.js';
fontSettings.applyFont();
fontSettings.applyFontSize();
-const SVG_GLOBE =
- '
';
-const SVG_INSTAGRAM =
- '
';
-const SVG_FACEBOOK =
- '
';
-const SVG_YOUTUBE =
- '
';
-const SVG_TWITTER =
- '
';
-const SVG_LINK =
- '
';
-const SVG_SOUNDCLOUD =
- '
';
-const SVG_APPLE =
- '
';
+import {
+ SVG_PLAY,
+ SVG_DOWNLOAD,
+ SVG_MENU,
+ SVG_HEART,
+ SVG_VOLUME,
+ SVG_MUTE,
+ SVG_HEART_FILLED,
+ SVG_CLOSE,
+ SVG_SORT,
+ SVG_BIN,
+ SVG_TRASH,
+ SVG_GLOBE,
+ SVG_INSTAGRAM,
+ SVG_FACEBOOK,
+ SVG_YOUTUBE,
+ SVG_TWITTER,
+ SVG_LINK,
+ SVG_SOUNDCLOUD,
+ SVG_APPLE,
+ SVG_REPEAT,
+ SVG_REPEAT_ONE,
+ SVG_PLAY_LARGE,
+ SVG_PAUSE_LARGE,
+ SVG_MINUS,
+ SVG_SQUARE_PEN,
+ SVG_SHARE,
+ SVG_SHUFFLE,
+ SVG_VIDEO,
+ SVG_LEFT_ARROW,
+ SVG_RIGHT_ARROW,
+ SVG_CLOCK,
+ SVG_MOVE_UP,
+ SVG_MOVE_DOWN,
+} from './icons.js';
function sortTracks(tracks, sortType) {
if (sortType === 'custom') return [...tracks];
@@ -134,9 +147,9 @@ export class UIRenderer {
// Helper for Heart Icon
createHeartIcon(filled = false) {
if (filled) {
- return SVG_HEART.replace('class="heart-icon"', 'class="heart-icon filled"');
+ return SVG_HEART_FILLED(20);
}
- return SVG_HEART;
+ return SVG_HEART(20);
}
async extractAndApplyColor(url) {
@@ -352,14 +365,14 @@ export class UIRenderer {
if (videoCoverUrl) {
trackImageHTML = `
`;
} else {
- trackImageHTML = `
`;
+ trackImageHTML = `
${SVG_VIDEO(20, { style: 'opacity: 0.7;' })}
`;
}
} else if (isVideo && (this.currentPage === 'search' || this.currentPage === 'library')) {
const videoCoverUrl = this.api.getVideoCoverUrl(track.imageId);
if (videoCoverUrl) {
trackImageHTML = `
`;
} else {
- trackImageHTML = `
`;
+ trackImageHTML = `
${SVG_PLAY(16, { style: 'opacity: 0.7;' })}
`;
}
} else {
trackImageHTML = this.getCoverHTML(
@@ -382,7 +395,7 @@ export class UIRenderer {
}
const videoIcon = isVideo
- ? '
'
+ ? `
${SVG_VIDEO(14)}`
: '';
const trackNumberHTML = `
${showCover ? trackImageHTML : displayIndex}
`;
const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : '';
@@ -400,7 +413,7 @@ export class UIRenderer {
? ''
: `
`;
@@ -469,10 +482,10 @@ export class UIRenderer {
type !== 'artist'
? `
`
: '';
@@ -607,19 +620,10 @@ export class UIRenderer {
imageHTML: imageHTML,
actionButtonsHTML: `
`,
isCompact,
@@ -689,7 +693,7 @@ export class UIRenderer {
} else if (cover) {
imageHTML = this.getCoverHTML(cover, escapeHtml(video.title));
} else {
- imageHTML = `
`;
+ imageHTML = `
${SVG_PLAY(48, { style: 'opacity: 0.7;' })}
`;
}
return `
@@ -698,7 +702,7 @@ export class UIRenderer {
${imageHTML}