More TS bugfixes.

frontend/components/Admin/Stations/Form/ProfileForm.vue

@@ -151,7 +151,7 @@ const emit = defineEmits<FormTabEmits>();
 
 const {enableAdvancedFeatures} = useAzuraCast();
 
-const {v$, tabClass} = useVuelidateOnFormTab(
+const {form, v$, tabClass} = useVuelidateOnFormTab(
     props,
     emit,
     computed(() => {

frontend/components/Admin/Users.vue

@@ -87,9 +87,10 @@ import useConfirmAndDelete from "~/functions/useConfirmAndDelete";
 import CardPage from "~/components/Common/CardPage.vue";
 import {getApiUrl} from "~/router";
 import AddButton from "~/components/Common/AddButton.vue";
+import {ComponentExposed} from "vue-component-type-helpers";
 
 const props = defineProps<{
-    roles: object, // TODO
+    roles: Record<number, string>,
 }>();
 
 const listUrl = getApiUrl('/admin/users');
@@ -105,7 +106,7 @@ const fields: DataTableField[] = [
 const $datatable = ref<DataTableTemplateRef>(null);
 const {relist} = useHasDatatable($datatable);
 
-const $editModal = ref<InstanceType<EditModal> | null>(null);
+const $editModal = ref<ComponentExposed<typeof EditModal> | null>(null);
 const {doCreate, doEdit} = useHasEditModal($editModal);
 
 const {doDelete} = useConfirmAndDelete(

frontend/components/Admin/Users/EditModal.vue

@@ -30,7 +30,7 @@ import {useTranslate} from "~/vendor/gettext";
 import ModalForm from "~/components/Common/ModalForm.vue";
 
 interface UsersEditModalProps extends BaseEditModalProps {
-    roles: object
+    roles: Record<number, string>
 }
 
 const props = defineProps<UsersEditModalProps>();

frontend/components/Admin/menu.ts

@@ -1,13 +1,13 @@
 import {useTranslate} from "~/vendor/gettext.ts";
 import {GlobalPermission, userAllowed} from "~/acl.ts";
-import filterMenu, {MenuCategory, ReactiveMenu} from "~/functions/filterMenu.ts";
+import filterMenu, {MenuCategory} from "~/functions/filterMenu.ts";
 import {computed, reactive} from "vue";
 import {IconGroups, IconRadio, IconRouter} from "~/components/Common/icons.ts";
 
-export function useAdminMenu(): ReactiveMenu {
+export function useAdminMenu(): MenuCategory[] {
     const {$gettext} = useTranslate();
 
-    const menu: ReactiveMenu = reactive<Array<MenuCategory>>([
+    const menu: MenuCategory[] = reactive([
         {
             key: 'maintenance',
             label: computed(() => $gettext('System Maintenance')),

frontend/components/Common/Charts/ChartAltValues.vue

@@ -26,9 +26,9 @@
 </template>
 
 <script setup lang="ts">
-import ChartAltValues from "~/components/Common/Charts/ChartAltValues.vue";
+import {ChartAltData} from "~/functions/useChart.ts";
 
 const props = defineProps<{
-    alt: ChartAltValues[]
+    alt: ChartAltData[]
 }>();
 </script>

frontend/components/Common/DateRangeDropdown.vue

@@ -39,7 +39,7 @@ export interface DateRange {
 
 const props = defineProps<{
     options?: Partial<VueDatePickerProps>,
-    modelValue: DateRange
+    modelValue?: DateRange
 }>();
 
 const emit = defineEmits(['update:modelValue']);
@@ -69,11 +69,7 @@ const dateRange = computed({
 const {$gettext} = useTranslate();
 
 const ranges = computed(() => {
-    let nowTz = DateTime.now();
-    if (props.options?.timezone) {
-        nowTz = nowTz.setZone(props.options.timezone);
-    }
-
+    const nowTz = DateTime.now().setZone(props.options?.timezone ?? "UTC");
     const nowAtMidnightDate = nowTz.endOf('day').toJSDate();
 
     return [

frontend/components/Form/useFormField.ts

@@ -37,13 +37,13 @@ export function useFormField<T = ModelFormField>(
 
     const model: WritableComputedRef<T, T> = computed({
         get() {
-            return (field !== undefined)
-                ? field.$model
+            return (props.field !== undefined)
+                ? props.field.$model
                 : props.modelValue;
         },
         set(newValue) {
-            if (field !== undefined) {
-                field.$model = newValue;
+            if (props.field !== undefined) {
+                props.field.$model = newValue;
             } else {
                 emit('update:modelValue', newValue);
             }
@@ -66,7 +66,7 @@ export function useFormField<T = ModelFormField>(
 
     const isRequired = computed(() => {
         if (props.required) {
-            return required;
+            return props.required;
         }
 
         return (props.field !== undefined)

frontend/components/Public/FullPlayer.vue

@@ -66,12 +66,13 @@ import SongHistoryModal from './FullPlayer/SongHistoryModal.vue';
 import RequestModal from './FullPlayer/RequestModal.vue';
 import Icon from '~/components/Common/Icon.vue';
 import RadioPlayer from './Player.vue';
-import {ref} from "vue";
+import {ref, shallowRef} from "vue";
 import Lightbox from "~/components/Common/Lightbox.vue";
 import {LightboxTemplateRef, useProvideLightbox} from "~/vendor/lightbox";
 import {IconDownload, IconHelp, IconHistory} from "~/components/Common/icons";
 import {RequestsProps} from "~/components/Public/Requests.vue";
 import {PlayerProps} from "~/components/Public/Player.vue";
+import {ApiNowPlayingSongHistory} from "~/entities/ApiInterfaces.ts";
 
 interface FullPlayerProps extends PlayerProps, RequestsProps {
     stationName: string,
@@ -86,7 +87,7 @@ const props = withDefaults(
     }
 );
 
-const history = ref({});
+const history = shallowRef<ApiNowPlayingSongHistory[]>([]);
 
 const onNowPlayingUpdate = (newNowPlaying) => {
     history.value = newNowPlaying?.song_history;

frontend/components/Public/History.vue

@@ -30,6 +30,6 @@ const props = withDefaults(
 const {np} = useNowPlaying(props);
 
 const history = computed(() => {
-    return np.value.song_history ?? {};
+    return np.value.song_history ?? [];
 });
 </script>

frontend/components/Public/OnDemand.vue

@@ -62,15 +62,21 @@ import AlbumArt from "~/components/Common/AlbumArt.vue";
 import {IconDownload} from "~/components/Common/icons";
 import FullHeightCard from "~/components/Public/FullHeightCard.vue";
 
+interface OnDemandCustomField {
+    display_key: string,
+    key: string,
+    label: string,
+}
+
 const props = withDefaults(
     defineProps<{
         listUrl: string,
         stationName: string,
-        customFields?: object,
+        customFields?: OnDemandCustomField[],
         showDownloadButton?: boolean
     }>(),
     {
-        customFields: () => ({}),
+        customFields: () => ([]),
         showDownloadButton: false,
     }
 );

frontend/components/Public/Player.vue

@@ -160,6 +160,7 @@ import usePlayerVolume from "~/functions/usePlayerVolume";
 import {usePlayerStore} from "~/functions/usePlayerStore.ts";
 import {useEventListener} from "@vueuse/core";
 import useShowVolume from "~/functions/useShowVolume.ts";
+import {ApiNowPlaying} from "~/entities/ApiInterfaces.ts";
 
 defineOptions({
     inheritAttrs: false
@@ -174,7 +175,9 @@ const props = withDefaults(
     }
 );
 
-const emit = defineEmits(['np_updated']);
+const emit = defineEmits<{
+    (e: 'np_updated', np: ApiNowPlaying)
+}>();
 
 const {
     np,
@@ -274,7 +277,7 @@ onMounted(() => {
     document.dispatchEvent(new CustomEvent("player-ready"));
 });
 
-const onNowPlayingUpdated = (np_new) => {
+const onNowPlayingUpdated = (np_new: ApiNowPlaying) => {
     emit('np_updated', np_new);
 
     // Set a "default" current stream if none exists.

frontend/components/Public/Podcasts/Podcast.vue

@@ -183,6 +183,7 @@ import useStationDateTimeFormatter from "~/functions/useStationDateTimeFormatter
 import PodcastCommon from "./PodcastCommon.vue";
 import GridLayout from "~/components/Common/GridLayout.vue";
 import {usePodcastGroupLayout} from "~/components/Public/Podcasts/usePodcastGroupLayout.ts";
+import {ApiPodcast, ApiPodcastEpisode} from "~/entities/ApiInterfaces.ts";
 
 const {groupLayout} = usePodcastGroupLayout();
 
@@ -191,15 +192,15 @@ const {params} = useRoute();
 const podcastUrl = getStationApiUrl(`/public/podcast/${params.podcast_id}`);
 
 const {axios} = useAxios();
-const {state: podcast, isLoading} = useRefreshableAsyncState(
+const {state: podcast, isLoading} = useRefreshableAsyncState<ApiPodcast>(
     () => axios.get(podcastUrl.value).then((r) => r.data),
     {},
 );
 
 const episodesUrl = getStationApiUrl(`/public/podcast/${params.podcast_id}/episodes`);
 
 const {$gettext} = useTranslate();
-const fields: DataTableField[] = [
+const fields: DataTableField<ApiPodcastEpisode>[] = [
     {key: 'play_button', label: '', sortable: false, class: 'shrink pe-0'},
     {key: 'art', label: '', sortable: false, class: 'shrink pe-0'},
     {key: 'title', label: $gettext('Episode'), sortable: true},

frontend/components/Public/Podcasts/PodcastList.vue

@@ -126,14 +126,15 @@ import {IconRss} from "~/components/Common/icons.ts";
 import Icon from "~/components/Common/Icon.vue";
 import {usePodcastGroupLayout} from "~/components/Public/Podcasts/usePodcastGroupLayout.ts";
 import GridLayout from "~/components/Common/GridLayout.vue";
+import {ApiPodcast} from "~/entities/ApiInterfaces.ts";
 
 const {groupLayout} = usePodcastGroupLayout();
 
 const apiUrl = getStationApiUrl('/public/podcasts');
 
 const {$gettext} = useTranslate();
 
-const fields: DataTableField[] = [
+const fields: DataTableField<ApiPodcast>[] = [
     {key: 'art', label: '', sortable: false, class: 'shrink pe-0'},
     {key: 'title', label: $gettext('Podcast'), sortable: true},
     {key: 'actions', label: $gettext('Actions'), sortable: false, class: 'shrink'}

frontend/components/Stations/Media/Form/CustomFields.vue

@@ -14,9 +14,10 @@
 <script setup lang="ts">
 import FormGroupField from "~/components/Form/FormGroupField.vue";
 import {VuelidateObject} from "~/functions/useVuelidateOnForm.ts";
+import {CustomField} from "~/entities/ApiInterfaces.ts";
 
 const props = defineProps<{
     form: VuelidateObject,
-    customFields: object, // TODO
+    customFields: CustomField[],
 }>();
 </script>

frontend/components/Stations/Media/MoveFilesModal.vue

@@ -118,7 +118,7 @@ const fields: DataTableField[] = [
 const langHeader = computed(() => {
     return $gettext(
         'Move %{num} File(s) to',
-        {num: props.selectedItems.all.length}
+        {num: String(props.selectedItems.all.length)}
     );
 });
 

frontend/components/Stations/Media/NewDirectoryModal.vue

@@ -48,6 +48,7 @@ import {useTranslate} from "~/vendor/gettext";
 import Modal from "~/components/Common/Modal.vue";
 import InvisibleSubmitButton from "~/components/Common/InvisibleSubmitButton.vue";
 import {ModalTemplateRef, useHasModal} from "~/functions/useHasModal.ts";
+import {ComponentExposed} from "vue-component-type-helpers";
 
 const props = defineProps<{
     currentDirectory: string,
@@ -72,7 +73,7 @@ const onHidden = () => {
     resetForm();
 }
 
-const $field = ref<InstanceType<typeof FormGroupField> | null>(null);
+const $field = ref<ComponentExposed<typeof FormGroupField> | null>(null);
 
 const onShown = () => {
     nextTick(() => {

frontend/components/Stations/Media/RenameModal.vue

@@ -46,6 +46,7 @@ import {useAxios} from "~/vendor/axios";
 import Modal from "~/components/Common/Modal.vue";
 import InvisibleSubmitButton from "~/components/Common/InvisibleSubmitButton.vue";
 import {ModalTemplateRef, useHasModal} from "~/functions/useHasModal.ts";
+import {ComponentExposed} from "vue-component-type-helpers";
 
 const props = defineProps<{
     renameUrl: string
@@ -74,7 +75,7 @@ const open = (filePath: string): void => {
     show();
 }
 
-const $field = ref<InstanceType<typeof FormGroupField> | null>(null);
+const $field = ref<ComponentExposed<typeof FormGroupField> | null>(null);
 
 const onShown = () => {
     nextTick(() => {

frontend/components/Stations/Playlists/Form/ScheduleRow.vue

@@ -114,9 +114,18 @@ import FormGroupMultiCheck from "~/components/Form/FormGroupMultiCheck.vue";
 import TimeZone from "~/components/Stations/Common/TimeZone.vue";
 import {IconRemove} from "~/components/Common/icons";
 
+interface PlaylistScheduleRow {
+    start_time: number,
+    end_time: number,
+    start_date: string,
+    end_date: string,
+    days: number[],
+    loop_once: boolean,
+}
+
 const props = defineProps<{
     index: number,
-    row: object
+    row: PlaylistScheduleRow
 }>();
 
 const emit = defineEmits(['remove']);

frontend/components/Stations/Profile/HeaderPanel.vue

@@ -52,13 +52,14 @@ import Icon from '~/components/Common/Icon.vue';
 import PlayButton from "~/components/Common/PlayButton.vue";
 import {StationPermission, userAllowedForStation} from "~/acl";
 import {IconEdit} from "~/components/Common/icons";
+import {ApiNowPlayingStation} from "~/entities/ApiInterfaces.ts";
 
 defineOptions({
     inheritAttrs: false
 });
 
 interface ProfileHeaderPanelProps extends ProfileHeaderPanelParentProps {
-    station: object
+    station: ApiNowPlayingStation
 }
 
 const props = defineProps<ProfileHeaderPanelProps>();

frontend/components/Stations/Profile/UpdateMetadataModal.vue

@@ -66,6 +66,7 @@ import InvisibleSubmitButton from "~/components/Common/InvisibleSubmitButton.vue
 import {ModalTemplateRef, useHasModal} from "~/functions/useHasModal.ts";
 import {getStationApiUrl} from "~/router.ts";
 import InfoCard from "~/components/Common/InfoCard.vue";
+import {ComponentExposed} from "vue-component-type-helpers";
 
 const updateMetadataUrl = getStationApiUrl('/nowplaying/update');
 
@@ -87,7 +88,7 @@ const onHidden = () => {
     resetForm();
 }
 
-const $field = ref<InstanceType<typeof FormGroupField> | null>(null);
+const $field = ref<ComponentExposed<typeof FormGroupField> | null>(null);
 
 const onShown = () => {
     nextTick(() => {

frontend/components/Stations/Reports/Listeners/MapPoint.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 import {inject, onUnmounted, ref, ShallowRef, watch} from 'vue';
-import {LatLngTuple, Map, marker} from 'leaflet';
+import {LatLngTuple, Map, marker, Popup} from 'leaflet';
 
 const props = defineProps<{
     position: LatLngTuple
@@ -18,7 +18,7 @@ const map = $map.value;
 const mapMarker = marker(props.position);
 mapMarker.addTo(map);
 
-const popup = new L.Popup();
+const popup = new Popup();
 const $content = ref<HTMLDivElement | null>(null);
 
 watch(

frontend/components/Stations/Streamers/Form/ScheduleRow.vue

@@ -113,9 +113,17 @@ import FormGroupMultiCheck from "~/components/Form/FormGroupMultiCheck.vue";
 import TimeZone from "~/components/Stations/Common/TimeZone.vue";
 import {IconRemove} from "~/components/Common/icons";
 
+interface PlaylistScheduleRow {
+    start_time: number,
+    end_time: number,
+    start_date: string,
+    end_date: string,
+    days: number[],
+}
+
 const props = defineProps<{
     index: number,
-    row: object,
+    row: PlaylistScheduleRow,
 }>();
 
 const emit = defineEmits(['remove']);