podpage/tail.html

<div id="app">
    <audio controls></audio>
    <div class="player-details">
        <img :src="currentPodcast.image"
             class="player-details__image">
        <pre class="player-details__description">
{{ summaryOrDescription }}
        </pre>
    </div>
    <div class="podcasts">
        <div v-for="podcast in podcasts"
             class="podcast">
            <details open>
                <summary class="podcast__title">{{ podcast.title }}</summary>
                <ul class="podcast__episodes">
                    <li v-for="episode in podcast.episodes"
                        class="episode">
                        <span class="episode__date">{{ episode.date }}</span>
                        <span class="episode__description-separator"> / </span>
                        <a @click.prevent="play(podcast, episode)"
                           :class="linkCSS(episode)"
                           :title="episode.title"
                           href="#"
                        >{{ trim(episode.title) }}</a>
                    </li>
                </ul>
            </details>
        </div>
    </div>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const simpleDate = (date) => new Date(date).toISOString().split('T')[0];

    function getPodcastsData() {
        const podcasts = [].slice.call(document.querySelectorAll('podcast')).map(podcastEl => {
            const podcast = {
                title: podcastEl.getAttribute('title'),
                link: podcastEl.getAttribute('link'),
                image: podcastEl.getAttribute('image'),
            };
            podcast.episodes = [].slice.call(podcastEl.querySelectorAll('episode')).map(episodeEl => ({
                guid: episodeEl.getAttribute('guid'),
                link: episodeEl.getAttribute('link'),
                title: episodeEl.getAttribute('title'),
                date: simpleDate(episodeEl.getAttribute('date')),
                url: episodeEl.getAttribute('url'),
                description: episodeEl.querySelector('description').textContent.split('\n').filter(s => s.trim()).map(line => line.replace(/^\s+/, '')).join('\n'),
                summary: episodeEl.querySelector('summary').textContent.split('\n').filter(s => s.trim()).map(line => line.replace(/^\s+/, '')).join('\n'),
            }));
            return podcast;
        });

        // sort alphabetically
        // podcasts.sort((a, b) => a.title.toLowerCase() > b.title.toLowerCase() ? 1 : -1 );

        return podcasts;
    }

    let podcasts = getPodcastsData();
    // remove data nodes from DOM
    document.querySelectorAll('podcast').forEach(p => p.remove());

    const Player = {
        audio: null,

        init() {
            // in seconds
            const defaultSkipTime = 10;

            navigator.mediaSession.setActionHandler('play', () => {
                this.audio.play();
                navigator.mediaSession.playbackState = 'playing';
            });
            navigator.mediaSession.setActionHandler('pause', () => {
                this.audio.pause();
                navigator.mediaSession.playbackState = 'paused';
            });
            navigator.mediaSession.setActionHandler('stop', () => {
                this.audio.pause();
                navigator.mediaSession.playbackState = 'paused';
            });
            navigator.mediaSession.setActionHandler('seekbackward', (event) => {
                const skipTime = event.seekOffset || defaultSkipTime;
                console.log(event);
                this.audio.currentTime = Math.max(this.audio.currentTime - skipTime, 0);
            });
            navigator.mediaSession.setActionHandler('seekforward', (event) => {
                const skipTime = event.seekOffset || defaultSkipTime;
                console.log(event);
                this.audio.currentTime = Math.max(audio.currentTime + skipTime, this.audio.duration);
            });
            navigator.mediaSession.setActionHandler('seekto', (event) => {
                if (event.fastSeek && ('fastSeek' in this.audio)) {
                    this.audio.fastSeek(event.seekTime);
                    return;
                }
                this.audio.currentTime = event.seekTime;
            });
            navigator.mediaSession.setActionHandler('previoustrack', () => {
                // TODO
                console.log('TODO previous track')
            });
            navigator.mediaSession.setActionHandler('nexttrack', () => {
                // TODO
                console.log('TODO next track')
            });
        },

        async play({ title, artist, album, artworkURL, audioURL }) {
            this.audio.src = audioURL;
            await this.audio.play();

            const artwork = [];
            // minimal effort here
            if (artworkURL) {
                let type = 'image/png';
                if (artworkURL.endsWith('jpg') || artworkURL.endsWith('jpeg')) {
                    type = 'image/jpg';
                } else if (artworkURL.endsWith('png')) {
                    type = 'image/png';
                }

                const imageSize = await new Promise(resolve => {
                    const img = new Image();
                    img.onload = () => resolve(`${img.width}x${img.height}`);
                    img.src = artworkURL;
                });

                artwork.push({
                    src: artworkURL,
                    sizes: imageSize,
                    type,
                });
            }

            navigator.mediaSession.metadata = new MediaMetadata({
                title,
                artist,
                album,
                artwork,
            });
        },
    };

    const App = {
        created() {
            this.podcasts = podcasts;
        },
        mounted() {
            Player.audio = this.$el.parentNode.querySelector('audio');
        },
        data() {
            return {
                currentEpisode: {},
                currentPodcast: {},
            }
        },
        computed: {
            summaryOrDescription() {
                return (this.currentEpisode.summary || '').length > (this.currentEpisode.description || '').length
                    ? this.currentEpisode.summary
                    : this.currentEpisode.description;
            }
        },
        methods: {
            play(podcast, episode) {
                if (this.currentEpisode.guid === episode.guid) {
                    return
                }

                this.currentPodcast = podcast;
                this.currentEpisode = episode;
                Player.play({
                    title: episode.title,
                    artist: 'TBD', // TODO scrape if possible
                    album: podcast.title,
                    artworkURL: podcast.image,
                    audioURL: episode.url,
                });
            },
            linkCSS(episode) {
                return this.currentEpisode.guid === episode.guid ? 'episode__playing' : '';
            },
            trim(s) {
                return s.length <= 64 ? s : s.substring(0, 61) + '...';
            }
        }
    }

    Vue.createApp(App).mount('#app');
</script>