YesPlayMusic/packages/web/components/New/PlayingNext.tsx

import { isIosPwa, resizeImage } from '@/web/utils/common'
import player from '@/web/states/player'
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'
import Wave from './Wave'
import Icon from '@/web/components/Icon'
import { useWindowSize } from 'react-use'
import { playerWidth, topbarHeight } from '@/web/utils/const'
import useIsMobile from '@/web/hooks/useIsMobile'
import { Virtuoso } from 'react-virtuoso'

const Header = () => {
  return (
    <div
      className={cx(
        'absolute top-0 left-0 z-20 flex w-full items-center justify-between bg-contain bg-repeat-x px-7 pb-6 text-14 font-bold text-neutral-700 dark:text-neutral-300 lg:px-4'
      )}
    >
      <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='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 (
    <div
      className='mb-5 flex items-center justify-between'
      onClick={e => {
        if (e.detail === 2 && track?.id) player.playTrack(track.id)
      }}
    >
      {/* Cover */}
      <img
        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>
      )}
    </div>
  )
}

const TrackList = ({ className }: { className?: string }) => {
  const { trackList, trackIndex, state } = useSnapshot(player)
  const { data: tracksRaw } = useTracks({ ids: trackList })
  const tracks = tracksRaw?.songs || []
  const { height } = useWindowSize()
  const isMobile = useIsMobile()

  const listHeight = height - topbarHeight - playerWidth - 24 // 24是封面与底部间距
  const listHeightMobile = height - 154 - 110 - (isIosPwa ? 34 : 0) // 154是列表距离底部的距离，110是顶部的距离

  return (
    <>
      <div
        className={css`
          mask-image: linear-gradient(
            to bottom,
            transparent 22px,
            black 42px
          ); // 顶部渐变遮罩
        `}
      >
        <Virtuoso
          style={{
            height: `${isMobile ? listHeightMobile : listHeight}px`,
          }}
          totalCount={tracks.length}
          className={cx(
            'no-scrollbar relative z-10 w-full overflow-auto',
            className,
            css`
              mask-image: linear-gradient(
                to top,
                transparent 8px,
                black 42px
              ); // 底部渐变遮罩
            `
          )}
          fixedItemHeight={76}
          data={tracks}
          overscan={10}
          components={{
            Header: () => <div className='h-8'></div>,
            Footer: () => <div className='h-8'></div>,
          }}
          itemContent={(index, track) => (
            <Track
              key={index}
              track={track}
              index={index}
              playingTrackIndex={trackIndex}
              state={state}
            />
          )}
        ></Virtuoso>
      </div>
    </>
  )
}

const PlayingNext = ({ className }: { className?: string }) => {
  return (
    <>
      <Header />
      <TrackList className={className} />
    </>
  )
}

export default PlayingNext