add time, work on responsive layout
This commit is contained in:
Jonathan Baecker
parent
540b97efd7
commit
1a67539d2c
@ -1,23 +1,37 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="height:99%;">
|
||||
<Menu />
|
||||
<b-container class="control-container">
|
||||
<b-row>
|
||||
<b-row class="control-row">
|
||||
<b-col cols="3">
|
||||
<b-aspect class="player-col" aspect="16:9">
|
||||
<video-player v-if="videoOptions.sources" reference="videoPlayer" :options="videoOptions" />
|
||||
</b-aspect>
|
||||
</b-col>
|
||||
<b-col cols="9" class="control-col">
|
||||
control
|
||||
<b-row style="height:100%;">
|
||||
<b-col class="time-col">
|
||||
<div class="time-str">
|
||||
{{ timeStr }}
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col class="time-col">
|
||||
<div class="time-str">
|
||||
{{ timeLeft }}
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col>
|
||||
control
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-row class="date-row">
|
||||
<b-col>
|
||||
<b-datepicker v-model="today" size="sm" class="date-div" offset="-35px" />
|
||||
</b-col>
|
||||
</b-row>
|
||||
<splitpanes class="default-theme pane-row">
|
||||
<splitpanes class="list-row default-theme pane-row">
|
||||
<pane min-size="20" size="24">
|
||||
<loading
|
||||
:active.sync="isLoading"
|
||||
@ -58,19 +72,22 @@
|
||||
:key="file.key"
|
||||
class="browser-item"
|
||||
>
|
||||
<b-link>
|
||||
<b-row>
|
||||
<b-col cols="1" class="browser-icons-col">
|
||||
<b-icon-film class="browser-icons" />
|
||||
</b-col>
|
||||
<b-col class="browser-item-text">
|
||||
{{ file.file }}
|
||||
</b-col>
|
||||
<b-col cols="1" class="browser-dur-col">
|
||||
<span class="duration">{{ file.duration | toMin }}</span>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-link>
|
||||
<b-row>
|
||||
<b-col cols="1" class="browser-icons-col">
|
||||
<b-icon-film class="browser-icons" />
|
||||
</b-col>
|
||||
<b-col class="browser-item-text">
|
||||
{{ file.file }}
|
||||
</b-col>
|
||||
<b-col cols="1" class="browser-play-col">
|
||||
<b-link @click="showModal(`/${folderTree.tree[0]}/${file.file}`)">
|
||||
<b-icon-play-fill />
|
||||
</b-link>
|
||||
</b-col>
|
||||
<b-col cols="1" class="browser-dur-col">
|
||||
<span class="duration">{{ file.duration | toMin }}</span>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-list-group-item>
|
||||
</b-list-group>
|
||||
</perfect-scrollbar>
|
||||
@ -108,7 +125,7 @@
|
||||
<perfect-scrollbar>
|
||||
<b-list-group>
|
||||
<b-list-group-item v-for="item in playlist" :key="item.key">
|
||||
<b-row class="playlist-row">
|
||||
<b-row class="playlist-row" :data-in="item.in" :data-out="item.out">
|
||||
<b-col cols="1">
|
||||
{{ item.begin | secondsToTime }}
|
||||
</b-col>
|
||||
@ -145,7 +162,7 @@
|
||||
ref="prev-modal"
|
||||
size="xl"
|
||||
centered
|
||||
title="Preview"
|
||||
:title="`Preview: ${previewSource}`"
|
||||
hide-footer
|
||||
>
|
||||
<video-player v-if="previewOptions" reference="previewPlayer" :options="previewOptions" />
|
||||
@ -189,7 +206,7 @@ export default {
|
||||
computed: {
|
||||
...mapState('config', ['configGui', 'configPlayout']),
|
||||
...mapState('media', ['crumbs', 'folderTree']),
|
||||
...mapState('playlist', ['playlist'])
|
||||
...mapState('playlist', ['playlist', 'timeStr', 'timeLeft'])
|
||||
},
|
||||
|
||||
watch: {
|
||||
@ -200,7 +217,6 @@ export default {
|
||||
|
||||
async created () {
|
||||
await this.getConfig()
|
||||
await this.getPlaylist()
|
||||
|
||||
this.extensions = this.configPlayout.storage.extensions.join(' ')
|
||||
|
||||
@ -219,6 +235,8 @@ export default {
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
await this.getPlaylist()
|
||||
},
|
||||
|
||||
methods: {
|
||||
@ -238,6 +256,8 @@ export default {
|
||||
await this.$store.dispatch('playlist/getPlaylist', { dayStart: this.configPlayout.playlist.day_start, date: this.today })
|
||||
},
|
||||
showModal (src) {
|
||||
console.log(src)
|
||||
this.previewSource = src.split('/').slice(-1)[0]
|
||||
this.previewOptions = {
|
||||
liveui: false,
|
||||
controls: true,
|
||||
@ -261,6 +281,39 @@ export default {
|
||||
.control-container {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: 97%;
|
||||
}
|
||||
|
||||
.control-row {
|
||||
height: 25%;
|
||||
min-height: 260px;
|
||||
max-height: 280px;
|
||||
}
|
||||
|
||||
.time-col {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
min-height: 260px;
|
||||
max-height: 280px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.time-str {
|
||||
position: relative;
|
||||
top: 45%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
font-size: 8em;
|
||||
}
|
||||
|
||||
.date-row {
|
||||
height: 3%;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.list-row {
|
||||
height: 68%;
|
||||
}
|
||||
|
||||
.player-col {
|
||||
@ -269,11 +322,12 @@ export default {
|
||||
}
|
||||
|
||||
.pane-row {
|
||||
margin: 8px 0 0 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.browser-div {
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.date-div {
|
||||
@ -283,22 +337,36 @@ export default {
|
||||
|
||||
.playlist-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.browser-icons-col {
|
||||
max-width: 10px;
|
||||
}
|
||||
|
||||
.browser-dur-col {
|
||||
min-width: 110px;
|
||||
.browser-play-col {
|
||||
max-width: 15px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.browser-div .ps, .playlist-container .ps {
|
||||
height: 600px;
|
||||
.browser-dur-col {
|
||||
min-width: 95px;
|
||||
margin: 0;
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
|
||||
.browser-div .ps {
|
||||
height: 93.5%;
|
||||
}
|
||||
|
||||
.playlist-container .ps {
|
||||
height: 94.5%;
|
||||
}
|
||||
|
||||
.browser-list {
|
||||
max-height: 600px;
|
||||
max-height: 93%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
|
||||
@ -1,10 +1,36 @@
|
||||
// convert time (00:00:00) string to seconds
|
||||
function timeToSeconds (time) {
|
||||
const t = time.split(':')
|
||||
return parseInt(t[0]) * 3600 + parseInt(t[1]) * 60 + parseInt(t[2])
|
||||
}
|
||||
|
||||
export const state = () => ({
|
||||
playlist: null
|
||||
playlist: null,
|
||||
clockStart: true,
|
||||
progressValue: 0,
|
||||
currentClip: null,
|
||||
timeStr: null,
|
||||
timeLeft: null
|
||||
})
|
||||
|
||||
export const mutations = {
|
||||
UPDATE_PLAYLIST (state, list) {
|
||||
state.playlist = list
|
||||
},
|
||||
SET_CLOCK_START (state, bol) {
|
||||
state.clockStart = bol
|
||||
},
|
||||
SET_PROGRESS_VALUE (state, value) {
|
||||
state.clockStart = value
|
||||
},
|
||||
SET_CURRENT_CLIP (state, clip) {
|
||||
state.currentClip = clip
|
||||
},
|
||||
SET_TIME (state, time) {
|
||||
state.timeStr = time
|
||||
},
|
||||
SET_TIME_LEFT (state, time) {
|
||||
state.timeLeft = time
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,6 +49,60 @@ export const actions = {
|
||||
}
|
||||
|
||||
commit('UPDATE_PLAYLIST', response.data.program)
|
||||
dispatch('animClock')
|
||||
}
|
||||
},
|
||||
|
||||
async animClock ({ commit, dispatch, state, rootState }) {
|
||||
// sleep timer
|
||||
function sleep (ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms))
|
||||
}
|
||||
|
||||
let start = timeToSeconds(rootState.config.configPlayout.playlist.day_start)
|
||||
let time
|
||||
|
||||
if (state.clockStart) {
|
||||
commit('SET_CLOCK_START', false)
|
||||
|
||||
// loop over clips in program list from today
|
||||
for (let i = 0; i < state.playlist.length; i++) {
|
||||
let breakOut = false
|
||||
const duration = state.playlist[i].out - state.playlist[i].in
|
||||
let playTime = timeToSeconds(this.$dayjs().format('HH:mm:ss')) - start
|
||||
let updateSrc = true
|
||||
|
||||
// animate the progress bar
|
||||
while (playTime <= duration) {
|
||||
if (updateSrc) {
|
||||
commit('SET_CURRENT_CLIP', state.playlist[i].source)
|
||||
console.log(state.currentClip)
|
||||
updateSrc = false
|
||||
}
|
||||
await sleep(1000)
|
||||
const pValue = playTime * 100 / duration
|
||||
if (pValue < state.progressValue) {
|
||||
breakOut = true
|
||||
break
|
||||
}
|
||||
|
||||
time = this.$dayjs().format('HH:mm:ss')
|
||||
commit('SET_PROGRESS_VALUE', pValue)
|
||||
commit('SET_TIME', time)
|
||||
playTime = timeToSeconds(time) - start
|
||||
commit('SET_TIME_LEFT', new Date((duration - playTime) * 1000).toISOString().substr(11, 8))
|
||||
}
|
||||
|
||||
start += duration
|
||||
|
||||
if (breakOut) {
|
||||
break
|
||||
}
|
||||
|
||||
// reset progress
|
||||
commit('SET_PROGRESS_VALUE', 0)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user