.forgejo/workflows/main.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Checkout Local Repository
         uses: actions/checkout@v4
         with:
-          fetch-depth: 0
+          fetch-depth: 0 # 전체 커밋 히스토리를 가져와 비교 및 머지가 가능하도록 설정
 
       - name: Configure Git
         run: |
@@ -24,22 +24,23 @@ jobs:
           git remote add upstream https://github.com/cinnyapp/cinny.git
           git fetch upstream dev
 
-      - name: Merge Upstream and Check Changes
+      - name: Check for Changes and Push Branch
         id: check_changes
         run: |
+          if ! git diff --quiet HEAD upstream/dev; then
+            echo "New changes detected in upstream."
+            
             BRANCH_NAME="upstream-sync-$(date +'%Y%m%d%H%M')"
-          git checkout -b $BRANCH_NAME origin/dev
-          
-          git merge upstream/dev --no-edit --allow-unrelated-histories
-          
-          if ! git diff --quiet origin/dev HEAD; then
-            echo "New upstream changes merged successfully."
             echo "branch_name=$BRANCH_NAME" >> $GITHUB_OUTPUT
             echo "has_changes=true" >> $GITHUB_OUTPUT
             
+            git checkout -b $BRANCH_NAME
+            # --allow-unrelated-histories 플래그를 추가하여 독립된 히스토리 간의 병합을 허용
+            git merge upstream/dev --no-edit --allow-unrelated-histories
+            
             git push origin $BRANCH_NAME
           else
-            echo "No new upstream changes to apply. Everything is up to date."
+            echo "No changes detected. Everything is up to date."
             echo "has_changes=false" >> $GITHUB_OUTPUT
           fi
 
@@ -47,7 +48,7 @@ jobs:
         if: ${{ steps.check_changes.outputs.has_changes == 'true' }}
         run: |      
           PR_TITLE="chore(deps): sync upstream changes ($(date +'%Y-%m-%d'))"
-          PR_BODY="Upstream (cinnyapp/cinny)에 새로운 변경사항이 감지되어 내 커스텀 브랜치(dev)에 병합한 후 생성된 PR입니다."
+          PR_BODY="Upstream (cinnyapp/cinny)에 새로운 변경사항이 감지되어 자동으로 생성된 PR입니다."
           HEAD_BRANCH="${{ steps.check_changes.outputs.branch_name }}"
           BASE_BRANCH="dev"
           

.github-disabled/DISCUSSION_TEMPLATE/issue-triage.yml

@@ -57,7 +57,7 @@ body:
       required: true
   - type: textarea
     attributes:
-      label: Environment
+      label: Environement
       description: |
         Please provide information about your environment. Include the following:
         - OS:

.github-disabled/workflows/build-pull-request.yml

@@ -12,9 +12,9 @@ jobs:
       PR_NUMBER: ${{github.event.number}}
     steps:
       - name: Checkout repository
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: Setup node
-        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version-file: ".node-version"
           package-manager-cache: false

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

@@ -39,7 +39,7 @@ jobs:
           path: dist
       - name: Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@d22a32a27c918fe470bbc562e984f80ec48c2668 # v4.0.0
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0.0
         with:
           publish-dir: dist
           deploy-message: "Deploy PR ${{ steps.pr.outputs.id }}"

.github-disabled/workflows/docker-pr.yml

@@ -16,17 +16,17 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@96fe6ef7f33517b61c61be40b68a1882f3264fb8 # v4.2.0
+        uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3.7.0
         
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@bb05f3f5519dd87d3ba754cc423b652a5edd6d2c # v4.2.0
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
 
       - name: Login to Docker Hub #Do not update this action from a outside PR
         if: github.event.pull_request.head.repo.fork == false
-        uses: docker/login-action@dbcb813823bdd20940b903addbd779551569679f # v4.6.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
@@ -34,7 +34,7 @@ jobs:
 
       - name: Login to the Github Container registry #Do not update this action from a outside PR
         if: github.event.pull_request.head.repo.fork == false
-        uses: docker/login-action@dbcb813823bdd20940b903addbd779551569679f # v4.6.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
@@ -43,14 +43,14 @@ jobs:
 
       - name: Extract metadata (tags, labels) for Docker, GHCR
         id: meta
-        uses: docker/metadata-action@dc802804100637a589fabce1cb79ff13a1411302 # v6.2.0
+        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
         with:
           images: |
             ajbura/cinny
             ghcr.io/${{ github.repository }}
 
       - name: Build Docker image (no push)
-        uses: docker/build-push-action@53b7df96c91f9c12dcc8a07bcb9ccacbed38856a # v7.3.0
+        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
         with:
           context: .
           platforms: linux/amd64

.github-disabled/workflows/lockfile.yml

@@ -14,7 +14,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: NPM Lockfile Changes
         uses: codepunkt/npm-lockfile-changes@b40543471c36394409466fdb277a73a0856d7891 # v1.0.0
         with:

.github-disabled/workflows/netlify-dev.yml

@@ -11,9 +11,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: Setup node
-        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
         with:
           node-version-file: ".node-version"
           package-manager-cache: false
@@ -24,7 +24,7 @@ jobs:
           NODE_OPTIONS: '--max_old_space_size=4096'
         run: npm run build
       - name: Deploy to Netlify
-        uses: nwtgck/actions-netlify@d22a32a27c918fe470bbc562e984f80ec48c2668 # v4.0.0
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0.0
         with:
           publish-dir: dist
           deploy-message: 'Dev deploy ${{ github.sha }}'

.github-disabled/workflows/prod-deploy.yml

@@ -1,32 +1,48 @@
 name: Production deploy
 
 on:
-  release:
-    types: [published]
+  workflow_dispatch:
 
 jobs:
   deploy-and-tarball:
     name: Netlify deploy and tarball
+    outputs:
+      version: ${{ steps.vars.outputs.tag }}
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
-      - name: Setup node
-        uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
-          node-version-file: '.node-version'
+          fetch-depth: 0
+      - name: Setup node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".node-version"
           package-manager-cache: false
       - name: Install dependencies
         run: npm ci
+      - name: Run semantic release
+        run: npm run semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GIT_AUTHOR_NAME: ${{ secrets.GIT_AUTHOR_NAME }}
+          GIT_AUTHOR_EMAIL: ${{ secrets.GIT_AUTHOR_EMAIL }}
+          GIT_COMMITTER_NAME: ${{ secrets.GIT_AUTHOR_NAME }}
+          GIT_COMMITTER_EMAIL: ${{ secrets.GIT_AUTHOR_EMAIL }}
+      - name: Get version from tag
+        id: vars
+        run: |
+          TAG=$(git describe --tags --abbrev=0) 
+          echo "tag=$TAG" >> $GITHUB_OUTPUT
       - name: Build app
         env:
           NODE_OPTIONS: '--max_old_space_size=4096'
         run: npm run build
       - name: Deploy to Netlify
-        uses: nwtgck/actions-netlify@d22a32a27c918fe470bbc562e984f80ec48c2668 # v4.0.0
+        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654 # v3.0.0
         with:
           publish-dir: dist
-          deploy-message: 'Prod deploy ${{ github.ref_name }}'
+          deploy-message: 'Prod deploy ${{ steps.vars.outputs.tag }}'
           enable-commit-comment: false
           github-token: ${{ secrets.GITHUB_TOKEN }}
           production-deploy: true
@@ -36,9 +52,6 @@ jobs:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_APP }}
         timeout-minutes: 1
-      - name: Get version from tag
-        id: vars
-        run: echo "tag=${GITHUB_REF#refs/*/}" >> $GITHUB_OUTPUT
       - name: Create tar.gz
         run: tar -czvf cinny-${{ steps.vars.outputs.tag }}.tar.gz dist
       - name: Sign tar.gz
@@ -52,46 +65,54 @@ jobs:
           gpg --export | xxd -p
           echo '${{ secrets.GNUPG_PASSPHRASE }}' | gpg --batch --yes --pinentry-mode loopback --passphrase-fd 0 --armor --detach-sign cinny-${{ steps.vars.outputs.tag }}.tar.gz
       - name: Upload tagged release
-        uses: softprops/action-gh-release@718ea10b132b3b2eba29c1007bb80653f286566b # v3.0.1
+        uses: softprops/action-gh-release@b4309332981a82ec1c5618f44dd2e27cc8bfbfda # v3.0.0
         with:
-          tag_name: ${{ github.ref_name }}
+          tag_name: ${{ steps.vars.outputs.tag }}
           files: |
             cinny-${{ steps.vars.outputs.tag }}.tar.gz
             cinny-${{ steps.vars.outputs.tag }}.tar.gz.asc
 
   publish-image:
     name: Push Docker image to Docker Hub, GHCR
+    needs: deploy-and-tarball
+    env:
+      VERSION: ${{ needs.deploy-and-tarball.outputs.version }}
     runs-on: ubuntu-latest
     permissions:
       contents: read
       packages: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          fetch-depth: 0
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@96fe6ef7f33517b61c61be40b68a1882f3264fb8 # v4.2.0
+        uses: docker/setup-qemu-action@c7c53464625b32c7a7e944ae62b3e17d2b600130 # v3.7.0
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@bb05f3f5519dd87d3ba754cc423b652a5edd6d2c # v4.2.0
+        uses: docker/setup-buildx-action@8d2750c68a42422c14e847fe6c8ac0403b4cbd6f # v3.12.0
       - name: Login to Docker Hub #Do not update this action from a outside PR
-        uses: docker/login-action@dbcb813823bdd20940b903addbd779551569679f # v4.6.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Login to the Github Container registry #Do not update this action from a outside PR
-        uses: docker/login-action@dbcb813823bdd20940b903addbd779551569679f # v4.6.0
+        uses: docker/login-action@4907a6ddec9925e35a0a9e82d7399ccc52663121 # v4.1.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
       - name: Extract metadata (tags, labels) for Docker, GHCR
         id: meta
-        uses: docker/metadata-action@dc802804100637a589fabce1cb79ff13a1411302 # v6.2.0
+        uses: docker/metadata-action@c299e40c65443455700f0fdfc63efafe5b349051 # v5.10.0
         with:
           images: |
             ${{ secrets.DOCKER_USERNAME }}/cinny
             ghcr.io/${{ github.repository }}
+          tags: |
+            type=raw,value=${{ env.VERSION }}
+            type=raw,value=latest
       - name: Build and push Docker image
-        uses: docker/build-push-action@53b7df96c91f9c12dcc8a07bcb9ccacbed38856a # v7.3.0
+        uses: docker/build-push-action@bcafcacb16a39f128d818304e6c9c0c18556b85f # v7.1.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

Dockerfile

@@ -11,7 +11,7 @@ RUN npm run build
 
 
 ## App
-FROM nginx:1.31.4-alpine
+FROM nginx:1.29.8-alpine
 
 COPY --from=builder /src/dist /app
 COPY --from=builder /src/docker-nginx.conf /etc/nginx/conf.d/default.conf

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "4.12.6",
+  "version": "4.12.1",
   "description": "Yet another matrix client",
   "main": "index.js",
   "type": "module",
@@ -18,7 +18,7 @@
     "typecheck": "tsc --noEmit",
     "prepare": "husky install",
     "commit": "git-cz",
-    "bump": "node scripts/update-version.js"
+    "semantic-release": "semantic-release"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx}": "eslint",
@@ -29,6 +29,35 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   },
+  "release": {
+    "branches": [
+      "dev"
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      [
+        "@semantic-release/exec",
+        {
+          "prepareCmd": "node scripts/update-version.js ${nextRelease.version}"
+        }
+      ],
+      [
+        "@semantic-release/git",
+        {
+          "assets": [
+            "package.json",
+            "package-lock.json",
+            "src/app/features/settings/about/About.tsx",
+            "src/app/pages/auth/AuthFooter.tsx",
+            "src/app/pages/client/WelcomePage.tsx"
+          ],
+          "message": "chore(release): ${nextRelease.version} [skip ci]"
+        }
+      ],
+      "@semantic-release/github"
+    ]
+  },
   "keywords": [],
   "author": "Ajay Bura",
   "license": "AGPL-3.0-only",
@@ -56,7 +85,7 @@
     "emojibase-data": "15.3.2",
     "file-saver": "2.0.5",
     "focus-trap-react": "10.0.2",
-    "folds": "2.7.1",
+    "folds": "2.6.2",
     "html-dom-parser": "4.0.0",
     "html-react-parser": "4.2.0",
     "i18next": "23.12.2",
@@ -67,7 +96,7 @@
     "jotai": "2.6.0",
     "linkify-react": "4.3.2",
     "linkifyjs": "4.3.2",
-    "matrix-js-sdk": "41.7.0",
+    "matrix-js-sdk": "38.2.0",
     "matrix-widget-api": "1.16.1",
     "millify": "6.1.0",
     "pdfjs-dist": "4.2.67",
@@ -82,7 +111,7 @@
     "react-i18next": "15.0.0",
     "react-range": "1.8.14",
     "react-router-dom": "6.30.3",
-    "sanitize-html": "2.17.6",
+    "sanitize-html": "2.17.4",
     "slate": "0.123.0",
     "slate-dom": "0.123.0",
     "slate-history": "0.113.1",
@@ -90,10 +119,12 @@
     "ua-parser-js": "1.0.35"
   },
   "devDependencies": {
-    "@element-hq/element-call-embedded": "0.20.1",
+    "@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",
+    "@semantic-release/exec": "7.1.0",
+    "@semantic-release/git": "10.0.1",
     "@types/chroma-js": "3.1.1",
     "@types/file-saver": "2.0.5",
     "@types/is-hotkey": "0.1.10",
@@ -119,6 +150,7 @@
     "husky": "9.1.7",
     "lint-staged": "16.3.2",
     "prettier": "2.8.1",
+    "semantic-release": "25.0.3",
     "typescript": "4.9.4",
     "vite": "5.4.19",
     "vite-plugin-pwa": "0.20.5",

src/app/components/CallEmbedProvider.tsx

@@ -1,6 +1,7 @@
 /* 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,
@@ -92,14 +93,12 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
   const session = useCallSession(room);
   useCallMembersChange(
     session,
-    useCallback(
-      (members) => {
+    useCallback(() => {
+      const members = MatrixRTCSession.sessionMembershipsForRoom(room, session.sessionDescription);
       if (members.length === 0) {
         onIgnore();
       }
-      },
-      [onIgnore]
-    )
+    }, [room, session, onIgnore])
   );
 
   const playSound = useCallback(() => {
@@ -148,13 +147,11 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
                       />
                     </Avatar>
                   </Box>
-                  <Box grow="Yes" direction="Column" gap="100" alignItems="Center">
+                  <Box grow="Yes" direction="Column" gap="100">
                     <Text size="H3" align="Center" truncate>
                       {roomName}
                     </Text>
-                    <Text size="T300" align="Center">
-                      Incoming Call
-                    </Text>
+                    <Text size="T300">Incoming Call</Text>
                   </Box>
                 </Box>
                 {!livekitSupported && (
@@ -239,7 +236,6 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
       // 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 (room?.isCallRoom()) return;
 
       if (event.isEncrypted()) {
         if (!event.isBeingDecrypted()) {
@@ -268,8 +264,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
       const refEventId = relation?.event_id;
 
       const mention =
-        content['m.mentions']?.room ||
-        content['m.mentions']?.user_ids?.includes(mx.getSafeUserId());
+        content['m.mentions'].room || content['m.mentions'].user_ids?.includes(mx.getSafeUserId());
       if (!sender || !refEventId || !mention || Date.now() >= senderTs + lifetime) {
         return;
       }

src/app/components/editor/utils.ts

@@ -241,15 +241,15 @@ export const getPointUntilChar = (
   return targetPoint;
 };
 
-export const getPrevWordRange = (editor: Editor): BaseRange | undefined => {
+export const getPrevWorldRange = (editor: Editor): BaseRange | undefined => {
   const { selection } = editor;
   if (!selection || !Range.isCollapsed(selection)) return undefined;
   const [cursorPoint] = Range.edges(selection);
-  const wordStartPoint = getPointUntilChar(editor, cursorPoint, {
+  const worldStartPoint = getPointUntilChar(editor, cursorPoint, {
     reverse: true,
-    match: (char) => char === ' ' || char === '',
+    match: (char) => char === ' ',
   });
-  return wordStartPoint && Editor.range(editor, wordStartPoint, cursorPoint);
+  return worldStartPoint && Editor.range(editor, worldStartPoint, cursorPoint);
 };
 
 export const isEmptyEditor = (editor: Editor): boolean => {

src/app/components/page/style.css.ts

@@ -111,7 +111,6 @@ export const PageHeroSection = style([
   },
 ]);
 
-
 export const PageContentCenter = style([
   DefaultReset,
   {

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

@@ -12,9 +12,6 @@ type MicrophoneButtonProps = {
   disabled?: boolean;
 };
 function MicrophoneButton({ enabled, onToggle, disabled }: MicrophoneButtonProps) {
-  const [micState, toggleMic] = useAsyncCallback(onToggle);
-  const loading = micState.status === AsyncStatus.Loading;
-  
   return (
     <TooltipProvider
       position="Top"
@@ -31,9 +28,9 @@ function MicrophoneButton({ enabled, onToggle, disabled }: MicrophoneButtonProps
           fill="Soft"
           radii="300"
           size="300"
-          onClick={toggleMic}
+          onClick={() => onToggle()}
           outlined
-          disabled={disabled || loading}
+          disabled={disabled}
         >
           <Icon size="100" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
         </IconButton>
@@ -85,9 +82,6 @@ type VideoButtonProps = {
   disabled?: boolean;
 };
 function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
-  const [videoState, toggleVideo] = useAsyncCallback(onToggle);
-  const loading = videoState.status === AsyncStatus.Loading;
-
   return (
     <TooltipProvider
       position="Top"
@@ -104,9 +98,9 @@ function VideoButton({ enabled, onToggle, disabled }: VideoButtonProps) {
           fill="Soft"
           radii="300"
           size="300"
-          onClick={toggleVideo}
+          onClick={() => onToggle()}
           outlined
-          disabled={disabled || loading}
+          disabled={disabled}
         >
           <Icon
             size="100"
@@ -164,9 +158,6 @@ export function CallControl({
   const { microphone, video, sound, screenshare } = useCallControlState(callEmbed.control);
   const setCallEmbed = useSetAtom(callEmbedAtom);
 
-  const handleMicrophoneToggle = useCallback(() => callEmbed.control.toggleMicrophone(), [callEmbed]);
-  const handleVideoToggle = useCallback(() => callEmbed.control.toggleVideo(), [callEmbed]);
-
   const [hangupState, hangup] = useAsyncCallback(
     useCallback(() => callEmbed.hangup(), [callEmbed])
   );
@@ -186,7 +177,7 @@ export function CallControl({
       <Box alignItems="Inherit" gap="200">
         <MicrophoneButton
           enabled={microphone}
-          onToggle={handleMicrophoneToggle}
+          onToggle={() => callEmbed.control.toggleMicrophone()}
           disabled={!callJoined}
         />
         <SoundButton
@@ -197,7 +188,7 @@ export function CallControl({
         {!compact && <StatusDivider />}
         <VideoButton
           enabled={video}
-          onToggle={handleVideoToggle}
+          onToggle={() => callEmbed.control.toggleVideo()}
           disabled={!callJoined}
         />
         {!compact && (

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

@@ -22,7 +22,7 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
   const { room } = callEmbed;
 
   const callSession = useCallSession(room);
-  const callMembers = useCallMembers(callSession);
+  const callMembers = useCallMembers(room, callSession);
   const screenSize = useScreenSize();
   const callJoined = useCallJoined(callEmbed);
   const speakers = useCallSpeakers(callEmbed);

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

@@ -82,7 +82,7 @@ export function LiveChip({ count, room, members }: LiveChipProps) {
 
                     return (
                       <MenuItem
-                        key={callMember.memberId}
+                        key={callMember.membershipID}
                         size="400"
                         variant="Surface"
                         radii="300"

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

@@ -29,7 +29,7 @@ export function MemberGlance({ room, members, speakers, max = 6 }: MemberGlanceP
   return (
     <Box alignItems="Center">
       {visibleMembers.map((callMember) => {
-        const { userId } = callMember;
+        const userId = callMember.sender;
         if (!userId) return null;
         const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
         const avatarMxc = getMemberAvatarMxc(room, userId);
@@ -39,7 +39,7 @@ export function MemberGlance({ room, members, speakers, max = 6 }: MemberGlanceP
 
         return (
           <StackedAvatar
-            key={callMember.memberId}
+            key={callMember.membershipID}
             className={speakers.has(callMember.sender) ? css.SpeakerAvatarOutline : undefined}
             title={name}
             as="button"

src/app/features/call/CallControls.tsx

@@ -71,9 +71,6 @@ export function CallControls({ callEmbed }: CallControlsProps) {
     setCords(undefined);
   };
 
-  const handleMicrophoneToggle = useCallback(() => callEmbed.control.toggleMicrophone(), [callEmbed]);
-  const handleVideoToggle = useCallback(() => callEmbed.control.toggleVideo(), [callEmbed]);
-
   const [hangupState, hangup] = useAsyncCallback(
     useCallback(() => callEmbed.hangup(), [callEmbed])
   );
@@ -99,13 +96,13 @@ export function CallControls({ callEmbed }: CallControlsProps) {
           <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
             <MicrophoneButton
               enabled={microphone}
-              onToggle={handleMicrophoneToggle}
+              onToggle={() => callEmbed.control.toggleMicrophone()}
             />
             <SoundButton enabled={sound} onToggle={() => callEmbed.control.toggleSound()} />
           </Box>
           {!compact && <ControlDivider />}
           <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
-            <VideoButton enabled={video} onToggle={handleVideoToggle} />
+            <VideoButton enabled={video} onToggle={() => callEmbed.control.toggleVideo()} />
             <ScreenShareButton
               enabled={screenshare}
               onToggle={() => callEmbed.control.toggleScreenshare()}

src/app/features/call/CallMemberCard.tsx

@@ -1,4 +1,4 @@
-import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
+import { CallMembership, SessionMembershipData } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
 import React, { useState } from 'react';
 import { Avatar, Box, Icon, Icons, Text } from 'folds';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
@@ -12,6 +12,12 @@ import { UserAvatar } from '../../components/user-avatar';
 import { getMouseEventCords } from '../../utils/dom';
 import * as css from './styles.css';
 
+interface MemberWithMembershipData {
+  membershipData?: SessionMembershipData & {
+    'm.call.intent': 'video' | 'audio';
+  };
+}
+
 type CallMemberCardProps = {
   member: CallMembership;
 };
@@ -22,7 +28,7 @@ export function CallMemberCard({ member }: CallMemberCardProps) {
 
   const openUserProfile = useOpenUserRoomProfile();
 
-  const { userId } = member;
+  const userId = member.sender;
   if (!userId) return null;
 
   const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
@@ -31,12 +37,13 @@ export function CallMemberCard({ member }: CallMemberCardProps) {
     ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined
     : undefined;
 
-  const audioOnly = member.callIntent === 'audio';
+  const audioOnly =
+    (member as unknown as MemberWithMembershipData).membershipData?.['m.call.intent'] === 'audio';
 
   return (
     <SequenceCard
       as="button"
-      key={member.memberId}
+      key={member.membershipID}
       className={css.CallMemberCard}
       variant="SurfaceVariant"
       radii="500"
@@ -85,7 +92,7 @@ export function CallMemberRenderer({
   return (
     <>
       {truncatedMembers.map((member) => (
-        <CallMemberCard key={member.memberId} member={member} />
+        <CallMemberCard key={member.membershipID} member={member} />
       ))}
       {members.length > max && (
         <SequenceCard