diff --git a/components/Control.vue b/components/Control.vue index 54d42304..07a56001 100644 --- a/components/Control.vue +++ b/components/Control.vue @@ -239,7 +239,12 @@ async function status() { const timeInSec = timeToSeconds(timeStr.value) playlistStore.remainingSec = playlistStore.currentClipStart + playlistStore.currentClipOut - timeInSec const playedSec = playlistStore.currentClipOut - playlistStore.remainingSec - playlistStore.progressValue = (playedSec * 100) / playlistStore.currentClipOut + + if (playlistStore.currentClipOut === 0) { + playlistStore.progressValue = 0 + } else { + playlistStore.progressValue = (playedSec * 100) / playlistStore.currentClipOut + } if (breakStatusCheck.value) { return @@ -292,253 +297,3 @@ async function controlPlayout(state: string) { }, 1000) } - - diff --git a/components/PlaylistGenerator.vue b/components/PlaylistGenerator.vue new file mode 100644 index 00000000..760d6017 --- /dev/null +++ b/components/PlaylistGenerator.vue @@ -0,0 +1,401 @@ + + diff --git a/pages/player.vue b/pages/player.vue index 1d78019b..41128067 100644 --- a/pages/player.vue +++ b/pages/player.vue @@ -163,12 +163,7 @@
- - +
@@ -283,398 +273,27 @@ - + + + - + + + - + + + Delete program from {{ listDate }} + + - + @@ -697,25 +316,27 @@ useHead({ }) const { configID } = storeToRefs(useConfig()) +const { listDate } = storeToRefs(usePlaylist()) -const advancedGenerator = ref(false) const fileImport = ref() const playlistIsLoading = ref(false) const todayDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD')) -const listDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD')) const targetDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD')) const editId = ref(-1) const textFile = ref() const showPreviewModal = ref(false) const showSourceModal = ref(false) +const showImportModal = ref(false) +const showCopyModal = ref(false) +const showDeleteModal = ref(false) +const showPlaylistGenerator = ref(false) const previewName = ref('') const previewUrl = ref('') const previewOpt = ref() const isVideo = ref(false) -const selectedFolders = ref([] as string[]) -const generateFromAll = ref(false) + const browserSortOptions = { group: { name: 'playlist', pull: 'clone', put: false }, sort: false, @@ -725,15 +346,7 @@ const playlistSortOptions = { animation: 100, handle: '.grabbing', } -const templateBrowserSortOptions = { - group: { name: 'folder', pull: 'clone', put: false }, - sort: false, -} -const templateTargetSortOptions = { - group: 'folder', - animation: 100, - handle: '.grabbing', -} + const newSource = ref({ begin: 0, in: 0, @@ -746,10 +359,6 @@ const newSource = ref({ uid: '', } as PlaylistItem) -const template = ref({ - sources: [], -} as Template) - onMounted(async () => { if (!mediaStore.folderTree.parent) { await mediaStore.getTree('') @@ -767,10 +376,6 @@ function scrollTo(index: number) { const child = document.getElementById(`clip_${index}`) const parent = document.getElementById('scroll-container') - console.log('scroll') - console.log('child', child) - console.log('parent', parent) - if (child && parent) { const topPos = child.offsetTop parent.scrollTop = topPos - 50 @@ -840,27 +445,6 @@ function cloneClip(event: any) { ) } -function addFolderToTemplate(event: any, item: TemplateItem) { - const o = event.oldIndex - const n = event.newIndex - - event.item.remove() - - const storagePath = configStore.configPlayout.storage.path - const navPath = mediaStore.folderCrumbs[mediaStore.folderCrumbs.length - 1].path - const sourcePath = `${storagePath}/${navPath}/${mediaStore.folderList.folders[o].name}`.replace(/\/[/]+/g, '/') - - if (!item.paths.includes(sourcePath)) { - item.paths.splice(n, 0, sourcePath) - } -} - -function removeTemplate(item: TemplateItem) { - const index = template.value.sources.indexOf(item) - - template.value.sources.splice(index, 1) -} - function moveItemInArray(event: any) { playlistStore.playlist.splice(event.newIndex, 0, playlistStore.playlist.splice(event.oldIndex, 1)[0]) @@ -1008,172 +592,93 @@ function loopClips() { playlistStore.playlist = processPlaylist(configStore.startInSec, configStore.playlistLength, tempList, false) } -async function onSubmitImport(evt: any) { - evt.preventDefault() +async function importPlaylist(imp: boolean) { + showImportModal.value = false - if (!textFile.value || !textFile.value[0]) { - return - } - - const formData = new FormData() - formData.append(textFile.value[0].name, textFile.value[0]) - - playlistIsLoading.value = true - await $fetch( - `/api/file/${configStore.configGui[configStore.configID].id}/import/?file=${textFile.value[0].name}&date=${ - listDate.value - }`, - { - method: 'PUT', - headers: authStore.authHeader, - body: formData, + if (imp) { + if (!textFile.value || !textFile.value[0]) { + return } - ) - .then(() => { - indexStore.msgAlert('alert-success', 'Import success!', 2) - playlistStore.getPlaylist(listDate.value) - }) - .catch((e: string) => { - indexStore.msgAlert('alert-error', e, 4) - }) + + const formData = new FormData() + formData.append(textFile.value[0].name, textFile.value[0]) + + playlistIsLoading.value = true + await $fetch( + `/api/file/${configStore.configGui[configStore.configID].id}/import/?file=${ + textFile.value[0].name + }&date=${listDate}`, + { + method: 'PUT', + headers: authStore.authHeader, + body: formData, + } + ) + .then(() => { + indexStore.msgAlert('alert-success', 'Import success!', 2) + playlistStore.getPlaylist(listDate.value) + }) + .catch((e: string) => { + indexStore.msgAlert('alert-error', e, 4) + }) + } playlistIsLoading.value = false textFile.value = null fileImport.value.value = null } -async function generatePlaylist() { - playlistIsLoading.value = true - let body = null as BodyObject | null +async function savePlaylist(save: boolean) { + showCopyModal.value = false - if (selectedFolders.value.length > 0 && !generateFromAll.value) { - body = { paths: selectedFolders.value } - } - - if (advancedGenerator.value) { - if (body) { - body.template = template.value - } else { - body = { template: template.value } + if (save) { + if (playlistStore.playlist.length === 0) { + return } - } - await $fetch(`/api/playlist/${configStore.configGui[configStore.configID].id}/generate/${listDate.value}`, { - method: 'POST', - headers: { ...contentType, ...authStore.authHeader }, - body, - }) - .then((response: any) => { - playlistStore.playlist = processPlaylist( - configStore.startInSec, - configStore.playlistLength, - response.program, - false - ) - indexStore.msgAlert('alert-success', 'Generate Playlist done...', 2) + playlistStore.playlist = processPlaylist( + configStore.startInSec, + configStore.playlistLength, + playlistStore.playlist, + true + ) + const saveList = playlistStore.playlist.map(({ begin, ...item }) => item) + + await $fetch(`/api/playlist/${configStore.configGui[configStore.configID].id}/`, { + method: 'POST', + headers: { ...contentType, ...authStore.authHeader }, + body: JSON.stringify({ + channel: configStore.configGui[configStore.configID].name, + date: targetDate.value, + program: saveList, + }), }) - .catch((e: any) => { - indexStore.msgAlert('alert-error', e.data ? e.data : e, 4) + .then((response: any) => { + indexStore.msgAlert('alert-success', response, 2) + }) + .catch((e: any) => { + if (e.status === 409) { + indexStore.msgAlert('alert-warning', e.data, 2) + } else { + indexStore.msgAlert('alert-error', e, 4) + } + }) + } +} + +async function deletePlaylist(del: boolean) { + showDeleteModal.value = false + + if (del) { + await $fetch(`/api/playlist/${configStore.configGui[configStore.configID].id}/${listDate}`, { + method: 'DELETE', + headers: { ...contentType, ...authStore.authHeader }, + }).then(() => { + playlistStore.playlist = [] + + indexStore.msgAlert('alert-warning', 'Playlist deleted...', 2) }) - - // reset selections - resetCheckboxes() - resetTemplate() - - playlistIsLoading.value = false -} - -async function savePlaylist(saveDate: string) { - if (playlistStore.playlist.length === 0) { - return } - - playlistStore.playlist = processPlaylist( - configStore.startInSec, - configStore.playlistLength, - playlistStore.playlist, - true - ) - const saveList = playlistStore.playlist.map(({ begin, ...item }) => item) - - await $fetch(`/api/playlist/${configStore.configGui[configStore.configID].id}/`, { - method: 'POST', - headers: { ...contentType, ...authStore.authHeader }, - body: JSON.stringify({ - channel: configStore.configGui[configStore.configID].name, - date: saveDate, - program: saveList, - }), - }) - .then((response: any) => { - indexStore.msgAlert('alert-success', response, 2) - }) - .catch((e: any) => { - if (e.status === 409) { - indexStore.msgAlert('alert-warning', e.data, 2) - } else { - indexStore.msgAlert('alert-error', e, 4) - } - }) -} - -async function deletePlaylist(playlistDate: string) { - await $fetch(`/api/playlist/${configStore.configGui[configStore.configID].id}/${playlistDate}`, { - method: 'DELETE', - headers: { ...contentType, ...authStore.authHeader }, - }).then(() => { - playlistStore.playlist = [] - - indexStore.msgAlert('alert-warning', 'Playlist deleted...', 2) - }) -} - -function setSelectedFolder(event: any, folder: string) { - if (event.target.checked) { - selectedFolders.value.push(folder) - } else { - const index = selectedFolders.value.indexOf(folder) - - if (index > -1) { - selectedFolders.value.splice(index, 1) - } - } -} - -function resetCheckboxes() { - selectedFolders.value = [] - const checkboxes = document.getElementsByClassName('folder-check') - - if (checkboxes) { - for (const box of checkboxes) { - // @ts-ignore - box.checked = false - } - } -} - -function resetTemplate() { - template.value.sources = [] -} - -function addTemplate() { - const last = template.value.sources[template.value.sources.length - 1] - // @ts-ignore - let start = $dayjs('00:00:00', 'HH:mm:ss') - - if (last) { - // @ts-ignore - const t = $dayjs(last.duration, 'HH:mm:ss') - // @ts-ignore - start = $dayjs(last.start, 'HH:mm:ss').add(t.hour(), 'hour').add(t.minute(), 'minute').add(t.second(), 'second') - } - - template.value.sources.push({ - start: start.format('HH:mm:ss'), - duration: '02:00:00', - shuffle: false, - paths: [], - }) } diff --git a/stores/playlist.ts b/stores/playlist.ts index de86fc67..52c6e34b 100644 --- a/stores/playlist.ts +++ b/stores/playlist.ts @@ -13,6 +13,7 @@ const { processPlaylist } = playlistOperations() export const usePlaylist = defineStore('playlist', { state: () => ({ playlist: [] as PlaylistItem[], + listDate: dayjs().format('YYYY-MM-DD'), progressValue: 0, currentClip: 'No clip is playing', currentClipIndex: 0,