Commit c63952aa authored by Aral Balkan's avatar Aral Balkan
Browse files

Now serving the video file correctly after creation but the short hash is...

Now serving the video file correctly after creation but the short hash is getting cached for some reason.
parent 81c02f2e
......@@ -6,13 +6,22 @@ shorthash = require 'shorthash'
app = express()
#
# Read the video file. We can by synchronous here since we’re
# just doing this when the server first starts and then caching this
# template.
#
videoTemplate = (fs.readFileSync 'templates/video.html').toString()
console.log videoTemplate
#
# Use mutler only on the /upload URL
# (See https://github.com/expressjs/multer/issues/59)
# Also see: https://github.com/jpfluger/multer/blob/examples/multer-upload-files-to-different-directories.md
#
app.use '/upload', multer {
dest: './videos/'
dest: './public/videos/'
limits:
files: 1,
......@@ -26,10 +35,12 @@ app.use '/upload', multer {
return shorthash.unique(fieldname).toLowerCase()
onFileUploadStart: (file) ->
#
# Run a few security checks before file upload starts.
#
console.log file.fieldname + ' is about to start uploading…'
console.log file
# Security checks.
fieldnameIsWrong = (file.fieldname != 'video-message')
mimetypeIsWrong = (/^video.*/.test(file.mimetype) == false)
......@@ -37,6 +48,9 @@ app.use '/upload', multer {
console.log 'File failed security checks. Not uploading.'
return false
onFileUploadComplete: (file) ->
console.log(file.fieldname + ' uploaded to ' + file.path)
}
#
......@@ -44,6 +58,24 @@ app.use '/upload', multer {
#
app.use(express.static(__dirname + '/public'));
#
# Get a video page.
#
app.get '/video/:videoName', (request, response) ->
#
# Display a video page.
#
console.log 'About to display video: ' + request.params.videoName
videoHTML = videoTemplate.replace '{{VIDEO}}', request.params.videoName
console.log videoHTML
response.send videoHTML
#
# Upload route.
#
app.post '/upload', (request, response) ->
console.log 'POST /upload called.'
console.dir(request.files)
......@@ -63,17 +95,21 @@ app.post '/upload', (request, response) ->
error=true
if error
#
# Something went wrong and we didn’t get the
# upload we were looking for. This really
# shouldn’t happen.
#
response.status(500).send('Video upload failed.')
else
#
# OK, return the path of the video
# Everything’s OK, return the path of the video.
#
response.end responseString
#
# Start the server.
#
server = app.listen 3000, ->
console.log "Listening on port %d", server.address().port
......
......@@ -11,34 +11,32 @@
<h1>Sixty seconds to freedom. <em>#iamindie</em></h1>
<p id='mobile-notice' class='warning'><strong>Please note, this site only works on mobile devices</strong>. We’re using a feature that only works on mobile web browsers (desktops have not implemented it yet) so please make sure to try this on your phone.</p>
<p id='mobile-notice' class='warning'><strong>Please note, this site only works on mobile devices</strong>. We’re using a feature that only works on mobile web browsers (desktop browsers have not implemented it yet) so please make sure to try this on your phone.</p>
<h2>Hello, I’m _______ and I’m indie because…</h2>
<!-- action='http://192.168.0.4:3000/upload' enctype='multipart/form-data' method='post' -->
<form>
<label class='button-general fileContainer' id='video-button'>
<img id='camera-icon' src='images/camera.png'>
<br>
1. Record a video
<!-- Because HTML wants to make you suffer. -->
<!-- This is the only reliable way to style the butt-ugly file upload control. -->
<input id='video-upload' name='my-video' type='file' accept='video/*' capture>
</label>
<video id='video-preview' poster='images/video-poster-disabled.jpg'></video>
<!-- <input type='submit'> -->
<!-- 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'>
<span id='upload-it-button-text'>3. Upload it</span>
<progress id='upload-progress' max='100' style='width:100%;'></progress>
</button>
</form>
<div id="message">Message goes here.</div>
<!-- <img id='capture' width="100%" height="300px"> -->
<div id="message">A message goes here. Is it a message in a bottle? No, it’s a message in a div, silly.</div>
<h2>Why are you indie?</h2>
<h2>Are you indie?</h2>
<p>Record a short 30-60 second video to tell us why you support Ind.ie and why others should support us during our <a href='https://ind.ie/phone/thunderclap/'>Thunderclap</a> and <a href='https://ind.ie/phone/crowdfunding/'>crowdfunding</a> on November 8th.</p>
......@@ -57,21 +55,40 @@
<h2>#iamindie</h2>
<h3 id="hello-im-__"><a name="user-content-hello-im-__" href="#hello-im-__" class="headeranchor-link" aria-hidden="true"><span class="headeranchor"></span></a>Hello, I’m <strong><em>_</em></strong>_.</h3>
<p>I love the Internet. I love modern technology. I love to share, to learn, to grow, to connect…</p>
<p><strong>I don’t love being your product.</strong></p>
<p>I am not a <em>thing</em> to be mined and farmed and sold.</p>
<p>I am not your lab rat.</p>
<p><strong>I am a <em>person</em>.</strong></p>
<p>I have rights and I have freedoms.</p>
<p>I will protect them.</p>
<p>So, Google, Facebook, Yahoo!, Microsoft, … <strong>I say <em>no</em> to your spyware</strong></p>
<p><strong>I want technology that protects our freedoms, human rights, and democracy, not technology that erodes them.</strong></p>
<p>I want technology that I own and control, not technology owned and controlled by corporations.</p>
<p><strong>I want indepedent technology.</strong></p>
<p>I’m an individual.</p>
<p>I am independent.</p>
<p><strong>I am indie.</strong></p>
<!-- I put my scripts at the end so you don’t have to. -->
<!-- What, that doesn’t even make sense… -->
<!-- Dude, I’m not the one reading the comments at the very end of a page. -->
<!-- True dat. -->
<!-- Rabbits are cute. -->
<script src='js/index.js'></script>
</body>
</html>
\ No newline at end of file
......@@ -168,9 +168,7 @@ uploadItButton.addEventListener('click', function(evt) {
var uploadItButton = document.getElementById('upload-it-button');
uploadItButton.disabled = true;
// Display status message and (TODO) display link to the user’s video.
// TODO Get the link back from the server.
displayMessage('<h1>Uploaded… thank you!</h1><p>Share your video with friends.</p><p>Here’s the link:</p>');
});
xhr.upload.addEventListener('loadend', function(e) {
......@@ -202,6 +200,17 @@ uploadItButton.addEventListener('click', function(evt) {
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);
}
});
......
<!DOCTYPE html>
<html lang='en'>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<head>
<title>#iamindie</title>
<link rel='stylesheet' type='text/css' href='/css/index.css'>
</head>
<body>
<a href='https://ind.ie'><img id='indie-logo' src='/images/hope.png' alt='ind.ie'></a>
<h1>#iamindie</h1>
<video id='video-preview' src='/videos/{{VIDEO}}'></video>
<p>Do you care about freedom, human rights, and democracy? You might just be indie too. <a href='https://ind.ie'>Find out more about Ind.ie</a> and <a href='/'>record your own video</a>.</p>
</body>
</html>
\ No newline at end of file
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