fix: update marquee style

Signed-off-by: Innei <i@innei.in>
This commit is contained in:
Innei 2024-07-26 19:24:48 +08:00
parent 313080e5de
commit 517806af63
No known key found for this signature in database
GPG Key ID: 0F62D33977F021F7
2 changed files with 9 additions and 8 deletions

View File

@ -1,8 +1,14 @@
import type { PropsWithChildren } from "react"
import { useCallback, useRef, useState } from "react"
import type { MarqueeProps } from "react-fast-marquee"
import Marquee from "react-fast-marquee"
export const TitleMarquee = ({ children }: PropsWithChildren) => {
export const TitleMarquee = ({
children,
speed = 30,
play,
...rest
}: PropsWithChildren & MarqueeProps) => {
const [hovered, setHovered] = useState(false)
const ref = useRef<HTMLDivElement>(null)
@ -42,13 +48,7 @@ export const TitleMarquee = ({ children }: PropsWithChildren) => {
})
}, [])}
>
<Marquee
play={hovered}
ref={ref}
// gradient
// gradientWidth={24}
speed={30}
>
<Marquee play={hovered} ref={ref} speed={speed} {...rest}>
{children}
</Marquee>
</div>

View File

@ -136,6 +136,7 @@ const CornerPlayerImpl = () => {
<div className="relative truncate px-2 py-1 text-center text-sm">
<Marquee
play={playerValue.status === "playing"}
className="font-medium"
gradient
gradientWidth={24}
gradientColor="var(--fo-modal-background)"