chore: a bunch of QoL changes

android/app/build.gradle

@@ -160,7 +160,7 @@ dependencies {
         implementation jscFlavor
     }
     implementation "androidx.core:core-ktx:1.12.0"
-    implementation 'androidx.core:core-google-shortcuts:1.0.0'
+    implementation 'androidx.core:core-google-shortcuts:1.1.0'
 }
 
 apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

android/build.gradle

@@ -20,10 +20,10 @@ buildscript {
         mavenCentral()
     }
     dependencies {
-        classpath('com.android.tools.build:gradle:8.1.4')
+        classpath('com.android.tools.build:gradle:8.3.1')
         classpath("com.facebook.react:react-native-gradle-plugin")
         classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion")
     }
 }
 
-apply plugin: "com.facebook.react.rootproject"
+apply plugin: "com.facebook.react.rootproject"

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,5 +1,5 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.4-all.zip
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists

package.json

@@ -43,7 +43,7 @@
     "@sentry/react-native": "^5.20.0",
     "@sharcoux/slider": "^7.1.1",
     "@shopify/flash-list": "^1.6.4",
-    "@shopify/react-native-skia": "0.1.225",
+    "@shopify/react-native-skia": "1.2.0",
     "axios": "^1.6.8",
     "babel-plugin-transform-remove-console": "^6.9.4",
     "base-64": "^1.0.0",
@@ -128,15 +128,15 @@
     "@types/jest": "^29.5.12",
     "@types/md5": "^2.3.5",
     "@types/node": "^20.12.7",
-    "@types/react": "^18.2.78",
+    "@types/react": "^18.2.79",
     "@types/react-native": "^0.73.0",
     "@types/react-native-background-timer": "^2.0.2",
     "@types/react-native-share-menu": "^5.0.5",
     "@types/react-native-video": "^5.0.20",
     "@types/react-test-renderer": "^18.0.6",
     "@types/uuid": "^9.0.8",
-    "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@typescript-eslint/parser": "^7.6.0",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
     "@welldone-software/why-did-you-render": "^8.0.1",
     "argparse": "^2.0.1",
     "babel-jest": "^29.6.4",

patches/react-native-vector-icons+10.0.3.patch

@@ -0,0 +1,19 @@
+--- a/node_modules/react-native-vector-icons/fonts.gradle
++++ b/node_modules/react-native-vector-icons/fonts.gradle
+@@ -27,11 +27,15 @@ afterEvaluate {
+     android.applicationVariants.all { def variant ->
+         def targetName = variant.name.capitalize()
+         def lintVitalAnalyzeTask = tasks.findByName("lintVitalAnalyze${targetName}")
+-      
+         if (lintVitalAnalyzeTask) {
+         lintVitalAnalyzeTask.dependsOn(fontCopyTask)
+         }
+
++        def generateReportTask = tasks.findByName("generate${targetName}LintVitalReportModel")
++        if (generateReportTask) {
++            generateReportTask.dependsOn(fontCopyTask)
++        }
++
+         def generateAssetsTask = tasks.findByName("generate${targetName}Assets")
+         generateAssetsTask.dependsOn(fontCopyTask)
+       }

src/components/player/controls/ProgressWavy.tsx

@@ -13,7 +13,7 @@ export default () => {
 
   return (
     <View style={styles.waveProgressContainer}>
-      {playerSetting.wavyProgressBar && (
+      {false && playerSetting.wavyProgressBar && (
         <WaveAnimation
           playing={playWhenReady}
           progress={position / duration}

src/components/player/controls/WavyAnimation.tsx

@@ -3,12 +3,14 @@ import {
   Canvas,
   Path,
   Skia,
-  useClockValue,
-  useComputedValue,
+  useClock,
   LinearGradient,
   vec,
 } from '@shopify/react-native-skia';
-import { useDerivedValue, useSharedValue } from 'react-native-reanimated';
+import {
+  useDerivedValue as useComputedValue,
+  useSharedValue,
+} from 'react-native-reanimated';
 import { line, curveBasis } from 'd3';
 import { colord } from 'colord';
 
@@ -34,7 +36,7 @@ export default function WaveAnimation({
 }: Props) {
   const verticalOffset = useSharedValue(initialVerticalOffset);
   const amplitude = useSharedValue(initialAmplitude);
-  const clock = useClockValue();
+  const clock = useClock();
   const extrapolatedWidth = Math.max(width * progress * 0.9 - 3, 0);
   const parsedColor = colord(color);
 
@@ -66,14 +68,14 @@ export default function WaveAnimation({
   };
 
   const animatedPath = useComputedValue(() => {
-    const current = (clock.current / 500) % 255;
+    const current = (clock.value / 500) % 255;
     const start = Skia.Path.MakeFromSVGString(createWavePath(current));
     const end = Skia.Path.MakeFromSVGString(createWavePath(Math.PI * current));
     return start!.interpolate(end!, 0.5)!;
   }, [clock, verticalOffset, progress]);
 
   const animatedPath2 = useComputedValue(() => {
-    const current = (clock.current / 700) % 255;
+    const current = (clock.value / 700) % 255;
     const start = Skia.Path.MakeFromSVGString(createWavePath(current));
     const end = Skia.Path.MakeFromSVGString(createWavePath(Math.PI * current));
     return start!.interpolate(end!, 0.5)!;

src/components/playlist/SongList/SongList.tsx

@@ -45,7 +45,7 @@ const PlaylistList = () => {
   const [contentViewHeight, setContentViewHeight] = useState(0);
   const [scrollPositionY, setScrollPositionY] = useState(0);
 
-  useEffect(() => scrollTo(), [songListScrollCounter]);
+  useEffect(() => scrollTo(-1, true), [songListScrollCounter]);
 
   useFocusEffect(
     React.useCallback(() => {

src/components/playlist/usePlaylistRN.ts

@@ -118,12 +118,12 @@ export default (playlist: NoxMedia.Playlist) => {
     usedPlaylist.playSong(song, playSongCallback);
   };
 
-  const scrollTo = (toIndex = -1) => {
+  const scrollTo = (toIndex = -1, reset = false) => {
     const currentIndex =
       toIndex < 0
         ? playlist.songList.findIndex(song => song.id === currentPlayingId)
         : toIndex;
-    if (currentIndex > -1) {
+    if (currentIndex > -1 || reset) {
       playlistRef.current?.scrollToIndex({
         index: currentIndex,
         viewPosition: 0.5,

src/components/playlists/Playlists.tsx

@@ -31,6 +31,7 @@ export default () => {
   const addPlaylistButtonRef = useRef<AddPlaylistButtonRef>(null);
   const setCurrentPlaylist = useNoxSetting(state => state.setCurrentPlaylist);
   const setPlaylistIds = useNoxSetting(state => state.setPlaylistIds);
+  const scroll = useNoxSetting(state => state.incSongListScrollCounter);
   const { removePlaylist } = usePlaylistAA();
   const { TwoWayAlert } = useAlert();
   // HACK: I know its bad! But somehow this hook isnt updating in its own
@@ -51,6 +52,7 @@ export default () => {
 
   const goToPlaylist = (playlistId: string) => {
     setCurrentPlaylist(playlists[playlistId]);
+    scroll();
     navigation.navigate(NoxRoutes.Playlist as never);
   };
 

src/components/setting/appearances/SkinSettings.tsx

@@ -14,7 +14,7 @@ import {
   RadioButton,
 } from 'react-native-paper';
 import Animated, {
-  Layout,
+  LinearTransition,
   LightSpeedInLeft,
   LightSpeedOutRight,
   useAnimatedStyle,
@@ -23,7 +23,7 @@ import Animated, {
   runOnJS,
 } from 'react-native-reanimated';
 import {
-  ScrollView,
+  FlatList,
   GestureDetector,
   Gesture,
   PanGesture,
@@ -148,63 +148,65 @@ const SkinItem = ({ skin, checked, setChecked }: SkinItemProps) => {
 
   return (
     <GestureWrapper gesture={gesture}>
-      <Animated.View
-        entering={mounted.current ? LightSpeedInLeft : undefined}
-        exiting={LightSpeedOutRight}
-        layout={Layout.springify()}
-        style={animatedStyles}
-      >
-        <TouchableRipple onPress={selectTheme}>
-          <View style={styles.skinItemContainer}>
-            <View style={styles.skinItemLeftContainer}>
-              <Image
-                source={{ uri: skin.metaData.themeIcon }}
-                style={styles.skinItemImage}
-              />
-              <View style={styles.skinItemTextContainer}>
-                <Text
-                  variant={'titleMedium'}
-                  style={styles.skinTitleText}
-                  numberOfLines={1}
-                  ellipsizeMode="tail"
-                >{`${skin.metaData.themeName} by ${skin.metaData.themeAuthor}`}</Text>
-                <Text
-                  variant={'labelLarge'}
-                  style={{
-                    color: playerStyle.colors.secondary,
-                    maxWidth: '90%',
-                  }}
-                >
-                  {skin.metaData.themeDesc}
-                </Text>
-                <View style={styles.lightbulbContainer}>
-                  <IconButton
-                    icon={
-                      skin.metaData.darkTheme
-                        ? 'lightbulb-outline'
-                        : 'lightbulb-on'
-                    }
-                    size={25}
-                    style={styles.lightbulbIcon}
-                  />
+      <Animated.View layout={LinearTransition.springify()}>
+        <Animated.View
+          entering={mounted.current ? LightSpeedInLeft : undefined}
+          exiting={LightSpeedOutRight}
+          style={animatedStyles}
+        >
+          <TouchableRipple onPress={selectTheme}>
+            <View style={styles.skinItemContainer}>
+              <View style={styles.skinItemLeftContainer}>
+                <Image
+                  source={{ uri: skin.metaData.themeIcon }}
+                  style={styles.skinItemImage}
+                />
+                <View style={styles.skinItemTextContainer}>
+                  <Text
+                    variant={'titleMedium'}
+                    style={styles.skinTitleText}
+                    numberOfLines={1}
+                    ellipsizeMode="tail"
+                  >{`${skin.metaData.themeName} by ${skin.metaData.themeAuthor}`}</Text>
+                  <Text
+                    variant={'labelLarge'}
+                    style={{
+                      color: playerStyle.colors.secondary,
+                      maxWidth: '90%',
+                    }}
+                    numberOfLines={2}
+                  >
+                    {skin.metaData.themeDesc}
+                  </Text>
+                  <View style={styles.lightbulbContainer}>
+                    <IconButton
+                      icon={
+                        skin.metaData.darkTheme
+                          ? 'lightbulb-outline'
+                          : 'lightbulb-on'
+                      }
+                      size={25}
+                      style={styles.lightbulbIcon}
+                    />
+                  </View>
                 </View>
               </View>
+              <View style={styles.skinItemRightContainer}>
+                <RadioButton
+                  value={themeID}
+                  status={checked === themeID ? 'checked' : 'unchecked'}
+                  onPress={selectTheme}
+                />
+                <IconButton
+                  icon="trash-can"
+                  style={styles.deleteButton}
+                  onPress={deleteTheme}
+                  disabled={skin.builtin}
+                />
+              </View>
             </View>
-            <View style={styles.skinItemRightContainer}>
-              <RadioButton
-                value={themeID}
-                status={checked === themeID ? 'checked' : 'unchecked'}
-                onPress={selectTheme}
-              />
-              <IconButton
-                icon="trash-can"
-                style={styles.deleteButton}
-                onPress={deleteTheme}
-                disabled={skin.builtin}
-              />
-            </View>
-          </View>
-        </TouchableRipple>
+          </TouchableRipple>
+        </Animated.View>
       </Animated.View>
     </GestureWrapper>
   );
@@ -218,7 +220,7 @@ const SkinSettings = () => {
   const getThemeID = (skin: NoxTheme.Style) =>
     `${skin.metaData.themeName}.${skin.metaData.themeAuthor}`;
   const [checked, setChecked] = React.useState(getThemeID(playerStyle));
-  const scrollViewRef = React.useRef<ScrollView | null>(null);
+  const scrollViewRef = React.useRef<FlatList | null>(null);
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const loadCustomSkin = async (skins: any) => {
@@ -238,12 +240,8 @@ const SkinSettings = () => {
       theme => getThemeID(theme) === checked
     );
     if (currentThemeIndex > -1) {
-      scrollViewRef.current?.scrollTo({
-        x: 0,
-        y: Math.max(
-          0,
-          currentThemeIndex * 107 - Dimensions.get('window').height / 2
-        ),
+      scrollViewRef.current?.scrollToIndex({
+        index: currentThemeIndex,
         animated: false,
       });
     }
@@ -257,16 +255,24 @@ const SkinSettings = () => {
       ]}
     >
       <SkinSearchbar onSearched={loadCustomSkin} />
-      <ScrollView ref={scrollViewRef}>
-        {allThemes.map(item => (
+      <FlatList
+        ref={scrollViewRef}
+        data={allThemes}
+        onScrollToIndexFailed={e => console.error(e)}
+        getItemLayout={(data, index) => ({
+          length: 107,
+          offset: 107 * index,
+          index,
+        })}
+        renderItem={({ item }) => (
           <SkinItem
             skin={item}
             checked={checked}
             setChecked={setChecked}
             key={getThemeID(item)}
           />
-        ))}
-      </ScrollView>
+        )}
+      />
     </SafeAreaView>
   );
 };