wip

app/(auth)/(tabs)/(home)/index.tsx

@@ -59,7 +59,13 @@ export default function index() {
   const user = useAtomValue(userAtom);
 
   const [loading, setLoading] = useState(false);
-  const [settings, _] = useSettings();
+  const [
+    settings,
+    updateSettings,
+    pluginSettings,
+    setPluginSettings,
+    refreshStreamyfinPluginSettings,
+  ] = useSettings();
 
   const [isConnected, setIsConnected] = useState<boolean | null>(null);
   const [loadingRetry, setLoadingRetry] = useState(false);
@@ -69,6 +75,14 @@ export default function index() {
 
   const insets = useSafeAreaInsets();
 
+  useEffect(() => {
+    const interval = setInterval(async () => {
+      await refreshStreamyfinPluginSettings();
+    }, 60 * 10 * 1000); // 10 min
+
+    return () => clearInterval(interval);
+  }, []);
+
   useEffect(() => {
     const hasDownloads = downloadedFiles && downloadedFiles.length > 0;
     navigation.setOptions({
@@ -110,6 +124,7 @@ export default function index() {
     cleanCacheDirectory().catch((e) =>
       console.error("Something went wrong cleaning cache directory")
     );
+
     return () => {
       unsubscribe();
     };
@@ -154,6 +169,7 @@ export default function index() {
 
   const refetch = useCallback(async () => {
     setLoading(true);
+    await refreshStreamyfinPluginSettings();
     await invalidateCache();
     setLoading(false);
   }, []);

components/settings/OtherSettings.tsx

@@ -9,7 +9,7 @@ import * as BackgroundFetch from "expo-background-fetch";
 import { useRouter } from "expo-router";
 import * as ScreenOrientation from "expo-screen-orientation";
 import * as TaskManager from "expo-task-manager";
-import React, {useEffect, useMemo} from "react";
+import React, { useEffect, useMemo } from "react";
 import { Linking, Switch, TouchableOpacity } from "react-native";
 import { toast } from "sonner-native";
 import { Text } from "../common/Text";
@@ -52,28 +52,28 @@ export const OtherSettings: React.FC = () => {
   /**********************
    *********************/
 
-  const disabled = useMemo(() => (
+  const disabled = useMemo(
-    pluginSettings?.autoRotate?.locked === true &&
+    () =>
-    pluginSettings?.defaultVideoOrientation?.locked === true &&
+      pluginSettings?.autoRotate?.locked === true &&
-    pluginSettings?.safeAreaInControlsEnabled?.locked === true &&
+      pluginSettings?.defaultVideoOrientation?.locked === true &&
-    pluginSettings?.showCustomMenuLinks?.locked === true &&
+      pluginSettings?.safeAreaInControlsEnabled?.locked === true &&
-    pluginSettings?.hiddenLibraries?.locked === true &&
+      pluginSettings?.showCustomMenuLinks?.locked === true &&
-    pluginSettings?.disableHapticFeedback?.locked === true
+      pluginSettings?.hiddenLibraries?.locked === true &&
-  ), [pluginSettings]);
+      pluginSettings?.disableHapticFeedback?.locked === true,
+    [pluginSettings]
+  );
 
   const orientations = [
     ScreenOrientation.OrientationLock.DEFAULT,
     ScreenOrientation.OrientationLock.PORTRAIT_UP,
     ScreenOrientation.OrientationLock.LANDSCAPE_LEFT,
-    ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT
+    ScreenOrientation.OrientationLock.LANDSCAPE_RIGHT,
-  ]
+  ];
 
   if (!settings) return null;
 
   return (
-    <DisabledSetting
+    <DisabledSetting disabled={disabled}>
-      disabled={disabled}
-    >
       <ListGroup title="Other" className="">
         <ListItem
           title="Auto rotate"
@@ -82,32 +82,40 @@ export const OtherSettings: React.FC = () => {
           <Switch
             value={settings.autoRotate}
             disabled={pluginSettings?.autoRotate?.locked}
-            onValueChange={(value) => updateSettings({autoRotate: value})}
+            onValueChange={(value) => updateSettings({ autoRotate: value })}
           />
         </ListItem>
 
         <ListItem
           title="Video orientation"
-          disabled={pluginSettings?.defaultVideoOrientation?.locked || settings.autoRotate}
+          disabled={
+            pluginSettings?.defaultVideoOrientation?.locked ||
+            settings.autoRotate
+          }
         >
           <Dropdown
             data={orientations}
-            disabled={pluginSettings?.defaultVideoOrientation?.locked || settings.autoRotate}
+            disabled={
-            keyExtractor={String}
+              pluginSettings?.defaultVideoOrientation?.locked ||
-            titleExtractor={(item) =>
+              settings.autoRotate
-              ScreenOrientationEnum[item]
             }
+            keyExtractor={String}
+            titleExtractor={(item) => ScreenOrientationEnum[item]}
             title={
               <TouchableOpacity className="flex flex-row items-center justify-between py-3 pl-3">
                 <Text className="mr-1 text-[#8E8D91]">
                   {ScreenOrientationEnum[settings.defaultVideoOrientation]}
                 </Text>
-                <Ionicons name="chevron-expand-sharp" size={18} color="#5A5960"/>
+                <Ionicons
+                  name="chevron-expand-sharp"
+                  size={18}
+                  color="#5A5960"
+                />
               </TouchableOpacity>
             }
             label="Orientation"
             onSelected={(defaultVideoOrientation) =>
-              updateSettings({defaultVideoOrientation})
+              updateSettings({ defaultVideoOrientation })
             }
           />
         </ListItem>
@@ -120,7 +128,7 @@ export const OtherSettings: React.FC = () => {
             value={settings.safeAreaInControlsEnabled}
             disabled={pluginSettings?.safeAreaInControlsEnabled?.locked}
             onValueChange={(value) =>
-              updateSettings({safeAreaInControlsEnabled: value})
+              updateSettings({ safeAreaInControlsEnabled: value })
             }
           />
         </ListItem>
@@ -138,7 +146,7 @@ export const OtherSettings: React.FC = () => {
             value={settings.showCustomMenuLinks}
             disabled={pluginSettings?.showCustomMenuLinks?.locked}
             onValueChange={(value) =>
-              updateSettings({showCustomMenuLinks: value})
+              updateSettings({ showCustomMenuLinks: value })
             }
           />
         </ListItem>
@@ -155,7 +163,7 @@ export const OtherSettings: React.FC = () => {
             value={settings.disableHapticFeedback}
             disabled={pluginSettings?.disableHapticFeedback?.locked}
             onValueChange={(disableHapticFeedback) =>
-              updateSettings({disableHapticFeedback})
+              updateSettings({ disableHapticFeedback })
             }
           />
         </ListItem>

utils/atoms/settings.ts

@@ -221,11 +221,13 @@ export const useSettings = () => {
 
   const refreshStreamyfinPluginSettings = useCallback(async () => {
     if (!api) return;
-    const settings = await api
+    const settings = await api.getStreamyfinPluginConfig().then(
-      .getStreamyfinPluginConfig()
+      ({ data }) => {
-      .then(({ data }) => data?.settings);
+        writeInfoLog(`Got remote settings`);
-
+        return data?.settings;
-    writeInfoLog(`Got remote settings: ${JSON.stringify(settings)}`);
+      },
+      (err) => undefined
+    );
 
     setPluginSettings(settings);
     return settings;