Commit 5e68db6c authored by christianrhansen's avatar christianrhansen

video-player fade-in when loaded

parent b5e05986
......@@ -4,9 +4,13 @@
template(slot="form-title")
| {{ metadata.title }}
div.fixed-bottom-right.z-top(style="width: 300px;")
.q-pa-md
video-player(v-if="video", :src="video.body.source.id", @ready="playerReady($event)", @time="onPlayerTime($event)")
.video-player-wrap.fixed-bottom-right.z-top
.player.q-pa-md(:class="[{'opacity-1': ready}]")
video-player(
v-if="video",
:src="video.body.source.id",
@ready="playerReady($event)", @time="onPlayerTime($event)")
q-spinner.q-ma-md.absolute-bottom-right(v-if="!ready", size="30px")
.annotations-table.q-mt-lg
.q-pb-xl
......@@ -23,6 +27,7 @@
data () {
const _this = this
return {
ready: false,
playerTime: 0.0,
query: undefined,
video: undefined,
......@@ -74,6 +79,7 @@
methods: {
playerReady (player) {
this.player = player
this.ready = true
},
onPlayerTime (seconds) {
this.playerTime = seconds
......@@ -111,9 +117,20 @@
</script>
<style scoped lang="stylus">
.video-player-wrap
width 300px
.player
opacity 0
transition opacity ease 750ms
.opacity-1
opacity 1!important
</style>
<style lang="stylus">
.annotations-table
.q-table-container
box-shadow none
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment