Fix copy to clipboard for images

@types/messageHandler.d.ts

@@ -14,7 +14,6 @@ export interface MessageHandler {
   listEpisodes: (id: string) => Promise<EpisodeListResponse>,
   downloadItem: (data: QueueItem) => void,
   isDownloading: () => Promise<boolean>,
-  writeToClipboard: (text: string) => void,
   openFolder: (path: FolderTypes) => void,
   openFile: (data: [FolderTypes, string]) => void,
   openURL: (data: string) => void;

@types/ws.d.ts

@@ -27,7 +27,6 @@ export type MessageTypes = {
   'listEpisodes': [string, EpisodeListResponse],
   'downloadItem': [QueueItem, undefined],
   'isDownloading': [undefined, boolean],
-  'writeToClipboard': [string, undefined],
   'openFolder': [FolderTypes, undefined],
   'changeProvider': [undefined, boolean],
   'type': [undefined, 'funi'|'crunchy'|undefined],

gui/react/src/components/AddToQueue/SearchBox/SearchBox.tsx

@@ -76,12 +76,18 @@ const SearchBox: React.FC = () => {
                     </Box>
                   </Box>
                 </ListItem>
-                <ContextMenu options={[ { text: 'Copy image URL', onClick: () => {
-                  messageHandler?.writeToClipboard(a.image);
+                <ContextMenu options={[ { text: 'Copy image URL', onClick: async () => {
+                  await navigator.clipboard.writeText(a.image);
                   enqueueSnackbar('Copied URL to clipboard', {
                     variant: 'info'
                   });
-                }} ]} popupItem={imageRef} />
+                }},
+                {
+                  text: 'Open image in new tab',
+                  onClick: () => {
+                    window.open(a.image);
+                  } 
+                } ]} popupItem={imageRef} />
                 {(ind < arr.length - 1) && <Divider />}
               </Box>;
             })

gui/react/src/components/reusable/ContextMenu.tsx

@@ -44,7 +44,7 @@ function ContextMenu<T extends HTMLElement, >(props: ContextMenuProps<T>) {
   }, [ props.popupItem ]);
 
   return show ? <Box sx={{ zIndex: 9999, p: 1, background: 'rgba(0, 0, 0, 0.75)', backdropFilter: 'blur(5px)', position: 'fixed', left: anchor.x, top: anchor.y }}>
-    <List sx={{ p: 0, m: 0 }}>
+    <List sx={{ p: 0, m: 0, display: 'flex', flexDirection: 'column' }}>
       {props.options.map((item, i) => {
         return item === 'divider' ? <Divider key={`ContextMenu_Divider_${i}_${item}`}/> : 
           <Button color='inherit' key={`ContextMenu_Value_${i}_${item}`} onClick={() => {

gui/react/src/provider/MessageChannel.tsx

@@ -223,7 +223,6 @@ const MessageChannelProvider: FCWithChildren = ({ children }) => {
     randomEvents: randomEventHandler,
     downloadItem: (data) => messageAndResponse(socket, { name: 'downloadItem', data }),
     isDownloading: async () => (await messageAndResponse(socket, { name: 'isDownloading', data: undefined })).data,
-    writeToClipboard: async (data) =>  messageAndResponse(socket, { name: 'writeToClipboard', data }),
     openFolder: async (data) =>  messageAndResponse(socket, { name: 'openFolder', data }),
     logout: async () => (await messageAndResponse(socket, { name: 'changeProvider', data: undefined })).data,
     openFile: async (data) => await messageAndResponse(socket, { name: 'openFile', data }),

gui/server/serviceHandler.ts

@@ -86,10 +86,6 @@ export default class ServiceHandler {
       this.service?.downloadItem(data);
       respond(undefined);
     });
-    this.ws.events.on('writeToClipboard', async ({ data }, respond) => {
-      this.service?.writeToClipboard(data);
-      respond(undefined);
-    });
     this.ws.events.on('openFolder', async ({ data }, respond) => {
       this.service?.openFolder(data);
       respond(undefined);

gui/server/services/base.ts

@@ -1,7 +1,6 @@
 import { DownloadInfo, FolderTypes, ProgressData, QueueItem } from '../../../@types/messageHandler';
 import { RandomEvent, RandomEvents } from '../../../@types/randomEvents';
 import WebSocketHandler from '../websocket';
-import copy from 'copy-to-clipboard';
 import open from 'open';
 import { cfg } from '..';
 import path from 'path';
@@ -48,11 +47,6 @@ export default class Base {
     return this.downloading;
   }
 
-  async writeToClipboard(text: string) {
-    copy(text);
-    return true;
-  } 
-
   async openFolder(folderType: FolderTypes) {
     switch (folderType) {
     case 'content':

package.json

@@ -40,7 +40,6 @@
     "@babel/plugin-syntax-flow": "^7.18.6",
     "@babel/plugin-transform-react-jsx": "^7.21.0",
     "cheerio": "1.0.0-rc.12",
-    "copy-to-clipboard": "^3.3.3",
     "cors": "^2.8.5",
     "dotenv": "^16.0.3",
     "eslint-plugin-import": "^2.27.5",