Aktualisieren README.md

1.5.0

See merge request !1

.gitignore

@@ -66,3 +66,8 @@ src/lib/youtube-dl*
 node_modules
 out
  *.exe
+ inst
+ *.mp4
+ *.mp3
+ *.part
+ *.ytdl

README.md

@@ -1,14 +1,41 @@
-# electron-simple-youtube-downloader
+# Cyb3r Downloader
 
-![./current-preview.PNG](./current-preview.PNG)
+![./current-preview.PNG](https://gitlab.thee.moe/theenoro/cyb3r-downloader/raw/master/current-preview.PNG)
 
+# Download 1.5.2 release
+- Added WMA
+
+[Download Installer](https://cl.thee.moe/index.php/s/aACn3iNAMHCFwk7)
+
+# Download 1.5.1 release
+
+So I've changed a lot from 1.5.1, not program technically but for the install process and a bit the design
+The starter is a batch file, you have to keep it open to run it :( but you can minimize it.
+
+For the browser script located in "browser_out" or [Link](https://gitlab.thee.moe/theenoro/cyb3r-downloader/blob/master/browser_out/tampermonkey_plugin.js) in the repo you can use it with "tampermonkey". Create a new script and  copy & paste the source code in. Now if you are on YT in the navbar is a new button.
+
+~~[Download](https://cl.thee.moe/index.php/s/aACn3iNAMHCFwk7)~~
+
+> 24.09.2017 Fixed Installer
+
+## Install Process
+
+Checks if node is installed, if not it downloads it for you and you have only to click throu the installer, after that it will continue with the normal process.
+
+
+# Download 1.5
+
+At the moment it have a few bugs. If you find some talk to me and I will list them here and fix it as soon as possible
+or if you have an git account just add them in the issues tab. [Issues](https://gitlab.thee.moe/theenoro/cyb3r-downloader/issues)
+
+~~[Download](https://cl.thee.moe/index.php/s/hd9ILsF2etPoa6r)~~
 
 # v 1.4.0 Alpha
 
-Preview [Video](https://cl.thee.moe/index.php/s/T8FEaFFxyhlxIj6)
+Preview [Video](https://cl.thee.moe/index.php/s/Grfn3gQMAEnB3t3)
 
 # Download 1.3.0
 
 Win32 / Win64 Install exe
 
-- [Download](https://www.dropbox.com/s/7eoo7yf3f7nwr8j/cyb3r-youtube-downloader-1.3.0%20Setup.exe?dl=0)
+- ~~[Download](https://www.dropbox.com/s/7eoo7yf3f7nwr8j/cyb3r-youtube-downloader-1.3.0%20Setup.exe?dl=0)~~

browser_out/tampermonkey_plugin.js

@@ -0,0 +1,61 @@
+// ==UserScript==
+// @name         Cyber Downloader ADD
+// @namespace    http://tampermonkey.net/
+// @version      0.1
+// @description  try to take over the world!
+// @author       You
+// @require http://code.jquery.com/jquery-latest.js
+// @require https://rawgit.com/notifyjs/notifyjs/master/dist/notify.js
+// @match        https://www.youtube.com/watch?v=*
+// @grant        none
+// ==/UserScript==
+
+var css = `
+<style>.notifyjs-corner {
+    top: 57px !important;
+    z-index: 99999;
+}</style>
+<button id="cb3_send" style="
+    background-color: transparent;
+    color: #FFF;
+    border: none;
+    cursor: pointer;
+"><yt-iconx style="    display: inline-flex;
+    -ms-flex-align: center;
+    transform: rotate(180deg);
+    -webkit-align-items: center;
+    align-items: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    position: relative;
+    vertical-align: middle;
+    fill: var(--iron-icon-fill-color, currentcolor);
+    stroke: none;
+    width: var(--iron-icon-width, 24px);
+    height: var(--iron-icon-height, 24px);
+    margin-right: var(--iron-icon_-_margin-right);
+    width: var(--iron-icon_-_width, var(--iron-icon-width, 24px));
+    height: var(--iron-icon_-_height, var(--iron-icon-height, 24px));
+    margin-bottom: var(--iron-icon_-_margin-bottom);" class="style-scope ytd-button-renderer"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope yt-icon">
+        <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z" class="style-scope yt-icon"></path>
+      </g></svg> 
+  </yt-iconx> Send To Cyber</button>
+`;
+
+(function() {
+    'use strict';
+    var s = jQuery.noConflict();
+    console.log('loaded');
+    setTimeout(function(){
+        s('#end').prepend(css);
+    },1000);
+    // Your code here...
+    s('body').delegate('#cb3_send','click',function(){
+        var sy = window.location;
+        s.notify("Start Download", "info");
+        s.post( "http://127.0.0.1:54167/download?url="+encodeURI(sy),function() {
+
+        });
+    });
+})();

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "cyb3r-youtube-downloader",
+  "name": "cyb3r-downloader",
-  "productName": "cyb3r-youtube-downloader",
+  "productName": "cyb3r-downloader",
-  "version": "1.0.0",
+  "version": "1.5.0",
-  "description": "My Electron application description",
+  "description": "Cyb3r_Downloader",
   "main": "src/main.js",
   "scripts": {
     "start": "electron-forge start",
@@ -12,7 +12,7 @@
   },
   "keywords": [],
   "author": "theen",
-  "license": "MIT",
+  "license": "GPL",
   "config": {
     "forge": {
       "make_targets": {
@@ -28,10 +28,19 @@
         ]
       },
       "electronPackagerConfig": {
-        "packageManager": "npm"
+        "packageManager": "npm",
+        "win32metadata": {
+          "ProductName": "Cyb3r_Downloader",
+          "CompanyName": "Thee.moe"
+        },
+        "version-string": {
+          "ProductName": "Cyb3r_Downloader",
+          "CompanyName": "Thee.moe"
+        }
       },
       "electronWinstallerConfig": {
-        "name": "cyb3r_youtube_downloader",
+        "name": "Cyb3r_Downloader",
+        "packageName": "Cyb3r_Downloader",
         "icon": "app.ico"
       },
       "electronInstallerDebian": {},
@@ -41,30 +50,23 @@
         "name": "https://git.tooru.thee.moe/theenoro/electron-simple-youtube-downloader"
       },
       "windowsStoreConfig": {
-        "packageName": "",
+        "packageName": "Cyb3r_Downloader",
-        "name": "cyb3ryoutubedownloader"
+        "name": "Cyb3r_Downloader"
       }
     }
   },
   "dependencies": {
-    "electron": "^1.6.11",
+    "body-parser": "^1.17.2",
-    "electron-compile": "^6.4.1",
+    "cors": "^2.8.4",
+    "electron": "^1.7.6",
+    "electron-config": "^1.0.0",
+    "express": "^4.15.4",
     "fs": "0.0.1-security",
     "mkdirp": "^0.5.1",
+    "node-id3": "0.0.10",
     "path": "^0.12.7",
     "request": "^2.81.0",
     "unzip": "^0.1.11",
     "watchr": "^3.0.1"
-  },
-  "devDependencies": {
-    "babel-plugin-transform-async-to-generator": "^6.24.1",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-react": "^6.24.1",
-    "electron-prebuilt-compile": "1.6.11",
-    "eslint": "^3.19.0",
-    "eslint-config-airbnb": "^15.1.0",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^5.1.1",
-    "eslint-plugin-react": "^7.1.0"
   }
 }

src/app/js/app.js

@@ -1,29 +1,50 @@
 $(function() {
+    const Config = require('electron-config');
+    const config = new Config();
+
+    const sys = require('sys');
+    const exec = require('child_process').exec;
+
     var download_progress = $('#download-progress');
-    var format = null;
+    var format = "mp3";
+    if(typeof config.get('format') !== 'undefined'){
+        format = config.get('format');
+    }
+    var path = "";
+    if(typeof config.get('path') !== 'undefined'){
+        path = config.get('path');
+    }
     var out = $('#output');
     var video = document.getElementById('video');
     const ipcRenderer = require('electron').ipcRenderer;
     const request = require('request');
     const helper = require('./../../helper/string');
+    const helperx = require('./../../controller/webLoader/router');
+
+    var shell = require('electron').shell;
+       //open links externally by default
+       $(document).on('click', 'a[href^="http"]', function(event) {
+           event.preventDefault();
+           shell.openExternal(this.href);
+       });
 
     const {
         dialog
     } = require('electron').remote;
 
     var cache = {};
-    var path = "";
+
 
     var pot = false;
 
     ipcRenderer.send('watchr_event', {});
-    ipcRenderer.on('play-in-Window',function(event,arg){
+    ipcRenderer.on('play-in-Window', function(event, arg) {
         pot = arg.do;
     })
     ipcRenderer.on('watchr_file', function(event, arg) {
         arg.file = encodeURI(arg.file)
         if (arg.type === "add") {
-            $('#watchr_files').append('<div class="row-flex file" data-file="' + arg.file + '"><div class="flex-btn"><button class="play-file btn btn-success" data-file="' + 'file://' + arg.file + '"><i class="fa fa-play-circle-o" aria-hidden="true"></i></button></div><div class="cont">' + arg.file + '</div></tr>')
+            $('#watchr_files').append('<div class="row-flex file" data-file="' + arg.file + '"><div class="flex-btn"><button class="play-file btn btn-success" data-file="' + 'file://' + arg.file + '"><i class="fa fa-play-circle-o" aria-hidden="true"></i></button></div><div class="cont">' + decodeURI(arg.file) + '</div></tr>')
         } else if (arg.type === "remove") {
             $('.file[data-file="' + arg.file + '"]').remove();
         }
@@ -36,14 +57,22 @@ $(function() {
     });
     ipcRenderer.on('process-fin', function(event, arg) {
         console.log(arg); // prints "pong"
-        $('#download-progress-' + arg.id).css("width", arg.percent);
+        if(arg.percent==101){
-        $('#download-progress-' + arg.id).html("CONVERTED");
+            $('#download-progress-' + arg.id).css("width", 100);
+            $('#download-progress-' + arg.id).html("CONVERTING");
+        }else{
+            $('#download-progress-' + arg.id).css("width", arg.percent);
+            $('#download-progress-' + arg.id).html("CONVERTED");
+        }
+        
+
+        
     });
     ipcRenderer.on('file', function(event, arg) {
         console.log('DOWNLOADED')
         console.log(arg); // prints "pong"
 
-        $('.media-out-' + arg.id).html('<button class="play-file" data-file="' + 'file://' + path + '/' + encodeURI(cache[arg.id]) + '.' + format + '">Play</button>');
+        $('.media-out-' + arg.id).html('<button style="color: #FFF !important;text-shadow: #000000 0px 0px 9px;cursor: pointer;" class="btn btn-link play-file" data-file="' + 'file://' + path + '/' + encodeURI(helper.replace(cache[arg.id])) + '.' + format + '"><i class="fa  fa-2x fa-play-circle-o" aria-hidden="true"></i></button>');
         //var video = document.getElementById('video');
         //$('#body-' + arg.id).append('<audio src="file://' + path + '/' + cache[arg.id] + '.'+format+'" controls="true"/>');
     });
@@ -51,25 +80,34 @@ $(function() {
         path = dialog.showOpenDialog({
             properties: ['openDirectory']
         })[0];
+        config.set('path', path);
         console.log(path)
         ipcRenderer.send('setPath', {
             path: path
         });
     })
-    $('#pot').click(function(){
+    $('#pot').click(function() {
-        ipcRenderer.send('open-pot', {
+        ipcRenderer.send('open-pot', {});
-        });
     });
     $('body').delegate('.play-file', 'click', function(e) {
-        if(pot === false){
+
+        //exec(getCommandLine() + ' "' + decodeURI(e.currentTarget.dataset.file.split('file://')[1])+'"');
+        if (pot === false) {
             video.setAttribute("src", e.currentTarget.dataset.file);
             video.play();
-        }else{
+        } else {
-            ipcRenderer.send('pot_run', {file:e.currentTarget.dataset.file});
+            ipcRenderer.send('pot_run', {
+                file: e.currentTarget.dataset.file
+            });
         }
     })
+    $('body').delegate('#navigota li','click',function(){
+        console.log('TEST')
+        $('#togmenu').click();
+    })
     $('body').delegate('.format', 'click', function(e) {
         format = e.currentTarget.dataset.format;
+        config.set('format', format);
         ipcRenderer.send('set-format', {
             format: e.currentTarget.dataset.format
         });
@@ -80,7 +118,20 @@ $(function() {
 
         if (url.match('crunchyroll')) {
             var video_id = Math.floor(Date.now() / 1000);
-            $('<div class="media" ><div class="media-left"><a href="#"><img id="img-' + video_id + '" width="128" class="media-object" src="' + '" alt="..."></a></div><div class="media-body" id="body-' + video_id + '"><h4 class="media-heading">' + url + '</h4> Author: ' + '<div class="progress"><div class="progress-bar" id="download-progress-' + video_id + '" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 00%;">0%</div></div><div class="media-out-' + video_id + '"></div></div></div>').prependTo('#output');
+            $(`
+                <div class="media">
+                  <img id="img-` + video_id + `"  class="d-flex align-self-start mr-3" src="..." alt="Generic placeholder image">
+                  <div class="media-body" id="body-` + video_id + `">
+                    <h5 class="mt-0">` + url + `</h5>
+                    Author: ` + `
+                    <div class="progress">
+                      <div class="progress-bar"id="download-progress-` + video_id + `"  role="progressbar" style="width: 0%; height: 20px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+                    </div>
+                    <div class="media-out-` + video_id + `" style="    color: #FFF !important;
+    text-shadow: #454545 1px 1px 1px;
+    margin: auto;"></div>
+                  </div>
+                </div>`).prependTo('#output');
             ipcRenderer.send('start-download', {
                 url: $('#url').val(),
                 id: video_id
@@ -102,7 +153,18 @@ $(function() {
                 request
                     .get('https://www.youtube.com/oembed?url=https://www.youtube.com/playlist?list=' + playlist_id + '&format=json', function(err, httpResponse, body) {
                         var YT = JSON.parse(body);
-                        $('<div class="media" ><div class="media-left"><a href="#"><img id="img-' + video_id + '" width="128" class="media-object" src="' + YT.thumbnail_url + '" alt="..."></a></div><div class="media-body" id="body-' + video_id + '"><h4 class="media-heading">' + YT.title + '</h4> Playlistauthor: ' + YT.author_name + '<div class="progress"><div class="progress-bar" id="download-progress-' + video_id + '" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 00%;">0%</div></div><div class="media-out-' + video_id + '"></div></div></div>').prependTo('#output');
+                        $(
+                            `<div class="media">
+                              <img id="img-` + video_id + `"  class="d-flex align-self-start mr-3" src="`+ YT.thumbnail_url +`" alt="Generic placeholder image">
+                              <div class="media-body" id="body-` + video_id + `">
+                                <h5 class="mt-0">` + YT.title + `</h5>
+                                Author: ` + YT.author_name + `
+                                <div class="progress">
+                                  <div class="progress-bar"id="download-progress-` + video_id + `"  role="progressbar" style="width: 0%; height: 20px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+                                </div>
+                                <div class="media-out-` + video_id + `"></div>
+                              </div>
+                            </div>`).prependTo('#output');
                         cache[video_id] = YT.title;
                         ipcRenderer.send('start-download-pl', {
                             url: $('#url').val(),
@@ -114,7 +176,30 @@ $(function() {
                 request
                     .get('https://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=' + video_id + '&format=json', function(err, httpResponse, body) {
                         var YT = JSON.parse(body);
-                        $('<div class="media" ><div class="media-left"><a href="#"><img id="img-' + video_id + '" width="128" class="media-object" src="' + YT.thumbnail_url + '" alt="..."></a></div><div class="media-body" id="body-' + video_id + '"><h4 class="media-heading">' + YT.title + '</h4> Author: ' + YT.author_name + '<div class="progress"><div class="progress-bar" id="download-progress-' + video_id + '" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 00%;">0%</div></div><div class="media-out-' + video_id + '"></div></div></div>').prependTo('#output');
+                        $(
+                        `<div class="media">
+                        <div class="d-flex alogn-self-start mr-3" style="
+                                                                        background:url(`+YT.thumbnail_url+`);
+                                                                        width: 189px;
+                                                                        height: 104px;
+                                                                        background-size: 189px;
+                                                                        background-position: 0px -18px;
+                                                                        ">
+                                                                        <div class="media-out-` + video_id + `" style="    color: #FFF !important;
+                                                        text-shadow: #454545 1px 1px 1px;
+                                                        margin: auto;"></div>
+                                                                        </div>
+                          <div class="media-body" id="body-` + video_id + `">
+                            <h5 class="mt-0">` + YT.title + `</h5>
+                            Author: ` + YT.author_name + `
+                            <div class="progress">
+                              <div class="progress-bar"id="download-progress-` + video_id + `"  role="progressbar" style="width: 0%; height: 20px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+                            </div>
+                          </div>
+                        </div>`
+
+
+                    ).prependTo('#output');
                         cache[video_id] = YT.title;
                         ipcRenderer.send('start-download', {
                             url: $('#url').val(),
@@ -127,4 +212,20 @@ $(function() {
         }
 
     })
+
+    $('#close').click(function() {
+        console.log('TEST')
+        ipcRenderer.send('winHide', {
+
+        });
+    })
+
+    function getCommandLine() {
+       switch (process.platform) {
+          case 'darwin' : return 'open';
+          case 'win32' : return 'start';
+          case 'win64' : return 'start';
+          default : return 'xdg-open';
+       }
+    }
 })

src/app/style/player-controls.css

@@ -0,0 +1,42 @@
+#time span, #volume span {
+    background-color: #ffffff;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 10px;
+    width: 0px;
+}
+#time {
+    cursor: pointer;
+    height: 10px;
+    margin-bottom: 10px;
+    outline: thin solid #ffffff;
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    vertical-align: -webkit-baseline-middle;
+    line-height: 1.42857143;
+    height: 9px;
+    display: inline-block;
+    top: 13px;
+}
+#volume {
+    cursor: pointer;
+    height: 10px;
+    margin-bottom: 10px;
+    outline: thin solid #ffffff;
+    overflow: hidden;
+    position: relative;
+    width: 200px;
+    vertical-align: -webkit-baseline-middle;
+    line-height: 1.42857143;
+    height: 9px;
+    display: inline-block;
+    top: 13px;
+}
+.btn-success {
+    color: #fff;
+    background-color: #f8f8f8;
+    border-color: #111;
+    transition: all .3s;
+}

src/app/style/player.css

@@ -2,7 +2,7 @@
     cursor: pointer;
     height: 10px;
     margin-bottom: 10px;
-    outline: thin solid #FFF;
+    outline: thin solid #1D1D1D;
     overflow: hidden;
     position: relative;
     width: 100%;
@@ -17,7 +17,7 @@
     cursor: pointer;
     height: 10px;
     margin-bottom: 10px;
-    outline: thin solid #FFF;
+    outline: thin solid #1D1D1D;
     overflow: hidden;
     position: relative;
     width: 200px;
@@ -29,7 +29,7 @@
 }
 
 #time span, #volume span {
-    background-color: #FFF;
+    background-color: #1D1D1D;
     position: absolute;
     top: 0;
     left: 0;

src/app/style/style.css

@@ -1 +1 @@
-body{margin:0;margin-top:50px;background:#111;color:#f8f8f8}.btn-success{color:#f8f8f8;background-color:#111;border-color:#f8f8f8;transition:all .3s}.btn-success.active,.btn-success:active,.btn-success:focus,.btn-success:hover,.dropdown-toggle:active,.dropdown-toggle:focus,.open>.dropdown-toggle.btn-success{color:#111!important;background-color:#f8f8f8!important;border-color:#f8f8f8!important;transition:all .3s}.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{text-decoration:none;color:#f8f8f8;background-color:#111}.dropdown-menu{background-color:#111}span.input-group-btn.open>ul>li>a{background-image:none}.progress{background-image:none;background-color:#111;box-shadow:inset 0 0 3px 0 #f8f8f8}.progress-bar{background-image:none;background-color:#111;box-shadow:inset 0 0 12px 0 #f8f8f8;transition:.3s all}.media:first-child{margin-top:15px}.media{box-shadow:0 0 6px 1px #f8f8f8}.sidebar-nav{padding:10px}.nav.nav-list a{padding:5px 10px}.nav-header{font-weight:700}.scroll{overflow-y:scroll;height:calc(100vh - 96px)}.left-playlist{box-shadow:0 0 6px 1px #f8f8f8;height:calc(100vh - 20vw - 30px)}.row-flex{word-break:break-all;width:100%;display:flex}.row-flex .flex-btn{width:50px}.row-flex .cont{width:100%}
+body{margin:0;margin-top:46px}.navbar{background:#111!important;color:#f8f8f8}.btn-success{color:#111;background-color:#f8f8f8;border-color:#111;transition:all .3s}.btn-success.active,.btn-success:active,.btn-success:focus,.btn-success:hover,.dropdown-toggle:active,.dropdown-toggle:focus,.open>.dropdown-toggle.btn-success{color:#f8f8f8!important;background-color:#111!important;border-color:#111!important;transition:all .3s}.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{text-decoration:none;color:#111;background-color:#f8f8f8}.dropdown-menu{background-color:#f8f8f8}span.input-group-btn.open>ul>li>a{background-image:none}.media:first-child{margin-top:15px}.media{box-shadow:0 0 12px 1px rgba(105,105,105,.28);margin-top:14px}.sidebar-nav{padding:10px}.nav.nav-list a{padding:5px 10px}.nav-header{font-weight:700}.scroll{overflow-y:scroll;height:calc(100vh - 160px);margin-top:15px;box-shadow:inset 0 0 3px 2px rgba(69,69,69,.3)}.left-playlist{box-shadow:0 0 6px 1px #111;height:calc(100vh - 20vw - 30px)}.row-flex{word-break:break-all;width:100%;display:flex}.row-flex .flex-btn{width:50px}.row-flex .cont{width:100%}*{border-radius:0!important}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:#f5f5f5}::-webkit-scrollbar{width:6px;background-color:#f5f5f5}::-webkit-scrollbar-thumb{background-color:#000}

src/app/style/style.less

@@ -5,15 +5,19 @@
 
 */
 
-@main-front-color   : #f8f8f8;
+@main-front-color   : #111111;
-@background-color   : #111111;
+@background-color   : #F8F8F8;
-@background-2ndcolor: #232323;
+@background-2ndcolor: #F8F8F8;
 
 body {
   margin: 0;
-  margin-top: 50px;
+  margin-top: 46px;
-  background: @background-color;
+  /*background: @background-color;
-  color:@main-front-color;
+  color:@main-front-color;*/
+}
+.navbar{
+    background: @main-front-color !important;
+    color:@background-color;
 }
 .btn-success {
     color: @main-front-color;
@@ -38,6 +42,7 @@ body {
 span.input-group-btn.open > ul > li> a{
     background-image:none;
 }
+/*
 .progress{
     background-image:none;
     background-color: @background-color;
@@ -48,12 +53,13 @@ span.input-group-btn.open > ul > li> a{
     background-color: @background-color;
     box-shadow: inset 0px 0px 12px 0px @main-front-color;
     transition: .3s all;
-}
+}*/
 .media:first-child {
     margin-top: 15px;
 }
 .media {
-    box-shadow: 0px 0px 6px 1px @main-front-color;
+    box-shadow: 0 0 12px 1px rgba(105, 105, 105, 0.28);
+    margin-top: 14px;
 }
 .sidebar-nav {
     padding: 10px;
@@ -63,14 +69,14 @@ span.input-group-btn.open > ul > li> a{
 }
 
 .nav-header {
-
     font-weight: bold;
 }
-.scroll{
+.scroll {
     overflow-y: scroll;
-    height: ~"calc( 100vh - 96px)";
+    height: ~"calc(100vh - 160px)";
+    margin-top: 15px;
+    box-shadow: inset 0px 0px 3px 2px rgba(69, 69, 69, 0.3);
 }
-
 .left-playlist{
     box-shadow: 0px 0px 6px 1px @main-front-color;
     height: ~"calc(100vh - 20vw - 30px )";
@@ -86,3 +92,22 @@ span.input-group-btn.open > ul > li> a{
         width:100%;
     }
 }
+*{
+    border-radius: 0px !important;
+}
+*::-webkit-scrollbar-track
+{
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	background-color: #F5F5F5;
+}
+
+*::-webkit-scrollbar
+{
+	width: 6px;
+	background-color: #F5F5F5;
+}
+
+*::-webkit-scrollbar-thumb
+{
+	background-color: #000000;
+}

src/app/view/init.html

@@ -178,11 +178,10 @@
     <script>
         $(function(){
             var start = [
-                "whbex",
+                "1k7kx5",
-                "wf0jb",
+                "1nhvi0",
-                "ulak9",
+                "1qfipa",
-                "wcmxa",
+                "1kfn1h",
-                "wc5e2"
             ];
             var x = Math.floor(Math.random()*start.length)
             $('#coub').attr('src','https://coub.com/embed/'+start[x]+'?muted=false&autostart=true&originalSize=false&startWithHD=false')

src/app/view/layout.html

@@ -8,54 +8,105 @@
             module = undefined;
         }
     </script>
-    <script src="./../libs/jquery/jquery-3.2.1.min.js"></script>
+    <!--<script src="./../libs/jquery/jquery-3.2.1.min.js"></script>
-    <script src="./../libs/bootstrap/js/bootstrap.js"></script>
+    <script src="./../libs/bootstrap/js/bootstrap.js"></script>-->
+    <script src="./../libs/jquery/jquery-3.2.1.slim.min.js"></script>
+    <script src="./../libs/popper.min.js"></script>
+    <script src="./../libs/bootstrap/bootstrap.min.js"></script>
     <script src="./../js/player.js"></script>
     <meta charset="utf-8">
     <title>Cyb3r Downloader</title>
-    <link rel="stylesheet" href="./../libs/bootstrap/css/bootstrap.css" />
+    <!--<link rel="stylesheet" href="./../libs/bootstrap/css/bootstrap.css" />
-    <link rel="stylesheet" href="./../libs/bootstrap/css/bootstrap-theme.css" />
+    <link rel="stylesheet" href="./../libs/bootstrap/css/bootstrap-theme.css" />-->
+    <link rel="stylesheet" href="./../libs/bootstrap/bootstrap.min.css">
     <link rel="stylesheet" href="./../libs/font-awesome/css/font-awesome.min.css" />
-    <link rel="stylesheet" href="./../style/progress.css" />
+
+    <link rel="stylesheet" href="./../style/bootstrap.min.css" />
     <link rel="stylesheet" href="./../style/style.css" />
     <link rel="stylesheet" href="./../style/player.css" />
 </head>
 
 <body>
     <div class="container-fluid">
+        <div class="collapse" id="navigota"  style="   position: fixed;    top: 56px;    left: 0px;z-index: 999999;">
+          <div class="bg-dark p-4">
+              <div class="list-group" role="tablist" id="">
+                  <li role="presentation" class="list-group-item list-group-item-action"><a href="#download" aria-controls="download" role="tab" data-toggle="tab">Download</a></li>
+                  <li role="presentation" class="list-group-item list-group-item-action"><a href="#player" aria-controls="player" role="tab" data-toggle="tab">Player</a></li>
+                  <li role="presentation" class="list-group-item list-group-item-action"><a href="#info" aria-controls="info" role="tab" data-toggle="tab">Info</a></li>
+              </div>
+          </div>
+        </div>
+        <nav class="navbar  fixed-top navbar-dark bg-dark justify-content-between" style="-webkit-app-region: drag">
+            <button id="togmenu"  style="-webkit-app-region: no-drag;" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigota" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
+              <span class="navbar-toggler-icon"></span>
+            </button>
+            <a class="navbar-brand">Cyb3r Downloader</a>
+            <form class="form-inline">
+                <button class="btn btn-outline-success my-2 my-sm-0" id="close" style="-webkit-app-region: no-drag;">X</button>
+            </form>
+        </nav>
         <div class="row">
-            <div class="col-md-2">
+            <div class="col-md-2" style="display:none">
-                <div class="sidebar-nav">
+                <div class="list-group" role="tablist" >
-                    <ul class="nav nav-tabs nav-pills nav-stacked" role="tablist">
+                    <li role="presentation" class="list-group-item list-group-item-action"><a href="#download" aria-controls="download" role="tab" data-toggle="tab">Download</a></li>
-                        <li role="presentation" class="active"><a href="#download" aria-controls="download" role="tab" data-toggle="tab">Download</a></li>
+                    <li role="presentation" class="list-group-item list-group-item-action"><a href="#player" aria-controls="player" role="tab" data-toggle="tab">Player</a></li>
-                        <li role="presentation"><a href="#player" aria-controls="player" role="tab" data-toggle="tab">Player</a></li>
+                    <li role="presentation" class="list-group-item list-group-item-action"><a href="#info" aria-controls="info" role="tab" data-toggle="tab">Info</a></li>
-                    </ul>
                 </div>
             </div>
-            <div class="col-md-6">
+            <div class="col-md-12" >
+                <div style="max-width:380px;margin:auto;margin-bottom:25px;">
+
+                    <div style="    margin: 0;
+    padding: 0;
+    height: 35px;
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    left: 0;
+    background-color: #f1f1f1;
+    box-shadow: 0px -1px 8px 4px rgba(69, 69, 69, 0.18);
+    z-index:99999999;
+">
+                        <button class="btn nabbar-btn btn-link" style="margin:0;" id="play"><i class="fa fa-pause-circle-o" aria-hidden="true"></i></button>
+                        <div id="time">
+                            <span></span>
+                        </div>
+                        <button class="btn nabbar-btn btn-link" style="margin:0;"><i class="fa fa-volume-up" aria-hidden="true"></i></button>
+                        <div id="volume">
+                            <span></span>
+                        </div>
+                        <button class="btn nabbar-btn btn-link" id="pot" style="margin:0;"><i class="fa fa-window-restore" aria-hidden="true"></i></button>
+                    </div>
+                </div>
                 <div class="tab-content">
-                    <div role="tabpanel" class="tab-pane fade in active" id="download">
+                    <div role="tabpanel" class="tab-pane active"  id="download">
                         <input id="business" type="file" style="display: none" />
                         <div class="row">
                             <div class="col-md-12">
-                                <div class="input-group input-group-lg">
+                                <div class="input-group">
                                     <span class="input-group-btn">
-                                      <button id="party" class="very-sweet-looking btn btn-success btn-sm">Select Folder</button>
+                                   <button id="party" class="btn btn-secondary" type="button">Select Folder</button>
-                                    </span>
+                                 </span>
-                                    <input type="text" class="form-control input-sm" maxlength="128" id="url" placeholder="YT-Url" />
+                                    <input type="text" class="form-control" id="url" placeholder="YT-Url" aria-label="Product name">
                                     <span class="input-group-btn">
-                                          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                     <div class="dropdown show">
-                                            Format <span class="caret"></span>
+                                        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                    </button>
+                                          Format
-                                    <ul class="dropdown-menu" id="format">
+                                        </a>
-                                        <li><a href="#" class="format" data-format="mp3">MP3</a></li>
+
-                                        <li role="separator" class="divider"></li>
+                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
-                                        <li><a href="#" class="format" data-format="mp4">MP4</a></li>
+                                          <a class="dropdown-item format" href="#" data-format="mp3">MP3</a>
-                                    </ul>
+                                          <a class="dropdown-item format" href="#" data-format="wma">WMA</a>
-                                    </span>
+                                          <div class="dropdown-divider"></div>
+                                          <a class="dropdown-item format" href="#" data-format="mp4">MP4</a>
+                                        </div>
+                                      </div>
+                                 </span>
                                     <span class="input-group-btn">
-                                      <button type="button" id="start-download" class="btn btn-success btn-sm">Download</button>
+                                   <button class="btn btn-secondary" type="button" id="start-download">Download</button>
-                                    </span>
+                                 </span>
                                 </div>
                             </div>
                         </div>
@@ -68,37 +119,44 @@
                     <div role="tabpanel" class="tab-pane fade" id="player">
                         <div class="row">
                             <div class="col-md-12">
+                                <div class="embed-responsive embed-responsive-16by9">
+                                    <video id="video"></video>
+                                </div>
                                 <div id="watchr_files">
 
                                 </div>
                             </div>
                         </div>
                     </div>
+                    <div role="tabpanel" class="tab-pane fade" id="info">
+                        <div class="row">
+                            <div class="col-md-12">
+                                <h1>Info</h1>
+                                <a href="https://git.tooru.thee.moe/theenoro/electron-simple-youtube-downloader" target="_blank">Git</a>
+                            </div>
+                        </div>
+                    </div>
                 </div>
 
             </div>
-            <div class="col-md-4">
+            <!--<div class="col-md-4">
-                <div class="embed-responsive embed-responsive-16by9">
+
-                    <video id="video"></video>
-                </div>
-                <div style="    margin: 0;    padding: 0;    height: 35px; display:flex;">
-                    <button class="btn nabbar-btn btn-success" style="margin:0;" id="play"><i class="fa fa-pause-circle-o" aria-hidden="true"></i></button>
-                    <div id="time">
-                        <span></span>
-                    </div>
-                    <button class="btn nabbar-btn btn-success" style="margin:0;"><i class="fa fa-volume-up" aria-hidden="true"></i></button>
-                    <div id="volume">
-                        <span></span>
-                    </div>
-                    <button class="btn navbar-btn btn-success" id="pot" style="margin:0;"><i class="fa fa-window-restore" aria-hidden="true"></i></button>
-                </div>
                 <div class="left-playlist">
 
                 </div>
-            </div>
+            </div>-->
         </div>
     </div>
     <script src="./../js/app.js"></script>
+    <script>
+    	document.addEventListener("keydown", function (e) {
+    		if (e.which === 123) {
+    			require('remote').getCurrentWindow().toggleDevTools();
+    		} else if (e.which === 116) {
+    			location.reload();
+    		}
+    	});
+    </script>
 </body>
 
 </html>

src/app/view/pot.html

@@ -20,6 +20,7 @@
     <link rel="stylesheet" href="./../style/progress.css" />
     <link rel="stylesheet" href="./../style/style.css" />
     <link rel="stylesheet" href="./../style/player.css" />
+    <link rel="stylesheet" href="./../style/player-controls.css" />
     <style>
         video {
             max-width: 100%;

src/controller/download.js

@@ -97,7 +97,7 @@ libs.yt_dl = (os,cb)=>{
     var url = "";
     switch (os) {
         case "win32":
-            url = 'https://yt-dl.org/downloads/2017.08.13/youtube-dl.exe';
+            url = 'https://yt-dl.org/downloads/latest/youtube-dl.exe';
             libs.download(url,"youtube-dl",function(data,file){
                 fs.renameSync(file,global.dir+'/lib/youtube-dl.exe');
                 cb();

src/controller/player_onTop.js

@@ -12,6 +12,7 @@ var win = null;
 
 var pot = {};
 var s = null;
+var pot_open_ev = null;
 
 ipcMain
 .on('close_pot',(event,arg)=>{

src/controller/tray.js

@@ -0,0 +1,26 @@
+const {app, Menu, Tray} = require('electron')
+const main_window = require('./windows.js/main.js')
+
+
+
+module.exports = ()=>{
+
+
+    let tray = new Tray(global.dir+'/app.ico')
+    const contextMenu = Menu.buildFromTemplate([
+        {label: 'Open', click(){ main_window.open() }},
+        /*{label: 'About',click() { console.log('item 1 clicked') }},
+        {label: 'Item1', type: 'radio'},
+        {type: 'separator'},
+        {label: 'Item2', type: 'radio'},
+        {label: 'Item3', type: 'radio', checked: true},*/
+        {label: 'Beenden', click() { main_window.close(); }},
+    ])
+    tray.setToolTip('Cyb3r Downloader.')
+    tray.setContextMenu(contextMenu)
+
+    main_window.createWindow();
+    main_window.open();
+
+    return tray;
+}

src/controller/webLoader/router.js

@@ -0,0 +1,25 @@
+const app = require('express')();
+var cors = require('cors')
+app.use(cors())
+const bodyParser = require('body-parser');
+
+app.use( bodyParser.json() );       // to support JSON-encoded bodies
+app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
+  extended: true
+}));
+
+
+app.post('/download', function(req, res) {
+    var log = req.query.url;
+    console.log(log)
+    // ...
+    $('#url').val(log);
+    $('#start-download').click();
+    res.send();
+});
+
+
+app.listen(54167, "127.0.0.1");
+
+
+module.exports = app;

src/controller/windows.js/main.js

@@ -0,0 +1,47 @@
+const {
+    app,
+    BrowserWindow,
+    Menu,
+    dialog,
+    ipcMain
+} = require('electron');
+var win = {};
+
+win.win = null;
+
+ipcMain
+    .on('winHide', (event, arg) => {
+        console.log('minimize')
+        win.win.minimize()
+        //win.win.hide()
+    })
+
+win.createWindow = () => {
+    win.win = new BrowserWindow({
+        width: 1010,
+        height: 800,
+        minWidth: 1010,
+        minHeight: 565,
+        show: true,
+        frame: false,
+        icon: global.dir + '/app.ico'
+    })
+    win.win.loadURL(`file://${global.dir}/app/view/layout.html`);
+    win.win.show();
+    win.win.on('closed', () => {
+        //win.win = null;
+    });
+
+
+
+    win.win.on('close', function(event) {
+
+    });
+}
+win.open = () => {
+    win.win.restore();
+}
+win.close = () => {
+    win.win.close();
+}
+module.exports = win;

src/controller/youtube-dl.js

@@ -1,8 +1,11 @@
 const { spawn } = require('child_process');
-const ipcMain = require('electron').ipcMain;
+const {Notification,ipcMain}= require('electron');
 const dl_routine = require('./youtube-dl.routine')
+const nodeID3 = require('node-id3');
 
-const pot = require('./player_onTop')
+//const web = require('./webLoader/router');
+
+const pot = require('./player_onTop');
 const folderWatchr = require('./watchr')
 console.log(global.dir);
 
@@ -12,6 +15,8 @@ var format = "mp3";
 var fol = null;
 
 var pot_open_ev = null;
+var request = require('request').defaults({ encoding: null });
+
 ipcMain
 .on('start-download', (event, arg)=>{
   path = orig_path
@@ -67,6 +72,11 @@ var yt_dl = class{
 
         var m = dl_routine(path,this.url,format);
         ls = spawn(m[0],m[1]);
+
+
+
+
+
         if(path == ''){
             //ls = spawn(global.dir+'/lib/youtube-dl', ['-x','--audio-format','mp3','-i',this.url]);
         }else{
@@ -117,8 +127,67 @@ var yt_dl = class{
         });
         ls.on('close', (code) => {
           console.log(`child process exited with code ${code}`);
-          me.lwrite.sender.send('file',{id:me.id,file:log[log.length-2].split('[ffmpeg] Destination: ')[1]});
+
-          me.lwrite.sender.send('process-fin',{percent :me.percent,id:me.id});
+          switch(format){
+              case "wma":
+                me.lwrite.sender.send('process-fin',{percent :101,id:me.id});
+                setTimeout(function(){
+                    var fo = log[log.length-2].split('[ffmpeg] Destination: ')[1].replace(/\\/g,'/').trim();
+                    var f = fo.replace('.mp3','.'+format);
+                    console.log(f)
+                    const bat = spawn(global.dir+'/lib/ffmpeg', ['-i',fo,f,'-loglevel','repeat+level+verbose']);
+                    console.dir(bat)
+                    bat.stdout.on('data', (data) => {
+                    console.log(data.toString());
+                    });
+    
+                    bat.stderr.on('data', (data) => {
+                    console.log(data.toString());
+                    });
+    
+                    bat.on('exit', (code) => {
+                        console.log(`Child exited with code ${code}`);
+                        me.lwrite.sender.send('file',{id:me.id,file:log[log.length-2].split('[ffmpeg] Destination: ')[1]});
+                        me.lwrite.sender.send('process-fin',{percent :me.percent,id:me.id});
+                    });
+                },2000)
+
+                break;
+              default:
+                me.lwrite.sender.send('file',{id:me.id,file:log[log.length-2].split('[ffmpeg] Destination: ')[1]});
+                me.lwrite.sender.send('process-fin',{percent :me.percent,id:me.id});
+                break;
+          }
+
+
+
+
+         /* if(this.url.match('youtube')){
+              var url = this.url;
+              var video_id = this.url.split('v=')[1];
+              var ampersandPosition = video_id.indexOf('&');
+              if (ampersandPosition != -1) {
+                  video_id = video_id.substring(0, ampersandPosition);
+              }
+              /*
+              var x = new Notification({
+                  title:"Cyb3r Downloader",
+                  body :"finished download for "+url,
+                  //icon : body
+              })
+              x.show()
+            //request.get('https://i.ytimg.com/vi/'+video_id+'/hqdefault.jpg', function (err, res, body) {
+
+
+                //log[log.length-2].split('[ffmpeg] Destination: ')[1]
+
+                /*var tags = {
+                  image: body
+                }
+                var success = nodeID3.write(tags, log[log.length-2].split('[ffmpeg] Destination: ')[1]);
+                console.log(success);
+            });
+          }*/
         });
     }
 }

src/controller/youtube-dl.routine.js

@@ -11,6 +11,9 @@ module.exports = (path,url,format)=>{
             case "mp3":
                 param = ['-x','--audio-format','mp3','-i',url,'-o',path+'/%(title)s.%(ext)s'];
                 break;
+            case "wma":
+                param = ['-x','--audio-format','mp3','-i',url,'-o',path+'/%(title)s.%(ext)s'];
+                break;
             case "mp4":
                 param = ['-w','-f','bestvideo[ext=mp4]+bestaudio[ext=m4a]/mp4',url,'-o',path+'/%(title)s.%(ext)s'];
                 break;

src/helper/string.js

@@ -6,8 +6,10 @@ var st = {};
 
 
 st.replace = (str)=>{
-    return sub
+    return str
-    .replace(/\|/g, "_");
+    .replace(/\|/g, "_")
+    .replace(/__/g, "_");
+    ;
 }
 
 

src/index.js

@@ -11,14 +11,17 @@ const fs  = require('fs');
 const yt_dl = require('./controller/youtube-dl')
 const dl   = require('./controller/download');
 const browser = require('./controller/windows.js/browser');
+const tray = require('./controller/tray')
 
+//const main_window = require('./controller/windows.js/main.js')
 
+let tray_win = null;
 
 if (!fs.existsSync(global.dir+'/tmp/inst')) {
     fs.writeFileSync(global.dir+'/tmp/inst',"out");
-    var win;
+    app.quit();
+    /*var win;
     const createWindow = () =>{
-
         win = new BrowserWindow({
             width: 320,
             height: 500,
@@ -39,25 +42,11 @@ if (!fs.existsSync(global.dir+'/tmp/inst')) {
         app.quit();
       }
     });
+    */
 }else{
     var win ;
-
-
     app.getPath('documents')
     const createWindow = () =>{
-
-        //dl.download(dl.ff(process.platform));
-        /*
-
-        win = new BrowserWindow({
-            width: 1010,
-            height: 800,
-            minWidth: 1010,
-            minHeight: 565,
-            show: false,
-            frame: true
-        })
-        */
         win = new BrowserWindow({
             width: 320,
             height: 500,
@@ -68,19 +57,12 @@ if (!fs.existsSync(global.dir+'/tmp/inst')) {
         ipcMain
         .on('start-full', (event, arg)=>{
 
-            var win2 = new BrowserWindow({
+
-                width: 1010,
+            //main_window.createWindow();
-                height: 800,
+            //main_window.open();
-                minWidth: 1010,
+            tray_win = tray();
-                minHeight: 565,
+                win.close();
-                show: true,
+
-                frame: true,
-                icon: __dirname + '/app.ico'
-            })
-            win.close();
-            //var z = new browser('http://www.crunchyroll.com/');
-            win2.loadURL(`file://${__dirname}/app/view/layout.html`)
-            win = win2;
         });
         win.loadURL(`file://${__dirname}/app/view/init.html`)
         win.once('ready-to-show', () => {
@@ -88,7 +70,6 @@ if (!fs.existsSync(global.dir+'/tmp/inst')) {
             //var x = new yt_dl("https://www.youtube.com/watch?v=UbQgXeY_zi4")
             //x.download();
         })
-
         win.on('closed', () => {
           // Dereference the window object, usually you would store windows
           // in an array if your app supports multi windows, this is the time

src/main.js

@@ -4,28 +4,29 @@ var handleStartupEvent = function() {
   console.log(process.platform);
   switch (process.platform) {
     case 'win32':
-      
+
       break;
     case 'linux':
-    
+
       break;
     default:
-      
+
   }
   if (process.platform !== 'win32') {
     return false;
   }
-
+  const exeName = path.basename(process.execPath);
   var squirrelCommand = process.argv[1];
   console.log(squirrelCommand);
   switch (squirrelCommand) {
+      case '--squirrel-updated':
       case '--squirrel-install':
               target = path.basename(process.execPath);
               updateDotExe = path.resolve(path.dirname(process.execPath), '..', 'update.exe');
               var createShortcut = updateDotExe + ' --createShortcut=' + target + ' --shortcut-locations=Desktop,StartMenu' ;
               console.log (createShortcut);
               exec(createShortcut);
-              // Always quit when done
+              spawnUpdate(['--createShortcut', exeName]);
               app.quit();
               return true;
 
@@ -37,6 +38,7 @@ var handleStartupEvent = function() {
                 var createShortcut = updateDotExe + ' --removeShortcut=' + target ;
                 console.log (createShortcut);
                 exec(createShortcut);
+                spawnUpdate(['--removeShortcut', exeName]);
                 // Always quit when done
                 app.quit();
                 return true;

src/themes/standard/style.less

@@ -5,15 +5,19 @@
 
 */
 
-@main-front-color   : #f8f8f8;
+@main-front-color   : #111111;
-@background-color   : #111111;
+@background-color   : #F8F8F8;
-@background-2ndcolor: #232323;
+@background-2ndcolor: #F8F8F8;
 
 body {
   margin: 0;
-  margin-top: 50px;
+  margin-top: 46px;
-  background: @background-color;
+  /*background: @background-color;
-  color:@main-front-color;
+  color:@main-front-color;*/
+}
+.navbar{
+    background: @main-front-color !important;
+    color:@background-color;
 }
 .btn-success {
     color: @main-front-color;
@@ -38,6 +42,7 @@ body {
 span.input-group-btn.open > ul > li> a{
     background-image:none;
 }
+/*
 .progress{
     background-image:none;
     background-color: @background-color;
@@ -48,12 +53,13 @@ span.input-group-btn.open > ul > li> a{
     background-color: @background-color;
     box-shadow: inset 0px 0px 12px 0px @main-front-color;
     transition: .3s all;
-}
+}*/
 .media:first-child {
     margin-top: 15px;
 }
 .media {
-    box-shadow: 0px 0px 6px 1px @main-front-color;
+    box-shadow: 0 0 12px 1px rgba(105, 105, 105, 0.28);
+    margin-top: 14px;
 }
 .sidebar-nav {
     padding: 10px;
@@ -63,14 +69,14 @@ span.input-group-btn.open > ul > li> a{
 }
 
 .nav-header {
-
     font-weight: bold;
 }
-.scroll{
+.scroll {
     overflow-y: scroll;
-    height: ~"calc( 100vh - 96px)";
+    height: ~"calc(100vh - 160px)";
+    margin-top: 15px;
+    box-shadow: inset 0px 0px 3px 2px rgba(69, 69, 69, 0.3);
 }
-
 .left-playlist{
     box-shadow: 0px 0px 6px 1px @main-front-color;
     height: ~"calc(100vh - 20vw - 30px )";
@@ -86,3 +92,22 @@ span.input-group-btn.open > ul > li> a{
         width:100%;
     }
 }
+*{
+    border-radius: 0px !important;
+}
+*::-webkit-scrollbar-track
+{
+	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	background-color: #F5F5F5;
+}
+
+*::-webkit-scrollbar
+{
+	width: 6px;
+	background-color: #F5F5F5;
+}
+
+*::-webkit-scrollbar-thumb
+{
+	background-color: #000000;
+}

src/tmp/c

@@ -1,15 +0,0 @@
-# Netscape HTTP Cookie File
-# http://curl.haxx.se/rfc/cookie_spec.html
-# This is a generated file!  Do not edit.
-
-.crunchyroll.com	TRUE	/	FALSE	1534887951	__cfduid	db1426254a0b86e7ca8b70551a18644361503351951
-.crunchyroll.com	TRUE	/	FALSE	1537220753	__qca	P0-1835482882-1503351953593
-.crunchyroll.com	TRUE	/	FALSE	1566942248	_ga	GA1.2.1843711990.1503351953
-.crunchyroll.com	TRUE	/	FALSE	1503956648	_gid	GA1.2.1726060626.1503868189
-.crunchyroll.com	TRUE	/	FALSE	1504561873	c_d	p%3D1
-.crunchyroll.com	TRUE	/	FALSE	1504561873	c_userid	64927993
-.crunchyroll.com	TRUE	/	FALSE	1504561873	c_userkey	2%3AZxOX%2BsILKGFm2Nmfc6%2FX12lxWjo%3D
-.crunchyroll.com	TRUE	/	FALSE	1518903952	c_visitor	95852853-d74d-4e9c-b5ad-182b74e6f44f
-.crunchyroll.com	TRUE	/	FALSE	1503960371	cf_clearance	fb4b8c534496cdfec5683c51ec28dc2e4c70e5ce-1503351970-604800
-.crunchyroll.com	TRUE	/	FALSE	1537220753	sess_id	jjdcwcg0amrsbt44eviz34disrmrqd2m
-.crunchyroll.com	TRUE	/	FALSE	1537220753	session_id	2074779edf6db7782876092c0d2f03db

tests/player.js

@@ -0,0 +1,7 @@
+
+var MPlayer = require('mplayer');
+
+var player = new MPlayer();
+var song = 'D:/theen/git/cyb3r-youtube-downloader/___.mp3';
+
+player.openFile(song);