fix: Avoiding loading forever on unsupported url.

Issue #12

lib/Peertube/DL/public/css/index.css

@@ -135,7 +135,7 @@ h2 {
     width: 10%;
 }
 
-#poping-notice {
+.poping-notice {
     display: none;
     position: fixed;
     top: 50%;
@@ -149,17 +149,17 @@ h2 {
 	max-height: 95%;
 	overflow-y: scroll;
 } 
-#poping-notice.active {
+.poping-notice.active {
     display: block;
 }
 
-#poping-notice-container-bar {
+.poping-notice-container-bar {
     display: flex;
     justify-content: center;
     font-size: 5rem;
 }
 
-#close-poping-notice {
+.close-poping-notice {
     width: 150px;
     height: 150px;
     align-items: center;
@@ -172,13 +172,13 @@ h2 {
 	text-decoration: none;
 }
 
-#close-poping-notice:hover,#close-poping-notice:focus {
+.close-poping-notice:hover,.close-poping-notice:focus {
     background: black;
     color: white;
 }
 
 @media (min-width: 668px) {
-	#poping-notice {
+	.poping-notice {
 		width: 629px;
 	}
 }

lib/Peertube/DL/public/index.html

@@ -30,7 +30,8 @@
             </div>
         </div>
     </div>
-    <div id="poping-notice">
+    <div class="poping-notice">
+        <div class="poping-notice-content">
             <p>This webpage is free as in freedom software, it is offered to you with the hope it will be useful, but without any warranty,
             you can find the source code at <a href="https://gitea.sergiotarxz.freemyip.com/sergiotarxz/Peertube-dl">my gitea</a> with docs to setup your own 
             webpage like this, this software is licensed under the AGPLv3 license which means you MUST convey the source code in a human readable form
@@ -43,8 +44,9 @@
             <p>This webpage may load third party resources depending on the url you give to it which may put cookies in your browser, you are 
             encouraged to frecuently delete your browser cookies to avoid those third parties tracking you on internet, Firefox offers you an
             option to delete cookies as soon as you close the browser which may be a good idea to enable in the orwellian internet of today.</p> 
-        <div id="poping-notice-container-bar">
+        </div>
-            <a id="close-poping-notice" href="#">X</a>
+        <div class="poping-notice-container-bar">
+            <a class="close-poping-notice" href="#">X</a>
         </div>
     </div>
 </body>

lib/Peertube/DL/public/js/peertube-dl-web.js

@@ -13,6 +13,7 @@ let modalLoading;
 let filename;
 let url;
 let popingNotice;
+let popingNoticeContent;
 let closePopingNotice;
 
 function downloadFormButtonHandler(event) {
@@ -26,6 +27,24 @@ function downloadFormButtonHandler(event) {
             modalLoading.classList.remove('active');
             modalVideoContainer.style.display = 'block';
         });
+    }).catch ( (error) => {
+        modalLoading.classList.remove('active');
+        popingNoticeContent.innerHTML = '';
+        let p = document.createElement('p'); 
+        p.appendChild(document.createTextNode('The url '));
+        let input_url = document.createElement('a');
+        input_url.href = downloadFormUrl.value;
+        input_url.innerText = downloadFormUrl.value;
+        p.appendChild(input_url)
+        p.appendChild(document.createTextNode(' is not supported, if you think this is an error, report it '));
+        let issues_url = 'https://gitea.sergiotarxz.freemyip.com/sergiotarxz/Peertube-dl/issues';
+        let issues_url_element = document.createElement('a');
+        issues_url_element.href = issues_url;
+        issues_url_element.innerText = 'here';
+        p.appendChild(issues_url_element);
+        p.appendChild(document.createTextNode('.'));
+        popingNoticeContent.appendChild(p);
+        popingNotice.classList.add('active');
     });
 }
 
@@ -99,8 +118,9 @@ window.addEventListener('load', (event) => {
     downloadVideoPrepare = document.querySelector('#download-video-prepare');
     closeAndResetVideoContainer = document.querySelector('#close-and-reset-video-container');
     modalLoading = document.querySelector('#modal-loading');
-    popingNotice = document.querySelector('#poping-notice');
+    popingNotice = document.querySelector('.poping-notice');
-	closePopingNotice = document.querySelector('#close-poping-notice');
+    popingNoticeContent = document.querySelector('.poping-notice-content');
+	closePopingNotice = document.querySelector('.close-poping-notice');
 
     downloadFormButton.addEventListener('click', downloadFormButtonHandler);
     downloadVideoPrepare.addEventListener('click', downloadVideoPrepareHandler);