From cdf9f9d53f2597f19455cb65c51da4677bb99327 Mon Sep 17 00:00:00 2001
From: Yassine Doghri <yassine@doghri.fr>
Date: Fri, 21 Jan 2022 19:26:31 +0000
Subject: [PATCH] fix: add missing explicit badge for podcasts and episodes

---
 app/Helpers/components_helper.php        | 16 +++++++++++
 themes/cp_app/episode/_layout.php        |  5 +++-
 themes/cp_app/episode/_partials/card.php |  2 +-
 themes/cp_app/home.php                   |  3 +-
 themes/cp_app/podcast/_layout.php        | 35 +++++++++++++-----------
 5 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/app/Helpers/components_helper.php b/app/Helpers/components_helper.php
index 2d12bc3d..7c7073f4 100644
--- a/app/Helpers/components_helper.php
+++ b/app/Helpers/components_helper.php
@@ -316,3 +316,19 @@ if (! function_exists('relative_time')) {
 }
 
 // ------------------------------------------------------------------------
+
+if (! function_exists('explicit_badge')) {
+    function explicit_badge(bool $isExplicit, string $class = ''): string
+    {
+        if (! $isExplicit) {
+            return '';
+        }
+
+        $explicitLabel = lang('Common.explicit');
+        return <<<CODE_SAMPLE
+            <span class="px-1 text-xs font-semibold leading-tight tracking-wider uppercase border md:border-white/50 {$class}">{$explicitLabel}</span>
+        CODE_SAMPLE;
+    }
+}
+
+// ------------------------------------------------------------------------
diff --git a/themes/cp_app/episode/_layout.php b/themes/cp_app/episode/_layout.php
index ba9291fd..8fb8aeca 100644
--- a/themes/cp_app/episode/_layout.php
+++ b/themes/cp_app/episode/_layout.php
@@ -81,7 +81,10 @@
         <div class="absolute top-0 left-0 w-full h-full bg-center bg-no-repeat bg-cover blur-lg mix-blend-overlay filter grayscale" style="background-image: url('<?= $episode->podcast->banner->small_url ?>');"></div>
         <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-background-header to-transparent"></div>
         <div class="z-10 flex flex-col items-start gap-y-2 gap-x-4 sm:flex-row">
-            <img src="<?= $episode->cover->medium_url ?>" alt="<?= $episode->title ?>" class="rounded-md shadow-xl h-36 aspect-square" loading="lazy" />
+            <div class="relative">
+                <?= explicit_badge($episode->parental_advisory === 'explicit', 'rounded absolute left-0 bottom-0 ml-2 mb-2 bg-black/75 text-accent-contrast') ?>
+                <img src="<?= $episode->cover->medium_url ?>" alt="<?= $episode->title ?>" class="rounded-md shadow-xl h-36 aspect-square" loading="lazy" />
+            </div>
             <div class="flex flex-col items-start text-white">
                 <?= episode_numbering($episode->number, $episode->season_number, 'text-sm leading-none font-semibold px-1 py-1 text-white/90 border !no-underline border-subtle', true) ?>
                 <h1 class="inline-flex items-baseline max-w-md mt-2 text-2xl font-bold sm:leading-none sm:text-3xl font-display line-clamp-2"><?= $episode->title ?></h1>
diff --git a/themes/cp_app/episode/_partials/card.php b/themes/cp_app/episode/_partials/card.php
index ed915ac8..22de5e04 100644
--- a/themes/cp_app/episode/_partials/card.php
+++ b/themes/cp_app/episode/_partials/card.php
@@ -12,7 +12,7 @@
                 <?= episode_numbering($episode->number, $episode->season_number, 'text-xs font-semibold border-subtle text-skin-muted px-1 border mr-2 !no-underline', true) ?>
                 <?= relative_time($episode->published_at, 'text-xs whitespace-nowrap text-skin-muted') ?>
             </div>
-            <h2 class="flex-1 font-semibold line-clamp-2"><a class="hover:underline" href="<?= $episode->link ?>"><?= $episode->title ?></a></h2>
+            <h2 class="flex-1 mt-1 font-semibold leading-tight line-clamp-2"><a class="hover:underline" href="<?= $episode->link ?>"><?= $episode->title ?></a></h2>
         </div>
         <play-episode-button
             id="<?= $episode->id ?>"
diff --git a/themes/cp_app/home.php b/themes/cp_app/home.php
index 7947a61e..b217e82f 100644
--- a/themes/cp_app/home.php
+++ b/themes/cp_app/home.php
@@ -61,9 +61,10 @@
                         <article class="text-white">
                             <div class="absolute bottom-0 left-0 z-10 w-full h-full backdrop-gradient mix-blend-multiply"></div>
                             <div class="w-full h-full overflow-hidden bg-header">
+                                <?= explicit_badge($podcast->parental_advisory === 'explicit', 'absolute top-0 left-0 z-10 rounded bg-black/75 ml-2 mt-2') ?>
                                 <img alt="<?= $podcast->title ?>" src="<?= $podcast->cover->medium_url ?>" class="object-cover w-full h-full transition duration-200 ease-in-out transform bg-header aspect-square group-focus:scale-105 group-hover:scale-105" loading="lazy" />
                             </div>
-                            <div class="absolute bottom-0 left-0 z-20 px-4 pb-2">
+                            <div class="absolute bottom-0 left-0 z-20 w-full px-4 pb-2">
                                 <h2 class="font-bold leading-none truncate font-display"><?= $podcast->title ?></h2>
                                 <p class="text-sm opacity-75">@<?= $podcast->handle ?></p>
                             </div>
diff --git a/themes/cp_app/podcast/_layout.php b/themes/cp_app/podcast/_layout.php
index 0f77aa72..417f3953 100644
--- a/themes/cp_app/podcast/_layout.php
+++ b/themes/cp_app/podcast/_layout.php
@@ -47,11 +47,14 @@
         <div class="absolute bottom-0 left-0 w-full h-full backdrop-gradient mix-blend-multiply"></div>
         <div class="z-10 flex items-center pl-4 -mb-6 md:pl-8 md:-mb-8 gap-x-4">
             <img src="<?= $podcast->cover->thumbnail_url ?>" alt="<?= $podcast->title ?>" class="h-24 rounded-full sm:h-28 md:h-36 ring-3 ring-background-elevated aspect-square" loading="lazy" />
-            <div class="relative flex flex-col text-white -top-2 sm:top-0 md:top-2">
+            <div class="relative flex flex-col text-white -top-3 sm:top-0 md:top-2">
                 <h1 class="text-lg font-bold leading-none line-clamp-2 md:leading-none md:text-2xl font-display"><?= $podcast->title ?><span class="ml-1 font-sans text-base font-normal">@<?= $podcast->handle ?></span></h1>
-                <span class="text-xs"><?= lang('Podcast.followers', [
-                    'numberOfFollowers' => $podcast->actor->followers_count,
-                ]) ?></span>
+                <div class="">
+                    <?= explicit_badge($podcast->parental_advisory === 'explicit', 'mr-1') ?>
+                    <span class="text-xs"><?= lang('Podcast.followers', [
+                        'numberOfFollowers' => $podcast->actor->followers_count,
+                    ]) ?></span>
+                </div>
             </div>
         </div>
         <div class="z-10 inline-flex items-center self-end mt-2 mr-2 sm:mb-4 sm:mr-4 gap-x-2">
@@ -59,18 +62,18 @@
                 <button class="p-2 text-red-600 bg-white rounded-full shadow hover:text-red-500 focus:ring-accent" data-toggle="funding-links" data-toggle-class="hidden" data-tooltip="bottom" title="<?= lang('Podcast.sponsor') ?>"><Icon glyph="heart"></Icon></button>
             <?php endif; ?>
             <?= anchor_popup(
-                    route_to('follow', $podcast->handle),
-                    icon(
-                        'social/castopod',
-                        'mr-2 text-xl text-black/75 group-hover:text-black',
-                    ) . lang('Podcast.follow'),
-                    [
-                        'width' => 420,
-                        'height' => 620,
-                        'class' =>
-                            'group inline-flex items-center px-4 text-xs tracking-wider font-semibold text-black uppercase rounded-full leading-8 shadow focus:ring-accent bg-white',
-                    ],
-                ) ?>
+                        route_to('follow', $podcast->handle),
+                        icon(
+                            'social/castopod',
+                            'mr-2 text-xl text-black/75 group-hover:text-black',
+                        ) . lang('Podcast.follow'),
+                        [
+                            'width' => 420,
+                            'height' => 620,
+                            'class' =>
+                                'group inline-flex items-center px-4 text-xs tracking-wider font-semibold text-black uppercase rounded-full leading-8 shadow focus:ring-accent bg-white',
+                        ],
+                    ) ?>
         </div>
     </header>
     <?= $this->include('podcast/_partials/navigation') ?>