feat: add Noto Sans Mono font to use for durations + button to access new video clip form in list

app/Resources/styles/fonts.css

@@ -34,4 +34,13 @@
     font-display: swap;
     src: url("/fonts/inter-600.woff2") format("woff2");
   }
+
+  /* noto-sans-mono-regular */
+  @font-face {
+    font-family: "Noto Sans Mono";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url("/fonts/noto-sans-mono-regular.woff2") format("woff2");
+  }
 }

modules/Admin/Language/en/VideoClip.php

@@ -29,6 +29,7 @@ return [
     ],
     'title' => 'Video clip: {videoClipLabel}',
     'download_clip' => 'Download clip',
+    'create' => 'New video clip',
     'go_to_page' => 'Go to clip page',
     'delete' => 'Delete clip',
     'logs' => 'Job logs',

modules/Admin/Language/fr/VideoClip.php

@@ -29,6 +29,7 @@ return [
     ],
     'title' => 'Extrait vidéo : {videoClipLabel}',
     'download_clip' => 'Télécharger l’extrait',
+    'create' => 'Nouvel extrait vidéo',
     'go_to_page' => 'Aller à la page de l’extrait',
     'delete' => 'Supprimer l’extrait',
     'logs' => 'Historique d’exécution',

tailwind.config.js

@@ -23,6 +23,7 @@ module.exports = {
       fontFamily: {
         sans: ["Inter", ...defaultTheme.fontFamily.sans],
         display: ["Kumbh Sans", ...defaultTheme.fontFamily.sans],
+        mono: ["Noto Sans Mono", ...defaultTheme.fontFamily.mono],
       },
       textColor: {
         skin: {

themes/cp_admin/episode/video_clips_list.php

@@ -14,6 +14,10 @@ use CodeIgniter\I18n\Time;
 <?= lang('VideoClip.list.title') ?>
 <?= $this->endSection() ?>
 
+<?= $this->section('headerRight') ?>
+<Button uri="<?= route_to('video-clips-create', $podcast->id, $episode->id) ?>" variant="primary" iconLeft="add"><?= lang('VideoClip.create') ?></Button>
+<?= $this->endSection() ?>
+
 <?= $this->section('content') ?>
 <?= data_table(
     [
@@ -68,11 +72,11 @@ use CodeIgniter\I18n\Time;
                 if ($videoClip->job_started_at !== null) {
                     if ($videoClip->job_ended_at !== null) {
                         $duration = '<div class="flex flex-col text-xs gap-y-1">' .
-                        '<div class="inline-flex items-center gap-x-1"><Icon glyph="timer" class="text-sm text-gray-400" />' . format_duration($videoClip->job_duration, true) . '</div>' .
+                        '<div class="inline-flex items-center font-mono gap-x-1"><Icon glyph="timer" class="text-sm text-gray-400" />' . format_duration($videoClip->job_duration, true) . '</div>' .
                         '<div class="inline-flex items-center gap-x-1"><Icon glyph="calendar" class="text-sm text-gray-400" />' . relative_time($videoClip->job_ended_at) . '</div>' .
                         '</div>';
                     } else {
-                        $duration = '<div class="inline-flex items-center text-xs gap-x-1"><Icon glyph="timer" class="text-sm text-gray-400" />' . format_duration(($videoClip->job_started_at->difference(Time::now()))->getSeconds(), true) . '</div>';
+                        $duration = '<div class="inline-flex items-center font-mono text-xs gap-x-1"><Icon glyph="timer" class="text-sm text-gray-400" />' . format_duration(($videoClip->job_started_at->difference(Time::now()))->getSeconds(), true) . '</div>';
                     }
                 }