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

Call screen footer styling improvements

Browse source
This commit is contained in:
Evan Hahn 2020-11-04 13:56:03 -06:00 • committed by GitHub
parent 7e23bb6246
commit 66da943f27
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 136 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

28
ts/components/CallBackgroundBlur.tsx
View file

@ -16,22 +16,20 @@ export const CallBackgroundBlur = ({
children,
color,
}: PropsType): JSX.Element => {
const backgroundProps = avatarPath
? {
style: {
backgroundImage: `url("${avatarPath}")`,
},
}
: {
className: classNames(
'module-calling__background',
`module-background-color__${color || 'default'}`
),
};
return (
<div className="module-calling__background">
<div className="module-calling__background--blur" {...backgroundProps} />
<div
className={classNames('module-calling__background', {
[`module-background-color__${color || 'default'}`]: !avatarPath,
})}
>
{avatarPath && (
<div
className="module-calling__background--blur"
style={{
backgroundImage: `url("${avatarPath}")`,
}}
/>
)}
{children}
</div>
);

4
ts/components/CallManager.stories.tsx
View file

@ -40,6 +40,10 @@ const defaultProps = {
hasLocalVideo: true,
hasRemoteVideo: true,
i18n,
me: {
color: 'ultramarine' as ColorType,
title: 'Morty Smith',
},
pip: false,
renderDeviceSelection: () => <div />,
setLocalAudio: action('set-local-audio'),

2
ts/components/CallManager.tsx
View file

@ -45,6 +45,7 @@ export const CallManager = ({
hasLocalVideo,
hasRemoteVideo,
i18n,
me,
pip,
renderDeviceSelection,
setLocalAudio,
@ -130,6 +131,7 @@ export const CallManager = ({
hasLocalAudio={hasLocalAudio}
hasLocalVideo={hasLocalVideo}
i18n={i18n}
me={me}
hasRemoteVideo={hasRemoteVideo}
setLocalPreview={setLocalPreview}
setRendererCanvas={setRendererCanvas}

6
ts/components/CallScreen.stories.tsx
View file

@ -44,6 +44,12 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
overrideProps.hasRemoteVideo || false
),
i18n,
me: {
color: 'ultramarine' as ColorType,
name: 'Morty Smith',
profileName: 'Morty Smith',
title: 'Morty Smith',
},
setLocalAudio: action('set-local-audio'),
setLocalPreview: action('set-local-preview'),
setLocalVideo: action('set-local-video'),

99
ts/components/CallScreen.tsx
View file

@ -14,7 +14,9 @@ import {
} from '../state/ducks/calling';
import { Avatar } from './Avatar';
import { CallingButton, CallingButtonType } from './CallingButton';
import { CallBackgroundBlur } from './CallBackgroundBlur';
import { CallState } from '../types/Calling';
import { ColorType } from '../types/Colors';
import { LocalizerType } from '../types/Util';
export type PropsType = {
@ -25,6 +27,14 @@ export type PropsType = {
hasLocalVideo: boolean;
hasRemoteVideo: boolean;
i18n: LocalizerType;
me: {
avatarPath?: string;
color?: ColorType;
name?: string;
phoneNumber?: string;
profileName?: string;
title: string;
};
setLocalAudio: (_: SetLocalAudioType) => void;
setLocalVideo: (_: SetLocalVideoType) => void;
setLocalPreview: (_: SetLocalPreviewType) => void;
@ -41,6 +51,7 @@ export const CallScreen: React.FC<PropsType> = ({
hasLocalVideo,
hasRemoteVideo,
i18n,
me,
setLocalAudio,
setLocalVideo,
setLocalPreview,
@ -196,39 +207,61 @@ export const CallScreen: React.FC<PropsType> = ({
) : (
renderAvatar(i18n, callDetails)
)}
{hasLocalVideo && (
<video
className="module-ongoing-call__local-video"
ref={localVideoRef}
autoPlay
/>
)}
<div
className={classNames(
'module-ongoing-call__actions',
controlsFadeClass
)}
>
<CallingButton
buttonType={videoButtonType}
i18n={i18n}
onClick={toggleVideo}
tooltipDistance={24}
/>
<CallingButton
buttonType={audioButtonType}
i18n={i18n}
onClick={toggleAudio}
tooltipDistance={24}
/>
<CallingButton
buttonType={CallingButtonType.HANG_UP}
i18n={i18n}
onClick={() => {
hangUp({ callId });
}}
tooltipDistance={24}
/>
<div className="module-ongoing-call__footer">
{/* This layout-only element is not ideal.
See the comment in _modules.css for more. */}
<div className="module-ongoing-call__footer__local-preview-offset" />
<div
className={classNames(
'module-ongoing-call__footer__actions',
controlsFadeClass
)}
>
<CallingButton
buttonType={videoButtonType}
i18n={i18n}
onClick={toggleVideo}
tooltipDistance={24}
/>
<CallingButton
buttonType={audioButtonType}
i18n={i18n}
onClick={toggleAudio}
tooltipDistance={24}
/>
<CallingButton
buttonType={CallingButtonType.HANG_UP}
i18n={i18n}
onClick={() => {
hangUp({ callId });
}}
tooltipDistance={24}
/>
</div>
<div className="module-ongoing-call__footer__local-preview">
{hasLocalVideo ? (
<video
className="module-ongoing-call__footer__local-preview__video"
ref={localVideoRef}
autoPlay
/>
) : (
<CallBackgroundBlur avatarPath={me.avatarPath} color={me.color}>
<Avatar
avatarPath={me.avatarPath}
color={me.color || 'ultramarine'}
noteToSelf={false}
conversationType="direct"
i18n={i18n}
name={me.name}
phoneNumber={me.phoneNumber}
profileName={me.profileName}
title={me.title}
size={80}
/>
</CallBackgroundBlur>
)}
</div>
</div>
</div>
);