fix(media): catch autoplay rejections from play()

Notification sounds called `audio.play()` without handling the promise,
so every message that arrived before the user interacted with the page
(e.g. right after launch) logged an uncaught NotAllowedError — 15 in a
short test run. Same pattern in the video thumbnail loader, the voice
preview (which now also resets its Play button) and useMediaPlay.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA

src/app/components/VoiceMessageRecorder.tsx

@@ -383,7 +383,7 @@ export function VoiceMessageRecorder({ onSend, onError }: VoiceRecorderProps) {
                 audio.pause();
                 setPreviewPlaying(false);
               } else {
-                audio.play();
+                audio.play().catch(() => setPreviewPlaying(false));
                 setPreviewPlaying(true);
               }
             }}

src/app/hooks/media/useMediaPlay.ts

@@ -17,7 +17,7 @@ export const useMediaPlay = (
     (play: boolean) => {
       const targetEl = getTargetElement();
       if (!targetEl) return;
-      if (play) targetEl.play();
+      if (play) targetEl.play().catch(() => undefined);
       else targetEl.pause();
     },
     [getTargetElement],

src/app/hooks/useTauriToastActions.ts

@@ -5,6 +5,9 @@ import { Icons } from 'folds';
 import { useMatrixClient } from './useMatrixClient';
 import { useTauriEvent } from './useTauri';
 import { createErrorToast, toastQueueAtom } from '../state/toast';
+import { useSetting } from '../state/hooks/settings';
+import { settingsAtom } from '../state/settings';
+import { markAsRead } from '../utils/notifications';
 
 /** Payload of the `lotus-notification-activate` event (a plain body click). */
 interface ActivateDetail {
@@ -19,6 +22,11 @@ interface ReplyDetail {
   text?: string;
 }
 
+/** Payload of the `lotus-notification-mark-read` event (the Mark as read button). */
+interface MarkReadDetail {
+  roomId?: string;
+}
+
 /**
  * P5-41 / P5-35 — wire the native WinRT toast's click + quick-reply back into the
  * client. The Rust side (`show_rich_toast`) dispatches DOM CustomEvents via
@@ -27,12 +35,15 @@ interface ReplyDetail {
  *    the same `useNavigate(path)` mechanism the web `notificationclick` path uses
  *    (see ClientNonUIFeatures).
  *  - `lotus-notification-reply` → send the typed reply straight to the room.
+ *  - `lotus-notification-mark-read` → mark the room read, the same path as the
+ *    room menu's "Mark as Read" (cinny-desktop #9).
  * No-op outside Tauri (the events never fire).
  */
 export function useTauriToastActions(): void {
   const navigate = useNavigate();
   const mx = useMatrixClient();
   const setToast = useSetAtom(toastQueueAtom);
+  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
 
   useTauriEvent<ActivateDetail>('lotus-notification-activate', ({ path }) => {
     if (path) navigate(path);
@@ -55,4 +66,8 @@ export function useTauriToastActions(): void {
       );
     });
   });
+
+  useTauriEvent<MarkReadDetail>('lotus-notification-mark-read', ({ roomId }) => {
+    if (roomId) markAsRead(mx, roomId, hideActivity).catch(() => undefined);
+  });
 }

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -259,7 +259,9 @@ function InviteNotifications() {
 
   const playSound = useCallback(() => {
     const audioElement = audioRef.current;
-    audioElement?.play();
+    // Rejects under the autoplay policy until the user has interacted with the
+    // page (e.g. messages arriving right after launch); nothing to do then.
+    audioElement?.play().catch(() => undefined);
   }, []);
 
   // Arm once the client's initial sync has settled (+ a short grace so the async
@@ -572,7 +574,9 @@ function MessageNotifications() {
 
   const playSound = useCallback(() => {
     const audioElement = audioRef.current;
-    audioElement?.play();
+    // Rejects under the autoplay policy until the user has interacted with the
+    // page (e.g. messages arriving right after launch); nothing to do then.
+    audioElement?.play().catch(() => undefined);
   }, []);
 
   // Shared delivery tail for both the main timeline and per-thread paths:

src/app/utils/dom.ts

@@ -134,7 +134,9 @@ export const loadVideoElement = (url: string): Promise<HTMLVideoElement> =>
 
     video.src = url;
     video.load();
-    video.play();
+    // Only nudges the decoder toward the first frame; `onloadeddata` settles
+    // the promise, so an autoplay refusal here is harmless.
+    video.play().catch(() => undefined);
   });
 
 export const getThumbnailDimensions = (width: number, height: number): [number, number] => {