diff options
Diffstat (limited to 'index.html')
| -rwxr-xr-x | index.html | 50 |
1 files changed, 40 insertions, 10 deletions
@@ -207,7 +207,8 @@ <div class="titlebar" style="background: var(--title-bar);"><div class="dots"><div class="dot r no-drag" onclick="this.closest('.win').style.display='none'"></div><div class="dot y"></div><div class="dot g"></div></div>REEL MOUTH — film pod</div> <div class="body"> <div style="display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px;"> - <div class="photo" style="width: 84px; height: 84px;"><span>[ pod art ]</span></div> + <img id="pod-art" src="" alt="REEL MOUTH" style="width: 84px; height: 84px; border-radius: 12px; object-fit: cover; box-shadow: 0 3px 10px rgba(0,0,0,0.18); display: none;" /> + <div class="photo" id="pod-art-placeholder" style="width: 84px; height: 84px;"><span>🎙</span></div> <div style="font-size: 12px; line-height: 1.5;"> <div style="font-size: 16px; font-weight: 700; color: oklch(28% 0.08 230); letter-spacing: -0.3px;">REEL MOUTH</div> <div style="opacity: 0.7; margin-bottom: 4px;">a film podcast · since 2022</div> @@ -215,18 +216,13 @@ </div> </div> <div style="font-size: 11px; opacity: 0.7; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px;">latest episodes</div> - <!-- TODO: wire to podcast RSS via iTunes lookup API once we know the Apple Podcasts ID --> - <div style="display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 1.5;"> - <div style="display:flex;justify-content:space-between;gap:8px;"><span>#84 — every wong kar-wai, ranked</span><span style="opacity:0.6;flex-shrink:0;">1:47</span></div> - <div style="display:flex;justify-content:space-between;gap:8px;"><span>#83 — paul thomas anderson cinematic universe</span><span style="opacity:0.6;flex-shrink:0;">1:32</span></div> - <div style="display:flex;justify-content:space-between;gap:8px;"><span>#82 — vietnamese cinema is real, actually</span><span style="opacity:0.6;flex-shrink:0;">1:58</span></div> - <div style="display:flex;justify-content:space-between;gap:8px;"><span>#81 — the criterion sale haul</span><span style="opacity:0.6;flex-shrink:0;">1:12</span></div> + <div id="pod-episodes" style="display: flex; flex-direction: column; gap: 4px; font-size: 12px; line-height: 1.5;"> + <div style="opacity: 0.5; font-style: italic;">loading…</div> </div> <div style="margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap;"> <a class="aqua sm" href="https://reelmouth.tv" style="text-decoration:none;">▶ reelmouth.tv</a> - <a class="aqua sm" href="#" style="text-decoration:none;">apple</a> - <a class="aqua sm" href="#" style="text-decoration:none;">spotify</a> - <a class="aqua sm" href="#" style="text-decoration:none;">rss</a> + <a class="aqua sm" href="https://podcasts.apple.com/us/podcast/reel-mouth/id1709836497" style="text-decoration:none;">apple</a> + <a class="aqua sm" href="https://anchor.fm/s/e8438774/podcast/rss" style="text-decoration:none;">rss</a> </div> </div> </div> @@ -353,6 +349,40 @@ }); }); + // podcast RSS + let podLoaded = false; + async function loadPodcast() { + if (podLoaded) return; + podLoaded = true; + try { + const { art, episodes } = await Aero.fetchReelMouthFeed(6); + if (art) { + const img = document.getElementById('pod-art'); + const ph = document.getElementById('pod-art-placeholder'); + img.src = art; + img.style.display = ''; + if (ph) ph.style.display = 'none'; + } + const container = document.getElementById('pod-episodes'); + if (episodes.length) { + container.innerHTML = episodes.map(e => + `<div style="display:flex;justify-content:space-between;gap:8px;"> + <a href="${e.url}" target="_blank" rel="noopener" style="color:inherit;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="${e.title}">${e.title.toLowerCase()}</a> + <span style="opacity:0.6;flex-shrink:0;">${e.duration}</span> + </div>` + ).join(''); + } else { + container.innerHTML = '<div style="opacity:0.5;font-style:italic;">no episodes found</div>'; + } + } catch (err) { + document.getElementById('pod-episodes').innerHTML = '<div style="opacity:0.5;font-style:italic;">couldn\'t load feed</div>'; + } + } + document.querySelectorAll('.icon[data-open="podcast"]').forEach(ic => { + ic.addEventListener('click', loadPodcast); + ic.addEventListener('dblclick', loadPodcast); + }); + // music toggle + volume slider document.getElementById('mt').innerHTML = Aero.musicToggleHTML(); const mtDiv = document.getElementById('mt'); |