From 6111c2686d14b3bf33a4c0b29c85672f7e4f4399 Mon Sep 17 00:00:00 2001 From: jb-alvarado Date: Tue, 30 Apr 2024 09:11:26 +0200 Subject: [PATCH] add time shift, support negative time values --- components/PlayerControl.vue | 10 +++++++-- components/PlaylistTable.vue | 39 +++++++++++++++++++++++++++--------- composables/helper.ts | 8 +++++++- lang/de-DE.js | 1 + lang/en-US.js | 1 + lang/pt-BR.js | 1 + pages/player.vue | 34 ++----------------------------- stores/playlist.ts | 8 +++++--- types/index.d.ts | 3 ++- 9 files changed, 57 insertions(+), 48 deletions(-) diff --git a/components/PlayerControl.vue b/components/PlayerControl.vue index d59ce3ff..4a9f3b3f 100644 --- a/components/PlayerControl.vue +++ b/components/PlayerControl.vue @@ -66,6 +66,11 @@ {{ $t('player.in') }}: {{ secToHMS(playlistStore.currentClipIn) }} | {{ $t('player.out') }}: {{ secToHMS(playlistStore.currentClipOut) }} + +
{ }) 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 diff --git a/components/PlaylistTable.vue b/components/PlaylistTable.vue index fbd4bde7..29a5830c 100644 --- a/components/PlaylistTable.vue +++ b/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' diff --git a/composables/helper.ts b/composables/helper.ts index 4ae3db9e..4e39a57a 100644 --- a/composables/helper.ts +++ b/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) { diff --git a/lang/de-DE.js b/lang/de-DE.js index 5dce94a1..fc3e2ab1 100644 --- a/lang/de-DE.js +++ b/lang/de-DE.js @@ -81,6 +81,7 @@ export default { advanced: 'Erweitert', sorted: 'Sortiert', shuffle: 'Zufall', + shift: 'Zeitverschiebung', all: 'Alle', addBlock: 'Zeitblock hinzufügen', }, diff --git a/lang/en-US.js b/lang/en-US.js index 81dbcc9b..3facae43 100644 --- a/lang/en-US.js +++ b/lang/en-US.js @@ -81,6 +81,7 @@ export default { advanced: 'Advanced', sorted: 'Sorted', shuffle: 'Shuffle', + shift: 'Shift', all: 'All', addBlock: 'Add time block', }, diff --git a/lang/pt-BR.js b/lang/pt-BR.js index fd35c4a3..80224538 100644 --- a/lang/pt-BR.js +++ b/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', }, diff --git a/pages/player.vue b/pages/player.vue index 1ab7d0db..50c0cd05 100644 --- a/pages/player.vue +++ b/pages/player.vue @@ -30,12 +30,7 @@ - +
@@ -76,7 +71,7 @@ @@ -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 } diff --git a/stores/playlist.ts b/stores/playlist.ts index e3c6c371..4c75361a 100644 --- a/stores/playlist.ts +++ b/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 }, }, }) diff --git a/types/index.d.ts b/types/index.d.ts index f3adaecb..ecf86473 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -125,6 +125,7 @@ declare global { index: number ingest: boolean mode: string - played: number + elapsed: number + shift: number } }