1.5.1

.gitignore

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

package.json

@@ -12,7 +12,7 @@
   },
   "keywords": [],
   "author": "theen",
-  "license": "MIT",
+  "license": "GPL",
   "config": {
     "forge": {
       "make_targets": {
@@ -65,6 +65,7 @@
     "fs": "0.0.1-security",
     "mkdirp": "^0.5.1",
     "node-id3": "0.0.10",
+    "node-lame": "^1.0.4",
     "path": "^0.12.7",
     "request": "^2.81.0",
     "unzip": "^0.1.11",

src/app/js/app.js

@@ -2,6 +2,9 @@ $(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 = "mp3";
     if(typeof config.get('format') !== 'undefined'){
@@ -79,6 +82,8 @@ $(function() {
         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();
@@ -88,6 +93,10 @@ $(function() {
             });
         }
     })
+    $('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);
@@ -202,4 +211,13 @@ $(function() {
 
         });
     })
+
+    function getCommandLine() {
+       switch (process.platform) {
+          case 'darwin' : return 'open';
+          case 'win32' : return 'start';
+          case 'win64' : return 'start';
+          default : return 'xdg-open';
+       }
+    }
 })

src/app/style/style.css

@@ -1 +1 @@
-body{margin:0;margin-top:70px}.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 - 387px)}.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}
+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

@@ -11,7 +11,7 @@
 
 body {
   margin: 0;
-  margin-top: 70px;
+  margin-top: 46px;
   /*background: @background-color;
   color:@main-front-color;*/
 }
@@ -71,11 +71,12 @@ span.input-group-btn.open > ul > li> a{
 .nav-header {
     font-weight: bold;
 }
-.scroll{
+.scroll {
     overflow-y: scroll;
-    height: ~"calc(100vh - 387px)"; 
+    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 )";
@@ -94,3 +95,19 @@ span.input-group-btn.open > ul > li> a{
 *{
     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/layout.html

@@ -28,26 +28,47 @@
 
 <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="list-group" role="tablist">
+                <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="#info" aria-controls="info" role="tab" data-toggle="tab">Info</a></li>
                 </div>
             </div>
-            <div class="col-md-10">
+            <div class="col-md-12" >
                 <div style="max-width:380px;margin:auto;margin-bottom:25px;">
-                    <div class="embed-responsive embed-responsive-16by9">
+
-                        <video id="video"></video>
+                    <div style="    margin: 0;
-                    </div>
+    padding: 0;
-                    <div style="    margin: 0;    padding: 0;    height: 35px; display:flex;">
+    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>
@@ -60,7 +81,7 @@
                     </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">
@@ -97,6 +118,9 @@
                     <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>
@@ -123,6 +147,15 @@
         </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/themes/standard/style.less

@@ -11,7 +11,7 @@
 
 body {
   margin: 0;
-  margin-top: 70px;
+  margin-top: 46px;
   /*background: @background-color;
   color:@main-front-color;*/
 }
@@ -71,11 +71,12 @@ span.input-group-btn.open > ul > li> a{
 .nav-header {
     font-weight: bold;
 }
-.scroll{
+.scroll {
     overflow-y: scroll;
-    height: ~"calc(100vh - 387px)"; 
+    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 )";
@@ -94,3 +95,19 @@ span.input-group-btn.open > ul > li> a{
 *{
     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;
+}

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);