39 changed files with 9818 additions and 4582 deletions
--- a/.forgejo/workflows/main.yml
+++ b/.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: |
-          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."
+          if ! git diff --quiet HEAD upstream/dev; then
+            echo "New changes detected in upstream."
+            
+            BRANCH_NAME="upstream-sync-$(date +'%Y%m%d%H%M')"
            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"
          
--- a/.github-disabled/DISCUSSION_TEMPLATE/issue-triage.yml
+++ b/.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:
--- a/.github-disabled/workflows/build-pull-request.yml
+++ b/.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
--- a/.github-disabled/workflows/deploy-pull-request.yml
+++ b/.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 }}"
--- a/.github-disabled/workflows/docker-pr.yml
+++ b/.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
--- a/.github-disabled/workflows/lockfile.yml
+++ b/.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:
--- a/.github-disabled/workflows/netlify-dev.yml
+++ b/.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 }}'
--- a/.github-disabled/workflows/prod-deploy.yml
+++ b/.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,49 +65,57 @@ 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
          push: true
          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
+          labels: ${{ steps.meta.outputs.labels }}
--- a/2
+++ b/2
@ -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
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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",
--- a/src/app/components/CallEmbedProvider.tsx
+++ b/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) => {
-        if (members.length === 0) {
-          onIgnore();
-        }
-      },
-      [onIgnore]
-    )
+    useCallback(() => {
+      const members = MatrixRTCSession.sessionMembershipsForRoom(room, session.sessionDescription);
+      if (members.length === 0) {
+        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;
      }
--- a/src/app/components/editor/utils.ts
+++ b/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 => {
--- a/src/app/components/page/style.css.ts
+++ b/src/app/components/page/style.css.ts
@ -111,7 +111,6 @@ export const PageHeroSection = style([
  },
 ]);

-
 export const PageContentCenter = style([
  DefaultReset,
  {
--- a/src/app/features/call-status/CallControl.tsx
+++ b/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 && (
--- a/src/app/features/call-status/CallStatus.tsx
+++ b/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);
--- a/src/app/features/call-status/LiveChip.tsx
+++ b/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"
--- a/src/app/features/call-status/MemberGlance.tsx
+++ b/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"
--- a/src/app/features/call/CallControls.tsx
+++ b/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()}
--- a/src/app/features/call/CallMemberCard.tsx
+++ b/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
--- a/src/app/features/call/CallView.tsx
+++ b/src/app/features/call/CallView.tsx
@ -90,7 +90,7 @@ function CallPrescreen() {
  );

  const callSession = useCallSession(room);
-  const callMembers = useCallMembers(callSession);
+  const callMembers = useCallMembers(room, callSession);
  const hasParticipant = callMembers.length > 0;

  const callEmbed = useCallEmbed();
--- a/src/app/features/call/Controls.tsx
+++ b/src/app/features/call/Controls.tsx
@ -3,7 +3,6 @@ import { Icon, IconButton, Icons, Line, Text, Tooltip, TooltipProvider } from 'f
 import { useAtom } from 'jotai';
 import * as css from './styles.css';
 import { callChatAtom } from '../../state/callEmbed';
-import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';

 export function ControlDivider() {
  return (
@ -13,12 +12,9 @@ export function ControlDivider() {

 type MicrophoneButtonProps = {
  enabled: boolean;
-  onToggle: () => Promise<unknown>;
+  onToggle: () => void;
 };
 export function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
-  const [micState, toggleMic] = useAsyncCallback(onToggle);
-  const loading = micState.status === AsyncStatus.Loading;
-  
  return (
    <TooltipProvider
      position="Top"
@ -36,9 +32,8 @@ export function MicrophoneButton({ enabled, onToggle }: MicrophoneButtonProps) {
          fill="Soft"
          radii="400"
          size="400"
-          onClick={toggleMic}
+          onClick={() => onToggle()}
          outlined
-          disabled={loading}
        >
          <Icon size="400" src={enabled ? Icons.Mic : Icons.MicMute} filled={!enabled} />
        </IconButton>
@ -85,12 +80,9 @@ export function SoundButton({ enabled, onToggle }: SoundButtonProps) {

 type VideoButtonProps = {
  enabled: boolean;
-  onToggle: () => Promise<unknown>;
+  onToggle: () => void;
 };
 export function VideoButton({ enabled, onToggle }: VideoButtonProps) {
-  const [videoState, toggleVideo] = useAsyncCallback(onToggle);
-  const loading = videoState.status === AsyncStatus.Loading;
-
  return (
    <TooltipProvider
      position="Top"
@ -108,9 +100,8 @@ export function VideoButton({ enabled, onToggle }: VideoButtonProps) {
          fill="Soft"
          radii="400"
          size="400"
-          onClick={toggleVideo}
+          onClick={() => onToggle()}
          outlined
-          disabled={loading}
        >
          <Icon
            size="400"
--- a/src/app/features/call/PrescreenControls.tsx
+++ b/src/app/features/call/PrescreenControls.tsx
@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { Box, Button, Icon, Icons, Spinner, Text } from 'folds';
 import { SequenceCard } from '../../components/sequence-card';
 import * as css from './styles.css';
@ -26,10 +26,6 @@ export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
  const { microphone, video, sound, toggleMicrophone, toggleVideo, toggleSound } =
    useCallPreferences();

-
-  const handleMicrophoneToggle = useCallback(async () => toggleMicrophone(), [toggleMicrophone]);
-  const handleVideoToggle = useCallback(async () => toggleVideo(), [toggleVideo]);
-
  return (
    <SequenceCard
      className={css.ControlCard}
@ -41,12 +37,12 @@ export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
      wrap="Wrap"
    >
      <Box shrink="No" alignItems="Inherit" justifyContent="SpaceBetween" gap="200">
-        <MicrophoneButton enabled={microphone} onToggle={handleMicrophoneToggle} />
+        <MicrophoneButton enabled={microphone} onToggle={toggleMicrophone} />
        <SoundButton enabled={sound} onToggle={toggleSound} />
      </Box>
      <ControlDivider />
      <Box shrink="No" alignItems="Inherit" justifyContent="SpaceBetween" gap="200">
-        <VideoButton enabled={video} onToggle={handleVideoToggle} />
+        <VideoButton enabled={video} onToggle={toggleVideo} />
        <ChatButton />
      </Box>
      <Box grow="Yes" direction="Column">
--- a/src/app/features/lobby/LobbyHero.css.tsx
+++ b/src/app/features/lobby/LobbyHero.css.tsx
@ -6,7 +6,6 @@ export const LobbyHeroTopic = style({
  WebkitLineClamp: 3,
  WebkitBoxOrient: 'vertical',
  overflow: 'hidden',
-  wordBreak: 'break-word',

  ':hover': {
    cursor: 'pointer',
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@ -282,7 +282,7 @@ export function RoomNavItem({

  const optionsVisible = hover || !!menuAnchor;
  const callSession = useCallSession(room);
-  const callMembers = useCallMembers(callSession);
+  const callMembers = useCallMembers(room, callSession);
  const startCall = useCallStart(direct);
  const callEmbed = useCallEmbed();
  const callPref = useAtomValue(useCallPreferencesAtom());
--- a/src/app/features/room/Room.tsx
+++ b/src/app/features/room/Room.tsx
@ -27,7 +27,7 @@ export function Room() {
  const mx = useMatrixClient();

  const callSession = useCallSession(room);
-  const callMembers = useCallMembers(callSession);
+  const callMembers = useCallMembers(room, callSession);
  const callEmbed = useCallEmbed();

  const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@ -39,7 +39,7 @@ import {
  AutocompletePrefix,
  AutocompleteQuery,
  getAutocompleteQuery,
-  getPrevWordRange,
+  getPrevWorldRange,
  resetEditor,
  RoomMentionAutocomplete,
  UserMentionAutocomplete,
@ -411,7 +411,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
          sendTypingStatus(!isEmptyEditor(editor));
        }

-        const prevWordRange = getPrevWordRange(editor);
+        const prevWordRange = getPrevWorldRange(editor);
        const query = prevWordRange
          ? getAutocompleteQuery<AutocompletePrefix>(editor, prevWordRange, AUTOCOMPLETE_PREFIXES)
          : undefined;
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@ -27,6 +27,7 @@ import { HTMLReactParserOptions } from 'html-react-parser';
 import classNames from 'classnames';
 import { ReactEditor } from 'slate-react';
 import { Editor } from 'slate';
+import { SessionMembershipData } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
 import to from 'await-to-js';
 import { useAtomValue, useSetAtom } from 'jotai';
 import {
@ -1474,7 +1475,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
        const senderId = mEvent.getSender() ?? '';
        const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);

-        const content = mEvent.getContent();
+        const content = mEvent.getContent<SessionMembershipData>();
        const prevContent = mEvent.getPrevContent();

        const callJoined = content.application;
--- a/src/app/features/room/message/MessageEditor.tsx
+++ b/src/app/features/room/message/MessageEditor.tsx
@ -35,7 +35,7 @@ import {
  createEmoticonElement,
  customHtmlEqualsPlainText,
  getAutocompleteQuery,
-  getPrevWordRange,
+  getPrevWorldRange,
  htmlToEditorInput,
  moveCursor,
  plainToEditorInput,
@ -187,7 +187,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
          return;
        }

-        const prevWordRange = getPrevWordRange(editor);
+        const prevWordRange = getPrevWorldRange(editor);
        const query = prevWordRange
          ? getAutocompleteQuery<AutocompletePrefix>(editor, prevWordRange, AUTOCOMPLETE_PREFIXES)
          : undefined;
--- a/src/app/features/settings/about/About.tsx
+++ b/src/app/features/settings/about/About.tsx
@ -46,7 +46,7 @@ export function About({ requestClose }: AboutProps) {
                  <Box direction="Column" gap="100">
                    <Box gap="100" alignItems="End">
                      <Text size="H3">Cinny</Text>
-                      <Text size="T200">v4.12.6</Text>
+                      <Text size="T200">v4.12.1</Text>
                    </Box>
                    <Text>Yet another matrix client.</Text>
                  </Box>
--- a/src/app/hooks/useAccountManagement.ts
+++ b/src/app/hooks/useAccountManagement.ts
@ -4,9 +4,9 @@ export const useAccountManagementActions = () => {
  const actions = useMemo(
    () => ({
      profile: 'org.matrix.profile',
-      sessionsList: 'org.matrix.devices_list',
-      sessionView: 'org.matrix.device_view',
-      sessionEnd: 'org.matrix.device_delete',
+      sessionsList: 'org.matrix.sessions_list',
+      sessionView: 'org.matrix.session_view',
+      sessionEnd: 'org.matrix.session_end',
      accountDeactivate: 'org.matrix.account_deactivate',
      crossSigningReset: 'org.matrix.cross_signing_reset',
    }),
--- a/src/app/hooks/useCall.ts
+++ b/src/app/hooks/useCall.ts
@ -2,7 +2,6 @@ import { Room } from 'matrix-js-sdk';
 import {
  MatrixRTCSession,
  MatrixRTCSessionEvent,
-  MatrixRTCSessionEventHandlerMap,
 } from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
 import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
 import { useEffect, useState } from 'react';
@ -34,27 +33,32 @@ export const useCallSession = (room: Room): MatrixRTCSession => {
  return session;
 };

-export const useCallMembersChange = (
-  session: MatrixRTCSession,
-  callback: (members: CallMembership[]) => void
-): void => {
+export const useCallMembers = (room: Room, session: MatrixRTCSession): CallMembership[] => {
+  const [memberships, setMemberships] = useState<CallMembership[]>(
+    MatrixRTCSession.sessionMembershipsForRoom(room, session.sessionDescription)
+  );
+
  useEffect(() => {
-    const handleMembershipsChange: MatrixRTCSessionEventHandlerMap[MatrixRTCSessionEvent.MembershipsChanged] =
-      (oldestMembership, newMemberships) => {
-        callback(newMemberships);
-      };
-
-    session.on(MatrixRTCSessionEvent.MembershipsChanged, handleMembershipsChange);
-    return () => {
-      session.removeListener(MatrixRTCSessionEvent.MembershipsChanged, handleMembershipsChange);
+    const updateMemberships = () => {
+      setMemberships(MatrixRTCSession.sessionMembershipsForRoom(room, session.sessionDescription));
    };
-  }, [session, callback]);
-};

-export const useCallMembers = (session: MatrixRTCSession): CallMembership[] => {
-  const [memberships, setMemberships] = useState<CallMembership[]>(session.memberships);
+    updateMemberships();

-  useCallMembersChange(session, setMemberships);
+    session.on(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
+    return () => {
+      session.removeListener(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
+    };
+  }, [session, room]);

  return memberships;
 };
+
+export const useCallMembersChange = (session: MatrixRTCSession, callback: () => void): void => {
+  useEffect(() => {
+    session.on(MatrixRTCSessionEvent.MembershipsChanged, callback);
+    return () => {
+      session.removeListener(MatrixRTCSessionEvent.MembershipsChanged, callback);
+    };
+  }, [session, callback]);
+};
--- a/src/app/hooks/useCallEmbed.ts
+++ b/src/app/hooks/useCallEmbed.ts
@ -1,4 +1,5 @@
 import { createContext, RefObject, useCallback, useContext, useEffect, useState } from 'react';
+import { MatrixRTCSession } from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
 import { MatrixClient, Room } from 'matrix-js-sdk';
 import { useSetAtom } from 'jotai';
 import {
@ -44,7 +45,8 @@ export const createCallEmbed = (
  pref?: CallPreferences
 ): CallEmbed => {
  const rtcSession = mx.matrixRTC.getRoomSession(room);
-  const ongoing = rtcSession.memberships.length > 0;
+  const ongoing =
+    MatrixRTCSession.sessionMembershipsForRoom(room, rtcSession.sessionDescription).length > 0;

  const intent = CallEmbed.getIntent(dm, ongoing, pref?.video);
  const widget = CallEmbed.getWidget(mx, room, intent, themeKind);
--- a/src/app/hooks/useCallSpeakers.ts
+++ b/src/app/hooks/useCallSpeakers.ts
@ -8,7 +8,7 @@ import { useCallJoined } from './useCallEmbed';
 export const useCallSpeakers = (callEmbed: CallEmbed): Set<string> => {
  const [speakers, setSpeakers] = useState(new Set<string>());
  const callSession = useCallSession(callEmbed.room);
-  const callMembers = useCallMembers(callSession);
+  const callMembers = useCallMembers(callEmbed.room, callSession);
  const joined = useCallJoined(callEmbed);

  const videoContainers = useMemo(() => {
--- a/src/app/pages/auth/AuthFooter.tsx
+++ b/src/app/pages/auth/AuthFooter.tsx
@ -15,7 +15,7 @@ export function AuthFooter() {
        target="_blank"
        rel="noreferrer"
      >
-        v4.12.6
+        v4.12.1
      </Text>
      <Text as="a" size="T300" href="https://twitter.com/cinnyapp" target="_blank" rel="noreferrer">
        Twitter
--- a/src/app/pages/client/WelcomePage.tsx
+++ b/src/app/pages/client/WelcomePage.tsx
@ -24,7 +24,7 @@ export function WelcomePage() {
                  target="_blank"
                  rel="noreferrer noopener"
                >
-                  v4.12.6
+                  v4.12.1
                </a>
              </span>
            }
--- a/src/app/plugins/call/CallControl.ts
+++ b/src/app/plugins/call/CallControl.ts
@ -14,12 +14,8 @@ export class CallControl extends EventEmitter implements CallControlState {

  private iframe: HTMLIFrameElement;

-  private bodyMutationObserver: MutationObserver;
-
  private controlMutationObserver: MutationObserver;

-  private mediaStatePromiseResolver: undefined | (() => void);
-
  private get document(): Document | undefined {
    return this.iframe.contentDocument ?? this.iframe.contentWindow?.document;
  }
@ -32,25 +28,16 @@ export class CallControl extends EventEmitter implements CallControlState {
    return screenshareBtn ?? undefined;
  }

-  private get leaveButton(): Element | undefined {
+  private get settingsButton(): HTMLElement | undefined {
    const leaveBtn = this.document?.querySelector('[data-testid="incall_leave"]');

-    return leaveBtn ?? undefined;
-  }
+    const settingsButton = leaveBtn?.previousElementSibling as HTMLElement | null;

-  private get settingsButton(): HTMLElement | undefined {
-    const settingsButtonLeft = this.document?.querySelector(
-      '[data-testid="settings-bottom-left"]'
-    ) as HTMLButtonElement | undefined;
-    const settingsButtonCenter = this.document?.querySelector(
-      '[data-testid="settings-bottom-center"]'
-    ) as HTMLButtonElement | undefined;
-
-    return settingsButtonLeft ?? settingsButtonCenter ?? undefined;
+    return settingsButton ?? undefined;
  }

  private get reactionsButton(): HTMLElement | undefined {
-    const reactionsButton = this.leaveButton?.previousElementSibling as HTMLElement | null;
+    const reactionsButton = this.settingsButton?.previousElementSibling as HTMLElement | null;

    return reactionsButton ?? undefined;
  }
@ -78,7 +65,6 @@ export class CallControl extends EventEmitter implements CallControlState {
    this.call = call;
    this.iframe = iframe;

-    this.bodyMutationObserver = new MutationObserver(this.onBodyMutation.bind(this));
    this.controlMutationObserver = new MutationObserver(this.onControlMutation.bind(this));
  }

@ -116,30 +102,6 @@ export class CallControl extends EventEmitter implements CallControlState {
  }

  public startObserving() {
-    if (!this.document) return;
-
-    this.bodyMutationObserver.observe(this.document.body, {
-      childList: true,
-      subtree: false, // only direct children of body
-    });
-    this.onBodyMutation();
-  }
-  
-  private onBodyMutation() {
-    if (!this.document) return;
-
-    this.document.body.style.setProperty('background', 'none', 'important');
-
-    const controls = this.leaveButton?.parentElement?.parentElement;
-    if (controls) {
-      controls.style.setProperty('position', 'absolute');
-      controls.style.setProperty('visibility', 'hidden');
-    }
-
-    this.observeControls();
-  }
-
-  private observeControls() {
    this.controlMutationObserver.disconnect();

    const screenshareBtn = this.screenshareButton;
@ -163,14 +125,8 @@ export class CallControl extends EventEmitter implements CallControlState {
    this.setSound(this.sound);
  }

-  private async setMediaState(state: ElementMediaStatePayload) {
-    const data = await this.call.transport.send(ElementWidgetActions.DeviceMute, state);
-    return new Promise<typeof data>(resolve => {
-      if (this.mediaStatePromiseResolver) {
-        this.mediaStatePromiseResolver();
-      }
-      this.mediaStatePromiseResolver = () => resolve(data);
-    });
+  private setMediaState(state: ElementMediaStatePayload) {
+    return this.call.transport.send(ElementWidgetActions.DeviceMute, state);
  }

  private setSound(sound: boolean): void {
@ -201,14 +157,9 @@ export class CallControl extends EventEmitter implements CallControlState {
    if (this.microphone && !this.sound) {
      this.toggleSound();
    }
-
-    if (this.mediaStatePromiseResolver) {
-      this.mediaStatePromiseResolver();
-      this.mediaStatePromiseResolver = undefined;
-    }
  }

-  private onControlMutation() {
+  public onControlMutation() {
    const screenshare: boolean = this.screenshareButton?.getAttribute('data-kind') === 'primary';
    const spotlight: boolean = this.spotlightButton?.checked ?? false;

@ -279,7 +230,6 @@ export class CallControl extends EventEmitter implements CallControlState {
  }

  public dispose() {
-    this.bodyMutationObserver.disconnect();
    this.controlMutationObserver.disconnect();
  }

--- a/src/app/plugins/call/CallEmbed.ts
+++ b/src/app/plugins/call/CallEmbed.ts
@ -172,10 +172,6 @@ export class CallEmbed {

    const controlState = initialControlState ?? new CallControlState(true, false, true);
    this.control = new CallControl(controlState, call, iframe);
-    this.control.startObserving();
-    iframe.onload = () => {
-      this.control.startObserving();
-    };

    let initialMediaEvent = true;
    this.disposables.push(
@ -276,6 +272,21 @@ export class CallEmbed {

  private onCallJoined(): void {
    this.joined = true;
+    this.applyStyles();
+    this.control.startObserving();
+  }
+
+  private applyStyles(): void {
+    const doc = this.document;
+    if (!doc) return;
+
+    doc.body.style.setProperty('background', 'none', 'important');
+    const controls = doc.body.querySelector('[data-testid="incall_leave"]')?.parentElement
+      ?.parentElement;
+    if (controls) {
+      controls.style.setProperty('position', 'absolute');
+      controls.style.setProperty('visibility', 'hidden');
+    }
  }

  private onEvent(ev: MatrixEvent): void {
--- a/src/app/plugins/call/CallWidgetDriver.ts
+++ b/src/app/plugins/call/CallWidgetDriver.ts
@ -8,6 +8,7 @@ import {
  type IWidgetApiErrorResponseDataDetails,
  type ISearchUserDirectoryResult,
  type IGetMediaConfigResult,
+  type UpdateDelayedEventAction,
  OpenIDRequestState,
  SimpleObservable,
  IOpenIDUpdate,
@ -52,11 +53,14 @@ export class CallWidgetDriver extends WidgetDriver {
    stateKey: string | null = null,
    targetRoomId: string | null = null
  ): Promise<ISendEventDetails> {
+    const client = this.mx;
    const roomId = targetRoomId || this.inRoomId;

+    if (!client || !roomId) throw new Error('Not in a room or not attached to a client');
+
    let r: { event_id: string } | null;
    if (typeof stateKey === 'string') {
-      r = await this.mx.sendStateEvent(
+      r = await client.sendStateEvent(
        roomId,
        eventType as keyof StateEvents,
        content as StateEvents[keyof StateEvents],
@ -64,9 +68,9 @@ export class CallWidgetDriver extends WidgetDriver {
      );
    } else if (eventType === EventType.RoomRedaction) {
      // special case: extract the `redacts` property and call redact
-      r = await this.mx.redactEvent(roomId, content.redacts);
+      r = await client.redactEvent(roomId, content.redacts);
    } else {
-      r = await this.mx.sendEvent(
+      r = await client.sendEvent(
        roomId,
        eventType as keyof TimelineEvents,
        content as TimelineEvents[keyof TimelineEvents]
@ -84,8 +88,11 @@ export class CallWidgetDriver extends WidgetDriver {
    stateKey: string | null = null,
    targetRoomId: string | null = null
  ): Promise<ISendDelayedEventDetails> {
+    const client = this.mx;
    const roomId = targetRoomId || this.inRoomId;

+    if (!client || !roomId) throw new Error('Not in a room or not attached to a client');
+
    let delayOpts;
    if (delay !== null) {
      delayOpts = {
@ -103,7 +110,7 @@ export class CallWidgetDriver extends WidgetDriver {
    let r: SendDelayedEventResponse | null;
    if (stateKey !== null) {
      // state event
-      r = await this.mx._unstable_sendDelayedStateEvent(
+      r = await client._unstable_sendDelayedStateEvent(
        roomId,
        delayOpts,
        eventType as keyof StateEvents,
@ -112,7 +119,7 @@ export class CallWidgetDriver extends WidgetDriver {
      );
    } else {
      // message event
-      r = await this.mx._unstable_sendDelayedEvent(
+      r = await client._unstable_sendDelayedEvent(
        roomId,
        delayOpts,
        null,
@ -127,16 +134,15 @@ export class CallWidgetDriver extends WidgetDriver {
    };
  }

-  public async cancelScheduledDelayedEvent(delayId: string): Promise<void> {
-    await this.mx._unstable_cancelScheduledDelayedEvent(delayId);
-  }
+  public async updateDelayedEvent(
+    delayId: string,
+    action: UpdateDelayedEventAction
+  ): Promise<void> {
+    const client = this.mx;

-  public async restartScheduledDelayedEvent(delayId: string): Promise<void> {
-    await this.mx._unstable_restartScheduledDelayedEvent(delayId);
-  }
+    if (!client) throw new Error('Not in a room or not attached to a client');

-  public async sendScheduledDelayedEvent(delayId: string): Promise<void> {
-    await this.mx._unstable_sendScheduledDelayedEvent(delayId);
+    await client._unstable_updateDelayedEvent(delayId, action);
  }

  public async sendToDevice(
@ -144,8 +150,10 @@ export class CallWidgetDriver extends WidgetDriver {
    encrypted: boolean,
    contentMap: { [userId: string]: { [deviceId: string]: object } }
  ): Promise<void> {
+    const client = this.mx;
+
    if (encrypted) {
-      const crypto = this.mx.getCrypto();
+      const crypto = client.getCrypto();
      if (!crypto) throw new Error('E2EE not enabled');

      // attempt to re-batch these up into a single request
@ -171,11 +179,11 @@ export class CallWidgetDriver extends WidgetDriver {
            JSON.parse(stringifiedContent)
          );

-          await this.mx.queueToDevice(batch);
+          await client.queueToDevice(batch);
        })
      );
    } else {
-      await this.mx.queueToDevice({
+      await client.queueToDevice({
        eventType,
        batch: Object.entries(contentMap).flatMap(([userId, userContentMap]) =>
          Object.entries(userContentMap).map(([deviceId, content]) => ({
@ -255,6 +263,7 @@ export class CallWidgetDriver extends WidgetDriver {
    limit?: number,
    direction?: 'f' | 'b'
  ): Promise<IReadEventRelationsResult> {
+    const client = this.mx;
    const dir = direction as Direction;
    const targetRoomId = roomId ?? this.inRoomId ?? undefined;

@ -262,7 +271,7 @@ export class CallWidgetDriver extends WidgetDriver {
      throw new Error('Error while reading the current room');
    }

-    const { events, nextBatch, prevBatch } = await this.mx.relations(
+    const { events, nextBatch, prevBatch } = await client.relations(
      targetRoomId,
      eventId,
      relationType ?? null,
@ -281,7 +290,9 @@ export class CallWidgetDriver extends WidgetDriver {
    searchTerm: string,
    limit?: number
  ): Promise<ISearchUserDirectoryResult> {
-    const { limited, results } = await this.mx.searchUserDirectory({ term: searchTerm, limit });
+    const client = this.mx;
+
+    const { limited, results } = await client.searchUserDirectory({ term: searchTerm, limit });

    return {
      limited,
@ -294,11 +305,15 @@ export class CallWidgetDriver extends WidgetDriver {
  }

  public async getMediaConfig(): Promise<IGetMediaConfigResult> {
-    return this.mx.getMediaConfig();
+    const client = this.mx;
+
+    return client.getMediaConfig();
  }

  public async uploadFile(file: XMLHttpRequestBodyInit): Promise<{ contentUri: string }> {
-    const uploadResult = await this.mx.uploadContent(file);
+    const client = this.mx;
+
+    const uploadResult = await client.uploadContent(file);

    return { contentUri: uploadResult.content_uri };
  }