Use a shared cache between different VideoBackground instances

Before the cache for blurred video backgrounds was local to each
VideoBackground instance. During a call different VideoBackground
instances can be mounted and destroyed for the same participant (for
example, when switching between speaker mode and grid view, or when a
promoted speaker changes), so the cache was lost and the blurred
background had to be recalculated every time that happened.

Now the cache is global and shared between VideoBackground instances,
so previously cached backgrounds can be used by new VideoBackground
instances.

The global cache is lazily initialized when needed and cleared each time
a call ends.

Signed-off-by: Daniel Calviño Sánchez <[email protected]>

src/components/CallView/shared/VideoBackground.vue

@@ -51,8 +51,6 @@ import { getBuilder } from '@nextcloud/browser-storage'
 import browserCheck from '../../../mixins/browserCheck'
 import blur from '../../../utils/imageBlurrer'
 
-const LRU = require('lru-cache')
-
 const browserStorage = getBuilder('nextcloud').persist().build()
 
 // note: this info is shared with the Avatar component
@@ -99,7 +97,6 @@ export default {
 			useCssBlurFilter: true,
 			blur: 0,
 			blurredBackgroundImage: null,
-			blurredBackgroundImageCache: new LRU({ max: 5 }),
 			blurredBackgroundImageSource: null,
 			pendingGenerateBlurredBackgroundImageCount: 0,
 			isDestroyed: false,
@@ -152,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: {

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 }