More little TS fixes.

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/functions/useBaseEditModal.ts

@@ -2,7 +2,12 @@ import {computed, ComputedRef, nextTick, Ref, ref, toRef} from "vue";
 import mergeExisting from "~/functions/mergeExisting";
 import {useNotify} from "~/functions/useNotify";
 import {useAxios} from "~/vendor/axios";
-import {useVuelidateOnForm, VuelidateRef, VuelidateValidations} from "~/functions/useVuelidateOnForm";
+import {
+    useVuelidateOnForm,
+    VuelidateBlankForm,
+    VuelidateRef,
+    VuelidateValidations
+} from "~/functions/useVuelidateOnForm";
 import ModalForm from "~/components/Common/ModalForm.vue";
 import {AxiosRequestConfig} from "axios";
 import {GlobalConfig} from "@vuelidate/core";
@@ -40,8 +45,8 @@ export function useBaseEditModal<T extends GenericForm = GenericForm>(
     props: BaseEditModalProps,
     emit: BaseEditModalEmits,
     $modal: Ref<ModalFormTemplateRef>,
-    validations: VuelidateValidations<T>,
-    blankForm: T,
+    validations?: VuelidateValidations<T>,
+    blankForm?: VuelidateBlankForm<T>,
     options: BaseEditModalOptions<T> = {}
 ): {
     loading: Ref<boolean>,

frontend/functions/useNotify.ts

@@ -5,17 +5,19 @@ import {default as BSToast} from 'bootstrap/js/src/toast';
 import Toast from '~/components/Common/Toast.vue';
 import {currentVueInstance} from "~/vendor/vueInstance";
 
+type ToastMessage = string | Array<any>
+
 export interface ToastProps {
-    message: string,
+    message: ToastMessage,
     title?: string,
     variant?: string,
 }
 
 export function createToast(props: ToastProps) {
-    let slot;
+    let slot: Array<any>;
     if (Array.isArray(props.message)) {
         slot = props.message
-        delete props.message
+        props.message = "";
     }
 
     const defaultSlot = () => {
@@ -39,9 +41,9 @@ export function useNotify() {
     const {$gettext} = useTranslate();
 
     const notify = (
-        message: string = null,
+        message: ToastMessage = null,
         options: Partial<ToastProps> = {}
-    ): void => {
+    ): ToastMessage => {
         if (document.hidden) {
             return;
         }
@@ -51,40 +53,34 @@ export function useNotify() {
             message
         });
         toast.show();
+
+        return message;
     };
 
     const notifyError = (
-        message: string = null,
+        message: ToastMessage = null,
         options: Partial<ToastProps> = {}
-    ): void => {
-        if (message === null) {
-            message = $gettext('An error occurred and your request could not be completed.');
-        }
+    ): ToastMessage => {
+        message ??= $gettext('An error occurred and your request could not be completed.');
 
         const defaults = {
             variant: 'danger'
         };
 
-        notify(message, {...defaults, ...options});
-
-        return message;
+        return notify(message, {...defaults, ...options});
     };
 
     const notifySuccess = (
-        message: string = null,
+        message: ToastMessage = null,
         options: Partial<ToastProps> = {}
-    ) => {
-        if (message === null) {
-            message = $gettext('Changes saved.');
-        }
+    ): ToastMessage => {
+        message ??= $gettext('Changes saved.');
 
         const defaults = {
             variant: 'success'
         };
 
-        notify(message, {...defaults, ...options});
-
-        return message;
+        return notify(message, {...defaults, ...options});
     };
 
     return {