1.5.4

1.5.0

See merge request !1

.gitignore

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

README.md

@@ -1,7 +1,29 @@
-# electron-simple-youtube-downloader
+# Cyb3r Downloader
 
 ![./current-preview.PNG](./current-preview.PNG)
 
+# 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://git.tooru.thee.moe/theenoro/electron-simple-youtube-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/Z5YvrlHaPfvEdbu)
+
+> 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://git.tooru.thee.moe/theenoro/electron-simple-youtube-downloader/issues)
+
+[Download](https://cl.thee.moe/index.php/s/hd9ILsF2etPoa6r)
 
 # v 1.4.0 Alpha
 

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",
-  "productName": "cyb3r-youtube-downloader",
-  "version": "1.0.0",
-  "description": "My Electron application description",
+  "name": "cyb3r-downloader",
+  "productName": "cyb3r-downloader",
+  "version": "1.5.0",
+  "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": "",
-        "name": "cyb3ryoutubedownloader"
+        "packageName": "Cyb3r_Downloader",
+        "name": "Cyb3r_Downloader"
       }
     }
   },
   "dependencies": {
-    "electron": "^1.6.11",
-    "electron-compile": "^6.4.1",
+     "body-parser": "^1.17.2",
+     "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,18 +1,40 @@
+const shared = require(global.__dirname + '/../js/shared');
 $(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;
 
@@ -23,7 +45,7 @@ $(function() {
     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();
         }
@@ -43,7 +65,7 @@ $(function() {
         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 +73,34 @@ $(function() {
         path = dialog.showOpenDialog({
             properties: ['openDirectory']
         })[0];
+        config.set('path', path);
         console.log(path)
         ipcRenderer.send('setPath', {
             path: path
         });
     })
     $('#pot').click(function() {
-        ipcRenderer.send('open-pot', {
-        });
+        ipcRenderer.send('open-pot', {});
     });
     $('body').delegate('.play-file', 'click', function(e) {
+
+        //exec(getCommandLine() + ' "' + decodeURI(e.currentTarget.dataset.file.split('file://')[1])+'"');
         if (pot === false) {
             video.setAttribute("src", e.currentTarget.dataset.file);
             video.play();
         } 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 +111,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 +146,28 @@ $(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">
+                            <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 class="media-out-` + video_id + `"></div>
+                              </div>
+                            </div>`).prependTo('#output');
                         cache[video_id] = YT.title;
                         ipcRenderer.send('start-download-pl', {
                             url: $('#url').val(),
@@ -114,11 +179,35 @@ $(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(),
-                            id: video_id
+                            id: video_id,
+                            title: helper.replace(YT.title)
                         });
                     })
             }
@@ -127,4 +216,24 @@ $(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/js/pot_main.js

@@ -1,3 +1,4 @@
+const shared = require(global.__dirname+'/../js/shared');
 $(function() {
     const ipcRenderer = require('electron').ipcRenderer;
     ipcRenderer.send('pot_real_open', {x:"xx"});
@@ -20,6 +21,4 @@ $(function() {
     $('body').on( "mouseenter",function () {
         $('.navbar').css('opacity',"1")
     });
-
-
 })

src/app/js/shared.js

@@ -0,0 +1,13 @@
+
+var shared = {};
+var test = "";
+
+
+shared.setLog = (text)=>{
+    test  = text;
+}
+shared.log = ()=>{
+    console.log(test);
+}
+
+module.exports = shared;

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;
-@background-color   : #111111;
-@background-2ndcolor: #232323;
+@main-front-color   : #111111;
+@background-color   : #F8F8F8;
+@background-2ndcolor: #F8F8F8;
 
 body {
   margin: 0;
-  margin-top: 50px;
-  background: @background-color;
-  color:@main-front-color;
+  margin-top: 46px;
+  /*background: @background-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 {
     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

@@ -148,15 +148,16 @@
             transform: rotate(-48deg);
             -webkit-transform: rotate(-48deg);
         }
+
         .progress {
             height: 10px;
         }
+
         .progress .progress-bar {
             height: 5px;
             width: 30px;
             background-color: #FFF;
             content: "";
-
         }
     </style>
 </head>
@@ -169,7 +170,8 @@
         <div class="center"></div>
         <div class="inner"></div>
     </div>
-    <iframe id="coub" src="https://coub.com/embed/ulak9?muted=false&autostart=true&originalSize=false&startWithHD=false" allowfullscreen="true" frameborder="0" width="320" height="180"></iframe><script async src="https://c-cdn.coub.com/embed-runner.js"></script>
+    <iframe id="coub" src="https://coub.com/embed/ulak9?muted=false&autostart=true&originalSize=false&startWithHD=false" allowfullscreen="true" frameborder="0" width="320" height="180"></iframe>
+    <script async src="https://c-cdn.coub.com/embed-runner.js"></script>
     <hr/>
     <div class="progress">
         <div class="progress-bar" id="main"></div>
@@ -181,8 +183,8 @@
                 "whbex",
                 "wf0jb",
                 "ulak9",
-                "wcmxa",
-                "wc5e2"
+                "wc5e2",
+                "xza2z"
             ];
             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')
@@ -199,7 +201,7 @@
 
             })
         })
-
     </script>
 </body>
+
 </html>

src/app/view/layout.html

@@ -9,52 +9,101 @@
     }
   </script>
   <script src="./../libs/jquery/jquery-3.2.1.min.js"></script>
-    <script src="./../libs/bootstrap/js/bootstrap.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-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="#wt" aria-controls="wt" role="tab" data-toggle="tab">Watch Together</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="sidebar-nav">
-                    <ul class="nav nav-tabs nav-pills nav-stacked" role="tablist">
-                        <li role="presentation" class="active"><a href="#download" aria-controls="download" role="tab" data-toggle="tab">Download</a></li>
-                        <li role="presentation"><a href="#player" aria-controls="player" role="tab" data-toggle="tab">Player</a></li>
-                    </ul>
+      <div class="col-md-2" style="display:none">
+        <div class="list-group" 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="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="#wt" aria-controls="wt" role="tab" data-toggle="tab">Watch Together</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 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="col-md-6">
         <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>
-                                    <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">
-                                            Format <span class="caret"></span>
-                                    </button>
-                                    <ul class="dropdown-menu" id="format">
-                                        <li><a href="#" class="format" data-format="mp3">MP3</a></li>
-                                        <li role="separator" class="divider"></li>
-                                        <li><a href="#" class="format" data-format="mp4">MP4</a></li>
-                                    </ul>
+                                     <div class="dropdown show">
+                                        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                          Format
+                                        </a>
+
+                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
+                                          <a class="dropdown-item format" href="#" data-format="mp3">MP3</a>
+                                          <a class="dropdown-item format" href="#" data-format="vorbis">OGG</a>
+                                          <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>
                 </div>
               </div>
@@ -68,37 +117,104 @@
           <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="wt">
+            <div class="row">
+              <div class="col-md-12">
+                <div class="input-group">
+                  <input type="text" class="form-control" id="webview-url" placeholder="www..." aria-label="Product name">
+                  <span class="input-group-btn">
+                    <button class="btn btn-secondary" type="button" id="webviewload">-></button>
+                    <button class="btn btn-secondary" type="button" id="webviewdownload">Cyb3r Download</button>
+                  </span>
+                </div>
+                <webview id="foo" src="https://youtube.com/" style="display:inline-flex; width:100%; height:calc(100vh - 144px)"></webview>
+              </div>
+              <script>
+                $(function(){
+                    require('remote').getCurrentWindow().toggleDevTools();
+                  const webview = document.querySelector('webview')
+                  const indicator = document.querySelector('.indicator')
+
+                  const loadstart = () => {
+
+                  }
+
+                  const loadstop = () => {
+                    $('#webview-url').val(webview.getURL());
+                  }
+                  $('#webviewload').click(()=>{
+                    var url = $('#webview-url').val();
+                    webview.loadURL(url)
+                  })
+                  $('#webviewdownload').click(()=>{
+                    var url = $('#webview-url').val();
+                    $.post( "http://127.0.0.1:54167/download?url="+encodeURI(url),function() {
+
+                    });
+                  })
+                  webview.addEventListener('did-start-loading', loadstart)
+                  webview.addEventListener('did-stop-loading', loadstop)
+                });
+              </script>
+            </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 id="rss">
+
+                </div>
+                <script>
+                    /*
+                    $(()=>{
+                        $.get( "https://git.tooru.thee.moe/theenoro/electron-simple-youtube-downloader/commits/master?format=atom", function( data ) {
+                            $xml = $( data ),
+                            $title = $xml.find( "title" );
+                            console.log($xml)
+                            $('#rss').html(data.toString());
+                            alert( "Load was performed." );
+                        });
+
+                    })
+                    */
+                </script>
+              </div>
             </div>
 
           </div>
-            <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="col-md-4">
+
                 <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) {
+
+      } 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/crawler/vivo.sx.js

@@ -0,0 +1,109 @@
+const request = require('request');
+// https://vivo.sx/46b5f0d914
+
+var vivo = (url,cb)=>{
+    request('https://vivo.sx/76aa530aac', function(error, response, body) {
+        console.log('error:', error); // Print the error if one occurred
+        console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received
+        //console.log('body:', body); // Print the HTML for the Google homepage.
+        var html = body;
+        var bse64 = html.split('Core.InitializeStream (\'')[1].split('\');')[0];
+        console.log(bse64)
+        var arr = eval(Base64.decode(bse64));
+        console.log(arr[0])
+        cb(arr[0]);
+    });
+}
+
+module.exports = vivo;
+
+var Base64 = {
+    _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
+    encode: function(e) {
+        var t = "";
+        var n, r, i, s, o, u, a;
+        var f = 0;
+        e = Base64._utf8_encode(e);
+        while (f < e.length) {
+            n = e.charCodeAt(f++);
+            r = e.charCodeAt(f++);
+            i = e.charCodeAt(f++);
+            s = n >> 2;
+            o = (n & 3) << 4 | r >> 4;
+            u = (r & 15) << 2 | i >> 6;
+            a = i & 63;
+            if (isNaN(r)) {
+                u = a = 64
+            } else if (isNaN(i)) {
+                a = 64
+            }
+            t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) + this._keyStr.charAt(u) + this._keyStr.charAt(a)
+        }
+        return t
+    },
+    decode: function(e) {
+        var t = "";
+        var n, r, i;
+        var s, o, u, a;
+        var f = 0;
+        e = e.replace(/[^A-Za-z0-9+/=]/g, "");
+        while (f < e.length) {
+            s = this._keyStr.indexOf(e.charAt(f++));
+            o = this._keyStr.indexOf(e.charAt(f++));
+            u = this._keyStr.indexOf(e.charAt(f++));
+            a = this._keyStr.indexOf(e.charAt(f++));
+            n = s << 2 | o >> 4;
+            r = (o & 15) << 4 | u >> 2;
+            i = (u & 3) << 6 | a;
+            t = t + String.fromCharCode(n);
+            if (u != 64) {
+                t = t + String.fromCharCode(r)
+            }
+            if (a != 64) {
+                t = t + String.fromCharCode(i)
+            }
+        }
+        t = Base64._utf8_decode(t);
+        return t
+    },
+    _utf8_encode: function(e) {
+        e = e.replace(/rn/g, "n");
+        var t = "";
+        for (var n = 0; n < e.length; n++) {
+            var r = e.charCodeAt(n);
+            if (r < 128) {
+                t += String.fromCharCode(r)
+            } else if (r > 127 && r < 2048) {
+                t += String.fromCharCode(r >> 6 | 192);
+                t += String.fromCharCode(r & 63 | 128)
+            } else {
+                t += String.fromCharCode(r >> 12 | 224);
+                t += String.fromCharCode(r >> 6 & 63 | 128);
+                t += String.fromCharCode(r & 63 | 128)
+            }
+        }
+        return t
+    },
+    _utf8_decode: function(e) {
+        var t = "";
+        var n = 0;
+        var r = c1 = c2 = 0;
+        while (n < e.length) {
+            r = e.charCodeAt(n);
+            if (r < 128) {
+                t += String.fromCharCode(r);
+                n++
+            } else if (r > 191 && r < 224) {
+                c2 = e.charCodeAt(n + 1);
+                t += String.fromCharCode((r & 31) << 6 | c2 & 63);
+                n += 2
+            } else {
+                c2 = e.charCodeAt(n + 1);
+                c3 = e.charCodeAt(n + 2);
+                t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
+                n += 3
+            }
+        }
+        return t
+    }
+}

src/controller/download.js

@@ -1,7 +1,10 @@
 const request = require('request');
 const fs = require('fs')
 const ipcMain = require('electron').ipcMain;
-const unzip   = require('unzip')
+const unzip = require('unzip');
+const {
+    spawn
+} = require('child_process');
 
 
 var libsx = {
@@ -27,6 +30,7 @@ ipcMain
                 break;
             default:
         }
+
         for (var lib in libsx) {
             if (fs.existsSync(global.dir + "/lib/" + libsx[lib])) {
 
@@ -41,6 +45,8 @@ ipcMain
             if (url === '') {
                 libs.checkNext('youtube-dl');
             } else {
+                switch (process.platform) {
+                    case "win32":
                         libs.download(url, "ffmpeg", function(data, file) {
                             fs.createReadStream(file)
                                 .pipe(unzip.Parse())
@@ -61,6 +67,43 @@ ipcMain
                                     }
                                 });
                         });
+                        break;
+                    case "linux":
+                        libs.download(url, "ffmpeg", function(data, file) {
+                            const ls = spawn('tar', ['xvf', './src/tmp/ffmpeg.x-xz', '-C', './src/tmp']);
+
+                            ls.stdout.on('data', (data) => {
+                                console.log(`stdout: ${data}`);
+                            });
+
+                            ls.stderr.on('data', (data) => {
+                                console.log(`stderr: ${data}`);
+                            });
+
+                            ls.on('close', (code) => {
+                                var folder = "";
+                                console.log(`child process exited with code ${code}`);
+                                const ls = spawn('rm', ['./src/tmp/ffmpeg.x-xz']).on('close', () => {
+                                    const ls = spawn('ls', ['./src/tmp/']).stdout.on(data, (data) => {
+                                        console.log(data)
+                                        if (data.match('ffmpeg-') && data.match('-static')) {
+                                            folder = data;
+                                        }
+                                    }).on('close', () => {
+                                        const ls = spawn('cp', ['./src/tmp/' + folder + '/ffmpeg', './src/lib/ffmpeg']).on('close', () => {
+                                            const ls = spawn('cp', ['./src/tmp/' + folder + '/ffprobe', './src/lib/ffprobe']).on('close', () => {
+                                                libs.checkNext('youtube-dl');
+                                            });
+                                        });
+                                    });
+                                });
+                            });
+
+
+                        })
+                        break;
+                    default:
+                }
             }
         } else {
             libs.checkNext('youtube-dl');
@@ -86,7 +129,7 @@ libs.ff = (os)=>{
             url = 'http://ffmpeg.zeranoe.com/builds/win32/static/ffmpeg-latest-win32-static.zip';
             break;
         case "linux":
-            url = ''
+            url = 'https://johnvansickle.com/ffmpeg/releases/ffmpeg-release-64bit-static.tar.xz'
 
         default:
 
@@ -104,8 +147,11 @@ libs.yt_dl = (os,cb)=>{
             })
             break;
         case "linux":
-            url = ''
+            url = 'https://yt-dl.org/downloads/latest/youtube-dl'
+            libs.download(url, "youtube-dl", function(data, file) {
+                fs.renameSync(file, global.dir + '/lib/youtube-dl');
                 cb();
+            })
         default:
 
     }
@@ -121,7 +167,9 @@ libs.download = (url,data,cb)=>{
         actual += chunk.length;
         perc = actual / full * 100;
         console.log(perc);
-        libs.listen.sender.send('progress',{percent :Math.floor(perc)});
+        libs.listen.sender.send('progress', {
+            percent: Math.floor(perc)
+        });
     });
 
     r.on('response', function(res) {
@@ -133,6 +181,8 @@ libs.download = (url,data,cb)=>{
     });
 }
 
+function win_ffmpeg() {
 
+}
 
 module.exports = libs;

src/controller/install/linux/script.js

@@ -1,4 +1,6 @@
-const { exec } = require('child_process');
+const {
+    exec
+} = require('child_process');
 
 var install = {};
 
@@ -40,7 +42,9 @@ install.download = (url,cb) =>{
         actual += chunk.length;
         perc = actual / full * 100;
         console.log(perc);
-      libs.listen.sender.send('progress',{percent :Math.floor(perc)});
+        libs.listen.sender.send('progress', {
+            percent: Math.floor(perc)
+        });
     });
     r.on('response', function(res) {
         var path = global.dir + '/tmp/' + url.split('/')[url.split('/').length - 1];

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) => {
@@ -36,14 +37,18 @@ pot.isOpen = false;
 pot.open = (e) => {
     s = e;
     if (win !== null) {
-        e.sender.send('play-in-Window',{do :false});
+        e.sender.send('play-in-Window', {
+            do: false
+        });
         win.close();
     }
     var x = new playerOnTop(e);
 }
 pot.close = () => {
     console.log('CLOSE')
-    s.sender.send('play-in-Window',{do :false});
+    s.sender.send('play-in-Window', {
+        do: false
+    });
     win.close();
 }
 
@@ -59,7 +64,9 @@ class playerOnTop {
             alwaysOnTop: true,
             icon: global.dir + '/app.ico'
         })
-        e.sender.send('play-in-Window',{do :true});
+        e.sender.send('play-in-Window', {
+            do: true
+        });
         win = this.win;
         win.loadURL(`file://${global.dir}/app/view/pot.html`)
         win.once('ready-to-show', () => {
@@ -73,7 +80,9 @@ class playerOnTop {
         });
         win.on('closed', () => {
             pot.isOpen = false;
-            e.sender.send('play-in-Window',{do :false});
+            e.sender.send('play-in-Window', {
+                do: false
+            });
             win = null;
         });
     }

src/controller/tray.js

@@ -0,0 +1,47 @@
+const {
+    app,
+    Menu,
+    Tray
+} = require('electron')
+const main_window = require('./windows.js/main.js')
+const path = require('path')
+
+
+
+module.exports = () => {
+
+    switch (process.platform) {
+        case 'win32':
+
+            break;
+        case 'linux':
+
+            break;
+    }
+    let tray = new Tray(path.join(global.dir + '/app.png'))
+    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/watchr.js

@@ -22,7 +22,10 @@ class folderWatchr {
         });
         for (var i = 0; i < files.length; i++) {
             files[i] = files[i].replace(/\\/g, "/");
-            watch_event.sender.send('watchr_file',{type:"add",file:files[i]});
+            watch_event.sender.send('watchr_file', {
+                type: "add",
+                file: files[i]
+            });
         }
 
         function listener(changeType, fullPath, currentStat, previousStat) {
@@ -36,10 +39,16 @@ class folderWatchr {
 
                     console.log('the file', fullPath, 'was created', currentStat)
                     files.push(fullPath);
-                    watch_event.sender.send('watchr_file',{type:"add",file:fullPath});
+                    watch_event.sender.send('watchr_file', {
+                        type: "add",
+                        file: fullPath
+                    });
                     break;
                 case 'delete':
-                    watch_event.sender.send('watchr_file',{type:"remove",file:fullPath});
+                    watch_event.sender.send('watchr_file', {
+                        type: "remove",
+                        file: fullPath
+                    });
                     files.splice(files.indexOf(fullPath), 1);
                     break;
             }

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/browser.js

@@ -1,5 +1,3 @@
-
-
 const {
     BrowserWindow,
     session
@@ -18,7 +16,9 @@ class browser {
             icon: global.dir + '/app.ico'
         })
         setInterval(function() {
-            session.defaultSession.cookies.get({url:'http://crunchyroll.com'}, (error, cookies) => {
+            session.defaultSession.cookies.get({
+                url: 'http://crunchyroll.com'
+            }, (error, cookies) => {
                 //console.log(error, cookies)
                 crunch.session_save(cookies);
             })

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,16 @@
-const { spawn } = require('child_process');
-const ipcMain = require('electron').ipcMain;
+const {
+    spawn
+} = require('child_process');
+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,12 +20,24 @@ var format = "mp3";
 var fol = null;
 
 var pot_open_ev = null;
+var request = require('request').defaults({
+    encoding: null
+});
+
+var list = [];
+
 ipcMain
     .on('start-download', (event, arg) => {
-  path = orig_path
-  var download = new yt_dl(arg.url,arg.id);
+        path = orig_path;
+        if(list.length != 0){
+            list.push([arg,event]);
+        }else{
+            list.push([arg,event]);
+            var download = new yt_dl(arg.url, arg.id, arg.title);
             download.addListen(event)
             download.download();
+        }
+
     })
     .on('set-format', (event, arg) => {
         format = arg.format;
@@ -48,11 +68,12 @@ ipcMain
     });
 
 var yt_dl = class {
-    constructor(url,id){
+    constructor(url, id, title) {
         this.url = url;
         this.percent = 0;
         this.lwrite = null;
         this.id = id;
+        this.title = title
     }
     addListen(e) {
         this.lwrite = e
@@ -65,8 +86,14 @@ var yt_dl = class{
         var me = this;
         var ls;
 
-        var m = dl_routine(path,this.url,format);
+        var m = dl_routine(path, this.url, format, this.title);
+        console.log('CMD: '+m[0]+' '+ m[1]);
         ls = spawn(m[0], m[1]);
+
+
+
+
+
         if (path == '') {
             //ls = spawn(global.dir+'/lib/youtube-dl', ['-x','--audio-format','mp3','-i',this.url]);
         } else {
@@ -85,7 +112,10 @@ var yt_dl = class{
                         var percent = data.split(']')[1].split('of')[0];
                         //console.log(z)
                         me.percent = percent.trim();
-                      me.lwrite.sender.send('download-progress',{percent :me.percent,id:me.id});
+                        me.lwrite.sender.send('download-progress', {
+                            percent: me.percent,
+                            id: me.id
+                        });
                         break;
                     default:
                 }
@@ -101,7 +131,10 @@ var yt_dl = class{
                                 }
                                 file = z[x];
                             }
-                          me.lwrite.sender.send('file',{id:me.id,file:file});
+                            me.lwrite.sender.send('file', {
+                                id: me.id,
+                                file: file
+                            });
                             break;
                         }
                     }
@@ -117,10 +150,59 @@ 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});
+            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
+            });
+
+
+            list.splice(0,1);
+            if(list.length>0){
+                dl(list[0][0],list[0][1]);
+            }
+            var title = this.title;
+
+            if (this.url.match('youtube') &&  format === 'mp3') {
+                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 fornoti = title;
+                if (title === "") {
+                    fornoti = url;
+                }
+                var x = new Notification({
+                    title: "Cyb3r Downloader",
+                    body: "finished download for " + title,
+                    //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, path + '/' + title + '.' + format);
+                    console.log(success);
+                });
+            }
         });
     }
 }
 
+function dl(arg,event){
+    var download = new yt_dl(arg.url, arg.id, arg.title);
+    download.addListen(event)
+    download.download();
+}
+
 module.exports = yt_dl;

src/controller/youtube-dl.routine.js

@@ -1,24 +1,23 @@
-
-
-
-module.exports = (path,url,format)=>{
+module.exports = (path, url, format, title = "%(title)s") => {
     var command = global.dir + '/lib/youtube-dl';
     var param = [];
     console.log(url);
     if (url.match('youtube')) {
         console.log('youtube')
         switch (format) {
+            case "vorbis":
+                param = ['-x', '-f', 'bestaudio[acodec^=opus]', '--audio-format', 'vorbis', '-i', url, '-o', path + '/'+title+'.%(ext)s'];
+                break;
             case "mp3":
-                param = ['-x','--audio-format','mp3','-i',url,'-o',path+'/%(title)s.%(ext)s'];
+                param = ['--audio-quality', '0','-f','bestaudio[ext=m4a]','--audio-format','mp3', url, '-o', path + '/'+title+'.%(ext)s'];
                 break;
             case "mp4":
-                param = ['-w','-f','bestvideo[ext=mp4]+bestaudio[ext=m4a]/mp4',url,'-o',path+'/%(title)s.%(ext)s'];
+                param = ['-w', '-f', 'bestvideo[ext=mp4]+bestaudio[ext=m4a]/mp4', url, '-o', path + '/'+title+'.%(ext)s'];
                 break;
             default:
 
         }
-    }
-    else if(url.match('crunchyroll')){
+    } else if (url.match('crunchyroll')) {
         console.log('crunchyroll')
         param = ['--cookie', global.dir + '/tmp/c', '--all-subs', '--sub-format', 'srt', '--write-sub', '--embed-subs', url, '-o', path + '/%(title)s.%(ext)s'];
     }

src/helper/string.js

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

src/index.js

@@ -11,53 +11,19 @@ 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;
-    const createWindow = () =>{
-
-        win = new BrowserWindow({
-            width: 320,
-            height: 500,
-            show: false,
-            frame: false,
-            icon: __dirname + '/app.ico'
-        })
-        win.once('ready-to-show', () => {
-        })
-
-        win.on('closed', () => {
-          win = null;
-        });
-    }
-    app.on('ready', createWindow);
-    app.on('window-all-closed', () => {
-      if (process.platform !== 'darwin') {
     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,
@@ -67,46 +33,27 @@ if (!fs.existsSync(global.dir+'/tmp/inst')) {
         })
         ipcMain
         .on('start-full', (event, arg)=>{
-
-            var win2 = new BrowserWindow({
-                width: 1010,
-                height: 800,
-                minWidth: 1010,
-                minHeight: 565,
-                show: true,
-                frame: true,
-                icon: __dirname + '/app.ico'
-            })
+            //main_window.createWindow();
+            //main_window.open();
+            tray_win = tray();
                 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', () => {
             win.show()
-            //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
-          // when you should delete the corresponding element.
           win = null;
         });
     }
     app.on('ready', createWindow);
     app.on('window-all-closed', () => {
-      // On OS X it is common for applications and their menu bar
-      // to stay active until the user quits explicitly with Cmd + Q
       if (process.platform !== 'darwin') {
         app.quit();
       }
     });
     app.on('activate', () => {
-      // On OS X it's common to re-create a window in the app when the
-      // dock icon is clicked and there are no other windows open.
       if (mainWindow === null) {
         createWindow();
       }

src/main.js

@@ -15,17 +15,18 @@ var handleStartupEvent = function() {
   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;
-@background-color   : #111111;
-@background-2ndcolor: #232323;
+@main-front-color   : #111111;
+@background-color   : #F8F8F8;
+@background-2ndcolor: #F8F8F8;
 
 body {
   margin: 0;
-  margin-top: 50px;
-  background: @background-color;
-  color:@main-front-color;
+  margin-top: 46px;
+  /*background: @background-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 {
     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);