improve infinit mode, fix #643

components/ConfigPlayout.vue

@@ -165,6 +165,7 @@ function setHelp(key: string, text: string): string {
 
 async function onSubmitPlayout() {
     const update = await configStore.setPlayoutConfig(configStore.playout)
+    configStore.onetimeInfo = true
 
     if (update.status === 200) {
         indexStore.msgAlert('success', 'Update playout config success!', 2)

components/MediaBrowser.vue

@@ -43,9 +43,9 @@
                         :id="`file-${index}`"
                         :key="element.name"
                         class="w-full border-b border-t border-base-content/20"
-                        :class="{ 'grabbing cursor-grab': width > 768 }"
+                        :class="{ 'grabbing cursor-grab': width > 768 && configStore.playout.processing.mode === 'playlist' }"
                     >
-                        <td class="ps-2 py-1 w-[20px]">
+                        <td class="ps-2 py-1 w-[20px]" :class="{'timeHidden': configStore.playout.playlist.infinit}">
                             <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" />
@@ -77,6 +77,7 @@
 const { width } = useWindowSize({ initialWidth: 800 })
 const { secToHMS, mediaType } = stringFormatter()
 
+const configStore = useConfig()
 const mediaStore = useMedia()
 const { configID } = storeToRefs(useConfig())
 

components/PlaylistTable.vue

@@ -10,7 +10,7 @@
         <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">
+                    <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 -mb-[2px]">
                             {{ $t('player.start') }}
                         </div>
@@ -80,7 +80,9 @@
                             '!bg-amber-600/40': element.overtime,
                         }"
                     >
-                        <td class="ps-4 py-2 text-left">{{ secondsToTime(element.begin) }}</td>
+                        <td v-if="!configStore.playout.playlist.infinit" class="ps-4 py-2 text-left">
+                            {{ secondsToTime(element.begin) }}
+                        </td>
                         <td class="py-2 text-left truncate" :class="{ 'grabbing cursor-grab': width > 768 }">
                             {{ element.title || filename(element.source) }}
                         </td>
@@ -189,7 +191,8 @@ function classSwitcher() {
 
         if (
             configStore.playout.playlist.startInSec + configStore.playout.playlist.lengthInSec >
-            lastItem.begin + lastItem.out - lastItem.in
+                lastItem.begin + lastItem.out - lastItem.in ||
+            configStore.playout.playlist.infinit
         ) {
             sortContainer.value?.sortable.el.classList.add('add-space')
         } else {
@@ -307,6 +310,10 @@ function deletePlaylistItem(index: number) {
     position: absolute;
 }
 
+#sort-container .timeHidden {
+    display: none !important;
+}
+
 /*
     format dragging element
 */

composables/helper.ts

@@ -111,7 +111,7 @@ export const stringFormatter = () => {
     }
 
     function secondsToTime(sec: number) {
-        return new Date(sec * 1000).toISOString().substring(11, 19)
+        return new Date(sec * 1000 || 0).toISOString().substring(11, 19)
     }
 
     function mediaType(path: string) {
@@ -153,13 +153,13 @@ export const stringFormatter = () => {
         const ext = path.split('.').pop()
 
         if (ext) {
-            if (liveType.includes(ext)) {
+            if (liveType.includes(ext.toLowerCase())) {
                 return 'live'
-            } else if (videoType.includes(ext)) {
+            } else if (videoType.includes(ext.toLowerCase())) {
                 return 'video'
-            } else if (audioType.includes(ext)) {
+            } else if (audioType.includes(ext.toLowerCase())) {
                 return 'audio'
-            } else if (imageType.includes(ext)) {
+            } else if (imageType.includes(ext.toLowerCase())) {
                 return 'image'
             }
         }

lang/de-DE.js

@@ -85,6 +85,7 @@ export default {
         shift: 'Zeitverschiebung',
         all: 'Alle',
         addBlock: 'Zeitblock hinzufügen',
+        infinitInfo: 'Die Wiedergabe läuft im unendlichen Modus. Es sind keine zeitbasierten Informationen möglich.',
     },
     media: {
         notExists: 'Speicher existiert nicht!',

lang/en-US.js

@@ -85,6 +85,7 @@ export default {
         shift: 'Shift',
         all: 'All',
         addBlock: 'Add time block',
+        infinitInfo: 'Playout runs in infinite mode. No time based information is possible.',
     },
     media: {
         notExists: 'Storage not exist!',

lang/pt-BR.js

@@ -85,6 +85,7 @@ export default {
         shift: 'Diferença horária',
         all: 'Todos',
         addBlock: 'Adicionar bloco de tempo',
+        infinitInfo: 'O playout é executado no modo infinito. Nenhuma informação baseada em tempo é possível',
     },
     media: {
         notExists: 'O armazenamento não existe!',

lang/ru-RU.js

@@ -85,6 +85,7 @@ export default {
         shift: 'Перемотка',
         all: 'Все',
         addBlock: 'Добавить время начало передачи',
+        infinitInfo: 'Воспроизведение работает в бесконечном режиме. Никакая информация, основанная на времени, невозможна.',
     },
     media: {
         notExists: 'Папки не существует!',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffplayout-frontend",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "Web GUI for ffplayout",
   "author": "Jonathan Baecker",
   "private": true,

pages/player.vue

@@ -2,8 +2,9 @@
     <div class="h-full">
         <PlayerControl />
         <div class="flex justify-end p-1">
-            <div>
+            <div class="h-[32px]">
                 <VueDatePicker
+                    v-if="!configStore.playout.playlist.infinit && configStore.playout.processing.mode !== 'folder'"
                     v-model="listDate"
                     :clearable="false"
                     :hide-navigation="['time']"
@@ -19,7 +20,10 @@
             </div>
         </div>
         <div class="p-1 min-h-[260px] h-[calc(100vh-800px)] xl:h-[calc(100vh-480px)]">
-            <splitpanes class="border border-my-gray rounded shadow">
+            <splitpanes
+                v-if="configStore.playout.processing.mode === 'playlist'"
+                class="border border-my-gray rounded shadow"
+            >
                 <pane
                     v-if="width > 768"
                     class="relative h-full !bg-base-300 rounded-s"
@@ -33,9 +37,12 @@
                     <PlaylistTable ref="playlistTable" :edit-item="editPlaylistItem" :preview="setPreviewData" />
                 </pane>
             </splitpanes>
+            <div v-else class="h-full border border-b-2 border-my-gray rounded shadow">
+                <MediaBrowser :preview="setPreviewData" />
+            </div>
         </div>
 
-        <div class="h-16 join flex justify-end p-3">
+        <div v-if="configStore.playout.processing.mode === 'playlist'" class="h-16 join flex justify-end p-3">
             <button class="btn btn-sm btn-primary join-item" :title="$t('player.copy')" @click="showCopyModal = true">
                 <i class="bi-files" />
             </button>
@@ -259,6 +266,13 @@ const newSource = ref({
     uid: '',
 } as PlaylistItem)
 
+onMounted(() => {
+    if (configStore.onetimeInfo && configStore.playout.playlist.infinit) {
+        indexStore.msgAlert('warning', t('player.infinitInfo'), 7)
+        configStore.onetimeInfo = false
+    }
+})
+
 const calendarFormat = (date: Date) => {
     return $dayjs(date).locale(locale.value).format('dddd - LL')
 }

stores/config.ts

@@ -13,6 +13,7 @@ export const useConfig = defineStore('config', {
         currentUser: '',
         configUser: {} as User,
         utcOffset: 0,
+        onetimeInfo: true,
     }),
 
     getters: {},

stores/playlist.ts

@@ -54,7 +54,7 @@ export const usePlaylist = defineStore('playlist', {
                         if (
                             this.playlist.length > 0 &&
                             programData.length > 0 &&
-                            this.playlist[0].date === date &&
+                            (this.playlist[0].date === date || configStore.playout.playlist.infinit) &&
                             $_.differenceWith(this.playlist, programData, (a, b) => {
                                 return $_.isEqual($_.omit(a, ['uid']), $_.omit(b, ['uid']))
                             }).length > 0