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',
|
reset: 'Wiedergabeliste zurücksetzen',
|
||||||
save: 'Wiedergabeliste speichern',
|
save: 'Wiedergabeliste speichern',
|
||||||
deletePlaylist: 'Wiedergabeliste löschen',
|
deletePlaylist: 'Wiedergabeliste löschen',
|
||||||
|
unsavedProgram: 'Es existiert Programm das nicht gespeichert ist!',
|
||||||
},
|
},
|
||||||
media: {
|
media: {
|
||||||
notExists: 'Speicher existiert nicht!',
|
notExists: 'Speicher existiert nicht!',
|
||||||
|
|||||||
@ -65,6 +65,7 @@ export default {
|
|||||||
reset: 'Reset Playlist',
|
reset: 'Reset Playlist',
|
||||||
save: 'Save Playlist',
|
save: 'Save Playlist',
|
||||||
deletePlaylist: 'Delete Playlist',
|
deletePlaylist: 'Delete Playlist',
|
||||||
|
unsavedProgram: 'There is a program that is not saved!',
|
||||||
},
|
},
|
||||||
media: {
|
media: {
|
||||||
notExists: 'Storage not exist!',
|
notExists: 'Storage not exist!',
|
||||||
|
|||||||
323
pages/player.vue
323
pages/player.vue
@ -27,212 +27,14 @@
|
|||||||
max-size="80"
|
max-size="80"
|
||||||
size="20"
|
size="20"
|
||||||
>
|
>
|
||||||
<div
|
<MediaBrowser :preview="setPreviewData" />
|
||||||
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>
|
|
||||||
</pane>
|
</pane>
|
||||||
<pane>
|
<pane>
|
||||||
<div id="playlist-container" class="relative w-full h-full !bg-base-300 rounded-e overflow-auto">
|
<PlaylistTable
|
||||||
<div
|
:get-playlist="getPlaylist"
|
||||||
v-if="playlistStore.isLoading"
|
:edit-item="editPlaylistItem"
|
||||||
class="w-full h-full absolute z-10 flex justify-center bg-base-100/70"
|
:preview="setPreviewData"
|
||||||
>
|
/>
|
||||||
<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>
|
|
||||||
</pane>
|
</pane>
|
||||||
</splitpanes>
|
</splitpanes>
|
||||||
</div>
|
</div>
|
||||||
@ -270,7 +72,7 @@
|
|||||||
>
|
>
|
||||||
<i class="bi-sort-down-alt" />
|
<i class="bi-sort-down-alt" />
|
||||||
</button>
|
</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" />
|
<i class="bi-arrow-counterclockwise" />
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
@ -388,7 +190,7 @@ const colorMode = useColorMode()
|
|||||||
const { locale } = useI18n()
|
const { locale } = useI18n()
|
||||||
const { $_, $dayjs } = useNuxtApp()
|
const { $_, $dayjs } = useNuxtApp()
|
||||||
const { width } = useWindowSize({ initialWidth: 800 })
|
const { width } = useWindowSize({ initialWidth: 800 })
|
||||||
const { secToHMS, filename, secondsToTime, toMin, mediaType } = stringFormatter()
|
const { mediaType } = stringFormatter()
|
||||||
const { processPlaylist, genUID } = playlistOperations()
|
const { processPlaylist, genUID } = playlistOperations()
|
||||||
const contentType = { 'content-type': 'application/json;charset=UTF-8' }
|
const contentType = { 'content-type': 'application/json;charset=UTF-8' }
|
||||||
|
|
||||||
@ -402,7 +204,6 @@ useHead({
|
|||||||
title: 'Player | ffplayout',
|
title: 'Player | ffplayout',
|
||||||
})
|
})
|
||||||
|
|
||||||
const { configID } = storeToRefs(useConfig())
|
|
||||||
const { listDate } = storeToRefs(usePlaylist())
|
const { listDate } = storeToRefs(usePlaylist())
|
||||||
|
|
||||||
const todayDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
|
const todayDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
|
||||||
@ -422,17 +223,6 @@ const previewUrl = ref('')
|
|||||||
const previewOpt = ref()
|
const previewOpt = ref()
|
||||||
const isVideo = ref(false)
|
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({
|
const newSource = ref({
|
||||||
begin: 0,
|
begin: 0,
|
||||||
in: 0,
|
in: 0,
|
||||||
@ -445,22 +235,6 @@ const newSource = ref({
|
|||||||
uid: '',
|
uid: '',
|
||||||
} as PlaylistItem)
|
} as PlaylistItem)
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
if (!mediaStore.folderTree.parent) {
|
|
||||||
mediaStore.getTree('')
|
|
||||||
}
|
|
||||||
|
|
||||||
getPlaylist()
|
|
||||||
})
|
|
||||||
|
|
||||||
watch([configID], () => {
|
|
||||||
mediaStore.getTree('')
|
|
||||||
})
|
|
||||||
|
|
||||||
watch([listDate], async () => {
|
|
||||||
await getPlaylist()
|
|
||||||
})
|
|
||||||
|
|
||||||
function scrollTo(index: number) {
|
function scrollTo(index: number) {
|
||||||
const child = document.getElementById(`clip-${index}`)
|
const child = document.getElementById(`clip-${index}`)
|
||||||
const parent = document.getElementById('playlist-container')
|
const parent = document.getElementById('playlist-container')
|
||||||
@ -496,77 +270,6 @@ function closePlayer() {
|
|||||||
isVideo.value = false
|
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) {
|
function setPreviewData(path: string) {
|
||||||
let fullPath = path
|
let fullPath = path
|
||||||
const storagePath = configStore.configPlayout.storage.path
|
const storagePath = configStore.configPlayout.storage.path
|
||||||
@ -582,6 +285,7 @@ function setPreviewData(path: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
previewName.value = fullPath.split('/').slice(-1)[0]
|
previewName.value = fullPath.split('/').slice(-1)[0]
|
||||||
|
showPreviewModal.value = true
|
||||||
|
|
||||||
if (path.match(/^http/)) {
|
if (path.match(/^http/)) {
|
||||||
previewUrl.value = path
|
previewUrl.value = path
|
||||||
@ -659,6 +363,7 @@ function processSource(process: boolean) {
|
|||||||
|
|
||||||
function editPlaylistItem(i: number) {
|
function editPlaylistItem(i: number) {
|
||||||
editId.value = i
|
editId.value = i
|
||||||
|
showSourceModal.value = true
|
||||||
|
|
||||||
newSource.value = {
|
newSource.value = {
|
||||||
begin: playlistStore.playlist[i].begin,
|
begin: playlistStore.playlist[i].begin,
|
||||||
@ -681,10 +386,6 @@ function isAd(evt: any) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function deletePlaylistItem(index: number) {
|
|
||||||
playlistStore.playlist.splice(index, 1)
|
|
||||||
}
|
|
||||||
|
|
||||||
function loopClips() {
|
function loopClips() {
|
||||||
const tempList = []
|
const tempList = []
|
||||||
let length = 0
|
let length = 0
|
||||||
@ -737,7 +438,7 @@ async function importPlaylist(imp: boolean) {
|
|||||||
}
|
}
|
||||||
)
|
)
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
indexStore.msgAlert('success', response, 2)
|
indexStore.msgAlert('success', String(response), 2)
|
||||||
playlistStore.getPlaylist(listDate.value)
|
playlistStore.getPlaylist(listDate.value)
|
||||||
})
|
})
|
||||||
.catch((e: string) => {
|
.catch((e: string) => {
|
||||||
@ -819,7 +520,7 @@ async function deletePlaylist(del: boolean) {
|
|||||||
padding-bottom: 0.5rem;
|
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;
|
display: table-cell !important;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -30,8 +30,12 @@ export const usePlaylist = defineStore('playlist', {
|
|||||||
getters: {},
|
getters: {},
|
||||||
actions: {
|
actions: {
|
||||||
async getPlaylist(date: string) {
|
async getPlaylist(date: string) {
|
||||||
|
const { $_, $i18n } = useNuxtApp()
|
||||||
const authStore = useAuth()
|
const authStore = useAuth()
|
||||||
const configStore = useConfig()
|
const configStore = useConfig()
|
||||||
|
const indexStore = useIndex()
|
||||||
|
let statusCode = 0
|
||||||
|
|
||||||
const timeInSec = timeToSeconds(dayjs().utcOffset(configStore.utcOffset).format('HH:mm:ss'))
|
const timeInSec = timeToSeconds(dayjs().utcOffset(configStore.utcOffset).format('HH:mm:ss'))
|
||||||
const channel = configStore.configGui[configStore.configID].id
|
const channel = configStore.configGui[configStore.configID].id
|
||||||
let dateToday = dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD')
|
let dateToday = dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD')
|
||||||
@ -44,14 +48,40 @@ export const usePlaylist = defineStore('playlist', {
|
|||||||
method: 'GET',
|
method: 'GET',
|
||||||
headers: authStore.authHeader,
|
headers: authStore.authHeader,
|
||||||
})
|
})
|
||||||
.then((response) => response.json())
|
.then((response) => {
|
||||||
|
statusCode = response.status
|
||||||
|
|
||||||
|
return response.json()
|
||||||
|
})
|
||||||
.then((data) => {
|
.then((data) => {
|
||||||
if (data.program) {
|
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(() => {
|
.catch((e) => {
|
||||||
this.playlist = []
|
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