Equalize background blur

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

package-lock.json

@@ -20631,6 +20631,13 @@
 				"lodash": "^4.17.15",
 				"popper.js": "^1.16.0",
 				"vue-resize": "^0.4.5"
+			},
+			"dependencies": {
+				"vue-resize": {
+					"version": "0.4.5",
+					"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
+					"integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg=="
+				}
 			}
 		},
 		"v8-compile-cache": {
@@ -20849,9 +20856,9 @@
 			"integrity": "sha512-QfHDDRiw5zrgaxyVJZxdyMPRHwuJDxveFB6vWGxFfWL1ee+VlkSHOOOri17uNTGzC+PC3OAW19FOJENeodnc8A=="
 		},
 		"vue-resize": {
-			"version": "0.4.5",
-			"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz",
-			"integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg=="
+			"version": "0.5.0",
+			"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.5.0.tgz",
+			"integrity": "sha512-k5gOOwTIGSoWZb133Gx3IfSeiiAmve5GyWI7+pU8CvbNntpSAlrCYwZ26GB63NpxcLPK94+m0BDl5TxuZUI+Hw=="
 		},
 		"vue-router": {
 			"version": "3.3.4",

package.json

@@ -47,6 +47,7 @@
 		"vue-material-design-icons": "^4.7.1",
 		"vue-observe-visibility": "^0.4.6",
 		"vue-prevent-unload": "^0.2.3",
+		"vue-resize": "^0.5.0",
 		"vue-router": "^3.3.4",
 		"vue-shortkey": "^3.1.7",
 		"vuex": "^3.4.0",

src/components/CallView/Grid/Grid.vue

@@ -49,6 +49,7 @@
 							:is-selected="isSelected(callParticipantModel)"
 							:fit-video="false"
 							:video-container-aspect-ratio="videoContainerAspectRatio"
+							:video-background-blur="videoBackgroundBlur"
 							:shared-data="sharedDatas[callParticipantModel.attributes.peerId]"
 							@click-video="handleClickVideo($event, callParticipantModel.attributes.peerId)" />
 					</template>
@@ -261,7 +262,12 @@ export default {
 				return this.videos.length + 1
 			}
 		},
-
+		videoWidth() {
+			return this.gridWidth / this.columns
+		},
+		videoHeight() {
+			return this.gridHeight / this.rows
+		},
 		// The aspect ratio of the grid (in terms of px)
 		gridAspectRatio() {
 			return (this.gridWidth / this.gridHeight).toPrecision([2])
@@ -355,6 +361,16 @@ export default {
 		showNavigation() {
 			return this.gridWidth > 0 && this.isStripe && this.videosCount > 0 && this.showVideoOverlay
 		},
+
+		// Blur radius for each background in the grid
+		videoBackgroundBlur() {
+			// The amount of blur
+			const amount = this.$store.getters.videoBackgroundBlur
+			// Represents the surface of the element
+			const surfaceMultiplier = (this.videoWidth * this.videoHeight) / 1000
+			// Calculate the blur
+			return `filter: blur(${surfaceMultiplier * amount}px)`
+		},
 	},
 
 	watch: {

src/components/CallView/shared/Video.vue

@@ -48,7 +48,8 @@
 				class="avatar-container">
 				<VideoBackground
 					:display-name="model.attributes.name"
-					:user="model.attributes.userId" />
+					:user="model.attributes.userId"
+					:grid-blur="videoBackgroundBlur" />
 				<Avatar v-if="model.attributes.userId"
 					:size="avatarSize"
 					:disable-menu="true"
@@ -149,6 +150,11 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		// Calculated once in the grid component for each video background
+		videoBackgroundBlur: {
+			type: String,
+			default: '',
+		},
 	},
 
 	data() {

src/components/CallView/shared/VideoBackground.vue

@@ -21,10 +21,15 @@
 
 <template>
 	<div class="video-backgroundbackground">
+		<ResizeObserver
+			v-if="gridBlur === ''"
+			class="observer"
+			@notify="setBlur" />
 		<div class="darken" />
 		<img
 			v-if="hasPicture"
 			:src="backgroundImage"
+			:style="gridBlur ? gridBlur : blur"
 			class="video-background__picture"
 			alt="">
 		<div v-else
@@ -36,9 +41,13 @@
 <script>
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
+import { ResizeObserver } from 'vue-resize'
 
 export default {
 	name: 'VideoBackground',
+	components: {
+		ResizeObserver,
+	},
 
 	props: {
 		displayName: {
@@ -49,11 +58,16 @@ export default {
 			type: String,
 			default: '',
 		},
+		gridBlur: {
+			type: String,
+			default: '',
+		},
 	},
 
 	data() {
 		return {
 			hasPicture: false,
+			blur: '',
 		}
 	},
 
@@ -89,6 +103,16 @@ export default {
 	},
 
 	methods: {
+		// Calculate the background blur based on the hight of the background element
+		setBlur({ width, height }) {
+			// The amount of blur
+			const amount = this.$store.getters.videoBackgroundBlur
+			// Represents the surface of the element
+			const surfaceMultiplier = (width * height) / 1000
+			// Calculate the blur
+			this.blur = `filter: blur(${surfaceMultiplier * amount}px)`
+
+		},
 	},
 }
 </script>
@@ -101,7 +125,6 @@ export default {
 	height: 100%;
 	width: 100%;
 	&__picture {
-		filter: blur(20px);
 		/* Make pic to at least 100% wide and tall */
 		min-width: 105%;
 		min-height: 105%;
@@ -138,4 +161,8 @@ export default {
 	left: 0;
 }
 
+.observer {
+	position: absolute;
+}
+
 </style>

src/store/callViewStore.js

@@ -23,6 +23,7 @@
 const state = {
 	isGrid: false,
 	selectedVideoPeerId: null,
+	videoBackgroundBlur: 1,
 }
 
 const getters = {
@@ -32,6 +33,9 @@ const getters = {
 	selectedVideoPeerId: (state) => {
 		return state.selectedVideoPeerId
 	},
+	videoBackgroundBlur: (state) => {
+		return state.videoBackgroundBlur
+	},
 }
 
 const mutations = {