Merge pull request #5222 from matrix-org/travis/ft-sep1620/03-jitsi-obvious

Render Jitsi widget state events in a more obvious way

src/components/views/messages/MJitsiWidgetEvent.tsx

@@ -0,0 +1,76 @@
+/*
+Copyright 2020 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 from 'react';
+import { MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { _t } from "../../../languageHandler";
+import WidgetStore from "../../../stores/WidgetStore";
+
+interface IProps {
+    mxEvent: MatrixEvent;
+}
+
+export default class MJitsiWidgetEvent extends React.PureComponent<IProps> {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const url = this.props.mxEvent.getContent()['url'];
+        const prevUrl = this.props.mxEvent.getPrevContent()['url'];
+        const senderName = this.props.mxEvent.sender?.name || this.props.mxEvent.getSender();
+
+        let joinCopy = _t('Join the conference at the top of this room');
+        if (!WidgetStore.instance.isPinned(this.props.mxEvent.getStateKey())) {
+            joinCopy = _t('Join the conference from the room information card on the right');
+        }
+
+        if (!url) {
+            // removed
+            return (
+                <div className='mx_EventTile_bubble mx_MJitsiWidgetEvent'>
+                    <div className='mx_MJitsiWidgetEvent_title'>
+                        {_t('Video conference ended by %(senderName)s', {senderName})}
+                    </div>
+                </div>
+            );
+        } else if (prevUrl) {
+            // modified
+            return (
+                <div className='mx_EventTile_bubble mx_MJitsiWidgetEvent'>
+                    <div className='mx_MJitsiWidgetEvent_title'>
+                        {_t('Video conference updated by %(senderName)s', {senderName})}
+                    </div>
+                    <div className='mx_MJitsiWidgetEvent_subtitle'>
+                        {joinCopy}
+                    </div>
+                </div>
+            );
+        } else {
+            // assume added
+            return (
+                <div className='mx_EventTile_bubble mx_MJitsiWidgetEvent'>
+                    <div className='mx_MJitsiWidgetEvent_title'>
+                        {_t("Video conference started by %(senderName)s", {senderName})}
+                    </div>
+                    <div className='mx_MJitsiWidgetEvent_subtitle'>
+                        {joinCopy}
+                    </div>
+                </div>
+            );
+        }
+    }
+}

src/components/views/rooms/EventTile.js

@@ -34,6 +34,7 @@ import * as ObjectUtils from "../../../ObjectUtils";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {E2E_STATE} from "./E2EIcon";
 import {toRem} from "../../../utils/units";
+import {WidgetType} from "../../../widgets/WidgetType";
 import RoomAvatar from "../avatars/RoomAvatar";
 
 const eventTileTypes = {
@@ -111,6 +112,19 @@ export function getHandlerTile(ev) {
         }
     }
 
+    // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111)
+    if (type === "im.vector.modular.widgets") {
+        let type = ev.getContent()['type'];
+        if (!type) {
+            // deleted/invalid widget - try the past widget type
+            type = ev.getPrevContent()['type'];
+        }
+
+        if (WidgetType.JITSI.matches(type)) {
+            return "messages.MJitsiWidgetEvent";
+        }
+    }
+
     return ev.isState() ? stateEventTileTypes[type] : eventTileTypes[type];
 }
 
@@ -627,16 +641,18 @@ export default class EventTile extends React.Component {
         const msgtype = content.msgtype;
         const eventType = this.props.mxEvent.getType();
 
+        let tileHandler = getHandlerTile(this.props.mxEvent);
+
         // Info messages are basically information about commands processed on a room
         const isBubbleMessage = eventType.startsWith("m.key.verification") ||
             (eventType === "m.room.message" && msgtype && msgtype.startsWith("m.key.verification")) ||
-            (eventType === "m.room.encryption");
+            (eventType === "m.room.encryption") ||
+            (tileHandler === "messages.MJitsiWidgetEvent");
         let isInfoMessage = (
             !isBubbleMessage && eventType !== 'm.room.message' &&
             eventType !== 'm.sticker' && eventType !== 'm.room.create'
         );
 
-        let tileHandler = getHandlerTile(this.props.mxEvent);
         // If we're showing hidden events in the timeline, we should use the
         // source tile when there's no regular tile for an event and also for
         // replace relations (which otherwise would display as a confusing