Add: Copy Video Link

Bounty: 25QORT - äNDi

.gitignore

@@ -22,4 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-*.zip
+*.zip
+/.vs

package.json

@@ -49,6 +49,6 @@
     "eslint-plugin-react-refresh": "^0.4.16",
     "prettier": "^3.4.2",
     "typescript": "^5.7.2",
-    "vite": "^6.0.6"
+    "vite": "^6.3.5"
   }
 }

src/pages/ContentPages/VideoContent/VideoActionsBar.tsx

@@ -1,8 +1,12 @@
 import DownloadIcon from "@mui/icons-material/Download";
-import { Box, SxProps, Theme, useMediaQuery } from "@mui/material";
+import { Box, ButtonBase, SxProps, Theme, useMediaQuery } from "@mui/material";
 import { useMemo } from "react";
 import { LikeAndDislike } from "../../../components/common/ContentButtons/LikeAndDislike.tsx";
 import { SuperLike } from "../../../components/common/ContentButtons/SuperLike.tsx";
+import Tooltip, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
+import ShareIcon from '@mui/icons-material/Share'
+import { useDispatch, useSelector } from 'react-redux'
+import { setNotification } from '../../../state/features/notificationsSlice'
 import FileElement from "../../../components/common/FileElement.tsx";
 import {
   smallScreenSizeString,
@@ -44,6 +48,8 @@ export const VideoActionsBar = ({
     return superLikeList?.length ?? 0;
   }, [superLikeList]);
 
+  const dispatch = useDispatch()
+
   const saveAsFilename = useMemo(() => {
     // nb. we prefer to construct the local filename to use for
     // saving, from the video "title" when possible
@@ -108,7 +114,30 @@ export const VideoActionsBar = ({
             />
           </>
         )}
-      </Box>
+          </Box>
+          <Tooltip title={`Copy video link`} arrow>
+              <Box
+                  sx={{
+                      cursor: 'pointer'
+                  }}
+              >
+                  <ButtonBase   
+                      onClick={() => {
+                          navigator.clipboard.writeText(`qortal://APP/Q-Tube/video/${videoData?.user}/${videoData?.id}`).then(() => {
+                              dispatch(
+                                  setNotification({
+                                      msg: 'Copied to clipboard!',
+                                      alertType: 'success'
+                                  })
+                              )    
+                          })
+                      }}
+                  >
+                      <ShareIcon />
+                  </ButtonBase>
+              </Box>
+          </Tooltip>
+
 
       {videoData && (
         <FileAttachmentContainer sx={{ width: "100%", maxWidth: "340px" }}>

vite.config.ts

@@ -4,6 +4,9 @@ import react from "@vitejs/plugin-react";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  server: { port: 3000 },
+    server: {
+        host: '0.0.0.0',
+        port: 3000
+    },
   base: "",
 });