fix(media): recover authenticated video sessions

Author: eleboucher

.changeset/improve-authenticated-media-loading.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Improve authenticated media loading across web and Tauri, especially for videos on slow or unstable connections.

src/app/pages/client/ClientRoot.tsx

@@ -272,7 +272,7 @@ export function ClientRoot({ children }: ClientRootProps) {
       log.log('initClient for', activeSession.userId);
       const newMx = await initClient(activeSession);
       loadedUserIdRef.current = activeSession.userId;
-      pushSessionToSW(activeSession.baseUrl, activeSession.accessToken);
+      await pushSessionToSW(activeSession.baseUrl, activeSession.accessToken);
       return newMx;
     }, [activeSession, activeSessionId, setActiveSessionId])
   );
@@ -311,7 +311,7 @@ export function ClientRoot({ children }: ClientRootProps) {
         activeSession.userId,
         '— reloading client'
       );
-      pushSessionToSW(activeSession.baseUrl, activeSession.accessToken);
+      void pushSessionToSW(activeSession.baseUrl, activeSession.accessToken);
       if (mx?.clientRunning) {
         stopClient(mx);
       }

src/app/utils/matrix.test.ts

@@ -1,4 +1,5 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
+import type { MatrixClient } from '$types/matrix-sdk';
 
 const tauriApi = vi.hoisted(() => ({
   isTauri: vi.fn<() => boolean>(),
@@ -15,7 +16,7 @@ const mediaTransport = vi.hoisted(() => ({
 vi.mock('@tauri-apps/api/core', () => tauriApi);
 vi.mock('./mediaTransport', () => mediaTransport);
 
-const { rewriteAuthenticatedMediaUrl } = await import('./matrix');
+const { mxcUrlToHttp, rewriteAuthenticatedMediaUrl } = await import('./matrix');
 
 describe('rewriteAuthenticatedMediaUrl', () => {
   beforeEach(() => {
@@ -59,6 +60,36 @@ describe('rewriteAuthenticatedMediaUrl', () => {
     );
   });
 
+  it.each([
+    '/_matrix/media/v3/download/example.org/abc123',
+    '/_matrix/media/v3/thumbnail/example.org/abc123?width=96&height=96&method=crop',
+    '/_matrix/media/r0/download/example.org/abc123',
+    '/_matrix/media/r0/thumbnail/example.org/abc123?width=96&height=96&method=crop',
+  ])('rewrites legacy media paths under Tauri: %s', (path) => {
+    tauriApi.isTauri.mockReturnValue(true);
+    const url = `https://matrix.example.org${path}`;
+    const separator = url.includes('?') ? '&' : '?';
+    expect(rewriteAuthenticatedMediaUrl(url)).toBe(
+      `sable-media://${url}${separator}__sable_media_cache=2&__sable_media_session=%40user%3Aexample.com`
+    );
+  });
+
+  it('does not rewrite unrelated Matrix media URLs', () => {
+    tauriApi.isTauri.mockReturnValue(true);
+    const url = 'https://matrix.example.org/_matrix/media/v3/config';
+    expect(rewriteAuthenticatedMediaUrl(url)).toBe(url);
+    expect(tauriApi.convertFileSrc).not.toHaveBeenCalled();
+  });
+
+  it.each([
+    'https://example.org/avatar.png?next=/_matrix/media/v3/download/example.org/abc123',
+    'https://example.org/avatar.png#/_matrix/media/r0/thumbnail/example.org/abc123',
+  ])('does not rewrite a media path only present in query or hash: %s', (url) => {
+    tauriApi.isTauri.mockReturnValue(true);
+    expect(rewriteAuthenticatedMediaUrl(url)).toBe(url);
+    expect(tauriApi.convertFileSrc).not.toHaveBeenCalled();
+  });
+
   it('passes through already-rewritten sable-media:// URLs', () => {
     tauriApi.isTauri.mockReturnValue(true);
     const url =
@@ -69,3 +100,17 @@ describe('rewriteAuthenticatedMediaUrl', () => {
     expect(tauriApi.convertFileSrc).not.toHaveBeenCalled();
   });
 });
+
+describe('mxcUrlToHttp', () => {
+  it('rewrites SDK legacy media URLs under Tauri without useAuthentication', () => {
+    tauriApi.isTauri.mockReturnValue(true);
+    const legacyUrl = 'https://matrix.example.org/_matrix/media/v3/download/example.org/video';
+    const mx = {
+      mxcUrlToHttp: vi.fn<() => string>(() => legacyUrl),
+    } as unknown as MatrixClient;
+
+    expect(mxcUrlToHttp(mx, 'mxc://example.org/video', false)).toBe(
+      `sable-media://${legacyUrl}?__sable_media_cache=2&__sable_media_session=%40user%3Aexample.com`
+    );
+  });
+});

src/app/utils/matrix.ts

@@ -36,6 +36,13 @@ import {
 
 const DOMAIN_REGEX = /\b(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}\b/;
 const TAURI_MEDIA_CACHE_VERSION = '__sable_media_cache=2';
+const TAURI_MEDIA_PATH_PREFIXES = [
+  '/_matrix/client/v1/media/',
+  '/_matrix/media/v3/download/',
+  '/_matrix/media/v3/thumbnail/',
+  '/_matrix/media/r0/download/',
+  '/_matrix/media/r0/thumbnail/',
+];
 
 export const isServerName = (serverName: string): boolean => DOMAIN_REGEX.test(serverName);
 
@@ -478,7 +485,22 @@ export const removeRoomIdFromMDirect = async (mx: MatrixClient, roomId: string):
 export const rewriteAuthenticatedMediaUrl = (httpUrl: string | null): string | null => {
   if (!httpUrl) return null;
   if (!isTauri()) return httpUrl;
-  if (!httpUrl.includes('/_matrix/client/v1/media/')) return httpUrl;
+  const sourceUrl = httpUrl.startsWith('sable-media://')
+    ? httpUrl.slice('sable-media://'.length)
+    : httpUrl;
+  let parsedUrl: URL;
+  try {
+    parsedUrl = new URL(sourceUrl);
+  } catch {
+    return httpUrl;
+  }
+  if (
+    (parsedUrl.protocol !== 'http:' && parsedUrl.protocol !== 'https:') ||
+    parsedUrl.origin === 'null' ||
+    !TAURI_MEDIA_PATH_PREFIXES.some((path) => parsedUrl.pathname.startsWith(path))
+  ) {
+    return httpUrl;
+  }
   if (httpUrl.includes(TAURI_MEDIA_CACHE_VERSION)) return httpUrl;
   const mediaUrl = httpUrl.startsWith('sable-media://')
     ? httpUrl
@@ -508,9 +530,7 @@ export const mxcUrlToHttp = (
     useAuthentication
   );
 
-  // Authenticated media has no service worker under Tauri to attach the token, so route it
-  // through the native sable-media:// protocol which injects the token in Rust.
-  if (httpUrl && useAuthentication) {
+  if (httpUrl && isTauri()) {
     return rewriteAuthenticatedMediaUrl(httpUrl);
   }
   return httpUrl;

src/app/utils/mediaTransport.test.ts

@@ -356,7 +356,7 @@ describe('fetchMediaBlob', () => {
     expect(headersSeen).toEqual([null]);
   });
 
-  it('retries once on the service worker path without direct auth headers', async () => {
+  it('fetches once on the service worker path when it returns an auth error', async () => {
     platform.hasControllingServiceWorker.mockReturnValue(true);
     const { fetchMediaBlob } = await import('./mediaTransport');
     const url = 'https://example.org/auth-media.png';
@@ -365,17 +365,13 @@ describe('fetchMediaBlob', () => {
     vi.mocked(fetch).mockImplementation(async (_input, init) => {
       const headers = new Headers(init?.headers);
       headersSeen.push(headers.get('authorization'));
-      if (headersSeen.length === 1) {
-        return new Response('denied', { status: 403 });
-      }
-      return new Response('ok', { status: 200 });
+      return new Response('denied', { status: 403 });
     });
 
-    const blob = await fetchMediaBlob(url);
+    await expect(fetchMediaBlob(url)).rejects.toThrow('Failed to fetch media: 403');
 
-    expect(await blob.text()).toBe('ok');
-    expect(headersSeen).toEqual([null, null]);
-    expect(fetch).toHaveBeenCalledTimes(2);
+    expect(headersSeen).toEqual([null]);
+    expect(fetch).toHaveBeenCalledTimes(1);
   });
 
   it('bypasses the service worker path when explicit auth overrides are provided', async () => {

src/app/utils/mediaTransport.ts

@@ -296,10 +296,6 @@ async function fetchMediaBlobInternal(url: string, options?: MediaTransportOptio
   };
 
   if (useServiceWorker) {
-    const response = await fetchMediaResponse(url, undefined, cacheMode);
-    if (response.ok || !isRetryableAuthError(response)) {
-      return fetchAndCache(response);
-    }
     return fetchAndCache(await fetchMediaResponse(url, undefined, cacheMode));
   }
 

src/app/utils/tauriMediaAuth.test.ts

@@ -0,0 +1,85 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const tauriApi = vi.hoisted(() => ({
+  isTauri: vi.fn<() => boolean>(),
+}));
+const commands = vi.hoisted(() => ({
+  clearMediaSession: vi.fn<() => Promise<void>>(),
+  setMediaSession:
+    vi.fn<({ baseUrl, token }: { baseUrl: string; token: string }) => Promise<void>>(),
+}));
+const mediaTransport = vi.hoisted(() => ({
+  getActiveMediaSession: vi.fn<() => { baseUrl: string; accessToken: string } | undefined>(),
+}));
+
+vi.mock('@tauri-apps/api/core', () => tauriApi);
+vi.mock('$generated/tauri/commands', () => commands);
+vi.mock('./mediaTransport', () => mediaTransport);
+
+const { initTauriMediaSession, updateTauriMediaSession } = await import('./tauriMediaAuth');
+
+describe('Tauri media session coordinator', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    tauriApi.isTauri.mockReturnValue(true);
+    commands.clearMediaSession.mockResolvedValue();
+    commands.setMediaSession.mockResolvedValue();
+  });
+
+  it('serializes writes and applies the last requested state', async () => {
+    let resolveFirst: (() => void) | undefined;
+    commands.setMediaSession
+      .mockImplementationOnce(
+        () =>
+          new Promise<void>((resolve) => {
+            resolveFirst = resolve;
+          })
+      )
+      .mockResolvedValueOnce();
+
+    const first = updateTauriMediaSession('https://one.example', 'one');
+    const second = updateTauriMediaSession('https://two.example', 'two');
+    const clear = updateTauriMediaSession();
+
+    await Promise.resolve();
+    expect(commands.setMediaSession).toHaveBeenCalledTimes(1);
+    resolveFirst?.();
+    await Promise.all([first, second, clear]);
+
+    expect(commands.setMediaSession).toHaveBeenNthCalledWith(1, {
+      baseUrl: 'https://one.example',
+      token: 'one',
+    });
+    expect(commands.setMediaSession).toHaveBeenNthCalledWith(2, {
+      baseUrl: 'https://two.example',
+      token: 'two',
+    });
+    expect(commands.clearMediaSession).toHaveBeenCalledTimes(1);
+  });
+
+  it('waits for the initial active session write', async () => {
+    let resolveWrite: (() => void) | undefined;
+    mediaTransport.getActiveMediaSession.mockReturnValue({
+      baseUrl: 'https://matrix.example',
+      accessToken: 'token',
+    });
+    commands.setMediaSession.mockImplementation(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveWrite = resolve;
+        })
+    );
+
+    const ready = initTauriMediaSession();
+    let complete = false;
+    void ready.then(() => {
+      complete = true;
+    });
+    await Promise.resolve();
+    expect(complete).toBe(false);
+
+    resolveWrite?.();
+    await ready;
+    expect(complete).toBe(true);
+  });
+});

src/app/utils/tauriMediaAuth.ts

@@ -0,0 +1,26 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import type { Session } from '$state/sessions';
+import { ACTIVE_SESSION_KEY, MATRIX_SESSIONS_KEY } from '$state/sessions';
+import { ownsActiveMediaSession } from './initMatrix';
+
+const alice = { userId: '@alice:example.org' } as Session;
+const bob = { userId: '@bob:example.org' } as Session;
+
+describe('ownsActiveMediaSession', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    localStorage.setItem(MATRIX_SESSIONS_KEY, JSON.stringify([alice, bob]));
+  });
+
+  it('keeps Alice media session while logging out secondary Bob', () => {
+    localStorage.setItem(ACTIVE_SESSION_KEY, JSON.stringify(alice.userId));
+
+    expect(ownsActiveMediaSession(bob)).toBe(false);
+  });
+
+  it('clears the active account media session', () => {
+    localStorage.setItem(ACTIVE_SESSION_KEY, JSON.stringify(alice.userId));
+
+    expect(ownsActiveMediaSession(alice)).toBe(true);
+  });
+});

src/client/initMatrix.test.ts

@@ -16,8 +16,14 @@ import { fetch } from '$utils/fetch';
 import { clearMediaCache } from '$utils/mediaCache';
 
 import { clearNavToActivePathStore } from '$state/navToActivePath';
-import type { Session, SessionStoreName } from '$state/sessions';
-import { getSessionStoreName, getStoredSessionRefreshToken } from '$state/sessions';
+import type { Session, Sessions, SessionStoreName } from '$state/sessions';
+import {
+  ACTIVE_SESSION_KEY,
+  getSessionStoreName,
+  getStoredSessionRefreshToken,
+  MATRIX_SESSIONS_KEY,
+} from '$state/sessions';
+import { getLocalStorageItem } from '$state/utils/atomWithLocalStorage';
 import { createLogger } from '$utils/debug';
 import { createDebugLogger } from '$utils/debugLogger';
 import * as Sentry from '@sentry/react';
@@ -43,6 +49,14 @@ const debugLog = createDebugLogger('initMatrix');
 const slidingSyncByClient = new WeakMap<MatrixClient, SlidingSyncManager>();
 const membershipActionCleanupByClient = new WeakMap<MatrixClient, () => void>();
 const presenceSyncByClient = new WeakMap<MatrixClient, PresenceSyncManager>();
+
+export const ownsActiveMediaSession = (session?: Session): boolean => {
+  if (!session) return true;
+  const sessions = getLocalStorageItem<Sessions>(MATRIX_SESSIONS_KEY, []);
+  const activeSessionId = getLocalStorageItem<string | undefined>(ACTIVE_SESSION_KEY, undefined);
+  const activeSession = sessions.find((item) => item.userId === activeSessionId) ?? sessions[0];
+  return activeSession?.userId === session.userId;
+};
 const presenceStartCleanupByClient = new WeakMap<MatrixClient, () => void>();
 const SLIDING_SYNC_POLL_TIMEOUT_MS = 45000;
 
@@ -584,7 +598,6 @@ export const logoutClient = async (mx: MatrixClient, session?: Session) => {
     sessionUserId: session?.userId,
   });
   debugLog.info('general', 'Logging out client', { userId: mx.getUserId() });
-  pushSessionToSW();
   stopClient(mx);
   try {
     if (session?.oidc) {
@@ -611,7 +624,14 @@ export const logoutClient = async (mx: MatrixClient, session?: Session) => {
     window.localStorage.clear();
   }
 
-  await clearMediaCache();
+  try {
+    await clearMediaCache();
+  } finally {
+    if (ownsActiveMediaSession(session)) {
+      // Queue the final clear after any in-flight refresh.
+      await pushSessionToSW();
+    }
+  }
 };
 
 export const clearLoginData = async () => {