revert: use basic input file for episodes audio files instead of button for better UX

replace platform visible checkbox with switch

app/Language/en/Episode.php

@@ -23,7 +23,8 @@ return [
     'go_to_page' => 'Go to page',
     'create' => 'Add an episode',
     'form' => [
-        'enclosure' => 'Choose an .mp3 or .m4a audio file…',
+        'enclosure' => 'Audio file',
+        'enclosure_hint' => 'Choose an .mp3 or .m4a audio file.',
         'info_section_title' => 'Episode info',
         'info_section_subtitle' => '',
         'image' => 'Cover image',

app/Language/fr/Episode.php

@@ -23,7 +23,8 @@ return [
     'go_to_page' => 'Voir',
     'create' => 'Ajouter un épisode',
     'form' => [
-        'enclosure' => 'Sélectionnez un fichier audio .mp3 ou .m4a…',
+        'enclosure' => 'Fichier audio',
+        'enclosure_hint' => 'Sélectionnez un fichier audio .mp3 ou .m4a.',
         'info_section_title' => 'Informations épisode',
         'info_section_subtitle' => '',
         'image' => 'Image de couverture',

app/Views/_assets/admin.ts

 import Dropdown from "./modules/Dropdown";
-import EnclosureInput from "./modules/EnclosureInput";
 import MarkdownEditor from "./modules/MarkdownEditor";
 import MultiSelect from "./modules/MultiSelect";
 import SidebarToggler from "./modules/SidebarToggler";
@@ -12,4 +11,3 @@ MarkdownEditor();
 MultiSelect();
 Slugify();
 SidebarToggler();
-EnclosureInput();

app/Views/_assets/modules/EnclosureInput.ts

-const EnclosureInput = (): void => {
-  const enclosureInput = document.querySelector(
-    ".form-enclosure-input"
-  ) as HTMLInputElement;
-
-  if (enclosureInput) {
-    const label = enclosureInput?.nextElementSibling?.querySelector(
-      "span"
-    ) as HTMLSpanElement;
-    const labelVal = label.innerHTML;
-
-    enclosureInput.addEventListener("change", (e: Event) => {
-      const fileName = (e.target as HTMLInputElement).value.split("\\").pop();
-
-      if (fileName) {
-        label.innerHTML = fileName;
-      } else {
-        label.innerHTML = labelVal;
-      }
-    });
-  }
-};
-
-export default EnclosureInput;

app/Views/_assets/styles/enclosureInput.css

-.form-enclosure-input {
-  @apply absolute w-0 h-0 opacity-0;
-}
-
-.form-enclosure-input + label {
-  @apply inline-flex items-center justify-center w-full py-2 text-lg font-semibold text-green-600 bg-white border-2 border-green-500 rounded-lg shadow cursor-pointer;
-}
-
-.form-enclosure-input:focus + label,
-.form-enclosure-input + label:hover {
-  @apply text-green-700 border-green-700 shadow-md;
-}
-
-.form-enclosure-input:focus + label {
-  @apply shadow-outline;
-}

app/Views/_assets/styles/index.css

@@ -4,5 +4,4 @@
 @import "./multiSelect.css";
 @import "./radioBtn.css";
 @import "./switch.css";
-@import "./enclosureInput.css";
 @import "./charts.css";

app/Views/admin/episode/create.php

@@ -17,24 +17,26 @@
 ]) ?>
 <?= csrf_field() ?>
 
-<div class="flex w-full mb-6">
-    <?= form_input([
-        'id' => 'enclosure',
-        'name' => 'enclosure',
-        'class' => 'form-enclosure-input',
-        'required' => 'required',
-        'type' => 'file',
-        'accept' => '.mp3,.m4a',
-    ]) ?>
-    <label for="enclosure"><?= icon('upload', 'mr-2 text-') ?>
-        <span><?= lang('Episode.form.enclosure') ?></span></label>
-</div>
-
 <?= form_section(
     lang('Episode.form.info_section_title'),
     lang('Episode.form.info_section_subtitle')
 ) ?>
 
+<?= form_label(
+    lang('Episode.form.enclosure'),
+    'enclosure',
+    [],
+    lang('Episode.form.enclosure_hint')
+) ?>
+<?= form_input([
+    'id' => 'enclosure',
+    'name' => 'enclosure',
+    'class' => 'form-input mb-4',
+    'required' => 'required',
+    'type' => 'file',
+    'accept' => '.mp3,.m4a',
+]) ?>
+
 <?= form_label(
     lang('Episode.form.image'),
     'image',
@@ -130,11 +132,7 @@
         <?= lang('Episode.form.type.trailer') ?>
     </label>
     <?= form_radio(
-        [
-            'id' => 'bonus',
-            'name' => 'type',
-            'class' => 'form-radio-btn',
-        ],
+        ['id' => 'bonus', 'name' => 'type', 'class' => 'form-radio-btn'],
         'bonus',
         old('type') ? old('type') == 'bonus' : false
     ) ?>

app/Views/admin/episode/edit.php

@@ -17,23 +17,25 @@
 ]) ?>
 <?= csrf_field() ?>
 
-<div class="flex w-full mb-6">
-    <?= form_input([
-        'id' => 'enclosure',
-        'name' => 'enclosure',
-        'class' => 'form-enclosure-input',
-        'type' => 'file',
-        'accept' => '.mp3,.m4a',
-    ]) ?>
-    <label for="enclosure"><?= icon('upload', 'mr-2 text-') ?>
-        <span><?= lang('Episode.form.enclosure') ?></span></label>
-</div>
-
 <?= form_section(
     lang('Episode.form.info_section_title'),
     lang('Episode.form.info_section_subtitle')
 ) ?>
 
+<?= form_label(
+    lang('Episode.form.enclosure'),
+    'enclosure',
+    [],
+    lang('Episode.form.enclosure_hint')
+) ?>
+<?= form_input([
+    'id' => 'enclosure',
+    'name' => 'enclosure',
+    'class' => 'form-input mb-4',
+    'type' => 'file',
+    'accept' => '.mp3,.m4a',
+]) ?>
+
 <?= form_label(
     lang('Episode.form.image'),
     'image',
@@ -134,6 +136,7 @@
     </label>
     <?= form_radio(
         ['id' => 'bonus', 'name' => 'type', 'class' => 'form-radio-btn'],
+
         'bonus',
         old('type') ? old('type') === 'bonus' : $episode->type === 'bonus'
     ) ?>

app/Views/admin/podcast/settings/platforms.php

@@ -72,21 +72,19 @@
             'type' => 'url',
             'placeholder' => 'https://...',
         ]) ?>
-        <label class="inline-flex items-center mb-4 text-sm">
-            <?= form_checkbox(
-                [
-                    'id' => $platform->name . '_visible',
-                    'name' => 'platforms[' . $platform->name . '][visible]',
-                    'class' => 'form-checkbox',
-                ],
-                'yes',
-                old(
-                    $platform->name . '_visible',
-                    $platform->visible ? $platform->visible : false
-                )
-            ) ?>
-            <span class="ml-2"><?= lang('Platforms.visible') ?></span>
-        </label>
+        <?= form_switch(
+            lang('Platforms.visible'),
+            [
+                'id' => $platform->name . '_visible',
+                'name' => 'platforms[' . $platform->name . '][visible]',
+            ],
+            'yes',
+            old(
+                $platform->name . '_visible',
+                $platform->visible ? $platform->visible : false
+            ),
+            'text-sm'
+        ) ?>
     </div>
 </div>