2021-11-12 16:31:35 +00:00
|
|
|
<div class="flex items-center border-y border-subtle">
|
2021-10-13 15:43:40 +00:00
|
|
|
<div class="relative">
|
2022-01-23 19:00:08 +00:00
|
|
|
<time class="absolute px-1 text-sm font-semibold text-white rounded bg-black/75 bottom-2 right-2" datetime="PT<?= round($episode->audio->duration, 3) ?>S">
|
2021-12-14 16:41:10 +00:00
|
|
|
<?= format_duration($episode->audio->duration) ?>
|
2021-10-13 15:43:40 +00:00
|
|
|
</time>
|
|
|
|
<img
|
2021-11-01 17:12:03 +00:00
|
|
|
src="<?= $episode->cover->thumbnail_url ?>"
|
2022-01-21 18:07:43 +00:00
|
|
|
alt="<?= $episode->title ?>" class="w-24 h-24 aspect-square" loading="lazy" />
|
2021-10-13 15:43:40 +00:00
|
|
|
</div>
|
|
|
|
<div class="flex flex-col flex-1 px-4 py-2">
|
|
|
|
<div class="inline-flex">
|
2021-11-05 14:36:34 +00:00
|
|
|
<?= episode_numbering($episode->number, $episode->season_number, 'text-xs font-semibold text-skin-muted px-1 border border-subtle mr-2 !no-underline', true) ?>
|
|
|
|
<?= relative_time($episode->published_at, 'text-xs whitespace-nowrap text-skin-muted') ?>
|
2021-10-13 15:43:40 +00:00
|
|
|
</div>
|
|
|
|
<a href="<?= $episode->link ?>" class="flex items-baseline font-semibold line-clamp-2" title="<?= $episode->title ?>"><?= $episode->title ?></a>
|
|
|
|
</div>
|
|
|
|
<play-episode-button
|
|
|
|
class="mr-4"
|
|
|
|
id="<?= $index . '_' . $episode->id ?>"
|
2021-11-01 17:12:03 +00:00
|
|
|
imageSrc="<?= $episode->cover->thumbnail_url ?>"
|
2021-10-13 15:43:40 +00:00
|
|
|
title="<?= $episode->title ?>"
|
|
|
|
podcast="<?= $episode->podcast->title ?>"
|
2022-01-21 08:52:28 +00:00
|
|
|
src="<?= $episode->audio_web_url ?>"
|
2021-12-17 17:14:37 +00:00
|
|
|
mediaType="<?= $episode->audio->file_mimetype ?>"
|
2021-10-13 15:43:40 +00:00
|
|
|
playLabel="<?= lang('Common.play_episode_button.play') ?>"
|
|
|
|
playingLabel="<?= lang('Common.play_episode_button.playing') ?>"></play-episode-button>
|
|
|
|
</div>
|