New group call experience: Call tiles (#9332)

* Add call tiles

* Factor CallDuration out into a reusable component

* Correct the separator character in LiveContentSummary

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/_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: '';