[episode].astro

---
import { getEntry } from 'astro:content';

// Check if astro:db integration is available by looking for the virtual module
let astroDB;

try {
  astroDB = await import('astro:db');
} catch {
  // astro:db is not available
}

import { Schema } from 'astro-seo-schema';

import FormattedDate from '../components/FormattedDate';
import CreatorsAndGuests from '../components/episode/CreatorsAndGuests.astro';
import Sponsors from '../components/episode/Sponsors.astro';
import PlayButton from '../components/player/PlayButton';
import FullPlayButton from '../components/FullPlayButton';
import UFOIllustration from '../components/illustrations/UFOIllustration.astro';
import Layout from '../layouts/Layout.astro';
import { getAllEpisodes, getShowInfo } from '../lib/rss';
import { dasherize } from '../utils/dasherize';

const show = await getShowInfo();

export async function getStaticPaths() {
  const allEpisodes = await getAllEpisodes();

  return allEpisodes.flatMap((episode) => {
    return [
      {
        params: { episode: episode.episodeNumber },
        props: { episode }
      },
      {
        params: { episode: episode.episodeSlug },
        props: { episode }
      }
    ];
  });
}

const { episode } = Astro.props;

let Transcript;

if (episode.episodeNumber && episode.episodeNumber !== 'Bonus') {
  Transcript = await getEntry('transcripts', episode.episodeNumber);
  if (Transcript) {
    const { Content } = await Transcript.render();
    Transcript = Content;
  }
}

const canonicalURL = new URL(`/${episode.episodeSlug}`, Astro.url);

let hostsAndGuests: any[] = [];
let sponsors: any[] = [];

if (astroDB) {
  // @ts-ignore - These table exports only exist when astro:db integration is enabled
  const { db, eq, Episode: DbEpisode, HostOrGuest, Person, Sponsor, SponsorForEpisode } = astroDB;

  hostsAndGuests = await db
    .select({
      id: Person.id,
      img: Person.img,
      isHost: HostOrGuest.isHost,
      name: Person.name
    })
    .from(HostOrGuest)
    .innerJoin(DbEpisode, eq(HostOrGuest.episodeSlug, DbEpisode.episodeSlug))
    .innerJoin(Person, eq(HostOrGuest.personId, Person.id))
    .where(eq(DbEpisode.episodeSlug, episode.episodeSlug));

  sponsors = await db
    .select({
      id: Sponsor.id,
      img: Sponsor.img,
      name: Sponsor.name,
      url: Sponsor.url
    })
    .from(SponsorForEpisode)
    .innerJoin(
      DbEpisode,
      eq(SponsorForEpisode.episodeSlug, DbEpisode.episodeSlug)
    )
    .innerJoin(Sponsor, eq(SponsorForEpisode.sponsorId, Sponsor.id))
    .where(eq(DbEpisode.episodeSlug, episode.episodeSlug));
}

const title = `${episode.title} - ${show.title} - Episode ${episode.episodeNumber}`;
---

<Layout
  canonicalURL={canonicalURL}
  description={episode.description}
  imageUrl={episode.episodeImage}
  title={title}
>
  <Schema
    slot="head"
    item={{
      '@context': 'https://schema.org',
      '@type': 'PodcastEpisode',
      name: episode.title,
      datePublished: new Date(episode.published).toISOString(),
      description: episode.description,
      episodeNumber: episode.episodeNumber,
      url: canonicalURL.toString(),
      image: episode.episodeImage || show.image,
      duration: `PT${Math.floor(episode.duration / 60)}M${episode.duration % 60}S`,
      associatedMedia: {
        '@type': 'MediaObject',
        contentUrl: episode.audio?.src,
        encodingFormat: episode.audio?.type || 'audio/mpeg'
      },
      partOfSeries: {
        '@type': 'PodcastSeries',
        name: show.title,
        url: Astro.site?.toString()
      }
    }}
  />

  <!-- Enhanced Open Graph tags -->
  <meta slot="head" property="og:audio" content={episode.audio?.src} />
  <meta
    slot="head"
    property="article:published_time"
    content={new Date(episode.published).toISOString()}
  />
  {
    hostsAndGuests
      ?.filter((p) => p.isHost)
      .map((host) => (
        <meta slot="head" property="article:author" content={host.name} />
      ))
  }

  <div class="relative z-10 px-8 lg:px-18">
    <div class="block lg:flex">
      <div class="mt-4 mr-11 hidden h-14 w-14 shrink-0 lg:block">
        <PlayButton
          client:only="preact"
          episode={{
            audio: episode.audio,
            episodeNumber: episode.episodeNumber,
            id: episode.id,
            title: episode.title
          }}
        />
      </div>

      <div class="overflow-hidden break-words">
        <FormattedDate date={new Date(episode.published)} />

        <h1
          class="text-light-text-heading mb-4 text-2xl font-bold lg:mb-6 lg:text-5xl dark:text-white"
          style={'view-transition-name: vt-' + dasherize(episode.title)}
        >
          {episode.episodeNumber}: {episode.title}
        </h1>

        <p class="mb-8 lg:mb-12">
          {episode.description}
        </p>

        <div class="mb-8 block lg:hidden">
          <FullPlayButton
            client:only="preact"
            episode={{
              audio: episode.audio,
              episodeNumber: episode.episodeNumber,
              id: episode.id,
              title: episode.title
            }}
          />
        </div>

        {
          hostsAndGuests?.length ? (
            <CreatorsAndGuests hostsAndGuests={hostsAndGuests} />
          ) : undefined
        }

        {sponsors?.length ? <Sponsors sponsors={sponsors} /> : undefined}

        <h3 class="section-heading-underlined mt-16 mb-8">Show Notes</h3>

        <div
          class="prose prose-neutral dark:prose-invert mb-5 [&>h2]:mt-12 [&>h2]:flex [&>h2]:items-center [&>h2]:font-mono [&>h2]:text-sm [&>h2]:leading-7 [&>h2]:font-medium [&>h2]:text-slate-900 [&>h2]:before:mr-3 [&>h2]:before:h-3 [&>h2]:before:w-1.5 [&>h2]:before:rounded-r-full [&>h2]:before:bg-cyan-200 [&>h2:nth-of-type(3n)]:before:bg-violet-200 [&>h2:nth-of-type(3n+2)]:before:bg-indigo-200 [&>ul]:mt-6 [&>ul]:pl-5"
        >
          <Fragment set:html={episode.content} />
        </div>

        <h3 class="section-heading-underlined mt-16 mb-8">
          Episode Transcript
        </h3>

        {
          Transcript ? (
            <div class="mb-20">
              <Schema
                item={{
                  '@context': 'https://schema.org',
                  '@type': 'Article',
                  headline: `${episode.title} - Episode Transcript`,
                  datePublished: new Date(episode.published).toISOString(),
                  author: {
                    '@type': 'Organization',
                    name: show.title
                  },
                  publisher: {
                    '@type': 'Organization',
                    name: show.title
                  },
                  mainEntityOfPage: {
                    '@type': 'WebPage',
                    '@id': canonicalURL.toString()
                  },
                  about: {
                    '@type': 'PodcastEpisode',
                    name: episode.title,
                    episodeNumber: episode.episodeNumber
                  }
                }}
              />
              <article class="transcript prose prose-neutral dark:prose-invert line-clamp-4">
                <Transcript />
              </article>

              <button
                class="btn mt-4"
                type="button"
                onclick="document.querySelector('.transcript').classList.remove('line-clamp-4'); this.classList.add('hidden');"
              >
                <span class="px-8 py-3">Show more</span>
              </button>
            </div>
          ) : (
            <div class="flex flex-col items-center">
              <div class="h-auto w-full max-w-80">
                <UFOIllustration />
              </div>

              <p class="text-light-text-heading py-10 text-lg font-bold dark:text-white">
                No transcript available for this episode.
              </p>
            </div>
          )
        }
      </div>
    </div>
  </div>
</Layout>