Improve cache handling in blur filter

package.json

@@ -36,6 +36,7 @@
 		"escape-html": "^1.0.3",
 		"hark": "^1.2.3",
 		"lodash": "^4.17.20",
+		"lru-cache": "^6.0.0",
 		"mockconsole": "0.0.1",
 		"nextcloud-vue-collections": "^0.9.0",
 		"sdp-transform": "^2.14.1",

src/components/CallView/shared/VideoBackground.vue

@@ -97,7 +97,6 @@ export default {
 			useCssBlurFilter: true,
 			blur: 0,
 			blurredBackgroundImage: null,
-			blurredBackgroundImageCache: {},
 			blurredBackgroundImageSource: null,
 			pendingGenerateBlurredBackgroundImageCount: 0,
 			isDestroyed: false,
@@ -150,6 +149,17 @@ export default {
 
 			return this.backgroundBlur
 		},
+		blurredBackgroundImageCache() {
+			if (!this.user) {
+				return null
+			}
+
+			if (!this.$store.getters.getBlurredBackgroundImageCache(this.user)) {
+				this.$store.dispatch('initializeBlurredBackgroundImageCache', this.user)
+			}
+
+			return this.$store.getters.getBlurredBackgroundImageCache(this.user)
+		},
 	},
 
 	watch: {
@@ -254,8 +264,8 @@ export default {
 			}
 
 			const cacheId = this.backgroundImageUrl + '-' + width + '-' + height + '-' + this.backgroundBlur
-			if (this.blurredBackgroundImageCache[cacheId]) {
-				this.blurredBackgroundImage = this.blurredBackgroundImageCache[cacheId]
+			if (this.blurredBackgroundImageCache.get(cacheId)) {
+				this.blurredBackgroundImage = this.blurredBackgroundImageCache.get(cacheId)
 
 				return
 			}
@@ -274,7 +284,7 @@ export default {
 				}
 
 				this.blurredBackgroundImage = image
-				this.blurredBackgroundImageCache[cacheId] = this.blurredBackgroundImage
+				this.blurredBackgroundImageCache.set(cacheId, this.blurredBackgroundImage)
 
 				const generateBlurredBackgroundImageCalledAgain = this.pendingGenerateBlurredBackgroundImageCount > 1
 

src/store/callViewStore.js

@@ -26,6 +26,8 @@ import {
 	CONVERSATION,
 } from '../constants'
 
+const LRU = require('lru-cache')
+
 const state = {
 	isGrid: false,
 	isStripeOpen: true,
@@ -35,6 +37,7 @@ const state = {
 	selectedVideoPeerId: null,
 	videoBackgroundBlur: 1,
 	participantRaisedHands: {},
+	blurredBackgroundImageCache: {},
 }
 
 const getters = {
@@ -54,6 +57,7 @@ const getters = {
 		return (width * height * state.videoBackgroundBlur) / 1000
 	},
 	isParticipantRaisedHand: (state) => (peerId) => !!state.participantRaisedHands[peerId],
+	getBlurredBackgroundImageCache: (state) => (videoBackgroundId) => state.blurredBackgroundImageCache[videoBackgroundId],
 }
 
 const mutations = {
@@ -86,6 +90,16 @@ const mutations = {
 	clearParticipantHandRaised(state) {
 		state.participantRaisedHands = {}
 	},
+	initializeBlurredBackgroundImageCache(state, videoBackgroundId) {
+		if (state.blurredBackgroundImageCache[videoBackgroundId]) {
+			return
+		}
+
+		Vue.set(state.blurredBackgroundImageCache, videoBackgroundId, new LRU({ max: 10 }))
+	},
+	clearBlurredBackgroundImageCache(state) {
+		state.blurredBackgroundImageCache = {}
+	},
 }
 
 const actions = {
@@ -116,6 +130,8 @@ const actions = {
 	leaveCall(context) {
 		// clear raised hands as they were specific to the call
 		context.commit('clearParticipantHandRaised')
+
+		context.commit('clearBlurredBackgroundImageCache')
 	},
 
 	/**
@@ -197,6 +213,10 @@ const actions = {
 		})
 		context.commit('presentationStarted', false)
 	},
+
+	initializeBlurredBackgroundImageCache(context, videoBackgroundId) {
+		context.commit('initializeBlurredBackgroundImageCache', videoBackgroundId)
+	},
 }
 
 export default { state, mutations, getters, actions }