Merge pull request #77 from MergeMerc/main

Right Click - Context Menu "Copy Link" on Video Cards on Main Page

src/components/common/ContextMenu/ContextMenuResource.tsx

@@ -0,0 +1,83 @@
+import * as React from 'react'
+import Menu from '@mui/material/Menu'
+import MenuItem from '@mui/material/MenuItem'
+import Typography from '@mui/material/Typography'
+//import { CopyToClipboard } from 'react-copy-to-clipboard'
+import { useDispatch } from 'react-redux'
+import { setNotification } from '../../../state/features/notificationsSlice'
+import { Box, ButtonBase } from '@mui/material'
+
+export default function ContextMenuResource({
+  children,
+  name,
+  service,
+  identifier,
+  link
+}: any) {
+  const [contextMenu, setContextMenu] = React.useState<{
+    mouseX: number
+    mouseY: number
+  } | null>(null)
+  const dispatch = useDispatch()
+  const handleContextMenu = (event: React.MouseEvent) => {
+    event.preventDefault()
+    setContextMenu(
+      contextMenu === null
+        ? {
+            mouseX: event.clientX + 2,
+            mouseY: event.clientY - 6
+          }
+        : // repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu
+          // Other native context menus might behave different.
+          // With this behavior we prevent contextmenu from the backdrop to re-locale existing context menus.
+          null
+    )
+  }
+
+  const handleClose = () => {
+    setContextMenu(null)
+  }
+
+  return (
+    <div
+      onContextMenu={handleContextMenu}
+      style={{ cursor: 'context-menu', width: '100%' }}
+    >
+      {children}
+      <Menu
+        open={contextMenu !== null}
+        onClose={handleClose}
+        anchorReference="anchorPosition"
+        anchorPosition={
+          contextMenu !== null
+            ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
+            : undefined
+        }
+      >
+        <MenuItem>
+          <ButtonBase
+            onClick={() => {
+                handleClose()
+                navigator.clipboard.writeText(`${link}`).then(() => {
+                    dispatch(
+                        setNotification({
+                            msg: 'Copied to clipboard!',
+                            alertType: 'success'
+                        })
+                    )
+                })
+            }}
+          >
+            <Box
+              sx={{
+                fontSize: '16px'
+              }}
+            >
+              Copy Link
+            </Box>
+          </ButtonBase>
+        </MenuItem>
+      </Menu>
+    </div>
+  )
+}

src/pages/Home/Components/VideoList.tsx

@@ -29,6 +29,7 @@ import {
   VideoCardTitle,
   VideoUploadDate,
 } from "./VideoList-styles.tsx";
+import ContextMenuResource from '../../../components/common/ContextMenu/ContextMenuResource'
 
 interface VideoListProps {
   videos: Video[];
@@ -64,7 +65,7 @@ export const VideoList = ({ videos }: VideoListProps) => {
     }
   };
 
-  return (
+    return (
     <VideoCardContainer>
       {videos.map((video: any) => {
         const fullId = video ? `${video.id}-${video.user}` : undefined;
@@ -91,7 +92,7 @@ export const VideoList = ({ videos }: VideoListProps) => {
         const isPlaylist = videoObj?.service === "PLAYLIST";
 
         if (isPlaylist) {
-          return (
+            return (
             <VideoCardCol
               onMouseEnter={() => setShowIcons(videoObj.id)}
               onMouseLeave={() => setShowIcons(null)}
@@ -127,7 +128,7 @@ export const VideoList = ({ videos }: VideoListProps) => {
                   </Tooltip>
                 )}
               </IconsBox>
-
+               
               <VideoCard
                 sx={{
                   cursor: !hasHash && "default",
@@ -190,11 +191,17 @@ export const VideoList = ({ videos }: VideoListProps) => {
                   </Box>
                 </BottomParent>
               </VideoCard>
-            </VideoCardCol>
+              </VideoCardCol>
           );
         }
 
-        return (
+          return (
+          <ContextMenuResource
+            name={video.user}
+            service="VIDEO"
+            identifier={video.id}
+            link={`qortal://APP/Q-Tube/video/${video.user}/${video.id}`}
+          >
           <VideoCardCol
             key={videoObj.id}
             onMouseEnter={() => setShowIcons(videoObj.id)}
@@ -292,7 +299,8 @@ export const VideoList = ({ videos }: VideoListProps) => {
                 )}
               </BottomParent>
             </VideoCard>
-          </VideoCardCol>
+            </VideoCardCol>
+          </ContextMenuResource>
         );
       })}
     </VideoCardContainer>