File size: 2,877 Bytes
56113a2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
// Fetch and display podcast episodes from RSS feed
document.addEventListener('DOMContentLoaded', function() {
    fetchEpisodes();
});

async function fetchEpisodes() {
    try {
        const response = await fetch('https://anchor.fm/s/10a42cdbc/podcast/rss');
        const text = await response.text();
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(text, "text/xml");
        
        const items = xmlDoc.getElementsByTagName("item");
        const episodesContainer = document.querySelector('#episodes-container');
        
        // Clear placeholder content
        episodesContainer.innerHTML = '';
        
        // Display latest 3 episodes
        for (let i = 0; i < Math.min(3, items.length); i++) {
            const item = items[i];
            const title = item.getElementsByTagName("title")[0].textContent;
            const description = item.getElementsByTagName("description")[0].textContent;
            const pubDate = new Date(item.getElementsByTagName("pubDate")[0].textContent);
            const enclosure = item.getElementsByTagName("enclosure")[0];
            const duration = item.getElementsByTagName("itunes:duration")[0].textContent;
            
            const episodeDiv = document.createElement('div');
            episodeDiv.className = 'bg-gray-800 border border-gray-700 rounded-xl overflow-hidden transition-transform hover:scale-[1.02]';
            episodeDiv.innerHTML = `
                <div class="h-48 bg-gradient-to-r from-${i % 3 === 0 ? 'primary to-secondary' : i % 3 === 1 ? 'secondary to-accent' : 'accent to-primary'} flex items-center justify-center">
                    <i data-feather="play" class="w-12 h-12 text-white"></i>
                </div>
                <div class="p-5">
                    <h4 class="font-bold text-lg mb-2">${title}</h4>
                    <p class="text-gray-400 text-sm mb-4">${description.substring(0, 100)}${description.length > 100 ? '...' : ''}</p>
                    <div class="flex justify-between items-center text-sm text-gray-400">
                        <span>${formatDuration(duration)}</span>
                        <span>${pubDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}</span>
                    </div>
                </div>
            `;
            
            episodesContainer.appendChild(episodeDiv);
        }
        
        feather.replace();
    } catch (error) {
        console.error('Error fetching podcast episodes:', error);
    }
}

function formatDuration(seconds) {
    if (!seconds) return 'N/A';
    if (seconds.includes(':')) return seconds; // Already formatted
    
    const secs = parseInt(seconds);
    const mins = Math.floor(secs / 60);
    const remainingSecs = secs % 60;
    return `${mins}:${remainingSecs < 10 ? '0' : ''}${remainingSecs}`;
}