cleanup gif naming and make impossible to proceed while gif processing

developerforce · Sep 2, 2020 · ec3356c · ec3356c
1 parent 4974654
commit ec3356c
Showing 1 changed file with 28 additions and 18 deletions.
diff --git a/client/src/pages/Create/Create.js b/client/src/pages/Create/Create.js
@@ -21,18 +21,17 @@ const PHASE_END = 'phase_end';
 
 function Create({ history }) {
   const [phase, setPhase] = useState(PHASE_START);
-  const [videoId, setVideoId] = useState();
   const [isWebcamReady, setIsWebcamReady] = useState(false);
-  const [imageUrl, setImageUrl] = useState();
+  const [gifId, setGifId] = useState();
   const [text, setText] = useState('');
+  const [isProcessingGif, setIsProcessingGif] = useState('');
   const [isUploading, setUploading] = useState(false);
   const [warning, setWarning] = useState(
     !!window.MediaRecorder ? false : WARNING_BROWSER
   );
 
   const retry = () => {
-    setVideoId(null);
-    setImageUrl(null);
+    setGifId(null);
     setText('');
     setPhase(PHASE_START);
     setWarning(false);
@@ -48,6 +47,7 @@ function Create({ history }) {
 
   const createGIF = useCallback(
     (vidId, callback) => {
+      setIsProcessingGif(true);
       let formData = new FormData();
       const fontsize = text.length && 340 / text.length;
       formData.append('text', text);
@@ -62,19 +62,20 @@ function Create({ history }) {
           if (!Object.keys(response).length) {
             throw Error;
           }
-          setImageUrl(response.videoId);
+          setGifId(response.videoId);
           if (callback) callback();
         })
-        .catch(onError);
+        .catch(onError)
+        .finally(() => setIsProcessingGif(false));
     },
-    [setImageUrl, onError, text]
+    [setGifId, onError, text]
   );
 
   const upload = () => {
     setUploading(true);
     fetch('/uploadGIF', {
       method: 'POST',
-      body: JSON.stringify({ filename: imageUrl }),
+      body: JSON.stringify({ filename: gifId }),
       headers: {
         'Content-Type': 'application/json'
       }
@@ -98,16 +99,15 @@ function Create({ history }) {
         }
         const { filename } = response;
         const videoId = filename.replace('.webm', '');
-        setVideoId(videoId);
         createGIF(videoId);
       })
       .catch(onError);
   };
 
   const downloadGif = async () => {
-    const res = await fetch(`/download?filename=${imageUrl}`);
+    const res = await fetch(`/download?filename=${gifId}`);
     const fileBlob = await res.blob();
-    download(fileBlob, `${imageUrl}.gif`);
+    download(fileBlob, `${gifId}.gif`);
   };
 
   const header = (
@@ -140,10 +140,10 @@ function Create({ history }) {
       ) : (
         <div className="gif-create-content column">
           <div className="gif-image-container">
-            {imageUrl ? (
+            {gifId ? (
               <img
                 className="gif-video"
-                src={`/img?filename=${imageUrl}&reload=${phase === PHASE_END}`}
+                src={`/img?filename=${gifId}&reload=${phase === PHASE_END}`}
                 alt="Your GIF"
               />
             ) : (
@@ -191,12 +191,17 @@ function Create({ history }) {
                 value={text}
               />
               <div className="gif-button-group">
-                <Button onClick={() => setPhase(PHASE_END)} secondary grey>
+                <Button
+                  disabled={isProcessingGif}
+                  onClick={() => setPhase(PHASE_END)}
+                  secondary
+                  grey
+                >
                   Skip
                 </Button>
                 <Button
-                  disabled={text === ''}
-                  onClick={() => createGIF(videoId, () => setPhase(PHASE_END))}
+                  disabled={text === '' || isProcessingGif}
+                  onClick={() => createGIF(gifId, () => setPhase(PHASE_END))}
                 >
                   Save Caption
                 </Button>
@@ -209,7 +214,7 @@ function Create({ history }) {
                 <Button
                   icon="download"
                   onClick={downloadGif}
-                  disabled={isUploading}
+                  disabled={isUploading || isProcessingGif}
                   secondary
                   grey
                 >
@@ -225,7 +230,12 @@ function Create({ history }) {
                   Retry
                 </Button>
               </div>
-              <Button icon="share" onClick={upload} noClick={isUploading}>
+              <Button
+                disabled={isProcessingGif}
+                icon="share"
+                onClick={upload}
+                noClick={isUploading}
+              >
                 {isUploading ? 'Uploading...' : 'Share With Conference'}
               </Button>
             </>