tilderadio
/
AzuraCast
mirror of https://github.com/AzuraCast/AzuraCast.git
4
0
Fork 0
Code Issues Releases Wiki Activity

Initial Typescript impl.

This commit is contained in:
Buster Neece 2022-12-23 21:21:06 -06:00
parent c6f64c6fa6
commit 7c48e69c11
No known key found for this signature in database
GPG Key ID: F1D2E64A0005E80E
60 changed files with 267 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/npm-shrinkwrap.json generated
View File

@ -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",

5
frontend/package.json
View File

@ -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"
}
}

4
frontend/tsconfig.json
View File

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

4
frontend/vue/components/Account/ApiKeyNewKey.vue
View File

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

32
frontend/vue/components/Admin/ApiKeys.vue
View File

@ -19,8 +19,8 @@
</section>
</template>
<script setup>
import DataTable from "~/components/Common/DataTable";
<script setup lang="ts">
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(
this.axios.delete(url)
wrapWithLoading(
axios.delete(url)
).then((resp) => {
this.$notifySuccess(resp.data.message);
this.relist();
notifySuccess(resp.data.message);
relist();
});
}
});
}
</script>

2
frontend/vue/components/Admin/AuditLog.vue
View File

@ -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";

22
frontend/vue/components/Admin/Backups.vue
View File

@ -107,14 +107,14 @@
</div>
</template>
<script setup>
import Icon from "~/components/Common/Icon";
import DataTable from "~/components/Common/DataTable";
import AdminBackupsLastOutputModal from "./Backups/LastOutputModal";
<script setup lang="ts">
import Icon from "~/components/Common/Icon.vue";
import DataTable from "~/components/Common/DataTable.vue";
import AdminBackupsLastOutputModal from "./Backups/LastOutputModal.vue";
import {DateTime} from 'luxon';
import formatFileSize from "~/functions/formatFileSize";
import AdminBackupsConfigureModal from "~/components/Admin/Backups/ConfigureModal";
import AdminBackupsRunBackupModal from "~/components/Admin/Backups/RunBackupModal";
import AdminBackupsConfigureModal from "~/components/Admin/Backups/ConfigureModal.vue";
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();
};

71
frontend/vue/components/Admin/Backups/ConfigureModal.vue
View File

@ -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>
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
import ModalForm from "~/components/Common/ModalForm";
import BFormFieldset from "~/components/Form/BFormFieldset";
import mergeExisting from "~/functions/mergeExisting";
import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
import TimeCode from "~/components/Common/TimeCode";
import objectToFormOptions from "~/functions/objectToFormOptions";
<script setup lang="ts">
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup.vue";
import ModalForm from "~/components/Common/ModalForm.vue";
import BFormFieldset from "~/components/Form/BFormFieldset.vue";
import mergeExisting from "~/functions/mergeExisting.js";
import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox.vue";
import TimeCode from "~/components/Common/TimeCode.vue";
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 error = ref(null);
const loading = ref<Boolean>(true);
const error = ref<string | null>(null);
const form = ref({});
const modal = ref<InstanceType<typeof ModalForm>>();
const modal = ref(); // Template Ref
const validations = {
'backup_enabled': {},
'backup_time_code': {},
'backup_exclude_media': {},
'backup_keep_copies': {},
'backup_storage_location': {},
'backup_format': {},
};
const v$ = useVuelidate(validations, form);
const {form, resetForm, v$} = useVuelidateOnForm(
{
'backup_enabled': {},
'backup_time_code': {},
'backup_exclude_media': {},
'backup_keep_copies': {},
'backup_storage_location': {},
'backup_format': {},
},
{
backup_enabled: false,
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();

2
frontend/vue/components/Admin/Backups/LastOutputModal.vue
View File

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

15
frontend/vue/components/Admin/Backups/RunBackupModal.vue
View File

@ -79,17 +79,18 @@
</b-modal>
</template>
<script setup>
import BFormFieldset from "~/components/Form/BFormFieldset";
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
import InvisibleSubmitButton from "~/components/Common/InvisibleSubmitButton";
import BWrappedFormCheckbox from "~/components/Form/BWrappedFormCheckbox";
<script setup lang="ts">
import BFormFieldset from "~/components/Form/BFormFieldset.vue";
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup.vue";
import InvisibleSubmitButton from "~/components/Common/InvisibleSubmitButton.vue";
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(
{

6
frontend/vue/components/Admin/Branding.vue
View File

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

14
frontend/vue/components/Admin/CustomFields.vue
View File

@ -43,11 +43,11 @@
@relist="relist"></edit-modal>
</template>
<script setup>
import DataTable from '~/components/Common/DataTable';
import EditModal from './CustomFields/EditModal';
import Icon from '~/components/Common/Icon';
import InfoCard from '~/components/Common/InfoCard';
<script setup lang="ts">
import DataTable from '~/components/Common/DataTable.vue';
import EditModal from './CustomFields/EditModal.vue';
import Icon from '~/components/Common/Icon.vue';
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();

11
frontend/vue/components/Admin/CustomFields/EditModal.vue
View File

@ -8,13 +8,14 @@
</modal-form>
</template>
<script>
<script lang="ts">
import {required} from '@vuelidate/validators';
import BaseEditModal from '~/components/Common/BaseEditModal';
import AdminCustomFieldsForm from "~/components/Admin/CustomFields/Form";
import BaseEditModal from '~/components/Common/BaseEditModal.vue';
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>

117
frontend/vue/components/Admin/GeoLite.vue
View File

@ -86,18 +86,21 @@
</div>
</template>
<script setup>
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup";
import '~/vendor/sweetalert.js';
import InfoCard from "~/components/Common/InfoCard";
import {ref} from "vue";
<script setup lang="ts">
import BWrappedFormGroup from "~/components/Form/BWrappedFormGroup.vue";
import InfoCard from "~/components/Common/InfoCard.vue";
import {computed, onMounted, 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>
<script>
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
});
const langInstalledVersion = computed(() => {
return $gettext(
'GeoLite version "%{ version }" is currently installed.',
{
version: version.value
}
},
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;
});
},
doUpdate() {
this.loading = true;
this.$wrapWithLoading(
this.axios.post(this.apiUrl, {
geolite_license_key: this.key
})
).then((resp) => {
this.version = resp.data.version;
}).finally(() => {
this.loading = false;
});
},
doDelete() {
this.$confirmDelete().then((result) => {
if (result.value) {
this.key = null;
this.doUpdate();
}
});
const {axios} = useAxios();
const doFetch = () => {
loading.value = true;
axios.get(props.apiUrl).then((resp) => {
form.value.key = resp.data.key;
version.value = resp.data.version;
loading.value = false;
});
};
onMounted(doFetch);
const {wrapWithLoading} = useNotify();
const doUpdate = () => {
loading.value = true;
wrapWithLoading(
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>

7
frontend/vue/components/Common/AudioPlayer.vue
View File

@ -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>

13
frontend/vue/components/Common/DataTable.vue
View File

@ -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>

10
frontend/vue/components/Common/ModalForm.vue
View File

@ -33,10 +33,12 @@
</b-modal>
</template>
<script>
import InvisibleSubmitButton from "~/components/Common/InvisibleSubmitButton";
<script lang="ts">
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>

0
frontend/vue/components/Common/NowPlaying.js → frontend/vue/components/Common/NowPlaying.ts
View File

0
frontend/vue/components/Entity/NowPlaying.js → frontend/vue/components/Entity/NowPlaying.ts
View File

0
frontend/vue/components/Entity/RadioAdapters.js → frontend/vue/components/Entity/RadioAdapters.ts
View File

0
frontend/vue/components/Form/UseResettableForm.js → frontend/vue/components/Form/UseResettableForm.ts
View File

0
frontend/vue/components/Form/UseVuelidateOnForm.js → frontend/vue/components/Form/UseVuelidateOnForm.ts
View File

4
frontend/vue/components/InlinePlayer.vue
View File

@ -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();

4
frontend/vue/components/Public/Player.vue
View File

@ -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

2
frontend/vue/components/Stations/Media/MediaToolbar.vue
View File

@ -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',

2
frontend/vue/components/Stations/Profile.vue
View File

@ -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";

2
frontend/vue/components/Stations/Profile/BackendPanel.vue
View File

@ -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";

2
frontend/vue/components/Stations/Profile/FrontendPanel.vue
View File

@ -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";

2
frontend/vue/components/Stations/Profile/NowPlayingPanel.vue
View File

@ -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";

2
frontend/vue/components/Stations/Remotes.vue
View File

@ -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',

2
frontend/vue/components/Stations/Streamers/BroadcastsModal.vue
View File

@ -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 {

2
frontend/vue/pages/Admin/AuditLog.js
View File

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

2
frontend/vue/pages/Admin/Branding.js
View File

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

4
frontend/vue/pages/Dashboard.js
View File

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

4
frontend/vue/pages/Public/FullPlayer.js
View File

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

2
frontend/vue/pages/Public/History.js
View File

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

2
frontend/vue/pages/Public/Schedule.js
View File

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

4
frontend/vue/pages/Stations/Media.js
View File

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

2
frontend/vue/pages/Stations/Playlists.js
View File

@ -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';

4
frontend/vue/pages/Stations/Podcasts.js
View File

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

4
frontend/vue/pages/Stations/Profile.js
View File

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

2
frontend/vue/pages/Stations/Queue.js
View File

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

2
frontend/vue/pages/Stations/Reports/Listeners.js
View File

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

2
frontend/vue/pages/Stations/Reports/Overview.js
View File

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

2
frontend/vue/pages/Stations/Reports/Requests.js
View File

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

2
frontend/vue/pages/Stations/Reports/SoundExchange.js
View File

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

2
frontend/vue/pages/Stations/Reports/Timeline.js
View File

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

4
frontend/vue/pages/Stations/Streamers.js
View File

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

7
frontend/vue/vendor/axios.js → frontend/vue/vendor/axios.ts vendored
View File

@ -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);
}

2
frontend/vue/vendor/azuracast.js → frontend/vue/vendor/azuracast.ts vendored
View File

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

0
frontend/vue/vendor/bootstrapVue.js → frontend/vue/vendor/bootstrapVue.ts vendored
View File

20
frontend/vue/vendor/chartjs.js vendored
View File

@ -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);

15
frontend/vue/vendor/chartjs.ts vendored Normal file
View File

@ -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);

0
frontend/vue/vendor/events.js → frontend/vue/vendor/events.ts vendored
View File

0
frontend/vue/vendor/fancybox.js → frontend/vue/vendor/fancybox.ts vendored
View File

0
frontend/vue/vendor/gettext.js → frontend/vue/vendor/gettext.ts vendored
View File

2
frontend/vue/vendor/luxon.js → frontend/vue/vendor/luxon.ts vendored
View File

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

0
frontend/vue/vendor/pinia.js → frontend/vue/vendor/pinia.ts vendored
View File

0
frontend/vue/vendor/sweetalert.js → frontend/vue/vendor/sweetalert.ts vendored
View File

2
templates/partials/bodyjs.phtml
View File

@ -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') {