chore: adjust danmuku click logic
This commit is contained in:
parent
619ebc70c4
commit
ee829af279
2 changed files with 12 additions and 12 deletions
|
@ -1,9 +1,5 @@
|
||||||
import { Avatar, AvatarFallback } from '@/components/ui/Avatar'
|
import { Avatar, AvatarFallback } from '@/components/ui/Avatar'
|
||||||
import { Button } from '@/components/ui/Button'
|
import { Button } from '@/components/ui/Button'
|
||||||
import { APP_STATUS_STORAGE_KEY } from '@/constants/config'
|
|
||||||
import { EVENT } from '@/constants/event'
|
|
||||||
import { AppStatus } from '@/domain/AppStatus'
|
|
||||||
import { LocalStorageImpl } from '@/domain/impls/Storage'
|
|
||||||
import { TextMessage } from '@/domain/Room'
|
import { TextMessage } from '@/domain/Room'
|
||||||
import { cn } from '@/utils'
|
import { cn } from '@/utils'
|
||||||
import { AvatarImage } from '@radix-ui/react-avatar'
|
import { AvatarImage } from '@radix-ui/react-avatar'
|
||||||
|
@ -12,22 +8,17 @@ import { FC, MouseEvent } from 'react'
|
||||||
export interface PromptItemProps {
|
export interface PromptItemProps {
|
||||||
data: TextMessage
|
data: TextMessage
|
||||||
className?: string
|
className?: string
|
||||||
|
onClick?: (e: MouseEvent<HTMLButtonElement>) => void
|
||||||
onMouseEnter?: (e: MouseEvent<HTMLButtonElement>) => void
|
onMouseEnter?: (e: MouseEvent<HTMLButtonElement>) => void
|
||||||
onMouseLeave?: (e: MouseEvent<HTMLButtonElement>) => void
|
onMouseLeave?: (e: MouseEvent<HTMLButtonElement>) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
const DanmakuMessage: FC<PromptItemProps> = ({ data, className, onMouseEnter, onMouseLeave }) => {
|
const DanmakuMessage: FC<PromptItemProps> = ({ data, className, onClick, onMouseEnter, onMouseLeave }) => {
|
||||||
const handleOpenApp = async () => {
|
|
||||||
const appStatus = await LocalStorageImpl.value.get<AppStatus>(APP_STATUS_STORAGE_KEY)
|
|
||||||
LocalStorageImpl.value.set<AppStatus>(APP_STATUS_STORAGE_KEY, { ...appStatus!, open: true, unread: 0 })
|
|
||||||
dispatchEvent(new CustomEvent(EVENT.APP_OPEN))
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
onMouseEnter={onMouseEnter}
|
onMouseEnter={onMouseEnter}
|
||||||
onMouseLeave={onMouseLeave}
|
onMouseLeave={onMouseLeave}
|
||||||
onClick={handleOpenApp}
|
onClick={onClick}
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex justify-center pointer-events-auto visible gap-x-2 border px-2.5 py-0.5 rounded-full bg-primary/30 text-base font-medium text-white backdrop-blur-md',
|
'flex justify-center pointer-events-auto visible gap-x-2 border px-2.5 py-0.5 rounded-full bg-primary/30 text-base font-medium text-white backdrop-blur-md',
|
||||||
className
|
className
|
||||||
|
|
|
@ -5,6 +5,10 @@ import { createElement } from 'react'
|
||||||
import DanmakuMessage from '@/app/content/components/DanmakuMessage'
|
import DanmakuMessage from '@/app/content/components/DanmakuMessage'
|
||||||
import { createRoot } from 'react-dom/client'
|
import { createRoot } from 'react-dom/client'
|
||||||
import { create, Manager } from 'danmu'
|
import { create, Manager } from 'danmu'
|
||||||
|
import { LocalStorageImpl } from './Storage'
|
||||||
|
import { AppStatus } from '../AppStatus'
|
||||||
|
import { APP_STATUS_STORAGE_KEY } from '@/constants/config'
|
||||||
|
import { EVENT } from '@/constants/event'
|
||||||
|
|
||||||
export class Danmaku {
|
export class Danmaku {
|
||||||
private container?: Element
|
private container?: Element
|
||||||
|
@ -18,6 +22,11 @@ export class Danmaku {
|
||||||
createRoot(manager.node).render(
|
createRoot(manager.node).render(
|
||||||
createElement(DanmakuMessage, {
|
createElement(DanmakuMessage, {
|
||||||
data: manager.data,
|
data: manager.data,
|
||||||
|
onClick: async () => {
|
||||||
|
const appStatus = await LocalStorageImpl.value.get<AppStatus>(APP_STATUS_STORAGE_KEY)
|
||||||
|
LocalStorageImpl.value.set<AppStatus>(APP_STATUS_STORAGE_KEY, { ...appStatus!, open: true, unread: 0 })
|
||||||
|
dispatchEvent(new CustomEvent(EVENT.APP_OPEN))
|
||||||
|
},
|
||||||
onMouseEnter: () => manager.pause(),
|
onMouseEnter: () => manager.pause(),
|
||||||
onMouseLeave: () => manager.resume()
|
onMouseLeave: () => manager.resume()
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in a new issue