Přehrávač podcastů (#291)

* Rename src/data-source to src/data

* Add podcast feed decoder

* Add custom Markdoc tag for podcast player

* Add simple audio player

* Use icons for Play/Pause buttons

* Log custom “Start Playback” goal to Plausible

* Show episode duration in podcast player

* Upgrade older podcast articles to new player

* Add podcasting service links + download link

* Animate button hover state transform

app/about/page.tsx

@@ -1,11 +1,7 @@
 import Image from "next/image";
 import { getAllArticles } from "src/article";
 import { RouteTo } from "src/routing";
-import {
-  getAllAuthors,
-  Author,
-  getPodcastEpisodes,
-} from "src/data-source/content";
+import { getAllAuthors, Author, getPodcastEpisodes } from "src/data/content";
 import { ReactNode } from "react";
 import Link from "next/link";
 

app/api/feeds/hrebenovka/route.ts

@@ -1,7 +1,7 @@
 import {
   convertEpisodeToPodcastItem,
   getPodcastEpisodes,
-} from "src/data-source/content";
+} from "src/data/content";
 import { absolute, RouteTo } from "src/routing";
 import { iTunesPodcastShow, renderPodcastFeed } from "src/feeds";
 import { join } from "path";

app/api/feeds/podcast/route.ts

@@ -1,7 +1,7 @@
 import {
   convertEpisodeToPodcastItem,
   getPodcastEpisodes,
-} from "src/data-source/content";
+} from "src/data/content";
 import { absolute, RouteTo } from "src/routing";
 import { iTunesPodcastShow, renderPodcastFeed } from "src/feeds";
 import { join } from "path";

app/clanky/[...path]/ArticleContent.tsx

@@ -6,7 +6,8 @@ import { DatawrapperChart } from "./DatawrapperChart";
 import Image from "next/image";
 import { default as NextLink } from "next/link";
 import { siteUrl } from "src/routing";
-import { plausibleEventClass } from "src/data-source/plausible";
+import { plausibleEventClass } from "src/data/plausible";
+import { PodcastPlayer } from "./PodcastPlayer";
 
 export type ArticleBodyProps = {
   /** Markdoc source */
@@ -32,6 +33,7 @@ export const ArticleContent = ({ src }: ArticleBodyProps) => {
       SpotifyEpisode,
       YouTubeVideo,
       DatawrapperChart,
+      PodcastPlayer,
     },
   });
   return <div className="article-content">{node}</div>;

app/clanky/[...path]/PodcastPlayer.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import Image from "next/image";
+import Plausible from "plausible-tracker";
+import { useRef, useState } from "react";
+import { PodcastEpisode } from "src/data/podcast";
+import { RouteTo } from "src/routing";
+import { tilde } from "src/utils";
+
+type PodcastPlayerProps = {
+  episode: PodcastEpisode;
+};
+
+export const PodcastPlayer = ({ episode }: PodcastPlayerProps) => {
+  const playerRef = useRef<HTMLAudioElement>(null);
+  const [playing, setPlaying] = useState(false);
+  const { trackEvent } = Plausible({ domain: "ohlasy.info" });
+
+  return (
+    <div className="bg-plum rounded-xl p-7 md:p-9 my-6 flex flex-col gap-7">
+      <audio
+        src={episode.url}
+        ref={playerRef}
+        onPlaying={() => setPlaying(true)}
+        onPause={() => setPlaying(false)}
+        onEnded={() => setPlaying(false)}
+      />
+      <div className="flex flex-col md:flex-row gap-7">
+        <div className="relative aspect-square w-full md:w-[216px] shrink-0">
+          <Image
+            className="bg-gray shadow-lg rounded-xl"
+            sizes="(min-width: 768px) 216px, 100vw"
+            src={episode.image}
+            alt=""
+            fill
+          />
+        </div>
+        <div className="flex flex-col gap-4">
+          <div className="text-white">
+            <p className="text-2xl text-balance">{tilde(episode.title)}</p>
+            <p>{episode.duration.replace("00:", "")}</p>
+          </div>
+          <div>
+            {!playing && (
+              <Button
+                icon={PlayIcon}
+                onClick={() => {
+                  trackEvent("Start Playback");
+                  playerRef.current?.play();
+                }}
+              />
+            )}
+            {playing && (
+              <Button
+                onClick={() => playerRef.current?.pause()}
+                icon={PauseIcon}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-row flex-wrap gap-4 text-sm -mb-2">
+        <ServiceButton href={RouteTo.Spotify} title="Spotify" />
+        <ServiceButton href={RouteTo.ApplePodcasts} title="Apple Podcasts" />
+        <ServiceButton href={RouteTo.YouTubePodcast} title="YouTube" />
+        <ServiceButton href={RouteTo.mainPodcastFeed} title="RSS" />
+        <ServiceButton href={episode.url} title="stáhnout MP3" />
+      </div>
+    </div>
+  );
+};
+
+const ServiceButton = ({ href, title }: { href: string; title: string }) => (
+  <a
+    href={href}
+    className="rounded-full whitespace-nowrap border-[1px] text-white border-white px-2 hover:bg-white hover:text-plum"
+    target="_blank"
+  >
+    ▷ {title}
+  </a>
+);
+
+const Button = ({
+  onClick,
+  icon,
+}: {
+  onClick: () => void;
+  icon: JSX.Element;
+}) => (
+  <button
+    className="block aspect-square w-[50px] text-white hover:scale-110 transition-transform"
+    onClick={onClick}
+  >
+    {icon}
+  </button>
+);
+
+const PlayIcon = (
+  <svg
+    role="img"
+    aria-hidden="false"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    stroke="currentColor"
+  >
+    <title>Spustit</title>
+    <path d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm8.75-4.567a.5.5 0 0 0-.75.433v8.268a.5.5 0 0 0 .75.433l7.161-4.134a.5.5 0 0 0 0-.866L9.75 7.433z"></path>
+  </svg>
+);
+
+const PauseIcon = (
+  <svg
+    role="img"
+    aria-hidden="false"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    stroke="currentColor"
+  >
+    <title>Pozastavit</title>
+    <path d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12zm7.5-5a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-2zm5 0a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-2z"></path>
+  </svg>
+);

app/clanky/[...path]/page.tsx

@@ -6,8 +6,8 @@ import Image from "next/image";
 import { notFound } from "next/navigation";
 import React from "react";
 import { Article, compareByDate, readArticle } from "src/article";
-import { getCachedData } from "src/data-source/cache";
-import { Author, getAllAuthors } from "src/data-source/content";
+import { getCachedData } from "src/data/cache";
+import { Author, getAllAuthors } from "src/data/content";
 import {
   articleRoot,
   getFilesRecursively,

app/obchod/[slug]/BookDetail.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { Book } from "src/data-source/books";
+import { Book } from "src/data/books";
 import { OrderForm } from "./OrderForm";
 
 type Props = {

app/obchod/[slug]/actions.ts

@@ -1,6 +1,6 @@
 "use server";
 
-import { Book, createOrder, getBookById } from "src/data-source/books";
+import { Book, createOrder, getBookById } from "src/data/books";
 import {
   createInvoice,
   createSubject,

app/obchod/[slug]/page.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from "next";
 import { notFound } from "next/navigation";
-import { getAllBooks } from "src/data-source/books";
+import { getAllBooks } from "src/data/books";
 import { BookDetails } from "./BookDetail";
 import Image from "next/image";
 import { getResizedImageUrl } from "src/utils";

app/obchod/page.tsx

@@ -1,7 +1,7 @@
 import { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
-import { Book, getAllBooks, sortByYear } from "src/data-source/books";
+import { Book, getAllBooks, sortByYear } from "src/data/books";
 import { RouteTo } from "src/routing";
 import { getResizedImageUrl } from "src/utils";
 

app/page.tsx

@@ -1,20 +1,20 @@
 import { PreviewNest } from "components/PreviewNest";
-import { getAllBanners } from "src/data-source/banners";
+import { getAllBanners } from "src/data/banners";
 import { RouteTo } from "src/routing";
 import { endlessGeneratorOf, shuffleInPlace, tilde } from "src/utils";
-import { getTopArticles, plausibleEventClass } from "src/data-source/plausible";
+import { getTopArticles, plausibleEventClass } from "src/data/plausible";
 import {
   getLatestTopicsSummary,
   getUserAvatar,
   LatestTopicsSummary,
-} from "src/data-source/forum";
+} from "src/data/forum";
 import { compareByDate, getAllArticles, Metadata } from "src/article";
 import { BannerBox } from "components/BannerBox";
-import { Banner } from "src/data-source/banners";
-import { TopArticles } from "src/data-source/plausible";
+import { Banner } from "src/data/banners";
+import { TopArticles } from "src/data/plausible";
 import Link from "next/link";
 import Image from "next/image";
-import { getAllAuthors } from "src/data-source/content";
+import { getAllAuthors } from "src/data/content";
 
 // Revalidate this page every 5 minutes
 export const revalidate = 300;

app/stats/donations/donors/route.ts

@@ -1,4 +1,4 @@
-import { getPastYearTransactionsByMonth } from "src/data-source/darujme";
+import { getPastYearTransactionsByMonth } from "src/data/darujme";
 import { unique } from "src/utils";
 
 export const dynamic = "force-dynamic";

app/stats/donations/last_year/route.ts

@@ -2,7 +2,7 @@ import {
   sumOneTimeDonations,
   sumRecurrentDonations,
   getPastYearTransactionsByMonth,
-} from "src/data-source/darujme";
+} from "src/data/darujme";
 
 export const dynamic = "force-dynamic";
 

app/stats/donations/monthly/route.ts

@@ -2,7 +2,7 @@ import {
   sumOneTimeDonations,
   getPastYearTransactionsByMonth,
   sumRecurrentDonations,
-} from "src/data-source/darujme";
+} from "src/data/darujme";
 
 export const dynamic = "force-dynamic";
 

components/BannerBox.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { Banner } from "src/data-source/banners";
+import { Banner } from "src/data/banners";
 
 export type BannerProps = {
   banner: Banner;

components/PreviewNest.tsx

@@ -1,12 +1,12 @@
 import { getArticleNotices, Metadata as Article } from "src/article";
-import { Banner } from "src/data-source/banners";
+import { Banner } from "src/data/banners";
 import { BannerBox } from "./BannerBox";
 import { tilde as t } from "src/utils";
 import Image from "next/image";
 import { RouteTo } from "src/routing";
 import Link from "next/link";
-import { plausibleEventClass } from "src/data-source/plausible";
-import { Author } from "src/data-source/content";
+import { plausibleEventClass } from "src/data/plausible";
+import { Author } from "src/data/content";
 
 export type PreviewNestProps = {
   getBanner: () => Banner;

content/articles/2019/10/2019-10-11-ondracek-nazivo.md

@@ -8,7 +8,7 @@ tags: architektura
 
 *Hostem dalšího setkání nového cyklu Ohlasy naživo byl ve čtvrtek 10. října architekt Petr Ondráček. K poslechu nabízíme úvodní rozhovor, který proběhl v kulturním a komunitním centru Prostor.*
 
-{% spotify_episode id="1fQQ7gFSkgJGBy0tkt6ES7" /%}
+{% podcast_player file="2019/nazivo/ondracek.mp3" /%}
 
 Petr Ondráček kromě samotného vykonávání své profese věnuje hodně přemýšlení a úsilí její popularizaci a snaze trochu nás tady v Boskovicích posunout ve vnímání architektury a veřejného prostoru. Návštěvníci našeho diskusního fóra dobře znají jeho poctivé a podrobné příspěvky, příklady úspěšných a pozoruhodných staveb z jiných měst a neúnavné vysvětlování všeho, co s architekturou a vůbec snahou dělat město lepším souvisí.
 

content/articles/2019/10/2019-10-29-kosatik.md

@@ -9,7 +9,7 @@ tags: historie politika
 
 *U příležitosti 30. výročí Listopadu 89 pořádá Muzeum regionu Boskovicka v kulturním a komunitním centru Prostor sérii besed. Hostem první z nich byl spisovatel Pavel Kosatík, který v úvodu odpovídal na otázky muzejního historika Petra Vítámváse. Hlavním tématem debaty byla osobnost prvního polistopadového prezidenta Václava Havla. Záznam rozhovoru zde přinášíme.*
 
-{% spotify_episode id="4XXkhmeW8syn5EupgZvtWF" /%}
+{% podcast_player file="2019/podcast/kosatik.mp3" /%}
 
 Pavel Kosatík mluvil o tom, jestli byl Václav Havel přirozeným a samozřejmým lídrem revoluce, jak probíhalo převzetí moci, jaké byly Havlovy předrevoluční politické ideje a představy a do jaké míry ovlivnily jeho již prezidentské působení v nových politických poměrech. Rozhovor se stočil i k paralelám mezi Václavem Havlem a T. G. Masarykem a k Havlovým následovníkům.
 

content/articles/2019/11/2019-11-22-vitkova-nazivo.md

@@ -9,7 +9,7 @@ tags: politika D43
 
 *Hostem dalšího setkání nového cyklu Ohlasy naživo byla ve čtvrtek 21. října senátorka Jaromíra Vítková (KDU-ČSL). K poslechu nabízíme úvodní rozhovor, který proběhl v kulturním a komunitním centru Prostor.*
 
-{% spotify_episode id="5GDbdXslkdYyR0zP0NTDsY" /%}
+{% podcast_player file="2019/podcast/vitkova.mp3" /%}
 
 Jaromíra Vítková působila po několik volebních období jako místostarostka Boskovic, po vítězných volbách v roce 2016 se přesunula do Senátu. Na debatě v Prostoru jsme jí proto na úvod ptali, co pro ni osobně znamenala tato životní a profesní změna.
 

content/articles/2019/11/2019-11-4-beseda-kysilka.md

@@ -10,7 +10,7 @@ tags: historie politika
 
 *U příležitosti 30. výročí Listopadu 89 pořádá Muzeum regionu Boskovicka v kulturním a komunitním centru Prostor sérii besed. Hostem další z nich byl ekonom Pavel Kysilka, který v úvodu odpovídal na otázky muzejního historika Petra Vítámváse. Hlavním tématem debaty byla ekonomická transformace po roce 1989. Záznam rozhovoru zde přinášíme.*
 
-{% spotify_episode id="7KZUIQfUoxOzw4mBrYp47M" /%}
+{% podcast_player file="2019/podcast/kysilka.mp3" /%}
 
 Výchozím bodem debaty se stala ekonomická situace na konci 80. let v Československu a její vliv na zhroucení totalitního režimu. Pavel Kysilka popisoval také názorové spektrum a diskuse v odborné ekonomické veřejnosti, která si čím dál víc uvědomovala nutnost reforem a přechod k tržnímu hospodářství.
 

content/articles/2019/12/2019-12-9-bures-nazivo.md

@@ -7,7 +7,7 @@ category: podcast
 
 *Hostem dalšího setkání nového cyklu Ohlasy naživo byl ve čtvrtek 5. prosince boskovický evangelický farář Jiří Bureš. K poslechu nabízíme úvodní rozhovor, který proběhl v kulturním a komunitním centru Prostor.*
 
-{% spotify_episode id="1cUivYnhxyeTzS2KXPRdtI" /%}
+{% podcast_player file="2019/podcast/advent.mp3" /%}
 
 Rozhovor proběhl na počátku adventu a advent byl také úvodním tématem. Na co to v adventu vlastně čekáme? Na světlo? Nebo má advent také svůj hlubší význam a křesťané v něm předjímají i čekání na konec věků? A jaký význam může mít advent pro osobní duchovní cestu člověka?
 

content/articles/2019/9/2019-9-14-holik-nazivo.md

@@ -13,7 +13,7 @@ tags:
 
 *Hostem prvního setkání nového cyklu Ohlasy naživo byl ve čtvrtek 12. září boskovický místostarosta Lukáš Holík. K poslechu nabízíme úvodní rozhovor, který proběhl v kulturním a komunitním centru Prostor.*
 
-{% spotify_episode id="3befQxG0SU1unTnGzklhDF" /%}
+{% podcast_player file="2019/nazivo/holik.mp3" /%}
 
 Vzhledem k tomu, že se setkání konalo jen dva dny po jednání zastupitelstva, které rozhodlo o umístění sportovní haly na Hybešově ulici, nebylo možné vyhnout se tomuto tématu a bezprostředním reakcím na možná trochu nečekaný výsledek, kdy nejednotné koalici pomohli prosadit výslednou variantu lidovci. Jak Lukáš Holík prožíval vítězství varianty, kterou prosazoval? A může vůbec stávající koalice pokračovat po takovém rozporu?
 

content/articles/2020/1/2020-1-17-mazac-nazivo.md

@@ -9,7 +9,7 @@ tags: politika
 
 *Hostem dalšího setkání cyklu Ohlasy naživo byl ve čtvrtek 16. ledna boskovický místostarosta Radek Mazáč (Sportovci). K poslechu nabízíme úvodní rozhovor, který proběhl v kulturním a komunitním centru Prostor.*
 
-{% spotify_episode id="5a802Ss0KTbiz8LrZAlvWf" /%}
+{% podcast_player file="2020/podcast/mazac.mp3" /%}
 
 Rozhovor místostarostou Radkem Mazáčem proběhl ve chvíli, kdy vrcholí příprava zadání klíčové sportovní investice – nové sportovní haly, která má stát na Hybešově ulici u národohospodářské školy.
 

content/articles/2020/10/2020-10-26-dohnalek-nazivo.md

@@ -9,7 +9,7 @@ tags: politika
 
 *Hostem Ohlasů naživo byl tentokrát boskovický starosta Jaroslav Dohnálek (ODS). V říjnu se volební období komunálních politiků přehouplo do své druhé poloviny, což je pravá chvíle na rozhovor s nejvýše postaveným politikem ve městě. Mluvili jsme o fungování koalice, dosavadní práci radnice a také o výhledu na komunální volby v roce 2022.*
 
-{% spotify_episode id="5xTeJ5wVdvjKnz2EpON5B0" /%}
+{% podcast_player file="2020/podcast/dohnalek.mp3" /%}
 
 Na začátku rozhovoru jsme se ptali, jestli byla polovina volebního období pro starostu Boskovic příležitostí k zamyšlení a hodnocení a jestli si sám v poločase dělal bilanci dosavadního vládnutí. Především nás zajímalo, jak je spokojený s fungováním koalice, s jejím pracovním výkonem, ale také s tím, jak spojenectví ODS, ANO, Sportovců, TOP 09 a Boskováků funguje lidsky.
 

content/articles/2020/11/2020-11-17-oujesky-nazivo.md

@@ -9,7 +9,7 @@ tags: historie
 
 *Dalším hostem Ohlasů naživo byl Ladislav Oujeský, knihař, skaut a také spolupracovník Paměti národa. Pro tu zpracovává vzpomínky pamětníků z Boskovicka na 20. století a dva totalitní režimy – nacistický a komunistický. Před časem získal unikátní archiv skautského odbojáře Leopolda Färbera, tak řečeného Hurvínka, a s ním i podrobnější informace o dalším boskovickém odbojáři Karlu Boháčkovi. A právě o práci pro Paměť národa jsme si především povídali v živém rozhovoru.*
 
-{% spotify_episode id="6UdepMObqZpH9YI4LrlyPY" /%}
+{% podcast_player file="2020/podcast/oujesky.mp3" /%}
 
 Ladislav Oujeský nám v úvodu rozhovoru popsal, jak se k zájmu o Paměť národa a o historii 20. století a příběhy pamětníků dostal. Probrali jsme, jak jeho činnost a zaznamenávání vzpomínek probíhá, v čem spočívá jeho práce a jakou má s respondenty zkušenost. Chtějí o svých příbězích mluvit? Jsou rádi, že se o ně někdo zajímá? Mluvil taky s někým, kdo v těžkých obdobích našich dějin neobstál a nezachoval se odvážně?
 

content/articles/2020/12/2020-12-23-bures-nazivo.md

@@ -8,7 +8,7 @@ category: podcast
 
 *Hostem streamovaného speciálního předvánočního vydání byl evangelický farář Jiří Bureš a hudební duo Ireny a Vojtěcha Havlových. Tématem rozhovoru byl vánoční příběh a křesťanské vánoční poselství. V hudební části večera zahráli své skladby významní představitelé české alternativní scény manželé Havlovi, kteří svou hudbou předávají mírumilovné duchovní poselství.*
 
-{% spotify_episode id="0kJNKqbxsxxmNmwRjKKvtn" /%}
+{% podcast_player file="2020/podcast/vanoce.mp3" /%}
 
 V předvánočním rozhovoru jsme s Jiřím Burešem prošli biblický příběh o narození Ježíše Krista. Na začátku nás zajímalo, jestli faráře po letech služby dokáže toto vyprávění ještě něčím překvapovat, nebo dokonce provokovat. Ptali jsme se, v čem je Ježíšovo narození a jeho vstup do toho světa specifické, oproti jiným náboženstvím či mýtům, ve kterých se Bůh rovněž stane člověkem.
 

content/articles/2020/2/2020-2-10-rozhovor-lwc.md

@@ -7,7 +7,7 @@ category: podcast
 
 *Pozvání k živému rozhovoru na narozeninové akci Pět let Ohlasů přijala naše nejpovolanější odbornice na lokální žurnalistiku – mediální analytička Lenka Waschková Císařová z Fakulty sociálních studií MU v Brně.*
 
-{% spotify_episode id="26ne8vSYPObg5HHEsfg4cR" /%}
+{% podcast_player file="2020/podcast/lwc.mp3" /%}
 
 Vzhledem k tomu, že rozhovor proběhl u příležitosti narozeninové oslavy našich novin, využili jsme úvodu k otázce, jak Lenka Waschková vidí naši práci, způsob, jakým noviny děláme, a to v širším kontextu lokální novinařiny.
 

content/articles/2020/2/2020-2-12-rozhovor-skorepa.md

@@ -8,7 +8,7 @@ tags: krajina
 
 *K živému rozhovoru jsme na narozeninové akci Pět let Ohlasů pozvali také autora jednoho z našich nejoblíbenějších seriálů – přírodovědce Hynka Skořepu, který do Ohlasů píše o Krajinách Boskovicka.*
 
-{% spotify_episode id="4qdO6mOowux8qk2lGC1DX4" /%}
+{% podcast_player file="2020/podcast/hynek.mp3" /%}
 
 Rozhovor vedl Tomáš Znamenáček, který se na úvod Hynka Skořepy vyptal, jaký měl vztah k procházkám a výletům jako dítě. A jestli jejich rodinné výlety mířily spíš do vzdálenějších krajů, nebo se toulali už tehdy i v okolí Boskovic.