Feat: Add buttons to copy the ED2K hash to the clipboard in the link format

src/components/FileInfo.tsx

@@ -1,13 +1,24 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { mdiClipboardOutline } from '@mdi/js';
+import Icon from '@mdi/react';
 import prettyBytes from 'pretty-bytes';
 
+import { copyToClipboard } from '@/core/util';
+import getEd2kLink from '@/core/utilities/getEd2kLink';
+import useEventCallback from '@/hooks/useEventCallback';
 import useMediaInfo from '@/hooks/useMediaInfo';
 
 import type { FileType } from '@/core/types/api/file';
 
 const FileInfo = ({ compact, file }: { compact?: boolean, file: FileType }) => {
   const mediaInfo = useMediaInfo(file);
 
+  const hash = useMemo(() => getEd2kLink(file), [file]);
+  const handleCopy = useEventCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+    copyToClipboard(hash, 'ED2K hash').catch(console.error);
+  });
+
   return (
     <div className="flex flex-col gap-y-6">
       <div className="flex flex-col gap-y-4">
@@ -56,7 +67,12 @@ const FileInfo = ({ compact, file }: { compact?: boolean, file: FileType }) => {
           <div className="flex flex-col gap-y-1">
             <div className="flex">
               <div className="min-w-[9.375rem] font-semibold">ED2K</div>
-              {mediaInfo.Hashes.ED2K ?? ''}
+              <div className="flex gap-x-2">
+                {mediaInfo.Hashes.ED2K ?? ''}
+                <div className="cursor-pointer text-panel-icon-action" onClick={handleCopy}>
+                  <Icon path={mdiClipboardOutline} size={1} />
+                </div>
+              </div>
             </div>
             <div className="flex">
               <div className="min-w-[9.375rem] font-semibold">CRC</div>

src/components/Utilities/Unrecognized/AvDumpFileIcon.tsx

@@ -14,6 +14,7 @@ import cx from 'classnames';
 import Button from '@/components/Input/Button';
 import { useAvdumpFilesMutation } from '@/core/react-query/avdump/mutations';
 import { copyToClipboard } from '@/core/util';
+import getEd2kLink from '@/core/utilities/getEd2kLink';
 import useEventCallback from '@/hooks/useEventCallback';
 
 import type { RootState } from '@/core/store';
@@ -25,13 +26,7 @@ const AVDumpFileIcon = ({ file, truck = false }: { file: FileType, truck?: boole
   const fileId = file.ID;
   const dumpSession = avdumpList.sessions[avdumpList.sessionMap[fileId]];
 
-  const hash = useMemo(
-    () =>
-      `ed2k://|file|${
-        file.Locations[0]?.RelativePath?.split(/[\\/]+/g).pop() ?? ''
-      }|${file.Size}|${file.Hashes.ED2K}|/`,
-    [file],
-  );
+  const hash = useMemo(() => getEd2kLink(file), [file]);
 
   const { color, path, state, title } = useMemo(() => {
     if (dumpSession?.status === 'Running') {

src/core/utilities/getEd2kLink.ts

@@ -0,0 +1,6 @@
+import type { FileType } from '@/core/types/api/file';
+
+const getEd2kLink = (file: FileType) =>
+  `ed2k://|file|${file.Locations[0]?.RelativePath?.split(/[\\/]+/g).pop() ?? ''}|${file.Size}|${file.Hashes.ED2K}|/`;
+
+export default getEd2kLink;

src/pages/utilities/FileSearch.tsx

@@ -4,6 +4,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import {
   mdiChevronLeft,
   mdiChevronRight,
+  mdiClipboardOutline,
   mdiCloseCircleOutline,
   mdiDatabaseSearchOutline,
   mdiDatabaseSyncOutline,
@@ -41,6 +42,8 @@ import { invalidateQueries } from '@/core/react-query/queryClient';
 import { useSeriesQuery } from '@/core/react-query/series/queries';
 import { addFiles } from '@/core/slices/utilities/renamer';
 import { FileSortCriteriaEnum } from '@/core/types/api/file';
+import { copyToClipboard } from '@/core/util';
+import getEd2kLink from '@/core/utilities/getEd2kLink';
 import useEventCallback from '@/hooks/useEventCallback';
 import useFlattenListResult from '@/hooks/useFlattenListResult';
 import useMediaInfo from '@/hooks/useMediaInfo';
@@ -169,6 +172,12 @@ const Menu = (
 
 const MediaInfoDetails = React.memo(({ file }: { file: FileType }) => {
   const mediaInfo = useMediaInfo(file);
+  const ed2kHash = useMemo(() => getEd2kLink(file), [file]);
+
+  const copyEd2kLink = useEventCallback((event: React.MouseEvent) => {
+    event.stopPropagation();
+    copyToClipboard(ed2kHash, 'ED2K Hash').catch(console.error);
+  });
 
   return (
     <>
@@ -204,7 +213,12 @@ const MediaInfoDetails = React.memo(({ file }: { file: FileType }) => {
         <div className="flex break-after-all justify-between capitalize">
           <span className="font-semibold">ED2K</span>
         </div>
-        <span className="break-all">{mediaInfo.Hashes.ED2K ?? ''}</span>
+        <div className="flex break-after-all justify-between">
+          <span className="break-all">{mediaInfo.Hashes.ED2K ?? ''}</span>
+          <div className="cursor-pointer text-panel-icon-action" onClick={copyEd2kLink}>
+            <Icon path={mdiClipboardOutline} size={1} />
+          </div>
+        </div>
       </div>
       <div className="flex flex-col gap-y-1">
         <div className="flex justify-between capitalize">

src/pages/utilities/UnrecognizedUtilityTabs/UnrecognizedTab.tsx

@@ -46,6 +46,7 @@ import { useImportFoldersQuery } from '@/core/react-query/import-folder/queries'
 import { invalidateQueries } from '@/core/react-query/queryClient';
 import { addFiles } from '@/core/slices/utilities/renamer';
 import { FileSortCriteriaEnum } from '@/core/types/api/file';
+import getEd2kLink from '@/core/utilities/getEd2kLink';
 import useEventCallback from '@/hooks/useEventCallback';
 import useFlattenListResult from '@/hooks/useFlattenListResult';
 import useRowSelection from '@/hooks/useRowSelection';
@@ -347,10 +348,7 @@ function UnrecognizedTab() {
   const getED2KLinks = useEventCallback(() => ({
     fileIds: selectedRows.map(file => file.ID),
     links: selectedRows.map(
-      file =>
-        `ed2k://|file|${
-          file.Locations[0]?.RelativePath?.split(/[\\/]+/g).pop() ?? ''
-        }|${file.Size}|${file.Hashes.ED2K}|/`,
+      file => getEd2kLink(file),
     ).toSorted(),
   }));