xref: /MusicFree/src/pages/musicDetail/components/content/albumCover/index.tsx (revision 13cebe639f366cc764bcbd619c248f8037fbbb8f)
1*13cebe63S猫头猫import React, {useMemo} from 'react';
2*13cebe63S猫头猫import rpx from '@/utils/rpx';
3*13cebe63S猫头猫import {ImgAsset} from '@/constants/assetsConst';
4*13cebe63S猫头猫import FastImage from '@/components/base/fastImage';
5*13cebe63S猫头猫import useOrientation from '@/hooks/useOrientation';
6*13cebe63S猫头猫import {Gesture, GestureDetector} from 'react-native-gesture-handler';
7*13cebe63S猫头猫import imageViewer from '@/components/imageViewer';
8*13cebe63S猫头猫import TrackPlayer from '@/core/trackPlayer';
9*13cebe63S猫头猫import globalStyle from '@/constants/globalStyle';
10*13cebe63S猫头猫import {View} from 'react-native';
11*13cebe63S猫头猫import Operations from './operations';
12*13cebe63S猫头猫
13*13cebe63S猫头猫interface IProps {
14*13cebe63S猫头猫    onTurnPageClick?: () => void;
15*13cebe63S猫头猫}
16*13cebe63S猫头猫
17*13cebe63S猫头猫export default function AlbumCover(props: IProps) {
18*13cebe63S猫头猫    const {onTurnPageClick} = props;
19*13cebe63S猫头猫
20*13cebe63S猫头猫    const musicItem = TrackPlayer.useCurrentMusic();
21*13cebe63S猫头猫    const orientation = useOrientation();
22*13cebe63S猫头猫
23*13cebe63S猫头猫    const artworkStyle = useMemo(() => {
24*13cebe63S猫头猫        if (orientation === 'vertical') {
25*13cebe63S猫头猫            return {
26*13cebe63S猫头猫                width: rpx(500),
27*13cebe63S猫头猫                height: rpx(500),
28*13cebe63S猫头猫            };
29*13cebe63S猫头猫        } else {
30*13cebe63S猫头猫            return {
31*13cebe63S猫头猫                width: rpx(260),
32*13cebe63S猫头猫                height: rpx(260),
33*13cebe63S猫头猫            };
34*13cebe63S猫头猫        }
35*13cebe63S猫头猫    }, [orientation]);
36*13cebe63S猫头猫
37*13cebe63S猫头猫    const longPress = Gesture.LongPress()
38*13cebe63S猫头猫        .onStart(() => {
39*13cebe63S猫头猫            if (musicItem?.artwork) {
40*13cebe63S猫头猫                imageViewer.show(musicItem.artwork);
41*13cebe63S猫头猫            }
42*13cebe63S猫头猫        })
43*13cebe63S猫头猫        .runOnJS(true);
44*13cebe63S猫头猫
45*13cebe63S猫头猫    const tap = Gesture.Tap()
46*13cebe63S猫头猫        .onStart(() => {
47*13cebe63S猫头猫            onTurnPageClick?.();
48*13cebe63S猫头猫        })
49*13cebe63S猫头猫        .runOnJS(true);
50*13cebe63S猫头猫
51*13cebe63S猫头猫    const combineGesture = Gesture.Race(tap, longPress);
52*13cebe63S猫头猫
53*13cebe63S猫头猫    return (
54*13cebe63S猫头猫        <>
55*13cebe63S猫头猫            <GestureDetector gesture={combineGesture}>
56*13cebe63S猫头猫                <View style={globalStyle.fullCenter}>
57*13cebe63S猫头猫                    <FastImage
58*13cebe63S猫头猫                        style={artworkStyle}
59*13cebe63S猫头猫                        uri={musicItem?.artwork}
60*13cebe63S猫头猫                        emptySrc={ImgAsset.albumDefault}
61*13cebe63S猫头猫                    />
62*13cebe63S猫头猫                </View>
63*13cebe63S猫头猫            </GestureDetector>
64*13cebe63S猫头猫            <Operations />
65*13cebe63S猫头猫        </>
66*13cebe63S猫头猫    );
67*13cebe63S猫头猫}
68