2021-10-13 17:43:40 +02:00
|
|
|
<?= helper('page') ?>
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="<?= service('request')
|
|
|
|
|
->getLocale() ?>">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8"/>
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
2021-10-26 17:54:56 +02:00
|
|
|
<link rel="icon" type="image/x-icon" href="<?= service('settings')
|
|
|
|
|
->get('App.siteIcon')['ico'] ?>" />
|
|
|
|
|
<link rel="apple-touch-icon" href="<?= service('settings')->get('App.siteIcon')['180'] ?>">
|
|
|
|
|
<link rel="manifest" href="<?= route_to('webmanifest') ?>">
|
2021-10-13 17:43:40 +02:00
|
|
|
|
|
|
|
|
<?= $this->renderSection('meta-tags') ?>
|
|
|
|
|
<?php if ($podcast->payment_pointer): ?>
|
|
|
|
|
<meta name="monetization" content="<?= $podcast->payment_pointer ?>" />
|
|
|
|
|
<?php endif; ?>
|
|
|
|
|
|
|
|
|
|
<?= service('vite')
|
|
|
|
|
->asset('styles/index.css', 'css') ?>
|
|
|
|
|
<?= service('vite')
|
|
|
|
|
->asset('js/app.ts', 'js') ?>
|
|
|
|
|
<?= service('vite')
|
|
|
|
|
->asset('js/podcast.ts', 'js') ?>
|
|
|
|
|
<?= service('vite')
|
|
|
|
|
->asset('js/audio-player.ts', 'js') ?>
|
|
|
|
|
</head>
|
|
|
|
|
|
2021-10-22 12:51:43 +02:00
|
|
|
<body class="flex flex-col min-h-screen mx-auto md:min-h-full md:grid md:grid-cols-podcast bg-pine-50">
|
2021-10-13 17:43:40 +02:00
|
|
|
<?php if (can_user_interact()): ?>
|
|
|
|
|
<div class="col-span-full">
|
|
|
|
|
<?= $this->include('_admin_navbar') ?>
|
|
|
|
|
</div>
|
|
|
|
|
<?php endif; ?>
|
|
|
|
|
|
2021-10-21 15:12:38 +02:00
|
|
|
<nav class="flex items-center justify-between h-10 col-start-2 text-white bg-pine-800">
|
|
|
|
|
<a href="<?= route_to('podcast-episodes', $podcast->handle) ?>" class="inline-flex items-center h-full px-2 focus:ring-castopod focus:ring-inset" title="<?= lang('Episode.back_to_episodes', [
|
2021-10-13 17:43:40 +02:00
|
|
|
'podcast' => $podcast->title,
|
|
|
|
|
]) ?>">
|
|
|
|
|
<?= icon('arrow-left', 'mr-2 text-lg') ?>
|
|
|
|
|
<div class="inline-flex items-center gap-x-2">
|
2021-11-01 18:12:03 +01:00
|
|
|
<img class="w-8 h-8 rounded-full" src="<?= $episode->podcast->cover->tiny_url ?>" alt="<?= $episode->podcast->title ?>" />
|
2021-10-13 17:43:40 +02:00
|
|
|
<div class="flex flex-col">
|
|
|
|
|
<span class="text-sm font-semibold leading-none"><?= $episode->podcast->title ?></span>
|
|
|
|
|
<span class="text-xs"><?= lang('Podcast.followers', [
|
|
|
|
|
'numberOfFollowers' => $podcast->actor->followers_count,
|
|
|
|
|
]) ?></span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
2021-10-21 15:12:38 +02:00
|
|
|
<div class="inline-flex items-center self-end h-full px-2 gap-x-2">
|
2021-10-13 17:43:40 +02:00
|
|
|
<?php if (in_array(true, array_column($podcast->fundingPlatforms, 'is_visible'), true)): ?>
|
|
|
|
|
<IconButton glyph="heart" variant="accent" data-toggle="funding-links" data-toggle-class="hidden"><?= lang('Podcast.sponsor') . lang('Podcast.sponsor_title') ?></IconButton>
|
|
|
|
|
<?php endif; ?>
|
|
|
|
|
<?= anchor_popup(
|
|
|
|
|
route_to('follow', $podcast->handle),
|
|
|
|
|
icon(
|
|
|
|
|
'social/castopod',
|
|
|
|
|
'mr-2 text-xl text-rose-200 group-hover:text-rose-50',
|
|
|
|
|
) . lang('Podcast.follow'),
|
|
|
|
|
[
|
|
|
|
|
'width' => 420,
|
|
|
|
|
'height' => 620,
|
|
|
|
|
'class' =>
|
2021-10-18 18:44:07 +02:00
|
|
|
'group inline-flex items-center px-2 py-1 text-xs tracking-wider font-semibold text-white uppercase rounded-full shadow focus:ring-castopod bg-rose-600',
|
2021-10-13 17:43:40 +02:00
|
|
|
],
|
|
|
|
|
) ?>
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
|
|
|
|
<header class="relative z-50 flex flex-col col-start-2 px-8 pt-8 pb-4 overflow-hidden bg-pine-500 gap-y-4">
|
2021-11-01 18:12:03 +01:00
|
|
|
<div class="absolute top-0 left-0 w-full h-full bg-center bg-no-repeat bg-cover blur-lg mix-blend-soft-light" style="background-image: url('<?= $episode->podcast->banner->small_url ?>');"></div>
|
2021-10-13 17:43:40 +02:00
|
|
|
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-pine-800 to-transparent"></div>
|
|
|
|
|
<div class="z-10 flex flex-col items-start gap-y-2 gap-x-4 sm:flex-row">
|
2021-11-01 18:12:03 +01:00
|
|
|
<img src="<?= $episode->cover->medium_url ?>" alt="<?= $episode->title ?>" loading="lazy" class="rounded-md h-36" />
|
2021-10-13 17:43:40 +02:00
|
|
|
<div class="flex flex-col items-start text-white">
|
|
|
|
|
<?= episode_numbering($episode->number, $episode->season_number, 'bg-pine-50 text-sm leading-none font-semibold text-gray-700 border !no-underline border-pine-100', true) ?>
|
|
|
|
|
<h1 class="inline-flex items-baseline max-w-md mt-2 text-2xl font-bold leading-none sm:text-3xl font-display line-clamp-2"><?= $episode->title ?></h1>
|
|
|
|
|
<div class="flex items-center mt-4 gap-x-8">
|
|
|
|
|
<?php if ($episode->persons !== []): ?>
|
2021-10-21 15:12:38 +02:00
|
|
|
<button class="flex items-center text-xs font-semibold gap-x-2 hover:underline focus:ring-castopod" data-toggle="persons-list" data-toggle-class="hidden">
|
2021-10-13 17:43:40 +02:00
|
|
|
<div class="inline-flex flex-row-reverse">
|
|
|
|
|
<?php $i = 0; ?>
|
|
|
|
|
<?php foreach ($episode->persons as $person): ?>
|
2021-11-01 18:12:03 +01:00
|
|
|
<img src="<?= $person->avatar->thumbnail_url ?>" alt="<?= $person->full_name ?>" class="object-cover w-8 h-8 -ml-5 border-2 rounded-full border-pine-100 last:ml-0" />
|
2021-10-13 17:43:40 +02:00
|
|
|
<?php $i++; if ($i === 3) {
|
|
|
|
|
break;
|
|
|
|
|
}?>
|
|
|
|
|
<?php endforeach; ?>
|
|
|
|
|
</div>
|
|
|
|
|
<?= lang('Episode.persons', [
|
|
|
|
|
'personsCount' => count($episode->persons),
|
|
|
|
|
]) ?>
|
|
|
|
|
</button>
|
|
|
|
|
<?php endif; ?>
|
|
|
|
|
<?php if ($episode->location): ?>
|
|
|
|
|
<?= location_link($episode->location, 'text-xs font-semibold p-2') ?>
|
|
|
|
|
<?php endif; ?>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="z-10 inline-flex items-center text-white gap-x-4">
|
|
|
|
|
<play-episode-button
|
|
|
|
|
id="<?= $episode->id ?>"
|
2021-11-01 18:12:03 +01:00
|
|
|
imageSrc="<?= $episode->cover->thumbnail_url ?>"
|
2021-10-13 17:43:40 +02:00
|
|
|
title="<?= $episode->title ?>"
|
|
|
|
|
podcast="<?= $episode->podcast->title ?>"
|
|
|
|
|
src="<?= $episode->audio_file_web_url ?>"
|
|
|
|
|
mediaType="<?= $episode->audio_file_mimetype ?>"
|
|
|
|
|
playLabel="<?= lang('Common.play_episode_button.play') ?>"
|
|
|
|
|
playingLabel="<?= lang('Common.play_episode_button.playing') ?>"></play-episode-button>
|
|
|
|
|
<div class="text-xs">
|
|
|
|
|
<?= relative_time($episode->published_at) ?>
|
|
|
|
|
<span class="mx-1">•</span>
|
|
|
|
|
<time datetime="PT<?= $episode->audio_file_duration ?>S">
|
|
|
|
|
<?= format_duration_symbol($episode->audio_file_duration) ?>
|
|
|
|
|
</time>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</header>
|
|
|
|
|
<div class="col-start-2 px-8 py-4 text-white bg-pine-800">
|
|
|
|
|
<h2 class="text-xs font-bold tracking-wider uppercase whitespace-pre-line font-display"><?= lang('Episode.description') ?></h2>
|
|
|
|
|
<?php if (substr_count($episode->description_markdown, "\n") > 3 || strlen($episode->description) > 250): ?>
|
|
|
|
|
<SeeMore class="max-w-xl prose-sm text-white whitespace-pre-line"><?= $episode->getDescriptionHtml('-+Website+-') ?></SeeMore>
|
|
|
|
|
<?php else: ?>
|
|
|
|
|
<div class="max-w-xl prose-sm text-white whitespace-pre-line"><?= $episode->getDescriptionHtml('-+Website+-') ?></div>
|
|
|
|
|
<?php endif; ?>
|
|
|
|
|
</div>
|
|
|
|
|
<?= $this->include('episode/_partials/navigation') ?>
|
2021-10-22 12:51:43 +02:00
|
|
|
<div class="relative grid items-start flex-1 col-start-2 grid-cols-podcastMain gap-x-6">
|
|
|
|
|
<main class="w-full col-start-1 row-start-1 py-6 col-span-full md:col-span-1">
|
2021-10-13 17:43:40 +02:00
|
|
|
<?= $this->renderSection('content') ?>
|
|
|
|
|
</main>
|
2021-10-22 12:51:43 +02:00
|
|
|
<div data-sidebar-toggler="backdrop" class="absolute top-0 left-0 z-10 hidden w-full h-full bg-pine-800/75 md:hidden" role="button" tabIndex="0" aria-label="Close"></div>
|
2021-10-13 17:43:40 +02:00
|
|
|
<?= $this->include('podcast/_partials/sidebar') ?>
|
|
|
|
|
</div>
|
|
|
|
|
<?= view('_persons_modal', [
|
|
|
|
|
'title' => lang('Episode.persons_list', [
|
|
|
|
|
'episodeTitle' => $episode->title,
|
|
|
|
|
]),
|
|
|
|
|
'persons' => $episode->
|
|
|
|
|
persons,
|
|
|
|
|
]) ?>
|
|
|
|
|
<?php if (in_array(true, array_column($podcast->fundingPlatforms, 'is_visible'), true)): ?>
|
|
|
|
|
<?= $this->include('podcast/_partials/funding_links_modal') ?>
|
|
|
|
|
<?php endif; ?>
|
|
|
|
|
</body>
|
