vimeo-upload
Version:
Upload videos to your Vimeo account and update their metadata directly from a browser or a Node.js app.
318 lines (279 loc) • 12.2 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width,shrink-to-fit=no,user-scalable=no,initial-scale=1,minimum-scale=1,minimal-ui">
<title>Vimeo Upload Demo</title>
<meta name="description" content="Uploading video files directly with vanilla Javascript to your Vimeo account" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
color: #505662;
}
.help {
font-size: smaller;
}
.page-header {
padding-bottom: 18px;
margin: 40px 0 12px;
}
.logo {
width: 100%;
margin-bottom: 20px;
}
.lead {
font-size: 18px;
margin-bottom: 12px;
}
.footer {
position: absolute;
bottom: 0;
padding-top: 15px;
width: 100%;
/* Set the fixed height of the footer here */
height: 120px;
color: #505662;
}
.footer a.brand {
color: #505662;
}
.footer a.brand:hover {
color: #393e46;
text-decoration: none;
}
.footer .container {
border-top: 1px solid #eee;
padding-top: 45px;
}
/* Custom page CSS */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .text-muted {
margin: 20px 0;
}
#progress-container {
-webkit-box-shadow: none;
box-shadow: inset none;
display:none;
}
#drop_zone {
border: 2px dashed #bbb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding-top: 60px;
text-align: center;
font: 20pt bold 'Helvetica';
color: #bbb;
height:140px;
}
#video-data {
margin-top: 1em;
font-size: 1.1em;
font-weight: 500;
}
/* Bragit buttons, http://websemantics.github.io/bragit/ */
.ui.bragit.button,
.ui.bragit.buttons .button {
background-color: #676f7e;
color: #fff;
}
.ui.bragit.label {
color: #505662;
border-color: #676f7e;
background-color: #ffffff;
}
.ui.bragit.button:focus,
.ui.bragit.buttons .button:focus,
.ui.bragit.button:hover,
.ui.bragit.buttons .button:hover {
background-color: #505662;
}
.ui.bragit.labels .label:focus,
.ui.bragit.label:focus,
.ui.bragit.labels .label:hover,
.ui.bragit.label:hover {
color: #505662;
border-color: #505662;
}
.ui.labeled .ui.button .star.icon {
color: #F5CC7A;
}
</style>
</head>
<body>
<div class="container">
<div class="page-header">
<div><img src="img/icon.svg" class="logo"></img>
</div>
<p class="lead">Uploading video files directly with vanilla Javascript to your Vimeo account.</p>
<a class="ui labeled button github-websemantics-vimeo-upload-stars">
<div class="ui bragit button"> <i class="star icon"></i> Stars </div>
<div class="ui basic bragit left pointing label"> <i class="spinner loading icon"></i> </div>
</a>
<a class="ui labeled button github-websemantics-vimeo-upload-forks">
<div class="ui bragit button"> <i class="fork icon"></i> Forks </div>
<div class="ui basic bragit left pointing label"> <i class="spinner loading icon"></i> </div>
</a>
<a class="ui labeled button github-websemantics-vimeo-upload-issues">
<div class="ui bragit button"> <i class="info circle icon"></i> Issues </div>
<div class="ui basic bragit left pointing label"> <i class="spinner loading icon"></i> </div>
</a>
<a class="ui bragit button github-websemantics-vimeo-upload-download"> <i class="download icon"></i> Download </a>
<a class="ui bragit button github-websemantics-vimeo-upload-contributors"> <i class="users icon"></i> Contributors </a>
<a class="ui bragit button github-websemantics-vimeo-upload-github"> <i class="github icon"></i> Github </a>
</div>
<p class="lead">Enter vimeo access token, name and description then drag your video file into the dotted area below to upload to your vimeo account.</p>
<div id="progress-container" class="progress">
<div id="progress" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="46" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> 0%
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="results"></div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="form-group">
<input type="text" id="accessToken" class="form-control" placeholder="Vimeo access token" required autofocus></input>
<div class="help">Create an access token here: <a href="https://developer.vimeo.com/apps" target="_blank">https://developer.vimeo.com/apps</a></div>
</div>
<div class="form-group">
<input type="text" name="name" id="videoName" class="form-control" placeholder="Video name" value=""></input>
</div>
<div class="form-group">
<input type="text" name="description" id="videoDescription" class="form-control" placeholder="Video description" value=""></input>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="upgrade_to_1080" name="upgrade_to_1080"> Upgrade to 1080 </input>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="make_private" name="make_private"> Make Private </input>
</label>
</div>
</div>
<div class="col-md-4">
<div id="drop_zone">Drop Files Here</div>
<br/>
<label class="btn btn-block btn-info">
Browse… <input id="browse" type="file" style="display: none;">
</label>
</div>
</div>
</div>
<footer class="footer">
<div class="container text-center">
<p class="copyright">Built with <img data-preserve-html-node="true" src="img/heart.svg" alt="love" style="width:22px;height:22px;"> by <a class="brand" href="http://websemantics.ca">Web Semantics, Inc.</a></p>
</div>
</footer>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/websemantics/bragit/0.1.2/bragit.js"></script>
<script type="text/javascript" src="vimeo-upload.js"></script>
<script type="text/javascript">
/**
* Called when files are dropped on to the drop target or selected by the browse button.
* For each file, uploads the content to Drive & displays the results when complete.
*/
function handleFileSelect(evt) {
evt.stopPropagation()
evt.preventDefault()
var files = evt.dataTransfer ? evt.dataTransfer.files : $(this).get(0).files
var results = document.getElementById('results')
/* Clear the results div */
while (results.hasChildNodes()) results.removeChild(results.firstChild)
/* Rest the progress bar and show it */
updateProgress(0)
document.getElementById('progress-container').style.display = 'block'
/* Instantiate Vimeo Uploader */
;(new VimeoUpload({
name: document.getElementById('videoName').value,
description: document.getElementById('videoDescription').value,
private: document.getElementById('make_private').checked,
file: files[0],
token: document.getElementById('accessToken').value,
upgrade_to_1080: document.getElementById('upgrade_to_1080').checked,
onError: function(data) {
showMessage('<strong>Error</strong>: ' + JSON.parse(data).error, 'danger')
},
onProgress: function(data) {
updateProgress(data.loaded / data.total)
},
onComplete: function(videoId, index) {
var url = 'https://vimeo.com/' + videoId
if (index > -1) {
/* The metadata contains all of the uploaded video(s) details see: https://developer.vimeo.com/api/endpoints/videos#/{video_id} */
url = this.metadata[index].link //
/* add stringify the json object for displaying in a text area */
var pretty = JSON.stringify(this.metadata[index], null, 2)
console.log(pretty) /* echo server data */
}
showMessage('<strong>Upload Successful</strong>: check uploaded video @ <a href="' + url + '">' + url + '</a>. Open the Console for the response details.')
}
})).upload()
/* local function: show a user message */
function showMessage(html, type) {
/* hide progress bar */
document.getElementById('progress-container').style.display = 'none'
/* display alert message */
var element = document.createElement('div')
element.setAttribute('class', 'alert alert-' + (type || 'success'))
element.innerHTML = html
results.appendChild(element)
}
}
/**
* Dragover handler to set the drop effect.
*/
function handleDragOver(evt) {
evt.stopPropagation()
evt.preventDefault()
evt.dataTransfer.dropEffect = 'copy'
}
/**
* Updat progress bar.
*/
function updateProgress(progress) {
progress = Math.floor(progress * 100)
var element = document.getElementById('progress')
element.setAttribute('style', 'width:' + progress + '%')
element.innerHTML = ' ' + progress + '%'
}
/**
* Wire up drag & drop listeners once page loads
*/
document.addEventListener('DOMContentLoaded', function() {
var dropZone = document.getElementById('drop_zone')
var browse = document.getElementById('browse')
dropZone.addEventListener('dragover', handleDragOver, false)
dropZone.addEventListener('drop', handleFileSelect, false)
browse.addEventListener('change', handleFileSelect, false)
})
</script>
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-57984417-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>