feat: socket event

Signed-off-by: Innei <[email protected]>

Author: Innei

src/atoms/activity.ts

@@ -0,0 +1,23 @@
+import { atom, useAtomValue } from 'jotai'
+
+import { jotaiStore } from '~/lib/store'
+
+type Activity = {
+  processName: string
+  media: {
+    title: string
+    artist: string
+  } | null
+}
+
+const activityAtom = atom({
+  processName: '',
+  media: null,
+} as Activity)
+
+export const useActivity = () => useAtomValue(activityAtom)
+export const setActivityProcessName = (processName: string) =>
+  jotaiStore.set(activityAtom, (prev) => ({ ...prev, processName }))
+
+export const setActivityMediaInfo = (media: Activity['media']) =>
+  jotaiStore.set(activityAtom, (prev) => ({ ...prev, media }))

src/components/layout/header/internal/Activity.tsx

@@ -1,11 +1,16 @@
 'use client'
 
 import { useQuery } from '@tanstack/react-query'
-import React, { memo, useMemo, useState } from 'react'
+import React, { memo, useEffect, useMemo, useState } from 'react'
 import { AnimatePresence, m } from 'framer-motion'
 import Image from 'next/image'
 import type { RequestError } from '@mx-space/api-client'
 
+import {
+  setActivityMediaInfo,
+  setActivityProcessName,
+  useActivity,
+} from '~/atoms/activity'
 import { FloatPopover } from '~/components/ui/float-popover'
 import { apiClient } from '~/lib/request'
 import { useAggregationSelector } from '~/providers/root/aggregation-data-provider'
@@ -44,7 +49,7 @@ const appLabels: { [app: string]: string } = {
   Chrome: 'chrome',
   'Chrome Canary': 'chrome_canary',
   QQ音乐: 'qq_music',
-  NeteaseMusic: 'netease',
+  NetEaseMusic: 'netease',
   iTerm2: 'iterm2',
   Xcode: 'xcode',
   Typora: 'typora',
@@ -55,6 +60,8 @@ const appLabels: { [app: string]: string } = {
 export function Activity() {
   const [isEnabled, setIsEnabled] = useState(true)
 
+  const activity = useActivity()
+
   const { data } = useQuery(
     ['activity'],
     async () => {
@@ -73,14 +80,21 @@ export function Activity() {
         })
     },
     {
-      refetchInterval: 5000,
+      refetchInterval: 1000 * 5 * 60,
       retry: false,
       enabled: isEnabled,
       meta: {
         persist: false,
       },
     },
   )
+
+  useEffect(() => {
+    if (!data) return
+    data.mediaInfo && setActivityMediaInfo(data.mediaInfo)
+    setActivityProcessName(data.processName)
+  }, [data])
+
   const ownerName = useAggregationSelector((data) => data.user.name)
   const memoProcessName = useMemo(
     () => ({ processName: data?.processName || '' }),
@@ -89,7 +103,7 @@ export function Activity() {
   if (!data) {
     return null
   }
-  const { processName, mediaInfo: media } = data
+  const { processName, media } = activity
   if (!appLabels[processName]) {
     console.log('Not collected process name: ', processName)
     return null

src/components/layout/header/internal/AnimatedLogo.tsx

@@ -1,10 +1,13 @@
 'use client'
 
+import { useQuery } from '@tanstack/react-query'
+import { useCallback } from 'react'
 import { AnimatePresence, m } from 'framer-motion'
 import { useRouter } from 'next/navigation'
 
 import { getAdminUrl, isLogged, useViewport } from '~/atoms'
 import { useSingleAndDoubleClick } from '~/hooks/common/use-single-double-click'
+import { useConfig } from '~/hooks/data/use-config'
 import { Routes } from '~/lib/route-builder'
 import { toast } from '~/lib/toast'
 
@@ -14,8 +17,21 @@ import { SiteOwnerAvatar } from './SiteOwnerAvatar'
 
 const TapableLogo = () => {
   const router = useRouter()
+
+  const { data: isLiving } = useQuery({
+    queryKey: ['live-check'],
+    enabled: false,
+  })
+  const {
+    module: { bilibili: { liveId } = {} },
+  } = useConfig()
+  const goLive = useCallback(() => {
+    window.open(`https://live.bilibili.com/${liveId}`)
+  }, [liveId])
+
   const fn = useSingleAndDoubleClick(
     () => {
+      if (isLiving) return goLive()
       router.push(Routes.Home)
     },
     () => {

src/components/layout/header/internal/SiteOwnerAvatar.tsx

@@ -4,7 +4,6 @@ import { useQuery } from '@tanstack/react-query'
 import { useCallback } from 'react'
 import Image from 'next/image'
 
-import { appConfig } from '~/app.config'
 import { clsxm } from '~/lib/helper'
 import { useAggregationSelector } from '~/providers/root/aggregation-data-provider'
 
@@ -26,19 +25,12 @@ export const SiteOwnerAvatar: Component = ({ className }) => {
     },
   })
 
-  const handleGoLive = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation()
-    window.open(`https://live.bilibili.com/${appConfig.module.bilibili.liveId}`)
-  }, [])
   if (!avatar) return
   return (
     <div
       role={isLiving ? 'button' : 'img'}
-      aria-hidden
-      onClick={handleGoLive}
-      tabIndex={isLiving ? 0 : -1}
       className={clsxm(
-        'overflow pointer-events-none relative select-none',
+        'overflow pointer-events-none relative z-[9] select-none',
 
         isLiving ? 'cursor-pointer rounded-full' : '',
         className,

src/hooks/common/use-single-double-click.ts

@@ -19,7 +19,7 @@ export function useSingleAndDoubleClick(
     if (click === 2) actionDoubleClick()
 
     return () => clearTimeout(timer)
-  }, [click])
+  }, [actionDoubleClick, actionSimpleClick, click])
 
   return () => setClick((prev) => prev + 1)
 }

src/socket/handler.ts

@@ -11,6 +11,7 @@ import type { AppRouterInstance } from 'next/dist/shared/lib/app-router-context'
 
 import { sayQueryKey } from '~/app/says/query'
 import { setOnlineCount } from '~/atoms'
+import { setActivityMediaInfo, setActivityProcessName } from '~/atoms/activity'
 import { isDev } from '~/lib/env'
 import { routeBuilder, Routes } from '~/lib/route-builder'
 import { toast } from '~/lib/toast'
@@ -29,13 +30,13 @@ import {
 import { EventTypes } from '~/types/events'
 
 export const eventHandler = (
-  type: EventTypes,
+  type: string,
   data: any,
   router: AppRouterInstance,
 ) => {
   switch (type) {
-    case 'VISITOR_ONLINE':
-    case 'VISITOR_OFFLINE': {
+    case EventTypes.VISITOR_ONLINE:
+    case EventTypes.VISITOR_OFFLINE: {
       const { online } = data
       setOnlineCount(online)
       break
@@ -74,7 +75,7 @@ export const eventHandler = (
       break
     }
 
-    case 'NOTE_DELETE': {
+    case EventTypes.NOTE_DELETE: {
       const note = data as NoteModel
       if (getCurrentNoteData()?.data.id === note.id) {
         router.replace(routeBuilder(Routes.PageDeletd, {}))
@@ -110,6 +111,16 @@ export const eventHandler = (
       break
     }
 
+    case 'fn#media-update': {
+      setActivityMediaInfo(data)
+      break
+    }
+
+    case 'fn#ps-update': {
+      setActivityProcessName(data.process)
+      break
+    }
+
     default: {
       if (isDev) {
         console.log(type, data)