[pull] main from AzuraCast:main

frontend/components/Admin/Backups/ConfigureModal.vue

@@ -20,7 +20,7 @@
             </div>
 
             <div
-                v-if="v$.backup_enabled.$model"
+                v-if="form.backup_enabled"
                 class="row g-3"
             >
                 <form-group-field

frontend/components/Admin/StorageLocations/EditModal.vue

@@ -36,14 +36,15 @@ import {
     ModalFormTemplateRef,
     useBaseEditModal
 } from "~/functions/useBaseEditModal";
-import {computed, ref} from "vue";
+import {computed, nextTick, ref, watch} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 import ModalForm from "~/components/Common/ModalForm.vue";
 import StorageLocationForm from "./Form.vue";
 import Sftp from "~/components/Admin/StorageLocations/Form/Sftp.vue";
 import S3 from "~/components/Admin/StorageLocations/Form/S3.vue";
 import Dropbox from "~/components/Admin/StorageLocations/Form/Dropbox.vue";
 import Tabs from "~/components/Common/Tabs.vue";
+import mergeExisting from "~/functions/mergeExisting.ts";
 
 interface StorageLocationsEditModalProps extends BaseEditModalProps {
     type: string
@@ -60,6 +61,7 @@ const {
     isEditMode,
     form,
     v$,
+    resetForm,
     clearContents,
     create,
     edit,
@@ -69,27 +71,21 @@ const {
     props,
     emit,
     $modal,
-    {},
     {
-        // These have to be defined here because the sub-items conditionally render.
-        dropboxAppKey: null,
-        dropboxAppSecret: null,
-        dropboxAuthToken: null,
-        s3CredentialKey: null,
-        s3CredentialSecret: null,
-        s3Region: null,
-        s3Version: 'latest',
-        s3Bucket: null,
-        s3Endpoint: null,
-        s3UsePathStyle: false,
-        sftpHost: null,
-        sftpPort: '22',
-        sftpUsername: null,
-        sftpPassword: null,
-        sftpPrivateKey: null,
-        sftpPrivateKeyPassPhrase: null,
+        adapter: {},
     },
     {
+        adapter: 'local',
+    },
+    {
+        populateForm: (data, formRef) => {
+            formRef.value.adapter = data.adapter;
+
+            nextTick(() => {
+                resetForm();
+                formRef.value = mergeExisting(formRef.value, data);
+            });
+        },
         getSubmittableFormData: (formRef, isEditModeRef) => {
             if (isEditModeRef.value) {
                 return formRef.value;
@@ -103,6 +99,21 @@ const {
     }
 );
 
+watch(
+    () => form.value.adapter,
+    () => {
+        if (!isEditMode.value) {
+            const originalForm = form.value;
+
+            nextTick(() => {
+                resetForm();
+                form.value = mergeExisting(form.value, originalForm);
+            });
+        }
+
+    }
+)
+
 const {$gettext} = useTranslate();
 
 const langTitle = computed(() => {

frontend/components/Admin/StorageLocations/Form/Dropbox.vue

@@ -87,6 +87,11 @@ const {form, v$, tabClass} = useVuelidateOnFormTab(
         dropboxAppSecret: {},
         dropboxAuthToken: {required},
     },
+    {
+        dropboxAppKey: null,
+        dropboxAppSecret: null,
+        dropboxAuthToken: null,
+    }
 );
 
 const baseAuthUrl = 'https://www.dropbox.com/oauth2/authorize';

frontend/components/Admin/StorageLocations/Form/S3.vue

@@ -79,6 +79,15 @@ const {v$, tabClass} = useVuelidateOnFormTab(
         s3Bucket: {required},
         s3Endpoint: {required},
         s3UsePathStyle: {}
+    },
+    {
+        s3CredentialKey: null,
+        s3CredentialSecret: null,
+        s3Region: null,
+        s3Version: 'latest',
+        s3Bucket: null,
+        s3Endpoint: null,
+        s3UsePathStyle: false,
     }
 );
 </script>

frontend/components/Admin/StorageLocations/Form/Sftp.vue

@@ -72,6 +72,14 @@ const {v$, tabClass} = useVuelidateOnFormTab(
         sftpPassword: {},
         sftpPrivateKey: {},
         sftpPrivateKeyPassPhrase: {}
+    },
+    {
+        sftpHost: null,
+        sftpPort: '22',
+        sftpUsername: null,
+        sftpPassword: null,
+        sftpPrivateKey: null,
+        sftpPrivateKeyPassPhrase: null,
     }
 );
 </script>

frontend/components/Common/CodemirrorTextarea.vue

@@ -9,7 +9,6 @@
 
 <script setup lang="ts">
 import CodeMirror from "vue-codemirror6";
-import {useVModel} from "@vueuse/core";
 import {computed} from "vue";
 import {css} from "@codemirror/lang-css";
 import {javascript} from "@codemirror/lang-javascript";
@@ -18,15 +17,27 @@ import {liquidsoap} from "codemirror-lang-liquidsoap";
 import useTheme from "~/functions/theme";
 
 const props = defineProps<{
-    modelValue: string | null,
+    modelValue?: string | number | null,
     mode: string
 }>();
 
 const emit = defineEmits<{
     (e: 'update:modelValue', modelValue: string | null): void
 }>();
 
-const textValue = useVModel(props, 'modelValue', emit);
+const textValue = computed({
+    get() {
+        const value = props.modelValue ?? null;
+        if (value === null) {
+            return "";
+        }
+
+        return String(value);
+    },
+    set(newValue) {
+        emit('update:modelValue', newValue);
+    }
+});
 
 const lang = computed(() => {
     switch (props.mode) {

frontend/components/Public/WebDJ/PlaylistPanel.vue

@@ -273,6 +273,7 @@ const onFileSelected = (e: Event) => {
     const eventTarget = e.target as HTMLInputElement;
 
     forEach(eventTarget.files, (file) => {
+        // @ts-expect-error Weird custom function from taglib. Don't worry about it.
         file.readTaglibMetadata((data) => {
             files.value.push({
                 file: file,
@@ -283,7 +284,12 @@ const onFileSelected = (e: Event) => {
     });
 }
 
-const selectFile = (options = {}) => {
+interface PlayOptions {
+    isAutoPlay?: boolean,
+    fileIndex?: number
+}
+
+const selectFile = (options: PlayOptions = {}) => {
     if (files.value.length === 0) {
         return;
     }
@@ -313,7 +319,12 @@ const selectFile = (options = {}) => {
     return files.value[fileIndex.value];
 };
 
-const play = (options = {}) => {
+const play = (initialOptions: PlayOptions = {}) => {
+    const options = {
+        isAutoPlay: false,
+        ...initialOptions,
+    };
+
     const file = selectFile(options);
 
     if (!file) {

frontend/components/Public/WebDJ/useWebDjSource.ts

@@ -1,5 +1,9 @@
 import {useInjectWebDjNode} from "~/components/Public/WebDJ/useWebDjNode";
 
+interface StreamAudioSourceWithStop extends MediaStreamAudioSourceNode {
+    stop?(): void
+}
+
 export function useWebDjSource() {
     const {context} = useInjectWebDjNode();
 
@@ -50,7 +54,7 @@ export function useWebDjSource() {
                 deviceId: audioDeviceId
             }
         }).then((stream) => {
-            const source = context.value.createMediaStreamSource(stream);
+            const source: StreamAudioSourceWithStop = context.value.createMediaStreamSource(stream);
             source.stop = () => {
                 const ref = stream.getAudioTracks();
                 return (ref !== null)

frontend/components/Stations/Media/EditModal.vue

@@ -165,7 +165,7 @@ const {
             reset();
         },
         populateForm: (data, form) => {
-            record.value = mergeExisting(record.value, data);
+            record.value = mergeExisting(record.value, data as typeof record.value);
 
             const newForm = mergeExisting(form.value, data);
             newForm.playlists = map(data.playlists, 'id');

frontend/components/Stations/Mounts/EditModal.vue

@@ -94,7 +94,9 @@ const {
     props,
     emit,
     $modal,
-    {},
+    {
+        intro_file: {}
+    },
     {
         intro_file: null
     },

frontend/components/Stations/Playlists/EditModal.vue

@@ -65,7 +65,9 @@ const {
     props,
     emit,
     $modal,
-    {},
+    {
+        schedule_items: {}
+    },
     {
         schedule_items: []
     },

frontend/components/Stations/Podcasts/EpisodeEditModal.vue

@@ -91,7 +91,10 @@ const {
     props,
     emit,
     $modal,
-    {},
+    {
+        artwork_file: {},
+        media_file: {}
+    },
     {
         artwork_file: null,
         media_file: null
@@ -102,7 +105,7 @@ const {
             reset();
         },
         populateForm: (data, formRef) => {
-            record.value = mergeExisting(record.value, data);
+            record.value = mergeExisting(record.value, data as typeof record.value);
             formRef.value = mergeExisting(formRef.value, data);
         },
     },

frontend/components/Stations/Podcasts/PodcastEditModal.vue

@@ -87,7 +87,9 @@ const {
     props,
     emit,
     $modal,
-    {},
+    {
+        artwork_file: {},
+    },
     {
         artwork_file: null
     },

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

@@ -39,10 +39,10 @@ const {v$, tabClass} = useVuelidateOnFormTab(
             public_custom_html: {}
         },
     },
-    {
+    () => ({
         branding_config: {
             public_custom_html: ''
         }
-    }
+    })
 );
 </script>

frontend/components/Stations/Streamers/EditModal.vue

@@ -76,7 +76,10 @@ const {
     props,
     emit,
     $modal,
-    {},
+    {
+        schedule_items: {},
+        artwork_file: {},
+    },
     {
         schedule_items: [],
         artwork_file: null
@@ -87,7 +90,7 @@ const {
             reset();
         },
         populateForm: (data, formRef) => {
-            record.value = data;
+            record.value = mergeExisting(record.value, data);
             formRef.value = mergeExisting(formRef.value, data);
         },
     },

frontend/components/Stations/Webhooks/EditModal.vue

@@ -61,6 +61,7 @@ import GetMeRadio from "~/components/Stations/Webhooks/Form/GetMeRadio.vue";
 import RadioReg from "~/components/Stations/Webhooks/Form/RadioReg.vue";
 import GroupMe from "~/components/Stations/Webhooks/Form/GroupMe.vue";
 import Bluesky from "~/components/Stations/Webhooks/Form/Bluesky.vue";
+import mergeExisting from "~/functions/mergeExisting.ts";
 
 interface WebhookEditModalProps extends BaseEditModalProps {
     nowPlayingUrl: string,
@@ -118,16 +119,21 @@ const {
     props,
     emit,
     $modal,
-    {},
-    {},
+    {
+        type: {}
+    },
+    {
+        type: null
+    },
     {
         populateForm: (data, formRef) => {
             type.value = data.type;
-            formRef.value = {
-                name: data.name,
-                triggers: data.triggers,
-                config: data.config
-            };
+
+            // Wait for type-specific components to mount.
+            nextTick(() => {
+                resetForm();
+                formRef.value = mergeExisting(formRef.value, data);
+            });
         },
         getSubmittableFormData(formRef, isEditModeRef) {
             const formData = formRef.value;
@@ -156,7 +162,7 @@ const clearContents = () => {
     originalClearContents();
 };
 
-const setType = (newType) => {
+const setType = (newType: WebhookType) => {
     type.value = newType;
     nextTick(resetForm);
 };

frontend/components/Stations/Webhooks/Form/BasicInfo.vue

@@ -24,6 +24,7 @@
                 :description="$gettext('This web hook will only run when the selected event(s) occur on this specific station.')"
             />
 
+            <!-- @vue-expect-error Vuelidate mistyping -->
             <form-group-select
                 id="form_config_rate_limit"
                 class="col-md-5"

frontend/components/Stations/Webhooks/Form/Bluesky.vue

@@ -47,11 +47,11 @@ const {form, v$, tabClass} = useVuelidateOnFormTab(
             app_password: {required}
         }
     },
-    {
+    () => ({
         config: {
             handle: '',
             app_password: ''
         }
-    }
+    })
 );
 </script>