Expert options!

- added expert options - cleaned up some code - various small fixes
p410n3 · Mar 28, 2018 · a6492bf · a6492bf
1 parent 2c3a5dc
commit a6492bf
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 14 deletions.
diff --git a/config.php b/config.php
@@ -11,5 +11,5 @@
 //timezone
 date_default_timezone_set('Europe/Berlin');
 
-//adding these to the end of the youtube-dl command
-$additionalParams = " --no-progress --no-warnings --embed-thumbnail --add-metadata";
+//ALWAYS adding these to the end of the youtube-dl command, for user input arguments use the expert options
+$additionalParams = "--no-progress --no-warnings --embed-thumbnail --add-metadata";
diff --git a/css/style.css b/css/style.css
@@ -76,7 +76,7 @@ body {
     width: 80%;
 
     display: flex;
-    /*flex-direction: column-reverse;*/
+    flex-direction: column-reverse;
 }
 
 .popen p {
@@ -234,4 +234,16 @@ body {
           -webkit-transform: scale(1);
           transform: scale(1);
       }
+}
+
+.expertOptions {
+    max-width: 70%;
+}
+
+.arrowNotClicked {
+    transform: rotate(-90deg);
+}
+
+.arrowClicked {
+    transform: rotate(0deg);
 }
diff --git a/index.php b/index.php
@@ -33,21 +33,38 @@
                     <option value="video">Video</option>
                 </select>
             </div>
-            <div class="form-check">
+            <!--div class="form-check">
                 <input type="checkbox" class="form-check-input" id="zip" name="zip">
                 <label class="form-check-label" for="zip">Download as .zip file?</label>
-            </div>
-            <a data-toggle="collapse" href="#expertDiv" role="button" aria-expanded="false" aria-controls="expertDiv">
-                Enable expert Options &nbsp; <i class="fas fa-angle-down"></i>
+            </div -->
+            <a data-toggle="collapse" href="#expert" role="button" aria-expanded="false" aria-controls="expertDiv" id="expertDiv">
+                Expert Options &nbsp; <i class="fas fa-angle-down arrowNotClicked" id="arrow"></i>
             </a>
-            <div class="form-group collapse expertOptions" id="expertDiv">
-                <input type="text" class="form-control" id="expert" placeholder="Expert Options" name="expertParams">
+            <div class="form-group collapse expertOptions" id="expert">
+                <input type="text" class="form-control" id="expert"
+                       placeholder="CLI arguments for Youtube-DL"
+                       name="expertParams">
             </div>
         </form>
     </div>
 
     <a href="https://rg3.github.io/youtube-dl/supportedsites.html">Supported Sites to Download from</a>
     <a href="https://github.com/p410n3/YDL-UI">This project on Github</a>
+
+    <div class="sk-circle hidden" id="loading">
+        <div class="sk-circle1 sk-child"></div>
+        <div class="sk-circle2 sk-child"></div>
+        <div class="sk-circle3 sk-child"></div>
+        <div class="sk-circle4 sk-child"></div>
+        <div class="sk-circle5 sk-child"></div>
+        <div class="sk-circle6 sk-child"></div>
+        <div class="sk-circle7 sk-child"></div>
+        <div class="sk-circle8 sk-child"></div>
+        <div class="sk-circle9 sk-child"></div>
+        <div class="sk-circle10 sk-child"></div>
+        <div class="sk-circle11 sk-child"></div>
+        <div class="sk-circle12 sk-child"></div>
+    </div>
 </div>
 
 <!-- Latest compiled and minified JavaScript fo bootstrap -->
@@ -60,6 +77,7 @@
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
         integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
         crossorigin="anonymous"></script>
+<script src="js/script.js"></script>
 </body>
 
 </html>
diff --git a/js/script.js b/js/script.js
@@ -1,8 +1,19 @@
 var btn = document.getElementById("dlBtn");
-var arrow = document.getElementById("");
+var arrow = document.getElementById("arrow");
+var expertDiv = document.getElementById("expertDiv");
 
 btn.addEventListener("click", function () {
     document.getElementById("loading").classList.remove("hidden");
     document.getElementById("loading").classList.add("visible");
 });
 
+expertDiv.addEventListener("click", function () {
+    if (arrow.classList.contains("arrowNotClicked")) {
+        arrow.classList.remove("arrowNotClicked");
+        arrow.classList.add("arrowClicked");
+    } else {
+        arrow.classList.remove("arrowClicked");
+        arrow.classList.add("arrowNotClicked");
+    }
+});
+
diff --git a/login.html b/login.html
@@ -17,7 +17,7 @@ <h2>Authentication needed</h2>
         <form action="login.php" method="post" class="inline">
             <input type="text" class="form-control" name="user" placeholder="username">
             <input type="password" class="form-control" name="pass" placeholder="password">
-            <input type="submit" class="btn btn-primary dl-btn">
+            <input type="submit" class="btn btn-primary dl-btn" value="Login">
         </form>
     </div>
 </div>

diff --git a/php/loopAndPrint.php b/php/loopAndPrint.php
@@ -9,7 +9,7 @@ function loopAndPrint() {
             echo '<div class="card">';
             echo '<div class="card-body">';
             echo '<p class="card-text">' . $file . '</p>';
-            echo '<a href="' . $_GET["folder"] . '/' . $file . '" class="btn btn-primary" download target="blank">Download</a>';
+            echo '<a href="' . $_GET["folder"] . '/' . $file . '" class="btn btn-primary" download>Download</a>';
             echo '</div>';
             echo '</div>';
         }

diff --git a/ydl.php b/ydl.php
@@ -41,16 +41,21 @@
     //Check what fileFormat the user chose
     if (isset($_POST['fileFormat'])) {
         if ($_POST['fileFormat'] == "mp3") {
-            $fileFormat = ' --extract-audio --audio-format mp3 -f "bestaudio"';
+            $fileFormat = '--extract-audio --audio-format mp3 -f "bestaudio"';
         }
 
         if ($_POST['fileFormat'] == "video") {
             $fileFormat = "";
         }
     }
 
+    $expertOptions = "";
+    if (isset($_POST['expertParams'])) {
+        $expertOptions = $_POST['expertParams'];
+    }
+
     //Prepare the command
-    $cmd = "youtube-dl " . escapeshellarg($_POST['url']) . $fileFormat . $additionalParams;    //fileFormat does not need to be escaped, its no user input
+    $cmd = "youtube-dl " . escapeshellarg($_POST['url']) . " " . $fileFormat . " " .  $additionalParams . " " .$expertOptions;    //fileFormat does not need to be escaped, its no user input
     //Inconsistent across PHP versions // webserver, switching to exec until I find a fix
     //liveExec($cmd);