girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-17 13:48:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: updates

Browse source
This commit is contained in:
qier222 2022-08-03 23:48:39 +08:00
parent 47e41dea9b
commit ebebf2a733
No known key found for this signature in database
GPG key ID: 9C85007ED905F14D
160 changed files with 4148 additions and 2001 deletions
Download patch file Download diff file Expand all files Collapse all files

25
packages/web/components/New/BlurBackground.tsx
View file

@ -3,21 +3,34 @@ import { cx, css } from '@emotion/css'
import useIsMobile from '@/web/hooks/useIsMobile'
import { useSnapshot } from 'valtio'
import uiStates from '@/web/states/uiStates'
import { AnimatePresence, motion } from 'framer-motion'
import { AnimatePresence, motion, useAnimation } from 'framer-motion'
import { ease } from '@/web/utils/const'
import { useLocation } from 'react-router-dom'
import { useEffect } from 'react'
const BlurBackground = ({ cover }: { cover?: string }) => {
const BlurBackground = () => {
const isMobile = useIsMobile()
const { hideTopbarBackground } = useSnapshot(uiStates)
const { hideTopbarBackground, blurBackgroundImage } = useSnapshot(uiStates)
const location = useLocation()
const animate = useAnimation()
useEffect(() => {
uiStates.blurBackgroundImage = null
}, [location.pathname])
const onLoad = async () => {
animate.start({ opacity: 1 })
}
return (
<AnimatePresence>
{!isMobile && cover && hideTopbarBackground && (
{!isMobile && blurBackgroundImage && hideTopbarBackground && (
<motion.img
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
animate={animate}
exit={{ opacity: 0 }}
transition={{ ease }}
onLoad={onLoad}
className={cx(
'absolute z-0 object-cover opacity-70',
css`
@ -28,7 +41,7 @@ const BlurBackground = ({ cover }: { cover?: string }) => {
filter: blur(256px) saturate(1.2);
`
)}
src={resizeImage(cover, 'sm')}
src={resizeImage(blurBackgroundImage, 'sm')}
/>
)}
</AnimatePresence>