signal-desktop/ts/components/CallBackgroundBlur.tsx
2021-05-28 09:15:17 -07:00

36 lines
829 B
TypeScript

// Copyright 2020-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import classNames from 'classnames';
import { AvatarColorType } from '../types/Colors';
export type PropsType = {
avatarPath?: string;
children: React.ReactNode;
color?: AvatarColorType;
};
export const CallBackgroundBlur = ({
avatarPath,
children,
color,
}: PropsType): JSX.Element => {
return (
<div
className={classNames('module-calling__background', {
[`module-background-color__${color || 'default'}`]: !avatarPath,
})}
>
{avatarPath && (
<div
className="module-calling__background--blur"
style={{
backgroundImage: `url('${encodeURI(avatarPath)}')`,
}}
/>
)}
{children}
</div>
);
};