feat: add new preference to unmute videos by default (#3218)

components/status/StatusAttachment.vue

@@ -71,6 +71,7 @@ const isVideo = computed(() => attachment.type === 'video')
 const isGif = computed(() => attachment.type === 'gifv')
 
 const enableAutoplay = usePreferences('enableAutoplay')
+const unmuteVideos = usePreferences('unmuteVideos')
 
 useIntersectionObserver(video, (entries) => {
   const ready = video.value?.dataset.ready === 'true'
@@ -132,7 +133,7 @@ watch(shouldLoadAttachment, () => {
           ref="video"
           preload="none"
           :poster="videoThumbnail"
-          muted
+          :muted="!unmuteVideos"
           loop
           playsinline
           :controls="shouldLoadAttachment"
@@ -172,7 +173,7 @@ watch(shouldLoadAttachment, () => {
           ref="video"
           preload="none"
           :poster="videoThumbnail"
-          muted
+          :muted="!unmuteVideos"
           loop
           playsinline
           rounded-lg

composables/settings/definition.ts

@@ -23,6 +23,7 @@ export interface PreferencesSettings {
   hideNews: boolean
   grayscaleMode: boolean
   enableAutoplay: boolean
+  unmuteVideos: boolean
   optimizeForLowPerformanceDevice: boolean
   enableDataSaving: boolean
   enablePinchToZoom: boolean
@@ -79,6 +80,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
   hideNews: false,
   grayscaleMode: false,
   enableAutoplay: true,
+  unmuteVideos: false,
   optimizeForLowPerformanceDevice: false,
   enableDataSaving: false,
   enablePinchToZoom: false,

locales/en.json

@@ -561,6 +561,7 @@
       "label": "Preferences",
       "optimize_for_low_performance_device": "Optimize for low performance device",
       "title": "Experimental Features",
+      "unmute_videos": "Unmute videos by default",
       "use_star_favorite_icon": "Use star favorite icon",
       "user_picker": "User Picker",
       "user_picker_description": "Displays all avatars of logged accounts in the bottom-left so you can switch quickly between them.",

pages/settings/preferences/index.vue

@@ -51,6 +51,12 @@ const userSettings = useUserSettings()
       >
         {{ $t('settings.preferences.enable_autoplay') }}
       </SettingsToggleItem>
+      <SettingsToggleItem
+        :checked="getPreferences(userSettings, 'unmuteVideos')"
+        @click="togglePreferences('unmuteVideos')"
+      >
+        {{ $t('settings.preferences.unmute_videos') }}
+      </SettingsToggleItem>
       <SettingsToggleItem
         :checked="getPreferences(userSettings, 'optimizeForLowPerformanceDevice')"
         @click="togglePreferences('optimizeForLowPerformanceDevice')"