From 27053a488088e44191b4a5650b3918af17af84f9 Mon Sep 17 00:00:00 2001 From: Theenoro Date: Mon, 28 Aug 2017 23:43:54 +0200 Subject: [PATCH] 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('' + arg.file + '') + $('#watchr_files').append('
' + arg.file + '
') } 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 = ''; + var st_pause = ''; + + 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 = ''; - var st_pause = ''; - - 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 @@ - + Cyb3r Downloader @@ -18,6 +18,7 @@ + @@ -45,12 +46,12 @@ - + + @@ -65,18 +66,32 @@
- +
+
+
-
+
+ +
- + +
+
+ +
+ +
+ +
+ +
+
-
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 @@ + Cyb3r Downloader - Player on Top @@ -18,6 +19,7 @@ +