Skip to content

Commit

Permalink
stashing work, added command example page and functional config loadi…
Browse files Browse the repository at this point in the history 
…ng and saving, skeleton for background job processing
  • Loading branch information
@thelamer
thelamer committed Jul 6, 2019
1 parent f77d46b commit ceb78ac
Show file tree
Hide file tree
Showing 7 changed files with 321 additions and 45 deletions.
29 changes: 29 additions & 0 deletions commands.yml
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---

- category: "H.264 Downsampling"
commands:
- name: "720p 4mpbs"
description: "This can be used as a catch all for most H.264 720p encodes, if you want a higher bitrate then modify the 4000k to your suit your needs"
command: |
Expand All @@ -10,7 +11,35 @@
-c:a copy \
-b:v 4000k \
"${OUTPUTFILE}"
- name: "1080p 8mpbs"
description: "This can be used as a catch all for most H.264 1080p encodes, if you want a higher bitrate then modify the 8000k to your suit your needs"
command: |
ffmpeg -i "${INPUTFILE}" \
-vf scale=-1:1080 \
-c:v h264 \
-c:a copy \
-b:v 8000k \
"${OUTPUTFILE}"
- category: "H.265 Downsampling"
commands:
- name: "720p 2mpbs"
description: "This can be used as a catch all for most H.265 720p encodes, if you want a higher bitrate then modify the 2000k to your suit your needs"
command: |
ffmpeg -i "${INPUTFILE}" \
-vf scale=-1:720 \
-c:v h264 \
-c:a hevc \
-b:v 2000k \
"${OUTPUTFILE}"
- name: "1080p 4mpbs"
description: "This can be used as a catch all for most H.265 1080p encodes, if you want a higher bitrate then modify the 4000k to your suit your needs"
command: |
ffmpeg -i "${INPUTFILE}" \
-vf scale=-1:1080 \
-c:v hevc \
-c:a copy \
-b:v 4000k \
"${OUTPUTFILE}"
- category: "H.264 Downsampling Vaapi"
- category: "H.265 Downsampling Vaapi"
- category: "H.264 Downsampling Nvidia"
Expand Down
2 changes: 2 additions & 0 deletions config.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ interval: 60
commands:
- name: "test1"
extension: ".mkv"
delete: false
command: |
ffmpeg -i "${INPUTFILE}" \
-vf scale=-1:720 \
Expand All @@ -14,6 +15,7 @@ commands:
"${OUTPUTFILE}"
- name: "test2"
extension: ".mkv"
delete: true
command: |
ffmpeg -i "${INPUTFILE}" \
-vf scale=-1:720 \
Expand Down
222 changes: 192 additions & 30 deletions public/ffmpeg-web.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,78 +4,240 @@ var port = window.location.port;
var protocol = window.location.protocol;
var socket = io.connect(protocol + '//' + host + ':' + port, {});


// On connect render the main page
$(document).ready(function(){rendermain()})

//// Main Page rendering ////
function rendermain(){
$('#pagecontent').empty();
pagepurge();
$('#pagecontent').append('<center><div class="spinner-border" style="width: 6rem; height: 6rem;"></div></center>');
socket.emit('getmain');
}
socket.on('sendmain', function(rules){
$('#pagecontent').empty();
socket.on('sendmain', function(data){
pagepurge();
$('#pagecontent').append('<center>Processed jobs here and current status</center>');
});

//// Config Page rendering ////
function renderconfig(){
pagepurge();
$('#pagecontent').append('<center><div class="spinner-border" style="width: 6rem; height: 6rem;"></div></center>');
socket.emit('getconfig');
}
socket.on('sendconfig', function(rules){
pagepurge();
var interval = rules.interval;
$('#headerform').append('\
<select class="custom-select form-control mr-sm-2" id="interval">\
<option selected value="' + interval + '">' + interval + '</option>\
<option value"Never">Never</option>\
<option value="30">30 seconds</option>\
<option value="60">60 seconds</option>\
<option value="300">5 minutes</option>\
</select>\
<button style="cursor:pointer;" onclick="saveall()" class="btn btn-primary my-2 my-sm-0" type="submit">Save Config</button>\
');
var editor = [];
$(rules.commands).each(function(i,data){
var name = data.name;
var extension = data.extension;
var command = data.command;
var cleanup = data.delete;
if (cleanup == true){
var checkbox = '<input class="form-check-input" type="checkbox" id="delete' + i + '" checked>'
}
else{
var checkbox = '<input class="form-check-input" type="checkbox" id="delete' + i + '">'
}
$('#pagecontent').append('\
<div class="card" id="' + name + '">\
<div class="card rule" id="' + i + '">\
<div class="card-body">\
<form>\
<div class="form-row align-items-center">\
<div class="col-auto">\
<input type="text" class="form-control" value="' + name + '" placeholder="File Extension">\
</div>\
<div class="col-auto">\
<input type="text" class="form-control" value="' + extension + '" placeholder="File Extension">\
</div>\
<div class="col-auto">\
<div class="form-check mb-2">\
<input class="form-check-input" type="checkbox" id="deletesource">\
<label class="form-check-label" for="deletesource">\
Delete Source\
</label>\
</div>\
</div>\
<div class="col float-right">\
<button class="btn btn-success mb-2 float-right">Run Single</button>\
<div class="form-row align-items-center">\
<div class="col-auto">\
<input type="text" class="form-control" value="' + name + '" placeholder="Rule Name" id="name' + i + '">\
</div>\
<div class="col-auto">\
<input type="text" class="form-control" value="' + extension + '" placeholder="File Extension" id="extension' + i + '">\
</div>\
<div class="col-auto">\
<div class="form-check mb-2">\
'+ checkbox +'\
<label class="form-check-label" for="delete' + i + '">\
Delete Source\
</label>\
</div>\
</div>\
</form>\
</div>\
<br>\
<div id="editor' + i + '" style="height: 250px; width: 100%"></div>\
</div>\
</div>\
<br>\
').promise().done(function(){
editor[i] = ace.edit("editor" + i);
editor[i].setTheme("ace/theme/chrome");
editor[i].session.setMode("ace/mode/sh");
editor[i] = ace.edit('editor' + i);
editor[i].setTheme('ace/theme/chrome');
editor[i].session.setMode('ace/mode/sh');
editor[i].$blockScrolling = Infinity;
editor[i].setOptions({
readOnly: false,
});
editor[i].setValue(command, -1);
});
});
$('#pagefooter').append('<center><button type="button" class="btn btn-secondary btn-lg" onclick="addconfig()">+</button></center>');
});
// Add config rule slots to the page
function addconfig(){
var rand = Math.random().toString(36).replace('0.', '');
$('#pagecontent').append('\
<div class="card rule" id="' + rand + '">\
<div class="card-body">\
<div class="form-row align-items-center">\
<div class="col-auto">\
<input type="text" class="form-control" placeholder="Rule Name" id="name' + rand + '">\
</div>\
<div class="col-auto">\
<input type="text" class="form-control" placeholder="File Extension" id="extension' + rand + '">\
</div>\
<div class="col-auto">\
<div class="form-check mb-2">\
<input class="form-check-input" type="checkbox" id="delete' + rand + '">\
<label class="form-check-label" for="delete' + rand + '">\
Delete Source\
</label>\
</div>\
</div>\
</div>\
<br>\
<div id="editor' + rand + '" style="height: 250px; width: 100%"></div>\
</div>\
</div>\
<br>\
').promise().done(function(){
editor = ace.edit('editor' + rand);
editor.setTheme('ace/theme/chrome');
editor.session.setMode('ace/mode/sh');
editor.$blockScrolling = Infinity;
editor.setOptions({
readOnly: false,
});
});
}
// Save all config data
function saveall(){
var interval = $('#interval').val();
var dataset = {'interval':interval,'commands':[]};
var ids = $('.rule').map(function(){
return this.id;
}).get();
$(ids).each(function(i,id){
var name = $('#name' + id).val();
var extension = $('#extension' + id).val();
var cleanup = $('#delete' + id).prop('checked');
var editor = ace.edit("editor" + id);
var command = editor.getValue();
var single_command = {'name':name,'extension':extension,'delete':cleanup,'command':command};
dataset.commands.push(single_command);
}).promise().done(function(){
$('#pagecontent').append('<center><button type="button" class="btn btn-secondary btn-lg">+</button></center>');
socket.emit('saveconfig',dataset);
});
}


//// Terminal Page rendering ////
function renderterminal(){
pagepurge();
$('#pagecontent').append('<center><div class="spinner-border" style="width: 6rem; height: 6rem;"></div></center>');
socket.emit('getterminal');
}
socket.on('sendterminal', function(data){
pagepurge();
$('#pagecontent').append('<center>Raw bash terminal here for users to test commands</center>');
});

///////////////////////// test function client side //////////////////////////////////////
socket.on('testout', function(out){
console.log(out);
});
///////////////////////// REMOVE FROM RELEASE ////////////////////////////////////////////

//// Command Page rendering ////
function rendercommands(){
$('#pagecontent').empty();
pagepurge();
$('#pagecontent').append('<center><div class="spinner-border" style="width: 6rem; height: 6rem;"></div></center>');
socket.emit('getcommands');
}
socket.on('sendcommands', function(categories){
console.log(categories);
$('#pagecontent').empty();
pagepurge();
var editor = [];
$('#pagecontent').append('<div id="cats"></div>')
$(categories).each(function(i,data){
var commands = data.commands;
var cat = data.category;
var catid = cat.replace(/ |\./g,'');
$('#cats').append('\
<div class="card">\
<div class="card-header" id="' + catid + '" data-toggle="collapse" data-target="#' + catid + '_list" aria-expanded="true" aria-controls="' + catid + '_list">\
' + cat + '\
</div>\
</div>');
$('#cats').append('\
<div id="' + catid + '_list" class="collapse" aria-labelledby="' + catid + '" data-parent="#cats">\
<div class="card-body btn-toolbar" id="' + catid + '_commands">\
</div>\
</div>').promise().done(
function(){
$(commands).each(function(i,data){
var name = data.name;
var nameid = name.replace(/ |\./g,'');
var description = btoa(data.description);
var command = btoa(data.command);
$('#' + catid + '_commands').append('\
<button type="button" \
id="' + nameid + '_button" \
data-toggle="modal" \
data-target="#modal" \
style="cursor:pointer;" \
onclick="commandmodal(\'' + nameid + '\')"\
class="btn btn-secondary btn-lg mx-auto" \
data-name="' + name + '"\
data-description="' + description + '"\
data-command="' + command + '"\
>' + name + '\
</button>');
});
});
});
});
function commandmodal(nameid){
modalpurge();
var name = $('#' + nameid + '_button').data('name')
var description = atob($('#' + nameid + '_button').data('description'));
var command = atob($('#' + nameid + '_button').data('command'));
$('#modaltitle').append(name);
$('#modalbody').append('<p>' + description + '</p>');
$('#modalbody').append('<div id="editor" style="height: 250px; width: 100%"></div>'
).promise().done(function(){
editor = ace.edit("editor");
editor.setTheme("ace/theme/chrome");
editor.session.setMode("ace/mode/sh");
editor.$blockScrolling = Infinity;
editor.setOptions({
readOnly: true,
});
editor.setValue(command, -1);
});
}



function modalpurge(){
$('#modaltitle').empty();
$('#modalbody').empty();
}
function pagepurge(){
$('#headerform').empty();
$('#pagecontent').empty();
$('#pagefooter').empty();
}
33 changes: 24 additions & 9 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/public/img/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link href="public/vendor/css/xterm.min.css" rel="stylesheet">
<link href="public/vendor/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
Expand All @@ -37,24 +38,37 @@
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<div class="nav-link" style="cursor:pointer;" onclick="renderconfig()" >Config</div>
</li>
<li class="nav-item active">
<div class="nav-link" style="cursor:pointer;" onclick="renderterminal()" >Terminal</div>
</li>
<li class="nav-item active">
<div class="nav-link" style="cursor:pointer;" onclick="rendercommands()" >Example Commands</div>
</li>
</ul>
<form class="form-inline my-2 my-md-0" onsubmit="return false;">
<select class="custom-select form-control mr-sm-2" id="interval">
<option selected>Never</option>
<option value="30">30 seconds</option>
<option value="60">60 seconds</option>
<option value="300">5 minutes</option>
</select>
<button style="cursor:pointer;" onclick="saveall()" class="btn btn-primary my-2 my-sm-0" type="submit">Save Config</button>
<form class="form-inline my-2 my-md-0" onsubmit="return false;" id="headerform">
</form>
</div>
</nav>
<br>
<!-- Body -->
<div class="container" id="pagecontent">
<div class="container" id="pagecontent"></div>
<div class="container" id="pagefooter"></div>
<!--FFmpeg Modal-->
<div id="modal" class="modal fade" tabindex="-1" role="dialog" style="overflow-y:scroll;">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><div id="modaltitle"></div></h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body" style="overflow-x:auto">
<div id="modalbody"></div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script src="/public/vendor/js/jquery.min.js"></script>
Expand All @@ -63,6 +77,7 @@
<!-- Plugin JavaScript -->
<script src="/public/vendor/js/socket.io.js"></script>
<script src="/public/vendor/js/ace.js"></script>
<script src="/public/vendor/js/xterm.min.js"></script>
<!-- Our JavaScript -->
<script src="/public/ffmpeg-web.js"></script>
</body>
Expand Down
2 changes: 2 additions & 0 deletions public/vendor/css/xterm.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions public/vendor/js/xterm.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit ceb78ac

Please sign in to comment.