Commit 313a2c29 authored by Mathias Bär's avatar Mathias Bär

image and video cell styling. resize video properly to fit cell dimensions on...

image and video cell styling. resize video properly to fit cell dimensions on video ready and window resize.
parent be6ecf7f
......@@ -77,9 +77,7 @@
<style scoped lang="stylus">
.cell-item-inner
/*padding 0 1px 1px 0*/
border-right: 1px solid #111
border-bottom: 1px solid #111
padding 0 1px 1px 0
.display-preview .cell-content
pointer-events none
......
......@@ -68,6 +68,8 @@
align-items center
justify-content center
display flex
&.align-center img
align-self center
&.align-top img
align-self flex-start
&.align-bottom img
......@@ -76,6 +78,8 @@
justify-content flex-end
&.align-left
justify-content flex-start
img
align-self flex-start
div.display-preview
padding 1em
......
......@@ -41,7 +41,7 @@ export default {
color: #ddd
div.display-full
background-color #252324
background-color #252525
/*color #111*/
div.display-full > div
......
<template lang="pug">
div(:class="{'display-preview': preview, 'display-full': display}")
q-window-resize-observable(@resize="onResize")
template(v-if="display")
video-player(
ref='videoPlayer',
:annotation="video || fauxVideo",
@ready="handlePlayerReady",
@play="handlePlayerPlaying",
......@@ -72,6 +74,29 @@
}
},
methods: {
onResize () {
this.resizeVideo()
},
resizeVideo () {
if (this.$refs) {
let player = this.$refs.videoPlayer
if (player) {
let video = player.$el.querySelector('.vjs-tech')
if (video) {
let pw = video.clientWidth
let cw = this.$el.clientWidth
if (cw > pw) {
video.style.width = '100%'
video.style.height = 'auto'
}
else {
video.style.height = '100%'
video.style.width = 'auto'
}
}
}
}
},
getSignature () {
if (this.video) {
return { origin: this.video, type: 'Video' }
......@@ -92,6 +117,7 @@
handlePlayerReady (player) {
this.$root.$emit('video-loaded', this.getSignature())
this.player = player
this.resizeVideo()
},
handlePlayerPlaying () {
this.$root.$emit('video-started-playing', this.getSignature())
......@@ -110,7 +136,7 @@
<style scoped lang="stylus">
div.display-full
background-color white
background-color #252525
div.display-preview
padding 1em
......@@ -123,4 +149,7 @@
border-right: 1px solid #111 !important
border-bottom: 1px solid #111 !important
.cell-type-video
height 100%
</style>
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