Make double-clicking the PiP take you to the call room (#7142)

This commit is contained in:
Šimon Brandner 2021-11-17 13:49:43 +01:00 committed by GitHub
parent a65637c1ed
commit 816136de97
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 17 deletions

View file

@ -128,6 +128,8 @@ limitations under the License.
padding-top: 20px; padding-top: 20px;
padding-bottom: 15px; padding-bottom: 15px;
color: $accent-fg-color; color: $accent-fg-color;
user-select: none;
.mx_AccessibleButton_hasKind { .mx_AccessibleButton_hasKind {
padding: 0px; padding: 0px;
font-weight: bold; font-weight: bold;

View file

@ -178,6 +178,13 @@ export default class CallPreview extends React.Component<IProps, IState> {
}); });
}; };
private onDoubleClick = (): void => {
dis.dispatch({
action: "view_room",
room_id: this.state.primaryCall.roomId,
});
};
public render() { public render() {
const pipMode = true; const pipMode = true;
if (this.state.primaryCall) { if (this.state.primaryCall) {
@ -185,6 +192,7 @@ export default class CallPreview extends React.Component<IProps, IState> {
<PictureInPictureDragger <PictureInPictureDragger
className="mx_CallPreview" className="mx_CallPreview"
draggable={pipMode} draggable={pipMode}
onDoubleClick={this.onDoubleClick}
> >
{ ({ onStartMoving, onResize }) => <CallView { ({ onStartMoving, onResize }) => <CallView
onMouseDownOnHeader={onStartMoving} onMouseDownOnHeader={onStartMoving}

View file

@ -19,7 +19,6 @@ import { Room } from 'matrix-js-sdk/src/models/room';
import React from 'react'; import React from 'react';
import { _t, _td } from '../../../../languageHandler'; import { _t, _td } from '../../../../languageHandler';
import RoomAvatar from '../../avatars/RoomAvatar'; import RoomAvatar from '../../avatars/RoomAvatar';
import AccessibleButton from '../../elements/AccessibleButton';
import dis from '../../../../dispatcher/dispatcher'; import dis from '../../../../dispatcher/dispatcher';
import classNames from 'classnames'; import classNames from 'classnames';
import AccessibleTooltipButton from '../../elements/AccessibleTooltipButton'; import AccessibleTooltipButton from '../../elements/AccessibleTooltipButton';
@ -36,13 +35,6 @@ interface CallViewHeaderProps {
onPipMouseDown: (event: React.MouseEvent<Element, MouseEvent>) => void; onPipMouseDown: (event: React.MouseEvent<Element, MouseEvent>) => void;
} }
const onRoomAvatarClick = (roomId: string) => {
dis.dispatch({
action: 'view_room',
room_id: roomId,
});
};
const onFullscreenClick = () => { const onFullscreenClick = () => {
dis.dispatch({ dis.dispatch({
action: 'video_fullscreen', action: 'video_fullscreen',
@ -76,12 +68,10 @@ const CallViewHeaderControls: React.FC<CallControlsProps> = ({ pipMode = false,
}; };
const SecondaryCallInfo: React.FC<{ callRoom: Room }> = ({ callRoom }) => { const SecondaryCallInfo: React.FC<{ callRoom: Room }> = ({ callRoom }) => {
return <span className="mx_CallViewHeader_secondaryCallInfo"> return <span className="mx_CallViewHeader_secondaryCallInfo">
<AccessibleButton element='span' onClick={() => onRoomAvatarClick(callRoom.roomId)}> <RoomAvatar room={callRoom} height={16} width={16} />
<RoomAvatar room={callRoom} height={16} width={16} /> <span className="mx_CallView_secondaryCall_roomName">
<span className="mx_CallView_secondaryCall_roomName"> { _t("%(name)s on hold", { name: callRoom.name }) }
{ _t("%(name)s on hold", { name: callRoom.name }) } </span>
</span>
</AccessibleButton>
</span>; </span>;
}; };
@ -117,9 +107,7 @@ const CallViewHeader: React.FC<CallViewHeaderProps> = ({
className="mx_CallViewHeader" className="mx_CallViewHeader"
onMouseDown={onPipMouseDown} onMouseDown={onPipMouseDown}
> >
<AccessibleButton onClick={() => onRoomAvatarClick(roomId)}> <RoomAvatar room={callRoom} height={32} width={32} />
<RoomAvatar room={callRoom} height={32} width={32} />
</AccessibleButton>
<div className="mx_CallViewHeader_callInfo"> <div className="mx_CallViewHeader_callInfo">
<div className="mx_CallViewHeader_roomName">{ callRoomName }</div> <div className="mx_CallViewHeader_roomName">{ callRoomName }</div>
<div className="mx_CallViewHeader_callTypeSmall"> <div className="mx_CallViewHeader_callTypeSmall">

View file

@ -42,6 +42,7 @@ interface IProps {
className?: string; className?: string;
children: ({ onStartMoving, onResize }: IChildrenOptions) => React.ReactNode; children: ({ onStartMoving, onResize }: IChildrenOptions) => React.ReactNode;
draggable: boolean; draggable: boolean;
onDoubleClick?: () => void;
} }
interface IState { interface IState {
@ -216,6 +217,7 @@ export default class PictureInPictureDragger extends React.Component<IProps, ISt
className={this.props.className} className={this.props.className}
style={this.props.draggable ? style : undefined} style={this.props.draggable ? style : undefined}
ref={this.callViewWrapper} ref={this.callViewWrapper}
onDoubleClick={this.props.onDoubleClick}
> >
<> <>
{ this.props.children({ { this.props.children({