OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Post-merge conflict resolution and improve alignment of tooltips

pull/21833/head
Michael Telatynski 2021-08-05 13:37:23 +01:00
parent 54509fae95
commit a8b050a385
1 changed files with 39 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/views/voip/CallView.tsx
View File

@ -23,11 +23,16 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg';
import { _t, _td } from '../../../languageHandler'; import { _t, _td } from '../../../languageHandler';
import VideoFeed from './VideoFeed'; import VideoFeed from './VideoFeed';
import RoomAvatar from "../avatars/RoomAvatar"; import RoomAvatar from "../avatars/RoomAvatar";
import { CallState, CallType, MatrixCall, CallEvent } from 'matrix-js-sdk/src/webrtc/call'; import { CallEvent, CallState, CallType, MatrixCall } from 'matrix-js-sdk/src/webrtc/call';
import classNames from 'classnames'; import classNames from 'classnames';
import AccessibleButton from '../elements/AccessibleButton'; import AccessibleButton from '../elements/AccessibleButton';
import { isOnlyCtrlOrCmdKeyEvent, Key } from '../../../Keyboard'; import { isOnlyCtrlOrCmdKeyEvent, Key } from '../../../Keyboard';
import { alwaysAboveLeftOf, alwaysAboveRightOf, ChevronFace, ContextMenuButton } from '../../structures/ContextMenu'; import {
alwaysAboveLeftOf,
alwaysAboveRightOf,
ChevronFace,
ContextMenuTooltipButton,
} from '../../structures/ContextMenu';
import CallContextMenu from '../context_menus/CallContextMenu'; import CallContextMenu from '../context_menus/CallContextMenu';
import { avatarUrlForMember } from '../../../Avatar'; import { avatarUrlForMember } from '../../../Avatar';
import DialpadContextMenu from '../context_menus/DialpadContextMenu'; import DialpadContextMenu from '../context_menus/DialpadContextMenu';
@ -37,6 +42,8 @@ import DesktopCapturerSourcePicker from "../elements/DesktopCapturerSourcePicker
import Modal from '../../../Modal'; import Modal from '../../../Modal';
import { SDPStreamMetadataPurpose } from 'matrix-js-sdk/src/webrtc/callEventTypes'; import { SDPStreamMetadataPurpose } from 'matrix-js-sdk/src/webrtc/callEventTypes';
import CallViewSidebar from './CallViewSidebar'; import CallViewSidebar from './CallViewSidebar';
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import { Alignment } from "../elements/Tooltip";
interface IProps { interface IProps {
// The call for us to display // The call for us to display
@ -115,7 +122,6 @@ export default class CallView extends React.Component<IProps, IState> {
private controlsHideTimer: number = null; private controlsHideTimer: number = null;
private dialpadButton = createRef<HTMLDivElement>(); private dialpadButton = createRef<HTMLDivElement>();
private contextMenuButton = createRef<HTMLDivElement>(); private contextMenuButton = createRef<HTMLDivElement>();
private contextMenu = createRef<HTMLDivElement>();
constructor(props: IProps) { constructor(props: IProps) {
super(props); super(props);
@ -479,9 +485,12 @@ export default class CallView extends React.Component<IProps, IState> {
let vidMuteButton; let vidMuteButton;
if (this.props.call.type === CallType.Video) { if (this.props.call.type === CallType.Video) {
vidMuteButton = ( vidMuteButton = (
<AccessibleButton <AccessibleTooltipButton
className={vidClasses} className={vidClasses}
onClick={this.onVidMuteClick} onClick={this.onVidMuteClick}
title={this.state.vidMuted ? _t("Start the camera") : _t("Stop the camera")}
alignment={Alignment.Top}
yOffset={-20}
/> />
); );
} }
@ -496,9 +505,15 @@ export default class CallView extends React.Component<IProps, IState> {
this.props.call.state === CallState.Connected this.props.call.state === CallState.Connected
) { ) {
screensharingButton = ( screensharingButton = (
<AccessibleButton <AccessibleTooltipButton
className={screensharingClasses} className={screensharingClasses}
onClick={this.onScreenshareClick} onClick={this.onScreenshareClick}
title={this.state.screensharing
? _t("Stop sharing your screen")
: _t("Start sharing your screen")
}
alignment={Alignment.Top}
yOffset={-20}
/> />
); );
} }
@ -518,6 +533,7 @@ export default class CallView extends React.Component<IProps, IState> {
<AccessibleButton <AccessibleButton
className={sidebarButtonClasses} className={sidebarButtonClasses}
onClick={this.onToggleSidebar} onClick={this.onToggleSidebar}
aria-label={this.state.sidebarShown ? _t("Hide sidebar") : _t("Show sidebar")}
/> />
); );
} }
@ -526,22 +542,28 @@ export default class CallView extends React.Component<IProps, IState> {
let contextMenuButton; let contextMenuButton;
if (this.state.callState === CallState.Connected) { if (this.state.callState === CallState.Connected) {
contextMenuButton = ( contextMenuButton = (
<ContextMenuButton <ContextMenuTooltipButton
className="mx_CallView_callControls_button mx_CallView_callControls_button_more" className="mx_CallView_callControls_button mx_CallView_callControls_button_more"
onClick={this.onMoreClick} onClick={this.onMoreClick}
inputRef={this.contextMenuButton} inputRef={this.contextMenuButton}
isExpanded={this.state.showMoreMenu} isExpanded={this.state.showMoreMenu}
title={_t("More")}
alignment={Alignment.Top}
yOffset={-20}
/> />
); );
} }
let dialpadButton; let dialpadButton;
if (this.state.callState === CallState.Connected && this.props.call.opponentSupportsDTMF()) { if (this.state.callState === CallState.Connected && this.props.call.opponentSupportsDTMF()) {
dialpadButton = ( dialpadButton = (
<ContextMenuButton <ContextMenuTooltipButton
className="mx_CallView_callControls_button mx_CallView_callControls_dialpad" className="mx_CallView_callControls_button mx_CallView_callControls_dialpad"
inputRef={this.dialpadButton} inputRef={this.dialpadButton}
onClick={this.onDialpadClick} onClick={this.onDialpadClick}
isExpanded={this.state.showDialpad} isExpanded={this.state.showDialpad}
title={_t("Dialpad")}
alignment={Alignment.Top}
yOffset={-20}
/> />
); );
} }
@ -583,9 +605,12 @@ export default class CallView extends React.Component<IProps, IState> {
{ dialPad } { dialPad }
{ contextMenu } { contextMenu }
{ dialpadButton } { dialpadButton }
<AccessibleButton <AccessibleTooltipButton
className={micClasses} className={micClasses}
onClick={this.onMicMuteClick} onClick={this.onMicMuteClick}
title={this.state.micMuted ? _t("Unmute the microphone") : _t("Mute the microphone")}
alignment={Alignment.Top}
yOffset={-20}
/> />
{ vidMuteButton } { vidMuteButton }
<div className={micCacheClasses} /> <div className={micCacheClasses} />
@ -593,9 +618,12 @@ export default class CallView extends React.Component<IProps, IState> {
{ screensharingButton } { screensharingButton }
{ sidebarButton } { sidebarButton }
{ contextMenuButton } { contextMenuButton }
<AccessibleButton <AccessibleTooltipButton
className="mx_CallView_callControls_button mx_CallView_callControls_button_hangup" className="mx_CallView_callControls_button mx_CallView_callControls_button_hangup"
onClick={this.onHangupClick} onClick={this.onHangupClick}
title={_t("Hangup")}
alignment={Alignment.Top}
yOffset={-20}
/> />
</div> </div>
); );
@ -820,7 +848,7 @@ export default class CallView extends React.Component<IProps, IState> {
let fullScreenButton; let fullScreenButton;
if (!this.props.pipMode) { if (!this.props.pipMode) {
fullScreenButton = ( fullScreenButton = (
<div <AccessibleTooltipButton
className="mx_CallView_header_button mx_CallView_header_button_fullscreen" className="mx_CallView_header_button mx_CallView_header_button_fullscreen"
onClick={this.onFullscreenClick} onClick={this.onFullscreenClick}
title={_t("Fill Screen")} title={_t("Fill Screen")}
@ -830,7 +858,7 @@ export default class CallView extends React.Component<IProps, IState> {
let expandButton; let expandButton;
if (this.props.pipMode) { if (this.props.pipMode) {
expandButton = <div expandButton = <AccessibleTooltipButton
className="mx_CallView_header_button mx_CallView_header_button_expand" className="mx_CallView_header_button mx_CallView_header_button_expand"
onClick={this.onExpandClick} onClick={this.onExpandClick}
title={_t("Return to call")} title={_t("Return to call")}