From 2c0efc6563604dd067be88cfc9ddd88a01745e64 Mon Sep 17 00:00:00 2001 From: Yassine Doghri Date: Mon, 4 Oct 2021 15:56:43 +0000 Subject: [PATCH] feat: simplify podcast page's layout for better ux --- app/Config/Routes.php | 3 + app/Controllers/PodcastController.php | 45 ++++ app/Helpers/page_helper.php | 4 +- app/Language/en/Podcast.php | 1 + app/Language/fr/Podcast.php | 1 + tailwind.config.js | 2 + themes/cp_app/_admin_navbar.php | 46 +++++ themes/cp_app/_layout.php | 6 +- themes/cp_app/home.php | 4 + {app/Views => themes/cp_app}/map.php | 6 +- themes/cp_app/page.php | 4 + themes/cp_app/podcast/_layout copy.php | 123 +++++++++++ themes/cp_app/podcast/_layout.php | 192 ++++++++++-------- .../cp_app/podcast/_layout_authenticated.php | 52 +---- themes/cp_app/podcast/about.php | 35 ++++ themes/cp_app/podcast/activity.php | 16 +- themes/cp_app/podcast/episodes.php | 95 ++++----- 17 files changed, 426 insertions(+), 209 deletions(-) create mode 100644 themes/cp_app/_admin_navbar.php rename {app/Views => themes/cp_app}/map.php (90%) create mode 100644 themes/cp_app/podcast/_layout copy.php create mode 100644 themes/cp_app/podcast/about.php diff --git a/app/Config/Routes.php b/app/Config/Routes.php index 74d1a06a..04b8ebfd 100644 --- a/app/Config/Routes.php +++ b/app/Config/Routes.php @@ -80,6 +80,9 @@ $routes->group('@(:podcastHandle)', function ($routes): void { ], ], ]); + $routes->get('about', 'PodcastController::about/$1', [ + 'as' => 'podcast-about', + ]); $routes->options('episodes', 'ActivityPubController::preflight'); $routes->get('episodes', 'PodcastController::episodes/$1', [ 'as' => 'podcast-episodes', diff --git a/app/Controllers/PodcastController.php b/app/Controllers/PodcastController.php index 47892deb..21ce0ed0 100644 --- a/app/Controllers/PodcastController.php +++ b/app/Controllers/PodcastController.php @@ -105,6 +105,51 @@ class PodcastController extends BaseController return $cachedView; } + public function about(): string + { + // Prevent analytics hit when authenticated + if (! can_user_interact()) { + $this->registerPodcastWebpageHit($this->podcast->id); + } + + $cacheName = implode( + '_', + array_filter([ + 'page', + "podcast#{$this->podcast->id}", + 'about', + service('request') + ->getLocale(), + can_user_interact() ? '_authenticated' : null, + ]), + ); + + if (! ($cachedView = cache($cacheName))) { + $data = [ + 'podcast' => $this->podcast, + ]; + + // if user is logged in then send to the authenticated activity view + if (can_user_interact()) { + helper('form'); + return view('podcast/about_authenticated', $data); + } + + $secondsToNextUnpublishedEpisode = (new EpisodeModel())->getSecondsToNextUnpublishedEpisode( + $this->podcast->id, + ); + + return view('podcast/about', $data, [ + 'cache' => $secondsToNextUnpublishedEpisode + ? $secondsToNextUnpublishedEpisode + : DECADE, + 'cache_name' => $cacheName, + ]); + } + + return $cachedView; + } + public function episodes(): string { // Prevent analytics hit when authenticated diff --git a/app/Helpers/page_helper.php b/app/Helpers/page_helper.php index 002e6ae0..7a24aaa1 100644 --- a/app/Helpers/page_helper.php +++ b/app/Helpers/page_helper.php @@ -23,10 +23,10 @@ if (! function_exists('render_page_links')) { 'class' => 'px-2 py-1 underline hover:no-underline', ]); $links .= anchor(route_to('credits'), lang('Person.credits'), [ - 'class' => 'px-2 py-1 underline hover:no-underline', + 'class' => 'px-2 py-1 underline hover:no-underline', ]); $links .= anchor(route_to('map'), lang('Page.map'), [ - 'class' => 'px-2 underline hover:no-underline', + 'class' => 'px-2 py-1 underline hover:no-underline', ]); foreach ($pages as $page) { $links .= anchor($page->link, $page->title, [ diff --git a/app/Language/en/Podcast.php b/app/Language/en/Podcast.php index 0683cb2d..0c311ed8 100644 --- a/app/Language/en/Podcast.php +++ b/app/Language/en/Podcast.php @@ -42,6 +42,7 @@ return [ }', 'activity' => 'Activity', 'episodes' => 'Episodes', + 'about' => 'About', 'sponsor_title' => 'Enjoying the show?', 'sponsor' => 'Sponsor', 'funding_links' => 'Funding links for {podcastTitle}', diff --git a/app/Language/fr/Podcast.php b/app/Language/fr/Podcast.php index 12e9bba3..d332a933 100644 --- a/app/Language/fr/Podcast.php +++ b/app/Language/fr/Podcast.php @@ -42,6 +42,7 @@ return [ }', 'activity' => 'Activité', 'episodes' => 'Épisodes', + 'about' => 'About', 'sponsor_title' => 'Vous aimez le podcast ?', 'sponsor' => 'Soutenez-nous', 'funding_links' => 'Liens de financement pour {podcastTitle}', diff --git a/tailwind.config.js b/tailwind.config.js index cfe1014c..ea55a83c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,6 @@ /* eslint-disable */ const defaultTheme = require("tailwindcss/defaultTheme"); +const colors = require("tailwindcss/colors"); module.exports = { mode: "jit", @@ -42,6 +43,7 @@ module.exports = { 800: "#b21a39", 900: "#8e162e", }, + orange: colors.orange, }, spacing: { 112: "28rem", diff --git a/themes/cp_app/_admin_navbar.php b/themes/cp_app/_admin_navbar.php new file mode 100644 index 00000000..aedbab7b --- /dev/null +++ b/themes/cp_app/_admin_navbar.php @@ -0,0 +1,46 @@ +
+ + 'text-2xl inline-flex items-baseline font-bold font-display', + ], +) ?> + podcasts !== []): ?> + + + +
\ No newline at end of file diff --git a/themes/cp_app/_layout.php b/themes/cp_app/_layout.php index c0c05b2c..bc8377c6 100644 --- a/themes/cp_app/_layout.php +++ b/themes/cp_app/_layout.php @@ -17,7 +17,11 @@ -
+ check()): ?> + include('_admin_navbar') ?> + + +
+ check()): ?> + include('_admin_navbar') ?> + +
-
+ check()): ?> + include('_admin_navbar') ?> + + +
+ check()): ?> + include('_admin_navbar') ?> + +
+ + + + + + + + + + renderSection('meta-tags') ?> + payment_pointer): ?> + + + + asset('styles/index.css', 'css') ?> + asset('js/podcast.ts', 'js') ?> + asset('js/audio-player.ts', 'js') ?> + + + + include('podcast/_partials/header') ?> + +
+ + renderSection('content') ?> +
+ + include('podcast/_partials/sidebar') ?> + + + + + + diff --git a/themes/cp_app/podcast/_layout.php b/themes/cp_app/podcast/_layout.php index a37e77b4..be66043a 100644 --- a/themes/cp_app/podcast/_layout.php +++ b/themes/cp_app/podcast/_layout.php @@ -22,102 +22,116 @@ ->asset('js/audio-player.ts', 'js') ?> - - include('podcast/_partials/header') ?> + +
+
+
+
+ <?= $podcast->title ?> +
+

title . ($podcast->parental_advisory === 'explicit' ? '' . lang('Common.explicit') . '' : '') ?>

+ $podcast->actor->followers_count, + ]) ?> +
+
-
-
+ +
+ +
renderSection('content') ?>
- include('podcast/_partials/sidebar') ?> - - - - -
+
diff --git a/themes/cp_app/podcast/about.php b/themes/cp_app/podcast/about.php new file mode 100644 index 00000000..436beeae --- /dev/null +++ b/themes/cp_app/podcast/about.php @@ -0,0 +1,35 @@ +extend('podcast/_layout') ?> + +section('meta-tags') ?> + + + + +<?= $podcast->title ?> + + + + + + + + + + + + + +asset('styles/index.css', 'css') ?> +endSection() ?> + +section('content') ?> + + + +endSection() +?> diff --git a/themes/cp_app/podcast/activity.php b/themes/cp_app/podcast/activity.php index 33260591..1be8aa5a 100644 --- a/themes/cp_app/podcast/activity.php +++ b/themes/cp_app/podcast/activity.php @@ -27,21 +27,7 @@ section('content') ?> - -
+
reblog_of_id !== null): ?> endSection() ?> section('content') ?> - - -
+
-

- - $activeQuery['value'], - 'episodeCount' => count($episodes), - ]) ?> - - $activeQuery['value'], - 'episodeCount' => count($episodes), - ]) ?> +
+

+ + $activeQuery['value'], + 'episodeCount' => count($episodes), +]) ?> + + $activeQuery['value'], + 'episodeCount' => count($episodes), +]) ?> + +

+ + + -

+
$episode,