feat: add media info

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

Author: Innei

public/apps/cmusic.png

@@ -119,10 +119,7 @@ export default async (props: NextPageParams<PageParams>) => {
         {isCN ? (
           <NotSupport />
         ) : (
-          <CommentAreaRoot
-            refId={data.id}
-            allowComment={data.allowComment ?? true}
-          />
+          <CommentAreaRoot refId={data.id} allowComment={data.allowComment} />
         )}
       </BottomToUpSoftScaleTransitionView>
     </>

src/app/(page-detail)/[slug]/layout.tsx

@@ -2,6 +2,7 @@ import '../styles/index.css'
 
 import { Analytics } from '@vercel/analytics/react'
 import { ToastContainer } from 'react-toastify'
+import type { AggregateRoot } from '@mx-space/api-client'
 
 import { ClerkProvider } from '@clerk/nextjs'
 
@@ -20,8 +21,11 @@ import { init } from './init'
 
 init()
 
+let aggregationData: AggregateRoot | null = null
 export const generateMetadata = defineMetadata(async (_, getData) => {
-  const { seo, url, user } = await getData()
+  const fetchedData = aggregationData ?? (await getData())
+  aggregationData = fetchedData
+  const { seo, url, user } = fetchedData
 
   return {
     metadataBase: new URL(url.webUrl),
@@ -93,6 +97,8 @@ export default async function RootLayout(props: Props) {
     ...queries.aggregation.root(),
   })
 
+  aggregationData = data
+
   return (
     // <ClerkProvider localization={ClerkZhCN}>
     <ClerkProvider>

src/app/layout.tsx

@@ -89,20 +89,20 @@ export default async (props: NextPageParams<PageParams>) => {
       <div className="relative flex min-h-[120px] grid-cols-[auto,200px] lg:grid">
         <BottomToUpTransitionView className="min-w-0">
           {props.children}
+
+          <BottomToUpSoftScaleTransitionView delay={500}>
+            {isCN ? (
+              <NotSupport />
+            ) : (
+              <CommentAreaRoot
+                refId={data.id}
+                allowComment={data.allowComment}
+              />
+            )}
+          </BottomToUpSoftScaleTransitionView>
         </BottomToUpTransitionView>
 
         <LayoutRightSideProvider className="relative hidden lg:block" />
-
-        <BottomToUpSoftScaleTransitionView delay={500}>
-          {isCN ? (
-            <NotSupport />
-          ) : (
-            <CommentAreaRoot
-              refId={data.id}
-              allowComment={data.allowComment ?? true}
-            />
-          )}
-        </BottomToUpSoftScaleTransitionView>
       </div>
     </>
   )

src/app/posts/(post-detail)/[category]/[slug]/layout.tsx

@@ -34,20 +34,28 @@ const appLabels: { [app: string]: string } = {
   NeteaseMusic: 'netease',
   iTerm2: 'iterm2',
   Xcode: 'xcode',
+
+  cmusic: 'cmusic',
 }
 // autocorrect: true
 export function Activity() {
   const [isEnabled, setIsEnabled] = useState(true)
 
-  const { data: processName } = useQuery(
+  const { data } = useQuery(
     ['activity'],
     async () => {
       return await apiClient.proxy.fn.ps.update
-        .post<string>()
-        .then((res) => res as string)
+        .post<{
+          processName: string
+          mediaInfo?: {
+            title: string
+            artist: string
+          }
+        }>()
+        .then((res) => res)
         .catch((err: RequestError) => {
           err.status === 404 && setIsEnabled(false)
-          return ''
+          return { processName: '', mediaInfo: undefined }
         })
     },
     {
@@ -58,19 +66,32 @@ export function Activity() {
   )
   const ownerName = useAggregationSelector((data) => data.user.name)
   const memoProcessName = useMemo(
-    () => ({ processName: processName! }),
-    [processName],
+    () => ({ processName: data?.processName || '' }),
+    [data?.processName],
   )
-  if (!processName) {
+  if (!data) {
     return null
   }
+  const { processName, mediaInfo: media } = data
   if (!appLabels[processName]) {
     console.log('Not collected process name: ', processName)
     return null
   }
 
   return (
     <AnimatePresence>
+      {!!media && (
+        <m.div className="absolute bottom-0 left-[-30px] top-0 flex items-center">
+          <FloatPopover
+            TriggerComponent={TriggerComponent}
+            triggerComponentProps={cMusicProps}
+            type="tooltip"
+          >
+            {ownerName} 正在听 {media.title} - {media.artist}
+          </FloatPopover>
+        </m.div>
+      )}
+
       <m.div
         key={processName}
         className="pointer-events-auto relative bottom-0 right-[-25px] top-0 z-[10] flex items-center overflow-hidden md:absolute"
@@ -95,7 +116,7 @@ export function Activity() {
     </AnimatePresence>
   )
 }
-
+const cMusicProps = { processName: 'cmusic' }
 const TriggerComponent = memo<{
   processName: string
 }>(({ processName }) => {

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

@@ -13,7 +13,9 @@ export const CommentAreaRoot: FC<
     allowComment: boolean
   }
 > = (props) => {
-  if (!props.allowComment) {
+  const { allowComment, refId } = props
+  // 兜下后端的数据，默认开
+  if (allowComment && typeof allowComment !== 'undefined') {
     return (
       <p className="mt-[100px] text-center text-xl font-medium">评论已关闭</p>
     )
@@ -22,10 +24,10 @@ export const CommentAreaRoot: FC<
   return (
     <LazyLoad placeholder={LoadingElement}>
       <div className="relative mt-12">
-        <CommentBoxRoot refId={props.refId} />
+        <CommentBoxRoot refId={refId} />
 
         <div className="h-12" />
-        <Comments refId={props.refId} />
+        <Comments refId={refId} />
       </div>
     </LazyLoad>
   )