fix: fixing mobile

Sherlockouo · Sep 12, 2023 · c009124 · c009124
1 parent eef37a7
commit c009124
Show file tree

Hide file tree

Showing 9 changed files with 330 additions and 335 deletions.
diff --git a/packages/desktop/main/index.ts b/packages/desktop/main/index.ts
diff --git a/packages/web/components/Icon/iconNamesType.ts b/packages/web/components/Icon/iconNamesType.ts
@@ -1,51 +1 @@
-export type IconNames =
-  | 'back'
-  | 'caret-right'
-  | 'discovery'
-  | 'dislike'
-  | 'dj'
-  | 'dropdown-triangle'
-  | 'email'
-  | 'explicit'
-  | 'explore'
-  | 'eye-off'
-  | 'eye'
-  | 'fm'
-  | 'forward'
-  | 'fullscreen-enter'
-  | 'fullscreen-exit'
-  | 'heart-outline'
-  | 'heart'
-  | 'hide-list'
-  | 'lock'
-  | 'lyrics'
-  | 'more'
-  | 'music-note'
-  | 'my'
-  | 'next'
-  | 'pause'
-  | 'phone'
-  | 'play-fill'
-  | 'play'
-  | 'player-handler'
-  | 'playlist'
-  | 'plus'
-  | 'previous'
-  | 'qrcode'
-  | 'repeat-1'
-  | 'repeat'
-  | 'search'
-  | 'settings'
-  | 'shuffle'
-  | 'speaker'
-  | 'user'
-  | 'video-settings'
-  | 'volume-half'
-  | 'volume-mute'
-  | 'volume'
-  | 'windows-close'
-  | 'windows-maximize'
-  | 'windows-minimize'
-  | 'windows-un-maximize'
-  | 'x'
-  | 'sun'
+export type IconNames = 'back' | 'caret-right' | 'discovery' | 'dislike' | 'dj' | 'dropdown-triangle' | 'email' | 'explicit' | 'explore' | 'eye-off' | 'eye' | 'fm' | 'forward' | 'fullscreen-enter' | 'fullscreen-exit' | 'heart-outline' | 'heart' | 'hide-list' | 'lock' | 'lyrics' | 'more' | 'music-note' | 'my' | 'next' | 'pause' | 'phone' | 'play-fill' | 'play' | 'player-handler' | 'playlist' | 'plus' | 'previous' | 'qrcode' | 'repeat-1' | 'repeat' | 'search' | 'settings' | 'shuffle' | 'speaker' | 'sun' | 'user' | 'video-settings' | 'volume-half' | 'volume-mute' | 'volume' | 'windows-close' | 'windows-maximize' | 'windows-minimize' | 'windows-un-maximize' | 'x'
diff --git a/packages/web/components/LayoutMobile.tsx b/packages/web/components/LayoutMobile.tsx
@@ -1,6 +1,6 @@
 import Player from '@/web/components/PlayerMobile'
 import { css, cx } from '@emotion/css'
-import { startTransition, useMemo } from 'react'
+import { useMemo } from 'react'
 import player from '@/web/states/player'
 import { useSnapshot } from 'valtio'
 import Router from '@/web/components/Router'
@@ -10,56 +10,59 @@ import { isIOS, isIosPwa, isPWA, isSafari } from '@/web/utils/common'
 import Login from './Login'
 import { useLocation } from 'react-router-dom'
 import PlayingNext from './PlayingNextMobile'
+import ContextMenus from './ContextMenus/ContextMenus'
 
 const LayoutMobile = () => {
   const playerSnapshot = useSnapshot(player)
   const showPlayer = !!playerSnapshot.track
   const location = useLocation()
 
-  return
-  // startTransition(() => {
-  ;<div id='layout' className='select-none bg-white pb-28 dark:bg-black'>
-    <main className='min-h-screen overflow-y-auto overflow-x-hidden pb-16 '>
-      {location.pathname === '/' && <Topbar />}
-      <Router />
-    </main>
-    <div
-      className={cx('fixed bottom-0 left-0 right-0 z-20 pt-3 dark:bg-black')}
-      style={{
-        paddingBottom: `calc(
+  return (
+    <div id='layout' className='select-none bg-white pb-28 dark:bg-black'>
+      <main id='main' className='min-h-screen overflow-y-auto overflow-x-hidden pb-16 '>
+        {location.pathname === '/' && <Topbar />}
+        <Router />
+      </main>
+      <div
+        className={cx('fixed bottom-0 left-0 right-0 z-20 pt-3 dark:bg-black')}
+        style={{
+          paddingBottom: `calc(
               ${isIosPwa ? '24px' : 'env(safe-area-inset-bottom)'} + 0.75rem
             )`,
-      }}
-    >
-      {showPlayer && (
+        }}
+      >
+        {showPlayer && (
+          <div
+            className={cx('absolute left-7 right-7 z-20')}
+            style={{
+              top: `calc(-100% - 6px + ${isIosPwa ? '24px' : 'env(safe-area-inset-bottom)'})`,
+            }}
+          >
+            <Player />
+          </div>
+        )}
+
+        <MenuBar />
+        <PlayingNext />
+      </div>
+
+      <Login />
+      <ContextMenus />
+
+      {/* Notch background */}
+      {isIosPwa && (
         <div
-          className={cx('absolute left-7 right-7 z-20')}
-          style={{
-            top: `calc(-100% - 6px + ${isIosPwa ? '24px' : 'env(safe-area-inset-bottom)'})`,
-          }}
-        >
-          <Player />
-        </div>
+          className={cx(
+            'fixed left-0 right-0 bg-black/30 backdrop-blur-sm',
+            css`
+              top: -50px;
+              height: 50px;
+            `
+          )}
+        ></div>
       )}
-
-      <MenuBar />
-      <PlayingNext />
     </div>
-    <Login />
-    {/* Notch background */}
-    {isIosPwa && (
-      <div
-        className={cx(
-          'fixed left-0 right-0 bg-black/30 backdrop-blur-sm',
-          css`
-            top: -50px;
-            height: 50px;
-          `
-        )}
-      ></div>
-    )}
-  </div>
-  // })
+  )
 }
 
 export default LayoutMobile
diff --git a/packages/web/components/PlayerMobile.tsx b/packages/web/components/PlayerMobile.tsx
@@ -11,6 +11,8 @@ import { useState } from 'react'
 import useUserLikedTracksIDs, { useMutationLikeATrack } from '@/web/api/hooks/useUserLikedTracksIDs'
 import uiStates from '@/web/states/uiStates'
 import { ease } from '@/web/utils/const'
+import ArtistInline from './ArtistsInLine'
+import { useNavigate, useParams } from 'react-router-dom'
 
 const LikeButton = () => {
   const { track } = useSnapshot(player)
@@ -36,7 +38,7 @@ const PlayerMobile = () => {
   const [locked, setLocked] = useState(false)
   useLockBodyScroll(locked)
   const { mobileShowPlayingNext } = useSnapshot(uiStates)
-
+  const navigate = useNavigate()
   const onDragEnd = (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
     console.log(JSON.stringify(info))
     const { x, y } = info.offset
@@ -48,6 +50,7 @@ const PlayerMobile = () => {
     setLocked(false)
   }
 
+  const [isOpenArtworkViewer, setIsOpenArtworkViewer] = useState(false)
   return (
     <div
       className={cx(
@@ -81,7 +84,12 @@ const PlayerMobile = () => {
       )}
 
       {/* Cover */}
-      <div className='h-full py-2.5'>
+      <div
+        className='h-full py-2.5'
+        onClick={() => {
+          navigate(`/album/${track?.al?.id}`)
+        }}
+      >
         <Image
           src={resizeImage(track?.al.picUrl || '', 'sm')}
           className='z-10 aspect-square h-full rounded-lg'
@@ -100,8 +108,13 @@ const PlayerMobile = () => {
         >
           <div className='flex-shrink-0'>
             <div className='line-clamp-1 text-14 font-bold text-white'>{track?.name}</div>
+            <div className='mt-2 h-px w-2/5 bg-black/10 dark:bg-white/10'></div>
             <div className='line-clamp-1 mt-1 text-12 font-bold text-white/60'>
-              {track?.ar?.map(a => a.name).join(', ')}
+              <ArtistInline
+                artists={track?.ar || []}
+                className='text-black/30 dark:text-white/30'
+                hoverClassName='hover:text-black/50 dark:hover:text-white/70 transition-colors duration-400'
+              />
             </div>
           </div>
           <div className='h-full flex-grow'></div>

diff --git a/packages/web/components/Router.tsx b/packages/web/components/Router.tsx
@@ -2,6 +2,7 @@ import { Route, Routes, useLocation } from 'react-router-dom'
 import { AnimatePresence } from 'framer-motion'
 import React, { lazy, Suspense, startTransition } from 'react'
 import VideoPlayer from './VideoPlayer'
+import UserCard from '../pages/Settings/UserCard'
 
 const My = lazy(() => import('@/web/pages/My'))
 const Discover = lazy(() => import('@/web/pages/Discover'))

diff --git a/packages/web/components/TrackList.tsx b/packages/web/components/TrackList.tsx
@@ -26,7 +26,7 @@ const Actions = ({ track }: { track: Track }) => {
   }, [menu.dataSourceID, menu.type])
 
   return (
-    <div className='mr-5 lg:flex' onClick={e => e.stopPropagation()}>
+    <div className='mr-5 flex' onClick={e => e.stopPropagation()}>
       {/* Context menu */}
       <div
         className={cx(
@@ -45,7 +45,7 @@ const Actions = ({ track }: { track: Track }) => {
           }}
           className='mr-3 flex h-10 w-10 items-center justify-center rounded-full  bg-white/10 text-white/40 transition-colors duration-400 hover:bg-white/30 hover:text-white/70'
         >
-          <Icon name='more' className='pointer-events-none h-5 w-5' />
+          <Icon name='more' className='h-4 w-5' />
         </button>
       </div>
 
@@ -57,7 +57,7 @@ const Actions = ({ track }: { track: Track }) => {
         )}
       >
         <div
-          onClick={() =>{
+          onClick={() => {
             player.addToPlayList(track.id)
             // translate
             toast('已添加到播放列表')
@@ -148,17 +148,17 @@ function Track({
       </div>
 
       {/* Desktop menu  */}
-      <Actions track={track} />
+      <div>
+        <Actions track={track} />
+      </div>
 
       {/* Mobile menu */}
-      <div className='lg:hidden'>
-        <div className='h-10 w-10 rounded-full bg-night-900'></div>
-      </div>
+      {/* <div className='lg:hidden'> */}
+      {/*   <div className='h-10 w-10 rounded-full bg-night-900'></div> */}
+      {/* </div> */}
 
       {/* Track duration */}
-      <div className='hidden text-right lg:block'>
-        {formatDuration(track.dt, 'en-US', 'hh:mm:ss')}
-      </div>
+      <div className='text-right lg:block'>{formatDuration(track.dt, 'en-US', 'hh:mm:ss')}</div>
     </div>
   )
 }

diff --git a/packages/web/pages/Lyrics.tsx b/packages/web/pages/Lyrics.tsx
@@ -99,7 +99,8 @@ const Lyrics = () => {
         'line-clamp-4 font-bold text-accent-color-500 tracking-hilightLyric leading-lyric text-32',
       index !== currentLineIndex &&
         'lyrics-padding normal-lyric-font-size font-black tracking-lyric leading-lyric text-white/30 text-24 blur-lyric',
-      index !== currentLineIndex && isHovered && 'blur-none'
+      index !== currentLineIndex && isHovered && 'blur-none',
+      isMobile && 'blur-none'
     )
 
     const hightlightStyle =
@@ -128,16 +129,21 @@ const Lyrics = () => {
   })
 
   if (lyricsResponse == undefined || lyricsResponse.code != 200 || lyrics.length == 0) {
-    const hightlightStyle = {
-      textShadow:
-        'rgb(255,255,255,' + currentVolumnValue / 5 + ') 0px 0px ' + currentVolumnValue + 'px',
-      padding: '12px',
-    }
+    const hightlightStyle = isMobile
+      ? {}
+      : {
+          textShadow:
+            'rgb(255,255,255,' + currentVolumnValue / 5 + ') 0px 0px ' + currentVolumnValue + 'px',
+          padding: '12px',
+        }
     return (
       <PageTransition>
         {
           <div
-            className='artist-info padding-bottom-20 h-921 mb-8 mt-8 text-center text-21 font-medium text-white/30'
+            className={cx(
+              'artist-info padding-bottom-20 h-921 mb-8 mt-8 text-center text-21 font-medium text-white/30',
+              isMobile && 'text-center'
+            )}
             style={{
               paddingTop: '100px',
               height: '921px',
@@ -174,10 +180,18 @@ const Lyrics = () => {
 
   return (
     <PageTransition>
-      <div className={cx('lyrics-player h-921', 'font-Roboto font-bold backdrop-blur-md')}>
+      <div
+        className={cx(
+          'lyrics-player h-921 ',
+          isMobile && 'text-center',
+
+          'font-Roboto font-bold backdrop-blur-md'
+        )}
+      >
         <div
           className={cx(
-            'lyrics-container h-lyric  overflow-scroll overscroll-y-contain pb-lyricBottom pt-lyricTop text-left ',
+            'lyrics-container no-scrollbar h-lyric  overflow-scroll  pb-lyricBottom pt-lyricTop text-left ',
+            isMobile && 'text-center',
             css`
               &::-webkit-scrollbar {
                 width: 0;
@@ -190,7 +204,12 @@ const Lyrics = () => {
           onMouseLeave={handleMouseLeave}
           // onScroll={handleScroll}
         >
-          <div className='artist-info padding-bottom-20 mb-8 mt-8 text-left text-24 text-white/30'>
+          <div
+            className={cx(
+              'artist-info padding-bottom-20 mb-8 mt-8 text-left text-24 text-white/30',
+              isMobile && 'text-center'
+            )}
+          >
             <p className=''>{player.track?.name}</p>
             <p className=''>By - {player.track?.ar[0].name}</p>
           </div>