djsundog/ffplayout
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add progressbar to current clip and jump to it.

Browse Source
This commit is contained in:
Jonathan Baecker 2020-05-12 17:43:53 +02:00
parent 2e27854a77
commit 439c0ec4c8
2 changed files with 39 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
ffplayout/frontend/pages/player.vue
View File

@ -198,21 +198,31 @@
</b-row>
</b-list-group-item>
</b-list-group>
<perfect-scrollbar>
<perfect-scrollbar id="scroll-container">
<b-list-group>
<draggable
id="playlist-group"
v-model="playlist"
group="playlist"
@start="drag=true"
@end="drag=false"
>
<b-list-group-item v-for="(item, index) in playlist" :key="item.key" class="playlist-item">
<b-list-group-item
v-for="(item, index) in playlist"
:id="`clip_${index}`"
:key="item.key"
class="playlist-item"
:class="index === currentClipIndex ? 'active-playlist-clip' : ''"
>
<b-row class="playlist-row">
<b-col cols="1" class="timecode">
{{ item.begin | secondsToTime }}
</b-col>
<b-col class="grabbing">
{{ item.source | filename }}
<div class="clip-progress">
<b-progress v-if="index === currentClipIndex" height="2px" :value="progressValue" />
</div>
</b-col>
<b-col cols="1" class="text-center playlist-input">
<b-link @click="showModal(item.source)">
@ -298,14 +308,15 @@ export default {
videoOptions: {},
previewOptions: {},
previewComp: null,
previewSource: ''
previewSource: '',
autoScroll: true
}
},
computed: {
...mapState('config', ['configGui', 'configPlayout']),
...mapState('media', ['crumbs', 'folderTree']),
...mapState('playlist', ['timeStr', 'timeLeft', 'currentClip', 'progressValue', 'currentClipDuration', 'currentClipIn', 'currentClipOut']),
...mapState('playlist', ['timeStr', 'timeLeft', 'currentClip', 'progressValue', 'currentClipIndex', 'currentClipDuration', 'currentClipIn', 'currentClipOut']),
playlist: {
get () {
return this.$store.state.playlist.playlist
@ -346,10 +357,20 @@ export default {
}
await this.getPlaylist()
},
mounted () {
if (!process.env.DEV) {
this.interval = setInterval(() => {
this.$store.dispatch('playlist/animClock')
const child = document.getElementById(`clip_${this.currentClipIndex}`)
if (child && this.autoScroll) {
const parent = document.getElementById('scroll-container')
const topPos = child.offsetTop
parent.scrollTop = topPos - 50
this.autoScroll = false
}
}, 5000)
} else {
this.$store.dispatch('playlist/animClock')
@ -667,4 +688,13 @@ export default {
background-color: #1C1E22;
}
.clip-progress {
height: 5px;
padding-top: 3px;
}
.active-playlist-clip {
background-color: #49515c !important;
}
</style>

5
ffplayout/frontend/store/playlist.js
View File

@ -4,6 +4,7 @@ export const state = () => ({
playlistChannel: 'Channel 1',
progressValue: 0,
currentClip: 'No clips is playing',
currentClipIndex: null,
currentClipStart: null,
currentClipDuration: null,
currentClipIn: null,
@ -28,6 +29,9 @@ export const mutations = {
SET_CURRENT_CLIP (state, clip) {
state.currentClip = clip
},
SET_CURRENT_CLIP_INDEX (state, index) {
state.currentClipIndex = index
},
SET_CURRENT_CLIP_START (state, start) {
state.currentClipStart = start
},
@ -77,6 +81,7 @@ export const actions = {
const progValue = playTime * 100 / duration
commit('SET_PROGRESS_VALUE', progValue)
commit('SET_CURRENT_CLIP', state.playlistToday[i].source)
commit('SET_CURRENT_CLIP_INDEX', i)
commit('SET_CURRENT_CLIP_START', start)
commit('SET_CURRENT_CLIP_DURATION', duration)
commit('SET_CURRENT_CLIP_IN', state.playlistToday[i].in)