node-webplay
Version:
A nodejs streaming server implementation
204 lines (131 loc) • 6.67 kB
HTML
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>node chunk-uploader sample</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
html,
body {
height: 100%;
background-color: white;
margin: 0px;
padding: 0px;
color: #1e1e1e;
}
.owner
{
margin: auto;
width: 50%;
min-width: 18em;
text-align: center;
}
.vspace
{
padding-bottom: 2em;
padding-top: 2em;
}
.info
{
text-align: center;
color: #2a6496;
}
.progressview
{
background-repeat:no-repeat;
background-position:center;
background-size: 80px 10px;
}
</style>
</head>
<body>
</body>
<div class="owner vspace">
<h2>Uploader Sample</h2>
</div>
<div class="owner vspace">
<input id="file_input" multiple type="file" onchange='$upm.selectFiles(this)' class="hidden">
<p class="lead">
<a id="styled_file_input" href="#" class="btn btn-lg btn-default"><span class="glyphicon glyphicon-folder-open "></span> Select Files >> </a>
</p>
</div>
<div id="file_list" class="owner">
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/app.js"></script>
<script>
var _file_ui_template
= '<div id="$(ID)"><div class="info progressview" ><span> </span></div>'
_file_ui_template += '<div class="btn-group btn-group-justified hidden"> '
_file_ui_template += ' <a class="btn btn-default "><span class="glyphicon glyphicon-play"></span> start</a>';
_file_ui_template += ' <a class="btn btn-default"><span class="glyphicon glyphicon-remove"></span> quit</a>';
_file_ui_template += ' <a class="btn btn-default"><span class="glyphicon glyphicon-wrench"></span> options</a>';
_file_ui_template += '</div>';
_file_ui_template += '<div class="progress hidden">';
_file_ui_template += ' <div class="progress-bar" style="width: 0%;"><span></span></div>';
_file_ui_template += '</div>';
_file_ui_template += '</div>';
$upm.setOptions({"url" : "http://localhost:3000/upload", "owner" : "uploader"});
$upm.on('completed', function(id) { //
//alert("done " + myself.name());
//var id = uploader.options.uiid;
var div = jQuery("#" + id);
var info = div.children().first();
info.addClass('hidden');
var txt = info.children().first();
var buttons = div.find(':nth-child(2)').first();
buttons.addClass('hidden');
var progress = div.children(':nth-child(3)');
progress.addClass('hidden');
div.append('<div class="alert alert-success"><a href="#" class="close" data-dismiss="alert">×</a><strong>Success!</strong> Your file ' + $upm.uploader[id].name() + ' has been sent successfully.</div>');
});
$upm.on('new', (id) => {
var file_list = $('#file_list');
//var uiid = "div_" + new Date().getTime().toString();
file_list.append(_file_ui_template.replace('$(ID)', id));
var div = jQuery("#" + id);
var info = div.children().first();
info.removeClass('progressview');
var txt = info.children().first();
var buttons = div.find(':nth-child(2)').first();
buttons.removeClass('hidden');
var progress = div.children(':nth-child(3)');
progress.removeClass('hidden');
var $pause = buttons.find(':first-child').first();//.find(':first-child');
var $quit = buttons.find(':nth-child(2)').first();//.find(':first-child');
var $opt = buttons.find(':nth-child(3)').first();//.find(':first-child');
var myself = $upm.uploader[id];
var mypause = $pause;
$pause.click(function () { if (myself.paused()) { myself.resume(); mypause.html('<span class="glyphicon glyphicon-pause"></span> pause'); } else { myself.pause(); mypause.html('<span class="glyphicon glyphicon-play"></span> resume'); } });
$opt.click(function () {
//txt.text("options clicked");
alert('no options available');
}
);
$quit.click(function () {
txt.text("Quitted");
myself.pause();
$pause.hide();
}
);
txt.text(myself.name());
myself.on('progress', function (num) {
var d = new Number(num);
var x = new String(d.toFixed(0)) + '%';
var s = new String(d.toFixed(2)) + '%';
progress.find(":first-child").css('width', x);
progress.find(":first-child :first-child").text(s);
});
});
$(function(){
var styled_file_input = $('#styled_file_input');
styled_file_input.click(function () { $('#file_input').click(); });
});
</script>
</html>