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

add empty space to playlist area #59, auto scroll down on drop last item

Browse Source
This commit is contained in:
jb-alvarado 2021-03-28 21:38:37 +02:00
parent 8ee094888f
commit d50cbc7fe2
1 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
pages/player.vue
View File

@ -198,13 +198,14 @@
</b-row>
</b-list-group-item>
</b-list-group>
<perfect-scrollbar id="scroll-container">
<b-list-group class="playlist-list-group">
<perfect-scrollbar id="scroll-container" :options="scrollOP">
<b-list-group class="playlist-list-group" :style="`height: ${(playlist) ? playlist.length * 52 + 52 : 300}px`">
<draggable
id="playlist-group"
v-model="playlist"
group="playlist"
@start="drag=true"
@add="scrollEnd"
@end="drag=false"
>
<b-list-group-item
@ -361,7 +362,8 @@ export default {
previewComp: null,
previewSource: '',
scrollOP: {
suppressScrollX: true
suppressScrollX: true,
minScrollbarLength: 30
}
}
},
@ -506,6 +508,13 @@ export default {
}
},
scrollEnd (event) {
if (event.newIndex + 1 === this.playlist.length) {
const objDiv = document.getElementById('scroll-container')
objDiv.scrollTop = objDiv.scrollHeight
}
},
changeTime (pos, index, input) {
if (input.match(/(?:[01]\d|2[0123]):(?:[012345]\d):(?:[012345]\d)/gm)) {
const sec = this.$timeToSeconds(input)
@ -789,6 +798,10 @@ export default {
height: calc(100% - 47px);
}
.playlist-item {
height: 52px;
}
.playlist-item:nth-of-type(even), .playlist-item:nth-of-type(even) div .timecode input {
background-color: #3b424a;
}