feat: updates

2025-12-17 13:48:02 +00:00 · 2022-06-11 00:19:07 +08:00 · 2022-06-11 00:19:07 +08:00 · 196a974a64
commit 196a974a64
parent 4c90db789b
21 changed files with 291 additions and 191 deletions
--- a/packages/web/components/New/ArtistRow.tsx
+++ b/packages/web/components/New/ArtistRow.tsx
@ -71,7 +71,7 @@ const ArtistRow = ({
                  minWidth: '96px',
                }}
              />
-              <div className='mt-2.5 text-12 font-medium text-transparent lg:text-16 lg:font-bold'>
+              <div className='mt-2.5 text-12 font-medium text-transparent lg:text-14 lg:font-bold'>
                PLACE
              </div>
            </div>
--- a/packages/web/components/New/CoverWall.tsx
+++ b/packages/web/components/New/CoverWall.tsx
@ -5,6 +5,23 @@ import useBreakpoint from '@/web/hooks/useBreakpoint'
 import { useNavigate } from 'react-router-dom'
 import { prefetchAlbum } from '@/web/api/hooks/useAlbum'

+const sizes = {
+  small: {
+    sm: 'sm',
+    md: 'sm',
+    lg: 'sm',
+    xl: 'sm',
+    '2xl': 'md',
+  },
+  large: {
+    sm: 'md',
+    md: 'md',
+    lg: 'md',
+    xl: 'md',
+    '2xl': 'lg',
+  },
+} as const
+
 const CoverWall = ({
  albums,
 }: {
@ -12,22 +29,6 @@ const CoverWall = ({
 }) => {
  const navigate = useNavigate()
  const breakpoint = useBreakpoint()
-  const sizes = {
-    small: {
-      sm: 'sm',
-      md: 'sm',
-      lg: 'sm',
-      xl: 'sm',
-      '2xl': 'md',
-    },
-    large: {
-      sm: 'md',
-      md: 'md',
-      lg: 'md',
-      xl: 'md',
-      '2xl': 'lg',
-    },
-  } as const

  return (
    <div
--- a/packages/web/components/New/Image.tsx
+++ b/packages/web/components/New/Image.tsx
@ -1,7 +1,8 @@
 import { css, cx } from '@emotion/css'
 import { AnimatePresence, motion, useAnimation } from 'framer-motion'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { ease } from '@/web/utils/const'
+import useIsMobile from '@/web/hooks/useIsMobile'

 const Image = ({
  src,
@ -13,6 +14,7 @@ const Image = ({
  placeholder = 'blank',
  onClick,
  onMouseOver,
+  animation = true,
 }: {
  src?: string
  srcSet?: string
@ -23,53 +25,63 @@ const Image = ({
  placeholder?: 'artist' | 'album' | 'playlist' | 'podcast' | 'blank' | null
  onClick?: (e: React.MouseEvent<HTMLImageElement>) => void
  onMouseOver?: (e: React.MouseEvent<HTMLImageElement>) => void
+  animation?: boolean
 }) => {
  const [loaded, setLoaded] = useState(false)
  const [error, setError] = useState(false)
  const animate = useAnimation()
-  const placeholderAnimate = useAnimation()
-  const transition = { duration: 0.6, ease }
-
+  const isMobile = useIsMobile()
+  const isAnimate = animation && !isMobile
  useEffect(() => setError(false), [src])

-  const onload = async () => {
+  const onLoad = async () => {
    setLoaded(true)
-    animate.start({ opacity: 1 })
+    if (isAnimate) animate.start({ opacity: 1 })
  }
  const onError = () => {
    setError(true)
  }

  const hidden = error || !loaded
+  const transition = { duration: 0.6, ease }
+  const motionProps = isAnimate
+    ? {
+        animate,
+        initial: { opacity: 0 },
+        transition,
+      }
+    : {}
+  const placeholderMotionProps = isAnimate
+    ? {
+        initial: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition,
+      }
+    : {}

  return (
    <div className={cx('relative overflow-hidden', className)}>
      {/* Image */}
      <motion.img
        alt={alt}
-        className={cx('absolute inset-0 h-full w-full')}
+        className='absolute inset-0 h-full w-full'
        src={src}
        srcSet={srcSet}
        sizes={sizes}
        decoding='async'
        loading={lazyLoad ? 'lazy' : undefined}
-        onLoad={onload}
        onError={onError}
-        animate={animate}
-        initial={{ opacity: 0 }}
-        transition={transition}
+        onLoad={onLoad}
        onClick={onClick}
        onMouseOver={onMouseOver}
+        {...motionProps}
      />

      {/* Placeholder / Error fallback */}
      <AnimatePresence>
        {hidden && placeholder && (
          <motion.div
-            animate={placeholderAnimate}
-            initial={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            transition={transition}
+            {...placeholderMotionProps}
            className='absolute inset-0 h-full w-full bg-white dark:bg-neutral-800'
          ></motion.div>
        )}
--- a/packages/web/components/New/Layout.tsx
+++ b/packages/web/components/New/Layout.tsx
@ -3,13 +3,12 @@ import Player from '@/web/components/New/Player'
 import MenuBar from '@/web/components/New/MenuBar'
 import Topbar from '@/web/components/New/Topbar/TopbarDesktop'
 import { css, cx } from '@emotion/css'
-import { useMemo } from 'react'
 import { player } from '@/web/store'
 import { useSnapshot } from 'valtio'

 const Layout = () => {
  const playerSnapshot = useSnapshot(player)
-  const showPlayer = useMemo(() => !!playerSnapshot.track, [playerSnapshot])
+  const showPlayer = !!playerSnapshot.track

  return (
    <div
--- a/packages/web/components/New/LayoutMobile.tsx
+++ b/packages/web/components/New/LayoutMobile.tsx
@ -10,7 +10,7 @@ import { isIOS, isPWA, isSafari } from '@/web/utils/common'

 const LayoutMobile = () => {
  const playerSnapshot = useSnapshot(player)
-  const showPlayer = useMemo(() => !!playerSnapshot.track, [playerSnapshot])
+  const showPlayer = !!playerSnapshot.track

  return (
    <div id='layout' className='select-none bg-white pb-32 pt-3 dark:bg-black'>
--- a/packages/web/components/New/NowPlaying.tsx
+++ b/packages/web/components/New/NowPlaying.tsx
@ -10,12 +10,7 @@ import { animate, motion, useAnimation } from 'framer-motion'
 import { ease } from '@/web/utils/const'

 const Progress = () => {
-  const playerSnapshot = useSnapshot(player)
-  const track = useMemo(() => playerSnapshot.track, [playerSnapshot.track])
-  const progress = useMemo(
-    () => playerSnapshot.progress,
-    [playerSnapshot.progress]
-  )
+  const { track, progress } = useSnapshot(player)

  return (
    <div className='mt-10 flex w-full flex-col'>
@ -85,10 +80,7 @@ const Cover = () => {
 }

 const NowPlaying = () => {
-  const playerSnapshot = useSnapshot(player)
-
-  const state = useMemo(() => playerSnapshot.state, [playerSnapshot.state])
-  const track = useMemo(() => playerSnapshot.track, [playerSnapshot.track])
+  const { state, track } = useSnapshot(player)

  return (
    <div
--- a/packages/web/components/New/PlayerMobile.tsx
+++ b/packages/web/components/New/PlayerMobile.tsx
@ -10,8 +10,8 @@ import { useLockBodyScroll } from 'react-use'
 import { useState } from 'react'

 const PlayerMobile = () => {
-  const playerSnapshot = useSnapshot(player)
-  const bgColor = useCoverColor(playerSnapshot.track?.al?.picUrl ?? '')
+  const { track, state } = useSnapshot(player)
+  const bgColor = useCoverColor(track?.al?.picUrl ?? '')
  const [locked, setLocked] = useState(false)

  useLockBodyScroll(locked)
@ -49,7 +49,7 @@ const PlayerMobile = () => {

      <div className='h-full py-2.5'>
        <Image
-          src={resizeImage(playerSnapshot.track?.al.picUrl || '', 'sm')}
+          src={resizeImage(track?.al.picUrl || '', 'sm')}
          alt='Cover'
          className='z-10 aspect-square h-full rounded-lg'
        />
@ -66,10 +66,10 @@ const PlayerMobile = () => {
        >
          <div className='flex-shrink-0'>
            <div className='line-clamp-1 text-14 font-bold text-white'>
-              {playerSnapshot.track?.name}
+              {track?.name}
            </div>
            <div className='line-clamp-1 mt-1 text-12 font-bold text-white/60'>
-              {playerSnapshot.track?.ar?.map(a => a.name).join(', ')}
+              {track?.ar?.map(a => a.name).join(', ')}
            </div>
          </div>
          <div className='h-full flex-grow'></div>
@ -102,7 +102,7 @@ const PlayerMobile = () => {
        className='ml-2.5 flex items-center justify-center rounded-full bg-white/20 p-2.5'
      >
        <Icon
-          name={playerSnapshot.state === 'playing' ? 'pause' : 'play'}
+          name={state === 'playing' ? 'pause' : 'play'}
          className='h-6 w-6 text-white/80'
        />
      </button>
--- a/packages/web/components/New/PlayingNext.tsx
+++ b/packages/web/components/New/PlayingNext.tsx
@ -1,5 +1,6 @@
 import { resizeImage } from '@/web/utils/common'
 import { player } from '@/web/store'
+import { State as PlayerState } from '@/web/utils/player'
 import { useSnapshot } from 'valtio'
 import useTracks from '@/web/api/hooks/useTracks'
 import { css, cx } from '@emotion/css'
@ -8,30 +9,96 @@ import Image from './Image'
 import Wave from './Wave'
 import Icon from '@/web/components/Icon'

-const PlayingNext = ({ className }: { className?: string }) => {
-  const playerSnapshot = useSnapshot(player)
-  const { data: tracks } = useTracks({ ids: playerSnapshot.trackList })
-
+const Header = () => {
  return (
-    <>
-      <div
-        className={cx(
-          'absolute top-0 left-0 z-10 flex w-full items-center justify-between px-4 pb-6 text-14 font-bold text-neutral-700 dark:text-neutral-300'
-        )}
-      >
-        <div className='flex'>
-          <div className='mr-2 h-4 w-1 bg-brand-700'></div>
-          PLAYING NEXT
+    <div
+      className={cx(
+        'absolute top-0 left-0 z-10 flex w-full items-center justify-between px-4 pb-6 text-14 font-bold text-neutral-700 dark:text-neutral-300'
+      )}
+    >
+      <div className='flex'>
+        <div className='mr-2 h-4 w-1 bg-brand-700'></div>
+        PLAYING NEXT
+      </div>
+      <div className='flex'>
+        <div className='mr-2'>
+          <Icon name='repeat-1' className='h-7 w-7 opacity-40' />
        </div>
-        <div className='flex'>
-          <div className='mr-2'>
-            <Icon name='repeat-1' className='h-7 w-7 opacity-40' />
-          </div>
-          <div className='mr-1'>
-            <Icon name='shuffle' className='h-7 w-7 opacity-40' />
-          </div>
+        <div className='mr-1'>
+          <Icon name='shuffle' className='h-7 w-7 opacity-40' />
        </div>
      </div>
+    </div>
+  )
+}
+
+const Track = ({
+  track,
+  index,
+  playingTrackIndex,
+  state,
+}: {
+  track?: Track
+  index: number
+  playingTrackIndex: number
+  state: PlayerState
+}) => {
+  return (
+    <motion.div
+      className='flex items-center justify-between'
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ x: '100%', opacity: 0 }}
+      transition={{
+        duration: 0.24,
+      }}
+      layout
+      onClick={e => {
+        if (e.detail === 2 && track?.id) player.playTrack(track.id)
+      }}
+    >
+      {/* Cover */}
+      <Image
+        alt='Cover'
+        className='mr-4 aspect-square h-14 w-14 flex-shrink-0 rounded-12'
+        src={resizeImage(track?.al?.picUrl || '', 'sm')}
+      />
+
+      {/* Track info */}
+      <div className='mr-3 flex-grow'>
+        <div
+          className={cx(
+            'line-clamp-1 text-16 font-medium ',
+            playingTrackIndex === index
+              ? 'text-brand-700'
+              : 'text-neutral-700 dark:text-neutral-200'
+          )}
+        >
+          {track?.name}
+        </div>
+        <div className='line-clamp-1 mt-1 text-14 font-bold text-neutral-200  dark:text-neutral-700'>
+          {track?.ar.map(a => a.name).join(', ')}
+        </div>
+      </div>
+
+      {/* Wave icon */}
+      {playingTrackIndex === index ? (
+        <Wave playing={state === 'playing'} />
+      ) : (
+        <div className='text-16 font-medium text-neutral-700 dark:text-neutral-200'>
+          {String(index + 1).padStart(2, '0')}
+        </div>
+      )}
+    </motion.div>
+  )
+}
+
+const PlayingNext = ({ className }: { className?: string }) => {
+  const { trackList, trackIndex, state } = useSnapshot(player)
+  const { data: tracks } = useTracks({ ids: trackList })
+  return (
+    <>
+      <Header />

      <div
        className={cx(
@ -46,53 +113,13 @@ const PlayingNext = ({ className }: { className?: string }) => {
        <motion.div className='grid gap-4'>
          <AnimatePresence>
            {tracks?.songs?.map((track, index) => (
-              <motion.div
-                className='flex items-center justify-between'
+              <Track
                key={track.id}
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ x: '100%', opacity: 0 }}
-                transition={{
-                  duration: 0.24,
-                }}
-                layout
-                onClick={e => {
-                  if (e.detail === 2) player.playTrack(track.id)
-                }}
-              >
-                {/* Cover */}
-                <Image
-                  alt='Cover'
-                  className='mr-4 aspect-square h-14 w-14 flex-shrink-0 rounded-12'
-                  src={resizeImage(track.al.picUrl, 'sm')}
-                />
-
-                {/* Track info */}
-                <div className='mr-3 flex-grow'>
-                  <div
-                    className={cx(
-                      'line-clamp-1 text-16 font-medium ',
-                      playerSnapshot.trackIndex === index
-                        ? 'text-brand-700'
-                        : 'text-neutral-700 dark:text-neutral-200'
-                    )}
-                  >
-                    {track.name}
-                  </div>
-                  <div className='line-clamp-1 mt-1 text-14 font-bold text-neutral-200  dark:text-neutral-700'>
-                    {track.ar.map(a => a.name).join(', ')}
-                  </div>
-                </div>
-
-                {/* Wave icon */}
-                {playerSnapshot.trackIndex === index ? (
-                  <Wave playing={playerSnapshot.state === 'playing'} />
-                ) : (
-                  <div className='text-16 font-medium text-neutral-700 dark:text-neutral-200'>
-                    {String(index + 1).padStart(2, '0')}
-                  </div>
-                )}
-              </motion.div>
+                track={track}
+                index={index}
+                playingTrackIndex={trackIndex}
+                state={state}
+              />
            ))}

            {(tracks?.songs?.length || 0) >= 4 && (
--- a/packages/web/components/New/Topbar/SearchBox.tsx
+++ b/packages/web/components/New/Topbar/SearchBox.tsx
@ -1,13 +1,30 @@
 import { css, cx } from '@emotion/css'
 import Icon from '../../Icon'
+import { breakpoint as bp } from '@/web/utils/const'

 const SearchBox = () => {
  return (
-    <div className='app-region-no-drag flex items-center rounded-full bg-day-600 p-2.5 text-neutral-500 dark:bg-night-600 lg:min-w-[284px]'>
+    <div
+      className={cx(
+        'app-region-no-drag flex items-center rounded-full bg-day-600 p-2.5 text-neutral-500 dark:bg-night-600',
+        css`
+          ${bp.lg} {
+            min-width: 284px;
+          }
+        `
+      )}
+    >
      <Icon name='search' className='mr-2.5 h-7 w-7' />
      <input
-        placeholder='Artist, songs and more'
-        className='bg-transparent font-medium  placeholder:text-neutral-500 dark:text-neutral-200'
+        placeholder='Search'
+        className={cx(
+          'flex-shrink bg-transparent font-medium  placeholder:text-neutral-500 dark:text-neutral-200',
+          css`
+            @media (max-width: 360px) {
+              width: 142px;
+            }
+          `
+        )}
      />
    </div>
  )
--- a/packages/web/components/New/Topbar/SettingsButton.tsx
+++ b/packages/web/components/New/Topbar/SettingsButton.tsx
@ -1,8 +1,14 @@
 import Icon from '@/web/components/Icon'
+import { cx } from '@emotion/css'

-const SettingsButton = () => {
+const SettingsButton = ({ className }: { className?: string }) => {
  return (
-    <button className='app-region-no-drag rounded-full bg-day-600 p-2.5 dark:bg-night-600'>
+    <button
+      className={cx(
+        'app-region-no-drag rounded-full bg-day-600 p-2.5 dark:bg-night-600',
+        className
+      )}
+    >
      <Icon name='placeholder' className='h-7 w-7 text-neutral-500' />
    </button>
  )
--- a/packages/web/components/New/Topbar/TopbarMobile.tsx
+++ b/packages/web/components/New/Topbar/TopbarMobile.tsx
@ -1,3 +1,4 @@
+import { css } from '@emotion/css'
 import Avatar from './Avatar'
 import SearchBox from './SearchBox'
 import SettingsButton from './SettingsButton'
@ -9,7 +10,7 @@ const TopbarMobile = () => {
        <SearchBox />
      </div>

-      <div className='ml-6 flex'>
+      <div className='ml-6 flex flex-shrink-0'>
        <SettingsButton />
        <div className='ml-3'>
          <Avatar />
--- a/packages/web/components/New/TrackList.tsx
+++ b/packages/web/components/New/TrackList.tsx
@ -16,11 +16,7 @@ const TrackList = ({
  onPlay: (id: number) => void
  className?: string
 }) => {
-  const playerSnapshot = useSnapshot(player)
-  const playingTrack = useMemo(
-    () => playerSnapshot.track,
-    [playerSnapshot.track]
-  )
+  const { track: playingTrack, state } = useSnapshot(player)
  const isMobile = useIsMobile()

  const handleClick = (e: React.MouseEvent<HTMLElement>, trackID: number) => {
@ -31,10 +27,7 @@ const TrackList = ({
    }
  }

-  const playing = useMemo(
-    () => playerSnapshot.state === 'playing',
-    [playerSnapshot.state]
-  )
+  const playing = state === 'playing'

  return (
    <div className={className}>
@ -51,11 +44,11 @@ const TrackList = ({

          {/* Track name */}
          <div className='flex flex-grow items-center'>
-            {track.name}
+            <span className='line-clamp-1 mr-4'>{track.name}</span>
            {playingTrack?.id === track.id && (
-              <div className='ml-4'>
+              <span className='mr-4 inline-block'>
                <Wave playing={playing} />
-              </div>
+              </span>
            )}
          </div>

--- a/packages/web/components/New/Wave.tsx
+++ b/packages/web/components/New/Wave.tsx
@ -1,18 +1,17 @@
 import { css, cx, keyframes } from '@emotion/css'

-const Wave = ({ playing }: { playing: boolean }) => {
-  const wave = keyframes`
+const wave = keyframes`
    0% { transform: scaleY(1) }
    50% { transform: scaleY(0.2) }
    100% { transform: scaleY(1)}
-    `
-  const animation = css`
-    transform-origin: bottom;
-    animation: ${wave} 1s ease-in-out infinite;
  `
+const animation = css`
+  transform-origin: bottom;
+  animation: ${wave} 1s ease-in-out infinite;
+`
+const delay = ['-100ms', '-500ms', '-1200ms', '-1000ms', '-700ms']

-  const delay = ['-100ms', '-500ms', '-1200ms', '-1000ms', '-700ms']
-
+const Wave = ({ playing }: { playing: boolean }) => {
  return (
    <div className='grid h-3 grid-cols-5 items-end gap-0.5'>
      {[...new Array(5).keys()].map(i => (