1import React, {useState} from 'react'; 2import {StyleSheet, View} from 'react-native'; 3import AlbumCover from './albumCover'; 4import Lyric from './lyric'; 5import {TapGestureHandler} from 'react-native-gesture-handler'; 6import useOrientation from '@/hooks/useOrientation'; 7import Config from '@/core/config'; 8import Operations from './operations'; 9import LyricOperations from './lyricOperations'; 10 11export default function Content() { 12 const [tab, selectTab] = useState<'album' | 'lyric'>( 13 Config.get('setting.basic.musicDetailDefault') || 'album', 14 ); 15 const orientation = useOrientation(); 16 17 const onPress = () => { 18 if (orientation === 'horizonal') { 19 return; 20 } 21 if (tab === 'album') { 22 selectTab('lyric'); 23 } else { 24 selectTab('album'); 25 } 26 }; 27 28 const showAlbumCover = tab === 'album' || orientation === 'horizonal'; 29 30 return ( 31 <> 32 <TapGestureHandler onActivated={onPress}> 33 <View style={style.wrapper}> 34 {showAlbumCover ? <AlbumCover /> : <Lyric />} 35 </View> 36 </TapGestureHandler> 37 {showAlbumCover ? <Operations /> : <LyricOperations />} 38 </> 39 ); 40} 41 42const style = StyleSheet.create({ 43 wrapper: { 44 width: '100%', 45 flex: 1, 46 justifyContent: 'center', 47 alignItems: 'center', 48 }, 49}); 50