Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

212 lines (196 sloc) 7.36 kb
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Zencoder Dropzone</title>
<!-- jQuery Include -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Filepicker.io Include -->
<script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script>
<style type='text/css'>
html, body {
margin: 0;
padding: 0;
background-color: #1F333E;
color: #fff;
height: 100%;
font-family: 'HelveticaNeue-UltraLight','Helvetica Neue UltraLight','Helvetica Neue','Open-Light',sans-serif;
}
#content {
height: 100%;
width: 100%;
}
/* Basic styles */
.hidden { display: none }
h1 { font-weight: 300 }
/* We need this structure for completely centered text */
.container {
height: 100%;
width: 100%;
display: table;
}
.text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
/* Setting height/width to 100% will cause scrollbars, so absolutely position to the edges */
.full {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
/* Setup */
#setup {
/* Nothing special here yet */
}
#setup input {
width: 80%;
height: 50px;
text-align: center;
font-size: 40px;
color: #1E323D;
background-color: #609FC1;
border: 3px solid #fff;
}
#setup input:focus { outline: none; }
/* Styling placeholder text still takes vendor prefixes :( */
::-webkit-input-placeholder {
color: #47758F;
}
:-moz-placeholder { /* Firefox 18- */
color: #47758F;
}
::-moz-placeholder { /* Firefox 19+ */
color: #47758F;
}
:-ms-input-placeholder {
color: #47758F;
}
/* Drop Zone */
#dropZone {
/* Nothing special here yet */
}
.normal {
border: 3px dashed #fff;
background-color: #47758F;
}
.over {
border: 3px solid #fff;
background-color: #609FC1;
}
</style>
<script type="text/javascript">
$(function(){
// Get the API key from the initial form field and throw it in a variable for use later
var apiKey;
$('#api-key-form').submit(function(e){
e.preventDefault();
apiKey = $('#api-key').val();
// Once the API key is set, show the drop zone
$('#setup').fadeOut(function(){
$('#dropZone').fadeIn();
});
});
// Set your Filepicker.io API key
filepicker.setKey('AACRnG3VDSwyJfHqeN06ez');
// We'll be referencing these elements a few times,
// so we might as well put them in vars.
var $dz = $('#dropZone');
var $dzResult = $('#localDropResult');
// Set up our Filepicker.io Drop Pane.
filepicker.makeDropPane($dz, {
multiple: false,
dragEnter: function() {
$dz.find('h1').text('Drop to upload');
$dz.removeClass('normal').addClass('over');
},
dragLeave: function() {
$dz.find('h1').text('Drop files here');
$dz.removeClass('over').addClass('normal');
},
onSuccess: function(fpfiles) {
$dz.find('h1').text('File uploaded. Encoding...');
createJob(apiKey, fpfiles[0].url, $dz);
},
onError: function(type, message) {
$dzResult.text('('+type+') '+ message);
},
onProgress: function(percentage) {
$dz.find('h1').text('Uploading ('+percentage+'%)');
}
});
});
// Send the create request to Zencoder
function createJob(apiKey, file, $element) {
var request = { input: file };
// Let's use $.ajax instead of $.post so we can specify custom headers.
$.ajax({
url: 'https://app.zencoder.com/api/v2/jobs',
type: 'POST',
data: JSON.stringify(request),
headers: { "Zencoder-Api-Key": apiKey },
dataType: 'json',
success: function(data) {
console.log(data);
// Once the file is uploaded, start polling Zencoder for progress
pollZencoder(apiKey, data.id, $element);
},
error: function(data) {
console.log(data);
}
});
}
// Poll the Zencoder API for progress
function pollZencoder(apiKey, jobId, $element) {
$.ajax({
url: 'https://app.zencoder.com/api/v2/jobs/'+ jobId +'/progress.json',
type: 'GET',
headers: { "Zencoder-Api-Key": apiKey },
success: function(data) {
if (data.state != 'finished') {
console.log(data);
// We don't want to update progress while the job is still queued
if (data.state != 'waiting') {
$element.find('h1').text('Encoding ('+ data.progress +'%)');
}
// Since the job isn't finished, wait 3 seconds and poll again
setTimeout(function() { pollZencoder(apiKey, jobId, $element) }, 3000);
} else {
// Job is finished, so let the user know.
$element.find('h1').html('Finished. <a href="https://app.zencoder.com/jobs/'+ jobId +'">View Job</a>')
}
},
error: function(data) {
console.log(data);
}
});
}
</script>
</head>
<body>
<div id="content">
<!-- Get the user's API key before anything else -->
<div id="setup" class="full">
<div class="container">
<div class="text">
<form id="api-key-form">
<input type="text" id="api-key" placeholder="Zencoder API Key"><br />
<p>Press enter when done.</p>
</form>
</div>
</div>
</div>
<!-- Drop zone needs to be hidden by default. We'll unhide it when the API key is put in -->
<div id="dropZone" class="full normal hidden">
<div class="container">
<div class="text">
<h1>Drop files here</h1>
</div>
</div>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.