add time shift, support negative time values

components/PlayerControl.vue

@@ -66,6 +66,11 @@
                                 <strong>{{ $t('player.in') }}:</strong> {{ secToHMS(playlistStore.currentClipIn) }} |
                                 <strong>{{ $t('player.out') }}:</strong>
                                 {{ secToHMS(playlistStore.currentClipOut) }}
+
+                                <template v-if="playlistStore.shift !== 0">
+                                    | <strong>{{ $t('player.shift') }}:</strong>
+                                    {{ secToHMS(playlistStore.shift) }}
+                                </template>
                             </div>
                             <div class="h-1/3">
                                 <progress
@@ -268,7 +273,7 @@ watch([configID], () => {
 })
 
 function timeRemaining() {
-    let remaining = playlistStore.currentClipOut - playlistStore.playedSec
+    let remaining = playlistStore.currentClipOut - playlistStore.elapsedSec
 
     if (remaining < 0) {
         remaining = 0
@@ -286,7 +291,8 @@ async function clock() {
 }
 
 function resetStatus() {
-    playlistStore.playedSec = 0
+    playlistStore.elapsedSec = 0
+    playlistStore.shift = 0
     playlistStore.currentClip = ''
     playlistStore.ingestRuns = false
     playlistStore.currentClipDuration = 0

components/PlaylistTable.vue

@@ -145,13 +145,7 @@ const playlistSortOptions = {
     handle: '.grabbing',
 }
 
-const props = defineProps({
-    getPlaylist: {
-        type: Function,
-        default() {
-            return ''
-        },
-    },
+defineProps({
     editItem: {
         type: Function,
         default() {
@@ -167,17 +161,28 @@ const props = defineProps({
 })
 
 onMounted(() => {
-    props.getPlaylist()
+    getPlaylist()
 })
 
 watch([listDate], () => {
-    props.getPlaylist()
+    getPlaylist()
 })
 
 defineExpose({
     classSwitcher,
+    getPlaylist,
 })
 
+function scrollTo(index: number) {
+    const child = document.getElementById(`clip-${index}`)
+    const parent = document.getElementById('playlist-container')
+
+    if (child && parent) {
+        const topPos = child.offsetTop
+        parent.scrollTop = topPos - 50
+    }
+}
+
 function classSwitcher() {
     if (playlistStore.playlist.length === 0) {
         sortContainer.value.sortable.el.classList.add('is-empty')
@@ -196,6 +201,22 @@ function classSwitcher() {
     }
 }
 
+async function getPlaylist() {
+    playlistStore.isLoading = true
+    await playlistStore.getPlaylist(listDate.value)
+    playlistStore.isLoading = false
+
+    setTimeout(() => {
+        if (listDate.value === todayDate.value) {
+            scrollTo(playlistStore.currentClipIndex)
+        } else {
+            scrollTo(0)
+        }
+
+        classSwitcher()
+    }, 200)
+}
+
 function setCategory(event: any, item: PlaylistItem) {
     if (event.target.checked) {
         item.category = 'advertisement'

composables/helper.ts

@@ -45,6 +45,9 @@ export const stringFormatter = () => {
     }
 
     function secToHMS(sec: number) {
+        const sign = Math.sign(sec)
+        sec = Math.abs(sec)
+
         const hours = Math.floor(sec / 3600)
         sec %= 3600
         const minutes = Math.floor(sec / 60)
@@ -53,7 +56,10 @@ export const stringFormatter = () => {
         const m = String(minutes).padStart(2, '0')
         const h = String(hours).padStart(2, '0')
         const s = String(seconds).padStart(2, '0')
-        return `${h}:${m}:${s}`
+
+        const hString = (sign === -1 ? '-' : '') + h
+
+        return `${hString}:${m}:${s}`
     }
 
     function numberToHex(num: number) {

lang/de-DE.js

@@ -81,6 +81,7 @@ export default {
         advanced: 'Erweitert',
         sorted: 'Sortiert',
         shuffle: 'Zufall',
+        shift: 'Zeitverschiebung',
         all: 'Alle',
         addBlock: 'Zeitblock hinzufügen',
     },

lang/en-US.js

@@ -81,6 +81,7 @@ export default {
         advanced: 'Advanced',
         sorted: 'Sorted',
         shuffle: 'Shuffle',
+        shift: 'Shift',
         all: 'All',
         addBlock: 'Add time block',
     },

lang/pt-BR.js

@@ -81,6 +81,7 @@ export default {
         advanced: 'Avançado',
         sorted: 'Ordenado',
         shuffle: 'Aleatório',
+        shift: 'Diferença horária',
         all: 'Todos',
         addBlock: 'Adicionar bloco de tempo',
     },

pages/player.vue

@@ -30,12 +30,7 @@
                     <MediaBrowser :preview="setPreviewData" />
                 </pane>
                 <pane>
-                    <PlaylistTable
-                        ref="playlistTable"
-                        :get-playlist="getPlaylist"
-                        :edit-item="editPlaylistItem"
-                        :preview="setPreviewData"
-                    />
+                    <PlaylistTable ref="playlistTable" :edit-item="editPlaylistItem" :preview="setPreviewData" />
                 </pane>
             </splitpanes>
         </div>
@@ -76,7 +71,7 @@
             <button
                 class="btn btn-sm btn-primary join-item"
                 :title="$t('player.reset')"
-                @click=";(playlistStore.playlist.length = 0), getPlaylist()"
+                @click=";(playlistStore.playlist.length = 0), playlistTable.getPlaylist()"
             >
                 <i class="bi-arrow-counterclockwise" />
             </button>
@@ -226,7 +221,6 @@ useHead({
 
 const { listDate } = storeToRefs(usePlaylist())
 
-const todayDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
 const targetDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
 const playlistTable = ref()
 const editId = ref(-1)
@@ -256,34 +250,10 @@ const newSource = ref({
     uid: '',
 } as PlaylistItem)
 
-function scrollTo(index: number) {
-    const child = document.getElementById(`clip-${index}`)
-    const parent = document.getElementById('playlist-container')
-
-    if (child && parent) {
-        const topPos = child.offsetTop
-        parent.scrollTop = topPos - 50
-    }
-}
-
 const calendarFormat = (date: Date) => {
     return $dayjs(date).locale(locale.value).format('dddd - LL')
 }
 
-async function getPlaylist() {
-    playlistStore.isLoading = true
-    await playlistStore.getPlaylist(listDate.value)
-    playlistStore.isLoading = false
-
-    if (listDate.value === todayDate.value) {
-        scrollTo(playlistStore.currentClipIndex)
-    } else {
-        scrollTo(0)
-    }
-
-    playlistTable.value.classSwitcher()
-}
-
 function closeGenerator() {
     showPlaylistGenerator.value = false
 }

stores/playlist.ts

@@ -22,7 +22,8 @@ export const usePlaylist = defineStore('playlist', {
         currentClipIn: 0,
         currentClipOut: 0,
         ingestRuns: false,
-        playedSec: 0,
+        elapsedSec: 0,
+        shift: 0,
         playoutIsRunning: false,
     }),
 
@@ -81,10 +82,11 @@ export const usePlaylist = defineStore('playlist', {
             this.currentClipOut = item.media.out
             this.currentClipDuration = item.media.duration
             this.currentClipIndex = item.index
-            this.playedSec = item.played
+            this.elapsedSec = item.elapsed
             this.ingestRuns = item.ingest
+            this.shift = item.shift
 
-            this.progressValue = (this.playedSec * 100) / this.currentClipOut
+            this.progressValue = (this.elapsedSec * 100) / this.currentClipOut
         },
     },
 })

types/index.d.ts

@@ -125,6 +125,7 @@ declare global {
         index: number
         ingest: boolean
         mode: string
-        played: number
+        elapsed: number
+        shift: number
     }
 }