Use a shared cache for average colors

Before the average color for video backgrounds was locally stored in
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 previously calculated value was lost
and the average color had to be recalculated every time that happened.

Now the average colors are globally cached and shared between
VideoBackground instances, so previously calculated values can be used
by new VideoBackground instances.

The global cache is cleared each time a call ends.

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

src/components/CallView/shared/VideoBackground.vue

@@ -97,7 +97,6 @@ export default {
 			hasPicture: false,
 			useCssBlurFilter: true,
 			useAverageColor: false,
-			backgroundImageAverageColor: '',
 			blur: 0,
 			blurredBackgroundImage: null,
 			blurredBackgroundImageCache: {},
@@ -108,6 +107,13 @@ export default {
 	},
 
 	computed: {
+		backgroundImageAverageColor() {
+			if (!this.backgroundImageUrlToAverage) {
+				return ''
+			}
+
+			return this.$store.getters.getCachedBackgroundImageAverageColor(this.backgroundImageUrlToAverage)
+		},
 		backgroundColor() {
 			if (this.hasPicture && this.useAverageColor) {
 				return this.backgroundImageAverageColor
@@ -191,7 +197,10 @@ export default {
 				}
 
 				average(this.backgroundImageUrlToAverage, { format: 'hex' }).then(color => {
-					this.backgroundImageAverageColor = color
+					this.$store.dispatch('setCachedBackgroundImageAverageColor', {
+						videoBackgroundId: this.backgroundImageUrlToAverage,
+						backgroundImageAverageColor: color,
+					})
 				})
 			},
 		},

src/store/callViewStore.js

@@ -20,10 +20,13 @@
  *
  */
 
+import Vue from 'vue'
+
 const state = {
 	isGrid: false,
 	selectedVideoPeerId: null,
 	videoBackgroundBlur: 1,
+	backgroundImageAverageColorCache: {},
 }
 
 const getters = {
@@ -40,6 +43,9 @@ const getters = {
 	getBlurRadius: (state) => (width, height) => {
 		return (width * height * state.videoBackgroundBlur) / 1000
 	},
+	getCachedBackgroundImageAverageColor: (state) => (videoBackgroundId) => {
+		return state.backgroundImageAverageColorCache[videoBackgroundId]
+	},
 }
 
 const mutations = {
@@ -50,6 +56,12 @@ const mutations = {
 	selectedVideoPeerId(state, value) {
 		state.selectedVideoPeerId = value
 	},
+	setCachedBackgroundImageAverageColor(state, { videoBackgroundId, backgroundImageAverageColor }) {
+		Vue.set(state.backgroundImageAverageColorCache, videoBackgroundId, backgroundImageAverageColor)
+	},
+	clearBackgroundImageAverageColorCache(state) {
+		state.backgroundImageAverageColorCache = {}
+	},
 }
 
 const actions = {
@@ -59,6 +71,14 @@ const actions = {
 	selectedVideoPeerId(context, value) {
 		context.commit('selectedVideoPeerId', value)
 	},
+
+	leaveCall(context) {
+		context.commit('clearBackgroundImageAverageColorCache')
+	},
+
+	setCachedBackgroundImageAverageColor(context, { videoBackgroundId, backgroundImageAverageColor }) {
+		context.commit('setCachedBackgroundImageAverageColor', { videoBackgroundId, backgroundImageAverageColor })
+	},
 }
 
 export default { state, mutations, getters, actions }