Add UI for enable and custom HTML in branding.

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "license": "AGPL-3.0",
       "dependencies": {
         "@codemirror/lang-css": "^6.0.1",
+        "@codemirror/lang-html": "^6.4.9",
         "@codemirror/lang-javascript": "^6.1.2",
         "@flowjs/flow.js": "^2.14.1",
         "@fullcalendar/bootstrap5": "^6.1.8",
@@ -231,6 +232,22 @@
         "@lezer/css": "^1.0.0"
       }
     },
+    "node_modules/@codemirror/lang-html": {
+      "version": "6.4.9",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-html/-/lang-html-6.4.9.tgz",
+      "integrity": "sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==",
+      "dependencies": {
+        "@codemirror/autocomplete": "^6.0.0",
+        "@codemirror/lang-css": "^6.0.0",
+        "@codemirror/lang-javascript": "^6.0.0",
+        "@codemirror/language": "^6.4.0",
+        "@codemirror/state": "^6.0.0",
+        "@codemirror/view": "^6.17.0",
+        "@lezer/common": "^1.0.0",
+        "@lezer/css": "^1.1.0",
+        "@lezer/html": "^1.3.0"
+      }
+    },
     "node_modules/@codemirror/lang-javascript": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.2.tgz",
@@ -932,6 +949,16 @@
         "@lezer/common": "^1.0.0"
       }
     },
+    "node_modules/@lezer/html": {
+      "version": "1.3.9",
+      "resolved": "https://registry.npmjs.org/@lezer/html/-/html-1.3.9.tgz",
+      "integrity": "sha512-MXxeCMPyrcemSLGaTQEZx0dBUH0i+RPl8RN5GwMAzo53nTsd/Unc/t5ZxACeQoyPUM5/GkPLRUs2WliOImzkRA==",
+      "dependencies": {
+        "@lezer/common": "^1.2.0",
+        "@lezer/highlight": "^1.0.0",
+        "@lezer/lr": "^1.0.0"
+      }
+    },
     "node_modules/@lezer/javascript": {
       "version": "1.4.14",
       "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.14.tgz",

frontend/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@codemirror/lang-css": "^6.0.1",
+    "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.1.2",
     "@flowjs/flow.js": "^2.14.1",
     "@fullcalendar/bootstrap5": "^6.1.8",

frontend/src/components/Common/CodemirrorTextarea.vue

@@ -13,6 +13,7 @@ import {useVModel} from "@vueuse/core";
 import {computed} from "vue";
 import {css} from "@codemirror/lang-css";
 import {javascript} from "@codemirror/lang-javascript";
+import {html} from "@codemirror/lang-html";
 import {liquidsoap} from "codemirror-lang-liquidsoap";
 import useTheme from "~/functions/theme";
 
@@ -31,6 +32,8 @@ const lang = computed(() => {
             return css();
         case 'javascript':
             return javascript();
+        case 'html':
+            return html();
         case 'liquidsoap':
             return liquidsoap();
         default:

frontend/src/components/Stations/Podcasts/PodcastEditModal.vue

@@ -10,13 +10,13 @@
     >
         <tabs>
             <podcast-form-basic-info
-                :form="form"
+                v-model:form="form"
                 :categories-options="categoriesOptions"
                 :language-options="languageOptions"
             />
 
             <podcast-form-source
-                :form="form"
+                v-model:form="form"
             />
 
             <podcast-common-artwork
@@ -24,6 +24,10 @@
                 :artwork-src="record.links.art"
                 :new-art-url="newArtUrl"
             />
+
+            <podcast-form-branding
+                v-model:form="form"
+            />
         </tabs>
     </modal-form>
 </template>
@@ -31,6 +35,7 @@
 <script setup lang="ts">
 import PodcastFormBasicInfo from './PodcastForm/BasicInfo.vue';
 import PodcastFormSource from './PodcastForm/Source.vue';
+import PodcastFormBranding from './PodcastForm/Branding.vue';
 import PodcastCommonArtwork from './Common/Artwork.vue';
 import mergeExisting from "~/functions/mergeExisting";
 import {baseEditModalProps, ModalFormTemplateRef, useBaseEditModal} from "~/functions/useBaseEditModal";
@@ -99,8 +104,11 @@ const {
                 (row) => row.category
             );
 
+
             record.value = data;
             formRef.value = mergeExisting(formRef.value, data);
+
+            console.log(formRef.value);
         },
     },
 );

frontend/src/components/Stations/Podcasts/PodcastForm/BasicInfo.vue

@@ -63,6 +63,14 @@
                 :label="$gettext('Categories')"
                 :description="$gettext('Select the category/categories that best reflects the content of your podcast.')"
             />
+
+            <form-group-checkbox
+                id="edit_form_is_enabled"
+                class="col-md-12"
+                :field="v$.is_enabled"
+                :label="$gettext('Enable on Public Pages')"
+                :description="$gettext('If disabled, the station will not be visible on public-facing pages or APIs.')"
+            />
         </div>
     </tab>
 </template>
@@ -74,6 +82,7 @@ import {useVModel} from "@vueuse/core";
 import {useVuelidateOnFormTab} from "~/functions/useVuelidateOnFormTab";
 import {required} from "@vuelidate/validators";
 import Tab from "~/components/Common/Tab.vue";
+import FormGroupCheckbox from "~/components/Form/FormGroupCheckbox.vue";
 
 const props = defineProps({
     form: {
@@ -102,6 +111,7 @@ const {v$, tabClass} = useVuelidateOnFormTab(
         author: {},
         email: {},
         categories: {required},
+        is_enabled: {},
     },
     form,
     {
@@ -112,6 +122,7 @@ const {v$, tabClass} = useVuelidateOnFormTab(
         author: '',
         email: '',
         categories: [],
+        is_enabled: true
     }
 );
 </script>

frontend/src/components/Stations/Podcasts/PodcastForm/Branding.vue

@@ -0,0 +1,55 @@
+<template>
+    <tab
+        :label="$gettext('Branding')"
+        :item-header-class="tabClass"
+    >
+        <div class="row g-3">
+            <form-group-field
+                id="edit_form_public_custom_html"
+                class="col-md-12"
+                :field="v$.branding_config.public_custom_html"
+                :label="$gettext('Custom HTML for Public Pages')"
+            >
+                <template #default="slotProps">
+                    <codemirror-textarea
+                        :id="slotProps.id"
+                        v-model="slotProps.field.$model"
+                        mode="html"
+                    />
+                </template>
+            </form-group-field>
+        </div>
+    </tab>
+</template>
+
+<script setup lang="ts">
+import {useVModel} from "@vueuse/core";
+import {useVuelidateOnFormTab} from "~/functions/useVuelidateOnFormTab";
+import Tab from "~/components/Common/Tab.vue";
+import CodemirrorTextarea from "~/components/Common/CodemirrorTextarea.vue";
+import FormGroupField from "~/components/Form/FormGroupField.vue";
+
+const props = defineProps({
+    form: {
+        type: Object,
+        required: true
+    }
+});
+
+const emit = defineEmits(['update:form']);
+const form = useVModel(props, 'form', emit);
+
+const {v$, tabClass} = useVuelidateOnFormTab(
+    {
+        branding_config: {
+            public_custom_html: {}
+        },
+    },
+    form,
+    {
+        branding_config: {
+            public_custom_html: ''
+        }
+    }
+);
+</script>