Bring in sable-call!

.gitignore

@@ -18,3 +18,4 @@ devAssets
 *.tfbackend
 !*.tfbackend.example
 crash.log
+build.sh

knip.json

@@ -5,7 +5,7 @@
     "interface": true,
     "type": true
   },
-  "ignoreDependencies": ["buffer", "@element-hq/element-call-embedded", "workbox-precaching"],
+  "ignoreDependencies": ["buffer", "@sableclient/sable-call-embedded", "workbox-precaching"],
   "ignoreBinaries": ["knope"],
   "rules": {
     "exports": "off",

package.json

@@ -87,7 +87,7 @@
   },
   "devDependencies": {
     "@cloudflare/vite-plugin": "^1.26.0",
-    "@element-hq/element-call-embedded": "0.16.3",
+    "@sableclient/sable-call-embedded": "1.0.2",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@eslint/compat": "2.0.2",
     "@eslint/js": "9.39.3",

src/app/plugins/call/utils.ts

@@ -18,6 +18,8 @@ export function getCallCapabilities(
   capabilities.add(MatrixCapabilities.MSC3846TurnServers);
   capabilities.add(MatrixCapabilities.MSC4157SendDelayedEvent);
   capabilities.add(MatrixCapabilities.MSC4157UpdateDelayedEvent);
+  capabilities.add('moe.sable.thumbnails');
+  capabilities.add('moe.sable.media_proxy');
   capabilities.add(`org.matrix.msc2762.timeline:${roomId}`);
   capabilities.add(`org.matrix.msc2762.state:${roomId}`);
 

src/sw.ts

@@ -269,6 +269,20 @@
     return;
   }
 
+  // Since widgets like element call have their own client ids,
+  // we need this logic. We just go through the sessions list and get a session
+  // with the right base url. Media requests to a homeserver simply are fine with any account
+  // on the homeserver authenticating it, so this is fine. But it can be technically wrong.
+  // If you have two tabs for different users on the same homeserver, it might authenticate
+  // as the wrong one.
+  // Thus any logic in the future which cares about which user is authenticating the request
+  // might break this. Also, again, it is technically wrong.
+  const byBaseUrl = [...sessions.values()].find((s) => validMediaRequest(url, s.baseUrl));
+  if (byBaseUrl) {
+    event.respondWith(fetch(url, { ...fetchConfig(byBaseUrl.accessToken), redirect }));
+    return;
+  }
+
   event.respondWith(
     requestSessionWithTimeout(clientId).then((s) => {
       if (s && validMediaRequest(url, s.baseUrl)) {
@@ -296,20 +310,20 @@
   // because iOS Safari PWA often returns empty or stale results from matchAll().
   const hasVisibleClient =
     appIsVisible || clients.some((client) => client.visibilityState === 'visible');
   console.debug(
     '[SW push] appIsVisible:',
     appIsVisible,
     '| clients:',
     clients.map((c) => ({ url: c.url, visibility: c.visibilityState }))
   );
   console.debug('[SW push] hasVisibleClient:', hasVisibleClient);
   if (hasVisibleClient) {
     console.debug('[SW push] suppressing OS notification — app is visible');
     return;
   }
 
   const pushData = event.data.json();
   console.debug('[SW push] raw payload:', JSON.stringify(pushData, null, 2));
 
   try {
     if (typeof pushData?.unread === 'number') {
@@ -349,8 +363,8 @@
   const pushEventId: string | undefined = data?.event_id ?? undefined;
   const isInvite = data?.content?.membership === 'invite';
 
   console.debug('[SW notificationclick] notification data:', JSON.stringify(data, null, 2));
   console.debug('[SW notificationclick] resolved fields:', {
     pushUserId,
     pushRoomId,
     pushEventId,
@@ -382,7 +396,7 @@
     targetUrl = new URL('inbox/notifications/', scope).href;
   }
 
   console.debug('[SW notificationclick] targetUrl:', targetUrl);
 
   event.waitUntil(
     (async () => {

vite.config.ts

@@ -62,7 +62,7 @@ const isReleaseTag = (() => {
 const copyFiles = {
   targets: [
     {
-      src: 'node_modules/@element-hq/element-call-embedded/dist/*',
+      src: 'node_modules/@sableclient/sable-call-embedded/dist/*',
       dest: 'public/element-call',
     },
     {