fix(tauri): deduplicate concurrent media fetches (#1205)

<!-- Please read
https://github.com/SableClient/Sable/blob/dev/CONTRIBUTING.md before
submitting your pull request -->

### Description

<!-- Please include a summary of the change. Please also include
relevant motivation and context. List any dependencies that are required
for this change. -->

Fixes #

#### Type of change

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

### Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings

### AI disclosure:

- [ ] Partially AI assisted (clarify which code was AI assisted and
briefly explain what it does).
- [ ] Fully AI generated (explain what all the generated code does in
moderate detail).
<!-- Write any explanation required here, but do not generate the
explanation using AI!! You must prove you understand what the code in
this PR does. -->

Author: 7w1

src-tauri/src/network/media_protocol.rs

@@ -86,6 +86,7 @@ export const UrlPreviewCard = as<
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const [linkPreviewImageMaxHeight] = useSetting(settingsAtom, 'linkPreviewImageMaxHeight');
+  const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
 
   const [previewStatus, loadPreview] = useAsyncCallback(
     useCallback(() => {
@@ -281,7 +282,7 @@ export const UrlPreviewCard = as<
               }}
               mediaLayout="contained"
               fillsPreviewSlot
-              autoPlay
+              autoPlay={mediaAutoLoad}
               onAuxClick={handleAuxClick}
               body={prev['og:title']}
               url={prev['og:image']}

src/app/components/url-preview/UrlPreviewCard.tsx

@@ -1,3 +1,3 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
 
-export type DesktopRuntimeState = { trayAvailable: boolean };
+export type DesktopRuntimeState = { trayAvailable: boolean, };

src/app/generated/tauri/desktop/DesktopRuntimeState.ts

@@ -1,3 +1,3 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
 
-export type DesktopSettings = { closeToBackgroundOnClose: boolean; showSystemTrayIcon: boolean };
+export type DesktopSettings = { closeToBackgroundOnClose: boolean, showSystemTrayIcon: boolean, };

src/app/generated/tauri/desktop/DesktopSettings.ts

@@ -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/pages/client/ClientRoot.tsx

@@ -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.test.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/matrix.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.test.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/mediaTransport.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);
+  });
+});