2020-05-13 13:36:42 +00:00
|
|
|
<template>
|
|
|
|
<v-dialog lazy v-model="show" :scrollable="false" :max-width="width" class="p-video-dialog">
|
|
|
|
<p-video-player v-show="show" ref="player" :source="source" :height="height.toString()" :width="width.toString()" :autoplay="true"></p-video-player>
|
|
|
|
</v-dialog>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
name: 'p-video-dialog',
|
|
|
|
props: {
|
|
|
|
play: Object,
|
|
|
|
album: Object,
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
show: false,
|
|
|
|
source: "",
|
|
|
|
defaultWidth: 640,
|
|
|
|
defaultHeight: 480,
|
|
|
|
width: 640,
|
|
|
|
height: 480,
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
load(video) {
|
|
|
|
if (!video) {
|
|
|
|
this.$notify.error("no video selected");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
let main = video.mainFile();
|
|
|
|
let file = video.videoFile();
|
|
|
|
let uri = video.videoUri();
|
|
|
|
|
|
|
|
if (!uri) {
|
|
|
|
this.$notify.error("no video file found");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-05-13 22:07:17 +00:00
|
|
|
const vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
|
|
|
const vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
|
|
|
|
|
|
|
let width = 0;
|
|
|
|
let height = 0;
|
|
|
|
|
2020-05-13 13:36:42 +00:00
|
|
|
if(file.FileWidth > 0) {
|
2020-05-13 22:07:17 +00:00
|
|
|
width = file.FileWidth;
|
2020-05-13 13:36:42 +00:00
|
|
|
} else if(main.FileWidth > 0) {
|
2020-05-13 22:07:17 +00:00
|
|
|
width = main.FileWidth;
|
2020-05-13 13:36:42 +00:00
|
|
|
} else {
|
2020-05-13 22:07:17 +00:00
|
|
|
width = this.defaultWidth;
|
2020-05-13 13:36:42 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if(file.FileHeight > 0) {
|
2020-05-13 22:07:17 +00:00
|
|
|
height = file.FileHeight;
|
2020-05-13 13:36:42 +00:00
|
|
|
} else if(main.FileHeight > 0) {
|
2020-05-13 22:07:17 +00:00
|
|
|
height = main.FileHeight;
|
2020-05-13 13:36:42 +00:00
|
|
|
} else {
|
2020-05-13 22:07:17 +00:00
|
|
|
height = this.defaultHeight;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.width = width;
|
|
|
|
this.height = height;
|
|
|
|
|
|
|
|
if(vw < (width + 80)) {
|
|
|
|
let newWidth = vw - 120;
|
|
|
|
this.height = Math.round(newWidth * (height / width));
|
|
|
|
this.width = newWidth;
|
|
|
|
}
|
|
|
|
|
|
|
|
if(vh < (this.height + 100)) {
|
|
|
|
let newHeight = vh - 160;
|
|
|
|
this.width = Math.round(newHeight * (width / height));
|
|
|
|
this.height = newHeight;
|
2020-05-13 13:36:42 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
this.source = uri;
|
|
|
|
this.show = true;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
play: function (play) {
|
|
|
|
if (play) {
|
|
|
|
this.load(play);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
show: function(show) {
|
|
|
|
if(!show) {
|
|
|
|
this.$refs.player.pause();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|