diff options
Diffstat (limited to 'src/components/CallView/shared/VideoBackground.vue')
| -rw-r--r-- | src/components/CallView/shared/VideoBackground.vue | 195 |
1 files changed, 25 insertions, 170 deletions
diff --git a/src/components/CallView/shared/VideoBackground.vue b/src/components/CallView/shared/VideoBackground.vue index 8ff2878ba..4a0448d2d 100644 --- a/src/components/CallView/shared/VideoBackground.vue +++ b/src/components/CallView/shared/VideoBackground.vue @@ -22,34 +22,20 @@ <template> <div class="video-backgroundbackground"> <div - ref="darkener" - class="darken"> - <ResizeObserver - v-if="gridBlur === 0" - class="observer" - @notify="setBlur" /> - </div> - <img - v-if="hasPicture" - ref="backgroundImage" - :src="backgroundImage" - :style="backgroundStyle" - class="video-background__picture" - alt=""> - <div v-else :style="{'background-color': backgroundColor }" class="video-background" /> + <div + ref="darkener" + class="darken" /> </div> </template> <script> +import { average } from 'color.js' import axios from '@nextcloud/axios' import usernameToColor from '@nextcloud/vue/dist/Functions/usernameToColor' import { generateUrl } from '@nextcloud/router' -import { ResizeObserver } from 'vue-resize' import { getBuilder } from '@nextcloud/browser-storage' -import browserCheck from '../../../mixins/browserCheck' -import blur from '../../../utils/imageBlurrer' const browserStorage = getBuilder('nextcloud').persist().build() @@ -68,13 +54,6 @@ function setUserHasAvatar(userId, flag) { export default { name: 'VideoBackground', - components: { - ResizeObserver, - }, - - mixins: [ - browserCheck, - ], props: { displayName: { @@ -85,27 +64,27 @@ export default { type: String, default: '', }, - gridBlur: { - type: Number, - default: 0, - }, }, data() { return { hasPicture: false, - useCssBlurFilter: true, - blur: 0, - blurredBackgroundImage: null, - blurredBackgroundImageCache: {}, - blurredBackgroundImageSource: null, - pendingGenerateBlurredBackgroundImageCount: 0, - isDestroyed: false, } }, computed: { + backgroundImageAverageColor() { + if (!this.backgroundImageUrl) { + return '' + } + + return this.$store.getters.getCachedBackgroundImageAverageColor(this.backgroundImageUrl) + }, backgroundColor() { + if (this.hasPicture) { + return this.backgroundImageAverageColor + } + // If the prop is empty. We're not checking for the default value // because the user's displayName might be '?' if (!this.displayName) { @@ -115,9 +94,6 @@ export default { return `rgb(${color.r}, ${color.g}, ${color.b})` } }, - backgroundImage() { - return this.useCssBlurFilter ? this.backgroundImageUrl : this.blurredBackgroundImage - }, backgroundImageUrl() { if (!this.user) { return null @@ -125,78 +101,32 @@ export default { return generateUrl(`avatar/${this.user}/300`) }, - backgroundBlur() { - return this.gridBlur ? this.gridBlur : this.blur - }, - backgroundStyle() { - if (!this.useCssBlurFilter) { - return {} - } - - return { - filter: `blur(${this.backgroundBlur}px)`, - } - }, - // Special computed property to combine the properties that should be - // watched to set (or not) the blurred background image source. - backgroundImageUrlToBlur() { - if (this.useCssBlurFilter) { - return null - } - - return this.backgroundImageUrl - }, - // Special computed property to combine the properties that should be - // watched to generate (or not) the blurred background image. - generatedBackgroundBlur() { - if (!this.hasPicture || this.useCssBlurFilter) { - return false - } - - if (!this.blurredBackgroundImageSource) { - return false - } - - return this.backgroundBlur - }, }, watch: { - backgroundImageUrlToBlur: { + backgroundImageUrl: { immediate: true, handler() { - this.blurredBackgroundImageSource = null - - if (!this.backgroundImageUrlToBlur) { + if (!this.backgroundImageUrl) { return } - const image = new Image() - image.onload = () => { - createImageBitmap(image).then(imageBitmap => { - this.blurredBackgroundImageSource = imageBitmap - }) - } - image.src = this.backgroundImageUrlToBlur - }, - }, - generatedBackgroundBlur: { - immediate: true, - handler() { - if (this.generatedBackgroundBlur === false) { + if (this.backgroundImageAverageColor) { + // Already calculated, no need to do it again. return } - this.generateBlurredBackgroundImage() + average(this.backgroundImageUrl, { format: 'hex' }).then(color => { + this.$store.dispatch('setCachedBackgroundImageAverageColor', { + videoBackgroundId: this.backgroundImageUrl, + backgroundImageAverageColor: color, + }) + }) }, }, }, async beforeMount() { - if (this.isChrome) { - this.useCssBlurFilter = false - } - if (!this.user) { return } @@ -217,81 +147,6 @@ export default { console.debug(exception) } }, - - async mounted() { - if (!this.gridBlur) { - // Initialise blur - this.setBlur({ - width: this.$refs['darkener'].clientWidth, - height: this.$refs['darkener'].clientHeight, - }) - } - }, - - beforeDestroy() { - this.isDestroyed = true - }, - - methods: { - // Calculate the background blur based on the height of the background element - setBlur({ width, height }) { - this.blur = this.$store.getters.getBlurRadius(width, height) - }, - - generateBlurredBackgroundImage() { - // Reset image source so the width and height are adjusted to - // the element rather than to the previous image being shown. - this.$refs.backgroundImage.src = '' - - let width = this.$refs.backgroundImage.width - let height = this.$refs.backgroundImage.height - - // Restore the current background so it is shown instead of an empty - // background while the new one is being generated. - this.$refs.backgroundImage.src = this.blurredBackgroundImage - - const sourceAspectRatio = this.blurredBackgroundImageSource.width / this.blurredBackgroundImageSource.height - const canvasAspectRatio = width / height - - if (canvasAspectRatio > sourceAspectRatio) { - height = width / sourceAspectRatio - } else if (canvasAspectRatio < sourceAspectRatio) { - width = height * sourceAspectRatio - } - - const cacheId = this.backgroundImageUrl + '-' + width + '-' + height + '-' + this.backgroundBlur - if (this.blurredBackgroundImageCache[cacheId]) { - this.blurredBackgroundImage = this.blurredBackgroundImageCache[cacheId] - - return - } - - if (this.pendingGenerateBlurredBackgroundImageCount) { - this.pendingGenerateBlurredBackgroundImageCount++ - - return - } - - this.pendingGenerateBlurredBackgroundImageCount = 1 - - blur(this.blurredBackgroundImageSource, width, height, this.backgroundBlur).then(image => { - if (this.isDestroyed) { - return - } - - this.blurredBackgroundImage = image - this.blurredBackgroundImageCache[cacheId] = this.blurredBackgroundImage - - const generateBlurredBackgroundImageCalledAgain = this.pendingGenerateBlurredBackgroundImageCount > 1 - - this.pendingGenerateBlurredBackgroundImageCount = 0 - - if (generateBlurredBackgroundImageCalledAgain) { - this.generateBlurredBackgroundImage() - } - }) - }, - }, } </script> |