✨ add picture quality config

src/global.d.ts

@@ -31,7 +31,9 @@ type RootStackParamList = {
   theme: undefined,
   test: undefined,
   config_video: undefined,
+  config_picture: undefined,
   about: undefined,
+  cache: undefined,
   default: undefined,
   actor: {
     title?: string

src/page/router/MobileRouter.tsx

@@ -13,6 +13,8 @@ import {Page as VideoConfigPage} from '@page/settings/video/index.tsx';
 import {Page as TestPage} from '@page/test/index.tsx';
 import {Page as ActorPage} from '@page/actor/index.tsx';
 import {Page as AboutPage} from '@page/settings/about/index.tsx';
+import {Page as CachePage} from '@page/settings/cache/index.tsx';
+import {Page as PicturePage} from '@page/settings/picture/index.tsx';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import {
     DefaultTheme,
@@ -124,6 +126,11 @@ const SettingsRouter = () => {
                 component={ThemePage}
                 options={{title: '主题配置'}}
             />
+            <SettingsStack.Screen
+                name="config_picture"
+                component={PicturePage}
+                options={{title: '图片配置'}}
+            />
             <SettingsStack.Screen
                 name="config_video"
                 component={VideoConfigPage}
@@ -134,6 +141,11 @@ const SettingsRouter = () => {
                 component={AboutPage as any}
                 options={{title: '关于我们'}}
             />
+            <SettingsStack.Screen
+                name="cache"
+                component={CachePage as any}
+                options={{title: '应用缓存'}}
+            />
         </SettingsStack.Navigator>
     );
 };

src/page/settings/cache/index.tsx

@@ -0,0 +1,81 @@
+import { PropsWithNavigation } from "@global";
+import { Version } from "@helper/device";
+import { Toast } from "@helper/toast";
+import { useAppDispatch, useAppSelector } from "@hook/store";
+import { clearCurrentSiteSource } from "@store/embySlice";
+import { selectThemeBasicStyle } from "@store/themeSlice";
+import { Image, clearImageCache } from "@view/Image";
+import { StatusBar } from "@view/StatusBar";
+import { Button, Linking, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+
+const style = StyleSheet.create({
+    page: {
+        flex: 1,
+    },
+    inline: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingTop: 10,
+        paddingBottom: 8,
+        borderBottomColor: "lightgray",
+        borderBottomWidth: 0.25,
+    },
+    label: {
+        fontSize: 16,
+        flex: 1,
+    },
+    browser: {
+        fontSize: 16,
+        marginRight: 10,
+    },
+    input: {
+        fontSize: 16,
+        padding: 5,
+        paddingLeft: 10,
+        paddingRight: 10,
+        borderWidth: 1,
+        borderColor: "lightgray",
+        borderRadius: 5,
+        marginLeft: 10,
+        minWidth: 50,
+    },
+    selector: {
+        flex: 2
+    }
+});
+
+
+export function Page(props: PropsWithNavigation<"default">) {
+    const theme = useAppSelector(selectThemeBasicStyle)
+    const pagePaddingTop = useAppSelector(state => state.theme.pagePaddingTop)
+    const dispatch = useAppDispatch()
+    const clearSiteCache = () => {
+        Toast.show({
+            text1: "清空站点缓存成功",
+            type: "success"
+        })
+        dispatch(clearCurrentSiteSource())
+    }
+    const clearCache = () => {
+        Toast.show({
+            text1: "清空图片缓存成功",
+            type: "success"
+        })
+        clearImageCache();
+    }
+    return (
+        <View style={{...style.page, ...theme, paddingTop: pagePaddingTop}}>
+            <StatusBar />
+            <View style={style.inline}>
+                <Text style={{...style.label, ...theme}}>图片缓存可以加快图片显示</Text>
+                <Button title="清空图片缓存" onPress={clearCache} />
+            </View>
+            <View style={style.inline}>
+                <Text style={{...style.label, ...theme}}>如果出现异常，可以尝试清空站点缓存</Text>
+                <Button title="清空站点缓存" onPress={clearSiteCache} />
+            </View>
+        </View>
+    )
+}

src/page/settings/index.tsx

@@ -28,6 +28,13 @@ const settings: SettingItemProps[] = [
             navigation?.navigate("login")
         }
     },
+    {
+        icon: "Picture",
+        label: "图片设置",
+        onPress: (setting, navigation) => {
+            navigation?.navigate("config_picture")
+        }
+    },
     {
         icon: "Video",
         label: "视频设置",
@@ -39,13 +46,12 @@ const settings: SettingItemProps[] = [
         icon: "Audio",
         label: "音频设置",
     },
-    {
-        icon: "Message",
-        label: "最近消息",
-    },
     {
         icon: "Trash",
         label: "应用缓存",
+        onPress: (setting, navigation) => {
+            navigation?.navigate("cache")
+        }
     },
     {
         icon: "Mobile",

src/page/settings/picture/index.tsx

@@ -0,0 +1,74 @@
+import { PropsWithNavigation } from "@global";
+import { useAppDispatch, useAppSelector } from "@hook/store";
+import { PictureQuality, updateConfig } from "@store/configSlice";
+import { selectThemeBasicStyle } from "@store/themeSlice";
+import { StatusBar } from "@view/StatusBar";
+import { Tag } from "@view/Tag";
+import { StyleSheet, Text, View } from "react-native";
+
+const style = StyleSheet.create({
+    page: {
+        flex: 1,
+    },
+    inline: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingTop: 10,
+        paddingBottom: 8,
+        borderBottomColor: "lightgray",
+        borderBottomWidth: 0.25,
+    },
+    label: {
+        fontSize: 16,
+        flex: 1,
+    },
+    browser: {
+        fontSize: 16,
+        marginRight: 10,
+    },
+    input: {
+        fontSize: 16,
+        padding: 5,
+        paddingLeft: 10,
+        paddingRight: 10,
+        borderWidth: 1,
+        borderColor: "lightgray",
+        borderRadius: 5,
+        marginLeft: 10,
+        minWidth: 50,
+    },
+    selector: {
+        flex: 2
+    }
+});
+
+
+export function Page(props: PropsWithNavigation<"default">) {
+    const theme = useAppSelector(selectThemeBasicStyle)
+    const pagePaddingTop = useAppSelector(state => state.theme.pagePaddingTop)
+    const pictureQuality = useAppSelector(state => state.config.picture?.quality ?? PictureQuality.High)
+    const dispatch = useAppDispatch()
+
+    return (
+        <View style={{ ...style.page, ...theme, paddingTop: pagePaddingTop }}>
+            <StatusBar />
+            <View style={style.inline}>
+                <Text style={{ ...style.label, ...theme }}>加载图片质量</Text>
+                <Tag color={pictureQuality === PictureQuality.Low ? "red" : "gold"}
+                    onPress={_ => dispatch(updateConfig({ picture: { quality: PictureQuality.Low } }))}>
+                    低画质
+                </Tag>
+                <Tag color={pictureQuality === PictureQuality.Medium ? "red" : "gold"}
+                    onPress={_ => dispatch(updateConfig({ picture: { quality: PictureQuality.Medium } }))}>
+                    中画质
+                </Tag>
+                <Tag color={pictureQuality === PictureQuality.High ? "red" : "gold"}
+                    onPress={_ => dispatch(updateConfig({ picture: { quality: PictureQuality.High } }))}>
+                    高画质
+                </Tag>
+            </View>
+        </View>
+    )
+}

src/store/configSlice.ts

@@ -1,9 +1,18 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import _ from 'lodash';
 
+export enum PictureQuality {
+    Low,
+    Medium,
+    High
+}
+
 interface ConfigState {
     video: {
         MaxStreamingBitrate?: number;
+    },
+    picture: {
+        quality: PictureQuality
     }
 }
 
@@ -12,6 +21,9 @@ type ThemeUpdateFunction = (state: ConfigState) => ConfigState;
 const initialState: ConfigState = {
     video: {
         MaxStreamingBitrate: 60000000
+    },
+    picture: {
+        quality: PictureQuality.High
     }
 };
 

src/store/embySlice.ts

@@ -236,6 +236,9 @@ export const slice = createSlice({
                 return site
             })
         }, 
+        clearCurrentSiteSource: (state) => {
+            state.source = {}
+        },
         switchToSite: (state, action: PayloadAction<string>) => {
             const id = action.payload
             const target = state.sites?.filter(site => site.id === id)?.[0]
@@ -354,7 +357,8 @@ export const slice = createSlice({
 
 export const { 
     switchToSite, removeSite,
-    updateCurrentEmbySite, 
+    updateCurrentEmbySite,
+    clearCurrentSiteSource,
     patchCurrentEmbySite,
     updateAlbumSortType,
     updateToNextAlbumSortType

src/view/Image.tsx

@@ -39,5 +39,10 @@ export function WindowsImage(props: ImageProps) {
             />;
 }
 
+export const clearImageCache = () => {
+    FastImage.clearMemoryCache();
+    FastImage.clearDiskCache();
+}
+
 export const Image = isOS(OSType.Windows) ? WindowsImage : MobileImage
 export {BaseImage as BaseImage};

src/view/settings/SettingItem.tsx

@@ -4,7 +4,7 @@ import { Navigation, ThemeBasicStyle } from "@global";
 import VideoIcon from "@asset/video.svg"
 import EarphoneIcon from "@asset/earphone.svg"
 import TrashIcon from "@asset/trash.svg"
-import MessageIcon from "@asset/message.svg"
+import PictureIcon from "@asset/picture.svg"
 import MobileIcon from "@asset/phone.svg"
 import ThemeIcon from "@asset/paint.svg"
 import Indicator from "@asset/right.arrow.svg"
@@ -46,7 +46,7 @@ export const Icon = {
     Video: VideoIcon,
     Audio: EarphoneIcon,
     Trash: TrashIcon,
-    Message: MessageIcon,
+    Picture: PictureIcon,
     Indicator: Indicator,
     Mobile: MobileIcon,
     Theme: ThemeIcon,