From bd27e4fd5fe35029f439ed0f841faf4e3e58281d Mon Sep 17 00:00:00 2001
From: victor <victor@elalemanyo.de>
Date: Sat, 14 Feb 2026 17:37:43 +0000
Subject: [PATCH] Fix: Update episode image handling in HTML structure

---
 html/index.html | 186 ++++++++++++++++++++++++------------------------
 1 file changed, 94 insertions(+), 92 deletions(-)

diff --git a/html/index.html b/html/index.html
index e7846dda..d06c6682 100644
--- a/html/index.html
+++ b/html/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Podsync</title>
+    <link rel="icon" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22%23000%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M8%203a5%205%200%200%200-5%205v1h1a1%201%200%200%201%201%201v3a1%201%200%200%201-1%201H3a1%201%200%200%201-1-1V8a6%206%200%201%201%2012%200v5a1%201%200%200%201-1%201h-1a1%201%200%200%201-1-1v-3a1%201%200%200%201%201-1h1V8a5%205%200%200%200-5-5%22/%3E%3C/svg%3E">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css" rel="stylesheet">
     <style>
@@ -12,7 +13,7 @@
             font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
             background-color: #f2f2f7;
         }
-        
+
         .episode-card {
             transition: all 0.2s ease;
             border: none;
@@ -24,7 +25,7 @@
             transform: translateY(-1px);
             box-shadow: 0 4px 20px rgba(0,0,0,0.15);
         }
-        
+
         /* Purple play button */
         .play-button {
             width: 56px;
@@ -48,7 +49,7 @@
             font-size: 1.2rem;
             margin-left: 2px; /* Optical centering for play icon */
         }
-        
+
         /* Typography */
         .episode-meta {
             font-size: 0.85rem;
@@ -85,7 +86,7 @@
             font-size: 0.9rem;
             font-weight: 400;
         }
-        
+
         /* Loading spinner */
         .loading-spinner {
             border: 3px solid #F2F2F7;
@@ -100,7 +101,7 @@
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
-        
+
         .audio-player {
             width: 100%;
             margin-top: 12px;
@@ -111,7 +112,7 @@
             align-items: center;
             gap: 16px;
         }
-        
+
         /* Episode images */
         .episode-image {
             width: 100px;
@@ -131,7 +132,7 @@
             color: #8E8E93;
             font-size: 1.8rem;
         }
-        
+
         /* Episode title */
         .episode-title {
             color: #1D1D1F;
@@ -144,7 +145,7 @@
             color: #AF52DE;
             text-decoration: none;
         }
-        
+
         /* Navigation */
         .navbar {
             background: white !important;
@@ -173,7 +174,7 @@
             border-color: #8E8E93;
             color: white;
         }
-        
+
         /* Buttons */
         .btn-primary {
             background: linear-gradient(135deg, #AF52DE, #9D4EDD);
@@ -188,7 +189,7 @@
             transform: translateY(-1px);
             box-shadow: 0 4px 12px rgba(175, 82, 222, 0.3);
         }
-        
+
         .btn-outline-secondary {
             border-color: #AF52DE;
             color: #AF52DE;
@@ -200,7 +201,7 @@
             background-color: #AF52DE;
             border-color: #AF52DE;
         }
-        
+
         .btn-outline-info {
             border-color: #AF52DE;
             color: #AF52DE;
@@ -212,7 +213,7 @@
             background-color: #AF52DE;
             border-color: #AF52DE;
         }
-        
+
         /* Small action buttons */
         .btn-sm {
             border-radius: 6px;
@@ -244,7 +245,7 @@
             background-color: #FF9500;
             border-color: #FF9500;
         }
-        
+
         /* YouTube button styling */
         .btn-youtube {
             border-color: #FF0000;
@@ -259,24 +260,24 @@
             border-color: #FF0000;
             color: white;
         }
-        
+
         /* Header styling */
         h2 {
             color: #1D1D1F;
             font-weight: 700;
             font-size: 2rem;
         }
-        
+
         /* Container adjustments */
         .container {
             max-width: 900px;
         }
-        
+
         /* Card body padding */
         .episode-card .card-body {
             padding: 20px;
         }
-        
+
         /* Error styling */
         .alert-danger {
             background-color: #FEEBEE;
@@ -338,7 +339,7 @@ <h2 class="mb-3">
 
     <!-- Bootstrap JS -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
-    
+
     <!-- Include the OPML/RSS parsing functions -->
     <script>
         // Paste your JavaScript functions here
@@ -351,26 +352,26 @@ <h2 class="mb-3">
             try {
                 // Fetch the OPML XML from the URL
                 const response = await fetch(url);
-                
+
                 if (!response.ok) {
                     throw new Error(`Error loading OPML. HTTP status: ${response.status}`);
                 }
-                
+
                 const xmlText = await response.text();
-                
+
                 // Parse the XML
                 const parser = new DOMParser();
                 const xmlDoc = parser.parseFromString(xmlText, 'text/xml');
-                
+
                 // Check for parsing errors
                 const parserError = xmlDoc.querySelector('parsererror');
                 if (parserError) {
                     throw new Error('OPML XML parsing error: ' + parserError.textContent);
                 }
-                
+
                 // Convert OPML to dictionary
                 return parseOPMLToDict(xmlDoc);
-                
+
             } catch (error) {
                 console.error('Error loading OPML:', error);
                 throw error;
@@ -387,13 +388,13 @@ <h2 class="mb-3">
             if (!opml) {
                 throw new Error('Invalid OPML: no opml element found');
             }
-            
+
             const result = {
                 version: opml.getAttribute('version') || '1.0',
                 head: {},
                 body: []
             };
-            
+
             // Parse head section
             const head = opml.querySelector('head');
             if (head) {
@@ -401,13 +402,13 @@ <h2 class="mb-3">
                     result.head[child.tagName] = child.textContent;
                 }
             }
-            
+
             // Parse body section
             const body = opml.querySelector('body');
             if (body) {
                 result.body = parseOutlines(body.querySelectorAll(':scope > outline'));
             }
-            
+
             return result;
         }
 
@@ -418,24 +419,24 @@ <h2 class="mb-3">
          */
         function parseOutlines(outlines) {
             const result = [];
-            
+
             for (const outline of outlines) {
                 const item = {};
-                
+
                 // Get all attributes
                 for (const attr of outline.attributes) {
                     item[attr.name] = attr.value;
                 }
-                
+
                 // Check for child outlines
                 const childOutlines = outline.querySelectorAll(':scope > outline');
                 if (childOutlines.length > 0) {
                     item.children = parseOutlines(childOutlines);
                 }
-                
+
                 result.push(item);
             }
-            
+
             return result;
         }
 
@@ -447,23 +448,23 @@ <h2 class="mb-3">
         async function fetchEpisodesFromFeed(feedUrl) {
             try {
                 const response = await fetch(feedUrl);
-                
+
                 if (!response.ok) {
                     throw new Error(`HTTP error! status: ${response.status}`);
                 }
-                
+
                 const rssText = await response.text();
                 const parser = new DOMParser();
                 const rssDoc = parser.parseFromString(rssText, 'text/xml');
-                
+
                 // Check for parsing errors
                 const parserError = rssDoc.querySelector('parsererror');
                 if (parserError) {
                     throw new Error('RSS parsing error: ' + parserError.textContent);
                 }
-                
+
                 return parseRSSEpisodes(rssDoc, feedUrl);
-                
+
             } catch (error) {
                 console.error(`Error fetching feed ${feedUrl}:`, error);
                 return []; // Return empty array on error to continue processing other feeds
@@ -479,20 +480,20 @@ <h2 class="mb-3">
         function parseRSSEpisodes(rssDoc, feedUrl) {
             const episodes = [];
             const channel = rssDoc.querySelector('channel');
-            
+
             if (!channel) {
                 console.warn(`No channel found in RSS feed: ${feedUrl}`);
                 return episodes;
             }
-            
+
             // Get feed metadata
             const feedTitle = channel.querySelector('title')?.textContent || 'Unknown Feed';
             const feedDescription = channel.querySelector('description')?.textContent || '';
             const feedLink = channel.querySelector('link')?.textContent || '';
-            
+
             // Get all items (episodes)
             const items = channel.querySelectorAll('item');
-            
+
             items.forEach(item => {
                 const episode = {
                     feedUrl: feedUrl,
@@ -503,17 +504,17 @@ <h2 class="mb-3">
                     link: item.querySelector('link')?.textContent || '',
                     pubDate: item.querySelector('pubDate')?.textContent || '',
                     guid: item.querySelector('guid')?.textContent || '',
-                    author: item.querySelector('author')?.textContent || 
-                           item.querySelector('itunes\\:author, author[itunes]')?.textContent || '',
+                    author: item.querySelector('author')?.textContent ||
+                            item.querySelector('itunes\\:author, author[itunes]')?.textContent || '',
                     duration: item.querySelector('itunes\\:duration, duration[itunes]')?.textContent || '',
-                    image: item.querySelector('itunes\\:image, image[itunes]')?.getAttribute('href') || 
-                           channel.querySelector('itunes\\:image, image[itunes]')?.getAttribute('href') || 
-                           channel.querySelector('image url')?.textContent || '',
+                    image: item.getElementsByTagName('itunes:image')[0]?.getAttribute('href') ||
+                            channel.getElementsByTagName('itunes:image')[0]?.getAttribute('href') ||
+                            '',
                     enclosureUrl: item.querySelector('enclosure')?.getAttribute('url') || '',
                     enclosureType: item.querySelector('enclosure')?.getAttribute('type') || '',
                     enclosureLength: item.querySelector('enclosure')?.getAttribute('length') || ''
                 };
-                
+
                 // Parse publication date
                 if (episode.pubDate) {
                     episode.pubDateParsed = new Date(episode.pubDate);
@@ -524,13 +525,14 @@ <h2 class="mb-3">
                 } else {
                     episode.pubDateParsed = new Date(0);
                 }
-                
+
                 episodes.push(episode);
             });
-            
+
             return episodes;
         }
 
+
         /**
          * Fetches all episodes from OPML feeds and sorts them by publication date
          * @param {Object} opmlData - The parsed OPML data
@@ -539,27 +541,27 @@ <h2 class="mb-3">
         async function getAllEpisodesSortedByDate(opmlData) {
             const allEpisodes = [];
             const feedUrls = extractFeedUrls(opmlData.body);
-            
+
             console.log(`Found ${feedUrls.length} feeds to process...`);
-            
+
             // Fetch episodes from all feeds concurrently
             const episodePromises = feedUrls.map(async (feedData) => {
                 console.log(`Fetching episodes from: ${feedData.title}`);
                 const episodes = await fetchEpisodesFromFeed(feedData.xmlUrl);
                 return episodes;
             });
-            
+
             // Wait for all feeds to be processed
             const episodeArrays = await Promise.all(episodePromises);
-            
+
             // Flatten the array of arrays
             episodeArrays.forEach(episodes => {
                 allEpisodes.push(...episodes);
             });
-            
+
             // Sort by publication date (newest first)
             allEpisodes.sort((a, b) => b.pubDateParsed.getTime() - a.pubDateParsed.getTime());
-            
+
             console.log(`Total episodes found: ${allEpisodes.length}`);
             return allEpisodes;
         }
@@ -571,7 +573,7 @@ <h2 class="mb-3">
          */
         function extractFeedUrls(outlines) {
             const feeds = [];
-            
+
             outlines.forEach(outline => {
                 // If this outline has an xmlUrl, it's a feed
                 if (outline.xmlUrl) {
@@ -582,13 +584,13 @@ <h2 class="mb-3">
                         description: outline.description || ''
                     });
                 }
-                
+
                 // Recursively check children
                 if (outline.children && outline.children.length > 0) {
                     feeds.push(...extractFeedUrls(outline.children));
                 }
             });
-            
+
             return feeds;
         }
 
@@ -603,32 +605,32 @@ <h2 class="mb-3">
             const errorMessage = document.getElementById('error-message');
             const episodesContainer = document.getElementById('episodes-container');
             const episodeCount = document.getElementById('episode-count');
-            
+
             // Show loading, hide others
             loading.classList.remove('d-none');
             errorMessage.classList.add('d-none');
             episodesContainer.classList.add('d-none');
-            
+
             try {
                 // You can change this URL to your OPML file
                 const opmlUrl = 'podsync.opml';
                 const opmlData = await loadOPMLFromURL(opmlUrl);
-                
+
                 allEpisodes = await getAllEpisodesSortedByDate(opmlData);
-                
+
                 // Update episode count
                 episodeCount.textContent = `${allEpisodes.length} episodes loaded`;
-                
+
                 // Display all episodes
                 displayEpisodesInUI(allEpisodes);
-                
+
                 // Hide loading, show episodes
                 loading.classList.add('d-none');
                 episodesContainer.classList.remove('d-none');
-                
+
             } catch (error) {
                 console.error('Error loading episodes:', error);
-                
+
                 // Show error
                 loading.classList.add('d-none');
                 document.getElementById('error-text').textContent = error.message;
@@ -642,26 +644,26 @@ <h2 class="mb-3">
          */
         function displayEpisodesInUI(episodes) {
             const container = document.getElementById('episodes-container');
-            
+
             container.innerHTML = episodes.map((episode, index) => {
                 const date = episode.pubDateParsed.toLocaleDateString();
                 const time = episode.pubDateParsed.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
-                const shortDesc = episode.description ? 
-                    (episode.description.length > 200 ? 
-                        episode.description.substring(0, 200) + '...' : 
-                        episode.description) : 
+                const shortDesc = episode.description ?
+                    (episode.description.length > 200 ?
+                        episode.description.substring(0, 200) + '...' :
+                        episode.description) :
                     'No description available';
-                
+
                 // Clean up HTML tags from description
                 const cleanDesc = shortDesc.replace(/<[^>]*>/g, '');
-                
+
                 return `
                     <div class="card episode-card mb-3">
                         <div class="card-body">
                             <div class="row align-items-start">
                                 <div class="col-auto">
                                     <div class="controls-section d-flex flex-column align-items-center gap-2">
-                                        ${episode.enclosureUrl ? 
+                                        ${episode.enclosureUrl ?
                                             `<button class="play-button" onclick="togglePlay('${episode.enclosureUrl}', this)" title="Play episode">
                                                 <i class="bi bi-play-fill"></i>
                                             </button>` :
@@ -669,7 +671,7 @@ <h2 class="mb-3">
                                                 <i class="bi bi-music-note"></i>
                                             </div>`
                                         }
-                                        ${episode.enclosureUrl ? 
+                                        ${episode.enclosureUrl ?
                                             `<a href="${episode.enclosureUrl}" target="_blank" class="text-success" style="font-size: 1.2rem;" title="Download Audio">
                                                 <i class="bi bi-download"></i>
                                             </a>` : ''
@@ -678,17 +680,17 @@ <h2 class="mb-3">
                                 </div>
                                 <div class="col">
                                     <div class="d-flex flex-wrap align-items-center mb-2">
-                                        ${episode.feedLink ? 
+                                        ${episode.feedLink ?
                                             `<a href="${episode.feedLink}" target="_blank" class="badge feed-badge me-2">${episode.feedTitle}</a>` :
                                             `<span class="badge feed-badge me-2">${episode.feedTitle}</span>`
                                         }
                                         <a href="${episode.feedUrl}" target="_blank" class="text-warning me-2" style="font-size: 0.9rem;" title="RSS Feed">
                                             <i class="bi bi-rss"></i>
                                         </a>
-                                        ${episode.author ? 
+                                        ${episode.author ?
                                             `<small class="episode-meta me-2">by ${episode.author}</small>` : ''
                                         }
-                                        ${episode.duration ? 
+                                        ${episode.duration ?
                                             `<span class="badge duration-badge me-2">
                                                 <i class="bi bi-clock me-1"></i>${episode.duration}
                                             </span>` : ''
@@ -697,17 +699,17 @@ <h2 class="mb-3">
                                             <i class="bi bi-calendar me-1"></i>${date} ${time}
                                         </small>
                                     </div>
-                                    
+
                                     <h5 class="card-title mb-2">
-                                        ${episode.link ? 
+                                        ${episode.link ?
                                             `<a href="${episode.link}" target="_blank" class="episode-title">${episode.title}</a>` :
                                             `<span class="episode-title">${episode.title}</span>`
                                         }
                                     </h5>
-                                    
+
                                     <p class="description-text mb-2">${cleanDesc}</p>
-                                    
-                                    ${episode.enclosureUrl ? 
+
+                                    ${episode.enclosureUrl ?
                                         `<audio class="audio-player d-none" controls preload="none">
                                             <source src="${episode.enclosureUrl}" type="${episode.enclosureType || 'audio/mpeg'}">
                                             Your browser does not support the audio element.
@@ -715,14 +717,14 @@ <h5 class="card-title mb-2">
                                     }
                                 </div>
                                 <div class="col-auto">
-                                    ${episode.image ? 
+                                    ${episode.image ?
                                         `<img src="${episode.image}" alt="${episode.title}" class="episode-image" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
-                                         <div class="episode-image-placeholder" style="display: none;">
-                                             <i class="bi bi-image"></i>
-                                         </div>` :
+                                            <div class="episode-image-placeholder" style="display: none;">
+                                                <i class="bi bi-image"></i>
+                                            </div>` :
                                         `<div class="episode-image-placeholder">
-                                             <i class="bi bi-image"></i>
-                                         </div>`
+                                            <i class="bi bi-image"></i>
+                                        </div>`
                                     }
                                 </div>
                             </div>
@@ -740,7 +742,7 @@ <h5 class="card-title mb-2">
         function togglePlay(audioUrl, button) {
             const audioPlayer = button.closest('.card-body').querySelector('.audio-player');
             const icon = button.querySelector('i');
-            
+
             if (audioPlayer.classList.contains('d-none')) {
                 // Show player and start playing
                 audioPlayer.classList.remove('d-none');
@@ -759,7 +761,7 @@ <h5 class="card-title mb-2">
                     button.title = 'Play episode';
                 }
             }
-            
+
             // Add event listeners for when audio ends
             audioPlayer.addEventListener('ended', function() {
                 icon.className = 'bi bi-play-fill';