fix delete, add copy

Author: gregordr

frontend/src/Components/AlbumPage/AlbumPhotoPage/TopRightBar.tsx

@@ -1,5 +1,5 @@
 import { IconButton, Tooltip } from "@material-ui/core";
-import { CloudDownload, Delete, Info, LibraryAdd, Pages, RemoveCircleOutline, Search } from "@material-ui/icons";
+import { CloudDownload, Delete, FileCopy, Info, LibraryAdd, Pages, RemoveCircleOutline, Search } from "@material-ui/icons";
 import { useHistory } from "react-router-dom";
 
 
@@ -28,7 +28,19 @@ export default function TopRightBar(props: any) {
                     <Info />
                 </IconButton>
             </Tooltip>
-
+            <Tooltip title="Copy">
+                <IconButton
+                    className="IconButton"
+                    color="primary"
+                    aria-label="copy"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        props.buttonFunctions.copy(props.id);
+                    }}
+                >
+                    <FileCopy />
+                </IconButton>
+            </Tooltip>
             <Tooltip title="Set as album cover">
                 <IconButton
                     className="IconButton"

frontend/src/Components/PhotoPage/TopRightBar.tsx

@@ -1,5 +1,5 @@
 import { IconButton, Tooltip } from "@material-ui/core";
-import { CloudDownload, Delete, Info, LibraryAdd, Search } from "@material-ui/icons";
+import { CloudDownload, Delete, FileCopy, Info, LibraryAdd, Search } from "@material-ui/icons";
 import { useHistory } from "react-router-dom";
 
 export default function TopRightBar(props: any) {
@@ -27,6 +27,19 @@ export default function TopRightBar(props: any) {
                     <Info />
                 </IconButton>
             </Tooltip>
+            <Tooltip title="Copy">
+                <IconButton
+                    className="IconButton"
+                    color="primary"
+                    aria-label="copy"
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        props.buttonFunctions.copy(props.id);
+                    }}
+                >
+                    <FileCopy />
+                </IconButton>
+            </Tooltip>
             {props.searchByImageEnabled &&
                 <Tooltip title="Search for similar">
                     <IconButton

frontend/src/Components/Shared/PhotoPage.tsx

@@ -358,11 +358,12 @@ export default function PhotoPage(props: { handleDrawerToggle: () => void; drawe
     }
 
     const viewButtonFunctions = {
-        delete: async (id: string) => {
+        delete: async (id: string, onDeletedCB: any) => {
             setOnDeleteDialogState({
                 open: true,
                 handleClose: (confirm: boolean) => async () => {
                     if (confirm) {
+                        onDeletedCB();
                         await deletePhoto(id);
                         await props.refresh();
                     }

frontend/src/Components/ViewPage/ViewPage.tsx

@@ -203,13 +203,14 @@ export default function ViewPage(props: { photos: PhotoT[]; setViewId: (arg0: st
     const modifiedButtonFunctions = {
         ...props.buttonFunctions,
         delete: async (id: string) => {
-            if (props.photos.length === 1) history.replace((history.location.pathname.split("/").splice(0, history.location.pathname.split("/").length - 2).join("/") || "/") + queryUrl);
-            else if (index === 0) {
-                slideChange(1);
-            } else {
-                slideChange(index - 1);
-            }
-            await props.buttonFunctions.delete(id);
+            await props.buttonFunctions.delete(id, () => {
+                if (props.photos.length === 1) history.replace((history.location.pathname.split("/").splice(0, history.location.pathname.split("/").length - 2).join("/") || "/") + queryUrl);
+                else if (index === 0) {
+                    slideChange(1);
+                } else {
+                    slideChange(index - 1);
+                }
+            });
         },
         remove: async (id: string) => {
             if (props.photos.length === 1) history.replace((history.location.pathname.split("/").splice(0, history.location.pathname.split("/").length - 2).join("/") || "/") + queryUrl);
@@ -220,6 +221,28 @@ export default function ViewPage(props: { photos: PhotoT[]; setViewId: (arg0: st
             localStorage.setItem("drawerOpen", drawerOpen ? "false" : "true");
             setDrawerOpen(!drawerOpen);
         },
+        copy: async (id: string) => {
+            const imageUrl = baseURL + "/media/" + id
+
+            try {
+                const img = await fetch(imageUrl);
+                const imgBlob = await img.blob();
+
+                const mimeType = 'image/png'
+                const imageBlob = new Blob([imgBlob], { type: mimeType });
+
+                await navigator.clipboard.write([
+                    new ClipboardItem({
+                        [mimeType]: Promise.resolve(imageBlob)
+                    })
+                ]);
+
+            } catch (err) {
+                console.error("Failed to copy image: ", err);
+            }
+
+
+        }
     };
 
     const prevRef = useRef<HTMLDivElement>(null);