Stuff

@types/messageHandler.d.ts

@@ -12,7 +12,8 @@ export interface MessageHandler {
   listEpisodes: (id: string) => Promise<EpisodeListResponse>,
   downloadItem: (data) => void,
   isDownloading: () => boolean,
-  writeToClipboard: (text: string) => void
+  writeToClipboard: (text: string) => void,
+  openFolder: (path: string[]) => void
 }
 
 export type QueueItem = {

TODO.md

@@ -9,4 +9,5 @@
 - [ ] Add help information (version, contributor, documentation...)
 - [ ] App Icon with electron-forge make
 - [x] ContextMenu
-- [x] Better episode listing with selectio via left mouse button
+- [x] Better episode listing with selectio via left mouse button
+- [x] Use Child for Context Menu

gui/electron/src/index.ts

@@ -14,7 +14,7 @@ if (require('electron-squirrel-startup')) {
   app.quit();
 }
 
-const isWindows = __dirname.indexOf('\\') !== -1;
+export const isWindows = __dirname.indexOf('\\') !== -1;
 
 let mainWindow: BrowserWindow|undefined = undefined;
 export { mainWindow };

gui/electron/src/menu.ts

@@ -37,6 +37,9 @@ const template: (MenuItemConstructorOptions | MenuItem)[] = [
         click: () => {
           shell.openPath(path.join(__dirname, 'logs'))
         }
+      },
+      {
+        role: 'forceReload'
       }
     ]
   },

gui/electron/src/messageHandler.ts

@@ -23,5 +23,6 @@ export default (window: BrowserWindow) => {
   ipcMain.handle('listEpisodes', async (_, data) => handler?.listEpisodes(data));
   ipcMain.handle('downloadItem', async (_, data) => handler?.downloadItem(data));
   ipcMain.handle('writeToClipboard', async (_, data) => handler?.writeToClipboard(data));
+  ipcMain.handle('openFolder', async (_, data) => handler?.openFolder(data));
   ipcMain.on('isDownloading', (ev) => ev.returnValue = handler?.isDownloading());
 };

gui/electron/src/serviceHandler/base.ts

@@ -1,6 +1,7 @@
-import { BrowserWindow, clipboard, dialog } from "electron";
-import { DownloadInfo, ExtendedProgress, ProgressData } from "../../../../@types/messageHandler";
+import { BrowserWindow, clipboard, dialog, shell } from "electron";
+import { DownloadInfo, ProgressData } from "../../../../@types/messageHandler";
 import { RandomEvent, RandomEvents } from "../../../../@types/randomEvents";
+import { isWindows } from "..";
 
 export default class Base {
 
@@ -54,4 +55,12 @@ export default class Base {
     return true;
   } 
 
+  async openFolder(subPath: string[]) {
+    const sep = isWindows ? '\\' : '/';
+
+    const p = __dirname.split(sep).slice(0, -4); // gui/electron/src/serviceHandler
+    p.push(...subPath);
+    shell.openPath(p.join(sep));
+  }
+
 }

gui/react/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "reacttt",
+  "name": "react",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

gui/react/src/components/MainFrame/DownloadSelector/DownloadSelector.tsx

@@ -5,6 +5,7 @@ import MultiSelect from "../../reusable/MultiSelect";
 import { messageChannelContext } from "../../../provider/MessageChannel";
 import LoadingButton from '@mui/lab/LoadingButton';
 import { useSnackbar } from "notistack";
+import { Folder } from "@mui/icons-material";
 
 const DownloadSelector: React.FC = () => {
   const messageHandler = React.useContext(messageChannelContext);
@@ -21,7 +22,6 @@ const DownloadSelector: React.FC = () => {
       const q = messageHandler?.handleDefault('q');
       const fileName = messageHandler?.handleDefault('fileName');
       const result = await Promise.all([dubLang, q, fileName]);
-      console.log(result);
       dispatch({
         type: 'downloadOptions',
         payload: {
@@ -123,6 +123,7 @@ const DownloadSelector: React.FC = () => {
     <Box sx={{ gap: 2, flex: 0, m: 1, mb: 3, display: 'flex', justifyContent: 'center' }}>
       <LoadingButton loading={loading} onClick={listEpisodes} variant='contained'>List episodes</LoadingButton>
       <LoadingButton loading={loading} onClick={addToQueue} variant='contained'>Add to Queue</LoadingButton>
+      <Button variant="contained" startIcon={<Folder />} onClick={() => messageHandler?.openFolder(['videos'])}>Open Output Directory</Button>
     </Box>
   </Box> 
 };

gui/react/src/components/MainFrame/Listing/EpisodeListing.tsx

@@ -3,12 +3,16 @@ import { ExpandMore } from '@mui/icons-material'
 import React from "react";
 import useStore from "../../../hooks/useStore";
 import { Episode } from "../../../../../../@types/messageHandler";
+import ContextMenu from "../../reusable/ContextMenu";
+import { messageChannelContext } from "../../../provider/MessageChannel";
 
 const EpisodeListing: React.FC = () => {
   const [store, dispatch] = useStore();
 
   const [season, setSeason] = React.useState<'all'|string>('all');
 
+  const messageHandler = React.useContext(messageChannelContext);
+
   const seasons = React.useMemo(() => {
     const s: string[] = [];
     for (const {season} of store.episodeListing) {
@@ -58,9 +62,10 @@ const EpisodeListing: React.FC = () => {
       </Box>
       <List>
         {store.episodeListing.filter((a) => season === 'all' ? true : a.season === season).map((item, index, { length }) => {
+          const ref = React.createRef<HTMLDivElement>();
           const e = isNaN(parseInt(item.e)) ? item.e : parseInt(item.e);
           const isSelected = selected.includes(e.toString());
-          return <Box key={`Episode_List_Item_${index}`} sx={{
+          return <Box ref={ref} key={`Episode_List_Item_${index}`} sx={{
               backdropFilter: isSelected ? 'brightness(1.5)' : '',
               '&:hover': {
                 backdropFilter: 'brightness(1.5)'
@@ -94,6 +99,13 @@ const EpisodeListing: React.FC = () => {
                 </Typography>
               </Box>
             </ListItem>
+            <ContextMenu popupItem={ref} options={[
+              { text: 'Copy title', onClick: () => messageHandler?.writeToClipboard(item.name) },
+              { text: 'Copy description', onClick: () => messageHandler?.writeToClipboard(item.description) },
+              { text: 'Copy image URL', onClick: () => messageHandler?.writeToClipboard(item.img) },
+              "divider",
+              { text: 'Copy everything', onClick: () => messageHandler?.writeToClipboard(JSON.stringify(item, null, 2)) },
+            ]} />
             {index < 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={{ p: 1, background: 'rgba(0, 0, 0, 0.75)', backdropFilter: 'blur(5px)', position: 'fixed', left: anchor.x, top: anchor.y }}>
+  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 }}>
       {props.options.map((item, i) => {
         return item === 'divider' ? <Divider key={`ContextMenu_Divider_${i}_${item}`}/> : 

gui/react/src/provider/MessageChannel.tsx

@@ -79,7 +79,8 @@ const MessageChannelProvider: React.FC = ({ children }) => {
     randomEvents: randomEventHandler,
     downloadItem: (data) => ipcRenderer.invoke('downloadItem', data),
     isDownloading: () => ipcRenderer.sendSync('isDownloading'),
-    writeToClipboard: async (data) => await ipcRenderer.invoke('writeToClipboard', data)
+    writeToClipboard: async (data) => await ipcRenderer.invoke('writeToClipboard', data),
+    openFolder: async (data) => await ipcRenderer.invoke('openFolder', data)
   }
 
   return <messageChannelContext.Provider value={messageHandler}>