Merge branch 'dev' into dm-calls

Bumps [dawidd6/action-download-artifact](https://github.com/dawidd6/action-download-artifact) from 20 to 21.
- [Release notes](https://github.com/dawidd6/action-download-artifact/releases)
- [Commits](https://github.com/dawidd6/action-download-artifact/compare/8305c0f1062bb0d184d09ef4493ecb9288447732...b6e2e70617bc3265edd6dab6c906732b2f1ae151)

---
updated-dependencies:
- dependency-name: dawidd6/action-download-artifact
  dependency-version: '21'
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/workflows/deploy-pull-request.yml

@@ -16,7 +16,7 @@ jobs:
     if: ${{ github.event.workflow_run.conclusion == 'success' }}
     steps:
       - name: Download pr number
-        uses: dawidd6/action-download-artifact@8305c0f1062bb0d184d09ef4493ecb9288447732 # v20
+        uses: dawidd6/action-download-artifact@b6e2e70617bc3265edd6dab6c906732b2f1ae151 # v21
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}
@@ -25,7 +25,7 @@ jobs:
         id: pr
         run: echo "id=$(<pr.txt)" >> $GITHUB_OUTPUT
       - name: Download artifact
-        uses: dawidd6/action-download-artifact@8305c0f1062bb0d184d09ef4493ecb9288447732 # v20
+        uses: dawidd6/action-download-artifact@b6e2e70617bc3265edd6dab6c906732b2f1ae151 # v21
         with:
           workflow: ${{ github.event.workflow.id }}
           run_id: ${{ github.event.workflow_run.id }}

package-lock.json

@@ -44,7 +44,7 @@
         "linkify-react": "4.3.2",
         "linkifyjs": "4.3.2",
         "matrix-js-sdk": "38.2.0",
-        "matrix-widget-api": "1.13.0",
+        "matrix-widget-api": "1.16.1",
         "millify": "6.1.0",
         "pdfjs-dist": "4.2.67",
         "prismjs": "1.30.0",
@@ -66,7 +66,7 @@
         "ua-parser-js": "1.0.35"
       },
       "devDependencies": {
-        "@element-hq/element-call-embedded": "0.16.3",
+        "@element-hq/element-call-embedded": "0.19.1",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rollup/plugin-inject": "5.0.3",
         "@rollup/plugin-wasm": "6.1.1",
@@ -1837,9 +1837,9 @@
       }
     },
     "node_modules/@element-hq/element-call-embedded": {
-      "version": "0.16.3",
-      "resolved": "https://registry.npmjs.org/@element-hq/element-call-embedded/-/element-call-embedded-0.16.3.tgz",
-      "integrity": "sha512-OViKJonDaDNVBUW9WdV9mk78/Ruh34C7XsEgt3O8D9z+64C39elbIgllHSoH5S12IRlv9RYrrV37FZLo6QWsDQ==",
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@element-hq/element-call-embedded/-/element-call-embedded-0.19.1.tgz",
+      "integrity": "sha512-RDZY3P3LTx10ACaGhzkwh2+boNB3x54zHF/7v/cCyoQlAVfEYMhgMEb4CRTwJFwwYFe1r++6Higa0A0G5XxZ8Q==",
       "dev": true
     },
     "node_modules/@emotion/hash": {
@@ -12119,9 +12119,9 @@
       }
     },
     "node_modules/matrix-widget-api": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.13.0.tgz",
-      "integrity": "sha512-+LrvwkR1izL4h2euX8PDrvG/3PZZDEd6As+lmnR3jAVwbFJtU5iTnwmZGnCca9ddngCvXvAHkcpJBEPyPTZneQ==",
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.16.1.tgz",
+      "integrity": "sha512-oCfTV4xNPo02qIgveqdkIyKQjOPpsjhF3bmJBotHrhr8TsrhVa7kx8PtuiUPnQTjz0tdBle7falR2Fw8VKsedw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@types/events": "^3.0.0",

package.json

@@ -97,7 +97,7 @@
     "linkify-react": "4.3.2",
     "linkifyjs": "4.3.2",
     "matrix-js-sdk": "38.2.0",
-    "matrix-widget-api": "1.13.0",
+    "matrix-widget-api": "1.16.1",
     "millify": "6.1.0",
     "pdfjs-dist": "4.2.67",
     "prismjs": "1.30.0",
@@ -119,7 +119,7 @@
     "ua-parser-js": "1.0.35"
   },
   "devDependencies": {
-    "@element-hq/element-call-embedded": "0.16.3",
+    "@element-hq/element-call-embedded": "0.19.1",
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@rollup/plugin-inject": "5.0.3",
     "@rollup/plugin-wasm": "6.1.1",

src/app/components/CallEmbedProvider.tsx

@@ -1,5 +1,31 @@
-import React, { ReactNode, useCallback, useRef } from 'react';
+/* eslint-disable jsx-a11y/media-has-caption */
+import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
+import { MatrixRTCSession } from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
+import FocusTrap from 'focus-trap-react';
+import {
+  Avatar,
+  Box,
+  Button,
+  color,
+  config,
+  Dialog,
+  Icon,
+  Icons,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Text,
+} from 'folds';
+import {
+  EventTimelineSetHandlerMap,
+  EventType,
+  RelationType,
+  Room,
+  RoomEvent,
+} from 'matrix-js-sdk';
+import { IRTCNotificationContent, RTCNotificationType } from 'matrix-js-sdk/lib/matrixrtc/types';
+import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
 import {
   CallEmbedContextProvider,
   CallEmbedRefContextProvider,
@@ -7,11 +33,306 @@ import {
   useCallJoined,
   useCallThemeSync,
   useCallMemberSoundSync,
+  useCallStart,
 } from '../hooks/useCallEmbed';
 import { callChatAtom, callEmbedAtom } from '../state/callEmbed';
 import { CallEmbed } from '../plugins/call';
 import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
 import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
+import { useMatrixClient } from '../hooks/useMatrixClient';
+import CallSound from '../../../public/sound/call.ogg';
+import { useCallMembersChange, useCallSession } from '../hooks/useCall';
+import { useRoomAvatar, useRoomName } from '../hooks/useRoomMeta';
+import { mDirectAtom } from '../state/mDirectList';
+import { useMediaAuthentication } from '../hooks/useMediaAuthentication';
+import { mxcUrlToHttp } from '../utils/matrix';
+import { RoomAvatar, RoomIcon } from './room-avatar';
+import { useRoomNavigate } from '../hooks/useRoomNavigate';
+import { getStateEvent } from '../utils/room';
+import { StateEvent } from '../../types/matrix/room';
+import { getPowersLevelFromMatrixEvent } from '../hooks/usePowerLevels';
+import { getRoomCreatorsForRoomId } from '../hooks/useRoomCreators';
+import { getRoomPermissionsAPI } from '../hooks/useRoomPermissions';
+import { useLivekitSupport } from '../hooks/useLivekitSupport';
+
+type IncomingCallInfo = {
+  room: Room;
+  sender: string;
+  senderTs: number;
+  lifetime: number;
+  intent?: string;
+  notificationType: RTCNotificationType;
+  refEventId: string;
+};
+type IncomingCallProps = {
+  dm: boolean;
+  info: IncomingCallInfo;
+  onIgnore: () => void;
+  onAnswer: (room: Room, video: boolean) => void;
+  onReject: (room: Room, eventId: string) => void;
+};
+function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallProps) {
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const livekitSupported = useLivekitSupport();
+  const { room } = info;
+
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  const roomName = useRoomName(room);
+  const roomAvatar = useRoomAvatar(room, dm);
+  const avatarUrl = roomAvatar
+    ? mxcUrlToHttp(mx, roomAvatar, useAuthentication, 96, 96, 'crop') ?? undefined
+    : undefined;
+
+  const session = useCallSession(room);
+  useCallMembersChange(
+    session,
+    useCallback(() => {
+      const members = MatrixRTCSession.sessionMembershipsForRoom(room, session.sessionDescription);
+      if (members.length === 0) {
+        onIgnore();
+      }
+    }, [room, session, onIgnore])
+  );
+
+  const playSound = useCallback(() => {
+    const audioElement = audioRef.current;
+    audioElement?.play();
+  }, []);
+
+  useEffect(() => {
+    if (info.notificationType === 'ring') {
+      playSound();
+    }
+  }, [playSound, info.notificationType]);
+
+  return (
+    <>
+      <Overlay open backdrop={<OverlayBackdrop />}>
+        <OverlayCenter style={{ alignItems: 'start', paddingTop: config.space.S100 }}>
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              onDeactivate: () => onIgnore(),
+              clickOutsideDeactivates: false,
+              escapeDeactivates: false,
+            }}
+          >
+            <Dialog>
+              <Box
+                style={{
+                  padding: `${config.space.S300} ${config.space.S400} ${config.space.S400}`,
+                }}
+                direction="Column"
+                gap="500"
+              >
+                <Box direction="Column" gap="300">
+                  <Box gap="200" alignItems="Center">
+                    {info.intent === 'video' && <Icon size="50" src={Icons.VideoCamera} filled />}
+                    <Text size="L400">Incoming Call</Text>
+                  </Box>
+                  <Box direction="Row" gap="300" alignItems="Center">
+                    <Box shrink="No">
+                      <Avatar size="400">
+                        <RoomAvatar
+                          roomId={room.roomId}
+                          src={avatarUrl}
+                          alt={roomName}
+                          renderFallback={() => (
+                            <RoomIcon
+                              roomType={room.getType()}
+                              size="400"
+                              joinRule={room.getJoinRule()}
+                              filled
+                            />
+                          )}
+                        />
+                      </Avatar>
+                    </Box>
+                    <Box grow="Yes" direction="Column" gap="0">
+                      <Text size="H4" truncate>
+                        {roomName}
+                      </Text>
+                      <Text size="T200">{info.sender}</Text>
+                    </Box>
+                  </Box>
+                </Box>
+                <Box gap="300">
+                  <Button
+                    style={{ flexGrow: 1 }}
+                    variant="Critical"
+                    fill="Soft"
+                    size="400"
+                    radii="400"
+                    onClick={() => (dm ? onReject(room, info.refEventId) : onIgnore())}
+                    before={<Icon size="200" src={Icons.PhoneDown} filled />}
+                  >
+                    <Text as="span" size="B400">
+                      {dm ? 'Reject' : 'Ignore'}
+                    </Text>
+                  </Button>
+                  <Button
+                    style={{ flexGrow: 1 }}
+                    variant="Success"
+                    size="400"
+                    radii="400"
+                    onClick={() => onAnswer(room, info.intent === 'video')}
+                    before={<Icon size="200" src={Icons.Phone} filled />}
+                    disabled={!livekitSupported}
+                  >
+                    <Text as="span" size="B400">
+                      Answer
+                    </Text>
+                  </Button>
+                </Box>
+                {!livekitSupported && (
+                  <Text
+                    style={{ margin: 'auto', color: color.Critical.Main }}
+                    size="L400"
+                    align="Center"
+                  >
+                    Your homeserver does not support calling.
+                  </Text>
+                )}
+              </Box>
+            </Dialog>
+          </FocusTrap>
+        </OverlayCenter>
+      </Overlay>
+      <audio ref={audioRef} loop style={{ display: 'none' }}>
+        <source src={CallSound} type="audio/ogg" />
+      </audio>
+    </>
+  );
+}
+
+type IncomingCallListenerProps = {
+  callEmbed?: CallEmbed;
+  joined?: boolean;
+};
+function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps) {
+  const mx = useMatrixClient();
+  const directs = useAtomValue(mDirectAtom);
+  const { navigateRoom } = useRoomNavigate();
+
+  const [callInfo, setCallInfo] = useState<IncomingCallInfo>();
+  const dm = callInfo ? directs.has(callInfo.room.roomId) : false;
+  const startCall = useCallStart(dm);
+
+  const handleTimelineEvent: EventTimelineSetHandlerMap[RoomEvent.Timeline] = useCallback(
+    async (event, room, toStartOfTimeline, removed, data) => {
+      // only process rtc notification reference events.
+      // we do not want to wait to decrypt all events.
+      if (event.getRelation()?.rel_type !== RelationType.Reference) return;
+
+      if (event.isEncrypted()) {
+        if (!event.isBeingDecrypted()) {
+          await event.attemptDecryption(mx.getCrypto() as CryptoBackend);
+        }
+        await event.getDecryptionPromise();
+      }
+
+      if (
+        !room ||
+        event.getType() !== EventType.RTCNotification ||
+        event.getSender() === mx.getSafeUserId() ||
+        !data.liveEvent
+      ) {
+        return;
+      }
+
+      const sender = event.getSender();
+      const content = event.getContent<IRTCNotificationContent>();
+      const senderTs =
+        content.sender_ts - event.getTs() > 20000 ? event.getTs() : content.sender_ts;
+      const lifetime = Math.min(content.lifetime, 120000);
+      const notificationType = content.notification_type;
+      const relation =
+        event.getRelation()?.rel_type === RelationType.Reference ? event.getRelation() : undefined;
+      const refEventId = relation?.event_id;
+
+      const mention =
+        content['m.mentions'].room || content['m.mentions'].user_ids?.includes(mx.getSafeUserId());
+      if (!sender || !refEventId || !mention || Date.now() >= senderTs + lifetime) {
+        return;
+      }
+
+      const powerLevelsEvent = getStateEvent(room, StateEvent.RoomPowerLevels);
+      const powerLevels = getPowersLevelFromMatrixEvent(powerLevelsEvent);
+      const creators = getRoomCreatorsForRoomId(mx, room.roomId);
+      const permissions = getRoomPermissionsAPI(creators, powerLevels);
+
+      const hasCallPermission = permissions.stateEvent(
+        StateEvent.GroupCallMemberPrefix,
+        mx.getSafeUserId()
+      );
+      if (!hasCallPermission) return;
+
+      const info: IncomingCallInfo = {
+        room,
+        sender,
+        senderTs,
+        lifetime,
+        intent:
+          'm.call.intent' in content && typeof content['m.call.intent'] === 'string'
+            ? content['m.call.intent']
+            : undefined,
+        notificationType,
+        refEventId,
+      };
+
+      setCallInfo(info);
+    },
+    [mx]
+  );
+
+  useEffect(() => {
+    mx.on(RoomEvent.Timeline, handleTimelineEvent);
+    return () => {
+      mx.removeListener(RoomEvent.Timeline, handleTimelineEvent);
+    };
+  }, [mx, handleTimelineEvent]);
+
+  const handleIgnore = useCallback(() => {
+    setCallInfo(undefined);
+  }, []);
+
+  const handleReject = useCallback(
+    (room: Room, eventId: string) => {
+      mx.sendEvent(room.roomId, EventType.RTCDecline, {
+        'm.relates_to': {
+          rel_type: RelationType.Reference,
+          event_id: eventId,
+        },
+      });
+      setCallInfo(undefined);
+    },
+    [mx]
+  );
+
+  const handleAnswer = useCallback(
+    (room: Room, video: boolean) => {
+      startCall(room, { microphone: true, video, sound: true });
+      setCallInfo(undefined);
+      navigateRoom(room.roomId);
+    },
+    [startCall, navigateRoom]
+  );
+
+  if (callInfo && callEmbed?.roomId === callInfo.room.roomId) {
+    return null;
+  }
+  return !joined && callInfo ? (
+    <IncomingCall
+      dm={dm}
+      info={callInfo}
+      onIgnore={handleIgnore}
+      onAnswer={handleAnswer}
+      onReject={handleReject}
+    />
+  ) : null;
+}
 
 function CallUtils({ embed }: { embed: CallEmbed }) {
   const setCallEmbed = useSetAtom(callEmbedAtom);
@@ -47,7 +368,10 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
   return (
     <CallEmbedContextProvider value={callEmbed}>
       {callEmbed && <CallUtils embed={callEmbed} />}
-      <CallEmbedRefContextProvider value={callEmbedRef}>{children}</CallEmbedRefContextProvider>
+      <CallEmbedRefContextProvider value={callEmbedRef}>
+        <IncomingCallListener callEmbed={callEmbed} joined={joined} />
+        {children}
+      </CallEmbedRefContextProvider>
       <div
         data-call-embed-container
         style={{

src/app/components/editor/input.ts

@@ -255,67 +255,10 @@ const parseCodeBlockNode = (node: Element): CodeBlockElement[] | ParagraphElemen
     },
   ];
 };
-
-const parseListMarkdown = (
+const parseListNode = (
   node: Element,
-  processText: ProcessTextCallback,
-  depth = 0
-): ParagraphElement[] => {
-  const md = isTag(node) && node.name === 'ul' ? '*' : '-';
-  const prefix = node.attribs['data-md'] ?? md;
-  const [starOrHyphen] = prefix.match(/^\*|-$/) ?? [];
-  const [digitOrChar] = prefix.match(/^[\da-zA-Z]/) ?? [];
-
-  const digit = digitOrChar ? parseInt(digitOrChar, 10) : undefined;
-
-  const lines: ParagraphElement[] = [];
-  let lineNo = digit === undefined || Number.isNaN(digit) ? digitOrChar ?? 1 : digit;
-  const pushLine = (line: InlineElement[]) => {
-    lines.push({
-      type: BlockType.Paragraph,
-      children: [
-        {
-          text: `${Array(depth + 1).join(' ')}${starOrHyphen ? `${starOrHyphen} ` : `${lineNo}. `}`,
-        },
-        ...line,
-      ],
-    });
-    if (typeof lineNo === 'string') {
-      lineNo = String.fromCharCode(lineNo.charCodeAt(0) + 1);
-    } else {
-      lineNo += 1;
-    }
-  };
-
-  node.children.forEach((child) => {
-    if (isText(child)) {
-      pushLine([{ text: processText(child.data) }]);
-      return;
-    }
-
-    if (isTag(child)) {
-      if (child.name === 'ul' || child.name === 'ol') {
-        lines.push(...parseListMarkdown(child, processText, depth + 1));
-        return;
-      }
-      if (child.name === 'li') {
-        child.children.forEach((c) => {
-          if (isTag(c) && (c.name === 'ul' || c.name === 'ol')) {
-            lines.push(...parseListMarkdown(c, processText, depth + 1));
-            return;
-          }
-          pushLine(getInlineElement(c, processText));
-        });
-        return;
-      }
-    }
-
-    pushLine(getInlineElement(child, processText));
-  });
-
-  return lines;
-};
-const parseListLines = (children: ChildNode[], processText: ProcessTextCallback) => {
+  processText: ProcessTextCallback
+): OrderedListElement[] | UnorderedListElement[] | ParagraphElement[] => {
   const listLines: Array<InlineElement[]> = [];
   let lineHolder: InlineElement[] = [];
 
@@ -326,7 +269,7 @@ const parseListLines = (children: ChildNode[], processText: ProcessTextCallback)
     lineHolder = [];
   };
 
-  children.forEach((child) => {
+  node.children.forEach((child) => {
     if (isText(child)) {
       lineHolder.push({ text: processText(child.data) });
       return;
@@ -349,23 +292,24 @@ const parseListLines = (children: ChildNode[], processText: ProcessTextCallback)
   });
   appendLine();
 
-  return listLines;
-};
-const parseListNode = (
-  node: Element,
-  processText: ProcessTextCallback
-): OrderedListElement[] | UnorderedListElement[] | ParagraphElement[] => {
-  if (node.attribs['data-md'] !== undefined) {
-    return parseListMarkdown(node, processText);
+  const mdSequence = node.attribs['data-md'];
+  if (mdSequence !== undefined) {
+    const prefix = mdSequence || '-';
+    const [starOrHyphen] = prefix.match(/^\*|-$/) ?? [];
+    return listLines.map((lineChildren) => ({
+      type: BlockType.Paragraph,
+      children: [
+        { text: `${starOrHyphen ? `${starOrHyphen} ` : `${prefix}. `} ` },
+        ...lineChildren,
+      ],
+    }));
   }
 
-  const lines = parseListLines(node.childNodes, processText);
-
   if (node.name === 'ol') {
     return [
       {
         type: BlockType.OrderedList,
-        children: lines.map((lineChildren) => ({
+        children: listLines.map((lineChildren) => ({
           type: BlockType.ListItem,
           children: lineChildren,
         })),
@@ -376,7 +320,7 @@ const parseListNode = (
   return [
     {
       type: BlockType.UnorderedList,
-      children: lines.map((lineChildren) => ({
+      children: listLines.map((lineChildren) => ({
         type: BlockType.ListItem,
         children: lineChildren,
       })),

src/app/features/call-status/CallRoomName.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Room } from 'matrix-js-sdk';
-import { Chip, Text } from 'folds';
+import { Chip, Icon, Icons, Text } from 'folds';
 import { useAtomValue } from 'jotai';
 import { useRoomName } from '../../hooks/useRoomMeta';
 import { RoomIcon } from '../../components/room-avatar';
@@ -38,7 +38,11 @@ export function CallRoomName({ room }: CallRoomNameProps) {
       variant="Background"
       radii="Pill"
       before={
-        <RoomIcon size="200" joinRule={room.getJoinRule()} roomType={room.getType()} filled />
+        dm ? (
+          <Icon size="200" src={Icons.VolumeHigh} filled />
+        ) : (
+          <RoomIcon size="200" joinRule={room.getJoinRule()} roomType={room.getType()} filled />
+        )
       }
       onClick={() => navigateRoom(room.roomId)}
     >

src/app/features/call/CallView.tsx

@@ -18,7 +18,7 @@ import { useLivekitSupport } from '../../hooks/useLivekitSupport';
 function LivekitServerMissingMessage() {
   return (
     <Text style={{ margin: 'auto', color: color.Critical.Main }} size="L400" align="Center">
-      Your homeserver does not support calling. But you can still join call started by others.
+      Your homeserver does not support calling.
     </Text>
   );
 }
@@ -30,12 +30,12 @@ function JoinMessage({
   hasParticipant?: boolean;
   livekitSupported?: boolean;
 }) {
-  if (hasParticipant) return null;
-
   if (livekitSupported === false) {
     return <LivekitServerMissingMessage />;
   }
 
+  if (hasParticipant) return null;
+
   return (
     <Text style={{ margin: 'auto' }} size="L400" align="Center">
       Voice chat’s empty — Be the first to hop in!
@@ -68,7 +68,10 @@ function CallPrescreen() {
   const creators = useRoomCreators(room);
 
   const permissions = useRoomPermissions(creators, powerLevels);
-  const hasPermission = permissions.event(StateEvent.GroupCallMemberPrefix, mx.getSafeUserId());
+  const hasPermission = permissions.stateEvent(
+    StateEvent.GroupCallMemberPrefix,
+    mx.getSafeUserId()
+  );
 
   const callSession = useCallSession(room);
   const callMembers = useCallMembers(room, callSession);
@@ -77,7 +80,7 @@ function CallPrescreen() {
   const callEmbed = useCallEmbed();
   const inOtherCall = callEmbed && callEmbed.roomId !== room.roomId;
 
-  const canJoin = hasPermission && (livekitSupported || hasParticipant);
+  const canJoin = hasPermission && livekitSupported;
 
   return (
     <Scroll variant="Surface" hideTrack>

src/app/features/room-nav/RoomNavItem.tsx

@@ -293,13 +293,13 @@ export function RoomNavItem({
     const creators = getRoomCreatorsForRoomId(mx, room.roomId);
     const permissions = getRoomPermissionsAPI(creators, powerLevels);
 
-    const hasCallPermission = permissions.event(
+    const hasCallPermission = permissions.stateEvent(
       StateEvent.GroupCallMemberPrefix,
       mx.getSafeUserId()
     );
 
-    // Do not join if missing permissions or no livekit support and call is not started by others
-    if (!hasCallPermission || (!livekitSupport(autoDiscoveryInfo) && callMembers.length === 0)) {
+    // Do not join if missing permissions or no livekit support
+    if (!hasCallPermission || !livekitSupport(autoDiscoveryInfo)) {
       return;
     }
 
@@ -378,7 +378,7 @@ export function RoomNavItem({
                 aria-label={notificationMode}
               />
             )}
-            {room.isCallRoom() && callMembers.length > 0 && (
+            {callMembers.length > 0 && (
               <Badge variant="Critical" fill="Solid" size="400">
                 <Text as="span" size="L400" truncate>
                   {callMembers.length} Live

src/app/features/room-settings/permissions/Permissions.tsx

@@ -23,7 +23,7 @@ export function Permissions({ requestClose }: PermissionsProps) {
 
   const canEditPowers = permissions.stateEvent(StateEvent.PowerLevelTags, mx.getSafeUserId());
   const canEditPermissions = permissions.stateEvent(StateEvent.RoomPowerLevels, mx.getSafeUserId());
-  const permissionGroups = usePermissionGroups(room.isCallRoom());
+  const permissionGroups = usePermissionGroups();
 
   const [powerEditor, setPowerEditor] = useState(false);
 

src/app/features/room-settings/permissions/usePermissionItems.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { MessageEvent, StateEvent } from '../../../../types/matrix/room';
 import { PermissionGroup } from '../../common-settings/permissions';
 
-export const usePermissionGroups = (isCallRoom: boolean): PermissionGroup[] => {
+export const usePermissionGroups = (): PermissionGroup[] => {
   const groups: PermissionGroup[] = useMemo(() => {
     const messagesGroup: PermissionGroup = {
       name: 'Messages',
@@ -216,13 +216,13 @@ export const usePermissionGroups = (isCallRoom: boolean): PermissionGroup[] => {
 
     return [
       messagesGroup,
-      ...(isCallRoom ? [callSettingsGroup] : []),
+      callSettingsGroup,
       moderationGroup,
       roomOverviewGroup,
       roomSettingsGroup,
       otherSettingsGroup,
     ];
-  }, [isCallRoom]);
+  }, []);
 
   return groups;
 };

src/app/features/room/Room.tsx

@@ -18,12 +18,18 @@ import { CallView } from '../call/CallView';
 import { RoomViewHeader } from './RoomViewHeader';
 import { callChatAtom } from '../../state/callEmbed';
 import { CallChatView } from './CallChatView';
+import { useCallEmbed } from '../../hooks/useCallEmbed';
+import { useCallMembers, useCallSession } from '../../hooks/useCall';
 
 export function Room() {
   const { eventId } = useParams();
   const room = useRoom();
   const mx = useMatrixClient();
 
+  const callSession = useCallSession(room);
+  const callMembers = useCallMembers(room, callSession);
+  const callEmbed = useCallEmbed();
+
   const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const screenSize = useScreenSizeContext();
@@ -43,7 +49,7 @@ export function Room() {
     )
   );
 
-  const callView = room.isCallRoom();
+  const callView = callEmbed?.roomId === room.roomId || room.isCallRoom() || callMembers.length > 0;
 
   return (
     <PowerLevelsContextProvider value={powerLevels}>

src/app/features/room/RoomViewHeader.tsx

@@ -21,6 +21,7 @@ import {
   RectCords,
   Badge,
   Spinner,
+  Button,
 } from 'folds';
 import { useNavigate } from 'react-router-dom';
 import { Room } from 'matrix-js-sdk';
@@ -68,6 +69,8 @@ import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
 import { ContainerColor } from '../../styles/ContainerColor.css';
 import { RoomSettingsPage } from '../../state/roomSettings';
+import { useCallEmbed, useCallStart } from '../../hooks/useCallEmbed';
+import { useLivekitSupport } from '../../hooks/useLivekitSupport';
 
 type RoomMenuProps = {
   room: Room;
@@ -253,6 +256,124 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
   );
 });
 
+type CallMenuProps = {
+  onVoiceCall: () => void;
+  onVideoCall: () => void;
+  requestClose: () => void;
+};
+const CallMenu = forwardRef<HTMLDivElement, CallMenuProps>(
+  ({ requestClose, onVoiceCall, onVideoCall }, ref) => {
+    const handleVoice = () => {
+      onVoiceCall();
+      requestClose();
+    };
+    const handleVideo = () => {
+      onVideoCall();
+      requestClose();
+    };
+
+    return (
+      <Menu ref={ref} style={{ padding: config.space.S200, minWidth: toRem(150) }}>
+        <Box direction="Column" gap="200">
+          <Text size="L400">Start Call</Text>
+          <Box direction="Column" gap="200">
+            <Button
+              size="300"
+              variant="Success"
+              fill="Soft"
+              outlined
+              radii="300"
+              before={<Icon size="100" src={Icons.Phone} filled />}
+              onClick={handleVoice}
+            >
+              <Text size="B300">Voice</Text>
+            </Button>
+            <Button
+              size="300"
+              variant="Success"
+              radii="300"
+              before={<Icon size="100" src={Icons.VideoCamera} filled />}
+              onClick={handleVideo}
+            >
+              <Text size="B300">Video</Text>
+            </Button>
+          </Box>
+        </Box>
+      </Menu>
+    );
+  }
+);
+
+function CallButton() {
+  const room = useRoom();
+  const direct = useIsDirectRoom();
+
+  const callEmbed = useCallEmbed();
+  const startCall = useCallStart(direct);
+  const callStarted = callEmbed && callEmbed.roomId === room.roomId;
+  const inAnotherCall = callEmbed && !callStarted;
+  const [menuAnchor, setMenuAnchor] = useState<RectCords>();
+
+  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuAnchor(evt.currentTarget.getBoundingClientRect());
+  };
+
+  return (
+    <>
+      <TooltipProvider
+        position="Bottom"
+        offset={4}
+        tooltip={
+          <Tooltip>
+            {inAnotherCall ? (
+              <Text size="L400">Already in another call — End the current call to join!</Text>
+            ) : (
+              <Text>Call</Text>
+            )}
+          </Tooltip>
+        }
+      >
+        {(triggerRef) => (
+          <IconButton
+            variant="Surface"
+            fill="None"
+            ref={triggerRef}
+            onClick={handleOpenMenu}
+            disabled={inAnotherCall || callStarted}
+            aria-pressed={!!menuAnchor}
+          >
+            <Icon size="400" src={Icons.VideoCamera} filled={!!menuAnchor} />
+          </IconButton>
+        )}
+      </TooltipProvider>
+      <PopOut
+        anchor={menuAnchor}
+        position="Bottom"
+        align="Center"
+        content={
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              returnFocusOnDeactivate: false,
+              onDeactivate: () => setMenuAnchor(undefined),
+              clickOutsideDeactivates: true,
+              isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+              isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <CallMenu
+              onVideoCall={() => startCall(room, { microphone: true, video: true, sound: true })}
+              onVoiceCall={() => startCall(room, { microphone: true, video: false, sound: true })}
+              requestClose={() => setMenuAnchor(undefined)}
+            />
+          </FocusTrap>
+        }
+      />
+    </>
+  );
+}
+
 export function RoomViewHeader({ callView }: { callView?: boolean }) {
   const navigate = useNavigate();
   const mx = useMatrixClient();
@@ -260,6 +381,16 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
   const screenSize = useScreenSizeContext();
   const room = useRoom();
   const space = useSpaceOptionally();
+  const powerLevels = usePowerLevelsContext();
+  const creators = useRoomCreators(room);
+  const permissions = useRoomPermissions(creators, powerLevels);
+
+  const hasCallPermission = permissions.stateEvent(
+    StateEvent.GroupCallMemberPrefix,
+    mx.getSafeUserId()
+  );
+  const livekitSupported = useLivekitSupport();
+
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const [pinMenuAnchor, setPinMenuAnchor] = useState<RectCords>();
   const direct = useIsDirectRoom();
@@ -453,7 +584,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
               </FocusTrap>
             }
           />
-
+          {!room.isCallRoom() && livekitSupported && hasCallPermission && <CallButton />}
           {screenSize === ScreenSize.Desktop && (
             <TooltipProvider
               position="Bottom"

src/app/hooks/useCallEmbed.ts

@@ -48,7 +48,7 @@ export const createCallEmbed = (
   const ongoing =
     MatrixRTCSession.sessionMembershipsForRoom(room, rtcSession.sessionDescription).length > 0;
 
-  const intent = CallEmbed.getIntent(dm, ongoing);
+  const intent = CallEmbed.getIntent(dm, ongoing, pref?.video);
   const widget = CallEmbed.getWidget(mx, room, intent, themeKind);
   const controlState = pref && new CallControlState(pref.microphone, pref.video, pref.sound);
 
@@ -101,6 +101,7 @@ export const useCallJoined = (embed?: CallEmbed): boolean => {
 
 export const useCallHangupEvent = (embed: CallEmbed, callback: () => void) => {
   useClientWidgetApiEvent(embed.call, ElementWidgetActions.HangupCall, callback);
+  useClientWidgetApiEvent(embed.call, ElementWidgetActions.Close, callback);
 };
 
 export const useCallMemberSoundSync = (embed: CallEmbed) => {

src/app/plugins/call/CallEmbed.ts

@@ -47,12 +47,36 @@ export class CallEmbed {
 
   private readonly disposables: Array<() => void> = [];
 
-  static getIntent(dm: boolean, ongoing: boolean): ElementCallIntent {
-    if (ongoing) {
-      return dm ? ElementCallIntent.JoinExistingDM : ElementCallIntent.JoinExisting;
+  static getIntent(dm: boolean, ongoing: boolean, video?: boolean): ElementCallIntent {
+    if (dm && ongoing) {
+      return video ? ElementCallIntent.JoinExistingDM : ElementCallIntent.JoinExistingDMVoice;
+    }
+    if (dm) {
+      return video ? ElementCallIntent.StartCallDM : ElementCallIntent.StartCallDMVoice;
     }
 
-    return dm ? ElementCallIntent.StartCallDM : ElementCallIntent.StartCall;
+    if (ongoing) {
+      return video ? ElementCallIntent.JoinExisting : ElementCallIntent.JoinExistingVoice;
+    }
+    return video ? ElementCallIntent.StartCall : ElementCallIntent.StartCallVoice;
+  }
+
+  static dmCall(intent: ElementCallIntent): boolean {
+    return (
+      intent === ElementCallIntent.JoinExistingDM ||
+      intent === ElementCallIntent.JoinExistingDMVoice ||
+      intent === ElementCallIntent.StartCallDM ||
+      intent === ElementCallIntent.StartCallDMVoice
+    );
+  }
+
+  static startingCall(intent: ElementCallIntent): boolean {
+    return (
+      intent === ElementCallIntent.StartCallDM ||
+      intent === ElementCallIntent.StartCallDMVoice ||
+      intent === ElementCallIntent.StartCall ||
+      intent === ElementCallIntent.StartCallVoice
+    );
   }
 
   static getWidget(
@@ -81,8 +105,13 @@ export class CallEmbed {
       perParticipantE2EE: room.hasEncryptionStateEvent().toString(),
       lang: 'en-EN',
       theme: themeKind,
+      header: 'none',
     });
 
+    if (!room.isCallRoom() && CallEmbed.startingCall(intent)) {
+      params.append('sendNotificationType', CallEmbed.dmCall(intent) ? 'ring' : 'notification');
+    }
+
     const widgetUrl = new URL(
       `${trimTrailingSlash(import.meta.env.BASE_URL)}/public/element-call/index.html`,
       window.location.origin

src/app/plugins/call/types.ts

@@ -1,6 +1,8 @@
 export enum ElementCallIntent {
   StartCall = 'start_call',
   JoinExisting = 'join_existing',
+  StartCallVoice = 'start_call_voice',
+  JoinExistingVoice = 'join_existing_voice',
   StartCallDM = 'start_call_dm',
   JoinExistingDM = 'join_existing_dm',
   StartCallDMVoice = 'start_call_dm_voice',

src/app/plugins/call/utils.ts

@@ -78,19 +78,13 @@ export function getCallCapabilities(
     WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomCreate).raw
   );
 
-  capabilities.add(
-    WidgetEventCapability.forRoomEvent(
-      EventDirection.Receive,
-      'org.matrix.msc4075.rtc.notification'
-    ).raw
-  );
-
   [
     'io.element.call.encryption_keys',
     'org.matrix.rageshake_request',
     EventType.Reaction,
     EventType.RoomRedaction,
     'io.element.call.reaction',
+    'org.matrix.msc4075.rtc.notification',
     'org.matrix.msc4310.rtc.decline',
   ].forEach((type) => {
     capabilities.add(WidgetEventCapability.forRoomEvent(EventDirection.Send, type).raw);

src/app/plugins/markdown/block/parser.ts

@@ -1,5 +1,12 @@
 import { replaceMatch } from '../internal';
-import { BlockQuoteRule, CodeBlockRule, ESC_BLOCK_SEQ, HeadingRule, ListRule } from './rules';
+import {
+  BlockQuoteRule,
+  CodeBlockRule,
+  ESC_BLOCK_SEQ,
+  HeadingRule,
+  OrderedListRule,
+  UnorderedListRule,
+} from './rules';
 import { runBlockRule } from './runner';
 import { BlockMDParser } from './type';
 
@@ -16,7 +23,8 @@ export const parseBlockMD: BlockMDParser = (text, parseInline) => {
 
   if (!result) result = runBlockRule(text, CodeBlockRule, parseBlockMD, parseInline);
   if (!result) result = runBlockRule(text, BlockQuoteRule, parseBlockMD, parseInline);
-  if (!result) result = runBlockRule(text, ListRule, parseBlockMD, parseInline);
+  if (!result) result = runBlockRule(text, OrderedListRule, parseBlockMD, parseInline);
+  if (!result) result = runBlockRule(text, UnorderedListRule, parseBlockMD, parseInline);
   if (!result) result = runBlockRule(text, HeadingRule, parseBlockMD, parseInline);
 
   // replace \n with <br/> because want to preserve empty lines

src/app/plugins/markdown/block/rules.ts

@@ -10,22 +10,18 @@ export const HeadingRule: BlockMDRule = {
   },
 };
 
-// opening fence: 3 or more backticks
-// capture the exact fence length in group 1
-// optional info string in group 2
-// code content in group 3
-// closing fence must match the exact same fence sequence via \1
-const CODEBLOCK_REG_1 = /^(`{3,})(?!`)(\S*)\n((?:.*\n)+?)\1 *(?!.)\n?/m;
+const CODEBLOCK_MD_1 = '```';
+const CODEBLOCK_REG_1 = /^`{3}(\S*)\n((?:.*\n)+?)`{3} *(?!.)\n?/m;
 export const CodeBlockRule: BlockMDRule = {
   match: (text) => text.match(CODEBLOCK_REG_1),
   html: (match) => {
-    const [, fence, g1, g2] = match;
+    const [, g1, g2] = match;
     // use last identifier after dot, e.g. for "example.json" gets us "json" as language code.
     const langCode = g1 ? g1.substring(g1.lastIndexOf('.') + 1) : null;
     const filename = g1 !== langCode ? g1 : null;
     const classNameAtt = langCode ? ` class="language-${langCode}"` : '';
     const filenameAtt = filename ? ` data-label="${filename}"` : '';
-    return `<pre data-md="${fence}"><code${classNameAtt}${filenameAtt}>${g2}</code></pre>`;
+    return `<pre data-md="${CODEBLOCK_MD_1}"><code${classNameAtt}${filenameAtt}>${g2}</code></pre>`;
   },
 };
 
@@ -52,146 +48,55 @@ export const BlockQuoteRule: BlockMDRule = {
 };
 
 const ORDERED_LIST_MD_1 = '-';
+const O_LIST_ITEM_PREFIX = /^(-|[\da-zA-Z]\.) */;
+const O_LIST_START = /^([\d])\./;
+const O_LIST_TYPE = /^([aAiI])\./;
+const O_LIST_TRAILING_NEWLINE = /\n$/;
+const ORDERED_LIST_REG_1 = /(^(?:-|[\da-zA-Z]\.) +.+\n?)+/m;
+export const OrderedListRule: BlockMDRule = {
+  match: (text) => text.match(ORDERED_LIST_REG_1),
+  html: (match, parseInline) => {
+    const [listText] = match;
+    const [, listStart] = listText.match(O_LIST_START) ?? [];
+    const [, listType] = listText.match(O_LIST_TYPE) ?? [];
+
+    const lines = listText
+      .replace(O_LIST_TRAILING_NEWLINE, '')
+      .split('\n')
+      .map((lineText) => {
+        const line = lineText.replace(O_LIST_ITEM_PREFIX, '');
+        const txt = parseInline ? parseInline(line) : line;
+        return `<li><p>${txt}</p></li>`;
+      })
+      .join('');
+
+    const dataMdAtt = `data-md="${listType || listStart || ORDERED_LIST_MD_1}"`;
+    const startAtt = listStart ? ` start="${listStart}"` : '';
+    const typeAtt = listType ? ` type="${listType}"` : '';
+    return `<ol ${dataMdAtt}${startAtt}${typeAtt}>${lines}</ol>`;
+  },
+};
+
 const UNORDERED_LIST_MD_1 = '*';
-const LIST_ITEM_REG = /^( *)([-*]|[\da-zA-Z]\.) +(.+)$/;
-type ListType = 'ol' | 'ul';
-
-function getListType(marker: string): ListType {
-  return marker === '*' ? 'ul' : 'ol';
-}
-
-function getOrderedMeta(marker: string) {
-  const startMatch = marker.match(/^(\d)\./);
-  const typeMatch = marker.match(/^([aAiI])\./);
-
-  return {
-    start: startMatch?.[1],
-    type: typeMatch?.[1],
-  };
-}
-
-interface ParsedLine {
-  indent: number;
-  marker: string;
-  content: string;
-  listType: ListType;
-}
-
-function parseLines(text: string): ParsedLine[] {
-  return text
-    .replace(/\n$/, '')
-    .split('\n')
-    .map((line) => {
-      const match = line.match(LIST_ITEM_REG);
-
-      if (!match) return null;
-
-      const [, spaces, marker, content] = match;
-
-      return {
-        indent: spaces.length,
-        marker,
-        content,
-        listType: getListType(marker),
-      };
-    })
-    .filter(Boolean) as ParsedLine[];
-}
-
-function openList(line: ParsedLine) {
-  if (line.listType === 'ul') {
-    return `<ul data-md="${UNORDERED_LIST_MD_1}">`;
-  }
-  const { type, start } = getOrderedMeta(line.marker);
-  const dataMdAtt = `data-md="${type || start || ORDERED_LIST_MD_1}"`;
-  const startAtt = start ? ` start="${start}"` : '';
-  const typeAtt = type ? ` type="${type}"` : '';
-  return `<ol ${dataMdAtt}${startAtt}${typeAtt}>`;
-}
-
-function closeList(listType: ListType) {
-  return listType === 'ul' ? '</ul>' : '</ol>';
-}
-
-function buildList(lines: ParsedLine[], parseInline?: (s: string) => string): string {
-  let html = '';
-
-  const stack: ('ul' | 'ol')[] = [];
-
-  lines.forEach((line, index) => {
-    const prev = lines[index - 1];
-    const next = lines[index + 1];
-
-    const content = parseInline ? parseInline(line.content) : line.content;
-
-    // FIRST ITEM
-    if (!prev) {
-      html += openList(line);
-      stack.push(line.listType);
-    }
-
-    // DEEPER INDENT > open nested list
-    else if (line.indent > prev.indent) {
-      html += openList(line);
-      stack.push(line.listType);
-    }
-
-    // SAME LEVEL
-    else if (line.indent === prev.indent) {
-      html += '</li>';
-
-      // different list type
-      if (line.listType !== prev.listType) {
-        html += closeList(stack.pop()!);
-
-        html += openList(line);
-        stack.push(line.listType);
-      }
-    }
-
-    // GOING BACK UP
-    else if (line.indent < prev.indent) {
-      html += '</li>';
-
-      while (stack.length > line.indent + 1) {
-        html += closeList(stack.pop()!);
-        html += '</li>';
-      }
-
-      if (line.listType !== stack[stack.length - 1]) {
-        html += closeList(stack.pop()!);
-
-        html += openList(line);
-        stack.push(line.listType);
-      }
-    }
-
-    html += `<li><p>${content}</p>`;
-
-    // LAST ITEM cleanup
-    if (!next) {
-      html += '</li>';
-
-      while (stack.length) {
-        html += closeList(stack.pop()!);
-      }
-    }
-  });
-
-  return html;
-}
-
-const LIST_REG_1 = /^(?: *(?:[-*]|[\da-zA-Z]\.) +.+\n?)+/m;
-export const ListRule: BlockMDRule = {
-  match: (text) => text.match(LIST_REG_1),
+const U_LIST_ITEM_PREFIX = /^\* */;
+const U_LIST_TRAILING_NEWLINE = /\n$/;
+const UNORDERED_LIST_REG_1 = /(^\* +.+\n?)+/m;
+export const UnorderedListRule: BlockMDRule = {
+  match: (text) => text.match(UNORDERED_LIST_REG_1),
   html: (match, parseInline) => {
     const [listText] = match;
 
-    const lines = parseLines(listText);
+    const lines = listText
+      .replace(U_LIST_TRAILING_NEWLINE, '')
+      .split('\n')
+      .map((lineText) => {
+        const line = lineText.replace(U_LIST_ITEM_PREFIX, '');
+        const txt = parseInline ? parseInline(line) : line;
+        return `<li><p>${txt}</p></li>`;
+      })
+      .join('');
 
-    const html = buildList(lines, parseInline);
-
-    return html;
+    return `<ul data-md="${UNORDERED_LIST_MD_1}">${lines}</ul>`;
   },
 };
 

src/app/styles/CustomHtml.css.ts

@@ -120,23 +120,12 @@ export const CodeBlockBottomShadow = style({
   background: `linear-gradient(to top, #00000022, #00000000)`,
 });
 
-const BaseList = style({});
 export const List = style([
-  BaseList,
   DefaultReset,
   MarginSpaced,
   {
     padding: `0 ${config.space.S100}`,
     paddingLeft: config.space.S600,
-    selectors: {
-      '& &': {
-        marginTop: config.space.S200,
-        marginBottom: config.space.S200,
-      },
-      'li:last-child &': {
-        marginBottom: 0,
-      },
-    },
   },
 ]);