Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[stable20.1] Replace blur with average color in video backgrounds #5011

Merged
merged 6 commits into from
Jan 26, 2021

Conversation

backportbot-nextcloud[bot]
Copy link

@backportbot-nextcloud backportbot-nextcloud bot commented Jan 25, 2021

⚠️ This backport had conflicts and is incomplete ⚠️

backport of #4985

@nickvergessen
Copy link
Member

src/components/CallView/Grid/Grid.vue and src/store/callViewStore.js are missing

Safari suffers the same performance hit as Chromium when using the blur
filter. However, Safari does not support using the blur filter on
canvases, so the same workaround used for Chromium does not work in
Safari. To solve this, and to still use a background with colors related
to the avatar, the average of the colors in the avatar is used.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
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 <danxuliu@gmail.com>
For simplicity, as discussed, instead of using a workaround to still
show blurred backgrounds in Chromium despite its performance bug in some
systems now the average color is used instead.

Moreover, as the CSS blur filter only works reliably in Firefox any
other browser (which now also includes Chromium-based browsers, like the
new Edge) uses the average color for the backgrounds.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
For consistency between browsers now the average color is shown in all
cases, even if CSS blur filters work fine in Firefox.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
The darkener was shown behind the background, so the background was not
darkened.

Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
@danxuliu danxuliu force-pushed the backport/4985/stable20.1 branch from 7e66eec to a521779 Compare January 25, 2021 21:16
@nickvergessen nickvergessen merged commit 942c1e9 into stable20.1 Jan 26, 2021
@nickvergessen nickvergessen deleted the backport/4985/stable20.1 branch January 26, 2021 08:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants