feat(home): add copy link action

package.json

@@ -19,6 +19,7 @@
     "@types/node": "^17.0.9",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
+    "copy-to-clipboard": "^3.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.6",

src/ui/components/pages/Home/ChannelRenderer/ChannelVideos/VideoCard/TopActions/CopyLinkAction.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { Grow, IconButton, Tooltip } from '@mui/material';
+import { Video } from 'types';
+import LinkIcon from '@mui/icons-material/Link';
+import CheckIcon from '@mui/icons-material/Check';
+import copy from 'copy-to-clipboard';
+
+interface CopyLinkActionProps {
+  video: Video;
+}
+
+function CopyLinkAction(props: CopyLinkActionProps) {
+  const { video } = props;
+  const [isShown, setIsShown] = useState(true);
+  const [copied, setCopied] = useState(false);
+
+  const handleClick = () => {
+    if (copied) return;
+    copy(video.url);
+    setCopied(true);
+    setTimeout(() => {
+      setIsShown(false);
+    }, 1000);
+  };
+
+  return (
+    <Grow in={isShown}>
+      <Tooltip
+        title={copied ? 'Copied!' : 'Copy link to clipboard'}
+        aria-label="copy-link"
+      >
+        <IconButton
+          sx={{
+            color: '#eee',
+            backgroundColor: 'rgba(0, 0, 0, 0.8)',
+            padding: '4px',
+            borderRadius: '2px',
+            '&:hover': {
+              color: '#fff',
+            },
+          }}
+          size="small"
+          onClick={handleClick}
+        >
+          {copied ? (
+            <CheckIcon sx={{ fontSize: '1.125rem' }} color="success" />
+          ) : (
+            <LinkIcon sx={{ fontSize: '1.125rem' }} />
+          )}
+        </IconButton>
+      </Tooltip>
+    </Grow>
+  );
+}
+
+export default CopyLinkAction;

src/ui/components/pages/Home/ChannelRenderer/ChannelVideos/VideoCard/TopActions/index.tsx

@@ -5,6 +5,7 @@ import WatchLaterAction from './WatchLaterAction';
 import SeenAction from './SeenAction';
 import ArchiveAction from './ArchiveAction';
 import IgnoreAction from './IgnoreAction';
+import CopyLinkAction from './CopyLinkAction';
 
 interface VideoTopActionsProps {
   video: Video;
@@ -25,6 +26,7 @@ function VideoTopActions(props: VideoTopActionsProps) {
         gap: '4px',
       }}
     >
+      <CopyLinkAction video={video} />
       <IgnoreAction video={video} view={view} />
       <SeenAction video={video} />
       <ArchiveAction video={video} view={view} />