working on timer
This commit is contained in:
jb-alvarado
parent
6eb918f2d2
commit
86f188b630
@ -10,17 +10,29 @@
|
||||
</b-col>
|
||||
<b-col cols="9" class="control-col">
|
||||
<b-row style="height:100%;">
|
||||
<b-col class="time-col">
|
||||
<div class="time-str">
|
||||
{{ timeStr }}
|
||||
<b-col cols="8">
|
||||
<b-row>
|
||||
<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-row>
|
||||
<div class="current-clip">
|
||||
<div class="current-clip-text">
|
||||
{{ currentClip | filename }}
|
||||
</div>
|
||||
<div class="current-clip-progress">
|
||||
<b-progress :value="progressValue" variant="warning" />
|
||||
</div>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col class="time-col">
|
||||
<div class="time-str">
|
||||
{{ timeLeft }}
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col>
|
||||
<b-col cols="4">
|
||||
control
|
||||
</b-col>
|
||||
</b-row>
|
||||
@ -183,8 +195,10 @@ export default {
|
||||
|
||||
filters: {
|
||||
filename (path) {
|
||||
const pathArr = path.split('/')
|
||||
return pathArr[pathArr.length - 1]
|
||||
if (path) {
|
||||
const pathArr = path.split('/')
|
||||
return pathArr[pathArr.length - 1]
|
||||
}
|
||||
},
|
||||
secondsToTime (sec) {
|
||||
return new Date(sec * 1000).toISOString().substr(11, 8)
|
||||
@ -206,7 +220,7 @@ export default {
|
||||
computed: {
|
||||
...mapState('config', ['configGui', 'configPlayout']),
|
||||
...mapState('media', ['crumbs', 'folderTree']),
|
||||
...mapState('playlist', ['playlist', 'timeStr', 'timeLeft'])
|
||||
...mapState('playlist', ['playlist', 'timeStr', 'timeLeft', 'currentClip', 'progressValue'])
|
||||
},
|
||||
|
||||
watch: {
|
||||
@ -291,20 +305,24 @@ export default {
|
||||
}
|
||||
|
||||
.time-col {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
min-height: 260px;
|
||||
max-height: 280px;
|
||||
background: #32383E;
|
||||
margin-right: .5em;
|
||||
text-align: center;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.time-str {
|
||||
position: relative;
|
||||
top: 45%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
font-size: 8em;
|
||||
font-family: 'DigitalNumbers-Regular';
|
||||
font-size: 5em;
|
||||
letter-spacing: -.15em;
|
||||
}
|
||||
|
||||
.current-clip {
|
||||
background: #32383E;
|
||||
height: 40%;
|
||||
margin: .5em .5em 0 0;
|
||||
padding: 15px;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.date-row {
|
||||
|
||||
@ -4,6 +4,32 @@ function timeToSeconds (time) {
|
||||
return parseInt(t[0]) * 3600 + parseInt(t[1]) * 60 + parseInt(t[2])
|
||||
}
|
||||
|
||||
function secToHMS (sec) {
|
||||
let hours = Math.floor(sec / 3600)
|
||||
sec %= 3600
|
||||
let minutes = Math.floor(sec / 60)
|
||||
let seconds = sec % 60
|
||||
|
||||
minutes = String(minutes).padStart(2, '0')
|
||||
hours = String(hours).padStart(2, '0')
|
||||
seconds = String(parseInt(seconds)).padStart(2, '0')
|
||||
return hours + ':' + minutes + ':' + seconds
|
||||
}
|
||||
|
||||
// sleep timer
|
||||
function sleep (ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms))
|
||||
}
|
||||
|
||||
/*
|
||||
const counte = (function main (counter) {
|
||||
console.log(counter)
|
||||
|
||||
if (counter < 20) {
|
||||
setTimeout(main, 1000, counter + 1)
|
||||
}
|
||||
})(0)
|
||||
*/
|
||||
export const state = () => ({
|
||||
playlist: null,
|
||||
clockStart: true,
|
||||
@ -21,7 +47,7 @@ export const mutations = {
|
||||
state.clockStart = bol
|
||||
},
|
||||
SET_PROGRESS_VALUE (state, value) {
|
||||
state.clockStart = value
|
||||
state.progressValue = value
|
||||
},
|
||||
SET_CURRENT_CLIP (state, clip) {
|
||||
state.currentClip = clip
|
||||
@ -54,11 +80,6 @@ export const actions = {
|
||||
},
|
||||
|
||||
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
|
||||
|
||||
@ -67,7 +88,6 @@ export const actions = {
|
||||
|
||||
// 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
|
||||
@ -76,29 +96,21 @@ export const actions = {
|
||||
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))
|
||||
playTime += 1
|
||||
commit('SET_TIME_LEFT', secToHMS(duration - playTime))
|
||||
await sleep(1000)
|
||||
}
|
||||
|
||||
start += duration
|
||||
|
||||
if (breakOut) {
|
||||
break
|
||||
}
|
||||
|
||||
// reset progress
|
||||
commit('SET_PROGRESS_VALUE', 0)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user