feat: added autoplay setting (#1303)

closes https://github.com/elk-zone/elk/issues/1235

components/status/StatusAttachment.vue

@@ -65,9 +65,11 @@ const video = ref<HTMLVideoElement | undefined>()
 const prefersReducedMotion = usePreferredReducedMotion()
 const isAudio = $computed(() => attachment.type === 'audio')
 
+const enableAutoplay = usePreferences('enableAutoplay')
+
 useIntersectionObserver(video, (entries) => {
   const ready = video.value?.dataset.ready === 'true'
-  if (prefersReducedMotion.value === 'reduce') {
+  if (prefersReducedMotion.value === 'reduce' || !enableAutoplay.value) {
     if (ready && !video.value?.paused)
       video.value?.pause()
 

composables/settings/definition.ts

@@ -8,6 +8,7 @@ export interface PreferencesSettings {
   hideFavoriteCount: boolean
   hideFollowerCount: boolean
   grayscaleMode: boolean
+  enableAutoplay: boolean
   experimentalVirtualScroller: boolean
   experimentalGitHubCards: boolean
   experimentalUserPicker: boolean
@@ -58,6 +59,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
   hideFavoriteCount: false,
   hideFollowerCount: false,
   grayscaleMode: false,
+  enableAutoplay: true,
   experimentalVirtualScroller: true,
   experimentalGitHubCards: true,
   experimentalUserPicker: true,

locales/de-DE.json

@@ -330,6 +330,7 @@
     },
     "notifications_settings": "Benachrichtigungen",
     "preferences": {
+      "enable_autoplay": "Autoplay aktivieren",
       "github_cards": "GitHub Cards",
       "hide_boost_count": "Boost-Zähler ausblenden",
       "hide_favorite_count": "Favoritenzahl ausblenden",

locales/en-US.json

@@ -366,6 +366,7 @@
     },
     "notifications_settings": "Notifications",
     "preferences": {
+      "enable_autoplay": "Enable Autoplay",
       "github_cards": "GitHub Cards",
       "grayscale_mode": "Grayscale mode",
       "hide_boost_count": "Hide boost count",

pages/settings/preferences/index.vue

@@ -39,6 +39,12 @@ const userSettings = useUserSettings()
     >
       {{ $t('settings.preferences.grayscale_mode') }}
     </SettingsToggleItem>
+    <SettingsToggleItem
+      :checked="getPreferences(userSettings, 'enableAutoplay')"
+      @click="togglePreferences('enableAutoplay')"
+    >
+      {{ $t('settings.preferences.enable_autoplay') }}
+    </SettingsToggleItem>
     <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
       <div i-ri-flask-line />
       {{ $t('settings.preferences.title') }}