feat: update time when visible & support img preview

package.json

@@ -21,6 +21,7 @@
     "observe-element-in-viewport": "^0.0.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-photo-view": "^1.2.3",
     "vconsole": "^3.15.0"
   },
   "devDependencies": {

src/components/ClipBoardItemContent.tsx

@@ -3,6 +3,9 @@ import { FC } from "react";
 import { ClipBoardData } from "../hooks/useClipboardData";
 import { ClipBoardDataType } from "../utils/clipboard";
 
+import { PhotoProvider, PhotoView } from "react-photo-view";
+import "react-photo-view/dist/react-photo-view.css";
+
 export const ClipBoardItemContent: FC<{
   item: ClipBoardData;
 }> = ({ item }) => {
@@ -13,7 +16,11 @@ export const ClipBoardItemContent: FC<{
           width: "100%",
         }}
       >
-        <img src={item.base64} style={{ height: "300px" }} />
+        <PhotoProvider>
+          <PhotoView src={item.base64}>
+            <img src={item.base64} style={{ height: "200px" }} />
+          </PhotoView>
+        </PhotoProvider>
         <Typography
           color={colors.grey[500]}
         >{`${item.width} x ${item.height}`}</Typography>
@@ -42,8 +49,16 @@ export const ClipBoardItemContent: FC<{
     <ListItemText
       sx={{
         padding: 0,
+        maxHeight: "200px",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        display: "-webkit-box",
+        WebkitLineClamp: 3,
+        WebkitBoxOrient: "vertical",
+        width: "200px",
       }}
       inset
+      disableTypography
       primary={item.data}
     />
   );

src/components/ClipBoardList.tsx

@@ -5,8 +5,17 @@ import {
   ListItemText,
   colors,
 } from "@mui/material";
-import { FC, forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { useDocumentVisibility } from "ahooks";
+import {
+  FC,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
 import { ClipBoardData } from "../hooks/useClipboardData";
+import { ClipBoardRawData } from "../utils/clipboard";
 import { timeAgo } from "../utils/format";
 import { ClipBoardItemContent } from "./ClipBoardItemContent";
 
@@ -25,21 +34,33 @@ export const ClipBoardList = forwardRef<IClipboardRef, IProps>(
   ({ clipBoardList, activeIndexList, onActiveChange }, ref) => {
     const containerRef = useRef<HTMLUListElement | null>(null);
 
+    const documentVisibility = useDocumentVisibility();
+
     useImperativeHandle(ref, () => ({
       container: containerRef.current,
       getActiveItem() {
         return document.getElementById("clip-board-active");
       },
     }));
 
+    const formatClipBoardList = useMemo(() => {
+      if (documentVisibility !== "visible") {
+        return clipBoardList as (ClipBoardRawData & { ago?: number })[];
+      }
+      return clipBoardList.map((x) => ({
+        ...x,
+        ago: timeAgo(x.timestamp!),
+      }));
+    }, [clipBoardList, documentVisibility]);
+
     return (
       <List
         sx={{
           overflowX: "auto",
         }}
         ref={(node) => (containerRef.current = node)}
       >
-        {clipBoardList.map((x, index) => (
+        {formatClipBoardList.map((x, index) => (
           <ListItem
             key={index}
             disablePadding
@@ -61,7 +82,7 @@ export const ClipBoardList = forwardRef<IClipboardRef, IProps>(
             >
               <ListItemText
                 inset
-                secondary={timeAgo(x.timestamp!)}
+                secondary={x.ago}
                 sx={{
                   flexGrow: 0,
                   paddingLeft: "10px",