Implemented SVG icons

This commit is contained in:
Trevor Mears
2025-12-28 21:27:21 -08:00
parent 44365c4dad
commit 29a7996ecd
8 changed files with 151 additions and 49 deletions
+6 -6
View File
@@ -357,7 +357,7 @@ class ChannelList {
html += `
<div class="channel-group">
<div class="group-header ${this.collapsedGroups.has(groupName) ? 'collapsed' : ''} ${isFavoritesGroup ? 'favorites-group' : ''}" data-group="${groupName}">
<span class="group-toggle">▼</span>
<span class="group-toggle">${Icons.chevronDown}</span>
<span class="group-name">${groupName}</span>
<span class="group-count">${visibleChannels.length}</span>
</div>
@@ -393,7 +393,7 @@ class ChannelList {
<div class="channel-program">${this.escapeHtml(this.getProgramInfo(channel) || '')}</div>
</div>
<button class="favorite-btn ${isFavorite ? 'active' : ''}" title="${isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}">
${isFavorite ? '❤️' : '♡'}
${isFavorite ? Icons.favorite : Icons.favoriteOutline}
</button>
</div>
`;
@@ -708,14 +708,14 @@ class ChannelList {
this.visibleFavorites.delete(key);
btns.forEach(btn => {
btn.classList.remove('active');
btn.innerHTML = '♡';
btn.innerHTML = Icons.favoriteOutline;
btn.title = 'Add to Favorites';
});
} else {
this.visibleFavorites.add(key);
btns.forEach(btn => {
btn.classList.add('active');
btn.innerHTML = '❤️';
btn.innerHTML = Icons.favorite;
btn.title = 'Remove from Favorites';
});
}
@@ -745,7 +745,7 @@ class ChannelList {
this.visibleFavorites.add(key);
btns.forEach(btn => {
btn.classList.add('active');
btn.innerHTML = '❤️';
btn.innerHTML = Icons.favorite;
});
// Revert group update
const channel = this.channels.find(c => c.sourceId == sourceId && c.id == channelId);
@@ -754,7 +754,7 @@ class ChannelList {
this.visibleFavorites.delete(key);
btns.forEach(btn => {
btn.classList.remove('active');
btn.innerHTML = '♡';
btn.innerHTML = Icons.favoriteOutline;
});
// Revert group update
const channel = this.channels.find(c => c.sourceId == sourceId && c.id == channelId);
+7 -7
View File
@@ -449,7 +449,7 @@ class EpgGuide {
data-source-id="${sourceChannel.sourceId}">
<div class="epg-channel-info">
<button class="favorite-btn ${isFavorite ? 'active' : ''}" title="${isFavorite ? 'Remove from Favorites' : 'Add to Favorites'}">
${isFavorite ? '❤️' : '♡'}
${isFavorite ? Icons.favorite : Icons.favoriteOutline}
</button>
<img class="epg-channel-logo" src="${logo}"
alt="" onerror="this.onerror=null;this.src='/img/placeholder.png'">
@@ -536,11 +536,11 @@ class EpgGuide {
if (btn) {
if (isNowFavorite) {
btn.classList.add('active');
btn.innerHTML = '❤️';
btn.innerHTML = Icons.favorite;
btn.title = 'Remove from Favorites';
} else {
btn.classList.remove('active');
btn.innerHTML = '♡';
btn.innerHTML = Icons.favoriteOutline;
btn.title = 'Add to Favorites';
}
}
@@ -578,11 +578,11 @@ class EpgGuide {
if (btn) {
if (wasFavorite) {
btn.classList.add('active');
btn.innerHTML = '❤️';
btn.innerHTML = Icons.favorite;
btn.title = 'Remove from Favorites';
} else {
btn.classList.remove('active');
btn.innerHTML = '♡';
btn.innerHTML = Icons.favoriteOutline;
btn.title = 'Add to Favorites';
}
}
@@ -619,11 +619,11 @@ class EpgGuide {
if (btn) {
if (isFavorite) {
btn.classList.add('active');
btn.innerHTML = '❤️';
btn.innerHTML = Icons.favorite;
btn.title = 'Remove from Favorites';
} else {
btn.classList.remove('active');
btn.innerHTML = '♡';
btn.innerHTML = Icons.favoriteOutline;
btn.title = 'Add to Favorites';
}
}
+9 -9
View File
@@ -52,7 +52,7 @@ class SourceManager {
return;
}
const icons = { xtream: '📡', m3u: '📋', epg: '📺' };
const icons = { xtream: Icons.live, m3u: Icons.guide, epg: Icons.series };
container.innerHTML = sources.map(source => `
<div class="source-item ${source.enabled ? '' : 'disabled'}" data-id="${source.id}">
@@ -62,13 +62,13 @@ class SourceManager {
<div class="source-url">${source.url}</div>
</div>
<div class="source-actions">
<button class="btn btn-sm btn-secondary" data-action="refresh" title="Refresh Data">🔄</button>
<button class="btn btn-sm btn-secondary" data-action="test" title="Test Connection">🔗</button>
<button class="btn btn-sm btn-secondary" data-action="refresh" title="Refresh Data">${Icons.play}</button>
<button class="btn btn-sm btn-secondary" data-action="test" title="Test Connection">${Icons.search}</button>
<button class="btn btn-sm btn-secondary" data-action="toggle" title="${source.enabled ? 'Disable' : 'Enable'}">
${source.enabled ? '✓' : '○'}
${source.enabled ? Icons.favorite : Icons.favoriteOutline}
</button>
<button class="btn btn-sm btn-secondary" data-action="edit" title="Edit">✏️</button>
<button class="btn btn-sm btn-danger" data-action="delete" title="Delete">🗑️</button>
<button class="btn btn-sm btn-secondary" data-action="edit" title="Edit">${Icons.settings}</button>
<button class="btn btn-sm btn-danger" data-action="delete" title="Delete">${Icons.close}</button>
</div>
</div>
`).join('');
@@ -294,7 +294,7 @@ class SourceManager {
const btn = document.querySelector(`.source-item[data-id="${id}"] [data-action="refresh"]`);
if (btn) {
btn.disabled = true;
btn.textContent = '⏳';
btn.innerHTML = '<div class="loading-spinner" style="width:1em;height:1em;border-width:2px"></div>';
}
// Clear cache for this source first
@@ -322,7 +322,7 @@ class SourceManager {
if (btn) {
btn.disabled = false;
btn.textContent = '🔄';
btn.innerHTML = Icons.play;
}
} catch (err) {
console.error('Error refreshing source:', err);
@@ -546,7 +546,7 @@ class SourceManager {
return `
<div class="content-group ${isExpanded ? '' : 'collapsed'}" data-group-id="${this.escapeHtml(group.id)}">
<div class="content-group-header">
<span class="group-expander">▼</span>
<span class="group-expander">${Icons.chevronDown}</span>
<label class="checkbox-label" onclick="event.stopPropagation()">
<input type="checkbox" class="group-checkbox"
data-type="group"