Cache hasAvatar to avoid call background flickering

Whenever the speaker changes, the avatar background can flicker due to
HTTP calls. This fix improves it a bit by caching the information
whether the user has an avatar or not, so allows a less delayed loading of
the avatar background.

Signed-off-by: Vincent Petry <vincent@nextcloud.com>

src/components/CallView/shared/VideoBackground.vue

@@ -47,6 +47,19 @@ import usernameToColor from '@nextcloud/vue/dist/Functions/usernameToColor'
 import { generateUrl } from '@nextcloud/router'
 import { ResizeObserver } from 'vue-resize'
 
+// note: this info is shared with the Avatar component
+function getUserHasAvatar(userId) {
+	const flag = window.sessionStorage.getItem('userHasAvatar-' + userId)
+	if (typeof flag === 'string') {
+		return Boolean(flag)
+	}
+	return null
+}
+
+function setUserHasAvatar(userId, flag) {
+	window.sessionStorage.setItem('userHasAvatar-' + userId, flag)
+}
+
 export default {
 	name: 'VideoBackground',
 	components: {
@@ -96,10 +109,20 @@ export default {
 			return
 		}
 
+		// check if hasAvatar info is already known
+		const userHasAvatar = getUserHasAvatar(this.user)
+		if (typeof userHasAvatar === 'boolean') {
+			this.hasPicture = userHasAvatar
+			return
+		}
+
 		try {
 			const response = await axios.get(generateUrl(`avatar/${this.user}/300`))
 			if (response.headers[`x-nc-iscustomavatar`] === '1') {
 				this.hasPicture = true
+				setUserHasAvatar(this.user, true)
+			} else {
+				setUserHasAvatar(this.user, false)
 			}
 		} catch (exception) {
 			console.debug(exception)