feat: mfsdk

lovegaoshi · Dec 19, 2024 · c02d1ac · c02d1ac
1 parent 1bc9bd1
commit c02d1ac
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 55 deletions.
diff --git a/src/components/setting/appearances/SkinSettings.tsx b/src/components/setting/appearances/SkinSettings.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Image } from 'expo-image';
-import { View, SafeAreaView, StyleSheet, LayoutAnimation } from 'react-native';
+import { View, SafeAreaView, LayoutAnimation } from 'react-native';
 import {
   Text,
   IconButton,
@@ -17,6 +17,8 @@ import AdaptiveTheme from '@components/styles/AdaptiveTheme';
 import { execWhenTrue } from '@utils/Utils';
 import GenericSelectDialog from '../../dialogs/GenericSelectDialog';
 import { getStyle } from '@utils/StyleStorage';
+import { ItemSelectStyles as styles } from '@components/style';
+
 interface DisplayTheme extends NoxTheme.Style {
   builtin: boolean;
 }
@@ -131,7 +133,7 @@ const SkinSettings = () => {
   const setPlayerStyle = useNoxSetting(state => state.setPlayerStyle);
   const allThemes = BuiltInThemes.concat(playerStyles);
   const [checked, setChecked] = React.useState(getThemeID(playerStyle));
-  const scrollViewRef = React.useRef<FlashList<DisplayTheme> | null>(null);
+  const scrollViewRef = React.useRef<FlashList<DisplayTheme>>(null);
 
   const selectTheme = (theme: NoxTheme.Style) => {
     setChecked(getThemeID(theme));
@@ -179,6 +181,7 @@ const SkinSettings = () => {
             listRef={scrollViewRef}
           />
         )}
+        estimatedItemSize={107}
       />
       <GenericSelectDialog
         visible={selectSkin !== undefined}
@@ -199,45 +202,4 @@ const SkinSettings = () => {
   );
 };
 
-const styles = StyleSheet.create({
-  safeAreaView: {
-    flex: 1,
-  },
-  skinItemContainer: {
-    flexDirection: 'row',
-  },
-  skinItemLeftContainer: {
-    flexDirection: 'row',
-    paddingVertical: 5,
-    flex: 5,
-    paddingLeft: 5,
-  },
-  skinItemImage: {
-    width: 72,
-    height: 72,
-    borderRadius: 40,
-  },
-  skinItemTextContainer: {
-    paddingLeft: 5,
-  },
-  lightbulbContainer: {
-    flexDirection: 'row',
-  },
-  lightbulbIcon: {
-    marginHorizontal: 0,
-    marginVertical: 0,
-    marginLeft: -8,
-    marginTop: -8,
-  },
-  skinItemRightContainer: {
-    alignContent: 'flex-end',
-  },
-  deleteButton: {
-    marginLeft: -3,
-  },
-  skinTitleText: {
-    maxWidth: '100%',
-  },
-});
-
 export default SkinSettings;
diff --git a/src/components/setting/developer/plugins/musicfree/View.tsx b/src/components/setting/developer/plugins/musicfree/View.tsx
@@ -1,28 +1,82 @@
 import * as React from 'react';
-import { Image } from 'expo-image';
-import { View, SafeAreaView, StyleSheet, LayoutAnimation } from 'react-native';
-import {
-  Text,
-  IconButton,
-  TouchableRipple,
-  RadioButton,
-} from 'react-native-paper';
+import { View, SafeAreaView, LayoutAnimation } from 'react-native';
+import { Text, IconButton } from 'react-native-paper';
 import { FlashList } from '@shopify/flash-list';
 
-import { styles } from '@components/style';
+import { ItemSelectStyles as styles } from '@components/style';
 import Searchbar from './Searchbar';
 import { useNoxSetting } from '@stores/useApp';
+import { MFsdk } from '@utils/mediafetch/evalsdk';
+import { fetchMFsdk } from '@utils/mfsdk';
+
+interface ItemProps {
+  sdk: MFsdk;
+  listRef?: React.RefObject<FlashList<MFsdk>>;
+}
+
+const RenderItem = ({ sdk, listRef }: ItemProps) => {
+  const playerStyle = useNoxSetting(state => state.playerStyle);
+  const rmMFsdks = useNoxSetting(state => state.rmMFsdks);
+  const addMFsdks = useNoxSetting(state => state.addMFsdks);
+
+  const deleteTheme = async () => {
+    rmMFsdks([sdk]);
+    listRef?.current?.prepareForLayoutAnimationRender();
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
+  };
+
+  return (
+    <View style={styles.skinItemContainer}>
+      <View style={styles.skinItemLeftContainer}>
+        <View style={styles.skinItemTextContainer}>
+          <Text
+            variant={'titleMedium'}
+            style={styles.skinTitleText}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >{`${sdk.platform} v${sdk.version} @${sdk.author}`}</Text>
+          <Text
+            variant={'labelLarge'}
+            style={{
+              color: playerStyle.colors.secondary,
+              maxWidth: '90%',
+            }}
+            numberOfLines={2}
+          >
+            {sdk.srcUrl}
+          </Text>
+        </View>
+      </View>
+      <View style={styles.skinItemRightContainer}>
+        <IconButton
+          icon="sync"
+          style={styles.deleteButton}
+          onPress={() => fetchMFsdk(sdk.srcUrl).then(addMFsdks)}
+        />
+        <IconButton
+          icon="trash-can"
+          style={styles.deleteButton}
+          onPress={deleteTheme}
+        />
+      </View>
+    </View>
+  );
+};
 
 const MFSettings = () => {
   const MFsdks = useNoxSetting(state => state.MFsdks);
+  const scrollViewRef = React.useRef<FlashList<MFsdk>>(null);
+
   return (
-    <SafeAreaView style={styles.flex}>
+    <SafeAreaView style={styles.safeAreaView}>
       <Searchbar />
       <FlashList
+        ref={scrollViewRef}
         data={MFsdks}
         renderItem={({ item }) => (
-          <Text> {`${item.platform} ${item.version}`} </Text>
+          <RenderItem sdk={item} listRef={scrollViewRef} />
         )}
+        estimatedItemSize={100}
       />
     </SafeAreaView>
   );

diff --git a/src/components/style.ts b/src/components/style.ts
@@ -180,3 +180,45 @@ export const styles = StyleSheet.create({
   alignMiddle: { justifyContent: 'center' },
   alignCenter: { alignItems: 'center' },
 });
+
+export const ItemSelectStyles = StyleSheet.create({
+  safeAreaView: {
+    flex: 1,
+  },
+  skinItemContainer: {
+    flexDirection: 'row',
+  },
+  skinItemLeftContainer: {
+    flexDirection: 'row',
+    paddingVertical: 5,
+    flex: 5,
+    paddingLeft: 5,
+  },
+  skinItemImage: {
+    width: 72,
+    height: 72,
+    borderRadius: 40,
+  },
+  skinItemTextContainer: {
+    paddingLeft: 5,
+  },
+  lightbulbContainer: {
+    flexDirection: 'row',
+  },
+  lightbulbIcon: {
+    marginHorizontal: 0,
+    marginVertical: 0,
+    marginLeft: -8,
+    marginTop: -8,
+  },
+  skinItemRightContainer: {
+    flexDirection: 'row',
+    alignContent: 'flex-end',
+  },
+  deleteButton: {
+    marginLeft: -3,
+  },
+  skinTitleText: {
+    maxWidth: '100%',
+  },
+});
diff --git a/src/utils/mfsdk.ts b/src/utils/mfsdk.ts
@@ -47,7 +47,9 @@ export const fetchMFsdk = async (url: string): Promise<MFsdk[]> => {
       const json = JSON.parse(text) as { plugins: { url: string }[] };
       const sdks = await Promise.all(json.plugins.map(p => fetchMFsdk(p.url)));
       return sdks.flat();
-    } catch {}
+    } catch {
+      // do nothing
+    }
     const loadedSDK = loadEvalPlugin(text, url);
     const sdkLocalPath = `${loadedSDK.platform}.${loadedSDK.version}.js`;
     loadedSDK.path = sdkLocalPath;