Fix #611

src/utils/migrations/settings/migration.ts

@@ -2,6 +2,7 @@ import { SettingsV0 } from './v0'
 import { SettingsV1 } from './v1'
 import { SettingsV2 } from './v2'
 import { SettingsV3 } from './v3'
+import { SettingsV4 } from './v4'
 
 const settingsMigration = {
   1: (state: SettingsV0): SettingsV1 => {
@@ -20,7 +21,13 @@ const settingsMigration = {
   3: (state: SettingsV2): SettingsV3 => {
     const { analytics, ...rest } = state
     return rest
+  },
+  4: (state: SettingsV3): SettingsV4 => {
+    const { staticEmoji, ...rest } = state
+    return { ...rest, autoplayGifv: true }
   }
 }
 
+export { SettingsV4 as SettingsLatest }
+
 export default settingsMigration

src/utils/migrations/settings/v4.ts

@@ -0,0 +1,8 @@
+export type SettingsV4 = {
+  fontsize: -1 | 0 | 1 | 2 | 3
+  language: string
+  theme: 'light' | 'dark' | 'auto'
+  darkTheme: 'lighter' | 'darker'
+  browser: 'internal' | 'external'
+  autoplayGifv: boolean
+}

src/utils/slices/settingsSlice.ts

@@ -1,12 +1,10 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit'
 import { LOCALES } from '@root/i18n/locales'
 import { RootState } from '@root/store'
-import { SettingsV3 } from '@utils/migrations/settings/v3'
+import { SettingsLatest } from '@utils/migrations/settings/migration'
 import * as Localization from 'expo-localization'
 import { pickBy } from 'lodash'
 
-export type SettingsState = SettingsV3
-
 export const settingsInitialState = {
   fontsize: 0,
   notification: {
@@ -18,33 +16,33 @@ export const settingsInitialState = {
   theme: 'auto',
   darkTheme: 'lighter',
   browser: 'internal',
-  staticEmoji: false
+  autoplayGifv: true
 }
 
 const settingsSlice = createSlice({
   name: 'settings',
-  initialState: settingsInitialState as SettingsState,
+  initialState: settingsInitialState as SettingsLatest,
   reducers: {
-    changeFontsize: (state, action: PayloadAction<SettingsState['fontsize']>) => {
+    changeFontsize: (state, action: PayloadAction<SettingsLatest['fontsize']>) => {
       state.fontsize = action.payload
     },
-    changeLanguage: (state, action: PayloadAction<NonNullable<SettingsState['language']>>) => {
+    changeLanguage: (state, action: PayloadAction<NonNullable<SettingsLatest['language']>>) => {
       state.language = action.payload
     },
-    changeTheme: (state, action: PayloadAction<NonNullable<SettingsState['theme']>>) => {
+    changeTheme: (state, action: PayloadAction<NonNullable<SettingsLatest['theme']>>) => {
       state.theme = action.payload
     },
-    changeDarkTheme: (state, action: PayloadAction<NonNullable<SettingsState['darkTheme']>>) => {
+    changeDarkTheme: (state, action: PayloadAction<NonNullable<SettingsLatest['darkTheme']>>) => {
       state.darkTheme = action.payload
     },
-    changeBrowser: (state, action: PayloadAction<NonNullable<SettingsState['browser']>>) => {
+    changeBrowser: (state, action: PayloadAction<NonNullable<SettingsLatest['browser']>>) => {
       state.browser = action.payload
     },
-    changeStaticEmoji: (
+    changeAutoplayGifv: (
       state,
-      action: PayloadAction<NonNullable<SettingsState['staticEmoji']>>
+      action: PayloadAction<NonNullable<SettingsLatest['autoplayGifv']>>
     ) => {
-      state.staticEmoji = action.payload
+      state.autoplayGifv = action.payload
     }
   }
 })
@@ -54,7 +52,7 @@ export const getSettingsLanguage = (state: RootState) => state.settings.language
 export const getSettingsTheme = (state: RootState) => state.settings.theme
 export const getSettingsDarkTheme = (state: RootState) => state.settings.darkTheme
 export const getSettingsBrowser = (state: RootState) => state.settings.browser
-export const getSettingsStaticEmoji = (state: RootState) => state.settings.staticEmoji
+export const getSettingsAutoplayGifv = (state: RootState) => state.settings.autoplayGifv
 
 export const {
   changeFontsize,
@@ -62,6 +60,6 @@ export const {
   changeTheme,
   changeDarkTheme,
   changeBrowser,
-  changeStaticEmoji
+  changeAutoplayGifv
 } = settingsSlice.actions
 export default settingsSlice.reducer

src/utils/styles/ThemeManager.tsx

@@ -1,19 +1,10 @@
-import React, {
-  createContext,
-  PropsWithChildren,
-  useContext,
-  useEffect,
-  useState
-} from 'react'
+import React, { createContext, PropsWithChildren, useContext, useEffect, useState } from 'react'
 import { Appearance } from 'react-native'
 import { useSelector } from 'react-redux'
 import { ColorDefinitions, getColors, Theme } from '@utils/styles/themes'
-import {
-  getSettingsDarkTheme,
-  getSettingsTheme,
-  SettingsState
-} from '@utils/slices/settingsSlice'
+import { getSettingsDarkTheme, getSettingsTheme } from '@utils/slices/settingsSlice'
 import { throttle } from 'lodash'
+import { SettingsLatest } from '@utils/migrations/settings/migration'
 
 type ContextType = {
   mode: 'light' | 'dark'
@@ -30,9 +21,7 @@ const ManageThemeContext = createContext<ContextType>({
 export const useTheme = () => useContext(ManageThemeContext)
 
 const useColorSchemeDelay = (delay = 500) => {
-  const [colorScheme, setColorScheme] = React.useState(
-    Appearance.getColorScheme()
-  )
+  const [colorScheme, setColorScheme] = React.useState(Appearance.getColorScheme())
   const onColorSchemeChange = React.useCallback(
     throttle(
       ({ colorScheme }) => {
@@ -57,8 +46,8 @@ const useColorSchemeDelay = (delay = 500) => {
 
 const determineTheme = (
   osTheme: 'light' | 'dark' | null | undefined,
-  userTheme: SettingsState['theme'],
-  darkTheme: SettingsState['darkTheme']
+  userTheme: SettingsLatest['theme'],
+  darkTheme: SettingsLatest['darkTheme']
 ): 'light' | 'dark_lighter' | 'dark_darker' => {
   enum DarkTheme {
     lighter = 'dark_lighter',
@@ -85,12 +74,8 @@ const ThemeManager: React.FC<PropsWithChildren> = ({ children }) => {
   const userTheme = useSelector(getSettingsTheme)
   const darkTheme = useSelector(getSettingsDarkTheme)
 
-  const [mode, setMode] = useState(
-    userTheme === 'auto' ? osTheme || 'light' : userTheme
-  )
-  const [theme, setTheme] = useState<Theme>(
-    determineTheme(osTheme, userTheme, darkTheme)
-  )
+  const [mode, setMode] = useState(userTheme === 'auto' ? osTheme || 'light' : userTheme)
+  const [theme, setTheme] = useState<Theme>(determineTheme(osTheme, userTheme, darkTheme))
 
   useEffect(() => {
     setMode(userTheme === 'auto' ? osTheme || 'light' : userTheme)
@@ -100,9 +85,7 @@ const ThemeManager: React.FC<PropsWithChildren> = ({ children }) => {
   }, [osTheme, userTheme, darkTheme])
 
   return (
-    <ManageThemeContext.Provider
-      value={{ mode, theme, colors: getColors(theme) }}
-    >
+    <ManageThemeContext.Provider value={{ mode, theme, colors: getColors(theme) }}>
       {children}
     </ManageThemeContext.Provider>
   )