work on generator
This commit is contained in:
jb-alvarado
parent
8324646458
commit
ff460891ae
@ -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)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.control-row {
|
||||
min-height: 254px;
|
||||
}
|
||||
|
||||
.player-col {
|
||||
max-width: 542px;
|
||||
min-width: 380px;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.player-col > div {
|
||||
background-color: black;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.live-player {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.control-col {
|
||||
height: 100%;
|
||||
min-height: 254px;
|
||||
}
|
||||
|
||||
.status-col {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.control-unit-col {
|
||||
min-width: 250px;
|
||||
padding: 2px 17px 2px 2px;
|
||||
}
|
||||
|
||||
.control-unit-row {
|
||||
background: $gray-900;
|
||||
height: 100%;
|
||||
margin-right: 0;
|
||||
border-radius: 0.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.control-unit-row .col {
|
||||
height: 50%;
|
||||
min-height: 90px;
|
||||
}
|
||||
|
||||
.control-unit-row .col div {
|
||||
height: 80%;
|
||||
margin: 0.6em 0;
|
||||
}
|
||||
|
||||
.control-button {
|
||||
font-size: 4em;
|
||||
line-height: 0;
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.status-row {
|
||||
height: 100%;
|
||||
min-width: 325px;
|
||||
}
|
||||
|
||||
.status-row .col {
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.time-col {
|
||||
position: relative;
|
||||
background: $gray-900;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.time-str {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
font-family: 'DigitalNumbers-Regular';
|
||||
font-size: 4.5em;
|
||||
letter-spacing: -0.18em;
|
||||
padding-right: 14px;
|
||||
}
|
||||
|
||||
.current-clip {
|
||||
background: $gray-900;
|
||||
padding: 10px;
|
||||
border-radius: 0.25rem;
|
||||
min-width: 700px;
|
||||
}
|
||||
|
||||
.current-clip-text {
|
||||
height: 40%;
|
||||
padding-top: 0.5em;
|
||||
text-align: left;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.current-clip-meta {
|
||||
margin-bottom: 0.7em;
|
||||
}
|
||||
|
||||
.current-clip-progress {
|
||||
top: 80%;
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
|
||||
.control-button-play {
|
||||
color: $control-button-play;
|
||||
|
||||
&:hover {
|
||||
color: $control-button-play-hover;
|
||||
}
|
||||
}
|
||||
.is-playing {
|
||||
box-shadow: 0 0 15px $control-button-play;
|
||||
}
|
||||
|
||||
.control-button-stop {
|
||||
color: $control-button-stop;
|
||||
|
||||
&:hover {
|
||||
color: $control-button-stop-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.control-button-restart {
|
||||
color: $control-button-restart;
|
||||
|
||||
&:hover {
|
||||
color: $control-button-restart-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.control-button-control {
|
||||
color: $control-button-control;
|
||||
|
||||
&:hover {
|
||||
color: $control-button-control-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.clip-progress {
|
||||
height: 5px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
@media (max-width: 1555px) {
|
||||
.control-row {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.control-col {
|
||||
height: 100%;
|
||||
min-height: inherit;
|
||||
}
|
||||
.status-col {
|
||||
padding-right: 0;
|
||||
height: 100%;
|
||||
flex: 0 0 60%;
|
||||
max-width: 60%;
|
||||
}
|
||||
.current-clip {
|
||||
min-width: 300px;
|
||||
}
|
||||
.time-str {
|
||||
font-size: 3.5em;
|
||||
}
|
||||
.control-unit-row {
|
||||
margin-right: -30px;
|
||||
}
|
||||
.control-unit-col {
|
||||
flex: 0 0 35%;
|
||||
max-width: 35%;
|
||||
margin: 0 0 0 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1337px) {
|
||||
.status-col {
|
||||
flex: 0 0 47%;
|
||||
max-width: 47%;
|
||||
height: 68%;
|
||||
}
|
||||
.control-unit-col {
|
||||
flex: 0 0 47%;
|
||||
max-width: 47%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1102px) {
|
||||
.control-unit-row .col {
|
||||
min-height: 70px;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.control-button {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 889px) {
|
||||
.control-row {
|
||||
min-height: 540px;
|
||||
}
|
||||
|
||||
.status-col {
|
||||
flex: 0 0 94%;
|
||||
max-width: 94%;
|
||||
height: 68%;
|
||||
}
|
||||
.control-unit-col {
|
||||
flex: 0 0 94%;
|
||||
max-width: 94%;
|
||||
margin: 0;
|
||||
padding-left: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 689px) {
|
||||
.player-col {
|
||||
flex: 0 0 98%;
|
||||
max-width: 98%;
|
||||
padding-top: 30px;
|
||||
}
|
||||
.control-row {
|
||||
min-height: 830px;
|
||||
}
|
||||
.control-col {
|
||||
margin: 0;
|
||||
}
|
||||
.control-unit-col,
|
||||
.status-col {
|
||||
flex: 0 0 96%;
|
||||
max-width: 96%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
401
components/PlaylistGenerator.vue
Normal file
401
components/PlaylistGenerator.vue
Normal file
@ -0,0 +1,401 @@
|
||||
<template>
|
||||
<div class="z-50 fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/30">
|
||||
<div
|
||||
class="flex flex-col bg-base-100 w-[800px] min-w-[400px] max-w-[90%] h-auto min-h-[600px] max-h-[80%] rounded-md p-5 shadow-xl"
|
||||
>
|
||||
<div class="font-bold text-lg">Generate Program</div>
|
||||
|
||||
<div class="h-[600px] mt-3">
|
||||
<div role="tablist" class="tabs tabs-lifted h-full">
|
||||
<input
|
||||
type="radio"
|
||||
name="my_tabs_2"
|
||||
role="tab"
|
||||
class="tab"
|
||||
aria-label="Simple"
|
||||
@change="advancedGenerator = false"
|
||||
checked
|
||||
/>
|
||||
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-4">
|
||||
<div class="h-full">
|
||||
<nav class="breadcrumbs px-3">
|
||||
<ul>
|
||||
<li v-for="(crumb, index) in mediaStore.crumbs" :key="index">
|
||||
<button
|
||||
v-if="mediaStore.crumbs.length > 1 && mediaStore.crumbs.length - 1 > index"
|
||||
@click="mediaStore.getTree(crumb.path)"
|
||||
>
|
||||
<i class="bi-folder-fill me-1" />
|
||||
{{ crumb.text }}
|
||||
</button>
|
||||
<span v-else><i class="bi-folder-fill me-1" />{{ crumb.text }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<ul class="bg-base-300 h-[500px] overflow-auto m-1 py-1">
|
||||
<li
|
||||
class="list-group-item browser-item even:bg-base-200 px-2"
|
||||
v-for="folder in mediaStore.folderList.folders"
|
||||
:key="folder.uid"
|
||||
>
|
||||
<div class="grid grid-cols-[auto_40px]">
|
||||
<div class="col browser-item-text">
|
||||
<button
|
||||
@click="
|
||||
;[
|
||||
(selectedFolders = []),
|
||||
mediaStore.getTree(
|
||||
`/${mediaStore.folderList.source}/${folder.name}`.replace(
|
||||
/\/[/]+/g,
|
||||
'/'
|
||||
),
|
||||
true
|
||||
),
|
||||
]
|
||||
"
|
||||
>
|
||||
<i class="bi-folder-fill" />
|
||||
{{ folder.name }}
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="!generateFromAll" class="text-center">
|
||||
<input
|
||||
class="checkbox checkbox-xs rounded"
|
||||
type="checkbox"
|
||||
@change="
|
||||
setSelectedFolder(
|
||||
$event,
|
||||
`/${mediaStore.folderList.source}/${folder.name}`.replace(
|
||||
/\/[/]+/g,
|
||||
'/'
|
||||
)
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="radio"
|
||||
name="my_tabs_2"
|
||||
role="tab"
|
||||
class="tab"
|
||||
aria-label="Advanced"
|
||||
@change=";(advancedGenerator = true), resetCheckboxes()"
|
||||
/>
|
||||
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col col-10">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb border-0">
|
||||
<li
|
||||
class="breadcrumb-item"
|
||||
v-for="(crumb, index) in mediaStore.folderCrumbs"
|
||||
:key="index"
|
||||
:active="index === mediaStore.folderCrumbs.length - 1"
|
||||
@click.prevent="mediaStore.getTree(crumb.path, true)"
|
||||
>
|
||||
<a
|
||||
v-if="
|
||||
mediaStore.folderCrumbs.length > 1 &&
|
||||
mediaStore.folderCrumbs.length - 1 > index
|
||||
"
|
||||
href="#"
|
||||
>
|
||||
{{ crumb.text }}
|
||||
</a>
|
||||
<span v-else>{{ crumb.text }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col d-flex justify-content-end">
|
||||
<button type="button" class="btn btn-primary p-2 py-0 m-1" @click="addTemplate()">
|
||||
<i class="bi bi-folder-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-5 browser-col">
|
||||
<Sortable
|
||||
:list="mediaStore.folderList.folders"
|
||||
:options="templateBrowserSortOptions"
|
||||
item-key="uid"
|
||||
class="list-group media-browser-scroll browser-div"
|
||||
tag="ul"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<li
|
||||
:id="`adv_folder_${index}`"
|
||||
class="draggable list-group-item browser-item"
|
||||
:key="element.uid"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-1 browser-icons-col">
|
||||
<i class="bi-folder-fill browser-icons" />
|
||||
</div>
|
||||
<div class="col browser-item-text">
|
||||
<a
|
||||
class="link-light"
|
||||
href="#"
|
||||
@click="
|
||||
;[
|
||||
(selectedFolders = []),
|
||||
mediaStore.getTree(
|
||||
`/${mediaStore.folderList.source}/${element.name}`.replace(
|
||||
/\/[/]+/g,
|
||||
'/'
|
||||
),
|
||||
true
|
||||
),
|
||||
]
|
||||
"
|
||||
>
|
||||
{{ element.name }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
</Sortable>
|
||||
</div>
|
||||
<div class="col template-col">
|
||||
<ul class="list-group media-browser-scroll">
|
||||
<li v-for="item in template.sources" :key="item.start" class="list-group-item">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">Start</span>
|
||||
<input
|
||||
type="test"
|
||||
class="form-control"
|
||||
aria-label="Start"
|
||||
v-model="item.start"
|
||||
/>
|
||||
<span class="input-group-text">Duration</span>
|
||||
<input
|
||||
type="test"
|
||||
class="form-control"
|
||||
aria-label="Duration"
|
||||
v-model="item.duration"
|
||||
/>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="btn-check"
|
||||
:id="`shuffle-${item.start}`"
|
||||
autocomplete="off"
|
||||
v-model="item.shuffle"
|
||||
/>
|
||||
<label class="btn btn-outline-primary" :for="`shuffle-${item.start}`">
|
||||
Shuffle
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Sortable
|
||||
:list="item.paths"
|
||||
item-key="index"
|
||||
class="list-group w-100 border"
|
||||
:style="`height: ${item.paths ? item.paths.length * 23 + 31 : 300}px`"
|
||||
tag="ul"
|
||||
:options="templateTargetSortOptions"
|
||||
@add="addFolderToTemplate($event, item)"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<li
|
||||
:id="`path_${index}`"
|
||||
class="draggable grabbing list-group-item py-0"
|
||||
:key="index"
|
||||
>
|
||||
{{ element.split(/[\\/]+/).pop() }}
|
||||
</li>
|
||||
</template>
|
||||
</Sortable>
|
||||
|
||||
<div class="col d-flex justify-content-end">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary p-2 py-0 m-1"
|
||||
@click="removeTemplate(item)"
|
||||
>
|
||||
<i class="bi-trash" />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex h-14 pt-6 justify-end items-center">
|
||||
<div v-if="!advancedGenerator" class="form-control">
|
||||
<label class="label cursor-pointer w-12">
|
||||
<span class="label-text">All</span>
|
||||
<input type="checkbox" v-model="generateFromAll" class="checkbox checkbox-xs rounded" @change="resetCheckboxes()" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="join ms-2">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-primary join-item"
|
||||
data-bs-dismiss="modal"
|
||||
@click="resetCheckboxes(), resetTemplate()"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-sm btn-primary join-item"
|
||||
data-bs-dismiss="modal"
|
||||
@click="generatePlaylist()"
|
||||
>
|
||||
Ok
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
const authStore = useAuth()
|
||||
const configStore = useConfig()
|
||||
const indexStore = useIndex()
|
||||
const mediaStore = useMedia()
|
||||
const playlistStore = usePlaylist()
|
||||
|
||||
const { processPlaylist } = playlistOperations()
|
||||
const contentType = { 'content-type': 'application/json;charset=UTF-8' }
|
||||
|
||||
const advancedGenerator = ref(false)
|
||||
const playlistIsLoading = ref(false)
|
||||
const selectedFolders = ref([] as string[])
|
||||
const generateFromAll = ref(false)
|
||||
const template = ref({
|
||||
sources: [],
|
||||
} as Template)
|
||||
|
||||
const templateBrowserSortOptions = {
|
||||
group: { name: 'folder', pull: 'clone', put: false },
|
||||
sort: false,
|
||||
}
|
||||
const templateTargetSortOptions = {
|
||||
group: 'folder',
|
||||
animation: 100,
|
||||
handle: '.grabbing',
|
||||
}
|
||||
|
||||
async function generatePlaylist() {
|
||||
playlistIsLoading.value = true
|
||||
let body = null as BodyObject | null
|
||||
|
||||
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 }
|
||||
}
|
||||
}
|
||||
|
||||
await $fetch(`/api/playlist/${configStore.configGui[configStore.configID].id}/generate/${playlistStore.listDate}`, {
|
||||
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)
|
||||
})
|
||||
.catch((e: any) => {
|
||||
indexStore.msgAlert('alert-error', e.data ? e.data : e, 4)
|
||||
})
|
||||
|
||||
// reset selections
|
||||
resetCheckboxes()
|
||||
resetTemplate()
|
||||
|
||||
playlistIsLoading.value = false
|
||||
}
|
||||
|
||||
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 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 resetTemplate() {
|
||||
template.value.sources = []
|
||||
}
|
||||
|
||||
function removeTemplate(item: TemplateItem) {
|
||||
const index = template.value.sources.indexOf(item)
|
||||
|
||||
template.value.sources.splice(index, 1)
|
||||
}
|
||||
|
||||
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: [],
|
||||
})
|
||||
}
|
||||
</script>
|
||||
707
pages/player.vue
707
pages/player.vue
@ -163,12 +163,7 @@
|
||||
</div>
|
||||
|
||||
<div class="join flex justify-end m-3">
|
||||
<button
|
||||
class="btn btn-sm btn-primary join-item"
|
||||
title="Copy Playlist"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#copyModal"
|
||||
>
|
||||
<button class="btn btn-sm btn-primary join-item" title="Copy Playlist" @click="showCopyModal = true">
|
||||
<i class="bi-files" />
|
||||
</button>
|
||||
<button
|
||||
@ -189,32 +184,27 @@
|
||||
<button
|
||||
class="btn btn-sm btn-primary join-item"
|
||||
title="Import text/m3u file"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#importModal"
|
||||
@click="showImportModal = true"
|
||||
>
|
||||
<i class="bi-file-text" />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-primary join-item"
|
||||
title="Generate a randomized Playlist"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#generateModal"
|
||||
@click="mediaStore.getTree('', true)"
|
||||
@click="mediaStore.getTree('', true), (showPlaylistGenerator = true)"
|
||||
>
|
||||
<i class="bi-sort-down-alt" />
|
||||
</button>
|
||||
<button class="btn btn-sm btn-primary join-item" title="Reset Playlist" @click="getPlaylist()">
|
||||
<i class="bi-arrow-counterclockwise" />
|
||||
</button>
|
||||
<button class="btn btn-sm btn-primary join-item" title="Save Playlist" @click="savePlaylist(listDate)">
|
||||
<i class="bi-download" />
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm btn-primary join-item"
|
||||
title="Delete Playlist"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#deleteModal"
|
||||
title="Save Playlist"
|
||||
@click=";(targetDate = listDate), savePlaylist(true)"
|
||||
>
|
||||
<i class="bi-download" />
|
||||
</button>
|
||||
<button class="btn btn-sm btn-primary join-item" title="Delete Playlist" @click="showDeleteModal = true">
|
||||
<i class="bi-trash" />
|
||||
</button>
|
||||
</div>
|
||||
@ -283,398 +273,27 @@
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<div id="importModal" class="modal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="importModalLabel">Import Playlist</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cancel"></button>
|
||||
</div>
|
||||
<form @submit.prevent="onSubmitImport">
|
||||
<div class="modal-body">
|
||||
<input class="form-control" ref="fileImport" type="file" v-on:change="onFileChange" />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="reset" class="btn btn-primary" data-bs-dismiss="modal" aria-label="Cancel">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Import</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal :show="showImportModal" title="Import Playlist" :modal-action="importPlaylist">
|
||||
<input
|
||||
ref="fileImport"
|
||||
type="file"
|
||||
class="file-input file-input-sm file-input-bordered w-full"
|
||||
v-on:change="onFileChange"
|
||||
multiple
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
<div id="copyModal" class="modal" tabindex="-1" aria-labelledby="copyModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="copyModalLabel">Copy Program {{ listDate }} to:</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cancel"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input type="date" class="form-control centered" v-model="targetDate" />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-bs-dismiss="modal"
|
||||
@click="savePlaylist(targetDate)"
|
||||
>
|
||||
Ok
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal :show="showCopyModal" :title="`Copy Program ${listDate}`" :modal-action="savePlaylist">
|
||||
<input type="date" class="input input-sm input-bordered w-full" v-model="targetDate" />
|
||||
</Modal>
|
||||
|
||||
<div id="deleteModal" class="modal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="deleteModalLabel">Delete Program</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cancel"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
Delete program from <strong>{{ listDate }}</strong>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Cancel</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-bs-dismiss="modal"
|
||||
@click="deletePlaylist(listDate)"
|
||||
>
|
||||
Ok
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal :show="showDeleteModal" title="Delete Program" :modal-action="deletePlaylist">
|
||||
<span>
|
||||
Delete program from <strong>{{ listDate }}</strong>
|
||||
</span>
|
||||
</Modal>
|
||||
|
||||
<div
|
||||
id="generateModal"
|
||||
class="modal modal-xl"
|
||||
tabindex="-1"
|
||||
aria-labelledby="generateModalLabel"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="generateModalLabel">Generate Program</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cancel"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="browser-col">
|
||||
<div class="nav nav-tabs" id="v-pills-tab" role="tablist" aria-orientation="vertical">
|
||||
<button
|
||||
class="nav-link active"
|
||||
id="v-pills-gui-tab"
|
||||
data-bs-toggle="pill"
|
||||
data-bs-target="#v-pills-gui"
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-controls="v-pills-gui"
|
||||
aria-selected="true"
|
||||
@click="advancedGenerator = false"
|
||||
>
|
||||
Simple
|
||||
</button>
|
||||
<button
|
||||
class="nav-link"
|
||||
id="v-pills-playout-tab"
|
||||
data-bs-toggle="pill"
|
||||
data-bs-target="#v-pills-playout"
|
||||
type="button"
|
||||
role="tab"
|
||||
aria-controls="v-pills-playout"
|
||||
aria-selected="false"
|
||||
@click=";(advancedGenerator = true), resetCheckboxes()"
|
||||
>
|
||||
Advanced
|
||||
</button>
|
||||
</div>
|
||||
<div class="tab-content h-100" id="v-pills-tabContent">
|
||||
<div
|
||||
class="tab-pane h-100 show active"
|
||||
id="v-pills-gui"
|
||||
role="tabpanel"
|
||||
aria-labelledby="v-pills-gui-tab"
|
||||
>
|
||||
<div class="h-100">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb border-0">
|
||||
<li
|
||||
class="breadcrumb-item"
|
||||
v-for="(crumb, index) in mediaStore.folderCrumbs"
|
||||
:key="index"
|
||||
:active="index === mediaStore.folderCrumbs.length - 1"
|
||||
@click="mediaStore.getTree(crumb.path, true)"
|
||||
>
|
||||
<a
|
||||
v-if="
|
||||
mediaStore.folderCrumbs.length > 1 &&
|
||||
mediaStore.folderCrumbs.length - 1 > index
|
||||
"
|
||||
href="#"
|
||||
>
|
||||
{{ crumb.text }}
|
||||
</a>
|
||||
<span v-else>{{ crumb.text }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<ul class="list-group media-browser-scroll browser-div">
|
||||
<li
|
||||
class="list-group-item browser-item"
|
||||
v-for="folder in mediaStore.folderList.folders"
|
||||
:key="folder.uid"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-1 browser-icons-col">
|
||||
<i class="bi-folder-fill browser-icons" />
|
||||
</div>
|
||||
<div class="col browser-item-text">
|
||||
<a
|
||||
class="link-light"
|
||||
href="#"
|
||||
@click="
|
||||
;[
|
||||
(selectedFolders = []),
|
||||
mediaStore.getTree(
|
||||
`/${mediaStore.folderList.source}/${folder.name}`.replace(
|
||||
/\/[/]+/g,
|
||||
'/'
|
||||
),
|
||||
true
|
||||
),
|
||||
]
|
||||
"
|
||||
>
|
||||
{{ folder.name }}
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
v-if="!generateFromAll"
|
||||
class="col-1 text-center playlist-input"
|
||||
>
|
||||
<input
|
||||
class="form-check-input folder-check"
|
||||
type="checkbox"
|
||||
@change="
|
||||
setSelectedFolder(
|
||||
$event,
|
||||
`/${mediaStore.folderList.source}/${folder.name}`.replace(
|
||||
/\/[/]+/g,
|
||||
'/'
|
||||
)
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="tab-pane"
|
||||
id="v-pills-playout"
|
||||
role="tabpanel"
|
||||
aria-labelledby="v-pills-playout-tab"
|
||||
>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col col-10">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb border-0">
|
||||
<li
|
||||
class="breadcrumb-item"
|
||||
v-for="(crumb, index) in mediaStore.folderCrumbs"
|
||||
:key="index"
|
||||
:active="index === mediaStore.folderCrumbs.length - 1"
|
||||
@click.prevent="mediaStore.getTree(crumb.path, true)"
|
||||
>
|
||||
<a
|
||||
v-if="
|
||||
mediaStore.folderCrumbs.length > 1 &&
|
||||
mediaStore.folderCrumbs.length - 1 > index
|
||||
"
|
||||
href="#"
|
||||
>
|
||||
{{ crumb.text }}
|
||||
</a>
|
||||
<span v-else>{{ crumb.text }}</span>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="col d-flex justify-content-end">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary p-2 py-0 m-1"
|
||||
@click="addTemplate()"
|
||||
>
|
||||
<i class="bi bi-folder-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-5 browser-col">
|
||||
<Sortable
|
||||
:list="mediaStore.folderList.folders"
|
||||
:options="templateBrowserSortOptions"
|
||||
item-key="uid"
|
||||
class="list-group media-browser-scroll browser-div"
|
||||
tag="ul"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<li
|
||||
:id="`adv_folder_${index}`"
|
||||
class="draggable list-group-item browser-item"
|
||||
:key="element.uid"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-1 browser-icons-col">
|
||||
<i class="bi-folder-fill browser-icons" />
|
||||
</div>
|
||||
<div class="col browser-item-text">
|
||||
<a
|
||||
class="link-light"
|
||||
href="#"
|
||||
@click="
|
||||
;[
|
||||
(selectedFolders = []),
|
||||
mediaStore.getTree(
|
||||
`/${mediaStore.folderList.source}/${element.name}`.replace(
|
||||
/\/[/]+/g,
|
||||
'/'
|
||||
),
|
||||
true
|
||||
),
|
||||
]
|
||||
"
|
||||
>
|
||||
{{ element.name }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
</Sortable>
|
||||
</div>
|
||||
<div class="col template-col">
|
||||
<ul class="list-group media-browser-scroll">
|
||||
<li
|
||||
v-for="item in template.sources"
|
||||
:key="item.start"
|
||||
class="list-group-item"
|
||||
>
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">Start</span>
|
||||
<input
|
||||
type="test"
|
||||
class="form-control"
|
||||
aria-label="Start"
|
||||
v-model="item.start"
|
||||
/>
|
||||
<span class="input-group-text">Duration</span>
|
||||
<input
|
||||
type="test"
|
||||
class="form-control"
|
||||
aria-label="Duration"
|
||||
v-model="item.duration"
|
||||
/>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="btn-check"
|
||||
:id="`shuffle-${item.start}`"
|
||||
autocomplete="off"
|
||||
v-model="item.shuffle"
|
||||
/>
|
||||
<label
|
||||
class="btn btn-outline-primary"
|
||||
:for="`shuffle-${item.start}`"
|
||||
>
|
||||
Shuffle
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<Sortable
|
||||
:list="item.paths"
|
||||
item-key="index"
|
||||
class="list-group w-100 border"
|
||||
:style="`height: ${
|
||||
item.paths ? item.paths.length * 23 + 31 : 300
|
||||
}px`"
|
||||
tag="ul"
|
||||
:options="templateTargetSortOptions"
|
||||
@add="addFolderToTemplate($event, item)"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<li
|
||||
:id="`path_${index}`"
|
||||
class="draggable grabbing list-group-item py-0"
|
||||
:key="index"
|
||||
>
|
||||
{{ element.split(/[\\/]+/).pop() }}
|
||||
</li>
|
||||
</template>
|
||||
</Sortable>
|
||||
|
||||
<div class="col d-flex justify-content-end">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary p-2 py-0 m-1"
|
||||
@click="removeTemplate(item)"
|
||||
>
|
||||
<i class="bi-trash" />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div v-if="!advancedGenerator" class="form-check select-all-div">
|
||||
<input
|
||||
id="checkAll"
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
v-model="generateFromAll"
|
||||
@change="resetCheckboxes()"
|
||||
/>
|
||||
<label class="form-check-label" for="checkAll">All</label>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-bs-dismiss="modal"
|
||||
@click="resetCheckboxes(), resetTemplate()"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
data-bs-dismiss="modal"
|
||||
@click="generatePlaylist()"
|
||||
>
|
||||
Ok
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<PlaylistGenerator v-if="showPlaylistGenerator" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -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: [],
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user