app/components/home-podcast.tsx

Functions

Imports

It imports app/components/enhance.tsx, app/lib/long-date.mjs, app/lib/podcast/clock.mjs, app/lib/podcast/feed.mjs, app/lib/seo.ts. Imported by app/routes/home.tsx.

Source

1import { Enhance } from "~/components/enhance";
2import { longDateUTC } from "~/lib/long-date.mjs";
3import { clockTime } from "~/lib/podcast/clock.mjs";
4import { PODCAST_SITE_URL, type PodcastEpisode } from "~/lib/podcast/feed.mjs";
5import { GERMOMICS_X_URL } from "~/lib/seo";
6
7// The hand-drawn controls are server markup marked `hidden` that the bundle swaps in, so a
8// reader without script gets the native audio controls and never a button that does nothing.
9export function HomePodcast({ episode }: { episode: PodcastEpisode | null }) {
10  return (
11    <section className="home-section home-scicomm" aria-labelledby="germomics-heading">
12      <h2 id="germomics-heading" className="home-section-heading">
13        Germomics
14      </h2>
15      {episode ? (
16        <article className="podcast" data-podcast>
17          <h3 className="podcast-title">
18            <a href={episode.link}>{episode.title}</a>
19          </h3>
20          {/* Real separators, not a CSS gap, so reader mode and agents do not get one run-on word. */}
21          <p className="podcast-meta">
22            {[
23              episode.season && episode.episode ? (
24                <span key="number">
25                  Season {episode.season}, episode {episode.episode}
26                </span>
27              ) : null,
28              <time key="date" dateTime={episode.publishedAt}>
29                {longDateUTC(new Date(episode.publishedAt))}
30              </time>,
31              episode.durationSeconds ? (
32                <span key="length">{clockTime(episode.durationSeconds)}</span>
33              ) : null,
34            ]
35              .filter(Boolean)
36              .flatMap((item, i) =>
37                i === 0
38                  ? [item]
39                  : [
40                      <span key={`sep-${i}`} className="podcast-sep" aria-hidden="true">
41                        {" · "}
42                      </span>,
43                      item,
44                    ],
45              )}
46          </p>
47          {episode.description ? <p className="podcast-description">{episode.description}</p> : null}
48          <div className="podcast-player">
49            <audio
50              className="podcast-audio"
51              controls
52              preload="none"
53              src={episode.audioUrl}
54              aria-label={`Play ${episode.title}`}
55            >
56              <a href={episode.audioUrl}>Download the episode</a>
57            </audio>
58            {/* A named group, so Play and Seek carry the episode they act on. */}
59            <div
60              className="podcast-controls"
61              data-podcast-controls
62              role="group"
63              aria-label={`Player for ${episode.title}`}
64              hidden
65            >
66              <div className="podcast-scrub">
67                <span className="podcast-time" data-podcast-elapsed>
68                  0:00
69                </span>
70                <input
71                  className="podcast-range"
72                  type="range"
73                  min={0}
74                  max={episode.durationSeconds ?? 0}
75                  step={1}
76                  defaultValue={0}
77                  aria-label="Seek"
78                  data-podcast-seek
79                />
80                <span className="podcast-time" data-podcast-total>
81                  {episode.durationSeconds ? clockTime(episode.durationSeconds) : "--:--"}
82                </span>
83              </div>
84              <div className="podcast-buttons">
85                <button type="button" className="podcast-btn" data-podcast-play>
86                  Play
87                </button>
88                <button type="button" className="podcast-btn" data-podcast-skip="-15">
89                  Back 15 s
90                </button>
91                <button type="button" className="podcast-btn" data-podcast-skip="30">
92                  Forward 30 s
93                </button>
94              </div>
95            </div>
96          </div>
97          <p className="home-more podcast-links">
98            <a href={episode.link}>Episode page</a>
99            <a href={PODCAST_SITE_URL}>germomics.com</a>
100          </p>
101          <Enhance module="podcast" />
102        </article>
103      ) : (
104        <p className="home-more">
105          The Germomics podcast is at <a href={PODCAST_SITE_URL}>germomics.com</a>.
106        </p>
107      )}
108      <p className="home-more podcast-x">
109        <a href={GERMOMICS_X_URL}>Germomics is also on X</a>
110      </p>
111    </section>
112  );
113}