djsundog/ffplayout
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

show channels menu only when multiple channels exists, css tweaks, fix #777 #778 #779 #780 #782 #784 #785

Browse Source
This commit is contained in:
Jonathan Baecker 2024-10-01 21:33:18 +02:00
parent 64150a8262
commit 9235c8b3d2
17 changed files with 127 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/components/ConfigAdvanced.vue
View File

@ -72,7 +72,7 @@ async function onSubmitAdvanced() {
if (update.status === 200) {
indexStore.msgAlert('success', t('advanced.updateSuccess'), 2)
const channel = configStore.channels[configStore.id].id
const channel = configStore.channels[configStore.i].id
await $fetch(`/api/control/${channel}/process/`, {
method: 'POST',
@ -90,7 +90,7 @@ async function onSubmitAdvanced() {
async function restart(res: boolean) {
if (res) {
const channel = configStore.channels[configStore.id].id
const channel = configStore.channels[configStore.i].id
await $fetch(`/api/control/${channel}/process/`, {
method: 'POST',

115
frontend/components/ConfigChannel.vue
View File

@ -1,6 +1,6 @@
<template>
<div v-if="configStore.channels && configStore.channels[configStore.id]" class="w-full max-w-[800px]">
<h2 class="pt-3 text-3xl">{{ t('config.channelConf') }} ({{ configStore.channels[configStore.id].id }})</h2>
<div v-if="channel" class="w-full max-w-[800px]">
<h2 class="pt-3 text-3xl">{{ t('config.channelConf') }} ({{ channel.id }})</h2>
<div class="w-full flex justify-end my-4">
<button v-if="authStore.role === 'GlobalAdmin'" class="btn btn-sm btn-primary" @click="newChannel()">
{{ t('config.addChannel') }}
@ -11,34 +11,21 @@
<div class="label">
<span class="label-text">{{ t('config.name') }}</span>
</div>
<input
v-model="configStore.channels[configStore.id].name"
type="text"
placeholder="Type here"
class="input input-bordered w-full"
/>
<input v-model="channel.name" type="text" placeholder="Type here" class="input input-bordered w-full" />
</label>
<label class="form-control w-full mt-5">
<div class="label">
<span class="label-text">{{ t('config.previewUrl') }}</span>
</div>
<input
v-model="configStore.channels[configStore.id].preview_url"
type="text"
class="input input-bordered w-full"
/>
<input v-model="channel.preview_url" type="text" class="input input-bordered w-full" />
</label>
<label class="form-control w-full mt-5">
<div class="label">
<span class="label-text">{{ t('config.extensions') }}</span>
</div>
<input
v-model="configStore.channels[configStore.id].extra_extensions"
type="text"
class="input input-bordered w-full"
/>
<input v-model="channel.extra_extensions" type="text" class="input input-bordered w-full" />
</label>
<template v-if="authStore.role === 'GlobalAdmin'">
@ -52,51 +39,38 @@
<div class="label">
<span class="label-text">{{ t('config.publicPath') }}</span>
</div>
<input
v-model="configStore.channels[configStore.id].public"
type="text"
class="input input-bordered w-full"
/>
<input v-model="channel.public" type="text" class="input input-bordered w-full" />
</label>
<label class="form-control w-full mt-5">
<div class="label">
<span class="label-text">{{ t('config.playlistPath') }}</span>
</div>
<input
v-model="configStore.channels[configStore.id].playlists"
type="text"
class="input input-bordered w-full"
/>
<input v-model="channel.playlists" type="text" class="input input-bordered w-full" />
</label>
<label class="form-control w-full mt-5">
<div class="label">
<span class="label-text">{{ t('config.storagePath') }}</span>
</div>
<input
v-model="configStore.channels[configStore.id].storage"
type="text"
class="input input-bordered w-full"
/>
<input v-model="channel.storage" type="text" class="input input-bordered w-full" />
</label>
</template>
<div class="join my-4">
<button class="join-item btn btn-primary" :class="saved ? 'btn-primary' : 'btn-error'" @click="addUpdateChannel()">
<div class="my-4 flex gap-1">
<button class="btn" :class="saved ? 'btn-primary' : 'btn-error'" @click="addUpdateChannel()">
{{ t('config.save') }}
</button>
<button
v-if="
authStore.role === 'GlobalAdmin' &&
configStore.channels.length > 1 &&
configStore.channels[configStore.id].id > 1
"
class="join-item btn btn-primary"
v-if="authStore.role === 'GlobalAdmin' && configStore.channels.length > 1 && channel.id > 1 && saved"
class="btn btn-primary"
@click="deleteChannel()"
>
{{ t('config.delete') }}
</button>
<button v-if="!saved" class="btn btn-primary text-xl" @click="resetChannel()">
<i class="bi-arrow-repeat" />
</button>
</div>
</div>
</div>
@ -110,27 +84,32 @@ const { t } = useI18n()
const authStore = useAuth()
const configStore = useConfig()
const indexStore = useIndex()
const { i } = storeToRefs(useConfig())
const saved = ref(true)
const channel = ref({} as Channel)
onMounted(() => {
channel.value = cloneDeep(configStore.channels[i.value])
})
watch([i], () => {
if (configStore.channels[i.value]) {
channel.value = cloneDeep(configStore.channels[i.value])
}
})
function rmId(path: string) {
return path.replace(/\/\d+$/, '')
}
function newChannel() {
const channels = cloneDeep(configStore.channels)
const newChannel = cloneDeep(configStore.channels[configStore.channels.length - 1])
newChannel.id = channels.length + 1
newChannel.name = `Channel ${newChannel.id}`
newChannel.preview_url = `${window.location.protocol}//${window.location.host}/${newChannel.id}/live/stream.m3u8`
newChannel.public = `${rmId(newChannel.public)}/${newChannel.id}`
newChannel.playlists = `${rmId(newChannel.playlists)}/${newChannel.id}`
newChannel.storage = `${rmId(newChannel.storage)}/${newChannel.id}`
channels.push(newChannel)
configStore.channels = channels
configStore.id = configStore.channels.length - 1
channel.value.id = configStore.channels.length + 1
channel.value.name = `Channel ${channel.value.id}`
channel.value.preview_url = `${window.location.protocol}//${window.location.host}/${channel.value.id}/live/stream.m3u8`
channel.value.public = `${rmId(channel.value.public)}/${channel.value.id}`
channel.value.playlists = `${rmId(channel.value.playlists)}/${channel.value.id}`
channel.value.storage = `${rmId(channel.value.storage)}/${channel.value.id}`
saved.value = false
}
@ -139,35 +118,39 @@ async function addUpdateChannel() {
/*
Save channel settings.
*/
const update = await configStore.setChannelConfig(configStore.channels[configStore.id])
saved.value = true
i.value = channel.value.id - 1
configStore.channels.push(cloneDeep(channel.value))
const update = await configStore.setChannelConfig(channel.value)
if (update.status && update.status < 400) {
indexStore.msgAlert('success', t('config.updateChannelSuccess'), 2)
saved.value = true
await configStore.getPlayoutConfig()
} else {
indexStore.msgAlert('error', t('config.updateChannelFailed'), 2)
}
}
async function deleteChannel() {
const config = cloneDeep(configStore.channels)
const id = config[configStore.id].id
function resetChannel() {
channel.value = cloneDeep(configStore.channels[i.value])
saved.value = true
}
if (id === 1) {
async function deleteChannel() {
if (channel.value.id === 1) {
indexStore.msgAlert('warning', t('config.errorChannelDelete'), 2)
return
}
const response = await fetch(`/api/channel/${id}`, {
const response = await fetch(`/api/channel/${channel.value.id}`, {
method: 'DELETE',
headers: authStore.authHeader,
})
config.splice(configStore.id, 1)
configStore.channelsRaw.splice(configStore.id, 1)
configStore.channels = config
configStore.id = configStore.channels.length - 1
i.value = configStore.i - 1
await configStore.getChannelConfig()
await configStore.getPlayoutConfig()
if (response.status === 200) {

4
frontend/components/ConfigPlayout.vue
View File

@ -178,7 +178,7 @@ async function onSubmitPlayout() {
if (update.status === 200) {
indexStore.msgAlert('success', t('config.updatePlayoutSuccess'), 2)
const channel = configStore.channels[configStore.id].id
const channel = configStore.channels[configStore.i].id
await $fetch(`/api/control/${channel}/process/`, {
method: 'POST',
@ -198,7 +198,7 @@ async function onSubmitPlayout() {
async function restart(res: boolean) {
if (res) {
const channel = configStore.channels[configStore.id].id
const channel = configStore.channels[configStore.i].id
await $fetch(`/api/control/${channel}/process/`, {
method: 'POST',

16
frontend/components/HeaderMenu.vue
View File

@ -31,7 +31,7 @@
<details tabindex="0" @focusout="closeDropdown">
<summary>
<div class="h-[19px] text-base">
<span> {{ configStore.channels[configStore.id].name }} </span>
<span> {{ configStore.channels[configStore.i].name }} </span>
</div>
</summary>
<ul class="p-2">
@ -68,7 +68,7 @@
<details tabindex="0" @focusout="closeDropdown">
<summary>
<div class="h-[19px] text-base">
<span> {{ configStore.channels[configStore.id].name }} </span>
<span> {{ configStore.channels[configStore.i].name }} </span>
</div>
</summary>
<ul class="p-2 bg-base-100 rounded-md !mt-1 w-36" tabindex="0">
@ -127,17 +127,15 @@ if (colorMode.value === 'dark') {
function closeMenu() {
setTimeout(() => {
isOpen.value = false
menuDropdown.value.removeAttribute('open')
console.log('close')
menuDropdown.value?.removeAttribute('open')
}, 200)
}
function clickMenu() {
console.log('close')
isOpen.value = !isOpen.value
if (!isOpen.value) {
menuDropdown.value.removeAttribute('open')
menuDropdown.value?.removeAttribute('open')
}
}
@ -146,14 +144,14 @@ function blurMenu() {
isOpen.value = !isOpen.value
} else {
setTimeout(() => {
menuDropdown.value.removeAttribute('open')
menuDropdown.value?.removeAttribute('open')
}, 200)
}
}
function closeDropdown($event: any) {
setTimeout(() => {
$event.target.parentNode.removeAttribute('open')
$event.target.parentNode?.removeAttribute('open')
}, 200)
}
@ -163,7 +161,7 @@ function logout() {
}
function selectChannel(index: number) {
configStore.id = index
configStore.i = index
configStore.getPlayoutConfig()
}

4
frontend/components/MediaBrowser.vue
View File

@ -79,7 +79,7 @@ const { secToHMS, mediaType } = stringFormatter()
const configStore = useConfig()
const mediaStore = useMedia()
const { id } = storeToRefs(useConfig())
const { i } = storeToRefs(useConfig())
const browserSortOptions = {
group: { name: 'playlist', pull: 'clone', put: false },
@ -102,7 +102,7 @@ onMounted(async () => {
}
})
watch([id], () => {
watch([i], () => {
mediaStore.getTree('')
})
</script>

24
frontend/components/PlayerControl.vue
View File

@ -6,8 +6,8 @@
<div class="w-full aspect-video">
<video v-if="streamExtension === 'flv'" ref="httpStreamFlv" controls />
<VideoPlayer
v-else-if="configStore.showPlayer && configStore.channels[configStore.id]"
:key="configStore.id"
v-else-if="configStore.showPlayer && configStore.channels[configStore.i]"
:key="configStore.i"
class="live-player"
reference="httpStream"
:options="{
@ -19,7 +19,7 @@
sources: [
{
type: 'application/x-mpegURL',
src: configStore.channels[configStore.id].preview_url,
src: configStore.channels[configStore.i].preview_url,
},
],
}"
@ -180,7 +180,7 @@ const configStore = useConfig()
const indexStore = useIndex()
const playlistStore = usePlaylist()
const { filename, secToHMS } = stringFormatter()
const { id } = storeToRefs(useConfig())
const { i } = storeToRefs(useConfig())
const currentDefault = {
uid: '',
@ -196,19 +196,19 @@ playlistStore.current = currentDefault
const timeStr = ref('00:00:00')
const timer = ref()
const errorCounter = ref(0)
const streamExtension = ref(configStore.channels[configStore.id].preview_url.split('.').pop())
const streamExtension = ref(configStore.channels[configStore.i].preview_url.split('.').pop())
const httpStreamFlv = ref(null)
const httpFlvSource = ref({
type: 'flv',
isLive: true,
url: configStore.channels[configStore.id].preview_url,
url: configStore.channels[configStore.i].preview_url,
})
const mpegtsOptions = ref({
lazyLoadMaxDuration: 3 * 60,
liveBufferLatencyChasing: true,
})
const streamUrl = ref(`/data/event/${configStore.channels[configStore.id].id}?endpoint=playout&uuid=${authStore.uuid}`)
const streamUrl = ref(`/data/event/${configStore.channels[configStore.i].id}?endpoint=playout&uuid=${authStore.uuid}`)
// 'http://127.0.0.1:8787/data/event/1?endpoint=playout&uuid=f2f8c29b-712a-48c5-8919-b535d3a05a3a'
const { status, data, error, close } = useEventSource(streamUrl, [], {
@ -259,7 +259,7 @@ watch([status, error], async () => {
if (errorCounter.value > 11) {
await authStore.obtainUuid()
streamUrl.value = `/data/event/${configStore.channels[configStore.id].id}?endpoint=playout&uuid=${
streamUrl.value = `/data/event/${configStore.channels[configStore.i].id}?endpoint=playout&uuid=${
authStore.uuid
}`
errorCounter.value = 0
@ -280,10 +280,10 @@ watch([data], () => {
}
})
watch([id], () => {
watch([i], () => {
resetStatus()
streamUrl.value = `/data/event/${configStore.channels[configStore.id].id}?endpoint=playout&uuid=${authStore.uuid}`
streamUrl.value = `/data/event/${configStore.channels[configStore.i].id}?endpoint=playout&uuid=${authStore.uuid}`
if (timer.value) {
clearTimeout(timer.value)
@ -318,7 +318,7 @@ const controlProcess = throttle(async (state: string) => {
/*
Control playout (start, stop, restart)
*/
const channel = configStore.channels[configStore.id].id
const channel = configStore.channels[configStore.i].id
await $fetch(`/api/control/${channel}/process/`, {
method: 'POST',
headers: { ...configStore.contentType, ...authStore.authHeader },
@ -333,7 +333,7 @@ const controlPlayout = throttle(async (state: string) => {
- jump to last clip
- reset playout state
*/
const channel = configStore.channels[configStore.id].id
const channel = configStore.channels[configStore.i].id
await $fetch(`/api/control/${channel}/playout/`, {
method: 'POST',

4
frontend/components/PlaylistGenerator.vue
View File

@ -347,7 +347,7 @@ function addFolderToTemplate(event: any, item: TemplateItem) {
event.item.remove()
const storagePath = configStore.channels[configStore.id].storage
const storagePath = configStore.channels[configStore.i].storage
const navPath = mediaStore.folderCrumbs[mediaStore.folderCrumbs.length - 1].path
const sourcePath = `${storagePath}/${navPath}/${mediaStore.folderList.folders[o].name}`.replace(/\/[/]+/g, '/')
@ -402,7 +402,7 @@ async function generatePlaylist() {
}
}
await $fetch(`/api/playlist/${configStore.channels[configStore.id].id}/generate/${playlistStore.listDate}`, {
await $fetch(`/api/playlist/${configStore.channels[configStore.i].id}/generate/${playlistStore.listDate}`, {
method: 'POST',
headers: { ...configStore.contentType, ...authStore.authHeader },
body,

10
frontend/components/PlaylistTable.vue
View File

@ -4,11 +4,11 @@
ref="playlistContainer"
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">
<div v-if="playlistStore.isLoading" class="w-full h-full absolute z-2 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">
<thead class="top-0 sticky z-2">
<tr class="bg-base-100 rounded-tr-lg">
<th v-if="!configStore.playout.playlist.infinit" class="w-[85px] p-0 text-left">
<div class="border-b border-my-gray px-4 py-3">
@ -139,7 +139,7 @@ const { processPlaylist, genUID } = playlistOperations()
const playlistContainer = ref()
const sortContainer = ref()
const todayDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
const { id } = storeToRefs(useConfig())
const { i } = storeToRefs(useConfig())
const { currentIndex, listDate, playoutIsRunning } = storeToRefs(usePlaylist())
const playlistSortOptions = {
@ -169,7 +169,7 @@ onMounted(() => {
}, 150)
})
watch([listDate, id], () => {
watch([listDate, i], () => {
setTimeout(() => {
getPlaylist()
}, 800)
@ -259,7 +259,7 @@ function addClip(event: any) {
event.item?.remove()
const storagePath = configStore.channels[configStore.id].storage
const storagePath = configStore.channels[configStore.i].storage
const sourcePath = `${storagePath}/${mediaStore.folderTree.source}/${mediaStore.folderTree.files[o].name}`.replace(
/\/[/]+/g,
'/'

6
frontend/components/SystemStats.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="grid grid-cols-1 xs:grid-cols-2 border-4 rounded-md border-primary text-left shadow min-w-[320px] md:min-w-[728px] max-w-[960px] mt-5 xs:mt-0">
<div class="grid grid-cols-1 xs:grid-cols-2 border-4 rounded-md border-primary text-left shadow min-w-[320px] md:min-w-[728px] max-w-[960px] mt-5">
<div class="p-4 bg-base-100">
<span class="text-3xl">{{ sysStat.system.name }} {{ sysStat.system.version }}</span>
<span v-if="sysStat.system.kernel">
@ -96,7 +96,7 @@ const configStore = useConfig()
const indexStore = useIndex()
const streamUrl = ref(
`/data/event/${configStore.channels[configStore.id].id}?endpoint=system&uuid=${authStore.uuid}`
`/data/event/${configStore.channels[configStore.i].id}?endpoint=system&uuid=${authStore.uuid}`
)
// 'http://127.0.0.1:8787/data/event/1?endpoint=system&uuid=f2f8c29b-712a-48c5-8919-b535d3a05a3a'
@ -139,7 +139,7 @@ watch([status, error], async () => {
if (errorCounter.value > 15) {
await authStore.obtainUuid()
streamUrl.value = `/data/event/${configStore.channels[configStore.id].id}?endpoint=system&uuid=${
streamUrl.value = `/data/event/${configStore.channels[configStore.i].id}?endpoint=system&uuid=${
authStore.uuid
}`
errorCounter.value = 0

4
frontend/composables/variables.ts
View File

@ -1,7 +1,7 @@
export const useVariables = () => {
const multiSelectClasses = {
container: 'relative input input-bordered w-full flex items-center justify-end px-0 min-h-[32px]',
containerDisabled: 'cursor-default !bg-base-100',
container: 'relative input input-bordered w-full h-auto flex items-center justify-end px-0 min-h-[32px]',
containerDisabled: '[&>div]:cursor-default !bg-base-100 [&>div>div]:pr-2',
containerOpen: 'rounded-b-none',
containerOpenTop: 'rounded-t-none',
containerActive: 'ring ring-green-500 ring-opacity-30',

6
frontend/pages/logging.vue
View File

@ -51,7 +51,7 @@ useHead({
title: `${t('button.logging')} | ffplayout`,
})
const { id } = storeToRefs(useConfig())
const { i } = storeToRefs(useConfig())
const { $dayjs } = useNuxtApp()
const authStore = useAuth()
@ -80,7 +80,7 @@ onMounted(async () => {
await getLog()
})
watch([listDate, id], () => {
watch([listDate, i], () => {
getLog()
})
@ -111,7 +111,7 @@ async function getLog() {
date = ''
}
await fetch(`/api/log/${configStore.channels[configStore.id].id}?date=${date}`, {
await fetch(`/api/log/${configStore.channels[configStore.i].id}?date=${date}`, {
method: 'GET',
headers: authStore.authHeader,
})

18
frontend/pages/media.vue
View File

@ -312,7 +312,7 @@ const configStore = useConfig()
const indexStore = useIndex()
const mediaStore = useMedia()
const { toMin, mediaType, filename, parent } = stringFormatter()
const { id } = storeToRefs(useConfig())
const { i } = storeToRefs(useConfig())
useHead({
title: `${t('button.media')} | ffplayout`,
@ -353,7 +353,7 @@ const xhr = ref(new XMLHttpRequest())
onMounted(async () => {
let config_extensions = configStore.playout.storage.extensions
let extra_extensions = configStore.channels[configStore.id].extra_extensions
let extra_extensions = configStore.channels[configStore.i].extra_extensions
if (typeof config_extensions === 'string') {
config_extensions = config_extensions.split(',')
@ -374,7 +374,7 @@ onMounted(async () => {
}
})
watch([id], () => {
watch([i], () => {
mediaStore.getTree('')
})
@ -426,7 +426,7 @@ async function handleDrop(event: any, targetFolder: any, isParent: boolean | nul
}
if (source !== target) {
await fetch(`/api/file/${configStore.channels[configStore.id].id}/rename/`, {
await fetch(`/api/file/${configStore.channels[configStore.i].id}/rename/`, {
method: 'POST',
headers: { ...configStore.contentType, ...authStore.authHeader },
body: JSON.stringify({ source, target }),
@ -454,7 +454,7 @@ function setPreviewData(path: string) {
}
previewName.value = fullPath.split('/').slice(-1)[0]
previewUrl.value = encodeURIComponent(`/file/${configStore.channels[configStore.id].id}${fullPath}`).replace(
previewUrl.value = encodeURIComponent(`/file/${configStore.channels[configStore.i].id}${fullPath}`).replace(
/%2F/g,
'/'
)
@ -494,7 +494,7 @@ async function deleteFileOrFolder(del: boolean) {
showDeleteModal.value = false
if (del) {
await fetch(`/api/file/${configStore.channels[configStore.id].id}/remove/`, {
await fetch(`/api/file/${configStore.channels[configStore.i].id}/remove/`, {
method: 'POST',
headers: { ...configStore.contentType, ...authStore.authHeader },
body: JSON.stringify({ source: deleteName.value }),
@ -530,7 +530,7 @@ async function renameFile(ren: boolean) {
showRenameModal.value = false
if (ren && renameOldName.value !== renameNewName.value) {
await fetch(`/api/file/${configStore.channels[configStore.id].id}/rename/`, {
await fetch(`/api/file/${configStore.channels[configStore.i].id}/rename/`, {
method: 'POST',
headers: { ...configStore.contentType, ...authStore.authHeader },
body: JSON.stringify({
@ -573,7 +573,7 @@ async function createFolder(create: boolean) {
return
}
await $fetch(`/api/file/${configStore.channels[configStore.id].id}/create-folder/`, {
await $fetch(`/api/file/${configStore.channels[configStore.i].id}/create-folder/`, {
method: 'POST',
headers: { ...configStore.contentType, ...authStore.authHeader },
body: JSON.stringify({ source: path }),
@ -610,7 +610,7 @@ async function upload(file: any): Promise<null | undefined> {
return new Promise((resolve) => {
xhr.value.open(
'PUT',
`/api/file/${configStore.channels[configStore.id].id}/upload/?path=${encodeURIComponent(
`/api/file/${configStore.channels[configStore.i].id}/upload/?path=${encodeURIComponent(
mediaStore.crumbs[mediaStore.crumbs.length - 1].path
)}`
)

18
frontend/pages/message.vue
View File

@ -227,7 +227,7 @@ const { t } = useI18n()
const authStore = useAuth()
const configStore = useConfig()
const indexStore = useIndex()
const { id } = storeToRefs(useConfig())
const { i } = storeToRefs(useConfig())
const { numberToHex, hexToNumber } = stringFormatter()
useHead({
@ -266,14 +266,14 @@ onMounted(() => {
getPreset(-1)
})
watch([id], () => {
watch([i], () => {
nextTick(() => {
getPreset(-1)
})
})
async function getPreset(index: number) {
fetch(`/api/presets/${configStore.channels[configStore.id].id}`, {
fetch(`/api/presets/${configStore.channels[configStore.i].id}`, {
method: 'GET',
headers: authStore.authHeader,
})
@ -354,10 +354,10 @@ async function savePreset() {
: form.value.boxColor + '@' + numberToHex(form.value.boxAlpha),
boxborderw: form.value.border,
alpha: form.value.overallAlpha,
channel_id: configStore.channels[configStore.id].id,
channel_id: configStore.channels[configStore.i].id,
}
const response = await fetch(`/api/presets/${configStore.channels[configStore.id].id}/${form.value.id}`, {
const response = await fetch(`/api/presets/${configStore.channels[configStore.i].id}/${form.value.id}`, {
method: 'PUT',
headers: { ...configStore.contentType, ...authStore.authHeader },
body: JSON.stringify(preset),
@ -393,10 +393,10 @@ async function createNewPreset(create: boolean) {
: form.value.boxColor + '@' + numberToHex(form.value.boxAlpha),
boxborderw: form.value.border.toString(),
alpha: form.value.overallAlpha.toString(),
channel_id: configStore.channels[configStore.id].id,
channel_id: configStore.channels[configStore.i].id,
}
const response = await fetch(`/api/presets/${configStore.channels[configStore.id].id}/`, {
const response = await fetch(`/api/presets/${configStore.channels[configStore.i].id}/`, {
method: 'POST',
headers: { ...configStore.contentType, ...authStore.authHeader },
body: JSON.stringify(preset),
@ -417,7 +417,7 @@ async function deletePreset(del: boolean) {
showDeleteModal.value = false
if (del && selected.value && selected.value !== '') {
await fetch(`/api/presets/${configStore.channels[configStore.id].id}/${form.value.id}`, {
await fetch(`/api/presets/${configStore.channels[configStore.i].id}/${form.value.id}`, {
method: 'DELETE',
headers: authStore.authHeader,
})
@ -440,7 +440,7 @@ async function submitMessage() {
boxborderw: form.value.border.toString(),
}
const response = await fetch(`/api/control/${configStore.channels[configStore.id].id}/text/`, {
const response = await fetch(`/api/control/${configStore.channels[configStore.i].id}/text/`, {
method: 'POST',
headers: { ...configStore.contentType, ...authStore.authHeader },
body: JSON.stringify(obj),

14
frontend/pages/player.vue
View File

@ -174,7 +174,7 @@
v-model="newSource.source"
type="text"
class="input input-sm input-bordered w-auto"
:disabled="newSource.source.includes(configStore.channels[configStore.id].storage)"
:disabled="newSource.source.includes(configStore.channels[configStore.i].storage)"
/>
</label>
@ -316,7 +316,7 @@ function closePlayer() {
function setPreviewData(path: string) {
let fullPath = path
const storagePath = configStore.channels[configStore.id].storage
const storagePath = configStore.channels[configStore.i].storage
const lastIndex = storagePath.lastIndexOf('/')
if (!path.includes('/')) {
@ -332,7 +332,7 @@ function setPreviewData(path: string) {
if (path.match(/^http/)) {
previewUrl.value = path
} else {
previewUrl.value = encodeURIComponent(`/file/${configStore.channels[configStore.id].id}${fullPath}`).replace(
previewUrl.value = encodeURIComponent(`/file/${configStore.channels[configStore.i].id}${fullPath}`).replace(
/%2F/g,
'/'
)
@ -464,7 +464,7 @@ async function importPlaylist(imp: boolean) {
playlistStore.isLoading = true
await $fetch(
`/api/file/${configStore.channels[configStore.id].id}/import/?file=${textFile.value[0].name}&date=${
`/api/file/${configStore.channels[configStore.i].id}/import/?file=${textFile.value[0].name}&date=${
listDate.value
}`,
{
@ -497,11 +497,11 @@ async function savePlaylist(save: boolean) {
const saveList = processPlaylist(listDate.value, cloneDeep(playlistStore.playlist), true)
await $fetch(`/api/playlist/${configStore.channels[configStore.id].id}/`, {
await $fetch(`/api/playlist/${configStore.channels[configStore.i].id}/`, {
method: 'POST',
headers: { ...configStore.contentType, ...authStore.authHeader },
body: JSON.stringify({
channel: configStore.channels[configStore.id].name,
channel: configStore.channels[configStore.i].name,
date: targetDate.value,
program: saveList,
}),
@ -524,7 +524,7 @@ async function deletePlaylist(del: boolean) {
showDeleteModal.value = false
if (del) {
await $fetch(`/api/playlist/${configStore.channels[configStore.id].id}/${listDate.value}`, {
await $fetch(`/api/playlist/${configStore.channels[configStore.i].id}/${listDate.value}`, {
method: 'DELETE',
headers: { ...configStore.contentType, ...authStore.authHeader },
}).then(() => {

22
frontend/stores/config.ts
View File

@ -3,7 +3,7 @@ import { defineStore } from 'pinia'
export const useConfig = defineStore('config', {
state: () => ({
id: 0,
i: 0,
configCount: 0,
contentType: { 'content-type': 'application/json;charset=UTF-8' },
channels: [] as Channel[],
@ -114,19 +114,19 @@ export const useConfig = defineStore('config', {
})
const json = await response.json()
const guiConfigs = []
const channelConfigs = []
for (const obj of this.channels) {
if (obj.name === stringObj.name) {
guiConfigs.push(json)
channelConfigs.push(json)
} else {
guiConfigs.push(obj)
channelConfigs.push(obj)
}
}
this.channels = guiConfigs
this.channelsRaw = cloneDeep(guiConfigs)
this.configCount = guiConfigs.length
this.channels = channelConfigs
this.channelsRaw = cloneDeep(channelConfigs)
this.configCount = channelConfigs.length
}
await this.getPlayoutConfig()
@ -139,7 +139,7 @@ export const useConfig = defineStore('config', {
const { timeToSeconds } = stringFormatter()
const authStore = useAuth()
const indexStore = useIndex()
const channel = this.channels[this.id].id
const channel = this.channels[this.i].id
await fetch(`/api/playout/config/${channel}`, {
method: 'GET',
@ -165,7 +165,7 @@ export const useConfig = defineStore('config', {
const { $i18n } = useNuxtApp()
const authStore = useAuth()
const indexStore = useIndex()
const channel = this.channels[this.id].id
const channel = this.channels[this.i].id
await $fetch(`/api/playout/advanced/${channel}`, {
method: 'GET',
@ -182,7 +182,7 @@ export const useConfig = defineStore('config', {
async setPlayoutConfig(obj: any) {
const { timeToSeconds } = stringFormatter()
const authStore = useAuth()
const channel = this.channels[this.id].id
const channel = this.channels[this.i].id
this.playlistLength = timeToSeconds(obj.playlist.length)
this.playout.playlist.startInSec = timeToSeconds(obj.playlist.day_start)
@ -203,7 +203,7 @@ export const useConfig = defineStore('config', {
async setAdvancedConfig() {
const authStore = useAuth()
const channel = this.channels[this.id].id
const channel = this.channels[this.i].id
const update = await fetch(`/api/playout/advanced/${channel}`, {
method: 'PUT',

2
frontend/stores/media.ts
View File

@ -23,7 +23,7 @@ export const useMedia = defineStore('media', {
const authStore = useAuth()
const configStore = useConfig()
const indexStore = useIndex()
const channel = configStore.channels[configStore.id].id
const channel = configStore.channels[configStore.i].id
const crumbs: Crumb[] = []
let root = '/'

2
frontend/stores/playlist.ts
View File

@ -33,7 +33,7 @@ export const usePlaylist = defineStore('playlist', {
const authStore = useAuth()
const configStore = useConfig()
const indexStore = useIndex()
const channel = configStore.channels[configStore.id].id
const channel = configStore.channels[configStore.i].id
await $fetch(`/api/playlist/${channel}?date=${date}`, {
method: 'GET',