From 3745cfbd88157fa49c363858207a2b7ee3249afc Mon Sep 17 00:00:00 2001
From: flytam <tanjiahui2015@foxmail.com>
Date: Tue, 28 Mar 2023 20:44:58 +0800
Subject: [PATCH] feat: update time when visible & support img preview

---
 package.json                            |  1 +
 pnpm-lock.yaml                          | 12 +++++++++++
 src/components/ClipBoardItemContent.tsx | 17 +++++++++++++++-
 src/components/ClipBoardList.tsx        | 27 ++++++++++++++++++++++---
 4 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 8852361..fc616dd 100644
--- a/package.json
+++ b/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": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b7ca1e3..7a4786e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,6 +24,7 @@ specifiers:
   pretty-quick: ^3.1.3
   react: ^18.2.0
   react-dom: ^18.2.0
+  react-photo-view: ^1.2.3
   tailwindcss: ^3.2.7
   typescript: ^4.9.3
   utools-api-types: ^3.0.0
@@ -42,6 +43,7 @@ dependencies:
   observe-element-in-viewport: 0.0.15
   react: 18.2.0
   react-dom: 18.2.0_react@18.2.0
+  react-photo-view: 1.2.3_biqbaboplfbrettd7655fr4n2y
   vconsole: 3.15.0
 
 devDependencies:
@@ -2115,6 +2117,16 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: false
 
+  /react-photo-view/1.2.3_biqbaboplfbrettd7655fr4n2y:
+    resolution: {integrity: sha512-dtaFjU8nAB/rD8mxBaaJcvESlDOweAd1tmvXujS/d3oh1QyGew3xD4C02l46E6Dhn3Tshzl2+IM1h0MWV9nG7g==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      react: 18.2.0
+      react-dom: 18.2.0_react@18.2.0
+    dev: false
+
   /react-transition-group/4.4.5_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
     peerDependencies:
diff --git a/src/components/ClipBoardItemContent.tsx b/src/components/ClipBoardItemContent.tsx
index f098001..4075dbf 100644
--- a/src/components/ClipBoardItemContent.tsx
+++ b/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}
     />
   );
diff --git a/src/components/ClipBoardList.tsx b/src/components/ClipBoardList.tsx
index 30df986..aaff6fc 100644
--- a/src/components/ClipBoardList.tsx
+++ b/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,6 +34,8 @@ 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() {
@@ -32,6 +43,16 @@ export const ClipBoardList = forwardRef<IClipboardRef, IProps>(
       },
     }));
 
+    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={{
@@ -39,7 +60,7 @@ export const ClipBoardList = forwardRef<IClipboardRef, IProps>(
         }}
         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",