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