feat: add autoplay switch

src/App.tsx

@@ -4,6 +4,7 @@ import './index.css'
 import { Toaster } from '@/components/ui/toaster'
 import { ThemeProvider } from '@/providers/ThemeProvider'
 import { PageManager } from './PageManager'
+import { AutoplayProvider } from './providers/AutoplayProvider'
 import { BookmarksProvider } from './providers/BookmarksProvider'
 import { FavoriteRelaysProvider } from './providers/FavoriteRelaysProvider'
 import { FeedProvider } from './providers/FeedProvider'
@@ -18,28 +19,30 @@ import { ZapProvider } from './providers/ZapProvider'
 export default function App(): JSX.Element {
   return (
     <ThemeProvider>
-      <ScreenSizeProvider>
-        <NostrProvider>
-          <ZapProvider>
-            <FavoriteRelaysProvider>
-              <FollowListProvider>
-                <MuteListProvider>
-                  <BookmarksProvider>
-                    <FeedProvider>
-                      <NoteStatsProvider>
-                        <MediaUploadServiceProvider>
-                          <PageManager />
-                          <Toaster />
-                        </MediaUploadServiceProvider>
-                      </NoteStatsProvider>
-                    </FeedProvider>
-                  </BookmarksProvider>
-                </MuteListProvider>
-              </FollowListProvider>
-            </FavoriteRelaysProvider>
-          </ZapProvider>
-        </NostrProvider>
-      </ScreenSizeProvider>
+      <AutoplayProvider>
+        <ScreenSizeProvider>
+          <NostrProvider>
+            <ZapProvider>
+              <FavoriteRelaysProvider>
+                <FollowListProvider>
+                  <MuteListProvider>
+                    <BookmarksProvider>
+                      <FeedProvider>
+                        <NoteStatsProvider>
+                          <MediaUploadServiceProvider>
+                            <PageManager />
+                            <Toaster />
+                          </MediaUploadServiceProvider>
+                        </NoteStatsProvider>
+                      </FeedProvider>
+                    </BookmarksProvider>
+                  </MuteListProvider>
+                </FollowListProvider>
+              </FavoriteRelaysProvider>
+            </ZapProvider>
+          </NostrProvider>
+        </ScreenSizeProvider>
+      </AutoplayProvider>
     </ThemeProvider>
   )
 }

src/components/VideoPlayer/index.tsx

@@ -1,4 +1,5 @@
 import { cn, isInViewport } from '@/lib/utils'
+import { useAutoplay } from '@/providers/AutoplayProvider'
 import videoManager from '@/services/video-manager.service'
 import { useEffect, useRef } from 'react'
 import NsfwOverlay from '../NsfwOverlay'
@@ -12,10 +13,13 @@ export default function VideoPlayer({
   className?: string
   isNsfw?: boolean
 }) {
+  const { autoplay } = useAutoplay()
   const videoRef = useRef<HTMLVideoElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
+    if (!autoplay) return
+
     const video = videoRef.current
     const container = containerRef.current
 
@@ -41,7 +45,7 @@ export default function VideoPlayer({
     return () => {
       observer.unobserve(container)
     }
-  }, [])
+  }, [autoplay])
 
   return (
     <div ref={containerRef} className="relative">

src/constants.ts

@@ -13,6 +13,7 @@ export const StorageKey = {
   LAST_READ_NOTIFICATION_TIME_MAP: 'lastReadNotificationTimeMap',
   ACCOUNT_FEED_INFO_MAP: 'accountFeedInfoMap',
   MEDIA_UPLOAD_SERVICE: 'mediaUploadService',
+  AUTOPLAY: 'autoplay',
   ACCOUNT_RELAY_LIST_EVENT_MAP: 'accountRelayListEventMap', // deprecated
   ACCOUNT_FOLLOW_LIST_EVENT_MAP: 'accountFollowListEventMap', // deprecated
   ACCOUNT_MUTE_LIST_EVENT_MAP: 'accountMuteListEventMap', // deprecated

src/i18n/locales/ar.ts

@@ -224,6 +224,9 @@ export default {
     'no bookmarks found': 'لم يتم العثور على إشارات',
     'no more bookmarks': 'لا مزيد من الإشارات',
     Bookmarks: 'الإشارات المرجعية',
-    'Show more': 'عرض المزيد'
+    'Show more': 'عرض المزيد',
+    General: 'عام',
+    Autoplay: 'التشغيل التلقائي',
+    'Enable video autoplay on this device': 'تمكين التشغيل التلقائي للفيديو على هذا الجهاز'
   }
 }

src/i18n/locales/de.ts

@@ -228,6 +228,10 @@ export default {
     'no bookmarks found': 'Keine Lesezeichen gefunden',
     'no more bookmarks': 'Keine weiteren Lesezeichen',
     Bookmarks: 'Lesezeichen',
-    'Show more': 'Mehr anzeigen'
+    'Show more': 'Mehr anzeigen',
+    General: 'Allgemein',
+    Autoplay: 'Automatische Wiedergabe',
+    'Enable video autoplay on this device':
+      'Aktiviere die automatische Video-Wiedergabe auf diesem Gerät'
   }
 }

src/i18n/locales/en.ts

@@ -224,6 +224,9 @@ export default {
     'no bookmarks found': 'no bookmarks found',
     'no more bookmarks': 'no more bookmarks',
     Bookmarks: 'Bookmarks',
-    'Show more': 'Show more'
+    'Show more': 'Show more',
+    General: 'General',
+    Autoplay: 'Autoplay',
+    'Enable video autoplay on this device': 'Enable video autoplay on this device'
   }
 }

src/i18n/locales/es.ts

@@ -228,6 +228,10 @@ export default {
     'no bookmarks found': 'No se encontraron marcadores',
     'no more bookmarks': 'No hay más marcadores',
     Bookmarks: 'Marcadores',
-    'Show more': 'Mostrar más'
+    'Show more': 'Mostrar más',
+    General: 'General',
+    Autoplay: 'Reproducción automática',
+    'Enable video autoplay on this device':
+      'Habilitar reproducción automática de video en este dispositivo'
   }
 }

src/i18n/locales/fr.ts

@@ -227,6 +227,10 @@ export default {
     'no bookmarks found': 'Aucun favori trouvé',
     'no more bookmarks': 'Plus de favoris',
     Bookmarks: 'Favoris',
-    'Show more': 'Afficher plus'
+    'Show more': 'Afficher plus',
+    General: 'Général',
+    Autoplay: 'Lecture automatique',
+    'Enable video autoplay on this device':
+      'Activer la lecture automatique des vidéos sur cet appareil'
   }
 }

src/i18n/locales/it.ts

@@ -227,6 +227,10 @@ export default {
     'no bookmarks found': 'Nessun segnalibro trovato',
     'no more bookmarks': 'Nessun altro segnalibro',
     Bookmarks: 'Segnalibri',
-    'Show more': 'Mostra di più'
+    'Show more': 'Mostra di più',
+    General: 'Generale',
+    Autoplay: 'Riproduzione automatica',
+    'Enable video autoplay on this device':
+      'Abilita riproduzione automatica video su questo dispositivo'
   }
 }

src/i18n/locales/ja.ts

@@ -225,6 +225,9 @@ export default {
     'no bookmarks found': 'ブックマークが見つかりません',
     'no more bookmarks': 'これ以上ブックマークはありません',
     Bookmarks: 'ブックマーク一覧',
-    'Show more': 'もっと見る'
+    'Show more': 'もっと見る',
+    General: '一般',
+    Autoplay: '自動再生',
+    'Enable video autoplay on this device': 'このデバイスでのビデオ自動再生を有効にする'
   }
 }

src/i18n/locales/pl.ts

@@ -226,6 +226,9 @@ export default {
     'no bookmarks found': 'Nie znaleziono zakładek',
     'no more bookmarks': 'Koniec zakładek',
     Bookmarks: 'Zakładki',
-    'Show more': 'Pokaż więcej'
+    'Show more': 'Pokaż więcej',
+    General: 'Ogólne',
+    Autoplay: 'Autoodtwarzanie',
+    'Enable video autoplay on this device': 'Włącz automatyczne odtwarzanie wideo na tym urządzeniu'
   }
 }

src/i18n/locales/pt-BR.ts

@@ -226,6 +226,10 @@ export default {
     'no bookmarks found': 'Nenhum favorito encontrado',
     'no more bookmarks': 'Sem mais favoritos',
     Bookmarks: 'Favoritos',
-    'Show more': 'Mostrar mais'
+    'Show more': 'Mostrar mais',
+    General: 'Geral',
+    Autoplay: 'Reprodução automática',
+    'Enable video autoplay on this device':
+      'Habilitar reprodução automática de vídeo neste dispositivo'
   }
 }

src/i18n/locales/pt-PT.ts

@@ -227,6 +227,10 @@ export default {
     'no bookmarks found': 'Nenhum favorito encontrado',
     'no more bookmarks': 'Sem mais favoritos',
     Bookmarks: 'Favoritos',
-    'Show more': 'Mostrar mais'
+    'Show more': 'Mostrar mais',
+    General: 'Geral',
+    Autoplay: 'Reprodução Automática',
+    'Enable video autoplay on this device':
+      'Habilitar reprodução automática de vídeo neste dispositivo'
   }
 }

src/i18n/locales/ru.ts

@@ -228,6 +228,9 @@ export default {
     'no bookmarks found': 'Закладки не найдены',
     'no more bookmarks': 'Больше нет закладок',
     Bookmarks: 'Закладки',
-    'Show more': 'Показать больше'
+    'Show more': 'Показать больше',
+    General: 'Общие',
+    Autoplay: 'Автовоспроизведение',
+    'Enable video autoplay on this device': 'Включить автовоспроизведение видео на этом устройстве'
   }
 }

src/i18n/locales/zh.ts

@@ -225,6 +225,9 @@ export default {
     'no bookmarks found': '暂无收藏',
     'no more bookmarks': '到底了',
     Bookmarks: '收藏',
-    'Show more': '显示更多'
+    'Show more': '显示更多',
+    General: '常规',
+    Autoplay: '自动播放',
+    'Enable video autoplay on this device': '在此设备上启用视频自动播放'
   }
 }

src/lib/link.ts

@@ -41,6 +41,7 @@ export const toRelaySettings = (tag?: 'mailbox' | 'favorite-relays') => {
 }
 export const toWallet = () => '/settings/wallet'
 export const toPostSettings = () => '/settings/posts'
+export const toGeneralSettings = () => '/settings/general'
 export const toProfileEditor = () => '/profile-editor'
 export const toRelay = (url: string) => `/relays/${encodeURIComponent(url)}`
 export const toMuteList = () => '/mutes'

src/pages/secondary/GeneralSettingsPage/index.tsx

@@ -0,0 +1,89 @@
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'
+import { Switch } from '@/components/ui/switch'
+import { LocalizedLanguageNames, TLanguage } from '@/i18n'
+import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
+import { cn } from '@/lib/utils'
+import { useAutoplay } from '@/providers/AutoplayProvider'
+import { useTheme } from '@/providers/ThemeProvider'
+import { SelectValue } from '@radix-ui/react-select'
+import { forwardRef, HTMLProps, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+const GeneralSettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
+  const { t, i18n } = useTranslation()
+  const [language, setLanguage] = useState<TLanguage>(i18n.language as TLanguage)
+  const { themeSetting, setThemeSetting } = useTheme()
+  const { autoplay, setAutoplay } = useAutoplay()
+
+  const handleLanguageChange = (value: TLanguage) => {
+    i18n.changeLanguage(value)
+    setLanguage(value)
+  }
+
+  return (
+    <SecondaryPageLayout ref={ref} index={index} title={t('General')}>
+      <div className="space-y-4 mt-2">
+        <SettingItem>
+          <Label htmlFor="languages" className="text-base font-normal">
+            {t('Languages')}
+          </Label>
+          <Select defaultValue="en" value={language} onValueChange={handleLanguageChange}>
+            <SelectTrigger id="languages" className="w-48">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {Object.entries(LocalizedLanguageNames).map(([key, value]) => (
+                <SelectItem key={key} value={key}>
+                  {value}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </SettingItem>
+        <SettingItem>
+          <Label htmlFor="theme" className="text-base font-normal">
+            {t('Theme')}
+          </Label>
+          <Select defaultValue="system" value={themeSetting} onValueChange={setThemeSetting}>
+            <SelectTrigger id="theme" className="w-48">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="system">{t('System')}</SelectItem>
+              <SelectItem value="light">{t('Light')}</SelectItem>
+              <SelectItem value="dark">{t('Dark')}</SelectItem>
+            </SelectContent>
+          </Select>
+        </SettingItem>
+        <SettingItem>
+          <Label htmlFor="autoplay" className="text-base font-normal">
+            <div>{t('Autoplay')}</div>
+            <div className="text-muted-foreground">{t('Enable video autoplay on this device')}</div>
+          </Label>
+          <Switch id="autoplay" checked={autoplay} onCheckedChange={setAutoplay} />
+        </SettingItem>
+      </div>
+    </SecondaryPageLayout>
+  )
+})
+GeneralSettingsPage.displayName = 'GeneralSettingsPage'
+export default GeneralSettingsPage
+
+const SettingItem = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <div
+        className={cn(
+          'flex justify-between select-none items-center px-4 min-h-9 [&_svg]:size-4 [&_svg]:shrink-0',
+          className
+        )}
+        {...props}
+        ref={ref}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+SettingItem.displayName = 'SettingItem'

src/pages/secondary/SettingsPage/index.tsx

@@ -1,78 +1,39 @@
 import AboutInfoDialog from '@/components/AboutInfoDialog'
 import Donation from '@/components/Donation'
-import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select'
-import { LocalizedLanguageNames, TLanguage } from '@/i18n'
 import SecondaryPageLayout from '@/layouts/SecondaryPageLayout'
-import { toPostSettings, toRelaySettings, toWallet } from '@/lib/link'
+import { toGeneralSettings, toPostSettings, toRelaySettings, toWallet } from '@/lib/link'
 import { cn } from '@/lib/utils'
 import { useSecondaryPage } from '@/PageManager'
 import { useNostr } from '@/providers/NostrProvider'
-import { useTheme } from '@/providers/ThemeProvider'
-import { SelectValue } from '@radix-ui/react-select'
 import {
   Check,
   ChevronRight,
   Copy,
   Info,
   KeyRound,
-  Languages,
   PencilLine,
   Server,
-  SunMoon,
+  Settings2,
   Wallet
 } from 'lucide-react'
 import { forwardRef, HTMLProps, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 const SettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
-  const { t, i18n } = useTranslation()
+  const { t } = useTranslation()
   const { nsec, ncryptsec } = useNostr()
   const { push } = useSecondaryPage()
-  const [language, setLanguage] = useState<TLanguage>(i18n.language as TLanguage)
-  const { themeSetting, setThemeSetting } = useTheme()
   const [copiedNsec, setCopiedNsec] = useState(false)
   const [copiedNcryptsec, setCopiedNcryptsec] = useState(false)
 
-  const handleLanguageChange = (value: TLanguage) => {
-    i18n.changeLanguage(value)
-    setLanguage(value)
-  }
-
   return (
     <SecondaryPageLayout ref={ref} index={index} title={t('Settings')}>
-      <SettingItem>
+      <SettingItem className="clickable" onClick={() => push(toGeneralSettings())}>
         <div className="flex items-center gap-4">
-          <Languages />
-          <div>{t('Languages')}</div>
+          <Settings2 />
+          <div>{t('General')}</div>
         </div>
-        <Select defaultValue="en" value={language} onValueChange={handleLanguageChange}>
-          <SelectTrigger className="w-48">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {Object.entries(LocalizedLanguageNames).map(([key, value]) => (
-              <SelectItem key={key} value={key}>
-                {value}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </SettingItem>
-      <SettingItem>
-        <div className="flex items-center gap-4">
-          <SunMoon />
-          <div>{t('Theme')}</div>
-        </div>
-        <Select defaultValue="system" value={themeSetting} onValueChange={setThemeSetting}>
-          <SelectTrigger className="w-48">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="system">{t('System')}</SelectItem>
-            <SelectItem value="light">{t('Light')}</SelectItem>
-            <SelectItem value="dark">{t('Dark')}</SelectItem>
-          </SelectContent>
-        </Select>
+        <ChevronRight />
       </SettingItem>
       <SettingItem className="clickable" onClick={() => push(toRelaySettings())}>
         <div className="flex items-center gap-4">

src/providers/AutoplayProvider.tsx

@@ -0,0 +1,32 @@
+import { createContext, useContext, useState } from 'react'
+import storage from '@/services/local-storage.service'
+
+type TAutoplayContext = {
+  autoplay: boolean
+  setAutoplay: (autoplay: boolean) => void
+}
+
+const AutoplayContext = createContext<TAutoplayContext | undefined>(undefined)
+
+export const useAutoplay = () => {
+  const context = useContext(AutoplayContext)
+  if (!context) {
+    throw new Error('useAutoplay must be used within an AutoplayProvider')
+  }
+  return context
+}
+
+export function AutoplayProvider({ children }: { children: React.ReactNode }) {
+  const [autoplay, setAutoplay] = useState<boolean>(storage.getAutoplay())
+
+  const updateAutoplay = (autoplay: boolean) => {
+    storage.setAutoplay(autoplay)
+    setAutoplay(autoplay)
+  }
+
+  return (
+    <AutoplayContext.Provider value={{ autoplay, setAutoplay: updateAutoplay }}>
+      {children}
+    </AutoplayContext.Provider>
+  )
+}

src/routes.tsx

@@ -1,6 +1,7 @@
 import { match } from 'path-to-regexp'
 import { isValidElement } from 'react'
 import FollowingListPage from './pages/secondary/FollowingListPage'
+import GeneralSettingsPage from './pages/secondary/GeneralSettingsPage'
 import MuteListPage from './pages/secondary/MuteListPage'
 import NoteListPage from './pages/secondary/NoteListPage'
 import NotePage from './pages/secondary/NotePage'
@@ -26,6 +27,7 @@ const ROUTES = [
   { path: '/settings/relays', element: <RelaySettingsPage /> },
   { path: '/settings/wallet', element: <WalletPage /> },
   { path: '/settings/posts', element: <PostSettingsPage /> },
+  { path: '/settings/general', element: <GeneralSettingsPage /> },
   { path: '/profile-editor', element: <ProfileEditorPage /> },
   { path: '/mutes', element: <MuteListPage /> }
 ]

src/services/local-storage.service.ts

@@ -24,6 +24,7 @@ class LocalStorageService {
   private quickZap: boolean = false
   private accountFeedInfoMap: Record<string, TFeedInfo | undefined> = {}
   private mediaUploadService: string = DEFAULT_NIP_96_SERVICE
+  private autoplay: boolean = true
 
   constructor() {
     if (!LocalStorageService.instance) {
@@ -89,6 +90,8 @@ class LocalStorageService {
     this.mediaUploadService =
       window.localStorage.getItem(StorageKey.MEDIA_UPLOAD_SERVICE) ?? DEFAULT_NIP_96_SERVICE
 
+    this.autoplay = window.localStorage.getItem(StorageKey.AUTOPLAY) !== 'false'
+
     // Clean up deprecated data
     window.localStorage.removeItem(StorageKey.ACCOUNT_PROFILE_EVENT_MAP)
     window.localStorage.removeItem(StorageKey.ACCOUNT_FOLLOW_LIST_EVENT_MAP)
@@ -235,6 +238,15 @@ class LocalStorageService {
     this.mediaUploadService = service
     window.localStorage.setItem(StorageKey.MEDIA_UPLOAD_SERVICE, service)
   }
+
+  getAutoplay() {
+    return this.autoplay
+  }
+
+  setAutoplay(autoplay: boolean) {
+    this.autoplay = autoplay
+    window.localStorage.setItem(StorageKey.AUTOPLAY, autoplay.toString())
+  }
 }
 
 const instance = new LocalStorageService()