Adding initial style.

bin/peertube-dl-web

@@ -25,10 +25,7 @@ post '/api' => sub {
     my $render_returned;
     eval {
         $render_returned = $c->render(
-            json => Peertube::DL::URLHandler::getDownloadDataFromURL(
+            json => Peertube::DL::URLHandler::getDownloadDataFromURL($url) );
-                $url, { format => 18 }
-            )
-        );
     };
     if ($@) {
         return $c->render( text => $@, status => 500 );

lib/Peertube/DL/Downloaders.pm

@@ -108,6 +108,15 @@ sub youtube {
             filename => $microformat->{title}{simpleText} . '.' . $extension,
         };
     } else {
+        say Data::Dumper::Dumper [
+            scalar @{ $ytInitialPlayerResponse->{adaptiveFormats} }
+            ? @{ $ytInitialPlayerResponse->{adaptiveFormats} }
+            : (),
+            scalar @{ $ytInitialPlayerResponse->{formats} }
+            ? @{ $ytInitialPlayerResponse->{formats} }
+            : ()
+        ];
+
         return {
             options     => { list_formats => 1 },
             title       => $microformat->{title}{simpleText},

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

@@ -149,6 +149,7 @@ h2 {
 	max-height: 95%;
 	overflow-y: scroll;
 } 
+
 .poping-notice.active {
     display: block;
 }
@@ -177,9 +178,88 @@ h2 {
     color: white;
 }
 
+#modal-format-selector {
+    display: none;
+    background: white;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    height: 100%;
+    width: 100%;
+    transform: translate(-50%, -50%);
+    border: black 1px solid;
+    flex-direction: column;
+	overflow-y: scroll;
+}
+
+#modal-format-selector.active {
+    display: flex;
+}
+
+#modal-format-selector > h2 {
+    text-align: center;
+}
+
+#modal-format-selector > p {
+    margin-left: 2rem;
+}
+
+#modal-format-selector .format-list {
+    box-sizing: border-box;
+    background: #fff;
+    margin: 2rem;
+}
+
+#close-modal-format-selector {
+    margin-top: 0.50rem;
+    margin-right: 0.50rem;
+    border: 1px solid black;
+    background: grey;
+    color: white;
+    width: 25px;
+    height: 25px;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+}
+
+#close-modal-format-selector:hover,#close-modal-format-selector:focus {
+    background: black;
+}
+
+.format-list > div {
+    width: 100%;
+}
+
+.format-list > div > a {
+    border: 1px solid black;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 5rem;
+    text-decoration: none;
+    color: black;
+    background: grey;
+}
+
+.format-list > div > a:hover {
+    background: black;
+    color: white;
+}
+
+.format-list > div > a:after {
+    padding-bottom: 100%;
+    display: block;
+    content: "";
+}
+
+div.video-formats a {
+    background: #f00;
+}
+
 @media (min-width: 668px) {
 	.poping-notice {
 		width: 629px;
 	}
 }
-

lib/Peertube/DL/public/index.html

@@ -17,7 +17,7 @@
     </div>
     <div id="modal-video-container">
         <div class="video-container-bar">
-            <a id="close-and-reset-video-container">X</a>
+            <a id="close-and-reset-video-container">x</a>
         </div>
         <div id="video-container">
             <div class="block">
@@ -30,12 +30,26 @@
             </div>
         </div>
     </div>
-    <div class="poping-notice">
+    <div id="modal-format-selector" class="active">
-        <div class="poping-notice-content">
+        <div class="video-container-bar">
-            <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,
+            <a id="close-modal-format-selector">x</a>
-            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 
+        </div>
-            webpage like this, this software is licensed under the AGPLv3 license which means you MUST convey the source code in a human readable form
+        <h2>Example video</h2>
-            if you distribute this software or use it as an service to users of service or distributees.<p>
+        <p>Example description</p>
+        <div class="format-list">
+            <div class="video-formats">
+                <a href="18">18</a>
+            </div>
+            <div class="audio-formats">
+                <a href="251">251</a>
+            </div>
+        </div>
+    </div>
+    <div id="poping-notice">
+        <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
+        if you distribute this software or use it as an service to users of service or distributees.<p>
 
             <p>I hope that if you find a non supported url which should be supported, a bug, or a feature you would like this webpage to have you file an issue in 
             <a href="https://gitea.sergiotarxz.freemyip.com/sergiotarxz/Peertube-dl/issues">https://gitea.sergiotarxz.freemyip.com/sergiotarxz/Peertube-dl/issues</a>