diff --git a/frontend/components/Public/WebDJ/PlaylistPanel.vue b/frontend/components/Public/WebDJ/PlaylistPanel.vue index 229d42585b..233f916db0 100644 --- a/frontend/components/Public/WebDJ/PlaylistPanel.vue +++ b/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) { diff --git a/frontend/components/Public/WebDJ/useWebDjSource.ts b/frontend/components/Public/WebDJ/useWebDjSource.ts index 5798b485c4..5005fa4302 100644 --- a/frontend/components/Public/WebDJ/useWebDjSource.ts +++ b/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) diff --git a/frontend/components/Stations/Media/EditModal.vue b/frontend/components/Stations/Media/EditModal.vue index d977908ecc..4092548155 100644 --- a/frontend/components/Stations/Media/EditModal.vue +++ b/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'); diff --git a/frontend/components/Stations/Mounts/EditModal.vue b/frontend/components/Stations/Mounts/EditModal.vue index 4b3ce61540..ee9076fe40 100644 --- a/frontend/components/Stations/Mounts/EditModal.vue +++ b/frontend/components/Stations/Mounts/EditModal.vue @@ -94,7 +94,9 @@ const { props, emit, $modal, - {}, + { + intro_file: {} + }, { intro_file: null }, diff --git a/frontend/components/Stations/Playlists/EditModal.vue b/frontend/components/Stations/Playlists/EditModal.vue index a2aa73acb1..527f952668 100644 --- a/frontend/components/Stations/Playlists/EditModal.vue +++ b/frontend/components/Stations/Playlists/EditModal.vue @@ -65,7 +65,9 @@ const { props, emit, $modal, - {}, + { + schedule_items: {} + }, { schedule_items: [] }, diff --git a/frontend/components/Stations/Podcasts/EpisodeEditModal.vue b/frontend/components/Stations/Podcasts/EpisodeEditModal.vue index 1e33c593ac..2e4b1751d6 100644 --- a/frontend/components/Stations/Podcasts/EpisodeEditModal.vue +++ b/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); }, }, diff --git a/frontend/components/Stations/Podcasts/PodcastEditModal.vue b/frontend/components/Stations/Podcasts/PodcastEditModal.vue index 2b199aea91..cb26bc584b 100644 --- a/frontend/components/Stations/Podcasts/PodcastEditModal.vue +++ b/frontend/components/Stations/Podcasts/PodcastEditModal.vue @@ -87,7 +87,9 @@ const { props, emit, $modal, - {}, + { + artwork_file: {}, + }, { artwork_file: null }, diff --git a/frontend/components/Stations/Podcasts/PodcastForm/Branding.vue b/frontend/components/Stations/Podcasts/PodcastForm/Branding.vue index 7b152b3ec8..89d453f7b2 100644 --- a/frontend/components/Stations/Podcasts/PodcastForm/Branding.vue +++ b/frontend/components/Stations/Podcasts/PodcastForm/Branding.vue @@ -39,10 +39,10 @@ const {v$, tabClass} = useVuelidateOnFormTab( public_custom_html: {} }, }, - { + () => ({ branding_config: { public_custom_html: '' } - } + }) ); diff --git a/frontend/components/Stations/Streamers/EditModal.vue b/frontend/components/Stations/Streamers/EditModal.vue index 1f4dbd567f..daa5adbcd4 100644 --- a/frontend/components/Stations/Streamers/EditModal.vue +++ b/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); }, }, diff --git a/frontend/functions/useBaseEditModal.ts b/frontend/functions/useBaseEditModal.ts index 5f011dffa9..afab430202 100644 --- a/frontend/functions/useBaseEditModal.ts +++ b/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( props: BaseEditModalProps, emit: BaseEditModalEmits, $modal: Ref, - validations: VuelidateValidations, - blankForm: T, + validations?: VuelidateValidations, + blankForm?: VuelidateBlankForm, options: BaseEditModalOptions = {} ): { loading: Ref, diff --git a/frontend/functions/useNotify.ts b/frontend/functions/useNotify.ts index 063c3108cd..b1c1c5ebb3 100644 --- a/frontend/functions/useNotify.ts +++ b/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 + export interface ToastProps { - message: string, + message: ToastMessage, title?: string, variant?: string, } export function createToast(props: ToastProps) { - let slot; + let slot: Array; 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 = {} - ): 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 = {} - ): 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 = {} - ) => { - 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 {