🐛 Search bugfix

src/css/style.css

@@ -200,7 +200,7 @@ select {
 }
 
 .progress-title {
-  font-size: 10px;
+  font-size: 25px;
 }
 
 .loading {
@@ -222,7 +222,7 @@ select {
 @media screen and (min-height: 700px) {
   .downloading__wrapper {
     flex-direction: column;
-    min-width: 400px;
+    min-width: 500px;
     max-width: 600px;
     width: auto;
   }
@@ -334,9 +334,9 @@ select {
   content: ":";
 }
 
-@media screen and (min-height: 700px) {
+@media (min-width: 900px) {
   .info__group p {
-    font-size: 25px;
+    font-size: 30px;
   }
 }
 
@@ -346,9 +346,9 @@ select {
   word-wrap: break-word;
 }
 
-@media screen and (min-height: 700px) {
+@media (min-width: 900px) {
   .info__group output {
-    font-size: 20px;
+    font-size: 22px;
   }
 }
 

src/js/setup.js

@@ -70,7 +70,7 @@ const hideMenusAndShowFirstScreen = () => (
     ])
 );
 
-const showStatusMsg = (msg, cssClass = '', timeout) => {
+const showStatusMsg = (msg, cssClass = "", timeout) => {
     $statusElt.innerHTML = `<span class="${cssClass}" >${msg}</span>`;
 
     if (timeout) {
@@ -121,35 +121,37 @@ const setVideoInfo = async () => {
 }
 
 const searchURL = () => {
-    clearTimeout(lastestSearchId);
+    if (!isDownloading) {
+        clearTimeout(lastestSearchId);
 
-    hideMenusAndShowFirstScreen();
+        hideMenusAndShowFirstScreen();
 
-    let msg = "Insira uma URL válida!";
-    let msgClass = "error";
+        let msg = "Insira uma URL válida!";
+        let msgClass = "error";
 
-    if (ytdl.validateURL($urlInput.value)) {
-        changeElementsDisplay([
-            eltDisplay($firstScreen),
-            eltDisplay($loading, 'flex'),
-        ]);
+        if (ytdl.validateURL($urlInput.value)) {
+            changeElementsDisplay([
+                eltDisplay($firstScreen),
+                eltDisplay($loading, 'flex'),
+            ]);
 
-        $selectTypeElt.value = "video";
+            $selectTypeElt.value = "video";
 
-        msg = "URL encontrada!";
-        msgClass = "success";
+            msg = "URL encontrada!";
+            msgClass = "success";
 
-        url = $urlInput.value;
-        setVideoInfo();
-    }
+            url = $urlInput.value;
+            setVideoInfo();
+        }
 
-    showStatusMsg(msg, msgClass);
-    $urlInput.value = '';
+        showStatusMsg(msg, msgClass);
+        $urlInput.value = '';
+    }
 }
 
 const unlockDownload = () => {
     $downloadBtn.addEventListener("click", saveAs);
-    changeElementDisplay(eltDisplay($downloadArea, "flex"));
+    changeElementDisplay(eltDisplay($downloadArea, "block"));
     isDownloading = false;
 }
 
@@ -173,7 +175,6 @@ const downloadStarted = downloader => {
     return () => {
         const cancelButton = $statusElt.querySelector('button.cancel');
         cancelButton.addEventListener('click', () => cancelDownload(downloader));
-        isDownloading = true;
     }
 }
 
@@ -183,6 +184,7 @@ const downloadFinished = () => {
 }
 
 const showProgress = ({ audio, video }) => {
+
     const downloaded = audio.downloaded + video.downloaded;
     const total = audio.total + video.total;
 
@@ -244,6 +246,7 @@ const download = path => {
 
     setStatusProgressBarHTML();
     configDownloaderEvents(downloader);
+    isDownloading = true;
 }
 
 const handleVideoDownload = ({ canceled, filePath }) => {

src/scss/components/_download-status.scss

@@ -21,5 +21,5 @@
 }
 
 .progress-title {
-    font-size: 10px;
+    font-size: 25px;
 }

src/scss/components/_info.scss

@@ -38,8 +38,8 @@
                 content: ":";
             }
 
-            @media #{$mq-min-height} {
-                font-size: 25px;
+            @media #{$mq-min-width} {
+                font-size: 30px;
             }
 
         }
@@ -49,8 +49,8 @@
             font-weight: bold;
             word-wrap: break-word;
 
-            @media #{$mq-min-height} {
-                font-size: 20px;
+            @media #{$mq-min-width} {
+                font-size: 22px;
             }
 
         }

src/scss/helpers/_variables.scss

@@ -7,4 +7,5 @@ $success-color: #2ecc71;
 
 $border: 1px solid $secondary-color;
 
-$mq-min-height: "screen and (min-height: 700px)"
+$mq-min-height: "screen and (min-height: 700px)";
+$mq-min-width: "(min-width: 900px)";

src/scss/layout/_principal.scss

@@ -5,7 +5,7 @@
 
     @media #{$mq-min-height} {
         flex-direction: column;
-        min-width: 400px;
+        min-width: 500px;
         max-width: 600px;
         width: auto;
     }