Merge pull request #657 from lovegaoshi/dev

fix: artwork carousel
lovegaoshi · Nov 19, 2024 · 8073ccb · 8073ccb
2 parents a91b9cf + 8738115
commit 8073ccb
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 8 deletions.
diff --git a/src/components/commonui/HorizontalCarousel.tsx b/src/components/commonui/HorizontalCarousel.tsx
@@ -30,6 +30,7 @@ interface Props {
   paddingVertical?: number;
   callback?: (direction: number, prevIndex: number) => void;
   active?: boolean;
+  throttle?: boolean;
 }
 
 /**
@@ -43,10 +44,12 @@ export default ({
   paddingVertical = 0,
   callback = () => undefined,
   active = true,
+  throttle = true,
 }: Props) => {
   // this number is contrained to 0, 1, 2
   const carouselIndex = useSharedValue(1);
   const [mImages, setMImages] = useState(images);
+  const [throttling, setThrottling] = useState(false);
 
   const imgWidth = (imgStyle?.width as number) + paddingVertical;
   const defaultGetImgSource = (i: number, arr = images) => arr[i];
@@ -55,6 +58,12 @@ export default ({
   const activeCarouselTX = useSharedValue(0);
   const carouselXs = useSharedValue([-imgWidth, 0, imgWidth]);
 
+  const toggleThrottle = (to = true) => {
+    if (throttle) {
+      setThrottling(to);
+    }
+  };
+
   const snapToCarousel = () => {
     'worklet';
     if (Math.abs(activeCarouselTX.value) > imgWidth * 0.2) {
@@ -72,6 +81,7 @@ export default ({
             return v;
           });
           runOnJS(callback)(direction, prevIndex);
+          runOnJS(toggleThrottle)(true);
         },
       );
       return;
@@ -82,7 +92,7 @@ export default ({
   const scrollDragGesture = useMemo(
     () =>
       Gesture.Pan()
-        .enabled(active)
+        .enabled(active && !throttling)
         // swipe left and right
         .activeOffsetX([-5, 5])
         .failOffsetY([-5, 5])
@@ -127,6 +137,8 @@ export default ({
     newImages[incIndex(carouselIndex.value, 3)] = images[2];
     newImages[incIndex(carouselIndex.value, 3, false)] = images[0];
     setMImages(newImages);
+    toggleThrottle(false);
+    console.log('APM', newImages);
   }, [images]);
 
   return (

diff --git a/src/components/miniplayer/Artwork.tsx b/src/components/miniplayer/Artwork.tsx
@@ -88,7 +88,7 @@ export default ({ miniplayerHeight, opacity, onPress, expand }: Props) => {
   const refreshImageCarousel = () =>
     setTrackCarousel([
       { uri: playNextSong(-1, false)?.cover },
-      { uri: track?.song?.cover },
+      img,
       { uri: playNextSong(1, false)?.cover },
     ]);
 

diff --git a/src/components/playlists/Playlists.tsx b/src/components/playlists/Playlists.tsx
@@ -101,7 +101,7 @@ export default () => {
             backgroundColor:
               currentPlaylist.id === item
                 ? // this is a special high contrast color than primaryContainer.
-                (playerStyle.customColors.playlistDrawerBackgroundColor ??
+                  (playerStyle.customColors.playlistDrawerBackgroundColor ??
                   playerStyle.colors.primaryContainer)
                 : undefined,
           },
@@ -150,9 +150,9 @@ export default () => {
           {
             backgroundColor:
               currentPlaylist.id ===
-                playlists[StorageKeys.SEARCH_PLAYLIST_KEY]?.id
+              playlists[StorageKeys.SEARCH_PLAYLIST_KEY]?.id
                 ? // this is a special high contrast color than primaryContainer.
-                (playerStyle.customColors.playlistDrawerBackgroundColor ??
+                  (playerStyle.customColors.playlistDrawerBackgroundColor ??
                   playerStyle.colors.primaryContainer)
                 : undefined,
           },
@@ -167,7 +167,7 @@ export default () => {
           }
           leadColor={
             currentPlayingList.id ===
-              playlists[StorageKeys.SEARCH_PLAYLIST_KEY].id
+            playlists[StorageKeys.SEARCH_PLAYLIST_KEY].id
               ? playerStyle.colors.primary
               : undefined
           }
@@ -183,7 +183,7 @@ export default () => {
         <FlashDragList
           data={playlistIds}
           renderItem={renderItem}
-          itemsSize={50}
+          itemsSize={53}
           onSort={(fromIndex, toIndex) => {
             const copy = [...playlistIds];
             const removed = copy.splice(fromIndex, 1);

diff --git a/src/hooks/useVIP.ts b/src/hooks/useVIP.ts
@@ -3,12 +3,14 @@ import { useEffect } from 'react';
 import Purchases from 'react-native-purchases';
 import { create } from 'zustand';
 import { Purchases as PurchasesWeb } from '@revenuecat/purchases-js';
+import i18n from 'i18next';
 
 import { isAndroid } from '@utils/RNUtils';
 import { getUser, getHasGuard } from '@utils/Bilibili/BiliUser';
 // eslint-disable-next-line import/no-unresolved
 import { APPSTORE, REVENUECAT_GOOGLE, REVENUECAT_STRIPE } from '@env';
 import logger from '@utils/Logger';
+import { setSnackMsg } from '@stores/useSnack';
 
 const VIPKey = 'APMVIP';
 const VIPId = 'apm-pro';
@@ -25,6 +27,7 @@ const initRevenueCatWeb = async (userid?: string) => {
   const mUserid = userid ?? (await getUser()).mid;
   if (mUserid === undefined) {
     logger.error('[initRevenueCatWeb] mid is undefined');
+    setSnackMsg(i18n.t('Billing.MustLoginBilibili'));
     throw new Error('[initRevenueCatWeb] mid is undefined');
   }
   isRevenueCatInitialized = true;

diff --git a/src/stores/useSnack.ts b/src/stores/useSnack.ts
@@ -28,7 +28,7 @@ export enum SnackType {
   Processing = 'processing',
 }
 
-export default create<NoxSnack>((set, get) => ({
+const useSnack = create<NoxSnack>((set, get) => ({
   snackMsg: 'The quick brown fox jumps over the lazy dog.',
   snackVisible: false,
   snackType: SnackType.Success,
@@ -97,3 +97,10 @@ export default create<NoxSnack>((set, get) => ({
     });
   },
 }));
+
+export const setSnackMsg = (msg: string) =>
+  useSnack.getState().setSnack({
+    snackMsg: { success: msg },
+  });
+
+export default useSnack;