Feat/play detail page ux

src/components/base/tag.tsx

@@ -27,10 +27,10 @@ export default function Tag(props: ITagProps) {
 
 const styles = StyleSheet.create({
     tag: {
-        height: rpx(32),
         marginLeft: rpx(12),
         paddingHorizontal: rpx(12),
-        borderRadius: rpx(24),
+        borderRadius: rpx(12),
+        paddingVertical: rpx(4),
         justifyContent: "center",
         alignItems: "center",
         flexShrink: 0,

src/components/mediaItem/musicItem.tsx

@@ -54,7 +54,7 @@ export default function MusicItem(props: IMusicItemProps) {
             {Left ? <Left /> : null}
             {index !== undefined ? (
                 <ListItem.ListItemText
-                    width={rpx(82)}
+                    width={rpx(86)}
                     position="none"
                     fixedWidth
                     fontColor={highlight ? "primary" : "text"}

src/pages/musicDetail/components/content/albumCover/index.tsx

@@ -9,27 +9,24 @@ import globalStyle from "@/constants/globalStyle";
 import { View } from "react-native";
 import Operations from "./operations";
 import { showPanel } from "@/components/panels/usePanel.ts";
+import MusicInfo from "./musicInfo";
 
-interface IProps {
-    onTurnPageClick?: () => void;
-}
-
-export default function AlbumCover(props: IProps) {
-    const { onTurnPageClick } = props;
-
+export default function AlbumCover() {
     const musicItem = useCurrentMusic();
     const orientation = useOrientation();
 
     const artworkStyle = useMemo(() => {
         if (orientation === "vertical") {
             return {
-                width: rpx(500),
-                height: rpx(500),
+                width: rpx(600),
+                height: rpx(600),
+                borderRadius: rpx(28),
             };
         } else {
             return {
                 width: rpx(260),
                 height: rpx(260),
+                borderRadius: rpx(12),
             };
         }
     }, [orientation]);
@@ -44,17 +41,9 @@ export default function AlbumCover(props: IProps) {
         })
         .runOnJS(true);
 
-    const tap = Gesture.Tap()
-        .onStart(() => {
-            onTurnPageClick?.();
-        })
-        .runOnJS(true);
-
-    const combineGesture = Gesture.Race(tap, longPress);
-
     return (
-        <>
-            <GestureDetector gesture={combineGesture}>
+        <View style={globalStyle.fwflex1}>
+            <GestureDetector gesture={longPress}>
                 <View style={globalStyle.fullCenter}>
                     <FastImage
                         style={artworkStyle}
@@ -63,7 +52,8 @@ export default function AlbumCover(props: IProps) {
                     />
                 </View>
             </GestureDetector>
+            <MusicInfo />
             <Operations />
-        </>
+        </View>
     );
 }

src/pages/musicDetail/components/content/albumCover/musicInfo.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
+import rpx from "@/utils/rpx";
+import Tag from "@/components/base/tag";
+import { fontSizeConst, fontWeightConst } from "@/constants/uiConst";
+import TrackPlayer, { useCurrentMusic, useMusicQuality } from "@/core/trackPlayer";
+import { showPanel } from "@/components/panels/usePanel";
+import Toast from "@/utils/toast";
+import i18n from "@/core/i18n";
+
+export default function MusicInfo() {
+    const musicItem = useCurrentMusic();
+    const currentQuality = useMusicQuality();
+
+    const onQualityPress = () => {
+        if (!musicItem) {
+            return;
+        }
+        showPanel("MusicQuality", {
+            musicItem,
+            async onQualityPress(quality) {
+                const changeResult =
+                    await TrackPlayer.changeQuality(quality);
+                if (!changeResult) {
+                    Toast.warn(i18n.t("toast.currentQualityNotAvailableForCurrentMusic"));
+                }
+            },
+        });
+    };
+
+    return (
+        <View style={styles.infoContainer}>
+            <Text numberOfLines={2} style={styles.titleText}>
+                {musicItem?.title ?? "--"}
+            </Text>
+            <View style={styles.descContainer}>
+                <Text style={styles.artistText} numberOfLines={1}>
+                    {musicItem?.artist}
+                </Text>
+                {currentQuality ? (
+                    <TouchableOpacity onPress={onQualityPress} activeOpacity={0.7} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
+                        <Tag
+                            tagName={i18n.t(`musicQuality.${currentQuality}`)}
+                            containerStyle={[styles.tagBg, styles.qualityTag]}
+                            style={styles.tagText}
+                        />
+                    </TouchableOpacity>
+                ) : null}
+                {musicItem?.platform ? (
+                    <Tag
+                        tagName={musicItem.platform}
+                        containerStyle={styles.tagBg}
+                        style={styles.tagText}
+                    />
+                ) : null}
+
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    infoContainer: {
+        width: "100%",
+        paddingHorizontal: rpx(48),
+        marginBottom: rpx(48),
+        alignItems: "flex-start",
+    },
+    titleText: {
+        color: "white",
+        fontWeight: fontWeightConst.semibold,
+        fontSize: fontSizeConst.title,
+        marginBottom: rpx(16),
+    },
+    descContainer: {
+        flexDirection: "row",
+        alignItems: "center",
+        maxWidth: "100%",
+    },
+    artistText: {
+        color: "rgba(255,255,255,0.8)",
+        fontSize: fontSizeConst.subTitle,
+        marginRight: rpx(12),
+        flexShrink: 1,
+    },
+    tagBg: {
+        backgroundColor: "rgba(255, 255, 255, 0.2)",
+    },
+    tagText: {
+        color: "white",
+    },
+    qualityTag: {
+        marginLeft: rpx(12),
+    },
+});

src/pages/musicDetail/components/content/albumCover/operations.tsx

@@ -5,11 +5,10 @@ import rpx from "@/utils/rpx";
 import LocalMusicSheet from "@/core/localMusicSheet";
 import { ROUTE_PATH } from "@/core/router";
 import { ImgAsset } from "@/constants/assetsConst";
-import Toast from "@/utils/toast";
 import toast from "@/utils/toast";
 import useOrientation from "@/hooks/useOrientation";
 import { showPanel } from "@/components/panels/usePanel";
-import TrackPlayer, { useCurrentMusic, useMusicQuality } from "@/core/trackPlayer";
+import TrackPlayer, { useCurrentMusic } from "@/core/trackPlayer";
 import { iconSizeConst } from "@/constants/uiConst";
 import PersistStatus from "@/utils/persistStatus";
 import HeartIcon from "../heartIcon";
@@ -20,7 +19,6 @@ import i18n from "@/core/i18n";
 
 export default function Operations() {
     const musicItem = useCurrentMusic();
-    const currentQuality = useMusicQuality();
     const isDownloaded = LocalMusicSheet.useIsLocal(musicItem);
 
     const rate = PersistStatus.useValue("music.rate", 100);
@@ -39,27 +37,6 @@ export default function Operations() {
                 orientation === "horizontal" ? styles.horizontalWrapper : null,
             ]}>
             <HeartIcon />
-            <Pressable
-                onPress={() => {
-                    if (!musicItem) {
-                        return;
-                    }
-                    showPanel("MusicQuality", {
-                        musicItem,
-                        async onQualityPress(quality) {
-                            const changeResult =
-                                await TrackPlayer.changeQuality(quality);
-                            if (!changeResult) {
-                                Toast.warn(i18n.t("toast.currentQualityNotAvailableForCurrentMusic"));
-                            }
-                        },
-                    });
-                }}>
-                <Image
-                    source={ImgAsset.quality[currentQuality]}
-                    style={styles.quality}
-                />
-            </Pressable>
             <Icon
                 name={isDownloaded ? "check-circle-outline" : "arrow-down-tray"}
                 size={iconSizeConst.normal}

src/pages/musicDetail/components/content/index.tsx

@@ -1,36 +1,47 @@
-import React, { useState } from "react";
+import React, { useRef, useEffect } from "react";
 import { View } from "react-native";
+import PagerView from "react-native-pager-view";
 import AlbumCover from "./albumCover";
 import Lyric from "./lyric";
 import useOrientation from "@/hooks/useOrientation";
-import Config from "@/core/appConfig";
 import globalStyle from "@/constants/globalStyle";
 
-export default function Content() {
-    const [tab, selectTab] = useState<"album" | "lyric">(
-        Config.getConfig("basic.musicDetailDefault") || "album",
-    );
+interface IProps {
+    pageIndex: number;
+    onPageSelected: (index: number) => void;
+}
+
+export default function Content({ pageIndex, onPageSelected }: IProps) {
     const orientation = useOrientation();
-    const showAlbumCover = tab === "album" || orientation === "horizontal";
+    const pagerRef = useRef<PagerView>(null);
 
-    const onTurnPageClick = () => {
-        if (orientation === "horizontal") {
-            return;
+    useEffect(() => {
+        if (orientation !== "horizontal") {
+            pagerRef.current?.setPage(pageIndex);
         }
-        if (tab === "album") {
-            selectTab("lyric");
-        } else {
-            selectTab("album");
-        }
-    };
+    }, [pageIndex, orientation]);
+
+    if (orientation === "horizontal") {
+        return (
+            <View style={globalStyle.fwflex1}>
+                <AlbumCover />
+            </View>
+        );
+    }
 
     return (
-        <View style={globalStyle.fwflex1}>
-            {showAlbumCover ? (
-                <AlbumCover onTurnPageClick={onTurnPageClick} />
-            ) : (
-                <Lyric onTurnPageClick={onTurnPageClick} />
-            )}
-        </View>
+        <PagerView
+            style={globalStyle.fwflex1}
+            initialPage={pageIndex}
+            onPageSelected={(e) => onPageSelected(e.nativeEvent.position)}
+            ref={pagerRef}
+        >
+            <View key="album" style={globalStyle.fwflex1}>
+                <AlbumCover />
+            </View>
+            <View key="lyric" style={globalStyle.fwflex1}>
+                <Lyric />
+            </View>
+        </PagerView>
     );
 }