From 8738115a8b3c7726dc4d322ca2c2a337ac728b53 Mon Sep 17 00:00:00 2001 From: lovegaoshi <106490582+lovegaoshi@users.noreply.github.com> Date: Tue, 19 Nov 2024 13:02:40 -0800 Subject: [PATCH] fix: artwork carousel FML. --- src/components/commonui/HorizontalCarousel.tsx | 14 +++++++++++++- src/components/miniplayer/Artwork.tsx | 2 +- src/components/playlists/Playlists.tsx | 10 +++++----- src/hooks/useVIP.ts | 3 +++ src/stores/useSnack.ts | 9 ++++++++- 5 files changed, 30 insertions(+), 8 deletions(-) diff --git a/src/components/commonui/HorizontalCarousel.tsx b/src/components/commonui/HorizontalCarousel.tsx index e60031065..9872fc934 100644 --- 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 index 3087f00d4..b52a9418a 100644 --- 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 index 6be489299..5a0b02cc9 100644 --- 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 () => { { const copy = [...playlistIds]; const removed = copy.splice(fromIndex, 1); diff --git a/src/hooks/useVIP.ts b/src/hooks/useVIP.ts index a34b57434..9ff662ec0 100644 --- 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 index f06358e91..7d1514205 100644 --- a/src/stores/useSnack.ts +++ b/src/stores/useSnack.ts @@ -28,7 +28,7 @@ export enum SnackType { Processing = 'processing', } -export default create((set, get) => ({ +const useSnack = create((set, get) => ({ snackMsg: 'The quick brown fox jumps over the lazy dog.', snackVisible: false, snackType: SnackType.Success, @@ -97,3 +97,10 @@ export default create((set, get) => ({ }); }, })); + +export const setSnackMsg = (msg: string) => + useSnack.getState().setSnack({ + snackMsg: { success: msg }, + }); + +export default useSnack;