Merge pull request #126 from CapitaineJSparrow/feature/upload-progres…

…s-bar Add a progress bar while uploading shaders
CapitaineJSparrow · Oct 5, 2021 · 5080730 · 5080730
2 parents 57653b2 + 7c7216f
commit 5080730
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "emusak",
   "productName": "emusak",
-  "version": "1.0.101",
+  "version": "1.0.102",
   "description": "Saves, shaders, firmwares and keys manager for switch emulators",
   "main": ".webpack/main",
   "repository": "https://github.com/stromcon/emusak-ui.git",

diff --git a/src/containers/RyujinxContainer.tsx b/src/containers/RyujinxContainer.tsx
@@ -1,5 +1,15 @@
 import React, { useEffect } from "react";
-import { Backdrop, Box, CircularProgress, Divider, makeStyles, Modal } from "@material-ui/core";
+import {
+  Backdrop,
+  Box,
+  CircularProgress,
+  Divider,
+  LinearProgress,
+  makeStyles,
+  Modal,
+  Paper,
+  Typography
+} from "@material-ui/core";
 import FeaturesContainer from "./FeaturesContainer";
 import RyujinxModel from "../storage/ryujinx";
 import {
@@ -49,6 +59,7 @@ const RyujinxContainer = ({threshold, firmwareVersion, emusakSaves, emusakMods}:
   const [currentGame, setCurrentGame] = React.useState('');
   const [ryujinxLogsModalOpen, setRyujinxLogsModalOpen] = React.useState(false);
   const [loaded, setLoaded] = React.useState(false);
+  const [uploadProgress, setUploadProgress] = React.useState('0');
 
   const refreshPageData = async () => {
     setTimeout(async () => {
@@ -97,13 +108,29 @@ const RyujinxContainer = ({threshold, firmwareVersion, emusakSaves, emusakMods}:
     setBackdropOpen(false);
   }
 
+  const onUploadProgress = (percentage: string) => {
+    console.log({ percentage })
+    setUploadProgress(percentage);
+  }
+
   // App is ready once saves, mods and shaders data are fetched, as well with firmware version and threshold values
   const isAppReady = Object.keys(emusakSaves).length > 0
     && threshold
     && firmwareVersion
     && Object.keys(emusakShaders).length > 0
     && emusakMods.length > 0;
 
+  const LinearProgressWithLabel = (props: any) => (
+    <Box display="flex" alignItems="center">
+      <Box width="100%" mr={1}>
+        <LinearProgress variant="determinate" {...props} />
+      </Box>
+      <Box style={{ textAlign: 'right' }} minWidth={140}>
+        <Typography variant="body2" color="textSecondary">{Math.round(props.value)}% {props.downloadSpeed ? 'at ' + props.downloadSpeed + 'MB/s' : ''}</Typography>
+      </Box>
+    </Box>
+  );
+
   return (
     <Box p={3}>
       <EmulatorHeaderComponent
@@ -116,9 +143,15 @@ const RyujinxContainer = ({threshold, firmwareVersion, emusakSaves, emusakMods}:
 
       <Backdrop className={classes.backdrop} open={backdropOpen} onClick={() => {
       }}>
-        <CircularProgress color="secondary"/> <br/>
-        <h3>&nbsp; Uploading shaders to anonfiles, This can take up to few minutes, depending on shader size and
-          anonfiles load</h3>
+        <Paper style={{ padding: '20px 50px' }}>
+          <p style={{ textAlign: 'center' }}>
+            <img src="https://media4.giphy.com/media/00ECf99y9SaiHt8gFt/giphy.gif?cid=ecf05e47hj6ca8qa1fvciiq54ev6t6ggczqfhra14ipcz64n&rid=giphy.gif&ct=g" alt=""/>
+          </p>
+          <br />
+          <h3>&nbsp; Uploading shaders to AnonFiles. This can take up to a few minutes depending on shader size and AnonFile's load.</h3>
+          <br/>
+          <LinearProgressWithLabel variant="buffer" value={parseFloat(uploadProgress) as any} valueBuffer={0} />
+        </Paper>
       </Backdrop>
 
       <Modal
@@ -178,7 +211,7 @@ const RyujinxContainer = ({threshold, firmwareVersion, emusakSaves, emusakMods}:
                 onSaveDownload={downloadSave}
                 onShareShaders={(titleId: string, localCount: number, emusakCount: number) => {
                   setCurrentGame(titleIdToName(titleId));
-                  shareShader(conf, titleId, localCount, emusakCount, onRyuOpen, onRyujinxClose, onShareFinish);
+                  shareShader(conf, titleId, localCount, emusakCount, onRyuOpen, onRyujinxClose, onUploadProgress, onShareFinish);
                 }}
                 onModsDownload={(titleId: string, version: string, modName: string, modId: string) => installMod(conf, titleId, version, modName, modId)}
                 onPortableButtonClick={() => onPortableButtonClick(conf)}

diff --git a/src/index.ts b/src/index.ts
@@ -161,12 +161,21 @@ app.commandLine.appendSwitch('ignore-certificate-errors', 'true');
   electron.ipcMain.on('shadersBuffer', async(event, zipPath: string) => {
 
     if (paths.includes(zipPath)) {
+      event.reply('uploaded-fail');
       return;
     }
 
     paths.push(zipPath);
 
-    const readStream = fs.createReadStream(zipPath);
+    let size = fs.lstatSync(zipPath).size;
+    let bytes = 0;
+
+    const readStream = fs.createReadStream(zipPath).on('data', (chunk) => {
+      bytes += chunk.length;
+      const percentage = (bytes / size * 100).toFixed(2);
+      console.log(percentage);
+      event.reply('upload-percentage', percentage);
+    });
 
     const form = new FormData();
     form.append('file', readStream);

diff --git a/src/service/Ryujinx/shaders.ts b/src/service/Ryujinx/shaders.ts
@@ -133,6 +133,7 @@ export const shareShader = async (
   emusakCount: number = 0,
   onRyujinxOpen: Function,
   onRyujinxClose: Function,
+  onUploadProgress: Function,
   done: Function
 ) => {
 
@@ -216,6 +217,12 @@ export const shareShader = async (
 
   const shadersPath = await packShaders(config, titleID);
   electron.ipcRenderer.send('shadersBuffer', shadersPath);
+
+  electron.ipcRenderer.on('upload-percentage', (_, percentage) => {
+    console.log(typeof percentage, percentage);
+    onUploadProgress(percentage);
+  })
+
   electron.ipcRenderer.on('uploaded', async (_, body) => {
 
     // IPC can trigger multiple time for same event, we just want to be sure it triggers only one time