CreatBot/CreatBotMainsail
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: jumping panels when webcam (mjpegstreamer) is not in viewport

Browse Source 
Signed-off-by: Stefan Dej <meteyou@gmail.com>
This commit is contained in:
Stefan Dej 2021-10-29 23:28:13 +02:00
parent f0481501d5
commit c6d4e0630f
1 changed files with 34 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/webcams/Mjpegstreamer.vue
View File

@ -5,8 +5,8 @@
</style>
<template>
<vue-load-image v-observe-visibility="visibilityChanged">
<img slot="image" :src="url" alt="Preview" :style="webcamStyle" class="webcamImage" />
<vue-load-image v-observe-visibility="visibilityChanged" ref="imageLoader" onload="resetImageRatio">
<img slot="image" :src="url" alt="Preview" :style="webcamStyle" class="webcamImage" ref="webcamImage" />
<div slot="preloader" class="text-center py-5">
<v-progress-circular indeterminate color="primary"></v-progress-circular>
</div>
@ -26,6 +26,7 @@ import BaseMixin from '@/components/mixins/base'
export default class Mjpegstreamer extends Mixins(BaseMixin) {
private isVisible = true
private refresh = Math.ceil(Math.random() * Math.pow(10, 12))
private imageRatio = 0
@Prop({ required: true })
camSettings: any
@ -33,6 +34,11 @@ export default class Mjpegstreamer extends Mixins(BaseMixin) {
@Prop()
printerUrl: string | undefined
$refs!: {
imageLoader: any,
webcamImage: HTMLImageElement,
}
get url() {
const baseUrl = this.camSettings.url
const url = new URL(baseUrl, this.printerUrl === undefined ? this.hostUrl.toString() : this.printerUrl)
@ -53,7 +59,32 @@ export default class Mjpegstreamer extends Mixins(BaseMixin) {
visibilityChanged(isVisible: boolean) {
this.isVisible = isVisible
if (isVisible) this.refresh = Math.ceil(Math.random() * Math.pow(10, 12))
if (isVisible) {
this.refresh = Math.ceil(Math.random() * Math.pow(10, 12))
} else {
const width = this.$refs.webcamImage?.width ?? 0
const height = this.$refs.webcamImage?.height ?? 0
this.imageRatio = (width && height) ? width/height : 0
this.resize()
}
}
mounted() {
window.addEventListener('resize', this.resize)
}
beforeDestroy() {
window.removeEventListener('resize', this.resize)
}
resize() {
if (this.imageRatio && this.$refs.imageLoader?.$el) {
this.$refs.imageLoader.$el.style.height = Math.round(this.$refs.imageLoader.$el.clientWidth / this.imageRatio)+'px'
}
}
resetImageRatio() {
this.imageRatio = 0
}
}
</script>