From 44042f5d5e2df085733d93cb512f70a01ff52371 Mon Sep 17 00:00:00 2001
From: Theenoro <theenoro@broarts.eu>
Date: Mon, 21 Aug 2017 23:54:57 +0200
Subject: [PATCH 1/4] 1.3.2.1

---
 src/controller/windows.js/browser.js | 35 ++++++++++++++++++++++++++++
 src/index.js                         |  5 ++++
 2 files changed, 40 insertions(+)
 create mode 100644 src/controller/windows.js/browser.js

diff --git a/src/controller/windows.js/browser.js b/src/controller/windows.js/browser.js
new file mode 100644
index 0000000..2be50c7
--- /dev/null
+++ b/src/controller/windows.js/browser.js
@@ -0,0 +1,35 @@
+
+
+const {
+    BrowserWindow,
+    session
+}         = require('electron');
+
+class browser {
+    constructor(url){
+        console.log("TEST")
+        this.window = new BrowserWindow({
+            width: 500,
+            height: 500,
+            show: true,
+            frame: true,
+            icon: global.dir + '/app.ico'
+        })
+        setInterval(function(){
+            session.defaultSession.cookies.get({url:'http://crunchyroll.com'}, (error, cookies) => {
+              console.log(error, cookies)
+            })
+        },3000)
+        var window = this.window
+        window.loadURL(url)
+        window.once('ready-to-show', () => {
+
+        })
+
+        this.window.on('closed', () => {
+          window = null;
+        });
+    }
+}
+
+module.exports = browser;
diff --git a/src/index.js b/src/index.js
index 5ee1289..1361122 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,11 +10,15 @@ const {
 const fs  = require('fs');
 const yt_dl = require('./controller/youtube-dl')
 const dl   = require('./controller/download');
+const browser = require('./controller/windows.js/browser');
+
+
 
 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,
@@ -74,6 +78,7 @@ if (!fs.existsSync(global.dir+'/tmp/inst')) {
                 icon: __dirname + '/app.ico'
             })
             win.close();
+            var z = new browser('http://www.crunchyroll.com/');
             win2.loadURL(`file://${__dirname}/app/view/layout.html`)
             win = win2;
         });

From acab4b1908d6ee7f5f6ab852c652d7116e6881db Mon Sep 17 00:00:00 2001
From: Theenoro <theenoro@broarts.eu>
Date: Wed, 23 Aug 2017 00:20:53 +0200
Subject: [PATCH 2/4] 1.3.2.2

Offline watch
---
 src/app/js/app.js                    | 115 ++++++++++++++++-----------
 src/controller/crunchyroll.js        |  34 ++++++++
 src/controller/windows.js/browser.js |   5 +-
 src/controller/youtube-dl.js         |  12 +--
 src/controller/youtube-dl.routine.js |  31 ++++++++
 5 files changed, 142 insertions(+), 55 deletions(-)
 create mode 100644 src/controller/crunchyroll.js
 create mode 100644 src/controller/youtube-dl.routine.js

diff --git a/src/app/js/app.js b/src/app/js/app.js
index 686f356..61d458c 100644
--- a/src/app/js/app.js
+++ b/src/app/js/app.js
@@ -1,68 +1,93 @@
-$(function(){
+$(function() {
     var download_progress = $('#download-progress');
     var out = $('#output');
     const ipcRenderer = require('electron').ipcRenderer;
     const request = require('request');
-    const {dialog} = require('electron').remote;
+    const {
+        dialog
+    } = require('electron').remote;
 
     var cache = {};
     var path = "";
     ipcRenderer.on('download-progress', function(event, arg) {
-      console.log(arg); // prints "pong"
-      $('#download-progress-'+arg.id).css("width",arg.percent);
-      $('#download-progress-'+arg.id).html(arg.percent);
+        console.log(arg); // prints "pong"
+        $('#download-progress-' + arg.id).css("width", arg.percent);
+        $('#download-progress-' + arg.id).html(arg.percent);
     });
     ipcRenderer.on('process-fin', function(event, arg) {
-      console.log(arg); // prints "pong"
-      $('#download-progress-'+arg.id).css("width",arg.percent);
-      $('#download-progress-'+arg.id).html("CONVERTED");
+        console.log(arg); // prints "pong"
+        $('#download-progress-' + arg.id).css("width", arg.percent);
+        $('#download-progress-' + arg.id).html("CONVERTED");
     });
     ipcRenderer.on('file', function(event, arg) {
-      console.log(arg); // prints "pong"
-      $('#body-'+arg.id).append('<audio src="file://'+path+'/'+cache[arg.id]+'.mp3" controls="true"/>');
+        console.log(arg); // prints "pong"
+        $('#body-' + arg.id).append('<audio src="file://' + path + '/' + cache[arg.id] + '.mp3" controls="true"/>');
     });
     document.getElementById('party').addEventListener('click', _ => {
-            path = dialog.showOpenDialog({
-                properties: ['openDirectory']
-            })[0];
-            console.log(path)
-            ipcRenderer.send('setPath', {path:path});
+        path = dialog.showOpenDialog({
+            properties: ['openDirectory']
+        })[0];
+        console.log(path)
+        ipcRenderer.send('setPath', {
+            path: path
+        });
     })
-    $('body').delegate('.format','click',function(e){
-        ipcRenderer.send('set-format', {format:e.currentTarget.dataset.format});
+    $('body').delegate('.format', 'click', function(e) {
+        ipcRenderer.send('set-format', {
+            format: e.currentTarget.dataset.format
+        });
         console.log(e.currentTarget.dataset.format);
     })
-    $('#start-download').click(function(){
-        var video_id = $('#url').val().split('v=')[1];
-        var ampersandPosition = video_id.indexOf('&');
-        if(ampersandPosition != -1) {
-          video_id = video_id.substring(0, ampersandPosition);
-        }
-        var playlist_id = $('#url').val().split('list=')[1];
-        if(typeof playlist_id !== 'undefined'){
-            var playlist_idPOS = playlist_id.indexOf('&');
-            if(playlist_idPOS != -1) {
-              playlist_id = playlist_id.substring(0, playlist_idPOS);
+    $('#start-download').click(function() {
+        var url = $('#url').val();
+
+        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></div>').prependTo('#output');
+            ipcRenderer.send('start-download', {
+                url: $('#url').val(),
+                id: video_id
+            });
+        } else {
+
+            var video_id = $('#url').val().split('v=')[1];
+            var ampersandPosition = video_id.indexOf('&');
+            if (ampersandPosition != -1) {
+                video_id = video_id.substring(0, ampersandPosition);
             }
+            var playlist_id = $('#url').val().split('list=')[1];
+            if (typeof playlist_id !== 'undefined') {
+                var playlist_idPOS = playlist_id.indexOf('&');
+                if (playlist_idPOS != -1) {
+                    playlist_id = playlist_id.substring(0, playlist_idPOS);
+                }
+
+                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></div>').prependTo('#output');
+                        cache[video_id] = YT.title;
+                        ipcRenderer.send('start-download-pl', {
+                            url: $('#url').val(),
+                            id: video_id,
+                            folder: YT.author_name + '-' + YT.title
+                        });
+                    })
+            } else {
+                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></div>').prependTo('#output');
+                        cache[video_id] = YT.title;
+                        ipcRenderer.send('start-download', {
+                            url: $('#url').val(),
+                            id: video_id
+                        });
+                    })
+            }
+            console.log(playlist_id + ' id:' + video_id)
 
-          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></div>').prependTo('#output');
-                cache[video_id] = YT.title;
-                ipcRenderer.send('start-download-pl', {url:$('#url').val(),id:video_id,folder:YT.author_name+'-'+YT.title});
-            })
-        }else{
-            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></div>').prependTo('#output');
-                  cache[video_id] = YT.title;
-                  ipcRenderer.send('start-download', {url:$('#url').val(),id:video_id});
-              })
         }
-        console.log(playlist_id+' id:'+video_id)
-
 
     })
 })
diff --git a/src/controller/crunchyroll.js b/src/controller/crunchyroll.js
new file mode 100644
index 0000000..c8e071d
--- /dev/null
+++ b/src/controller/crunchyroll.js
@@ -0,0 +1,34 @@
+/*
+    JUST TO WATCH OFFLINE
+
+
+*/
+const fs = require('fs');
+
+var crunch = {};
+
+crunch.session_save = (session)=>{
+    var net = `# Netscape HTTP Cookie File\n
+    # http://curl.haxx.se/rfc/cookie_spec.html\n
+    # This is a generated file!  Do not edit.\n\n`;
+    var old_exp = 0;
+    for(var i = 0;i<session.length;i++){
+
+        if(typeof session[i].expirationDate == 'undefined'){
+            session[i].expirationDate = old_exp;
+        }
+        if(session[i].expirationDate>old_exp){
+            old_exp = session[i].expirationDate;
+        }
+        net += session[i].domain+'	'+session[i].httpOnly.toString().toUpperCase()+'	'+session[i].path+'	'+session[i].secure.toString().toUpperCase()+'	'+Math.ceil(session[i].expirationDate)+'	'+session[i].name+'	'+session[i].value+'\n';
+    }
+    console.log(net);
+    fs.writeFile(global.dir+"/tmp/c", net, function(err) {
+        if(err) {
+            return console.log(err);
+        }
+        console.log("T!");
+    });
+}
+
+module.exports = crunch;
diff --git a/src/controller/windows.js/browser.js b/src/controller/windows.js/browser.js
index 2be50c7..68776c9 100644
--- a/src/controller/windows.js/browser.js
+++ b/src/controller/windows.js/browser.js
@@ -5,6 +5,8 @@ const {
     session
 }         = require('electron');
 
+const crunch = require('./../crunchyroll')
+
 class browser {
     constructor(url){
         console.log("TEST")
@@ -17,7 +19,8 @@ class browser {
         })
         setInterval(function(){
             session.defaultSession.cookies.get({url:'http://crunchyroll.com'}, (error, cookies) => {
-              console.log(error, cookies)
+              //console.log(error, cookies)
+              crunch.session_save(cookies);
             })
         },3000)
         var window = this.window
diff --git a/src/controller/youtube-dl.js b/src/controller/youtube-dl.js
index 7f915e4..b412ed1 100644
--- a/src/controller/youtube-dl.js
+++ b/src/controller/youtube-dl.js
@@ -1,5 +1,6 @@
 const { spawn } = require('child_process');
 const ipcMain = require('electron').ipcMain;
+const dl_routine = require('./youtube-dl.routine')
 console.log(global.dir);
 
 var orig_path = "";
@@ -54,16 +55,9 @@ var yt_dl = class{
         var log = [];
         var me = this;
         var ls;
-        switch (format) {
-            case "mp3":
-                ls = spawn(global.dir+'/lib/youtube-dl', ['-x','--audio-format','mp3','-i',this.url,'-o',path+'/%(title)s.%(ext)s']);
-                break;
-            case "mp4":
-                ls = spawn(global.dir+'/lib/youtube-dl', ['-f','bestvideo[ext=mp4]+bestaudio[ext=m4a]/mp4',this.url,'-o',path+'/%(title)s.%(ext)s']);
-                break;
-            default:
 
-        }
+        var m = dl_routine(path,this.url,format);
+        ls = spawn(m[0],m[1]);
         if(path == ''){
             //ls = spawn(global.dir+'/lib/youtube-dl', ['-x','--audio-format','mp3','-i',this.url]);
         }else{
diff --git a/src/controller/youtube-dl.routine.js b/src/controller/youtube-dl.routine.js
new file mode 100644
index 0000000..e549446
--- /dev/null
+++ b/src/controller/youtube-dl.routine.js
@@ -0,0 +1,31 @@
+
+
+
+module.exports = (path,url,format)=>{
+    var command = global.dir+'/lib/youtube-dl';
+    var param   = [];
+    console.log(url);
+    if(url.match('youtube')){
+        console.log('youtube')
+        switch (format) {
+            case "mp3":
+                param = ['-x','--audio-format','mp3','-i',url,'-o',path+'/%(title)s.%(ext)s'];
+                break;
+            case "mp4":
+                param = ['-f','bestvideo[ext=mp4]+bestaudio[ext=m4a]/mp4',url,'-o',path+'/%(title)s.%(ext)s'];
+                break;
+            default:
+
+        }
+    }
+    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'];
+    }
+
+
+    return [command,param];
+
+
+
+}

From d7958e1594a094533c89ff8eb1a691ea46348cd4 Mon Sep 17 00:00:00 2001
From: Theenoro <theenoro@broarts.eu>
Date: Mon, 28 Aug 2017 03:50:31 +0200
Subject: [PATCH 3/4] 1.4.0 Alpha

---
 README.md                            |   3 +
 package.json                         |   5 +-
 src/app/js/app.js                    |  47 +++++++++--
 src/app/js/pot_main.js               |  66 ++++++++++++++++
 src/app/style/style.css              |  60 +-------------
 src/app/style/style.less             |  76 ++++++++++++++++++
 src/app/view/layout.html             |  78 ++++++++++++-------
 src/app/view/pot.html                | 112 +++++++++++++++++++++++++++
 src/controller/crunchyroll.js        |   8 +-
 src/controller/player_onTop.js       |  73 +++++++++++++++++
 src/controller/watchr.js             |  61 +++++++++++++++
 src/controller/youtube-dl.js         |  40 +++++++++-
 src/controller/youtube-dl.routine.js |   2 +-
 src/helper/string.js                 |  15 ++++
 src/index.js                         |   2 +-
 src/themes/standard/style.less       |  76 ++++++++++++++++++
 src/tmp/c                            |  15 ++++
 17 files changed, 637 insertions(+), 102 deletions(-)
 create mode 100644 src/app/js/pot_main.js
 create mode 100644 src/app/style/style.less
 create mode 100644 src/app/view/pot.html
 create mode 100644 src/controller/player_onTop.js
 create mode 100644 src/controller/watchr.js
 create mode 100644 src/helper/string.js
 create mode 100644 src/themes/standard/style.less
 create mode 100644 src/tmp/c

diff --git a/README.md b/README.md
index e8c7393..8b5d9ac 100644
--- a/README.md
+++ b/README.md
@@ -3,6 +3,9 @@
 ![./current-preview.PNG](./current-preview.PNG)
 
 
+# v 1.4.0 Alpha
+
+Preview [Video](https://cl.thee.moe/index.php/s/T8FEaFFxyhlxIj6)
 
 # Download 1.3.0
 
diff --git a/package.json b/package.json
index cd7209a..7e95600 100644
--- a/package.json
+++ b/package.json
@@ -49,9 +49,12 @@
   "dependencies": {
     "electron": "^1.6.11",
     "electron-compile": "^6.4.1",
+    "fs": "0.0.1-security",
     "mkdirp": "^0.5.1",
+    "path": "^0.12.7",
     "request": "^2.81.0",
-    "unzip": "^0.1.11"
+    "unzip": "^0.1.11",
+    "watchr": "^3.0.1"
   },
   "devDependencies": {
     "babel-plugin-transform-async-to-generator": "^6.24.1",
diff --git a/src/app/js/app.js b/src/app/js/app.js
index 61d458c..81d4f7d 100644
--- a/src/app/js/app.js
+++ b/src/app/js/app.js
@@ -1,14 +1,34 @@
 $(function() {
     var download_progress = $('#download-progress');
+    var format = null;
     var out = $('#output');
+    var video = document.getElementById('video');
     const ipcRenderer = require('electron').ipcRenderer;
     const request = require('request');
+    const helper = require('./../../helper/string');
+
     const {
         dialog
     } = require('electron').remote;
 
     var cache = {};
     var path = "";
+
+    var pot = false;
+
+    ipcRenderer.send('watchr_event', {});
+    ipcRenderer.on('play-in-Window',function(event,arg){
+        pot = arg.do;
+    })
+    ipcRenderer.on('watchr_file', function(event, arg) {
+        arg.file = encodeURI(arg.file)
+        if (arg.type === "add") {
+            $('#watchr_files').append('<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>')
+        } else if (arg.type === "remove") {
+            $('.file[data-file="' + arg.file + '"]').remove();
+        }
+        $('#download-progress-' + arg.id).html(arg.percent);
+    })
     ipcRenderer.on('download-progress', function(event, arg) {
         console.log(arg); // prints "pong"
         $('#download-progress-' + arg.id).css("width", arg.percent);
@@ -20,8 +40,12 @@ $(function() {
         $('#download-progress-' + arg.id).html("CONVERTED");
     });
     ipcRenderer.on('file', function(event, arg) {
+        console.log('DOWNLOADED')
         console.log(arg); // prints "pong"
-        $('#body-' + arg.id).append('<audio src="file://' + path + '/' + cache[arg.id] + '.mp3" controls="true"/>');
+
+        $('.media-out-' + arg.id).html('<button class="play-file" data-file="' + 'file://' + path + '/' + encodeURI(cache[arg.id]) + '.' + format + '">Play</button>');
+        //var video = document.getElementById('video');
+        //$('#body-' + arg.id).append('<audio src="file://' + path + '/' + cache[arg.id] + '.'+format+'" controls="true"/>');
     });
     document.getElementById('party').addEventListener('click', _ => {
         path = dialog.showOpenDialog({
@@ -32,7 +56,20 @@ $(function() {
             path: path
         });
     })
+    $('#pot').click(function(){
+        ipcRenderer.send('open-pot', {
+        });
+    });
+    $('body').delegate('.play-file', 'click', function(e) {
+        if(pot === false){
+            video.setAttribute("src", e.currentTarget.dataset.file);
+            video.play();
+        }else{
+            ipcRenderer.send('pot_run', {file:e.currentTarget.dataset.file});
+        }
+    })
     $('body').delegate('.format', 'click', function(e) {
+        format = e.currentTarget.dataset.format;
         ipcRenderer.send('set-format', {
             format: e.currentTarget.dataset.format
         });
@@ -43,7 +80,7 @@ $(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></div>').prependTo('#output');
+            $('<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');
             ipcRenderer.send('start-download', {
                 url: $('#url').val(),
                 id: video_id
@@ -65,19 +102,19 @@ $(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></div>').prependTo('#output');
+                        $('<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');
                         cache[video_id] = YT.title;
                         ipcRenderer.send('start-download-pl', {
                             url: $('#url').val(),
                             id: video_id,
-                            folder: YT.author_name + '-' + YT.title
+                            folder: YT.author_name + '-' + YT.title.replace(/\|/g, "_")
                         });
                     })
             } else {
                 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></div>').prependTo('#output');
+                        $('<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');
                         cache[video_id] = YT.title;
                         ipcRenderer.send('start-download', {
                             url: $('#url').val(),
diff --git a/src/app/js/pot_main.js b/src/app/js/pot_main.js
new file mode 100644
index 0000000..95af97f
--- /dev/null
+++ b/src/app/js/pot_main.js
@@ -0,0 +1,66 @@
+$(function() {
+    const ipcRenderer = require('electron').ipcRenderer;
+    ipcRenderer.send('pot_real_open', {x:"xx"});
+    var video = document.getElementById('video');
+    console.log('TEST')
+    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")
+    });
+    $('.navbar').on( "mouseenter",function () {
+        $('.navbar').css('opacity',"1")
+    });
+    $('body').on( "mouseenter",function () {
+        $('.navbar').css('opacity',"1")
+    });
+
+
+})
diff --git a/src/app/style/style.css b/src/app/style/style.css
index 0e14107..994a629 100644
--- a/src/app/style/style.css
+++ b/src/app/style/style.css
@@ -1,59 +1 @@
-body {
-  margin: 0;
-  background: #131313;
-  color:#e9188d;
-}
-.btn-success {
-    color: #e9188d;
-    background-color: #131313;
-    border-color: #e9188d;
-    transition: all .3s;
-}
-.btn-success:hover ,.btn-success:active,.btn-success:focus,.dropdown-toggle:focus,.dropdown-toggle:active,.btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success {
-    color: #131313 !important;
-    background-color: #e9188d !important;
-    border-color: #e9188d !important;
-    transition: all .3s;
-}
-.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
-    text-decoration: none;
-    color: rgb(233, 24, 141);
-    background-color: #131313;
-}
-.dropdown-menu{
-    background-color: #131313;
-}
-span.input-group-btn.open > ul > li> a{
-    background-image:none;
-}
-.progress{
-    background-image:none;
-    background-color: #131313;
-    box-shadow: inset 0px 0px 3px 0px #da1985;
-}
-.progress-bar{
-    background-image:none;
-    background-color: #131313;
-    box-shadow: inset 0px 0px 12px 0px #da1985;
-}
-.media:first-child {
-    margin-top: 15px;
-}
-.media {
-    box-shadow: 0px 0px 6px 1px #ff008e;
-}
-.sidebar-nav {
-    padding: 10px;
-}
-.nav.nav-list a {
-    padding: 5px 10px;
-}
-
-.nav-header {
-
-    font-weight: bold;
-}
-.scroll{
-    overflow-y: scroll;
-    height: calc( 100vh - 46px);
-}
+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)}
\ No newline at end of file
diff --git a/src/app/style/style.less b/src/app/style/style.less
new file mode 100644
index 0000000..02ad122
--- /dev/null
+++ b/src/app/style/style.less
@@ -0,0 +1,76 @@
+/*
+
+
+
+
+*/
+
+@main-front-color: #E01931;
+@background-color: #1D2247;
+
+body {
+  margin: 0;
+  margin-top: 50px;
+  background: @background-color;
+  color:@main-front-color;
+}
+.btn-success {
+    color: @main-front-color;
+    background-color: @background-color;
+    border-color: @main-front-color;
+    transition: all .3s;
+}
+.btn-success:hover ,.btn-success:active,.btn-success:focus,.dropdown-toggle:focus,.dropdown-toggle:active,.btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success {
+    color: @background-color !important;
+    background-color: @main-front-color !important;
+    border-color: @main-front-color !important;
+    transition: all .3s;
+}
+.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
+    text-decoration: none;
+    color: @main-front-color;
+    background-color: @background-color;
+}
+.dropdown-menu{
+    background-color: @background-color;
+}
+span.input-group-btn.open > ul > li> a{
+    background-image:none;
+}
+.progress{
+    background-image:none;
+    background-color: @background-color;
+    box-shadow: inset 0px 0px 3px 0px @main-front-color;
+}
+.progress-bar{
+    background-image:none;
+    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;
+}
+.sidebar-nav {
+    padding: 10px;
+}
+.nav.nav-list a {
+    padding: 5px 10px;
+}
+
+.nav-header {
+
+    font-weight: bold;
+}
+.scroll{
+    overflow-y: scroll;
+    height: ~"calc( 100vh - 96px)";
+}
+
+.left-playlist{
+    box-shadow: 0px 0px 6px 1px @main-front-color;
+    height: ~"calc(100vh - 20vw - 30px )";
+}
diff --git a/src/app/view/layout.html b/src/app/view/layout.html
index 4174117..0db1484 100644
--- a/src/app/view/layout.html
+++ b/src/app/view/layout.html
@@ -25,43 +25,61 @@
         <div class="row">
             <div class="col-md-2">
                 <div class="sidebar-nav">
-                  <ul class="nav nav-list">
-                    <li class="nav-header">Navigation</li>
-                    <li class="active"><a href=""><i class="fa fa-download" aria-hidden="true"></i> Downloader</a></li>
-                    <li><a href="#"><i class="fa fa-play-circle-o" aria-hidden="true"></i> Player</a></li>
-                  </ul>
+                    <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>
             </div>
-            <dic class="col-md-10">
-                <input id="business" type="file" style="display: none" />
-                <div class="row">
-                    <div class="col-md-12">
-                        <div class="input-group input-group-lg">
-                            <span class="input-group-btn">
-                              <button id="party" class="very-sweet-looking btn btn-success btn-sm">Select Folder</button>
-                            </span>
-                            <input type="text" class="form-control input-sm" maxlength="128" id="url" placeholder="YT-Url" />
-                            <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>
-                            </span>
-                            <span class="input-group-btn">
-                              <button type="button" id="start-download" class="btn btn-success btn-sm">Download</button>
-                            </span>
+            <div class="col-md-6">
+                <div class="tab-content">
+                    <div role="tabpanel" class="tab-pane fade in 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">
+                                    <span class="input-group-btn">
+                                      <button id="party" class="very-sweet-looking btn btn-success btn-sm">Select Folder</button>
+                                    </span>
+                                    <input type="text" class="form-control input-sm" maxlength="128" id="url" placeholder="YT-Url" />
+                                    <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>
+                                    </span>
+                                    <span class="input-group-btn">
+                                      <button type="button" id="start-download" class="btn btn-success btn-sm">Download</button>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="row scroll">
+                            <div class="col-md-12" id="output">
+
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="row scroll">
-                    <div class="col-md-12" id="output">
+                    <div role="tabpanel" class="tab-pane fade" id="player">
+                        <table class="table table-striped" id="watchr_files">
 
+                        </table>
                     </div>
                 </div>
+
+            </div>
+            <div class="col-md-4">
+                <div class="embed-responsive embed-responsive-16by9">
+                  <video controls="true" id="video"></video>
+                </div>
+                <button id="pot">POT</button>
+                <div class="left-playlist">
+
+                </div>
             </div>
         </div>
     </div>
diff --git a/src/app/view/pot.html b/src/app/view/pot.html
new file mode 100644
index 0000000..a60124c
--- /dev/null
+++ b/src/app/view/pot.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <script>
+        if (typeof module === 'object') {
+            window.module = module;
+            module = undefined;
+        }
+    </script>
+    <script src="./../libs/jquery/jquery-3.2.1.min.js"></script>
+    <script src="./../libs/bootstrap/js/bootstrap.js"></script>
+
+    <meta charset="utf-8">
+    <title>Cyb3r Downloader - Player on Top</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/font-awesome/css/font-awesome.min.css" />
+    <link rel="stylesheet" href="./../style/progress.css" />
+    <link rel="stylesheet" href="./../style/style.css" />
+    <style>
+        video {
+            max-width: 100%;
+            width:100%;
+            max-height: 100%;
+        }
+        body{
+            overflow:hidden;
+        }
+        body > nav > div > button {
+            margin: 0;
+            background-color: transparent !important;
+        }
+        .navbar{
+            padding: 0;
+            margin: 0;
+            height: 35px;
+            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;
+            position: fixed;
+        }
+        body:hover .navbar{
+            opacity: 1;
+            transition: .3s all;
+            background-color: rgba(51, 51, 51, 0.64);
+            box-shadow: 5px 0px 6px 6px rgba(51, 51, 51, 0.64);
+        }
+    </style>
+</head>
+
+<body style="margin:0">
+    <nav class="navbar navbar-static-top">
+        <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" style="-webkit-app-region: drag;margin: 0;"><i class="fa fa-arrows" aria-hidden="true"></i></button>
+            <button class="btn navbar-btn btn-success" id="close" style="margin:0;"><i class="fa fa-window-close-o" aria-hidden="true"></i></button>
+        </div>
+    </nav>
+
+    <video id="video"></video>
+    <script src="./../js/pot_main.js"></script>
+</body>
+
+</html>
diff --git a/src/controller/crunchyroll.js b/src/controller/crunchyroll.js
index c8e071d..a47296e 100644
--- a/src/controller/crunchyroll.js
+++ b/src/controller/crunchyroll.js
@@ -22,13 +22,13 @@ crunch.session_save = (session)=>{
         }
         net += session[i].domain+'	'+session[i].httpOnly.toString().toUpperCase()+'	'+session[i].path+'	'+session[i].secure.toString().toUpperCase()+'	'+Math.ceil(session[i].expirationDate)+'	'+session[i].name+'	'+session[i].value+'\n';
     }
-    console.log(net);
-    fs.writeFile(global.dir+"/tmp/c", net, function(err) {
+    //console.log(net);
+    /*fs.writeFile(global.dir+"/tmp/c", net, function(err) {
         if(err) {
             return console.log(err);
         }
-        console.log("T!");
-    });
+        //console.log("T!");
+    });*/
 }
 
 module.exports = crunch;
diff --git a/src/controller/player_onTop.js b/src/controller/player_onTop.js
new file mode 100644
index 0000000..ba45e28
--- /dev/null
+++ b/src/controller/player_onTop.js
@@ -0,0 +1,73 @@
+const {
+    app,
+    BrowserWindow,
+    Menu,
+    dialog,
+    ipcMain
+} = require('electron');
+
+//alwaysOnTop
+
+var win = null;
+
+var pot = {};
+var s = null;
+
+ipcMain
+.on('close_pot',(event,arg)=>{
+    console.log('CLOSE')
+    pot.close(event);
+})
+
+pot.isOpen = false;
+
+pot.open = (e) => {
+    s = e;
+    if (win !== null) {
+        e.sender.send('play-in-Window',{do :false});
+        win.close();
+    }
+    var x = new playerOnTop(e);
+    console.log('XX');
+}
+pot.close = ()=>{
+    console.log('CLOSE')
+    s.sender.send('play-in-Window',{do :false});
+    win.close();
+}
+
+
+class playerOnTop {
+    constructor(e) {
+        pot.isOpen = true;
+        this.win = new BrowserWindow({
+            width: 320,
+            height: 500,
+            show: false,
+            frame: false,
+            alwaysOnTop: true,
+            icon: global.dir + '/app.ico'
+        })
+        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', () => {
+            win.show();
+            console.log('XX');
+        })
+        win.on('resize', function () {
+          setTimeout(function () {
+            var size = win.getSize();
+            win.setSize(size[0], parseInt(size[0] * 9 / 16));
+          }, 0);
+        });
+        win.on('closed', () => {
+            pot.isOpen = false;
+            e.sender.send('play-in-Window',{do :false});
+            win = null;
+            console.log('XX');
+        });
+    }
+}
+
+module.exports = pot;
diff --git a/src/controller/watchr.js b/src/controller/watchr.js
new file mode 100644
index 0000000..4c08ca5
--- /dev/null
+++ b/src/controller/watchr.js
@@ -0,0 +1,61 @@
+const watchr  = require('watchr');
+const fs      = require('fs')
+const path    = require('path')
+const ipcMain = require('electron').ipcMain;
+
+var watch_event = null;
+
+ipcMain
+.on('watchr_event', (event, arg)=>{
+  watch_event = event
+})
+
+class folderWatchr {
+    constructor(folder) {
+        this.folder = folder;
+        this.files = [];
+        var files = this.files;
+
+        fs.readdirSync(this.folder).forEach(file => {
+            files.push(folder + '/' + file);
+
+        });
+        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]});
+        }
+
+        function listener(changeType, fullPath, currentStat, previousStat) {
+            console.log(changeType);
+            fullPath = fullPath.replace(/\\/g, "/");
+            switch (changeType) {
+                case 'update':
+
+                    break;
+                case 'create':
+
+                    console.log('the file', fullPath, 'was created', currentStat)
+                    files.push(fullPath);
+                    watch_event.sender.send('watchr_file',{type:"add",file:fullPath});
+                    break;
+                case 'delete':
+                    watch_event.sender.send('watchr_file',{type:"remove",file:fullPath});
+                    files.splice(files.indexOf(fullPath), 1);
+                    break;
+            }
+        }
+
+        function next(err) {
+            if (err) return console.log('watch failed on', path, 'with error', err);
+            console.log('watch successful on', path);
+        }
+
+        // Watch the path with the change listener and completion callback
+        this.stalker = watchr.open(this.folder , listener, next);
+    }
+    destroy(){
+        this.stalker.close()
+    }
+}
+
+module.exports = folderWatchr;
diff --git a/src/controller/youtube-dl.js b/src/controller/youtube-dl.js
index b412ed1..df53a13 100644
--- a/src/controller/youtube-dl.js
+++ b/src/controller/youtube-dl.js
@@ -1,13 +1,31 @@
 const { spawn } = require('child_process');
 const ipcMain = require('electron').ipcMain;
 const dl_routine = require('./youtube-dl.routine')
+
+const pot = require('./player_onTop')
+const folderWatchr = require('./watchr')
 console.log(global.dir);
 
 var orig_path = "";
 var path = "";
 var format = "mp3";
+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);
@@ -35,6 +53,10 @@ ipcMain
 ipcMain.on('setPath', function(event, arg) {
   path = arg.path;
   orig_path = arg.path;
+  if(fol !== null){
+      fol.destroy()
+  }
+  fol = new folderWatchr(path);
   console.log('SET Path: '+path)
 });
 
@@ -79,7 +101,23 @@ var yt_dl = class{
                       me.lwrite.sender.send('download-progress',{percent :me.percent,id:me.id});
                       break;
                   default:
-
+              }
+              var m = z.length;
+              for(var i = 0;i<m;i++){
+                  if(z[i] === '[ffmpeg]'){
+                      if(z[i+1] === 'Merging'){
+                          var file = "";
+                          for(var x = i+4;x<m;x++){
+                              console.log(z[x])
+                              if(z[x] === 'has' && z[x+1] === "already" && z[x+2] === "been" && z[x+3] === 'downloaded'){
+                                  break;
+                              }
+                              file = z[x];
+                          }
+                          me.lwrite.sender.send('file',{id:me.id,file:file});
+                          break;
+                      }
+                  }
               }
           }catch(e){
               console.log(e);
diff --git a/src/controller/youtube-dl.routine.js b/src/controller/youtube-dl.routine.js
index e549446..244d155 100644
--- a/src/controller/youtube-dl.routine.js
+++ b/src/controller/youtube-dl.routine.js
@@ -12,7 +12,7 @@ module.exports = (path,url,format)=>{
                 param = ['-x','--audio-format','mp3','-i',url,'-o',path+'/%(title)s.%(ext)s'];
                 break;
             case "mp4":
-                param = ['-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)s.%(ext)s'];
                 break;
             default:
 
diff --git a/src/helper/string.js b/src/helper/string.js
new file mode 100644
index 0000000..82d7625
--- /dev/null
+++ b/src/helper/string.js
@@ -0,0 +1,15 @@
+
+
+
+
+var st = {};
+
+
+st.replace = (str)=>{
+    return sub
+    .replace(/\|/g, "_");
+}
+
+
+
+module.exports = st;
diff --git a/src/index.js b/src/index.js
index 1361122..809ce9e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -78,7 +78,7 @@ if (!fs.existsSync(global.dir+'/tmp/inst')) {
                 icon: __dirname + '/app.ico'
             })
             win.close();
-            var z = new browser('http://www.crunchyroll.com/');
+            //var z = new browser('http://www.crunchyroll.com/');
             win2.loadURL(`file://${__dirname}/app/view/layout.html`)
             win = win2;
         });
diff --git a/src/themes/standard/style.less b/src/themes/standard/style.less
new file mode 100644
index 0000000..02ad122
--- /dev/null
+++ b/src/themes/standard/style.less
@@ -0,0 +1,76 @@
+/*
+
+
+
+
+*/
+
+@main-front-color: #E01931;
+@background-color: #1D2247;
+
+body {
+  margin: 0;
+  margin-top: 50px;
+  background: @background-color;
+  color:@main-front-color;
+}
+.btn-success {
+    color: @main-front-color;
+    background-color: @background-color;
+    border-color: @main-front-color;
+    transition: all .3s;
+}
+.btn-success:hover ,.btn-success:active,.btn-success:focus,.dropdown-toggle:focus,.dropdown-toggle:active,.btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success {
+    color: @background-color !important;
+    background-color: @main-front-color !important;
+    border-color: @main-front-color !important;
+    transition: all .3s;
+}
+.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
+    text-decoration: none;
+    color: @main-front-color;
+    background-color: @background-color;
+}
+.dropdown-menu{
+    background-color: @background-color;
+}
+span.input-group-btn.open > ul > li> a{
+    background-image:none;
+}
+.progress{
+    background-image:none;
+    background-color: @background-color;
+    box-shadow: inset 0px 0px 3px 0px @main-front-color;
+}
+.progress-bar{
+    background-image:none;
+    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;
+}
+.sidebar-nav {
+    padding: 10px;
+}
+.nav.nav-list a {
+    padding: 5px 10px;
+}
+
+.nav-header {
+
+    font-weight: bold;
+}
+.scroll{
+    overflow-y: scroll;
+    height: ~"calc( 100vh - 96px)";
+}
+
+.left-playlist{
+    box-shadow: 0px 0px 6px 1px @main-front-color;
+    height: ~"calc(100vh - 20vw - 30px )";
+}
diff --git a/src/tmp/c b/src/tmp/c
new file mode 100644
index 0000000..27a4802
--- /dev/null
+++ b/src/tmp/c
@@ -0,0 +1,15 @@
+# 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

From 27053a488088e44191b4a5650b3918af17af84f9 Mon Sep 17 00:00:00 2001
From: Theenoro <theenoro@broarts.eu>
Date: Mon, 28 Aug 2017 23:43:54 +0200
Subject: [PATCH 4/4] 1.4.0 Alpha #002

---
 src/app/js/app.js              |  2 +-
 src/app/js/player.js           | 46 ++++++++++++++++++++++++++++++
 src/app/js/pot_main.js         | 51 ++++------------------------------
 src/app/style/player.css       | 38 +++++++++++++++++++++++++
 src/app/style/style.css        |  2 +-
 src/app/style/style.less       | 16 +++++++++--
 src/app/view/layout.html       | 37 ++++++++++++++++--------
 src/app/view/pot.html          | 39 ++------------------------
 src/controller/player_onTop.js | 17 +++++++++---
 src/controller/youtube-dl.js   | 15 +---------
 src/themes/standard/style.less | 16 +++++++++--
 11 files changed, 161 insertions(+), 118 deletions(-)
 create mode 100644 src/app/js/player.js
 create mode 100644 src/app/style/player.css

diff --git a/src/app/js/app.js b/src/app/js/app.js
index 81d4f7d..0558759 100644
--- a/src/app/js/app.js
+++ b/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();
         }
diff --git a/src/app/js/player.js b/src/app/js/player.js
new file mode 100644
index 0000000..907001a
--- /dev/null
+++ b/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)
+            }
+        })
+})
diff --git a/src/app/js/pot_main.js b/src/app/js/pot_main.js
index 95af97f..4a42595 100644
--- a/src/app/js/pot_main.js
+++ b/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")
     });
diff --git a/src/app/style/player.css b/src/app/style/player.css
new file mode 100644
index 0000000..aeb38d2
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/style/style.css b/src/app/style/style.css
index 994a629..4be1566 100644
--- a/src/app/style/style.css
+++ b/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)}
\ No newline at end of file
+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%}
\ No newline at end of file
diff --git a/src/app/style/style.less b/src/app/style/style.less
index 02ad122..1fb83d7 100644
--- a/src/app/style/style.less
+++ b/src/app/style/style.less
@@ -5,8 +5,9 @@
 
 */
 
-@main-front-color: #E01931;
-@background-color: #1D2247;
+@main-front-color   : #f8f8f8;
+@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%;
+    }
+}
diff --git a/src/app/view/layout.html b/src/app/view/layout.html
index 0db1484..18f5aa9 100644
--- a/src/app/view/layout.html
+++ b/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>
@@ -45,12 +46,12 @@
                                     <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>
+                                    </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>
                                     </span>
                                     <span class="input-group-btn">
                                       <button type="button" id="start-download" class="btn btn-success btn-sm">Download</button>
@@ -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>
diff --git a/src/app/view/pot.html b/src/app/view/pot.html
index a60124c..78e0938 100644
--- a/src/app/view/pot.html
+++ b/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;
diff --git a/src/controller/player_onTop.js b/src/controller/player_onTop.js
index ba45e28..33b85f3 100644
--- a/src/controller/player_onTop.js
+++ b/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');
         });
     }
 }
diff --git a/src/controller/youtube-dl.js b/src/controller/youtube-dl.js
index df53a13..5a38d5c 100644
--- a/src/controller/youtube-dl.js
+++ b/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){
diff --git a/src/themes/standard/style.less b/src/themes/standard/style.less
index 02ad122..1fb83d7 100644
--- a/src/themes/standard/style.less
+++ b/src/themes/standard/style.less
@@ -5,8 +5,9 @@
 
 */
 
-@main-front-color: #E01931;
-@background-color: #1D2247;
+@main-front-color   : #f8f8f8;
+@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%;
+    }
+}