2020-05-13 13:36:42 +00:00
|
|
|
<template>
|
2020-05-20 08:42:48 +00:00
|
|
|
<modal name="video" ref="video" :height="height" :width="width" :reset="true" class="p-video-dialog" @before-close="onClose"
|
|
|
|
@before-open="onOpen">
|
|
|
|
<p-video-player v-show="show" ref="player" :source="source" :height="height.toString()"
|
|
|
|
:width="width.toString()" :autoplay="true"></p-video-player>
|
|
|
|
</modal>
|
2020-05-13 13:36:42 +00:00
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
name: 'p-video-dialog',
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
show: false,
|
|
|
|
source: "",
|
|
|
|
defaultWidth: 640,
|
|
|
|
defaultHeight: 480,
|
|
|
|
width: 640,
|
|
|
|
height: 480,
|
2020-05-20 08:42:48 +00:00
|
|
|
video: null,
|
|
|
|
album: null,
|
2020-05-13 13:36:42 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
2020-05-20 08:42:48 +00:00
|
|
|
onOpen(ev) {
|
|
|
|
this.video = ev.params.video;
|
|
|
|
this.album = ev.params.album;
|
|
|
|
this.play();
|
|
|
|
},
|
|
|
|
onClose() {
|
|
|
|
this.$refs.player.pause();
|
|
|
|
this.show = false;
|
|
|
|
},
|
|
|
|
play() {
|
|
|
|
if (!this.video) {
|
2020-05-13 13:36:42 +00:00
|
|
|
this.$notify.error("no video selected");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2020-05-20 08:42:48 +00:00
|
|
|
let main = this.video.mainFile();
|
|
|
|
let file = this.video.videoFile();
|
2020-05-21 11:26:28 +00:00
|
|
|
let uri = this.video.videoUrl();
|
2020-05-13 13:36:42 +00:00
|
|
|
|
|
|
|
if (!uri) {
|
2020-05-16 15:07:44 +00:00
|
|
|
this.$notify.error("no video selected");
|
2020-05-13 13:36:42 +00:00
|
|
|
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-23 18:58:58 +00:00
|
|
|
if (file.Width > 0) {
|
|
|
|
width = file.Width;
|
|
|
|
} else if (main && main.Width > 0) {
|
|
|
|
width = main.Width;
|
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
|
|
|
}
|
|
|
|
|
2020-05-23 18:58:58 +00:00
|
|
|
if (file.Height > 0) {
|
|
|
|
height = file.Height;
|
|
|
|
} else if (main && main.Height > 0) {
|
|
|
|
height = main.Height;
|
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;
|
|
|
|
|
2020-05-20 08:42:48 +00:00
|
|
|
if (vw < (width + 80)) {
|
|
|
|
let newWidth = vw - 120;
|
2020-05-13 22:07:17 +00:00
|
|
|
this.height = Math.round(newWidth * (height / width));
|
|
|
|
this.width = newWidth;
|
|
|
|
}
|
|
|
|
|
2020-05-20 08:42:48 +00:00
|
|
|
if (vh < (this.height + 100)) {
|
2020-05-13 22:07:17 +00:00
|
|
|
let newHeight = vh - 160;
|
|
|
|
this.width = Math.round(newHeight * (width / height));
|
|
|
|
this.height = newHeight;
|
2020-05-13 13:36:42 +00:00
|
|
|
}
|
|
|
|
|
2020-05-20 08:42:48 +00:00
|
|
|
// Resize video overlay.
|
|
|
|
this.$refs.video.setInitialSize();
|
|
|
|
let size = { width: this.width, height: this.height }
|
|
|
|
this.$refs.video.onModalResize({size});
|
|
|
|
|
|
|
|
// Play by triggering source change event.
|
2020-05-13 13:36:42 +00:00
|
|
|
this.source = uri;
|
|
|
|
this.show = true;
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|