1.5 c

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "cyb3r-youtube-downloader",
+  "name": "cyb3r-downloader",
-  "productName": "cyb3r-youtube-downloader",
+  "productName": "cyb3r-downloader",
   "version": "1.5.0",
-  "description": "Cyb3r Downloader",
+  "description": "Cyb3r_Downloader",
   "main": "src/main.js",
   "scripts": {
     "start": "electron-forge start",
@@ -30,16 +30,16 @@
       "electronPackagerConfig": {
         "packageManager": "npm",
         "win32metadata": {
-          "ProductName": "Cyb3r Downloader",
+          "ProductName": "Cyb3r_Downloader",
           "CompanyName": "Thee.moe"
         },
         "version-string": {
-          "ProductName": "Cyb3r Downloader",
+          "ProductName": "Cyb3r_Downloader",
           "CompanyName": "Thee.moe"
         }
       },
       "electronWinstallerConfig": {
-        "name": "Cyb3r Downloader",
+        "name": "Cyb3r_Downloader",
         "packageName": "Cyb3r_Downloader",
         "icon": "app.ico"
       },
@@ -50,8 +50,8 @@
         "name": "https://git.tooru.thee.moe/theenoro/electron-simple-youtube-downloader"
       },
       "windowsStoreConfig": {
-        "packageName": "Cyb3r Downloader",
+        "packageName": "Cyb3r_Downloader",
-        "name": "Cyb3r Downloader"
+        "name": "Cyb3r_Downloader"
       }
     }
   },

src/app/js/app.js

@@ -41,7 +41,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();
         }
@@ -61,7 +61,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"/>');
     });
@@ -110,7 +110,9 @@ $(function() {
                     <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 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', {
@@ -165,14 +167,17 @@ $(function() {
                                                                         height: 104px;
                                                                         background-size: 189px;
                                                                         background-position: 0px -18px;
-                                                                        "></div>
+                                                                        ">
+                                                                        <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>`
 

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/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 - 96px)}.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: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}

src/app/style/style.less

@@ -69,12 +69,11 @@ span.input-group-btn.open > ul > li> a{
 }
 
 .nav-header {
-
     font-weight: bold;
 }
 .scroll{
     overflow-y: scroll;
-    height: ~"calc( 100vh - 96px)";
+    height: ~"calc(100vh - 387px)"; 
 }
 
 .left-playlist{

src/app/view/layout.html

@@ -42,7 +42,23 @@
                     <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-6">
+            <div class="col-md-10">
+                <div style="max-width:380px;margin:auto;margin-bottom:25px;">
+                    <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-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">
                         <input id="business" type="file" style="display: none" />
@@ -98,25 +114,12 @@
                 </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>

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

@@ -2,10 +2,13 @@ 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: 'Open', click(){ main_window.open() }},
         /*{label: 'About',click() { console.log('item 1 clicked') }},
         {label: 'Item1', type: 'radio'},
         {type: 'separator'},
@@ -15,5 +18,9 @@ module.exports = ()=>{
     ])
     tray.setToolTip('Cyb3r Downloader.')
     tray.setContextMenu(contextMenu)
+
+    main_window.createWindow();
+    main_window.open();
+
     return tray;
 }

src/controller/windows.js/main.js

@@ -10,11 +10,13 @@ var win = {};
 win.win = null;
 
 ipcMain
-.on('winHide', (event, arg)=>{
+    .on('winHide', (event, arg) => {
-    win.win.hide();
+        console.log('minimize')
-})
+        win.win.minimize()
+        //win.win.hide()
+    })
 
-win.createWindow = ()=>{
+win.createWindow = () => {
     win.win = new BrowserWindow({
         width: 1010,
         height: 800,
@@ -29,11 +31,17 @@ win.createWindow = ()=>{
     win.win.on('closed', () => {
         //win.win = null;
     });
+
+
+
+    win.win.on('close', function(event) {
+
+    });
 }
-win.open = ()=>{
+win.open = () => {
-    win.win.show()
+    win.win.restore();
 }
-win.close = ()=>{
+win.close = () => {
     win.win.close();
 }
 module.exports = win;

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

@@ -13,7 +13,7 @@ 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')
+//const main_window = require('./controller/windows.js/main.js')
 
 let tray_win = null;
 
@@ -56,8 +56,8 @@ if (!fs.existsSync(global.dir+'/tmp/inst')) {
         .on('start-full', (event, arg)=>{
 
 
-            main_window.createWindow();
+            //main_window.createWindow();
-            main_window.open();
+            //main_window.open();
             tray_win = tray();
                 win.close();
 

src/themes/standard/style.less

@@ -69,12 +69,11 @@ span.input-group-btn.open > ul > li> a{
 }
 
 .nav-header {
-
     font-weight: bold;
 }
 .scroll{
     overflow-y: scroll;
-    height: ~"calc( 100vh - 96px)";
+    height: ~"calc(100vh - 387px)"; 
 }
 
 .left-playlist{