imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' into florianduros/fix-white-black-theme-switch

Browse source
This commit is contained in:
Florian Duros 2022-10-06 17:46:58 +02:00 • committed by GitHub
commit f85685a0fb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
26 changed files with 824 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/Notifier.ts
View file

@ -47,6 +47,9 @@ import ErrorDialog from "./components/views/dialogs/ErrorDialog";
import LegacyCallHandler from "./LegacyCallHandler";
import VoipUserMapper from "./VoipUserMapper";
import { localNotificationsAreSilenced } from "./utils/notifications";
import { getIncomingCallToastKey, IncomingCallToast } from "./toasts/IncomingCallToast";
import ToastStore from "./stores/ToastStore";
import { ElementCall } from "./models/Call";
/*
* Dispatches:
@ -358,7 +361,7 @@ export const Notifier = {
onEvent: function(ev: MatrixEvent) {
if (!this.isSyncing) return; // don't alert for any messages initially
if (ev.getSender() === MatrixClientPeg.get().credentials.userId) return;
if (ev.getSender() === MatrixClientPeg.get().getUserId()) return;
MatrixClientPeg.get().decryptEventIfNeeded(ev);
@ -419,6 +422,8 @@ export const Notifier = {
const actions = MatrixClientPeg.get().getPushActionsForEvent(ev);
if (actions?.notify) {
this._performCustomEventHandling(ev);
if (RoomViewStore.instance.getRoomId() === room.roomId &&
UserActivity.sharedInstance().userActiveRecently() &&
!Modal.hasDialogs()
@ -436,6 +441,24 @@ export const Notifier = {
}
}
},
/**
* Some events require special handling such as showing in-app toasts
*/
_performCustomEventHandling: function(ev: MatrixEvent) {
if (
ElementCall.CALL_EVENT_TYPE.names.includes(ev.getType())
&& SettingsStore.getValue("feature_group_calls")
) {
ToastStore.sharedInstance().addOrReplaceToast({
key: getIncomingCallToastKey(ev.getStateKey()),
priority: 100,
component: IncomingCallToast,
bodyClassName: "mx_IncomingCallToast",
props: { callEvent: ev },
});
}
},
};
if (!window.mxNotifier) {

15
src/TextForEvent.tsx
View file

@ -45,6 +45,7 @@ import AccessibleButton from './components/views/elements/AccessibleButton';
import RightPanelStore from './stores/right-panel/RightPanelStore';
import { ViewRoomPayload } from "./dispatcher/payloads/ViewRoomPayload";
import { isLocationEvent } from './utils/EventUtils';
import { ElementCall } from "./models/Call";
export function getSenderName(event: MatrixEvent): string {
return event.sender?.name ?? event.getSender() ?? _t("Someone");
@ -57,6 +58,15 @@ function getRoomMemberDisplayname(event: MatrixEvent, userId = event.getSender()
return member?.name || member?.rawDisplayName || userId || _t("Someone");
}
function textForCallEvent(event: MatrixEvent): () => string {
const roomName = MatrixClientPeg.get().getRoom(event.getRoomId()!).name;
const isSupported = MatrixClientPeg.get().supportsVoip();
return isSupported
? () => _t("Video call started in %(roomName)s.", { roomName })
: () => _t("Video call started in %(roomName)s. (not supported by this browser)", { roomName });
}
// These functions are frequently used just to check whether an event has
// any text to display at all. For this reason they return deferred values
// to avoid the expense of looking up translations when they're not needed.
@ -798,6 +808,11 @@ for (const evType of ALL_RULE_TYPES) {
stateHandlers[evType] = textForMjolnirEvent;
}
// Add both stable and unstable m.call events
for (const evType of ElementCall.CALL_EVENT_TYPE.names) {
stateHandlers[evType] = textForCallEvent;
}
/**
* Determines whether the given event has text to display.
* @param ev The event

17
src/components/views/rooms/LiveContentSummary.tsx
View file

@ -18,6 +18,8 @@ import React, { FC } from "react";
import classNames from "classnames";
import { _t } from "../../../languageHandler";
import { Call } from "../../../models/Call";
import { useParticipants } from "../../../hooks/useCall";
export enum LiveContentType {
Video,
@ -55,3 +57,18 @@ export const LiveContentSummary: FC<Props> = ({ type, text, active, participantC
</> }
</span>
);
interface LiveContentSummaryWithCallProps {
call: Call;
}
export function LiveContentSummaryWithCall({ call }: LiveContentSummaryWithCallProps) {
const participants = useParticipants(call);
return <LiveContentSummary
type={LiveContentType.Video}
text={_t("Video")}
active={false}
participantCount={participants.size}
/>;
}

67
src/components/views/settings/devices/DeviceTypeIcon.tsx
View file

@ -18,6 +18,9 @@ import React from 'react';
import classNames from 'classnames';
import { Icon as UnknownDeviceIcon } from '../../../../../res/img/element-icons/settings/unknown-device.svg';
import { Icon as DesktopIcon } from '../../../../../res/img/element-icons/settings/desktop.svg';
import { Icon as WebIcon } from '../../../../../res/img/element-icons/settings/web.svg';
import { Icon as MobileIcon } from '../../../../../res/img/element-icons/settings/mobile.svg';
import { Icon as VerifiedIcon } from '../../../../../res/img/e2e/verified.svg';
import { Icon as UnverifiedIcon } from '../../../../../res/img/e2e/warning.svg';
import { _t } from '../../../../languageHandler';
@ -30,33 +33,51 @@ interface Props {
deviceType?: DeviceType;
}
const deviceTypeIcon: Record<DeviceType, React.FC<React.SVGProps<SVGSVGElement>>> = {
[DeviceType.Desktop]: DesktopIcon,
[DeviceType.Mobile]: MobileIcon,
[DeviceType.Web]: WebIcon,
[DeviceType.Unknown]: UnknownDeviceIcon,
};
const deviceTypeLabel: Record<DeviceType, string> = {
[DeviceType.Desktop]: _t('Desktop session'),
[DeviceType.Mobile]: _t('Mobile session'),
[DeviceType.Web]: _t('Web session'),
[DeviceType.Unknown]: _t('Unknown session type'),
};
export const DeviceTypeIcon: React.FC<Props> = ({
isVerified,
isSelected,
deviceType,
}) => (
<div className={classNames('mx_DeviceTypeIcon', {
mx_DeviceTypeIcon_selected: isSelected,
})}
>
{ /* TODO(kerrya) all devices have an unknown type until PSG-650 */ }
<UnknownDeviceIcon
className='mx_DeviceTypeIcon_deviceIcon'
role='img'
aria-label={_t('Unknown device type')}
/>
{
isVerified
? <VerifiedIcon
className={classNames('mx_DeviceTypeIcon_verificationIcon', 'verified')}
}) => {
const Icon = deviceTypeIcon[deviceType] || deviceTypeIcon[DeviceType.Unknown];
const label = deviceTypeLabel[deviceType] || deviceTypeLabel[DeviceType.Unknown];
return (
<div className={classNames('mx_DeviceTypeIcon', {
mx_DeviceTypeIcon_selected: isSelected,
})}
>
<div className='mx_DeviceTypeIcon_deviceIconWrapper'>
<Icon
className='mx_DeviceTypeIcon_deviceIcon'
role='img'
aria-label={_t('Verified')}
aria-label={label}
/>
: <UnverifiedIcon
className={classNames('mx_DeviceTypeIcon_verificationIcon', 'unverified')}
role='img'
aria-label={_t('Unverified')}
/>
}
</div>);
</div>
{
isVerified
? <VerifiedIcon
className={classNames('mx_DeviceTypeIcon_verificationIcon', 'verified')}
role='img'
aria-label={_t('Verified')}
/>
: <UnverifiedIcon
className={classNames('mx_DeviceTypeIcon_verificationIcon', 'unverified')}
role='img'
aria-label={_t('Unverified')}
/>
}
</div>);
};

15
src/i18n/strings/en_EN.json
View file

@ -470,6 +470,8 @@
"Converts the DM to a room": "Converts the DM to a room",
"Displays action": "Displays action",
"Someone": "Someone",
"Video call started in %(roomName)s.": "Video call started in %(roomName)s.",
"Video call started in %(roomName)s. (not supported by this browser)": "Video call started in %(roomName)s. (not supported by this browser)",
"%(senderName)s placed a voice call.": "%(senderName)s placed a voice call.",
"%(senderName)s placed a voice call. (not supported by this browser)": "%(senderName)s placed a voice call. (not supported by this browser)",
"%(senderName)s placed a video call.": "%(senderName)s placed a video call.",
@ -795,6 +797,11 @@
"Don't miss a reply": "Don't miss a reply",
"Notifications": "Notifications",
"Enable desktop notifications": "Enable desktop notifications",
"Unknown room": "Unknown room",
"Video call started": "Video call started",
"Video": "Video",
"Join": "Join",
"Close": "Close",
"Unknown caller": "Unknown caller",
"Voice call": "Voice call",
"Video call": "Video call",
@ -1051,7 +1058,6 @@
"Video devices": "Video devices",
"Turn off camera": "Turn off camera",
"Turn on camera": "Turn on camera",
"Join": "Join",
"%(count)s people joined|other": "%(count)s people joined",
"%(count)s people joined|one": "%(count)s person joined",
"Dial": "Dial",
@ -1519,7 +1525,6 @@
"Ban list rules - %(roomName)s": "Ban list rules - %(roomName)s",
"Server rules": "Server rules",
"User rules": "User rules",
"Close": "Close",
"You have not ignored anyone.": "You have not ignored anyone.",
"You are currently ignoring:": "You are currently ignoring:",
"You are not subscribed to any lists": "You are not subscribed to any lists",
@ -1729,7 +1734,10 @@
"Inactive for %(inactiveAgeDays)s+ days": "Inactive for %(inactiveAgeDays)s+ days",
"Verified": "Verified",
"Unverified": "Unverified",
"Unknown device type": "Unknown device type",
"Desktop session": "Desktop session",
"Mobile session": "Mobile session",
"Web session": "Web session",
"Unknown session type": "Unknown session type",
"Verified session": "Verified session",
"This session is ready for secure messaging.": "This session is ready for secure messaging.",
"Unverified session": "Unverified session",
@ -2002,7 +2010,6 @@
"%(count)s unread messages.|other": "%(count)s unread messages.",
"%(count)s unread messages.|one": "1 unread message.",
"Unread messages.": "Unread messages.",
"Video": "Video",
"Joining…": "Joining…",
"Joined": "Joined",
"Upgrading this room will shut down the current instance of the room and create an upgraded room with the same name.": "Upgrading this room will shut down the current instance of the room and create an upgraded room with the same name.",

119
src/toasts/IncomingCallToast.tsx Normal file
View file

@ -0,0 +1,119 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useCallback, useEffect } from 'react';
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import { _t } from '../languageHandler';
import RoomAvatar from '../components/views/avatars/RoomAvatar';
import AccessibleButton from '../components/views/elements/AccessibleButton';
import { MatrixClientPeg } from "../MatrixClientPeg";
import defaultDispatcher from "../dispatcher/dispatcher";
import { ViewRoomPayload } from "../dispatcher/payloads/ViewRoomPayload";
import { Action } from "../dispatcher/actions";
import ToastStore from "../stores/ToastStore";
import AccessibleTooltipButton from "../components/views/elements/AccessibleTooltipButton";
import {
LiveContentSummary,
LiveContentSummaryWithCall,
LiveContentType,
} from "../components/views/rooms/LiveContentSummary";
import { useCall } from "../hooks/useCall";
import { useRoomState } from "../hooks/useRoomState";
import { ButtonEvent } from "../components/views/elements/AccessibleButton";
export const getIncomingCallToastKey = (stateKey: string) => `call_${stateKey}`;
interface Props {
callEvent: MatrixEvent;
}
export function IncomingCallToast({ callEvent }: Props) {
const roomId = callEvent.getRoomId()!;
const room = MatrixClientPeg.get().getRoom(roomId);
const call = useCall(roomId);
const dismissToast = useCallback((): void => {
ToastStore.sharedInstance().dismissToast(getIncomingCallToastKey(callEvent.getStateKey()!));
}, [callEvent]);
const latestEvent = useRoomState(room, useCallback((state) => {
return state.getStateEvents(callEvent.getType(), callEvent.getStateKey()!);
}, [callEvent]));
useEffect(() => {
if ("m.terminated" in latestEvent.getContent()) {
dismissToast();
}
}, [latestEvent, dismissToast]);
const onJoinClick = useCallback((e: ButtonEvent): void => {
e.stopPropagation();
defaultDispatcher.dispatch<ViewRoomPayload>({
action: Action.ViewRoom,
room_id: room.roomId,
view_call: true,
metricsTrigger: undefined,
});
dismissToast();
}, [room, dismissToast]);
const onCloseClick = useCallback((e: ButtonEvent): void => {
e.stopPropagation();
dismissToast();
}, [dismissToast]);
return <React.Fragment>
<RoomAvatar
room={room ?? undefined}
height={24}
width={24}
/>
<div className="mx_IncomingCallToast_content">
<div className="mx_IncomingCallToast_info">
<span className="mx_IncomingCallToast_room">
{ room ? room.name : _t("Unknown room") }
</span>
<div className="mx_IncomingCallToast_message">
{ _t("Video call started") }
</div>
{ call
? <LiveContentSummaryWithCall call={call} />
: <LiveContentSummary
type={LiveContentType.Video}
text={_t("Video")}
active={false}
participantCount={0}
/>
}
</div>
<AccessibleButton
className="mx_IncomingCallToast_joinButton"
onClick={onJoinClick}
kind="primary"
>
{ _t("Join") }
</AccessibleButton>
</div>
<AccessibleTooltipButton
className="mx_IncomingCallToast_closeButton"
onClick={onCloseClick}
title={_t("Close")}
/>
</React.Fragment>;
}