From 5c0097fed57ef9f4c0466844045dcf1b202a5056 Mon Sep 17 00:00:00 2001
From: diced <git@diced.sh>
Date: Thu, 14 May 2026 23:09:01 -0700
Subject: [PATCH] feat: option to turn on automute

---
 eslint.config.mjs                                         | 1 +
 src/components/file/DashboardFileType/index.tsx           | 6 ++++--
 src/components/pages/settings/parts/SettingsDashboard.tsx | 6 ++++++
 src/lib/client/store/settings.ts                          | 2 ++
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 3cdce18c..24fe1cab 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -85,6 +85,7 @@ export default defineConfig(
       'jsx-a11y/no-autofocus': 'off',
       'jsx-a11y/click-events-have-key-events': 'off',
       'jsx-a11y/no-static-element-interactions': 'off',
+      'jsx-a11y/media-has-caption': 'off',
 
       'no-unused-vars': 'off',
       '@typescript-eslint/no-unused-vars': 'off',
diff --git a/src/components/file/DashboardFileType/index.tsx b/src/components/file/DashboardFileType/index.tsx
index 0519c500..319509f9 100644
--- a/src/components/file/DashboardFileType/index.tsx
+++ b/src/components/file/DashboardFileType/index.tsx
@@ -72,6 +72,8 @@ export default function DashboardFileType({
   scrollParent?: HTMLElement | null;
 }) {
   const disableMediaPreview = useSettingsStore((state) => state.settings.disableMediaPreview);
+  const mediaAutoMuted = useSettingsStore((state) => state.settings.mediaAutoMuted);
+
   const { fileUrl, thumbnailUrl, viewUrl } = useFileUrls({ file, token });
   const db = isDbFile(file) ? file : null;
 
@@ -142,7 +144,7 @@ export default function DashboardFileType({
       <video
         width={fullscreen ? undefined : '100%'}
         autoPlay
-        muted
+        muted={mediaAutoMuted}
         controls
         src={fileUrl}
         style={{
@@ -207,7 +209,7 @@ export default function DashboardFileType({
   if (type === 'audio') {
     if (!fileUrl) return <Loader />;
     return show ? (
-      <audio autoPlay muted controls style={{ width: '100%' }} src={fileUrl} />
+      <audio autoPlay muted={mediaAutoMuted} controls style={{ width: '100%' }} src={fileUrl} />
     ) : (
       <Placeholder text={`Click to play audio ${file.name}`} Icon={fileIcon(file.type)} />
     );
diff --git a/src/components/pages/settings/parts/SettingsDashboard.tsx b/src/components/pages/settings/parts/SettingsDashboard.tsx
index d6ec4b5a..a21bf845 100644
--- a/src/components/pages/settings/parts/SettingsDashboard.tsx
+++ b/src/components/pages/settings/parts/SettingsDashboard.tsx
@@ -45,6 +45,12 @@ export default function SettingsDashboard() {
             checked={settings.disableMediaPreview}
             onChange={(event) => update('disableMediaPreview', event.currentTarget.checked)}
           />
+          <Switch
+            label='Mute video and audio previews'
+            description='When enabled, video and audio in the file viewer autoplay muted. Turning this off tries to play sound immediately. Browsers may block unmuted autoplay until you interact with the page.'
+            checked={settings.mediaAutoMuted}
+            onChange={(event) => update('mediaAutoMuted', event.currentTarget.checked)}
+          />
           <Switch
             label='Warn on deletion'
             description='Show a warning when deleting stuff. When this is disabled, files, urls, etc will be deleted with no prior warning! Folders, users, and bulk-transactions are exempt from this rule and will always warn you before deleting anything.'
diff --git a/src/lib/client/store/settings.ts b/src/lib/client/store/settings.ts
index 38b71817..74433cb4 100644
--- a/src/lib/client/store/settings.ts
+++ b/src/lib/client/store/settings.ts
@@ -4,6 +4,7 @@ import { persist } from 'zustand/middleware';
 export type SettingsStore = {
   settings: {
     disableMediaPreview: boolean;
+    mediaAutoMuted: boolean;
     warnDeletion: boolean;
     fileNavButtons: boolean;
     fileViewer: 'default' | 'fullscreen';
@@ -18,6 +19,7 @@ export type SettingsStore = {
 
 const defaultSettings: SettingsStore['settings'] = {
   disableMediaPreview: false,
+  mediaAutoMuted: true,
   warnDeletion: true,
   fileNavButtons: true,
   fileViewer: 'fullscreen',