mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Use a diff type of blur one that does not flicker

Browse source
This commit is contained in:
Josh Perez 2020-10-12 14:26:24 -04:00 • committed by Josh Perez
parent e5fae1a346
commit fb7c1e9030
4 changed files with 24 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

19
stylesheets/_modules.scss
View file

@ -5856,18 +5856,19 @@ button.module-image__border-overlay:focus {
} }
&__background { &__background {
background-repeat: no-repeat; align-items: center;
background-size: cover; display: flex;
border-radius: 4px 4px 0 0; flex-direction: column;
height: 100%; height: 100%;
justify-content: center;
overflow: hidden;
position: absolute; position: absolute;
width: 100%; width: 100%;
&--blur { &--blur {
backdrop-filter: blur(7px); background-repeat: no-repeat;
backface-visibility: hidden; background-size: cover;
background-color: $color-black-alpha-40; filter: blur(25px);
border-radius: 4px 4px 0 0;
height: 100%; height: 100%;
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -6258,14 +6259,10 @@ button.module-image__border-overlay:focus {
&__video { &__video {
@include font-body-2; @include font-body-2;
align-items: center;
background-color: $color-gray-80; background-color: $color-gray-80;
border-radius: 8px; border-radius: 8px;
color: $color-white; color: $color-white;
display: flex;
flex-direction: column;
flex: 1 1 auto; flex: 1 1 auto;
justify-content: center;
margin-bottom: 24px; margin-bottom: 24px;
margin-top: 24px; margin-top: 24px;
max-width: 640px; max-width: 640px;

7
ts/components/CallBackgroundBlur.tsx
View file

@ -27,10 +27,9 @@ export const CallBackgroundBlur = ({
}; };
return ( return (
<> <div className="module-calling__background">
<div className="module-calling__background" {...backgroundProps} /> <div className="module-calling__background--blur" {...backgroundProps} />
<div className="module-calling__background--blur" />
{children} {children}
</> </div>
); );
}; };

7
ts/components/CallScreen.tsx
View file

@ -330,7 +330,9 @@ export class CallScreen extends React.Component<PropsType, StateType> {
} else if (callState === CallState.Reconnecting) { } else if (callState === CallState.Reconnecting) {
message = i18n('callReconnecting'); message = i18n('callReconnecting');
} else if (callState === CallState.Accepted && acceptedDuration) { } else if (callState === CallState.Accepted && acceptedDuration) {
message = i18n('callDuration', [this.renderDuration(acceptedDuration)]); message = i18n('callDuration', [
CallScreen.renderDuration(acceptedDuration),
]);
} }
if (!message) { if (!message) {
@ -339,8 +341,7 @@ export class CallScreen extends React.Component<PropsType, StateType> {
return <div className="module-ongoing-call__header-message">{message}</div>; return <div className="module-ongoing-call__header-message">{message}</div>;
} }
// eslint-disable-next-line class-methods-use-this static renderDuration(ms: number): string {
private renderDuration(ms: number): string {
const secs = Math.floor((ms / 1000) % 60) const secs = Math.floor((ms / 1000) % 60)
.toString() .toString()
.padStart(2, '0'); .padStart(2, '0');

10
ts/components/CallingLobby.stories.tsx
View file

@ -54,7 +54,15 @@ const story = storiesOf('Components/CallingLobby', module);
story.add('Default', () => { story.add('Default', () => {
const props = createProps(); const props = createProps();
return <CallingLobby {...props} />; return (
<CallingLobby
{...props}
callDetails={{
...callDetails,
avatarPath: 'https://www.stevensegallery.com/600/600',
}}
/>
);
}); });
story.add('No Camera', () => { story.add('No Camera', () => {