1.4.0 Alpha #002
This commit is contained in:
parent
d7958e1594
commit
27053a4880
@ -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();
|
||||
}
|
||||
|
||||
46
src/app/js/player.js
Normal file
46
src/app/js/player.js
Normal file
@ -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)
|
||||
}
|
||||
})
|
||||
})
|
||||
@ -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")
|
||||
});
|
||||
|
||||
38
src/app/style/player.css
Normal file
38
src/app/style/player.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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%}
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -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){
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user