integrate drag&drop and playlist ops
This commit is contained in:
Jonathan Baecker
parent
fa8ebd4310
commit
6678ba21d1
@ -110,6 +110,12 @@
|
|||||||
<b-icon-folder-fill class="browser-icons" /> {{ folder }}
|
<b-icon-folder-fill class="browser-icons" /> {{ folder }}
|
||||||
</b-link>
|
</b-link>
|
||||||
</b-list-group-item>
|
</b-list-group-item>
|
||||||
|
<draggable
|
||||||
|
:list="folderTree.tree[2]"
|
||||||
|
:clone="cloneClip"
|
||||||
|
:group="{ name: 'playlist', pull: 'clone', put: false }"
|
||||||
|
:sort="false"
|
||||||
|
>
|
||||||
<b-list-group-item
|
<b-list-group-item
|
||||||
v-for="file in folderTree.tree[2]"
|
v-for="file in folderTree.tree[2]"
|
||||||
:key="file.key"
|
:key="file.key"
|
||||||
@ -119,7 +125,7 @@
|
|||||||
<b-col cols="1" class="browser-icons-col">
|
<b-col cols="1" class="browser-icons-col">
|
||||||
<b-icon-film class="browser-icons" />
|
<b-icon-film class="browser-icons" />
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col class="browser-item-text">
|
<b-col class="browser-item-text grabbing">
|
||||||
{{ file.file }}
|
{{ file.file }}
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col cols="1" class="browser-play-col">
|
<b-col cols="1" class="browser-play-col">
|
||||||
@ -132,6 +138,7 @@
|
|||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
</b-list-group-item>
|
</b-list-group-item>
|
||||||
|
</draggable>
|
||||||
</b-list-group>
|
</b-list-group>
|
||||||
</perfect-scrollbar>
|
</perfect-scrollbar>
|
||||||
</div>
|
</div>
|
||||||
@ -144,10 +151,10 @@
|
|||||||
<b-col cols="1" class="timecode">
|
<b-col cols="1" class="timecode">
|
||||||
Start
|
Start
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col cols="6">
|
<b-col>
|
||||||
File
|
File
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col cols="1" class="text-center">
|
<b-col cols="1" class="text-center playlist-input">
|
||||||
Play
|
Play
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col cols="1" class="timecode">
|
<b-col cols="1" class="timecode">
|
||||||
@ -159,7 +166,10 @@
|
|||||||
<b-col cols="1" class="timecode">
|
<b-col cols="1" class="timecode">
|
||||||
Out
|
Out
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col cols="1" class="text-center">
|
<b-col cols="1" class="text-center playlist-input">
|
||||||
|
Ad
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="1" class="text-center playlist-input">
|
||||||
Delete
|
Delete
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
@ -167,15 +177,21 @@
|
|||||||
</b-list-group>
|
</b-list-group>
|
||||||
<perfect-scrollbar>
|
<perfect-scrollbar>
|
||||||
<b-list-group>
|
<b-list-group>
|
||||||
<b-list-group-item v-for="item in playlist" :key="item.key">
|
<draggable
|
||||||
<b-row class="playlist-row" :data-in="item.in" :data-out="item.out">
|
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-row class="playlist-row">
|
||||||
<b-col cols="1" class="timecode">
|
<b-col cols="1" class="timecode">
|
||||||
{{ item.begin | secondsToTime }}
|
{{ item.begin | secondsToTime }}
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col cols="6">
|
<b-col class="grabbing">
|
||||||
{{ item.source | filename }}
|
{{ item.source | filename }}
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col cols="1" class="text-center">
|
<b-col cols="1" class="text-center playlist-input">
|
||||||
<b-link @click="showModal(item.source)">
|
<b-link @click="showModal(item.source)">
|
||||||
<b-icon-play-fill />
|
<b-icon-play-fill />
|
||||||
</b-link>
|
</b-link>
|
||||||
@ -184,16 +200,26 @@
|
|||||||
{{ item.duration | secondsToTime }}
|
{{ item.duration | secondsToTime }}
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col cols="1" class="timecode">
|
<b-col cols="1" class="timecode">
|
||||||
{{ item.in | secondsToTime }}
|
<b-form-input :value="item.in | secondsToTime" size="sm" @input="changeTime('in', index, $event)" />
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col cols="1" class="timecode">
|
<b-col cols="1" class="timecode">
|
||||||
{{ item.out | secondsToTime }}
|
<b-form-input :value="item.out | secondsToTime" size="sm" @input="changeTime('out', index, $event)" />
|
||||||
</b-col>
|
</b-col>
|
||||||
<b-col cols="1" class="text-center">
|
<b-col cols="1" class="text-center playlist-input">
|
||||||
|
<b-form-checkbox
|
||||||
|
v-model="item.category"
|
||||||
|
value="advertisement"
|
||||||
|
:unchecked-value="item.category"
|
||||||
|
/>
|
||||||
|
</b-col>
|
||||||
|
<b-col cols="1" class="text-center playlist-input">
|
||||||
|
<b-link @click="removeItemFromPlaylist(index)">
|
||||||
<b-icon-x-circle-fill />
|
<b-icon-x-circle-fill />
|
||||||
|
</b-link>
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
</b-list-group-item>
|
</b-list-group-item>
|
||||||
|
</draggable>
|
||||||
</b-list-group>
|
</b-list-group>
|
||||||
</perfect-scrollbar>
|
</perfect-scrollbar>
|
||||||
</div>
|
</div>
|
||||||
@ -240,7 +266,15 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
secondsToTime (sec) {
|
secondsToTime (sec) {
|
||||||
return new Date(sec * 1000).toISOString().substr(11, 8)
|
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
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -259,7 +293,16 @@ export default {
|
|||||||
computed: {
|
computed: {
|
||||||
...mapState('config', ['configGui', 'configPlayout']),
|
...mapState('config', ['configGui', 'configPlayout']),
|
||||||
...mapState('media', ['crumbs', 'folderTree']),
|
...mapState('media', ['crumbs', 'folderTree']),
|
||||||
...mapState('playlist', ['playlist', 'timeStr', 'timeLeft', 'currentClip', 'progressValue'])
|
...mapState('playlist', ['timeStr', 'timeLeft', 'currentClip', 'progressValue']),
|
||||||
|
playlist: {
|
||||||
|
get () {
|
||||||
|
return this.$store.state.playlist.playlist
|
||||||
|
},
|
||||||
|
set (list) {
|
||||||
|
this.$store.commit('playlist/UPDATE_PLAYLIST', this.$processPlaylist(
|
||||||
|
this.configPlayout.playlist.day_start, list))
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
@ -326,11 +369,38 @@ export default {
|
|||||||
}
|
}
|
||||||
this.$root.$emit('bv::show::modal', 'preview-modal')
|
this.$root.$emit('bv::show::modal', 'preview-modal')
|
||||||
},
|
},
|
||||||
resetPlaylist () {
|
cloneClip ({ file, duration }) {
|
||||||
console.log('reset playlist')
|
return {
|
||||||
|
source: `/${this.folderTree.tree[0]}/${file}`,
|
||||||
|
in: 0,
|
||||||
|
out: duration,
|
||||||
|
duration
|
||||||
|
}
|
||||||
|
},
|
||||||
|
changeTime (pos, index, input) {
|
||||||
|
if (input.match(/(?:[01]\d|2[0123]):(?:[012345]\d):(?:[012345]\d)/gm)) {
|
||||||
|
const sec = this.$timeToSeconds(input)
|
||||||
|
|
||||||
|
if (pos === 'in') {
|
||||||
|
this.playlist[index].in = sec
|
||||||
|
} else if (pos === 'out') {
|
||||||
|
this.playlist[index].out = sec
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$store.commit('playlist/UPDATE_PLAYLIST', this.$processPlaylist(
|
||||||
|
this.configPlayout.playlist.day_start, this.playlist))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
removeItemFromPlaylist (index) {
|
||||||
|
this.playlist.splice(index, 1)
|
||||||
|
},
|
||||||
|
async resetPlaylist () {
|
||||||
|
await this.$store.dispatch('playlist/getPlaylist', { dayStart: this.configPlayout.playlist.day_start, date: this.today })
|
||||||
},
|
},
|
||||||
savePlaylist () {
|
savePlaylist () {
|
||||||
console.log('save playlist')
|
console.log(this.playlist)
|
||||||
|
this.$store.commit('playlist/UPDATE_PLAYLIST', this.$processPlaylist(
|
||||||
|
this.configPlayout.playlist.day_start, this.playlist))
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -394,6 +464,8 @@ export default {
|
|||||||
|
|
||||||
.current-clip-text {
|
.current-clip-text {
|
||||||
height: 70%;
|
height: 70%;
|
||||||
|
padding-top: 1em;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.current-clip-progress {
|
.current-clip-progress {
|
||||||
@ -536,6 +608,24 @@ export default {
|
|||||||
|
|
||||||
.timecode {
|
.timecode {
|
||||||
min-width: 56px;
|
min-width: 56px;
|
||||||
|
max-width: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playlist-input {
|
||||||
|
min-width: 35px;
|
||||||
|
max-width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.timecode input {
|
||||||
|
border-color: #515763;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playlist-item:nth-of-type(even), .playlist-item:nth-of-type(even) div .timecode input {
|
||||||
|
background-color: #3b424a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playlist-item:nth-of-type(even):hover {
|
||||||
|
background-color: #1C1E22;
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user