Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Fixes for call UI #5509

Merged
merged 6 commits into from
Dec 21, 2020
Merged

Fixes for call UI #5509

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
63e99ec
Visual fixups for call UI
dbkr Dec 18, 2020
eab764a
Vary resume link text
dbkr Dec 18, 2020
aee8619
Remove secondary call avatar
dbkr Dec 18, 2020
12474bb
Merge remote-tracking branch 'origin/develop' into dbkr/call_ui_fixups
dbkr Dec 21, 2020
68c5482
Comment typo
dbkr Dec 21, 2020
0d4b2f4
Probably better to just remove this
dbkr Dec 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions res/css/views/voip/_CallContainer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,7 @@ limitations under the License.
position: absolute;
right: 20px;
bottom: 72px;
border-radius: 8px;
overflow: hidden;
z-index: 100;
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);

// Disable pointer events for Jitsi widgets to function. Direct
// calls have their own cursor and behaviour, but we need to make
Expand Down Expand Up @@ -49,8 +46,10 @@ limitations under the License.

.mx_IncomingCallBox {
min-width: 250px;
background-color: $primary-bg-color;
background-color: $secondary-accent-color;
padding: 8px;
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
border-radius: 8px;

pointer-events: initial; // restore pointer events so the user can accept/decline
cursor: pointer;
Expand Down
31 changes: 8 additions & 23 deletions res/css/views/voip/_CallView.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@ limitations under the License.

.mx_CallView_pip {
width: 320px;
padding-bottom: 8px;
margin-top: 10px;
box-shadow: 0px 14px 24px rgba(0, 0, 0, 0.08);
border-radius: 8px;

.mx_CallView_voice {
height: 180px;
Expand Down Expand Up @@ -84,6 +88,7 @@ limitations under the License.
border-radius: 2000px;
overflow: hidden;
position: relative;
/* Blurred avatar images & pause icon for on-hold removed for now
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it make more sense to just remove it? Or you expect it to return soon...? It's always available in version control. Anyway, up to you.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah true, otherwise it'll just hang around in the css for ages

&::after {
position: absolute;
content: '';
Expand All @@ -101,34 +106,14 @@ limitations under the License.
.mx_CallView_pip &::after {
background-size: 30px;
}
*/
}
/*
.mx_BaseAvatar {
filter: blur(20px);
overflow: hidden;
}
}

.mx_CallView_voice_secondaryAvatarContainer {
border-radius: 2000px;
overflow: hidden;
position: relative;
&::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.6);
background-image: url('$(res)/img/voip/paused.svg');
background-position: center;
background-size: 40px;
background-repeat: no-repeat;
}
.mx_CallView_pip &::after {
background-size: 24px;
}
*/
}

.mx_CallView_voice_holdText {
Expand Down
12 changes: 12 additions & 0 deletions src/CallHandler.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -617,6 +617,18 @@ export default class CallHandler {
}
}

/**
* @returns true if we are currently in anu call where we haven't put the remote party on hold
dbkr marked this conversation as resolved.
Show resolved Hide resolved
*/
hasAnyUnheldCall() {
for (const call of this.calls.values()) {
if (call.state === CallState.Ended) continue;
if (!call.isRemoteOnHold()) return true;
}

return false;
}

private async startCallApp(roomId: string, type: string) {
dis.dispatch({
action: 'appsDrawer',
Expand Down
23 changes: 5 additions & 18 deletions src/components/views/voip/CallView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import React, { createRef, CSSProperties, ReactNode } from 'react';
import dis from '../../../dispatcher/dispatcher';
import CallHandler from '../../../CallHandler';
import {MatrixClientPeg} from '../../../MatrixClientPeg';
import { _t } from '../../../languageHandler';
import { _t, _td } from '../../../languageHandler';
import VideoFeed, { VideoFeedType } from "./VideoFeed";
import RoomAvatar from "../avatars/RoomAvatar";
import { CallState, CallType, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
Expand Down Expand Up @@ -423,7 +423,9 @@ export default class CallView extends React.Component<IProps, IState> {
const isOnHold = this.state.isLocalOnHold || this.state.isRemoteOnHold;
let onHoldText = null;
if (this.state.isRemoteOnHold) {
onHoldText = _t("You held the call <a>Resume</a>", {}, {
const holdString = CallHandler.sharedInstance().hasAnyUnheldCall() ?
_td("You held the call <a>Switch</a>") : _td("You held the call <a>Resume</a>");
onHoldText = _t(holdString, {}, {
a: sub => <AccessibleButton kind="link" onClick={this.onCallResumeClick}>
{sub}
</AccessibleButton>,
Expand Down Expand Up @@ -478,20 +480,6 @@ export default class CallView extends React.Component<IProps, IState> {
mx_CallView_voice: true,
mx_CallView_voice_hold: isOnHold,
});
let secondaryCallAvatar: ReactNode;

if (this.props.secondaryCall) {
const secAvatarSize = this.props.pipMode ? 40 : 100;
secondaryCallAvatar = <div className="mx_CallView_voice_secondaryAvatarContainer"
style={{width: secAvatarSize, height: secAvatarSize}}
>
<RoomAvatar
room={secCallRoom}
height={secAvatarSize}
width={secAvatarSize}
/>
</div>;
}

contentView = <div className={classes} onMouseMove={this.onMouseMove}>
<div className="mx_CallView_voice_avatarsContainer">
Expand All @@ -502,7 +490,6 @@ export default class CallView extends React.Component<IProps, IState> {
width={avatarSize}
/>
</div>
{secondaryCallAvatar}
</div>
<div className="mx_CallView_voice_holdText">{onHoldText}</div>
{callControls}
Expand Down Expand Up @@ -546,7 +533,7 @@ export default class CallView extends React.Component<IProps, IState> {
<AccessibleButton element='span' onClick={this.onSecondaryRoomAvatarClick}>
<RoomAvatar room={secCallRoom} height={16} width={16} />
<span className="mx_CallView_secondaryCall_roomName">
{_t("%(name)s paused", { name: secCallRoom.name })}
{_t("%(name)s on hold", { name: secCallRoom.name })}
</span>
</AccessibleButton>
</span>;
Expand Down
3 changes: 2 additions & 1 deletion src/i18n/strings/en_EN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -853,13 +853,14 @@
"sends fireworks": "sends fireworks",
"Sends the given message with snowfall": "Sends the given message with snowfall",
"sends snowfall": "sends snowfall",
"You held the call <a>Switch</a>": "You held the call <a>Switch</a>",
"You held the call <a>Resume</a>": "You held the call <a>Resume</a>",
"%(peerName)s held the call": "%(peerName)s held the call",
"Video Call": "Video Call",
"Voice Call": "Voice Call",
"Fill Screen": "Fill Screen",
"Return to call": "Return to call",
"%(name)s paused": "%(name)s paused",
"%(name)s on hold": "%(name)s on hold",
"Unknown caller": "Unknown caller",
"Incoming voice call": "Incoming voice call",
"Incoming video call": "Incoming video call",
Expand Down