New group call experience: Call tiles (#9332)

* Add call tiles

* Factor CallDuration out into a reusable component

* Correct the separator character in LiveContentSummary

Author: robintown

res/css/_components.pcss

@@ -210,6 +210,7 @@
 @import "./views/elements/_Validation.pcss";
 @import "./views/emojipicker/_EmojiPicker.pcss";
 @import "./views/location/_LocationPicker.pcss";
+@import "./views/messages/_CallEvent.pcss";
 @import "./views/messages/_CreateEvent.pcss";
 @import "./views/messages/_DateSeparator.pcss";
 @import "./views/messages/_DisambiguatedProfile.pcss";
@@ -264,6 +265,7 @@
 @import "./views/rooms/_JumpToBottomButton.pcss";
 @import "./views/rooms/_LinkPreviewGroup.pcss";
 @import "./views/rooms/_LinkPreviewWidget.pcss";
+@import "./views/rooms/_LiveContentSummary.pcss";
 @import "./views/rooms/_MemberInfo.pcss";
 @import "./views/rooms/_MemberList.pcss";
 @import "./views/rooms/_MessageComposer.pcss";
@@ -285,7 +287,6 @@
 @import "./views/rooms/_RoomPreviewCard.pcss";
 @import "./views/rooms/_RoomSublist.pcss";
 @import "./views/rooms/_RoomTile.pcss";
-@import "./views/rooms/_RoomTileCallSummary.pcss";
 @import "./views/rooms/_RoomUpgradeWarningBar.pcss";
 @import "./views/rooms/_SearchBar.pcss";
 @import "./views/rooms/_SendMessageComposer.pcss";
@@ -347,6 +348,7 @@
 @import "./views/user-onboarding/_UserOnboardingTask.pcss";
 @import "./views/verification/_VerificationShowSas.pcss";
 @import "./views/voip/LegacyCallView/_LegacyCallViewButtons.pcss";
+@import "./views/voip/_CallDuration.pcss";
 @import "./views/voip/_CallView.pcss";
 @import "./views/voip/_DialPad.pcss";
 @import "./views/voip/_DialPadContextMenu.pcss";

res/css/views/elements/_FacePile.pcss

@@ -22,6 +22,7 @@ limitations under the License.
         display: inline-flex;
         flex-direction: row-reverse;
         vertical-align: middle;
+        margin: 0 -1px; /* to cancel out the border on the edges */
 
         /* Overlap the children */
         > * + * {

res/css/views/messages/_CallEvent.pcss

@@ -0,0 +1,77 @@
+/*
+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.
+*/
+
+.mx_CallEvent_wrapper {
+    display: flex;
+    width: 100%;
+}
+
+.mx_CallEvent {
+    padding: 12px;
+    box-sizing: border-box;
+    min-height: 60px;
+    max-width: 600px;
+    width: 100%;
+    background-color: $system;
+    border-radius: 8px;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: $spacing-8;
+
+    .mx_CallEvent_title {
+        font-size: $font-15px;
+        line-height: 24px; /* in px to match the avatar */
+    }
+
+    &.mx_CallEvent_inactive .mx_CallEvent_title::before {
+        display: inline-block;
+        vertical-align: middle;
+        content: '';
+        background-color: $secondary-content;
+        mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+        mask-size: 16px;
+        width: 16px;
+        height: 16px;
+        margin-right: 8px;
+    }
+
+    &.mx_CallEvent_active .mx_CallEvent_title {
+        font-weight: 600;
+    }
+
+    > .mx_BaseAvatar {
+        align-self: flex-start;
+    }
+
+    > .mx_CallEvent_infoRows {
+        flex-grow: 1;
+
+        display: flex;
+        flex-direction: column;
+        gap: $spacing-4;
+    }
+
+    > .mx_CallDuration {
+        padding: $spacing-4;
+    }
+
+    > .mx_CallEvent_button {
+        box-sizing: border-box;
+        min-width: 120px;
+    }
+}

res/css/views/rooms/_EventBubbleTile.pcss

@@ -523,7 +523,8 @@ limitations under the License.
         max-width: 100%;
     }
 
-    .mx_LegacyCallEvent_wrapper {
+    .mx_LegacyCallEvent_wrapper,
+    .mx_CallEvent_wrapper {
         justify-content: center;
     }
 }

res/css/views/rooms/_RoomTileCallSummary.pcss renamed to res/css/views/rooms/_LiveContentSummary.pcss

@@ -14,21 +14,26 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_RoomTileCallSummary {
-    .mx_RoomTileCallSummary_text {
+.mx_LiveContentSummary {
+    color: $secondary-content;
+
+    .mx_LiveContentSummary_text {
         &::before {
             display: inline-block;
             vertical-align: text-bottom;
             content: '';
             background-color: $secondary-content;
-            mask-image: url('$(res)/img/element-icons/call/video-call.svg');
             mask-size: 16px;
             width: 16px;
             height: 16px;
             margin-right: 4px;
         }
 
-        &.mx_RoomTileCallSummary_text_active {
+        &.mx_LiveContentSummary_text_video::before {
+            mask-image: url('$(res)/img/element-icons/call/video-call.svg');
+        }
+
+        &.mx_LiveContentSummary_text_active {
             color: $accent;
 
             &::before {
@@ -37,7 +42,7 @@ limitations under the License.
         }
     }
 
-    .mx_RoomTileCallSummary_participants::before {
+    .mx_LiveContentSummary_participants::before {
         display: inline-block;
         vertical-align: text-bottom;
         content: '';

res/css/views/voip/_CallDuration.pcss

@@ -0,0 +1,20 @@
+/*
+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.
+*/
+
+.mx_CallDuration {
+    color: $secondary-content;
+    font-size: $font-12px;
+}

src/components/views/elements/AccessibleButton.tsx

@@ -72,7 +72,7 @@ type IProps<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T>
     disabled?: boolean;
     className?: string;
     triggerOnMouseDown?: boolean;
-    onClick(e?: ButtonEvent): void | Promise<void>;
+    onClick: ((e: ButtonEvent) => void | Promise<void>) | null;
 };
 
 interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {
@@ -106,9 +106,9 @@ export default function AccessibleButton<T extends keyof JSX.IntrinsicElements>(
         newProps["disabled"] = true;
     } else {
         if (triggerOnMouseDown) {
-            newProps.onMouseDown = onClick;
+            newProps.onMouseDown = onClick ?? undefined;
         } else {
-            newProps.onClick = onClick;
+            newProps.onClick = onClick ?? undefined;
         }
         // We need to consume enter onKeyDown and space onKeyUp
         // otherwise we are risking also activating other keyboard focusable elements
@@ -124,7 +124,7 @@ export default function AccessibleButton<T extends keyof JSX.IntrinsicElements>(
                 case KeyBindingAction.Enter:
                     e.stopPropagation();
                     e.preventDefault();
-                    return onClick(e);
+                    return onClick?.(e);
                 case KeyBindingAction.Space:
                     e.stopPropagation();
                     e.preventDefault();
@@ -144,7 +144,7 @@ export default function AccessibleButton<T extends keyof JSX.IntrinsicElements>(
                 case KeyBindingAction.Space:
                     e.stopPropagation();
                     e.preventDefault();
-                    return onClick(e);
+                    return onClick?.(e);
                 default:
                     onKeyUp?.(e);
                     break;