From d604516b34ac9f3add888209eec89a8a2b42f5e5 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Thu, 15 Oct 2020 15:48:36 +0200 Subject: [PATCH 1/2] 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 --- .../CallView/shared/VideoBackground.vue | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/components/CallView/shared/VideoBackground.vue b/src/components/CallView/shared/VideoBackground.vue index 161a4075b56..9a627160fcb 100644 --- a/src/components/CallView/shared/VideoBackground.vue +++ b/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) From 372990e7e5e2f0b3ab039b59d0bf82648018fba6 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Fri, 16 Oct 2020 10:57:27 +0200 Subject: [PATCH 2/2] Use browser storage for hasAvatar state Signed-off-by: Vincent Petry --- src/components/CallView/shared/VideoBackground.vue | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/CallView/shared/VideoBackground.vue b/src/components/CallView/shared/VideoBackground.vue index 9a627160fcb..523e61da5ca 100644 --- a/src/components/CallView/shared/VideoBackground.vue +++ b/src/components/CallView/shared/VideoBackground.vue @@ -46,10 +46,13 @@ import axios from '@nextcloud/axios' import usernameToColor from '@nextcloud/vue/dist/Functions/usernameToColor' import { generateUrl } from '@nextcloud/router' import { ResizeObserver } from 'vue-resize' +import { getBuilder } from '@nextcloud/browser-storage' + +const browserStorage = getBuilder('nextcloud').persist().build() // note: this info is shared with the Avatar component function getUserHasAvatar(userId) { - const flag = window.sessionStorage.getItem('userHasAvatar-' + userId) + const flag = browserStorage.getItem('user-has-avatar.' + userId) if (typeof flag === 'string') { return Boolean(flag) } @@ -57,7 +60,7 @@ function getUserHasAvatar(userId) { } function setUserHasAvatar(userId, flag) { - window.sessionStorage.setItem('userHasAvatar-' + userId, flag) + browserStorage.setItem('user-has-avatar.' + userId, flag) } export default {