refractor code, don't override unsaved playlist
This commit is contained in:
jb-alvarado
parent
6e036820eb
commit
7682a45e4f
103
components/MediaBrowser.vue
Normal file
103
components/MediaBrowser.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div v-if="mediaStore.isLoading" class="h-full w-full absolute z-10 flex justify-center bg-base-100/70">
|
||||
<span class="loading loading-spinner loading-lg" />
|
||||
</div>
|
||||
<div class="bg-base-100 border-b border-my-gray">
|
||||
<div v-if="mediaStore.folderTree.parent && mediaStore.crumbs">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full h-[calc(100%-48px)] overflow-auto m-1">
|
||||
<div class="flex px-1" v-for="folder in mediaStore.folderTree.folders" :key="folder.uid">
|
||||
<button class="truncate" @click="mediaStore.getTree(`/${mediaStore.folderTree.source}/${folder.name}`)">
|
||||
<i class="bi-folder-fill" />
|
||||
{{ folder.name }}
|
||||
</button>
|
||||
</div>
|
||||
<Sortable
|
||||
:list="mediaStore.folderTree.files"
|
||||
:options="browserSortOptions"
|
||||
item-key="name"
|
||||
tag="table"
|
||||
class="w-full table table-fixed"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<tr
|
||||
:id="`file-${index}`"
|
||||
class="w-full"
|
||||
:class="{ 'grabbing cursor-grab': width > 768 }"
|
||||
:key="element.name"
|
||||
>
|
||||
<td class="ps-1 py-1 w-[20px]">
|
||||
<i v-if="mediaType(element.name) === 'audio'" class="bi-music-note-beamed" />
|
||||
<i v-else-if="mediaType(element.name) === 'video'" class="bi-film" />
|
||||
<i v-else-if="mediaType(element.name) === 'image'" class="bi-file-earmark-image" />
|
||||
<i v-else class="bi-file-binary" />
|
||||
</td>
|
||||
<td class="px-[1px] py-1 truncate">
|
||||
{{ element.name }}
|
||||
</td>
|
||||
<td class="px-1 py-1 w-[30px] text-center leading-3">
|
||||
<button @click="preview(element.name)">
|
||||
<i class="bi-play-fill" />
|
||||
</button>
|
||||
</td>
|
||||
<td class="px-0 py-1 w-[65px] text-nowrap">
|
||||
{{ secToHMS(element.duration) }}
|
||||
</td>
|
||||
<td class="py-1 hidden">00:00:00</td>
|
||||
<td class="py-1 hidden">{{ secToHMS(element.duration) }}</td>
|
||||
<td class="py-1 hidden"> </td>
|
||||
<td class="py-1 hidden"> </td>
|
||||
<td class="py-1 hidden"> </td>
|
||||
</tr>
|
||||
</template>
|
||||
</Sortable>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
const { width } = useWindowSize({ initialWidth: 800 })
|
||||
const { secToHMS, mediaType } = stringFormatter()
|
||||
|
||||
const mediaStore = useMedia()
|
||||
const { configID } = storeToRefs(useConfig())
|
||||
|
||||
const browserSortOptions = {
|
||||
group: { name: 'playlist', pull: 'clone', put: false },
|
||||
handle: '.grabbing',
|
||||
sort: false,
|
||||
}
|
||||
|
||||
defineProps({
|
||||
preview: {
|
||||
type: Function,
|
||||
default() {
|
||||
return ''
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (!mediaStore.folderTree.parent) {
|
||||
mediaStore.getTree('')
|
||||
}
|
||||
})
|
||||
|
||||
watch([configID], () => {
|
||||
mediaStore.getTree('')
|
||||
})
|
||||
</script>
|
||||
241
components/PlaylistTable.vue
Normal file
241
components/PlaylistTable.vue
Normal file
@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<div id="playlist-container" class="relative w-full h-full !bg-base-300 rounded-e overflow-auto">
|
||||
<div v-if="playlistStore.isLoading" class="w-full h-full absolute z-10 flex justify-center bg-base-100/70">
|
||||
<span class="loading loading-spinner loading-lg" />
|
||||
</div>
|
||||
<table class="table table-zebra table-fixed">
|
||||
<thead class="top-0 sticky z-10">
|
||||
<tr class="bg-base-100 rounded-tr-lg">
|
||||
<th class="w-[85px] p-0 text-left">
|
||||
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
|
||||
{{ $t('player.start') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="w-auto p-0 text-left">
|
||||
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
|
||||
{{ $t('player.file') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="w-[90px] p-0 text-center">
|
||||
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
|
||||
{{ $t('player.play') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="w-[85px] p-0 text-center">
|
||||
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
|
||||
{{ $t('player.duration') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="w-[85px] p-0 text-center hidden xl:table-cell">
|
||||
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
|
||||
{{ $t('player.in') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="w-[85px] p-0 text-center hidden xl:table-cell">
|
||||
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
|
||||
{{ $t('player.out') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="w-[85px] p-0 text-center hidden xl:table-cell justify-center">
|
||||
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
|
||||
{{ $t('player.ad') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="w-[95px] p-0 text-center">
|
||||
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
|
||||
{{ $t('player.edit') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="w-[85px] p-0 text-center hidden xl:table-cell justify-center">
|
||||
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
|
||||
{{ $t('player.delete') }}
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<Sortable
|
||||
:list="playlistStore.playlist"
|
||||
item-key="uid"
|
||||
tag="tbody"
|
||||
:options="playlistSortOptions"
|
||||
@add="addClip"
|
||||
@start="addBG"
|
||||
@end="moveItemInArray"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<tr
|
||||
:id="`clip-${index}`"
|
||||
class="draggable border-t border-b border-base-content/20 duration-1000 transition-all"
|
||||
:class="{
|
||||
'!bg-lime-500/30':
|
||||
playlistStore.playoutIsRunning &&
|
||||
listDate === todayDate &&
|
||||
index === playlistStore.currentClipIndex,
|
||||
}"
|
||||
:key="element.uid"
|
||||
>
|
||||
<td class="ps-4 py-2 text-left">{{ secondsToTime(element.begin) }}</td>
|
||||
<td class="py-2 text-left truncate" :class="{ 'grabbing cursor-grab': width > 768 }">
|
||||
{{ filename(element.source) }}
|
||||
</td>
|
||||
<td class="py-2 text-center hover:text-base-content/70">
|
||||
<button @click="preview(element.source)">
|
||||
<i class="bi-play-fill" />
|
||||
</button>
|
||||
</td>
|
||||
<td class="py-2 text-center">{{ secToHMS(element.duration) }}</td>
|
||||
<td class="py-2 text-center hidden xl:table-cell">
|
||||
{{ secToHMS(element.in) }}
|
||||
</td>
|
||||
<td class="py-2 text-center hidden xl:table-cell">
|
||||
{{ secToHMS(element.out) }}
|
||||
</td>
|
||||
<td class="py-2 text-center hidden xl:table-cell leading-3">
|
||||
<input
|
||||
class="checkbox checkbox-xs rounded"
|
||||
type="checkbox"
|
||||
:checked="element.category && element.category === 'advertisement' ? true : false"
|
||||
@change="setCategory($event, element)"
|
||||
/>
|
||||
</td>
|
||||
<td class="py-2 text-center hover:text-base-content/70">
|
||||
<button @click="editItem(index)">
|
||||
<i class="bi-pencil-square" />
|
||||
</button>
|
||||
</td>
|
||||
<td class="py-2 text-center hidden xl:table-cell justify-center hover:text-base-content/70">
|
||||
<button @click="deletePlaylistItem(index)">
|
||||
<i class="bi-x-circle-fill" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</Sortable>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
const { $dayjs } = useNuxtApp()
|
||||
const { width } = useWindowSize({ initialWidth: 800 })
|
||||
|
||||
const configStore = useConfig()
|
||||
const mediaStore = useMedia()
|
||||
const playlistStore = usePlaylist()
|
||||
const { secToHMS, filename, secondsToTime } = stringFormatter()
|
||||
const { processPlaylist, genUID } = playlistOperations()
|
||||
|
||||
const todayDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
|
||||
const { listDate } = storeToRefs(usePlaylist())
|
||||
|
||||
const playlistSortOptions = {
|
||||
group: 'playlist',
|
||||
animation: 100,
|
||||
handle: '.grabbing',
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
getPlaylist: {
|
||||
type: Function,
|
||||
default() {
|
||||
return ''
|
||||
},
|
||||
},
|
||||
editItem: {
|
||||
type: Function,
|
||||
default() {
|
||||
return ''
|
||||
},
|
||||
},
|
||||
preview: {
|
||||
type: Function,
|
||||
default() {
|
||||
return ''
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
props.getPlaylist()
|
||||
})
|
||||
|
||||
watch([listDate], async () => {
|
||||
await props.getPlaylist()
|
||||
})
|
||||
|
||||
function setCategory(event: any, item: PlaylistItem) {
|
||||
if (event.target.checked) {
|
||||
item.category = 'advertisement'
|
||||
} else {
|
||||
item.category = ''
|
||||
}
|
||||
}
|
||||
|
||||
function addBG(obj: any) {
|
||||
if (obj.item) {
|
||||
obj.item.classList.add('!bg-fuchsia-900/30')
|
||||
} else {
|
||||
obj.classList.add('!bg-fuchsia-900/30')
|
||||
}
|
||||
}
|
||||
|
||||
function removeBG(item: any) {
|
||||
setTimeout(() => {
|
||||
item.classList.remove('!bg-fuchsia-900/30')
|
||||
}, 100)
|
||||
}
|
||||
|
||||
function addClip(event: any) {
|
||||
const o = event.oldIndex
|
||||
const n = event.newIndex
|
||||
const uid = genUID()
|
||||
|
||||
event.item.remove()
|
||||
|
||||
const storagePath = configStore.configPlayout.storage.path
|
||||
const sourcePath = `${storagePath}/${mediaStore.folderTree.source}/${mediaStore.folderTree.files[o].name}`.replace(
|
||||
/\/[/]+/g,
|
||||
'/'
|
||||
)
|
||||
|
||||
playlistStore.playlist.splice(n, 0, {
|
||||
uid,
|
||||
begin: 0,
|
||||
source: sourcePath,
|
||||
in: 0,
|
||||
out: mediaStore.folderTree.files[o].duration,
|
||||
duration: mediaStore.folderTree.files[o].duration,
|
||||
})
|
||||
|
||||
playlistStore.playlist = processPlaylist(
|
||||
configStore.startInSec,
|
||||
configStore.playlistLength,
|
||||
playlistStore.playlist,
|
||||
false
|
||||
)
|
||||
|
||||
nextTick(() => {
|
||||
const newNode = document.getElementById(`clip-${n}`)
|
||||
addBG(newNode)
|
||||
removeBG(newNode)
|
||||
})
|
||||
}
|
||||
|
||||
function moveItemInArray(event: any) {
|
||||
playlistStore.playlist.splice(event.newIndex, 0, playlistStore.playlist.splice(event.oldIndex, 1)[0])
|
||||
|
||||
playlistStore.playlist = processPlaylist(
|
||||
configStore.startInSec,
|
||||
configStore.playlistLength,
|
||||
playlistStore.playlist,
|
||||
false
|
||||
)
|
||||
|
||||
removeBG(event.item)
|
||||
}
|
||||
|
||||
function deletePlaylistItem(index: number) {
|
||||
playlistStore.playlist.splice(index, 1)
|
||||
}
|
||||
</script>
|
||||
@ -65,6 +65,7 @@ export default {
|
||||
reset: 'Wiedergabeliste zurücksetzen',
|
||||
save: 'Wiedergabeliste speichern',
|
||||
deletePlaylist: 'Wiedergabeliste löschen',
|
||||
unsavedProgram: 'Es existiert Programm das nicht gespeichert ist!',
|
||||
},
|
||||
media: {
|
||||
notExists: 'Speicher existiert nicht!',
|
||||
|
||||
@ -65,6 +65,7 @@ export default {
|
||||
reset: 'Reset Playlist',
|
||||
save: 'Save Playlist',
|
||||
deletePlaylist: 'Delete Playlist',
|
||||
unsavedProgram: 'There is a program that is not saved!',
|
||||
},
|
||||
media: {
|
||||
notExists: 'Storage not exist!',
|
||||
|
||||
323
pages/player.vue
323
pages/player.vue
@ -27,212 +27,14 @@
|
||||
max-size="80"
|
||||
size="20"
|
||||
>
|
||||
<div
|
||||
v-if="mediaStore.isLoading"
|
||||
class="h-full w-full absolute z-10 flex justify-center bg-base-100/70"
|
||||
>
|
||||
<span class="loading loading-spinner loading-lg" />
|
||||
</div>
|
||||
<div class="bg-base-100 border-b border-my-gray">
|
||||
<div v-if="mediaStore.folderTree.parent && mediaStore.crumbs">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full h-[calc(100%-48px)] overflow-auto m-1">
|
||||
<div class="flex px-1" v-for="folder in mediaStore.folderTree.folders" :key="folder.uid">
|
||||
<button
|
||||
class="truncate"
|
||||
@click="mediaStore.getTree(`/${mediaStore.folderTree.source}/${folder.name}`)"
|
||||
>
|
||||
<i class="bi-folder-fill" />
|
||||
{{ folder.name }}
|
||||
</button>
|
||||
</div>
|
||||
<Sortable
|
||||
:list="mediaStore.folderTree.files"
|
||||
:options="browserSortOptions"
|
||||
item-key="name"
|
||||
tag="table"
|
||||
class="w-full table table-fixed"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<tr
|
||||
:id="`file-${index}`"
|
||||
class="w-full"
|
||||
:class="{ 'grabbing cursor-grab': width > 768 }"
|
||||
:key="element.name"
|
||||
>
|
||||
<td class="ps-1 py-1 w-[20px]">
|
||||
<i v-if="mediaType(element.name) === 'audio'" class="bi-music-note-beamed" />
|
||||
<i v-else-if="mediaType(element.name) === 'video'" class="bi-film" />
|
||||
<i
|
||||
v-else-if="mediaType(element.name) === 'image'"
|
||||
class="bi-file-earmark-image"
|
||||
/>
|
||||
<i v-else class="bi-file-binary" />
|
||||
</td>
|
||||
<td class="px-[1px] py-1 truncate">
|
||||
{{ element.name }}
|
||||
</td>
|
||||
<td class="px-1 py-1 w-[30px] text-center leading-3">
|
||||
<button @click=";(showPreviewModal = true), setPreviewData(element.name)">
|
||||
<i class="bi-play-fill" />
|
||||
</button>
|
||||
</td>
|
||||
<td class="px-0 py-1 w-[65px] text-nowrap">
|
||||
{{ secToHMS(element.duration) }}
|
||||
</td>
|
||||
<td class="py-1 hidden">00:00:00</td>
|
||||
<td class="py-1 hidden">{{ secToHMS(element.duration) }}</td>
|
||||
<td class="py-1 hidden"> </td>
|
||||
<td class="py-1 hidden"> </td>
|
||||
<td class="py-1 hidden"> </td>
|
||||
</tr>
|
||||
</template>
|
||||
</Sortable>
|
||||
</div>
|
||||
<MediaBrowser :preview="setPreviewData" />
|
||||
</pane>
|
||||
<pane>
|
||||
<div id="playlist-container" class="relative w-full h-full !bg-base-300 rounded-e overflow-auto">
|
||||
<div
|
||||
v-if="playlistStore.isLoading"
|
||||
class="w-full h-full absolute z-10 flex justify-center bg-base-100/70"
|
||||
>
|
||||
<span class="loading loading-spinner loading-lg" />
|
||||
</div>
|
||||
<table class="table table-zebra table-fixed">
|
||||
<thead class="top-0 sticky z-10">
|
||||
<tr class="bg-base-100 rounded-tr-lg">
|
||||
<th class="w-[85px] p-0 text-left">
|
||||
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
|
||||
{{ $t('player.start') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="w-auto p-0 text-left">
|
||||
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
|
||||
{{ $t('player.file') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="w-[90px] p-0 text-center">
|
||||
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
|
||||
{{ $t('player.play') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="w-[85px] p-0 text-center">
|
||||
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
|
||||
{{ $t('player.duration') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="w-[85px] p-0 text-center hidden xl:table-cell">
|
||||
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
|
||||
{{ $t('player.in') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="w-[85px] p-0 text-center hidden xl:table-cell">
|
||||
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
|
||||
{{ $t('player.out') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="w-[85px] p-0 text-center hidden xl:table-cell justify-center">
|
||||
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
|
||||
{{ $t('player.ad') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="w-[95px] p-0 text-center">
|
||||
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
|
||||
{{ $t('player.edit') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="w-[85px] p-0 text-center hidden xl:table-cell justify-center">
|
||||
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
|
||||
{{ $t('player.delete') }}
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<Sortable
|
||||
:list="playlistStore.playlist"
|
||||
item-key="uid"
|
||||
tag="tbody"
|
||||
:options="playlistSortOptions"
|
||||
@add="addClip"
|
||||
@start="addBG"
|
||||
@end="moveItemInArray"
|
||||
>
|
||||
<template #item="{ element, index }">
|
||||
<tr
|
||||
:id="`clip-${index}`"
|
||||
class="draggable border-t border-b border-base-content/20 duration-1000 transition-all"
|
||||
:class="{
|
||||
'!bg-lime-500/30':
|
||||
playlistStore.playoutIsRunning &&
|
||||
listDate === todayDate &&
|
||||
index === playlistStore.currentClipIndex,
|
||||
}"
|
||||
:key="element.uid"
|
||||
>
|
||||
<td class="ps-4 py-2 text-left">{{ secondsToTime(element.begin) }}</td>
|
||||
<td
|
||||
class="py-2 text-left truncate"
|
||||
:class="{ 'grabbing cursor-grab': width > 768 }"
|
||||
>
|
||||
{{ filename(element.source) }}
|
||||
</td>
|
||||
<td class="py-2 text-center hover:text-base-content/70">
|
||||
<button @click=";(showPreviewModal = true), setPreviewData(element.source)">
|
||||
<i class="bi-play-fill" />
|
||||
</button>
|
||||
</td>
|
||||
<td class="py-2 text-center">{{ secToHMS(element.duration) }}</td>
|
||||
<td class="py-2 text-center hidden xl:table-cell">
|
||||
{{ secToHMS(element.in) }}
|
||||
</td>
|
||||
<td class="py-2 text-center hidden xl:table-cell">
|
||||
{{ secToHMS(element.out) }}
|
||||
</td>
|
||||
<td class="py-2 text-center hidden xl:table-cell leading-3">
|
||||
<input
|
||||
class="checkbox checkbox-xs rounded"
|
||||
type="checkbox"
|
||||
:checked="
|
||||
element.category && element.category === 'advertisement'
|
||||
? true
|
||||
: false
|
||||
"
|
||||
@change="setCategory($event, element)"
|
||||
/>
|
||||
</td>
|
||||
<td class="py-2 text-center hover:text-base-content/70">
|
||||
<button @click=";(showSourceModal = true), editPlaylistItem(index)">
|
||||
<i class="bi-pencil-square" />
|
||||
</button>
|
||||
</td>
|
||||
<td
|
||||
class="py-2 text-center hidden xl:table-cell justify-center hover:text-base-content/70"
|
||||
>
|
||||
<button @click="deletePlaylistItem(index)">
|
||||
<i class="bi-x-circle-fill" />
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</Sortable>
|
||||
</table>
|
||||
</div>
|
||||
<PlaylistTable
|
||||
:get-playlist="getPlaylist"
|
||||
:edit-item="editPlaylistItem"
|
||||
:preview="setPreviewData"
|
||||
/>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
</div>
|
||||
@ -270,7 +72,7 @@
|
||||
>
|
||||
<i class="bi-sort-down-alt" />
|
||||
</button>
|
||||
<button class="btn btn-sm btn-primary join-item" :title="$t('player.reset')" @click="getPlaylist()">
|
||||
<button class="btn btn-sm btn-primary join-item" :title="$t('player.reset')" @click=";(playlistStore.playlist.length = 0), getPlaylist()">
|
||||
<i class="bi-arrow-counterclockwise" />
|
||||
</button>
|
||||
<button
|
||||
@ -388,7 +190,7 @@ const colorMode = useColorMode()
|
||||
const { locale } = useI18n()
|
||||
const { $_, $dayjs } = useNuxtApp()
|
||||
const { width } = useWindowSize({ initialWidth: 800 })
|
||||
const { secToHMS, filename, secondsToTime, toMin, mediaType } = stringFormatter()
|
||||
const { mediaType } = stringFormatter()
|
||||
const { processPlaylist, genUID } = playlistOperations()
|
||||
const contentType = { 'content-type': 'application/json;charset=UTF-8' }
|
||||
|
||||
@ -402,7 +204,6 @@ useHead({
|
||||
title: 'Player | ffplayout',
|
||||
})
|
||||
|
||||
const { configID } = storeToRefs(useConfig())
|
||||
const { listDate } = storeToRefs(usePlaylist())
|
||||
|
||||
const todayDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
|
||||
@ -422,17 +223,6 @@ const previewUrl = ref('')
|
||||
const previewOpt = ref()
|
||||
const isVideo = ref(false)
|
||||
|
||||
const browserSortOptions = {
|
||||
group: { name: 'playlist', pull: 'clone', put: false },
|
||||
handle: '.grabbing',
|
||||
sort: false,
|
||||
}
|
||||
const playlistSortOptions = {
|
||||
group: 'playlist',
|
||||
animation: 100,
|
||||
handle: '.grabbing',
|
||||
}
|
||||
|
||||
const newSource = ref({
|
||||
begin: 0,
|
||||
in: 0,
|
||||
@ -445,22 +235,6 @@ const newSource = ref({
|
||||
uid: '',
|
||||
} as PlaylistItem)
|
||||
|
||||
onMounted(() => {
|
||||
if (!mediaStore.folderTree.parent) {
|
||||
mediaStore.getTree('')
|
||||
}
|
||||
|
||||
getPlaylist()
|
||||
})
|
||||
|
||||
watch([configID], () => {
|
||||
mediaStore.getTree('')
|
||||
})
|
||||
|
||||
watch([listDate], async () => {
|
||||
await getPlaylist()
|
||||
})
|
||||
|
||||
function scrollTo(index: number) {
|
||||
const child = document.getElementById(`clip-${index}`)
|
||||
const parent = document.getElementById('playlist-container')
|
||||
@ -496,77 +270,6 @@ function closePlayer() {
|
||||
isVideo.value = false
|
||||
}
|
||||
|
||||
function setCategory(event: any, item: PlaylistItem) {
|
||||
if (event.target.checked) {
|
||||
item.category = 'advertisement'
|
||||
} else {
|
||||
item.category = ''
|
||||
}
|
||||
}
|
||||
|
||||
function addBG(obj: any) {
|
||||
if (obj.item) {
|
||||
obj.item.classList.add('!bg-fuchsia-900/30')
|
||||
} else {
|
||||
obj.classList.add('!bg-fuchsia-900/30')
|
||||
}
|
||||
}
|
||||
|
||||
function removeBG(item: any) {
|
||||
setTimeout(() => {
|
||||
item.classList.remove('!bg-fuchsia-900/30')
|
||||
}, 100)
|
||||
}
|
||||
|
||||
function addClip(event: any) {
|
||||
const o = event.oldIndex
|
||||
const n = event.newIndex
|
||||
const uid = genUID()
|
||||
|
||||
event.item.remove()
|
||||
|
||||
const storagePath = configStore.configPlayout.storage.path
|
||||
const sourcePath = `${storagePath}/${mediaStore.folderTree.source}/${mediaStore.folderTree.files[o].name}`.replace(
|
||||
/\/[/]+/g,
|
||||
'/'
|
||||
)
|
||||
|
||||
playlistStore.playlist.splice(n, 0, {
|
||||
uid,
|
||||
begin: 0,
|
||||
source: sourcePath,
|
||||
in: 0,
|
||||
out: mediaStore.folderTree.files[o].duration,
|
||||
duration: mediaStore.folderTree.files[o].duration,
|
||||
})
|
||||
|
||||
playlistStore.playlist = processPlaylist(
|
||||
configStore.startInSec,
|
||||
configStore.playlistLength,
|
||||
playlistStore.playlist,
|
||||
false
|
||||
)
|
||||
|
||||
nextTick(() => {
|
||||
const newNode = document.getElementById(`clip-${n}`)
|
||||
addBG(newNode)
|
||||
removeBG(newNode)
|
||||
})
|
||||
}
|
||||
|
||||
function moveItemInArray(event: any) {
|
||||
playlistStore.playlist.splice(event.newIndex, 0, playlistStore.playlist.splice(event.oldIndex, 1)[0])
|
||||
|
||||
playlistStore.playlist = processPlaylist(
|
||||
configStore.startInSec,
|
||||
configStore.playlistLength,
|
||||
playlistStore.playlist,
|
||||
false
|
||||
)
|
||||
|
||||
removeBG(event.item)
|
||||
}
|
||||
|
||||
function setPreviewData(path: string) {
|
||||
let fullPath = path
|
||||
const storagePath = configStore.configPlayout.storage.path
|
||||
@ -582,6 +285,7 @@ function setPreviewData(path: string) {
|
||||
}
|
||||
|
||||
previewName.value = fullPath.split('/').slice(-1)[0]
|
||||
showPreviewModal.value = true
|
||||
|
||||
if (path.match(/^http/)) {
|
||||
previewUrl.value = path
|
||||
@ -659,6 +363,7 @@ function processSource(process: boolean) {
|
||||
|
||||
function editPlaylistItem(i: number) {
|
||||
editId.value = i
|
||||
showSourceModal.value = true
|
||||
|
||||
newSource.value = {
|
||||
begin: playlistStore.playlist[i].begin,
|
||||
@ -681,10 +386,6 @@ function isAd(evt: any) {
|
||||
}
|
||||
}
|
||||
|
||||
function deletePlaylistItem(index: number) {
|
||||
playlistStore.playlist.splice(index, 1)
|
||||
}
|
||||
|
||||
function loopClips() {
|
||||
const tempList = []
|
||||
let length = 0
|
||||
@ -737,7 +438,7 @@ async function importPlaylist(imp: boolean) {
|
||||
}
|
||||
)
|
||||
.then((response) => {
|
||||
indexStore.msgAlert('success', response, 2)
|
||||
indexStore.msgAlert('success', String(response), 2)
|
||||
playlistStore.getPlaylist(listDate.value)
|
||||
})
|
||||
.catch((e: string) => {
|
||||
@ -819,7 +520,7 @@ async function deletePlaylist(del: boolean) {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
#playlist-container .sortable-ghost td:nth-last-child(-n+5) {
|
||||
#playlist-container .sortable-ghost td:nth-last-child(-n + 5) {
|
||||
display: table-cell !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -30,8 +30,12 @@ export const usePlaylist = defineStore('playlist', {
|
||||
getters: {},
|
||||
actions: {
|
||||
async getPlaylist(date: string) {
|
||||
const { $_, $i18n } = useNuxtApp()
|
||||
const authStore = useAuth()
|
||||
const configStore = useConfig()
|
||||
const indexStore = useIndex()
|
||||
let statusCode = 0
|
||||
|
||||
const timeInSec = timeToSeconds(dayjs().utcOffset(configStore.utcOffset).format('HH:mm:ss'))
|
||||
const channel = configStore.configGui[configStore.configID].id
|
||||
let dateToday = dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD')
|
||||
@ -44,14 +48,40 @@ export const usePlaylist = defineStore('playlist', {
|
||||
method: 'GET',
|
||||
headers: authStore.authHeader,
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((response) => {
|
||||
statusCode = response.status
|
||||
|
||||
return response.json()
|
||||
})
|
||||
.then((data) => {
|
||||
if (data.program) {
|
||||
this.playlist = processPlaylist(configStore.startInSec, configStore.playlistLength, data.program, false)
|
||||
const programData = processPlaylist(
|
||||
configStore.startInSec,
|
||||
configStore.playlistLength,
|
||||
data.program,
|
||||
false
|
||||
)
|
||||
|
||||
if (
|
||||
this.playlist.length > 0 &&
|
||||
$_.differenceWith(this.playlist, programData, (a, b) => {
|
||||
return $_.isEqual($_.omit(a, ['uid']), $_.omit(b, ['uid']))
|
||||
}).length > 0
|
||||
) {
|
||||
indexStore.msgAlert('warning', $i18n.t('player.unsavedProgram'), 3)
|
||||
} else if (this.playlist.length === 0) {
|
||||
this.playlist = programData
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
this.playlist = []
|
||||
.catch((e) => {
|
||||
if (statusCode > 0 && statusCode !== 204) {
|
||||
indexStore.msgAlert('error', e, 3)
|
||||
}
|
||||
|
||||
if (this.playlist.length > 0) {
|
||||
indexStore.msgAlert('warning', $i18n.t('player.unsavedProgram'), 3)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user