Implemented SVG icons
This commit is contained in:
@@ -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);
|
||||
|
||||
@@ -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';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user