Initial Typescript impl.

frontend/npm-shrinkwrap.json

@@ -78,6 +78,11 @@
         "webpack-assets-manifest": "^5",
         "webpack-cli": "^5",
         "zxcvbn": "^4.4.2"
+      },
+      "devDependencies": {
+        "@types/lodash": "^4.14.191",
+        "@types/luxon": "^3.1.0",
+        "@types/store": "^2.0.2"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -2098,6 +2103,18 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.191",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
+      "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
+      "dev": true
+    },
+    "node_modules/@types/luxon": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.1.0.tgz",
+      "integrity": "sha512-gCd/HcCgjqSxfMrgtqxCgYk/22NBQfypwFUG7ZAyG/4pqs51WLTcUzVp1hqTbieDYeHS3WoVEh2Yv/2l+7B0Vg==",
+      "dev": true
+    },
     "node_modules/@types/minimatch": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz",
@@ -2118,6 +2135,12 @@
       "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-5.0.3.tgz",
       "integrity": "sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw=="
     },
+    "node_modules/@types/store": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/store/-/store-2.0.2.tgz",
+      "integrity": "sha512-ZPHnXkzmGMfk+pHqAGzTSpA9CbsHmJLgkvOl5w52LZ0XTxB1ZIHWZzQ7lEtjTNWScBbsQekg8TjApMXkMe4nkw==",
+      "dev": true
+    },
     "node_modules/@types/vinyl": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/vinyl/-/vinyl-2.0.7.tgz",
@@ -12607,6 +12630,18 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
     },
+    "@types/lodash": {
+      "version": "4.14.191",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
+      "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ==",
+      "dev": true
+    },
+    "@types/luxon": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.1.0.tgz",
+      "integrity": "sha512-gCd/HcCgjqSxfMrgtqxCgYk/22NBQfypwFUG7ZAyG/4pqs51WLTcUzVp1hqTbieDYeHS3WoVEh2Yv/2l+7B0Vg==",
+      "dev": true
+    },
     "@types/minimatch": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-5.1.2.tgz",
@@ -12627,6 +12662,12 @@
       "resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-5.0.3.tgz",
       "integrity": "sha512-kUNnecmtkunAoQ3CnjmMkzNU/gtxG8guhi+Fk2U/kOpIKjIMKnXGp4IJCgQJrXSgMsWYimYG4TGjz/UzbGEBTw=="
     },
+    "@types/store": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/store/-/store-2.0.2.tgz",
+      "integrity": "sha512-ZPHnXkzmGMfk+pHqAGzTSpA9CbsHmJLgkvOl5w52LZ0XTxB1ZIHWZzQ7lEtjTNWScBbsQekg8TjApMXkMe4nkw==",
+      "dev": true
+    },
     "@types/vinyl": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/vinyl/-/vinyl-2.0.7.tgz",

frontend/package.json

@@ -79,5 +79,10 @@
     "webpack-assets-manifest": "^5",
     "webpack-cli": "^5",
     "zxcvbn": "^4.4.2"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.191",
+    "@types/luxon": "^3.1.0",
+    "@types/store": "^2.0.2"
   }
 }

frontend/tsconfig.json

@@ -26,7 +26,9 @@
     "types": []
   },
   "include": [
-    "vue/**/*.ts"
+    "vue/**/*.ts",
+    "vue/**/*.vue",
+    "vue/**/*.js"
   ],
   "exclude": [
     "node_modules"

frontend/vue/components/Account/ApiKeyNewKey.vue

@@ -27,8 +27,8 @@
     </p>
 </template>
 
-<script setup>
+<script setup lang="ts">
-import CopyToClipboardButton from "~/components/Common/CopyToClipboardButton";
+import CopyToClipboardButton from "~/components/Common/CopyToClipboardButton.vue";
 
 const props = defineProps({
     newKey: String

frontend/vue/components/Admin/ApiKeys.vue

@@ -19,8 +19,8 @@
     </section>
 </template>
 
-<script setup>
+<script setup lang="ts">
-import DataTable from "~/components/Common/DataTable";
+import DataTable from "~/components/Common/DataTable.vue";
 import {ref} from "vue";
 import {useSweetAlert} from "~/vendor/sweetalert";
 import {useNotify} from "~/vendor/bootstrapVue";
@@ -31,22 +31,29 @@ const props = defineProps({
     apiUrl: String
 });
 
+const {$gettext} = useTranslate();
+
 const fields = ref([
     {
         key: 'comment',
         isRowHeader: true,
-        label: this.$gettext('API Key Description/Comments'),
+        label: $gettext('API Key Description/Comments'),
         sortable: false
     },
     {
         key: 'owner',
-        label: this.$gettext('Owner'),
+        label: $gettext('Owner'),
         sortable: false
     },
-    {key: 'actions', label: this.$gettext('Actions'), sortable: false, class: 'shrink'}
+    {
+        key: 'actions',
+        label: $gettext('Actions'),
+        sortable: false,
+        class: 'shrink'
+    }
 ]);
 
-const datatable = ref(); // Datatable
+const datatable = ref<InstanceType<typeof DataTable>>();
 
 const relist = () => {
     datatable.value.relist();
@@ -55,22 +62,19 @@ const relist = () => {
 const {confirmDelete} = useSweetAlert();
 const {wrapWithLoading, notifySuccess} = useNotify();
 const {axios} = useAxios();
-const {$gettext} = useTranslate();
 
 const doDelete = (url) => {
     confirmDelete({
-        title: this.$gettext('Delete API Key?'),
+        title: $gettext('Delete API Key?'),
     }).then((result) => {
         if (result.value) {
-            this.$wrapWithLoading(
+            wrapWithLoading(
-                this.axios.delete(url)
+                axios.delete(url)
             ).then((resp) => {
-                this.$notifySuccess(resp.data.message);
+                notifySuccess(resp.data.message);
-                this.relist();
+                relist();
             });
         }
     });
 }
-
-
 </script>

frontend/vue/components/Admin/AuditLog.vue

@@ -84,7 +84,7 @@ pre.changes {
 }
 </style>
 
-<script setup>
+<script setup lang="ts">
 import {DateTime} from "luxon";
 import {computed, ref} from "vue";
 import {useTranslate} from "~/vendor/gettext";

frontend/vue/components/Admin/Backups.vue

@@ -107,14 +107,14 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
-import Icon from "~/components/Common/Icon";
+import Icon from "~/components/Common/Icon.vue";
-import DataTable from "~/components/Common/DataTable";
+import DataTable from "~/components/Common/DataTable.vue";
-import AdminBackupsLastOutputModal from "./Backups/LastOutputModal";
+import AdminBackupsLastOutputModal from "./Backups/LastOutputModal.vue";
 import {DateTime} from 'luxon';
 import formatFileSize from "~/functions/formatFileSize";
-import AdminBackupsConfigureModal from "~/components/Admin/Backups/ConfigureModal";
+import AdminBackupsConfigureModal from "~/components/Admin/Backups/ConfigureModal.vue";
-import AdminBackupsRunBackupModal from "~/components/Admin/Backups/RunBackupModal";
+import AdminBackupsRunBackupModal from "~/components/Admin/Backups/RunBackupModal.vue";
 import EnabledBadge from "~/components/Common/Badges/EnabledBadge.vue";
 import {useAzuraCast} from "~/vendor/azuracast";
 import {onMounted, ref} from "vue";
@@ -131,7 +131,7 @@ const props = defineProps({
     isDocker: Boolean,
 });
 
-const settingsLoading = ref(false);
+const settingsLoading = ref<Boolean>(false);
 
 const blankSettings = {
     backupEnabled: false,
@@ -168,7 +168,7 @@ const fields = [
     }
 ];
 
-const datatable = ref(); // Template Ref
+const datatable = ref<InstanceType<typeof DataTable>>();
 
 const {wrapWithLoading, notifySuccess} = useNotify();
 const {axios} = useAxios();
@@ -203,17 +203,17 @@ const toLocaleTime = (timestamp) => {
     );
 };
 
-const lastOutputModal = ref(); // Template Ref
+const lastOutputModal = ref<InstanceType<typeof AdminBackupsLastOutputModal>>();
 const showLastOutput = () => {
     lastOutputModal.value.show();
 };
 
-const configureModal = ref(); // Template Ref
+const configureModal = ref<InstanceType<typeof AdminBackupsConfigureModal>>();
 const doConfigure = () => {
     configureModal.value.open();
 };
 
-const runBackupModal = ref(); // Template Ref
+const runBackupModal = ref<InstanceType<typeof AdminBackupsRunBackupModal>>();
 const doRunBackup = () => {
     runBackupModal.value.open();
 };

frontend/vue/components/Admin/Backups/ConfigureModal.vue

@@ -1,6 +1,6 @@
 <template>
     <modal-form ref="modal" size="lg" :title="$gettext('Configure Backups')" :loading="loading"
-                :disable-save-button="v$.$invalid" @submit="submit" @hidden="clearContents">
+                :disable-save-button="v$.$invalid" @submit="submit" @hidden="resetForm">
         <b-form-fieldset>
             <div class="form-row mb-3">
                 <b-wrapped-form-checkbox class="col-md-12" id="form_edit_backup_enabled"
@@ -78,18 +78,18 @@
     </modal-form>
 </template>
 
-<script setup>
+<script setup lang="ts">
-import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
+import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup.vue";
-import ModalForm from "~/components/Common/ModalForm";
+import ModalForm from "~/components/Common/ModalForm.vue";
-import BFormFieldset from "~/components/Form/BFormFieldset";
+import BFormFieldset from "~/components/Form/BFormFieldset.vue";
-import mergeExisting from "~/functions/mergeExisting";
+import mergeExisting from "~/functions/mergeExisting.js";
-import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
+import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox.vue";
-import TimeCode from "~/components/Common/TimeCode";
+import TimeCode from "~/components/Common/TimeCode.vue";
-import objectToFormOptions from "~/functions/objectToFormOptions";
+import objectToFormOptions from "~/functions/objectToFormOptions.js";
 import {computed, ref} from "vue";
 import {useAxios} from "~/vendor/axios";
 import {useNotify} from "~/vendor/bootstrapVue";
-import useVuelidate from "@vuelidate/core";
+import {useVuelidateOnForm} from "~/components/Form/UseVuelidateOnForm";
 
 const props = defineProps({
     settingsUrl: String,
@@ -98,23 +98,29 @@ const props = defineProps({
 
 const emit = defineEmits(['relist']);
 
-const loading = ref(true);
+const loading = ref<Boolean>(true);
-const error = ref(null);
+const error = ref<string | null>(null);
 
-const form = ref({});
+const modal = ref<InstanceType<typeof ModalForm>>();
 
-const modal = ref(); // Template Ref
+const {form, resetForm, v$} = useVuelidateOnForm(
-
+    {
-const validations = {
+        'backup_enabled': {},
-    'backup_enabled': {},
+        'backup_time_code': {},
-    'backup_time_code': {},
+        'backup_exclude_media': {},
-    'backup_exclude_media': {},
+        'backup_keep_copies': {},
-    'backup_keep_copies': {},
+        'backup_storage_location': {},
-    'backup_storage_location': {},
+        'backup_format': {},
-    'backup_format': {},
+    },
-};
+    {
-
+        backup_enabled: false,
-const v$ = useVuelidate(validations, form);
+        backup_time_code: null,
+        backup_exclude_media: null,
+        backup_keep_copies: null,
+        backup_storage_location: null,
+        backup_format: null,
+    }
+);
 
 const storageLocationOptions = computed(() => {
     return objectToFormOptions(props.storageLocations);
@@ -137,19 +143,6 @@ const formatOptions = computed(() => {
     ];
 });
 
-const clearContents = () => {
-    v$.value.$reset();
-
-    form.value = {
-        backup_enabled: false,
-        backup_time_code: null,
-        backup_exclude_media: null,
-        backup_keep_copies: null,
-        backup_storage_location: null,
-        backup_format: null,
-    };
-};
-
 const {axios} = useAxios();
 
 const close = () => {
@@ -158,7 +151,7 @@ const close = () => {
 };
 
 const open = () => {
-    clearContents();
+    resetForm();
     loading.value = true;
 
     modal.value.show();

frontend/vue/components/Admin/Backups/LastOutputModal.vue

@@ -5,7 +5,7 @@
     </b-modal>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import {ref} from "vue";
 
 const props = defineProps({

frontend/vue/components/Admin/Backups/RunBackupModal.vue

@@ -79,17 +79,18 @@
     </b-modal>
 </template>
 
-<script setup>
+<script setup lang="ts">
-import BFormFieldset from "~/components/Form/BFormFieldset";
+import BFormFieldset from "~/components/Form/BFormFieldset.vue";
-import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
+import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup.vue";
-import InvisibleSubmitButton from "~/components/Common/InvisibleSubmitButton";
+import InvisibleSubmitButton from "~/components/Common/InvisibleSubmitButton.vue";
-import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
+import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox.vue";
 import objectToFormOptions from "~/functions/objectToFormOptions";
-import StreamingLogView from "~/components/Common/StreamingLogView";
+import StreamingLogView from "~/components/Common/StreamingLogView.vue";
 import {computed, ref} from "vue";
 import {useNotify} from "~/vendor/bootstrapVue";
 import {useAxios} from "~/vendor/axios";
 import {useVuelidateOnForm} from "~/components/Form/UseVuelidateOnForm";
+import {BModal} from "bootstrap-vue";
 
 const props = defineProps({
     runBackupUrl: String,
@@ -104,7 +105,7 @@ const storageLocationOptions = computed(() => {
 
 const logUrl = ref(null);
 const error = ref(null);
-const modal = ref(); // BModal
+const modal = ref<InstanceType<typeof BModal>>();
 
 const {form, resetForm, v$} = useVuelidateOnForm(
     {

frontend/vue/components/Admin/Branding.vue

@@ -26,9 +26,9 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
-import CustomAssetForm from "./Branding/CustomAssetForm";
+import CustomAssetForm from "./Branding/CustomAssetForm.vue";
-import BrandingForm from "./Branding/BrandingForm";
+import BrandingForm from "./Branding/BrandingForm.vue";
 
 const props = defineProps({
     settingsApiUrl: String,

frontend/vue/components/Admin/CustomFields.vue

@@ -43,11 +43,11 @@
                 @relist="relist"></edit-modal>
 </template>
 
-<script setup>
+<script setup lang="ts">
-import DataTable from '~/components/Common/DataTable';
+import DataTable from '~/components/Common/DataTable.vue';
-import EditModal from './CustomFields/EditModal';
+import EditModal from './CustomFields/EditModal.vue';
-import Icon from '~/components/Common/Icon';
+import Icon from '~/components/Common/Icon.vue';
-import InfoCard from '~/components/Common/InfoCard';
+import InfoCard from '~/components/Common/InfoCard.vue';
 import _ from 'lodash';
 import {useTranslate} from "~/vendor/gettext";
 import {ref} from "vue";
@@ -72,13 +72,13 @@ const getAutoAssignName = (autoAssign) => {
     return _.get(props.autoAssignTypes, autoAssign, $gettext('None'));
 };
 
-const datatable = ref(); // Template Ref
+const datatable = ref<InstanceType<typeof DataTable>>();
 
 const relist = () => {
     datatable.value.refresh();
 };
 
-const editmodal = ref(); // Template Ref
+const editmodal = ref<InstanceType<typeof EditModal>>();
 
 const doCreate = () => {
     editmodal.value.create();

frontend/vue/components/Admin/CustomFields/EditModal.vue

@@ -8,13 +8,14 @@
     </modal-form>
 </template>
 
-<script>
+<script lang="ts">
 import {required} from '@vuelidate/validators';
-import BaseEditModal from '~/components/Common/BaseEditModal';
+import BaseEditModal from '~/components/Common/BaseEditModal.vue';
-import AdminCustomFieldsForm from "~/components/Admin/CustomFields/Form";
+import AdminCustomFieldsForm from "~/components/Admin/CustomFields/Form.vue";
 import {useVuelidateOnForm} from "~/components/Form/UseVuelidateOnForm";
+import {defineComponent} from "vue";
 
-export default {
+export default defineComponent({
     name: 'AdminCustomFieldsEditModal',
     mixins: [BaseEditModal],
     components: {AdminCustomFieldsForm},
@@ -48,5 +49,5 @@ export default {
                 : this.$gettext('Add Custom Field');
         }
     },
-};
+});
 </script>

frontend/vue/components/Admin/GeoLite.vue

@@ -86,18 +86,21 @@
     </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
-import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
+import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup.vue";
-import '~/vendor/sweetalert.js';
+import InfoCard from "~/components/Common/InfoCard.vue";
-import InfoCard from "~/components/Common/InfoCard";
+import {computed, onMounted, ref} from "vue";
-import {ref} from "vue";
 import {useVuelidateOnForm} from "~/components/Form/UseVuelidateOnForm";
+import {useSweetAlert} from "~/vendor/sweetalert";
+import {useAxios} from "~/vendor/axios";
+import {useTranslate} from "~/vendor/gettext";
+import {useNotify} from "~/vendor/bootstrapVue";
 
 const props = defineProps({
     apiUrl: String
 });
 
-const loading = ref(true);
+const loading = ref<Boolean>(true);
 const version = ref(null);
 
 const {form, resetForm, v$} = useVuelidateOnForm(
@@ -109,66 +112,54 @@ const {form, resetForm, v$} = useVuelidateOnForm(
     }
 );
 
+const {$gettext} = useTranslate();
 
-</script>
+const langInstalledVersion = computed(() => {
-
+    return $gettext(
-<script>
+        'GeoLite version "%{ version }" is currently installed.',
-
+        {
-
+            version: version.value
-export default {
-    setup() {
-        return {v$: useVuelidate()}
-    },
-    props: {},
-    data() {
-        return {
-            loading: true,
-            key: null,
-            version: null
-        };
-    },
-    validations: {},
-    computed: {
-        langInstalledVersion() {
-            const text = this.$gettext('GeoLite version "%{ version }" is currently installed.');
-            return this.$gettextInterpolate(text, {
-                version: this.version
-            });
         }
-    },
+    );
-    mounted() {
+});
-        this.doFetch();
-    },
-    methods: {
-        doFetch() {
-            this.loading = true;
-            this.axios.get(this.apiUrl).then((resp) => {
-                this.key = resp.data.key;
-                this.version = resp.data.version;
 
-                this.loading = false;
+const {axios} = useAxios();
-            });
+
-        },
+const doFetch = () => {
-        doUpdate() {
+    loading.value = true;
-            this.loading = true;
+
-            this.$wrapWithLoading(
+    axios.get(props.apiUrl).then((resp) => {
-                this.axios.post(this.apiUrl, {
+        form.value.key = resp.data.key;
-                    geolite_license_key: this.key
+        version.value = resp.data.version;
-                })
+        loading.value = false;
-            ).then((resp) => {
+    });
-                this.version = resp.data.version;
+};
-            }).finally(() => {
+
-                this.loading = false;
+onMounted(doFetch);
-            });
+
-        },
+const {wrapWithLoading} = useNotify();
-        doDelete() {
+
-            this.$confirmDelete().then((result) => {
+const doUpdate = () => {
-                if (result.value) {
+    loading.value = true;
-                    this.key = null;
+    wrapWithLoading(
-                    this.doUpdate();
+        axios.post(props.apiUrl, {
-                }
+            geolite_license_key: form.value.key
-            });
+        })
+    ).then((resp) => {
+        version.value = resp.data.version;
+    }).finally(() => {
+        loading.value = false;
+    });
+};
+
+const {confirmDelete} = useSweetAlert();
+
+const doDelete = () => {
+    confirmDelete().then((result) => {
+        if (result.value) {
+            form.value.key = null;
+            doUpdate();
         }
-    }
+    });
 }
 </script>

frontend/vue/components/Common/AudioPlayer.vue

@@ -2,12 +2,13 @@
     <audio ref="audio" v-if="isPlaying" v-bind:title="title"/>
 </template>
 
-<script>
+<script lang="ts">
 import getLogarithmicVolume from '~/functions/getLogarithmicVolume.js';
 import Hls from 'hls.js';
 import {usePlayerStore} from "~/store.js";
+import {defineComponent} from "vue";
 
-export default {
+export default defineComponent({
     props: {
         title: String,
         volume: {
@@ -169,5 +170,5 @@ export default {
             }
         },
     }
-};
+});
 </script>

frontend/vue/components/Common/DataTable.vue

@@ -153,12 +153,13 @@ table.b-table-selectable {
 }
 </style>
 
-<script>
+<script lang="ts">
 import store from 'store';
 import _ from 'lodash';
-import Icon from './Icon';
+import Icon from './Icon.vue';
+import {defineComponent} from "vue";
 
-export default {
+export default defineComponent({
     name: 'DataTable',
     components: {Icon},
     props: {
@@ -209,7 +210,7 @@ export default {
     },
     data() {
         let allFields = [];
-        _.forEach(this.fields, function (field) {
+        _.forEach(this.fields, function (field: object) {
             allFields.push({
                 ...{
                     label: '',
@@ -394,7 +395,7 @@ export default {
             this.filter = newTerm;
         },
         loadItems(ctx) {
-            let queryParams = {
+            let queryParams: { [k: string]: any } = {
                 internal: true
             };
 
@@ -460,5 +461,5 @@ export default {
             this.$emit('filtered', filter);
         }
     }
-};
+});
 </script>

frontend/vue/components/Common/ModalForm.vue

@@ -33,10 +33,12 @@
     </b-modal>
 </template>
 
-<script>
+<script lang="ts">
-import InvisibleSubmitButton from "~/components/Common/InvisibleSubmitButton";
+import InvisibleSubmitButton from "~/components/Common/InvisibleSubmitButton.vue";
+import {defineComponent} from "vue";
+import _ from "lodash";
 
-export default {
+export default defineComponent({
     components: {InvisibleSubmitButton},
     emits: ['submit', 'shown', 'hidden'],
     props: {
@@ -101,5 +103,5 @@ export default {
             this.$refs.modal.show();
         }
     }
-}
+});
 </script>

frontend/vue/components/InlinePlayer.vue

@@ -64,7 +64,7 @@
 }
 </style>
 
-<script setup>
+<script setup lang="ts">
 import AudioPlayer from '~/components/Common/AudioPlayer.vue';
 import formatTime from '~/functions/formatTime.js';
 import Icon from '~/components/Common/Icon.vue';
@@ -79,7 +79,7 @@ const current = toRef(store, 'current');
 const volume = useStorage('player_volume', 55);
 const isMuted = useStorage('player_is_muted', false);
 const isMounted = useMounted();
-const player = ref(); // AudioPlayer
+const player = ref<InstanceType<typeof AudioPlayer>>();
 
 const duration = computed(() => {
     return player.value?.getDuration();

frontend/vue/components/Public/Player.vue

@@ -208,7 +208,7 @@
 </style>
 
 <script>
-import {nowPlayingProps} from '~/components/Common/NowPlaying.js';
+import {nowPlayingProps} from '~/components/Common/NowPlaying';
 
 export const radioPlayerProps = {
     ...nowPlayingProps,
@@ -239,7 +239,7 @@ import {computed, onMounted, ref, shallowRef, watch} from "vue";
 import {useIntervalFn, useMounted, useStorage} from "@vueuse/core";
 import formatTime from "~/functions/formatTime";
 import {useTranslate} from "~/vendor/gettext";
-import useNowPlaying from "~/components/Common/NowPlaying.js";
+import useNowPlaying from "~/components/Common/NowPlaying";
 
 const props = defineProps({
     ...radioPlayerProps

frontend/vue/components/Stations/Media/MediaToolbar.vue

@@ -78,7 +78,7 @@
 <script>
 import _ from 'lodash';
 import Icon from '~/components/Common/Icon';
-import '~/vendor/sweetalert.js';
+import '~/vendor/sweetalert';
 
 export default {
     name: 'station-media-toolbar',

frontend/vue/components/Stations/Profile.vue

@@ -49,7 +49,7 @@ import ProfileFrontend, {profileFrontendProps} from './Profile/FrontendPanel';
 import ProfileBackendNone from './Profile/BackendNonePanel';
 import ProfileBackend, {profileBackendProps} from './Profile/BackendPanel';
 import {profileEmbedModalProps} from './Profile/EmbedModal';
-import {BACKEND_NONE, FRONTEND_REMOTE} from '~/components/Entity/RadioAdapters.js';
+import {BACKEND_NONE, FRONTEND_REMOTE} from '~/components/Entity/RadioAdapters';
 import NowPlaying from '~/components/Entity/NowPlaying';
 import {computed, onMounted, shallowRef} from "vue";
 import {useAxios} from "~/vendor/axios";

frontend/vue/components/Stations/Profile/BackendPanel.vue

@@ -58,7 +58,7 @@ export default {
 </script>
 
 <script setup>
-import {BACKEND_LIQUIDSOAP} from '~/components/Entity/RadioAdapters.js';
+import {BACKEND_LIQUIDSOAP} from '~/components/Entity/RadioAdapters';
 import Icon from '~/components/Common/Icon';
 import RunningBadge from "~/components/Common/Badges/RunningBadge.vue";
 import {useTranslate} from "~/vendor/gettext";

frontend/vue/components/Stations/Profile/FrontendPanel.vue

@@ -112,7 +112,7 @@ export default {
 </script>
 
 <script setup>
-import {FRONTEND_ICECAST, FRONTEND_SHOUTCAST} from '~/components/Entity/RadioAdapters.js';
+import {FRONTEND_ICECAST, FRONTEND_SHOUTCAST} from '~/components/Entity/RadioAdapters';
 import CopyToClipboardButton from '~/components/Common/CopyToClipboardButton';
 import Icon from '~/components/Common/Icon';
 import RunningBadge from "~/components/Common/Badges/RunningBadge.vue";

frontend/vue/components/Stations/Profile/NowPlayingPanel.vue

@@ -137,7 +137,7 @@ export default {
 </script>
 
 <script setup>
-import {BACKEND_LIQUIDSOAP} from '~/components/Entity/RadioAdapters.js';
+import {BACKEND_LIQUIDSOAP} from '~/components/Entity/RadioAdapters';
 import Icon from '~/components/Common/Icon';
 import {computed, onMounted, ref} from "vue";
 import {useIntervalFn} from "@vueuse/core";

frontend/vue/components/Stations/Remotes.vue

@@ -59,7 +59,7 @@ import Icon from '~/components/Common/Icon';
 import InfoCard from '~/components/Common/InfoCard';
 import RemoteEditModal from "./Remotes/EditModal";
 import StationMayNeedRestart from '~/components/Stations/Common/MayNeedRestart.vue';
-import '~/vendor/sweetalert.js';
+import '~/vendor/sweetalert';
 
 export default {
     name: 'StationMounts',

frontend/vue/components/Stations/Streamers/BroadcastsModal.vue

@@ -42,7 +42,7 @@ import InlinePlayer from '~/components/InlinePlayer';
 import Icon from '~/components/Common/Icon';
 import PlayButton from "~/components/Common/PlayButton";
 import {DateTime} from 'luxon';
-import '~/vendor/sweetalert.js';
+import '~/vendor/sweetalert';
 import {useAzuraCast} from "~/vendor/azuracast";
 
 export default {

frontend/vue/pages/Admin/AuditLog.js

@@ -1,5 +1,5 @@
 import initBase from '~/base.js';
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import AuditLog from '~/components/Admin/AuditLog.vue';
 

frontend/vue/pages/Admin/Branding.js

@@ -1,6 +1,6 @@
 import initBase from '~/base.js';
 
-import '~/vendor/fancybox.js';
+import '~/vendor/fancybox';
 
 import AdminBranding from '~/components/Admin/Branding.vue';
 

frontend/vue/pages/Dashboard.js

@@ -1,6 +1,6 @@
 import initBase from '~/base.js';
-import '~/vendor/fancybox.js';
+import '~/vendor/fancybox';
-import '~/vendor/chartjs.js';
+import '~/vendor/chartjs';
 
 import '~/pages/InlinePlayer.js';
 

frontend/vue/pages/Public/FullPlayer.js

@@ -1,7 +1,7 @@
 import initBase from '~/base.js';
 
-import '~/vendor/fancybox.js';
+import '~/vendor/fancybox';
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import FullPlayer from '~/components/Public/FullPlayer.vue';
 

frontend/vue/pages/Public/History.js

@@ -1,7 +1,7 @@
 import initBase
   from '~/base.js';
 
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import History
   from '~/components/Public/History.vue';

frontend/vue/pages/Public/Schedule.js

@@ -1,6 +1,6 @@
 import initBase from '~/base.js';
 
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import Schedule from '~/components/Public/Schedule.vue';
 

frontend/vue/pages/Stations/Media.js

@@ -1,7 +1,7 @@
 import initBase from '~/base.js';
 
-import '~/vendor/fancybox.js';
+import '~/vendor/fancybox';
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import '~/pages/InlinePlayer.js';
 

frontend/vue/pages/Stations/Playlists.js

@@ -1,6 +1,6 @@
 import initBase from '~/base.js';
 
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 import '~/store';
 
 import Playlists from '~/components/Stations/Playlists.vue';

frontend/vue/pages/Stations/Podcasts.js

@@ -1,7 +1,7 @@
 import initBase from '~/base.js';
 
-import '~/vendor/fancybox.js';
+import '~/vendor/fancybox';
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import Podcasts from '~/components/Stations/Podcasts.vue';
 

frontend/vue/pages/Stations/Profile.js

@@ -1,7 +1,7 @@
 import initBase from '~/base.js';
 
-import '~/vendor/fancybox.js';
+import '~/vendor/fancybox';
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import '~/pages/InlinePlayer.js';
 

frontend/vue/pages/Stations/Queue.js

@@ -1,6 +1,6 @@
 import initBase from '~/base.js';
 
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import Queue from '~/components/Stations/Queue.vue';
 

frontend/vue/pages/Stations/Reports/Listeners.js

@@ -1,6 +1,6 @@
 import initBase from '~/base.js';
 
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import Listeners from '~/components/Stations/Reports/Listeners.vue';
 

frontend/vue/pages/Stations/Reports/Overview.js

@@ -1,6 +1,6 @@
 import initBase from '~/base.js';
 
-import '~/vendor/chartjs.js';
+import '~/vendor/chartjs';
 
 import Overview from '~/components/Stations/Reports/Overview.vue';
 

frontend/vue/pages/Stations/Reports/Requests.js

@@ -1,6 +1,6 @@
 import initBase from '~/base.js';
 
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import Requests from '~/components/Stations/Reports/Requests.vue';
 

frontend/vue/pages/Stations/Reports/SoundExchange.js

@@ -1,6 +1,6 @@
 import initBase from '~/base.js';
 
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import SoundExchange from '~/components/Stations/Reports/SoundExchange.vue';
 

frontend/vue/pages/Stations/Reports/Timeline.js

@@ -1,6 +1,6 @@
 import initBase from '~/base.js';
 
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import Timeline from '~/components/Stations/Reports/Timeline.vue';
 

frontend/vue/pages/Stations/Streamers.js

@@ -1,7 +1,7 @@
 import initBase from '~/base.js';
 
-import '~/vendor/fancybox.js';
+import '~/vendor/fancybox';
-import '~/vendor/luxon.js';
+import '~/vendor/luxon';
 
 import Streamers from '~/components/Stations/Streamers.vue';
 

frontend/vue/vendor/axios.ts

@@ -1,14 +1,17 @@
 import axios from "axios";
 import VueAxios from "vue-axios";
+import type {InjectionKey} from "vue";
 import {inject} from "vue";
 import {useAzuraCast} from "~/vendor/azuracast";
 import {useTranslate} from "~/vendor/gettext";
 import {useNotify} from "~/vendor/bootstrapVue";
 
+const axiosKey = Symbol() as InjectionKey<typeof axios>;
+
 /* Composition API Axios utilities */
 export function useAxios() {
     return {
-        axios: inject('axios')
+        axios: inject(axiosKey)
     };
 }
 
@@ -57,5 +60,5 @@ export default function installAxios(vueApp) {
 
     vueApp.use(VueAxios, axios);
 
-    vueApp.provide('axios', axios);
+    vueApp.provide(axiosKey, axios);
 }

frontend/vue/vendor/azuracast.ts

@@ -1,4 +1,6 @@
 export function useAzuraCast() {
+    const App = globalThis.App;
+
     return {
         lang: {
             confirm: App.lang.confirm ?? 'Are you sure?',

frontend/vue/vendor/chartjs.js

@@ -1,20 +0,0 @@
-import '~/vendor/luxon.js';
-
-import {
-  Chart,
-  registerables
-} from 'chart.js';
-
-import 'chartjs-adapter-luxon';
-
-import colorSchemesPlugin
-  from './chartjs-colorschemes/plugin.colorschemes.js';
-
-import zoomPlugin
-  from 'chartjs-plugin-zoom';
-
-Chart.register(...registerables);
-
-Chart.register(colorSchemesPlugin);
-
-Chart.register(zoomPlugin);

frontend/vue/vendor/chartjs.ts

@@ -0,0 +1,15 @@
+import '~/vendor/luxon';
+
+import {Chart, registerables} from 'chart.js';
+
+import 'chartjs-adapter-luxon';
+
+import colorSchemesPlugin from './chartjs-colorschemes/plugin.colorschemes.js';
+
+import zoomPlugin from 'chartjs-plugin-zoom';
+
+Chart.register(...registerables);
+
+Chart.register(colorSchemesPlugin);
+
+Chart.register(zoomPlugin);

frontend/vue/vendor/luxon.ts

@@ -5,5 +5,5 @@ const {localeWithDashes} = useAzuraCast();
 
 document.addEventListener('DOMContentLoaded', function () {
     Settings.defaultLocale = localeWithDashes;
-    Settings.defaultZoneName = 'UTC';
+    Settings.defaultZone = 'UTC';
 });

templates/partials/bodyjs.phtml

@@ -54,7 +54,7 @@ $app = [
     });
     <?php endif; ?>
 
-    let App = <?=json_encode($app, JSON_THROW_ON_ERROR) ?>;
+    var App = <?=json_encode($app, JSON_THROW_ON_ERROR) ?>;
 
     let currentTheme = document.documentElement.getAttribute('data-theme');
     if (currentTheme === 'browser') {