Revert "fix: set m.fully_read marker when marking rooms as read" (#2629)

Revert "Set m.fully_read marker when marking rooms as read (#2587)"

This reverts commit 9d49418a1f.

package-lock.json

@@ -56,7 +56,7 @@
         "react-google-recaptcha": "2.1.0",
         "react-i18next": "15.0.0",
         "react-range": "1.8.14",
-        "react-router-dom": "6.20.0",
+        "react-router-dom": "6.30.3",
         "sanitize-html": "2.12.1",
         "slate": "0.112.0",
         "slate-dom": "0.112.2",
@@ -3699,9 +3699,10 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.13.0.tgz",
-      "integrity": "sha512-5dMOnVnefRsl4uRnAdoWjtVTdh8e6aZqgM4puy9nmEADH72ck+uXwzpJLEKE9Q6F8ZljNewLgmTfkxUrBdv4WA==",
+      "version": "1.23.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz",
+      "integrity": "sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w==",
+      "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -9605,11 +9606,12 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.20.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.20.0.tgz",
-      "integrity": "sha512-pVvzsSsgUxxtuNfTHC4IxjATs10UaAtvLGVSA1tbUE4GDaOSU1Esu2xF5nWLz7KPiMuW8BJWuPFdlGYJ7/rW0w==",
+      "version": "6.30.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.3.tgz",
+      "integrity": "sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==",
+      "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.13.0"
+        "@remix-run/router": "1.23.2"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -9619,12 +9621,13 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.20.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.20.0.tgz",
-      "integrity": "sha512-CbcKjEyiSVpA6UtCHOIYLUYn/UJfwzp55va4yEfpk7JBN3GPqWfHrdLkAvNCcpXr8QoihcDMuk0dzWZxtlB/mQ==",
+      "version": "6.30.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.3.tgz",
+      "integrity": "sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag==",
+      "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.13.0",
-        "react-router": "6.20.0"
+        "@remix-run/router": "1.23.2",
+        "react-router": "6.30.3"
       },
       "engines": {
         "node": ">=14.0.0"

package.json

@@ -67,7 +67,7 @@
     "react-google-recaptcha": "2.1.0",
     "react-i18next": "15.0.0",
     "react-range": "1.8.14",
-    "react-router-dom": "6.20.0",
+    "react-router-dom": "6.30.3",
     "sanitize-html": "2.12.1",
     "slate": "0.112.0",
     "slate-dom": "0.112.2",

src/app/pages/Router.tsx

@@ -68,6 +68,7 @@ import { Create } from './client/create';
 import { CreateSpaceModalRenderer } from '../features/create-space';
 import { SearchModalRenderer } from '../features/search';
 import { getFallbackSession } from '../state/sessions';
+import { pushSessionToSW } from '../../sw-session';
 
 export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {
   const { hashRouter } = clientConfig;
@@ -106,7 +107,8 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
 
       <Route
         loader={() => {
-          if (!getFallbackSession()) {
+          const session = getFallbackSession();
+          if (!session) {
             const afterLoginPath = getAppPathFromHref(
               getOriginBaseUrl(hashRouter),
               window.location.href
@@ -114,6 +116,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
             if (afterLoginPath) setAfterLoginRedirectPath(afterLoginPath);
             return redirect(getLoginPath());
           }
+          pushSessionToSW(session.baseUrl, session.accessToken);
           return null;
         }}
         element={

src/client/initMatrix.ts

@@ -2,6 +2,7 @@ import { createClient, MatrixClient, IndexedDBStore, IndexedDBCryptoStore } from
 
 import { cryptoCallbacks } from './secretStorageKeys';
 import { clearNavToActivePathStore } from '../app/state/navToActivePath';
+import { pushSessionToSW } from '../sw-session';
 
 type Session = {
   baseUrl: string;
@@ -53,6 +54,7 @@ export const clearCacheAndReload = async (mx: MatrixClient) => {
 };
 
 export const logoutClient = async (mx: MatrixClient) => {
+  pushSessionToSW();
   mx.stopClient();
   try {
     await mx.logout();

src/index.tsx

@@ -15,6 +15,8 @@ import App from './app/pages/App';
 
 // import i18n (needs to be bundled ;))
 import './app/i18n';
+import { pushSessionToSW } from './sw-session';
+import { getFallbackSession } from './app/state/sessions';
 
 document.body.classList.add(configClass, varsClass);
 
@@ -25,16 +27,9 @@ if ('serviceWorker' in navigator) {
       ? `${trimTrailingSlash(import.meta.env.BASE_URL)}/sw.js`
       : `/dev-sw.js?dev-sw`;
 
-  navigator.serviceWorker.register(swUrl);
-  navigator.serviceWorker.addEventListener('message', (event) => {
-    if (event.data?.type === 'token' && event.data?.responseKey) {
-      // Get the token for SW.
-      const token = localStorage.getItem('cinny_access_token') ?? undefined;
-      event.source!.postMessage({
-        responseKey: event.data.responseKey,
-        token,
-      });
-    }
+  navigator.serviceWorker.register(swUrl).then(() => {
+    const session = getFallbackSession();
+    pushSessionToSW(session?.baseUrl, session?.accessToken);
   });
 }
 

src/sw-session.ts

@@ -0,0 +1,10 @@
+export function pushSessionToSW(baseUrl?: string, accessToken?: string) {
+  if (!('serviceWorker' in navigator)) return;
+  if (!navigator.serviceWorker.controller) return;
+
+  navigator.serviceWorker.controller.postMessage({
+    type: 'setSession',
+    accessToken,
+    baseUrl,
+  });
+}

src/sw.ts

@@ -3,22 +3,64 @@
 export type {};
 declare const self: ServiceWorkerGlobalScope;
 
-async function askForAccessToken(client: Client): Promise<string | undefined> {
-  return new Promise((resolve) => {
-    const responseKey = Math.random().toString(36);
-    const listener = (event: ExtendableMessageEvent) => {
-      if (event.data.responseKey !== responseKey) return;
-      resolve(event.data.token);
-      self.removeEventListener('message', listener);
-    };
-    self.addEventListener('message', listener);
-    client.postMessage({ responseKey, type: 'token' });
+self.addEventListener('install', () => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event: ExtendableEvent) => {
+  event.waitUntil(self.clients.claim());
+});
+
+type SessionInfo = {
+  accessToken: string;
+  baseUrl: string;
+};
+
+/**
+ * Store session per client (tab)
+ */
+const sessions = new Map<string, SessionInfo>();
+
+async function cleanupDeadClients() {
+  const activeClients = await self.clients.matchAll();
+  const activeIds = new Set(activeClients.map((c) => c.id));
+
+  Array.from(sessions.keys()).forEach((id) => {
+    if (!activeIds.has(id)) {
+      sessions.delete(id);
+    }
   });
 }
 
-function fetchConfig(token?: string): RequestInit | undefined {
-  if (!token) return undefined;
+/**
+ * Receive session updates from clients
+ */
+self.addEventListener('message', (event: ExtendableMessageEvent) => {
+  const client = event.source as Client | null;
+  if (!client) return;
 
+  const { type, accessToken, baseUrl } = event.data || {};
+
+  if (type !== 'setSession') return;
+
+  cleanupDeadClients();
+
+  if (typeof accessToken === 'string' && typeof baseUrl === 'string') {
+    sessions.set(client.id, { accessToken, baseUrl });
+  } else {
+    // Logout or invalid session
+    sessions.delete(client.id);
+  }
+});
+
+function validMediaRequest(url: string, baseUrl: string): boolean {
+  const downloadUrl = new URL('/_matrix/client/v1/media/download', baseUrl);
+  const thumbnailUrl = new URL('/_matrix/client/v1/media/thumbnail', baseUrl);
+
+  return url.startsWith(downloadUrl.href) || url.startsWith(thumbnailUrl.href);
+}
+
+function fetchConfig(token: string): RequestInit {
   return {
     headers: {
       Authorization: `Bearer ${token}`,
@@ -27,26 +69,16 @@ function fetchConfig(token?: string): RequestInit | undefined {
   };
 }
 
-self.addEventListener('activate', (event: ExtendableEvent) => {
-  event.waitUntil(clients.claim());
-});
-
 self.addEventListener('fetch', (event: FetchEvent) => {
   const { url, method } = event.request;
-  if (method !== 'GET') return;
-  if (
-    !url.includes('/_matrix/client/v1/media/download') &&
-    !url.includes('/_matrix/client/v1/media/thumbnail')
-  ) {
-    return;
-  }
-  event.respondWith(
-    (async (): Promise<Response> => {
-      const client = await self.clients.get(event.clientId);
-      let token: string | undefined;
-      if (client) token = await askForAccessToken(client);
 
-      return fetch(url, fetchConfig(token));
-    })()
-  );
+  if (method !== 'GET') return;
+  if (!event.clientId) return;
+
+  const session = sessions.get(event.clientId);
+  if (!session) return;
+
+  if (!validMediaRequest(url, session.baseUrl)) return;
+
+  event.respondWith(fetch(url, fetchConfig(session.accessToken)));
 });