Fixes and migrate previously uncaught ReorderModal.
This commit is contained in:
parent
abd8c964fc
commit
d5d2583bb2
|
@ -107,7 +107,7 @@ const play = () => {
|
||||||
hls.value = new Hls();
|
hls.value = new Hls();
|
||||||
hls.value.loadSource(current.value.url);
|
hls.value.loadSource(current.value.url);
|
||||||
hls.value.attachMedia($audio.value);
|
hls.value.attachMedia($audio.value);
|
||||||
} else if (this.audio.canPlayType('application/vnd.apple.mpegurl')) {
|
} else if ($audio.value.canPlayType('application/vnd.apple.mpegurl')) {
|
||||||
$audio.value.src = current.value.url;
|
$audio.value.src = current.value.url;
|
||||||
} else {
|
} else {
|
||||||
console.log('Your browser does not support HLS.');
|
console.log('Your browser does not support HLS.');
|
||||||
|
|
|
@ -271,7 +271,7 @@ const doReprocess = () => {
|
||||||
const {confirmDelete} = useSweetAlert();
|
const {confirmDelete} = useSweetAlert();
|
||||||
|
|
||||||
const doDelete = () => {
|
const doDelete = () => {
|
||||||
let numFiles = this.selectedItems.all.length;
|
let numFiles = props.selectedItems.all.length;
|
||||||
let buttonConfirmText = $gettext(
|
let buttonConfirmText = $gettext(
|
||||||
'Delete %{ num } media files?',
|
'Delete %{ num } media files?',
|
||||||
{num: numFiles}
|
{num: numFiles}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<b-modal
|
<b-modal
|
||||||
id="reorder_modal"
|
id="reorder_modal"
|
||||||
ref="modal"
|
ref="$modal"
|
||||||
size="lg"
|
size="lg"
|
||||||
:title="$gettext('Reorder Playlist')"
|
:title="$gettext('Reorder Playlist')"
|
||||||
:busy="loading"
|
:busy="loading"
|
||||||
|
@ -90,60 +90,74 @@
|
||||||
</b-modal>
|
</b-modal>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import Draggable from 'vuedraggable';
|
import Draggable from 'vuedraggable';
|
||||||
import Icon from '~/components/Common/Icon';
|
import Icon from '~/components/Common/Icon';
|
||||||
import PlayButton from "~/components/Common/PlayButton";
|
import PlayButton from "~/components/Common/PlayButton";
|
||||||
import InlinePlayer from '~/components/InlinePlayer';
|
import InlinePlayer from '~/components/InlinePlayer';
|
||||||
|
import {ref} from "vue";
|
||||||
|
import {useAxios} from "~/vendor/axios";
|
||||||
|
import {useNotify} from "~/vendor/bootstrapVue";
|
||||||
|
import {useTranslate} from "~/vendor/gettext";
|
||||||
|
|
||||||
|
const loading = ref(true);
|
||||||
|
const reorderUrl = ref(null);
|
||||||
|
const media = ref([]);
|
||||||
|
|
||||||
|
const $modal = ref(); // Template Ref
|
||||||
|
|
||||||
|
const {axios} = useAxios();
|
||||||
|
|
||||||
|
const open = (newReorderUrl) => {
|
||||||
|
reorderUrl.value = newReorderUrl;
|
||||||
|
loading.value = true;
|
||||||
|
$modal.value?.show();
|
||||||
|
|
||||||
|
axios.get(newReorderUrl).then((resp) => {
|
||||||
|
media.value = resp.data;
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const {notifySuccess} = useNotify();
|
||||||
|
const {$gettext} = useTranslate();
|
||||||
|
|
||||||
|
const save = () => {
|
||||||
|
let newOrder = {};
|
||||||
|
let i = 0;
|
||||||
|
|
||||||
|
media.value.forEach((row) => {
|
||||||
|
i++;
|
||||||
|
newOrder[row.id] = i;
|
||||||
|
});
|
||||||
|
|
||||||
|
axios.put(reorderUrl.value, {'order': newOrder}).then(() => {
|
||||||
|
notifySuccess($gettext('Playlist order set.'));
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const moveDown = (index) => {
|
||||||
|
media.value.splice(index + 1, 0, media.value.splice(index, 1)[0]);
|
||||||
|
save();
|
||||||
|
};
|
||||||
|
|
||||||
|
const moveUp = (index) => {
|
||||||
|
media.value.splice(index - 1, 0, media.value.splice(index, 1)[0]);
|
||||||
|
save();
|
||||||
|
};
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
open
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ReorderModal',
|
|
||||||
components: {
|
|
||||||
Icon,
|
|
||||||
Draggable,
|
|
||||||
PlayButton,
|
|
||||||
InlinePlayer
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {};
|
||||||
loading: true,
|
|
||||||
reorderUrl: null,
|
|
||||||
media: []
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {}
|
||||||
open (reorderUrl) {
|
|
||||||
this.$refs.modal.show();
|
|
||||||
this.reorderUrl = reorderUrl;
|
|
||||||
this.loading = true;
|
|
||||||
|
|
||||||
this.axios.get(this.reorderUrl).then((resp) => {
|
|
||||||
this.media = resp.data;
|
|
||||||
this.loading = false;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
moveDown (index) {
|
|
||||||
this.media.splice(index + 1, 0, this.media.splice(index, 1)[0]);
|
|
||||||
this.save();
|
|
||||||
},
|
|
||||||
moveUp (index) {
|
|
||||||
this.media.splice(index - 1, 0, this.media.splice(index, 1)[0]);
|
|
||||||
this.save();
|
|
||||||
},
|
|
||||||
save () {
|
|
||||||
let newOrder = {};
|
|
||||||
let i = 0;
|
|
||||||
|
|
||||||
this.media.forEach((row) => {
|
|
||||||
i++;
|
|
||||||
newOrder[row.id] = i;
|
|
||||||
});
|
|
||||||
|
|
||||||
this.axios.put(this.reorderUrl, {'order': newOrder}).then(() => {
|
|
||||||
this.$notifySuccess(this.$gettext('Playlist order set.'));
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -113,7 +113,7 @@ const deleteConfigurationFile = () => {
|
||||||
wrapWithLoading(
|
wrapWithLoading(
|
||||||
axios({
|
axios({
|
||||||
method: 'DELETE',
|
method: 'DELETE',
|
||||||
url: this.apiUrl
|
url: props.apiUrl
|
||||||
})
|
})
|
||||||
).then(() => {
|
).then(() => {
|
||||||
mayNeedRestart();
|
mayNeedRestart();
|
||||||
|
|
|
@ -47,7 +47,7 @@ const rateLimitOptions = [
|
||||||
value: 30,
|
value: 30,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: this.$gettextInterpolate(this.langSeconds, {seconds: 60}),
|
text: $gettextInterpolate(langSeconds, {seconds: 60}),
|
||||||
value: 60,
|
value: 60,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
Loading…
Reference in New Issue