1.4.0 Alpha #002

src/app/js/app.js

@@ -23,7 +23,7 @@ $(function() {
     ipcRenderer.on('watchr_file', function(event, arg) {
         arg.file = encodeURI(arg.file)
         if (arg.type === "add") {
-            $('#watchr_files').append('<tr class="file" data-file="' + arg.file + '"><td>' + arg.file + '</td><td><button class="play-file btn btn-success" data-file="' + 'file://' + arg.file + '"><i class="fa fa-play-circle-o" aria-hidden="true"></i></button></td></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">' + arg.file + '</div></tr>')
         } else if (arg.type === "remove") {
             $('.file[data-file="' + arg.file + '"]').remove();
         }

src/app/js/player.js

@@ -0,0 +1,46 @@
+var video;
+$(function(){
+        video = document.getElementById('video');
+
+
+        // btn
+        var st_play  = '<i class="fa fa-play-circle-o" aria-hidden="true"></i>';
+        var st_pause = '<i class="fa fa-pause-circle-o" aria-hidden="true"></i>';
+
+        video.ontimeupdate = function(){
+          var percentage = ( video.currentTime / video.duration ) * 100;
+          $("#time span").css("width", percentage+"%");
+        };
+
+        $("#time").on("click", function(e){
+            var offset = $(this).offset();
+            var left = (e.pageX - offset.left);
+            var totalWidth = $("#time").width();
+            var percentage = ( left / totalWidth );
+            var vidTime = video.duration * percentage;
+            video.currentTime = vidTime;
+        })
+        $("#volume span").css('width',(100*video.volume)+'%')
+        $("#volume").on("click", function(e){
+            var offset = $(this).offset();
+            var left = (e.pageX - offset.left);
+            var totalWidth = $("#volume").width();
+            var percentage = ( left / totalWidth );
+            var volume = 1 * percentage;
+            video.volume = volume;
+            $("#volume span").css('width',(100*percentage)+'%')
+            console.log(volume)
+        })
+        
+
+
+        $('#play').click(function(){
+            if(video.paused){
+                video.play();
+                $('#play').html(st_pause)
+            }else{
+                video.pause();
+                $('#play').html(st_play)
+            }
+        })
+})

src/app/js/pot_main.js

@@ -1,57 +1,16 @@
 $(function() {
     const ipcRenderer = require('electron').ipcRenderer;
     ipcRenderer.send('pot_real_open', {x:"xx"});
-    var video = document.getElementById('video');
+
-    console.log('TEST')
+
+    $('#close').click(function () {
+        ipcRenderer.send('close_pot',{});
+    });
     ipcRenderer.on('pot_play',function(event,arg){
         var file = arg.file;
         video.setAttribute("src", file);
         video.play();
     })
-
-
-    // btn
-    var st_play  = '<i class="fa fa-play-circle-o" aria-hidden="true"></i>';
-    var st_pause = '<i class="fa fa-pause-circle-o" aria-hidden="true"></i>';
-
-    video.ontimeupdate = function(){
-      var percentage = ( video.currentTime / video.duration ) * 100;
-      $("#time span").css("width", percentage+"%");
-    };
-
-    $("#time").on("click", function(e){
-        var offset = $(this).offset();
-        var left = (e.pageX - offset.left);
-        var totalWidth = $("#time").width();
-        var percentage = ( left / totalWidth );
-        var vidTime = video.duration * percentage;
-        video.currentTime = vidTime;
-    })
-    $("#volume span").css('width',(100*video.volume)+'%')
-    $("#volume").on("click", function(e){
-        var offset = $(this).offset();
-        var left = (e.pageX - offset.left);
-        var totalWidth = $("#volume").width();
-        var percentage = ( left / totalWidth );
-        var volume = 1 * percentage;
-        video.volume = volume;
-        $("#volume span").css('width',(100*percentage)+'%')
-        console.log(volume)
-    })
-    $('#close').click(function () {
-        ipcRenderer.send('close_pot',{});
-    });
-
-
-    $('#play').click(function(){
-        if(video.paused){
-            video.play();
-            $('#play').html(st_pause)
-        }else{
-            video.pause();
-            $('#play').html(st_play)
-        }
-    })
     $('.navbar').on( "mouseleave",function () {
         $('.navbar').css('opacity',"0")
     });

src/app/style/player.css

@@ -0,0 +1,38 @@
+#time {
+    cursor: pointer;
+    height: 10px;
+    margin-bottom: 10px;
+    outline: thin solid #FFF;
+    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 #FFF;
+    overflow: hidden;
+    position: relative;
+    width: 200px;
+    vertical-align: -webkit-baseline-middle;
+    line-height: 1.42857143;
+    height: 9px;
+    display: inline-block;
+    top: 13px;
+}
+
+#time span, #volume span {
+    background-color: #FFF;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 10px;
+    width: 0px;
+}

src/app/style/style.css

@@ -1 +1 @@
-body{margin:0;margin-top:50px;background:#1d2247;color:#e01931}.btn-success{color:#e01931;background-color:#1d2247;border-color:#e01931;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:#1d2247!important;background-color:#e01931!important;border-color:#e01931!important;transition:all .3s}.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{text-decoration:none;color:#e01931;background-color:#1d2247}.dropdown-menu{background-color:#1d2247}span.input-group-btn.open>ul>li>a{background-image:none}.progress{background-image:none;background-color:#1d2247;box-shadow:inset 0 0 3px 0 #e01931}.progress-bar{background-image:none;background-color:#1d2247;box-shadow:inset 0 0 12px 0 #e01931;transition:.3s all}.media:first-child{margin-top:15px}.media{box-shadow:0 0 6px 1px #e01931}.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 #e01931;height:calc(100vh - 20vw - 30px)}
+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%}

src/app/style/style.less

@@ -5,8 +5,9 @@
 
 */
 
-@main-front-color: #E01931;
+@main-front-color   : #f8f8f8;
-@background-color: #1D2247;
+@background-color   : #111111;
+@background-2ndcolor: #232323;
 
 body {
   margin: 0;
@@ -74,3 +75,14 @@ span.input-group-btn.open > ul > li> a{
     box-shadow: 0px 0px 6px 1px @main-front-color;
     height: ~"calc(100vh - 20vw - 30px )";
 }
+.row-flex{
+    word-break: break-all;
+    width:100%;
+    display: flex;
+    .flex-btn{
+        width: 50px;
+    }
+    .cont{
+        width:100%;
+    }
+}

src/app/view/layout.html

@@ -10,7 +10,7 @@
     </script>
     <script src="./../libs/jquery/jquery-3.2.1.min.js"></script>
     <script src="./../libs/bootstrap/js/bootstrap.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" />
@@ -18,6 +18,7 @@
     <link rel="stylesheet" href="./../libs/font-awesome/css/font-awesome.min.css" />
     <link rel="stylesheet" href="./../style/progress.css" />
     <link rel="stylesheet" href="./../style/style.css" />
+    <link rel="stylesheet" href="./../style/player.css" />
 </head>
 
 <body>
@@ -65,18 +66,32 @@
                         </div>
                     </div>
                     <div role="tabpanel" class="tab-pane fade" id="player">
-                        <table class="table table-striped" id="watchr_files">
+                        <div class="row">
+                            <div class="col-md-12">
+                                <div id="watchr_files">
 
-                        </table>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
 
             </div>
             <div class="col-md-4">
                 <div class="embed-responsive embed-responsive-16by9">
-                  <video controls="true" id="video"></video>
+                    <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>
-                <button id="pot">POT</button>
                 <div class="left-playlist">
 
                 </div>

src/app/view/pot.html

@@ -10,6 +10,7 @@
     </script>
     <script src="./../libs/jquery/jquery-3.2.1.min.js"></script>
     <script src="./../libs/bootstrap/js/bootstrap.js"></script>
+    <script src="./../js/player.js"></script>
 
     <meta charset="utf-8">
     <title>Cyb3r Downloader - Player on Top</title>
@@ -18,6 +19,7 @@
     <link rel="stylesheet" href="./../libs/font-awesome/css/font-awesome.min.css" />
     <link rel="stylesheet" href="./../style/progress.css" />
     <link rel="stylesheet" href="./../style/style.css" />
+    <link rel="stylesheet" href="./../style/player.css" />
     <style>
         video {
             max-width: 100%;
@@ -38,43 +40,6 @@
             min-height: 35px;
             width:100%;
         }
-        #time
-        {
-          cursor: pointer;
-          height: 10px;
-          margin-bottom: 10px;
-          outline: thin solid #e01931;
-          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 #e01931;
-          overflow: hidden;
-          position: relative;
-          width: 200px;
-          vertical-align: -webkit-baseline-middle;
-          line-height: 1.42857143; height: 9px;
-          display:inline-block;
-          top: 13px;
-        }
-        #time span ,#volume span
-        {
-            background-color: #e01931;
-            position: absolute;
-            top: 0;
-            left: 0;
-            height: 10px;
-            width: 0px;
-        }
         body .navbar{
             opacity: 0;
             transition: .3s all;

src/controller/player_onTop.js

@@ -18,6 +18,18 @@ ipcMain
     console.log('CLOSE')
     pot.close(event);
 })
+.on('pot_run',(event,arg)=>{
+    pot_open_ev.sender.send('pot_play',arg);
+})
+
+.on('pot_real_open',(event,arg)=>{
+    console.log('POT EVENT SET')
+    pot_open_ev = event;
+})
+.on('open-pot',(event,arg)=>{
+
+    pot.open(event);
+})
 
 pot.isOpen = false;
 
@@ -28,7 +40,6 @@ pot.open = (e) => {
         win.close();
     }
     var x = new playerOnTop(e);
-    console.log('XX');
 }
 pot.close = ()=>{
     console.log('CLOSE')
@@ -42,7 +53,7 @@ class playerOnTop {
         pot.isOpen = true;
         this.win = new BrowserWindow({
             width: 320,
-            height: 500,
+            height: 180,
             show: false,
             frame: false,
             alwaysOnTop: true,
@@ -53,7 +64,6 @@ class playerOnTop {
         win.loadURL(`file://${global.dir}/app/view/pot.html`)
         win.once('ready-to-show', () => {
             win.show();
-            console.log('XX');
         })
         win.on('resize', function () {
           setTimeout(function () {
@@ -65,7 +75,6 @@ class playerOnTop {
             pot.isOpen = false;
             e.sender.send('play-in-Window',{do :false});
             win = null;
-            console.log('XX');
         });
     }
 }

src/controller/youtube-dl.js

@@ -13,19 +13,6 @@ var fol = null;
 
 var pot_open_ev = null;
 ipcMain
-.on('pot_run',(event,arg)=>{
-    pot_open_ev.sender.send('pot_play',arg);
-})
-
-.on('pot_real_open',(event,arg)=>{
-    console.log('POT EVENT SET')
-    pot_open_ev = event;
-})
-ipcMain
-.on('open-pot',(event,arg)=>{
-
-    pot.open(event);
-})
 .on('start-download', (event, arg)=>{
   path = orig_path
   var download = new yt_dl(arg.url,arg.id);
@@ -50,7 +37,7 @@ ipcMain
         download.download();
     });
 })
-ipcMain.on('setPath', function(event, arg) {
+.on('setPath', function(event, arg) {
   path = arg.path;
   orig_path = arg.path;
   if(fol !== null){

src/themes/standard/style.less

@@ -5,8 +5,9 @@
 
 */
 
-@main-front-color: #E01931;
+@main-front-color   : #f8f8f8;
-@background-color: #1D2247;
+@background-color   : #111111;
+@background-2ndcolor: #232323;
 
 body {
   margin: 0;
@@ -74,3 +75,14 @@ span.input-group-btn.open > ul > li> a{
     box-shadow: 0px 0px 6px 1px @main-front-color;
     height: ~"calc(100vh - 20vw - 30px )";
 }
+.row-flex{
+    word-break: break-all;
+    width:100%;
+    display: flex;
+    .flex-btn{
+        width: 50px;
+    }
+    .cont{
+        width:100%;
+    }
+}