Commit 4bfff2f4 authored by Aral Balkan's avatar Aral Balkan
Browse files

Flow is working. Allows multiple tries. Styling of success message needs work.

parent 45f41c2b
body
{
font-family: 'Avenir Next Regular', 'Avenir Next', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-family: 'Avenir Next', 'Avenir', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding-left: 42px;
padding-right: 42px;
margin-left: auto;
......@@ -66,11 +66,6 @@
margin-right: 10px;
}
#video-button
{
}
#indie-logo
{
display:block;
......@@ -122,7 +117,8 @@
margin-top: 12px;
}
#upload-it-button:disabled, #video-button:disabled
.button-general:disabled
/*#upload-it-button:disabled, #video-button:disabled*/
{
/* Match the disabled colour of the Preview poster image on the video element. */
background-image: -webkit-linear-gradient(top, #164664, #143855);
......@@ -131,4 +127,5 @@
background-image: -o-linear-gradient(top, #164664, #143855);
background-image: linear-gradient(to bottom, #164664, #143855);
color: #757575;
font-family: 'Avenir Next'
}
......@@ -25,7 +25,7 @@
<input id='video-upload' name='my-video' type='file' accept='video/*' capture>
</label>
<video id='video-preview' poster='images/video-poster-disabled.jpg'></video>
<video id='video-preview' poster='images/video-poster.png'></video>
<!-- Yes, it’s a button with a progress bar in it. Now stop staring, it’s rude… -->
<button id='upload-it-button' class='button-general'>
......
......@@ -16,6 +16,8 @@ var video = document.getElementById('video-preview');
// Initial state of UI elements.
videoPreview.disabled = true;
uploadItButton.disabled = true;
// videoPreview.style.display = 'none';
// uploadItButton.style.display = 'none';
progressBar.style.display = 'none';
messageDisplay.style.display = 'none';
mobileNotice.style.display = 'none';
......@@ -46,8 +48,9 @@ if (!window.mobilecheck()) {
fileInput.onchange = function () {
// Update the UI.
fileInput.disabled = true;
videoButton.disabled = true;
// fileInput.disabled = true;
console.log('Video button: ' + videoButton);
// videoButton.disabled = true;
uploadItButton.disabled = false;
// Preview the file.
......@@ -61,24 +64,27 @@ function previewVideo(file) {
console.log(video);
video.src = videoURL;
video.style.width = '100%'
video.poster = ''
// Replace the poster with the enabled version. I tried
// to get the actual poster image from the video
// using popcorn.js and canvas but failed. Alas, this is a
// one day project and I’m convinced that people who create
// web technologies hate humans :)
video.poster = '/images/video-poster.jpg'
}
// video.poster = '/images/video-poster.jpg'
// setTimeout(video.load, 100);
video.load();
}
//
// Send file in background.
//
// With thanks to express-upload-progress (https://github.com/zemirco/express-upload-progress)
// and http://stackoverflow.com/questions/15418608/xmlhttprequest-level-2-determinate-if-upload-finished
//
var displayMessage = function(message) {
// var progressBar = document.getElementById('upload-progress');
// var messageDisplay = document.getElementById('message');
......@@ -147,17 +153,10 @@ uploadItButton.addEventListener('click', function(evt) {
// Even if the server hasn't responded that it finished.
console.log('Request has successfully completed.');
// Enable the Record a Video Button
var videoButton = document.getElementById('video-button');
videoButton.disabled = false;
// TODO: Reset the File Upload input.
// Return the video preview control to its original state.
var video = document.getElementById('video-preview');
console.log('>> ' + video);
video.src = '';
video.poster = '/images/video-poster-disabled.jpg'
video.poster = '/images/video-poster.png'
//
// Reset and disable the Upload It button.
......@@ -167,51 +166,48 @@ uploadItButton.addEventListener('click', function(evt) {
var uploadItButton = document.getElementById('upload-it-button');
uploadItButton.disabled = true;
});
xhr.upload.addEventListener('loadend', function(e) {
// When the request has completed (either in success or failure).
// Just like 'load', even if the server hasn't
// responded that it finished processing the request.
xhr.addEventListener('readystatechange', function(e) {
if( this.readyState === 4 ) {
// the transfer has completed and the server closed the connection.
console.log('xhr readystatechange');
console.log('Received: ');
console.log(e.target.responseText);
videoName = e.target.responseText;
// Display status message and (TODO) display link to the user’s video.
message = '<h2>Uploaded… thank you!</h2>'
+ '<p>Share your video with friends.</p>'
+ '<p>Here’s the link:</p>'
+ '<p><a href=\'/video/'+ videoName + '\'>http://iam.ind.ie/video/'+ videoName +'</a></p>'
displayMessage(message);
// var nextPage = '/video/' + videoName;
// window.location.href = nextPage;
}
});
//
// TODO: The errors should be handled better.
//
xhr.upload.addEventListener('error', function(e) {
// When the request has failed.
console.log('Error: ' + e);
displayMessage('Sorry, could not upload your video. Perhaps it was too long/too big?');
displayMessage('Sorry, could not upload your video. Error: ' + e);
});
xhr.upload.addEventListener('abort', function(e) {
// When the request has been aborted.
// For instance, by invoking the abort() method.
displayMessage('Sorry, the upload was aborted. Error: ' + e);
});
xhr.upload.addEventListener('timeout', function(e) {
// When the author specified timeout has passed
// before the request could complete.
});
// notice that the event handler is on xhr and not xhr.upload
xhr.addEventListener('readystatechange', function(e) {
if( this.readyState === 4 ) {
// the transfer has completed and the server closed the connection.
console.log('xhr readystatechange');
console.log('Received: ');
console.log(e.target.responseText);
videoName = e.target.responseText;
// Display status message and (TODO) display link to the user’s video.
// TODO Get the link back from the server.
message = '<h1>Uploaded… thank you!</h1>'
+ '<p>Share your video with friends.</p>'
+ '<p>Here’s the link:</p>'
+ '<p><a href=\'/video/'+ videoName + '\'>http://iam.ind.ie/video/'+ videoName +'</a></p>'
displayMessage(message);
}
displayMessage('Sorry, the upload timed out.');
});
xhr.send(formData);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment