提交 c2bc76ab 编写于 作者: Q qiang

fix: v3-video resize

上级 1929e1e6
<template> <template>
<uni-video <uni-video
v-bind="attrs" v-bind="attrs"
v-on="$listeners"> v-on="$listeners">
<div <div
ref="container" ref="container"
class="uni-video-container" /> class="uni-video-container" />
<div class="uni-video-slot"> <div class="uni-video-slot">
<slot /> <slot />
...@@ -12,7 +12,8 @@ ...@@ -12,7 +12,8 @@
</template> </template>
<script> <script>
import { import {
subscriber subscriber,
listeners
} from 'uni-mixins' } from 'uni-mixins'
const methods = [ const methods = [
...@@ -59,16 +60,12 @@ const attrs = [ ...@@ -59,16 +60,12 @@ const attrs = [
export default { export default {
name: 'Video', name: 'Video',
mixins: [subscriber], mixins: [subscriber, listeners],
props: { props: {
id: { id: {
type: String, type: String,
default: '' default: ''
}, },
hidden: {
type: [Boolean, String],
default: false
},
src: { src: {
type: String, type: String,
default: '' default: ''
...@@ -156,7 +153,8 @@ export default { ...@@ -156,7 +153,8 @@ export default {
width: '0px', width: '0px',
height: '0px', height: '0px',
position: 'static' position: 'static'
} },
hidden: false
} }
}, },
computed: { computed: {
...@@ -174,9 +172,12 @@ export default { ...@@ -174,9 +172,12 @@ export default {
}, },
watch: { watch: {
hidden (val) { hidden (val) {
this.video && this.video[val ? 'show' : 'hide']() this.video && this.video[val ? 'hide' : 'show']()
} }
}, },
listeners: {
'@view-update': '_requestUpdate'
},
mounted () { mounted () {
this._updateStyle() this._updateStyle()
const video = this.video = plus.video.createVideoPlayer('video' + Date.now(), Object.assign({}, this.attrs, this.style)) const video = this.video = plus.video.createVideoPlayer('video' + Date.now(), Object.assign({}, this.attrs, this.style))
...@@ -185,17 +186,16 @@ export default { ...@@ -185,17 +186,16 @@ export default {
video.hide() video.hide()
} }
this.$watch('attrs', () => { this.$watch('attrs', () => {
video.setStyles(this.attrs) this.video && this.video.setStyles(this.attrs)
}, { deep }) }, { deep: true })
this.$watch('style', () => { this.$watch('style', () => {
video.setStyles(this.style) this.video && this.video.setStyles(this.style)
}, { deep }) }, { deep: true })
events.forEach(key => { events.forEach(key => {
video.addEventListener(key, (data = {}) => { video.addEventListener(key, (data = {}) => {
this.$trigger(key, {}, data) this.$trigger(key, {}, data)
}) })
}) })
this.$on('view-update', this._update)
}, },
beforeDestroy () { beforeDestroy () {
this.video && this.video.close() this.video && this.video.close()
...@@ -223,21 +223,24 @@ export default { ...@@ -223,21 +223,24 @@ export default {
} }
}, },
_updateStyle () { _updateStyle () {
const rect = this.$refs.container.getBoundingClientRect(); const rect = this.$refs.container.getBoundingClientRect()
this.hidden = getComputedStyle(this.$el).display === 'none';
['top', 'left', 'width', 'height'].forEach(key => { ['top', 'left', 'width', 'height'].forEach(key => {
let val = rect[key] let val = rect[key]
val = key === 'top' ? val + (document.documentElement.scrollTop || document.body.scrollTop || 0) : val val = key === 'top' ? val + (document.documentElement.scrollTop || document.body.scrollTop || 0) : val
this.style[key] = val + 'px' this.style[key] = val + 'px'
}) })
}, },
_update () { _requestUpdate () {
if (this._animationFrame) { if (this._animationFrame) {
cancelAnimationFrame(this._animationFrame) cancelAnimationFrame(this._animationFrame)
} }
this._animationFrame = requestAnimationFrame(() => { if (this.video) {
delete this._animationFrame this._animationFrame = requestAnimationFrame(() => {
this._updateStyle() delete this._animationFrame
}) this._updateStyle()
})
}
} }
} }
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册