forked from websemantics/vimeo-upload
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
195 lines (162 loc) · 6.77 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<style>
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
.container {
width: auto;
max-width: 680px;
padding: 0 15px;
}
.container .text-muted {
margin: 20px 0;
}
#drop_zone {
border: 2px dashed #bbb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 25px;
text-align: center;
font: 20pt bold 'Helvetica';
color: #bbb;
}
</style>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1><img src="img/icon.png" style="width:50px"></img> Vimeo Upload</h1>
<a class="github-button" href="https://github.com/websemantics/vimeo-upload" data-icon="octicon-star" data-style="mega" data-count-href="/websemantics/vimeo-upload/stargazers" data-count-api="/repos/websemantics/vimeo-upload#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star websemantics/vimeo-upload on GitHub">Star</a>
<a class="github-button" href="https://github.com/ntkme/github-buttons/fork" data-icon="octicon-repo-forked" data-style="mega" data-count-href="/ntkme/github-buttons/network" data-count-api="/repos/ntkme/github-buttons#forks_count" data-count-aria-label="# forks on GitHub" aria-label="Fork ntkme/github-buttons on GitHub">Fork</a>
<a class="github-button" href="https://github.com/websemantcis" data-style="mega" data-count-href="/websemantcis/followers" data-count-api="/users/websemantcis#followers" data-count-aria-label="# followers on GitHub" aria-label="Follow @websemantcis on GitHub">Follow @websemantcis</a>
</div>
<p class="lead">Fill in your vimeo access token and drag you video file into the area below to upload to your vimeo account.</p>
<div>
<input type="accessToken" id="accessToken" class="form-control" placeholder="Vimeo access token" required autofocus></input>
<div class="checkbox">
<label>
<input type="checkbox" id="upgrade_to_1080" name="upgrade_to_1080"> Upgrade to 1080 </input>
</label>
</div>
</div>
<br>
<div class="progress">
<div id="progress" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="46" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
0%
</div>
</div>
<div id="drop_zone">Drop files here</div>
<br>
<div id="results"></div>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted"><a href="http://websemantics.ca">WebSemantics, Inc.</a></p>
</div>
</footer>
<script src="upload.js"></script>
<script type="text/javascript">
/**
* Called when files are dropped on to the drop target. For each file,
* uploads the content to Drive & displays the results when complete.
*/
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
var accessToken = document.getElementById("accessToken").value;
var upgrade_to_1080 = document.getElementById("upgrade_to_1080").checked;
// Clear the results div
var node = document.getElementById('results');
while (node.hasChildNodes()) node.removeChild(node.firstChild);
// Rest the progress bar
updateProgress(0);
var uploader = new MediaUploader({
file: files[0],
token: accessToken,
upgrade_to_1080: upgrade_to_1080,
onError: function(data) {
var errorResponse = JSON.parse(data);
message = errorResponse.error;
var element = document.createElement("div");
element.setAttribute('class', "alert alert-danger");
element.appendChild(document.createTextNode(message));
document.getElementById('results').appendChild(element);
},
onProgress: function(data) {
updateProgress(data.loaded / data.total);
},
onComplete: function(videoId) {
var url = "https://vimeo.com/"+videoId;
var a = document.createElement('a');
a.appendChild(document.createTextNode(url));
a.setAttribute('href',url);
var element = document.createElement("div");
element.setAttribute('class', "alert alert-success");
element.appendChild(a);
document.getElementById('results').appendChild(element);
}
});
uploader.upload();
}
/**
* Dragover handler to set the drop effect.
*/
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
}
/**
* Wire up drag & drop listeners once page loads
*/
document.addEventListener('DOMContentLoaded', function () {
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
});
;
/**
* Updat progress bar.
*/
function updateProgress(progress) {
progress = Math.floor(progress * 100);
var element = document.getElementById('progress');
element.setAttribute('style', 'width:'+progress+'%');
element.innerHTML = progress+'%';
}
progress
</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>