refactor: APMPlayback

src/components/player/controls/usePlayerControls.ts

@@ -29,9 +29,14 @@ const { fadeIntervalMs, fadeIntervalSec } = appStore.getState();
 export default () => {
   const { performSkipToNext, performSkipToPrevious, prepareSkipToNext } =
     useTPControls();
-  const [abRepeat, setABRepeat] = React.useState<[number, number]>([0, 1]);
-  const [bRepeatDuration, setBRepeatDuration] = React.useState(9999);
-  const [crossfadingId, setCrossfadingId] = React.useState('');
+
+  const abRepeat = useNoxSetting(state => state.abRepeat);
+  const setABRepeat = useNoxSetting(state => state.setABRepeat);
+  const bRepeatDuration = useNoxSetting(state => state.bRepeatDuration);
+  const setBRepeatDuration = useNoxSetting(state => state.setBRepeatDuration);
+  const crossfadingId = useNoxSetting(state => state.crossfadingId);
+  const setCrossfadingId = useNoxSetting(state => state.setCrossfadingId);
+
   const { updateCurrentSongMetadata, updateCurrentSongMetadataReceived } =
     usePlaylistCRUD();
   const track = useTrackStore(state => state.track);
@@ -86,19 +91,13 @@ export default () => {
       );
       await prepareSkipToNext();
       setCrossfadeId(track?.song?.id ?? '');
+      setBRepeatDuration(event.duration * abRepeat[1]);
       return TrackPlayer.crossFadePrepare();
     }
 
     // if fade or crossfade should be triggered
     if (event.duration > 0 && playmode !== NoxRepeatMode.RepeatTrack) {
-      let trueDuration = Math.min(bRepeatDuration, event.duration);
-      if (trueDuration === 0) {
-        logger.warn(
-          `[crossfade] true duration is 0?! reset to ${event.duration} instead. ${bRepeatDuration}, ${abRepeat}.`,
-        );
-        trueDuration = event.duration * abRepeat[1];
-        setBRepeatDuration(trueDuration);
-      }
+      const trueDuration = Math.min(bRepeatDuration, event.duration);
       if (
         // crossfade req: position is at crossfade interval,
         // crossfade song prepared, not in crossfading

src/stores/useAPMPlayback.ts

@@ -0,0 +1,39 @@
+import { StateCreator } from 'zustand';
+
+// playback store that supports ABRepeat and crossfade (APM only features)
+export interface APMPlaybackStore {
+  crossfadeId: string;
+  setCrossfadeId: (val: string) => void;
+
+  currentABRepeat: [number, number];
+  setCurrentABRepeat: (val: [number, number]) => void;
+
+  abRepeat: [number, number];
+  setABRepeat: (val: [number, number]) => void;
+  bRepeatDuration: number;
+  setBRepeatDuration: (val: number) => void;
+  crossfadingId: string;
+  setCrossfadingId: (val: string) => void;
+}
+
+const store: StateCreator<
+  APMPlaybackStore,
+  [],
+  [],
+  APMPlaybackStore
+> = set => ({
+  crossfadeId: '',
+  setCrossfadeId: v => set({ crossfadeId: v }),
+
+  currentABRepeat: [0, 1],
+  setCurrentABRepeat: val => set({ currentABRepeat: val }),
+
+  abRepeat: [0, 1],
+  setABRepeat: val => set({ abRepeat: val }),
+  bRepeatDuration: 9999,
+  setBRepeatDuration: val => set({ bRepeatDuration: val }),
+  crossfadingId: '',
+  setCrossfadingId: val => set({ crossfadingId: val }),
+});
+
+export default store;

src/stores/useApp.ts

@@ -19,15 +19,15 @@ import createAPMUI, { APMUIStore } from './useAPMUI';
 import createUI, { UIStore } from './useUI';
 import createPlaylists, { PlaylistsStore } from './usePlaylists';
 import createMFsdk, { MFsdkStore } from './useMFsdk';
+import createAPMPlayback, { APMPlaybackStore } from './useAPMPlayback';
 import { initMFsdk } from '@utils/mfsdk';
 
-interface NoxSetting extends APMUIStore, UIStore, PlaylistsStore, MFsdkStore {
-  crossfadeId: string;
-  setCrossfadeId: (val: string) => void;
-
-  currentABRepeat: [number, number];
-  setCurrentABRepeat: (val: [number, number]) => void;
-
+interface NoxSetting
+  extends APMUIStore,
+    UIStore,
+    PlaylistsStore,
+    MFsdkStore,
+    APMPlaybackStore {
   getPlaylist: (
     val: string,
     dVal?: NoxMedia.Playlist,
@@ -68,12 +68,7 @@ export const useNoxSetting = create<NoxSetting>((set, get, storeApi) => ({
   ...createUI(set, get, storeApi),
   ...createPlaylists(set, get, storeApi),
   ...createMFsdk(set, get, storeApi),
-
-  crossfadeId: '',
-  setCrossfadeId: v => set({ crossfadeId: v }),
-
-  currentABRepeat: [0, 1],
-  setCurrentABRepeat: val => set({ currentABRepeat: val }),
+  ...createAPMPlayback(set, get, storeApi),
 
   getPlaylist: async (v, d) => {
     const {