girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-16 21:28:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: updates

Browse source
This commit is contained in:
qier222 2023-01-24 16:29:33 +08:00
parent c6c59b2cd9
commit 7ce516877e
No known key found for this signature in database
63 changed files with 6591 additions and 1107 deletions
Download patch file Download diff file Expand all files Collapse all files

35
packages/web/pages/Artist/Header/ArtistInfo.tsx
View file

@ -1,23 +1,16 @@
import useIsMobile from '@/web/hooks/useIsMobile'
import useAppleMusicArtist from '@/web/hooks/useAppleMusicArtist'
import useAppleMusicArtist from '@/web/api/hooks/useAppleMusicArtist'
import { cx, css } from '@emotion/css'
import { useTranslation } from 'react-i18next'
import i18next from 'i18next'
const ArtistInfo = ({
artist,
isLoading,
}: {
artist?: Artist
isLoading: boolean
}) => {
const { t } = useTranslation()
const ArtistInfo = ({ artist, isLoading }: { artist?: Artist; isLoading: boolean }) => {
const { t, i18n } = useTranslation()
const isMobile = useIsMobile()
const { data: artistFromApple, isLoading: isLoadingArtistFromApple } =
useAppleMusicArtist({
id: artist?.id,
name: artist?.name,
})
const { data: artistFromApple, isLoading: isLoadingArtistFromApple } = useAppleMusicArtist(
artist?.id || 0
)
return (
<div>
@ -27,9 +20,7 @@ const ArtistInfo = ({
<span className='rounded-full bg-white/10'>PLACEHOLDER</span>
</div>
) : (
<div className='text-28 font-semibold text-white/70 lg:text-32'>
{artist?.name}
</div>
<div className='text-28 font-semibold text-white/70 lg:text-32'>{artist?.name}</div>
)}
{/* Type */}
@ -38,9 +29,7 @@ const ArtistInfo = ({
<span className='rounded-full bg-white/10'>Artist</span>
</div>
) : (
<div className='mt-2.5 text-24 font-medium text-white/40 lg:mt-6'>
Artist
</div>
<div className='mt-2.5 text-24 font-medium text-white/40 lg:mt-6'>Artist</div>
)}
{/* Counts */}
@ -67,9 +56,7 @@ const ArtistInfo = ({
`
)}
>
<span className='rounded-full bg-white/10'>
PLACEHOLDER1234567890
</span>
<span className='rounded-full bg-white/10'>PLACEHOLDER1234567890</span>
</div>
) : (
<div
@ -80,7 +67,7 @@ const ArtistInfo = ({
`
)}
>
{artistFromApple?.attributes?.artistBio || artist?.briefDesc}
{artistFromApple?.artistBio?.[i18n.language.replace('-', '_')] || artist?.briefDesc}
</div>
))}
</div>

32
packages/web/pages/Artist/Header/Cover.tsx
View file

@ -1,25 +1,18 @@
import { isIOS, isSafari, resizeImage } from '@/web/utils/common'
import { resizeImage } from '@/web/utils/common'
import Image from '@/web/components/Image'
import { cx, css } from '@emotion/css'
import useAppleMusicArtist from '@/web/hooks/useAppleMusicArtist'
import { useEffect, useRef, useState } from 'react'
import Hls from 'hls.js'
import { motion } from 'framer-motion'
import useAppleMusicArtist from '@/web/api/hooks/useAppleMusicArtist'
import { useEffect } from 'react'
import uiStates from '@/web/states/uiStates'
import VideoCover from '@/web/components/VideoCover'
const Cover = ({ artist }: { artist?: Artist }) => {
const { data: artistFromApple, isLoading: isLoadingArtistFromApple } =
useAppleMusicArtist({
id: artist?.id,
name: artist?.name,
})
const { data: artistFromApple, isLoading: isLoadingArtistFromApple } = useAppleMusicArtist(
artist?.id || 0
)
const video =
artistFromApple?.attributes?.editorialVideo?.motionArtistSquare1x1?.video
const cover = isLoadingArtistFromApple
? ''
: artistFromApple?.attributes?.artwork?.url || artist?.img1v1Url
const video = artistFromApple?.editorialVideo
const cover = isLoadingArtistFromApple ? '' : artistFromApple?.artwork || artist?.img1v1Url || ''
useEffect(() => {
if (cover) uiStates.blurBackgroundImage = cover
@ -40,14 +33,7 @@ const Cover = ({ artist }: { artist?: Artist }) => {
'aspect-square h-full w-full lg:z-10',
video ? 'opacity-0' : 'opacity-100'
)}
src={resizeImage(
isLoadingArtistFromApple
? ''
: artistFromApple?.attributes?.artwork?.url ||
artist?.img1v1Url ||
'',
'lg'
)}
src={resizeImage(isLoadingArtistFromApple ? '' : cover, 'lg')}
/>
{video && <VideoCover source={video} />}