feat: crossfade

package.json

@@ -39,8 +39,8 @@
     "@react-navigation/material-top-tabs": "^6.6.14",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/native-stack": "^6.11.0",
-    "@sentry/react-native": "^6.0.0",
-    "@sharcoux/slider": "^7.2.1",
+    "@sentry/react-native": "^6.1.0",
+    "@sharcoux/slider": "^8.0.1",
     "@shopify/flash-list": "^1.7.1",
     "@shopify/react-native-skia": "1.5.0",
     "axios": "^1.7.7",
@@ -67,7 +67,7 @@
     "fflate": "^0.8.2",
     "ffmpeg-kit-react-native": "^6.0.2",
     "he": "^1.2.0",
-    "i18next": "^23.16.0",
+    "i18next": "^23.16.2",
     "js-base64": "^3.7.7",
     "libmuse": "https://github.com/lovegaoshi/muse.git#commit=0bffe2319baf825037bece6869d360d6d307eb72",
     "lottie-react-native": "7.0.0",
@@ -78,7 +78,7 @@
     "postinstall-postinstall": "^2.1.0",
     "qs": "^6.13.0",
     "react": "18.3.1",
-    "react-i18next": "^15.0.3",
+    "react-i18next": "^15.1.0",
     "react-native": "0.75.4",
     "react-native-app-auth": "^8.0.0",
     "react-native-background-timer": "git+https://github.com/lovegaoshi/react-native-background-timer.git",
@@ -87,14 +87,14 @@
     "react-native-carplay": "2.4.1-beta.0",
     "react-native-device-info": "^13.1.0",
     "react-native-draggable-flatlist": "^4.0.1",
-    "react-native-gesture-handler": "2.20.0",
+    "react-native-gesture-handler": "2.20.1",
     "react-native-get-random-values": "^1.11.0",
     "react-native-image-colors": "^2.4.0",
     "react-native-lyric": "git+https://github.com/lovegaoshi/react-native-lyric.git#dev",
     "react-native-pager-view": "6.4.1",
     "react-native-paper": "^5.12.5",
     "react-native-qrcode-svg": "^6.3.12",
-    "react-native-reanimated": "3.16.0",
+    "react-native-reanimated": "3.16.1",
     "react-native-safe-area-context": "^4.11.1",
     "react-native-screens": "3.34.0",
     "react-native-shadow-2": "^7.1.0",
@@ -103,7 +103,7 @@
     "react-native-svga-player": "https://lovegaoshi@github.com/lovegaoshi/react-native-svga-player.git#commit=f8c6303fddb528a1a94d2ab4696c9318c0002cfd",
     "react-native-tab-view": "^3.5.2",
     "react-native-text-ticker": "https://lovegaoshi@github.com/lovegaoshi/react-native-text-ticker.git#commit=2e7306a4b8d3014b852629a0afe675a35b3de1b1",
-    "react-native-track-player": "https://github.com/lovegaoshi/react-native-track-player.git#commit=687f52247e891e3abfb313648620647f8661bdd1",
+    "react-native-track-player": "https://github.com/lovegaoshi/react-native-track-player.git#commit=9d4b6e6c0d7e12a783ec898a7fcb2e5c4ba902c0",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-vector-icons": "^10.2.0",
     "react-native-video": "^6.7.0",
@@ -121,22 +121,22 @@
     "metro": "^0.80.12"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.8",
-    "@babel/plugin-syntax-import-attributes": "^7.25.7",
-    "@babel/plugin-transform-export-namespace-from": "^7.25.8",
-    "@babel/plugin-transform-private-methods": "^7.25.7",
-    "@babel/preset-env": "^7.25.8",
-    "@babel/preset-typescript": "^7.25.7",
-    "@babel/runtime": "^7.25.7",
+    "@babel/core": "^7.25.9",
+    "@babel/plugin-syntax-import-attributes": "^7.25.9",
+    "@babel/plugin-transform-export-namespace-from": "^7.25.9",
+    "@babel/plugin-transform-private-methods": "^7.25.9",
+    "@babel/preset-env": "^7.25.9",
+    "@babel/preset-typescript": "^7.25.9",
+    "@babel/runtime": "^7.25.9",
     "@react-native-community/eslint-config": "^3.2.0",
     "@tsconfig/react-native": "^3.0.5",
     "@types/base-64": "^1.0.2",
     "@types/d3": "^7.4.3",
     "@types/he": "^1.2.3",
-    "@types/jest": "^29.5.13",
+    "@types/jest": "^29.5.14",
     "@types/md5": "^2.3.5",
-    "@types/node": "^22.7.7",
-    "@types/react": "~18.3.11",
+    "@types/node": "^22.7.9",
+    "@types/react": "~18.3.12",
     "@types/react-native": "^0.73.0",
     "@types/react-native-background-timer": "^2.0.2",
     "@types/react-native-share-menu": "^5.0.5",
@@ -158,9 +158,9 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "gts": "^6.0.0",
+    "gts": "^6.0.1",
     "jest": "^29.7.0",
     "metro-react-native-babel-preset": "0.77.0",
     "prettier": "^3.3.3",
@@ -175,5 +175,5 @@
     "node": ">=18.0.0"
   },
   "isSwift": true,
-  "packageManager": "yarn@4.5.0"
-}
+  "packageManager": "yarn@4.5.1"
+}

src/components/player/controls/usePlayerControls.ts

@@ -14,18 +14,25 @@ import appStore, { getABRepeatRaw, setCurrentPlaying } from '@stores/appStore';
 import noxPlayingList from '@stores/playingList';
 import { NoxRepeatMode } from '@enums/RepeatMode';
 import usePlaylistCRUD from '@hooks/usePlaylistCRUD';
+import { getR128Gain } from '@utils/ffmpeg/r128Store';
 
 const { getState } = noxPlayingList;
 const { fadeIntervalMs, fadeIntervalSec } = appStore.getState();
 
 export default () => {
-  const { performSkipToNext, performSkipToPrevious } = useTPControls();
+  const { performSkipToNext, performSkipToPrevious, prepareSkipToNext } =
+    useTPControls();
   const [abRepeat, setABRepeat] = React.useState<[number, number]>([0, 1]);
   const [bRepeatDuration, setBRepeatDuration] = React.useState(9999);
   const { updateCurrentSongMetadata, updateCurrentSongMetadataReceived } =
     usePlaylistCRUD();
   const track = useActiveTrack();
   const updateTrack = useNoxSetting(state => state.updateTrack);
+  const crossfadeId = useNoxSetting(state => state.crossfadeId);
+  const setCrossfadeId = useNoxSetting(state => state.setCrossfadeId);
+  const crossfadeInterval = useNoxSetting(
+    state => state.playerSetting,
+  ).crossfade;
   const loadingTracker = React.useRef(false);
 
   useTrackPlayerEvents([Event.MetadataCommonReceived], async event => {
@@ -54,15 +61,42 @@ export default () => {
     updateCurrentSongMetadataReceived({ metadata: newMetadata });
   });
 
-  useTrackPlayerEvents([Event.PlaybackProgressUpdated], event => {
+  useTrackPlayerEvents([Event.PlaybackProgressUpdated], async event => {
+    const playmode = getState().playmode;
     saveLastPlayDuration(event.position);
+    // prepare for cross fading if enabled, playback is > 50% done and crossfade preparation isnt done
     if (
-      fadeIntervalSec > 0 &&
-      event.duration > 0 &&
-      event.position >
-        Math.min(bRepeatDuration, event.duration) - fadeIntervalSec
+      crossfadeInterval > 0 &&
+      event.position > event.duration * 0.5 &&
+      crossfadeId !== (track?.song?.id ?? '')
     ) {
-      if (getState().playmode !== NoxRepeatMode.RepeatTrack) {
+      logger.debug('[crossfade] preparing crossfade');
+      await prepareSkipToNext();
+      setCrossfadeId(track?.song?.id ?? '');
+      return TrackPlayer.crossFadePrepare();
+    }
+
+    // if fade or crossfade should be triggered
+    if (event.duration > 0 && playmode !== NoxRepeatMode.RepeatTrack) {
+      const trueDuration = Math.min(bRepeatDuration, event.duration);
+      if (
+        crossfadeInterval > 0 &&
+        event.position > trueDuration - crossfadeInterval &&
+        crossfadeId === (track?.song?.id ?? '')
+      ) {
+        logger.debug(
+          `[crossfade] crossfading: ${event.position}, ${trueDuration}, ${crossfadeInterval}`,
+        );
+        return TrackPlayer.crossFade(
+          crossfadeInterval * 1000,
+          20,
+          getR128Gain(track?.song) ?? 1,
+        );
+      }
+      if (
+        fadeIntervalSec > 0 &&
+        event.position > trueDuration - fadeIntervalSec
+      ) {
         logger.debug(
           `[FADEOUT] fading out....${event.position} / ${event.duration}`,
         );
@@ -74,7 +108,7 @@ export default () => {
     }
     if (abRepeat[1] === 1) return;
     if (event.position > bRepeatDuration) {
-      if (getState().playmode === NoxRepeatMode.RepeatTrack) {
+      if (playmode === NoxRepeatMode.RepeatTrack) {
         TrackPlayer.seekTo(abRepeat[0] * event.duration);
         return;
       }

src/components/setting/DeveloperSettings.tsx

@@ -53,6 +53,7 @@ enum VIEW {
 const Stack = createNativeStackNavigator();
 
 const FadeOptions = [0, 250, 500, 1000];
+const CrossFadeOptions = [0, 2500, 5000, 7500, 12000];
 
 const developerSettings: { [key: string]: SettingEntry } = {
   noInterruption: {
@@ -152,6 +153,23 @@ const Home = ({ navigation }: NoxComponent.NavigationProps) => {
     } as SelectSettingEntry<number>);
   };
 
+  const selectCrossFade = () => {
+    setSelectVisible(true);
+    setCurrentSelectOption({
+      options: CrossFadeOptions,
+      renderOption: (option: number) => String(option),
+      defaultIndex: 0,
+      onClose: () => setSelectVisible(false),
+      onSubmit: (index: number) => {
+        setPlayerSetting({ crossfade: CrossFadeOptions[index] / 1000 }).then(
+          Sentry.nativeCrash,
+        );
+        setSelectVisible(false);
+      },
+      title: t('DeveloperSettings.crossfadeTitle'),
+    } as SelectSettingEntry<number>);
+  };
+
   const selectCacheLevel = () => {
     setSelectVisible(true);
     const options = [
@@ -243,6 +261,17 @@ const Home = ({ navigation }: NoxComponent.NavigationProps) => {
             settingCategory="DeveloperSettings"
             modifyDescription={val => `${val}: ${fadeIntervalMs}ms`}
           />
+          {isAndroid && (
+            <SettingListItem
+              icon={Icons.fade}
+              settingName="crossfade"
+              onPress={selectCrossFade}
+              settingCategory="DeveloperSettings"
+              modifyDescription={v =>
+                `${v}: ${playerSetting.crossfade * 1000}ms`
+              }
+            />
+          )}
           <SettingListItem
             icon={Icons.cache}
             settingName="CacheSize"

src/components/styles/NoxTheme.ts

@@ -9,6 +9,8 @@ export default {
   },
 
   gifs: [
+    'https://i0.hdslb.com/bfs/new_dyn/660db3d9243d94770f676d7d842b70d01363140950.gif',
+    'https://i0.hdslb.com/bfs/new_dyn/e56e8630033c018a94406e15f75e717f1363140950.gif',
     'https://i1.hdslb.com/bfs/new_dyn/705cfa8cf81ab08b8dd7e92f2fb506c225818366.png',
     'https://i1.hdslb.com/bfs/new_dyn/ad6b3bdd85b3fd04a01e7234ea2a108525818366.png',
     'https://i1.hdslb.com/bfs/new_dyn/4910d70346edc5186412f2498a76b53125818366.png',

src/hooks/useSetupPlayer.ts

@@ -25,6 +25,8 @@ const initializePlayer = async (safeMode = false) => {
     keepForeground: storedPlayerSetting.keepForeground,
     lastPlayDuration,
     currentPlayingID,
+    parseEmbeddedArtwork: storedPlayerSetting.parseEmbeddedArtwork,
+    crossfade: storedPlayerSetting.crossfade,
   };
   await SetupService(serviceOptions);
   buildBrowseTree(playlists);

src/hooks/useTPControls.ts

@@ -170,6 +170,7 @@ export default () => {
   return {
     performFade: (callback: () => void) =>
       performFade(callback, fadeIntervalMs),
+    prepareSkipToNext: () => prepareSkipToNext(mSkipToBiliSuggest),
     performSkipToNext: (auto = false) =>
       performSkipToNext(
         auto,

src/localization/en/translation.json

@@ -153,6 +153,9 @@
     "FadeName": "Fade In/out",
     "FadeDesc": "Set Fade In/out interval (need restart)",
     "FadeTitle": "Set Fade In/out (ms)",
+    "crossfadeName": "Crossfade",
+    "crossfadeDesc": "enable crossfading (need restart).",
+    "crossfadeTitle": "Set Fade In/out (ms)",
     "VersionCheckName": "Check Version",
     "VersionCheckDesc": "Check latest version released on github.",
     "noInterruptionName": "No Interruption",

src/localization/zhcn/translation.json

@@ -165,6 +165,9 @@
     "FadeName": "淡入淡出",
     "FadeDesc": "淡入淡出区间（需重启）",
     "FadeTitle": "设置淡入淡出 (毫秒)",
+    "crossfadeName": "交叉渐变",
+    "crossfadeDesc": "交叉渐变区间（需重启）",
+    "crossfadeTitle": "设置交叉渐变 (毫秒)",
     "VersionCheckName": "检查版本",
     "VersionCheckDesc": "检查github上发布的版本",
     "noInterruptionName": "不自动中断播放",

src/objects/Storage.ts

@@ -46,6 +46,7 @@ export const DefaultSetting: NoxStorage.PlayerSettingDict = {
   audioOffload: true,
   parseEmbeddedArtwork: false,
   skipSilence: false,
+  crossfade: 0,
 
   appID: AppID,
   language: undefined,

src/services/SetupService.ts

@@ -31,8 +31,10 @@ export const SetupService = async ({
   audioOffload = true,
   skipSilence = false,
   parseEmbeddedArtwork = false,
+  crossfade = 0,
 }: Partial<NoxStorage.PlayerSettingDict>) => {
   await setupPlayer({
+    crossfade: crossfade !== 0,
     autoHandleInterruptions: noInterruption ? false : true,
     androidSkipSilence: skipSilence,
     androidParseEmbeddedArtwork: parseEmbeddedArtwork,

src/stores/useApp.ts

@@ -29,6 +29,9 @@ import { IntentData } from '@enums/Intent';
 import { BottomTabRouteIcons } from '@enums/BottomTab';
 
 interface NoxSetting {
+  crossfadeId: string;
+  setCrossfadeId: (val: string) => void;
+
   shawarmaVoice: string | undefined;
   setShawarmaVoice: (val: string | undefined) => void;
   bottomTabRoute: BottomTabRouteIcons;
@@ -140,6 +143,9 @@ interface NoxSetting {
  * as well as saving and loading states to/from asyncStorage.
  */
 export const useNoxSetting = create<NoxSetting>((set, get) => ({
+  crossfadeId: '',
+  setCrossfadeId: v => set({ crossfadeId: v }),
+
   shawarmaVoice: undefined,
   setShawarmaVoice: v => set({ shawarmaVoice: v }),
 

src/types/storage.d.ts

@@ -47,6 +47,7 @@ declare global {
       audioOffload?: boolean;
       skipSilence: boolean;
       parseEmbeddedArtwork: boolean;
+      crossfade: number;
 
       appID: string;
       language?: string;