Added proxy route for channel icons and other images, updated readme

This commit is contained in:
Trevor Mears
2025-12-29 23:04:31 -08:00
parent 3b14a17bfb
commit 3fffdddf4b
4 changed files with 73 additions and 7 deletions
+16 -3
View File
@@ -27,6 +27,19 @@ class ChannelList {
this.init();
}
/**
* Get proxied image URL to avoid mixed content errors on HTTPS
* Only proxies HTTP URLs when on HTTPS page
*/
getProxiedImageUrl(url) {
if (!url || url.length === 0) return '/img/placeholder.png';
// Only proxy if we're on HTTPS and the image is HTTP
if (window.location.protocol === 'https:' && url.startsWith('http://')) {
return `/api/proxy/image?url=${encodeURIComponent(url)}`;
}
return url;
}
/**
* Load collapsed state from localStorage
*/
@@ -399,7 +412,7 @@ class ChannelList {
data-stream-id="${channel.streamId || ''}"
data-url="${channel.url || ''}"
data-render-id="${renderId}">
<img class="channel-logo" src="${channel.tvgLogo && channel.tvgLogo.length > 0 ? channel.tvgLogo : '/img/placeholder.png'}"
<img class="channel-logo" src="${this.getProxiedImageUrl(channel.tvgLogo)}"
alt="" onerror="this.onerror=null;this.src='/img/placeholder.png'">
<div class="channel-info">
<div class="channel-name">${this.escapeHtml(channel.name)}</div>
@@ -851,7 +864,7 @@ class ChannelList {
div.dataset.url = channel.url || '';
div.innerHTML = `
<img class="channel-logo" src="${channel.tvgLogo && channel.tvgLogo.length > 0 ? channel.tvgLogo : '/img/placeholder.png'}"
<img class="channel-logo" src="${this.getProxiedImageUrl(channel.tvgLogo)}"
alt="" onerror="this.onerror=null;this.src='/img/placeholder.png'">
<div class="channel-info">
<div class="channel-name">${this.escapeHtml(channel.name)}</div>
@@ -1102,7 +1115,7 @@ class ChannelList {
modalBody.innerHTML = `
<div class="epg-info-modal">
<div class="channel-details">
<img class="channel-logo" src="${channel.tvgLogo || '/img/placeholder.png'}"
<img class="channel-logo" src="${this.getProxiedImageUrl(channel.tvgLogo)}"
onerror="this.onerror=null;this.src='/img/placeholder.png'" />
<div class="channel-meta">
<p><strong>Group:</strong> ${this.escapeHtml(channel.groupTitle || 'Uncategorized')}</p>
+14 -1
View File
@@ -34,6 +34,19 @@ class EpgGuide {
this.init();
}
/**
* Get proxied image URL to avoid mixed content errors on HTTPS
* Only proxies HTTP URLs when on HTTPS page
*/
getProxiedImageUrl(url) {
if (!url || url.length === 0) return '/img/placeholder.png';
// Only proxy if we're on HTTPS and the image is HTTP
if (window.location.protocol === 'https:' && url.startsWith('http://')) {
return `/api/proxy/image?url=${encodeURIComponent(url)}`;
}
return url;
}
init() {
this.prevBtn.addEventListener('click', () => this.navigate(-2));
this.nextBtn.addEventListener('click', () => this.navigate(2));
@@ -440,7 +453,7 @@ class EpgGuide {
}
// Fallback values if EPG channel is missing
const logo = sourceChannel.tvgLogo || (epgChannel && epgChannel.icon) || '/img/placeholder.png';
const logo = this.getProxiedImageUrl(sourceChannel.tvgLogo || (epgChannel && epgChannel.icon));
const name = sourceChannel.name || (epgChannel && epgChannel.name);
html += `