feat(web): add perceptual node

web/src/views/UserMemoryDetail/components/VideoPlayer.tsx

@@ -0,0 +1,62 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-03-24 12:21:56 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-03-24 12:21:56 
+ */
+import { type FC, useRef, useState } from 'react'
+import { CloseOutlined } from '@ant-design/icons'
+interface VideoPlayerProps {
+  src: string
+}
+
+const VideoPlayer: FC<VideoPlayerProps> = ({ src }) => {
+  const [open, setOpen] = useState(false)
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  const handleOpen = () => setOpen(true)
+
+  const handleClose = () => {
+    videoRef.current?.pause()
+    setOpen(false)
+  }
+
+  return (
+    <>
+      {/* Thumbnail with play overlay */}
+      <div
+        className="rb:relative rb:w-full rb:h-45 rb:rounded-xl rb:overflow-hidden rb:cursor-pointer rb:group"
+        onClick={handleOpen}
+      >
+        <video src={src} className="rb:w-full rb:h-full rb:object-cover" preload="metadata" />
+        <div className="rb:absolute rb:inset-0 rb:bg-black/20 rb:flex rb:items-center rb:justify-center rb:transition-colors group-hover:rb:bg-black/30">
+          <div className="rb:size-10 rb:rounded-full rb:bg-white/80 rb:flex rb:items-center rb:justify-center">
+            <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+              <path d="M5 3.5L14.5 9L5 14.5V3.5Z" fill="#171719" />
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      {/* Fullscreen modal */}
+      {open && (
+        <div
+          className="rb:fixed rb:inset-0 rb:z-1000 rb:bg-black/80 rb:flex rb:items-center rb:justify-center"
+          onClick={handleClose}
+        >
+          <button className="ant-image-preview-close"><CloseOutlined /></button>
+          <video
+            ref={videoRef}
+            src={src}
+            controls
+            autoPlay
+            className="rb:max-w-[90vw] rb:max-h-[90vh] rb:rounded-xl"
+            onClick={e => e.stopPropagation()}
+          />
+        </div>
+      )}
+    </>
+  )
+}
+
+export default VideoPlayer