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' ...@@ -6,13 +6,22 @@ shorthash = require 'shorthash'
app = express() 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 # Use mutler only on the /upload URL
# (See https://github.com/expressjs/multer/issues/59) # (See https://github.com/expressjs/multer/issues/59)
# Also see: https://github.com/jpfluger/multer/blob/examples/multer-upload-files-to-different-directories.md # Also see: https://github.com/jpfluger/multer/blob/examples/multer-upload-files-to-different-directories.md
# #
app.use '/upload', multer { app.use '/upload', multer {
dest: './videos/' dest: './public/videos/'
limits: limits:
files: 1, files: 1,
...@@ -26,10 +35,12 @@ app.use '/upload', multer { ...@@ -26,10 +35,12 @@ app.use '/upload', multer {
return shorthash.unique(fieldname).toLowerCase() return shorthash.unique(fieldname).toLowerCase()
onFileUploadStart: (file) -> onFileUploadStart: (file) ->
#
# Run a few security checks before file upload starts.
#
console.log file.fieldname + ' is about to start uploading…' console.log file.fieldname + ' is about to start uploading…'
console.log file console.log file
# Security checks.
fieldnameIsWrong = (file.fieldname != 'video-message') fieldnameIsWrong = (file.fieldname != 'video-message')
mimetypeIsWrong = (/^video.*/.test(file.mimetype) == false) mimetypeIsWrong = (/^video.*/.test(file.mimetype) == false)
...@@ -37,6 +48,9 @@ app.use '/upload', multer { ...@@ -37,6 +48,9 @@ app.use '/upload', multer {
console.log 'File failed security checks. Not uploading.' console.log 'File failed security checks. Not uploading.'
return false return false
onFileUploadComplete: (file) ->
console.log(file.fieldname + ' uploaded to ' + file.path)
} }
# #
...@@ -44,6 +58,24 @@ app.use '/upload', multer { ...@@ -44,6 +58,24 @@ app.use '/upload', multer {
# #
app.use(express.static(__dirname + '/public')); 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) -> app.post '/upload', (request, response) ->
console.log 'POST /upload called.' console.log 'POST /upload called.'
console.dir(request.files) console.dir(request.files)
...@@ -63,17 +95,21 @@ app.post '/upload', (request, response) -> ...@@ -63,17 +95,21 @@ app.post '/upload', (request, response) ->
error=true error=true
if error if error
#
# Something went wrong and we didn’t get the # Something went wrong and we didn’t get the
# upload we were looking for. This really # upload we were looking for. This really
# shouldn’t happen. # shouldn’t happen.
#
response.status(500).send('Video upload failed.') response.status(500).send('Video upload failed.')
else else
# #
# OK, return the path of the video # Everything’s OK, return the path of the video.
# #
response.end responseString response.end responseString
#
# Start the server.
#
server = app.listen 3000, -> server = app.listen 3000, ->
console.log "Listening on port %d", server.address().port console.log "Listening on port %d", server.address().port
......
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
"express": "^4.9.7", "express": "^4.9.7",
"moment": "^2.8.3", "moment": "^2.8.3",
"multer": "^0.1.6", "multer": "^0.1.6",
"shorthash": "0.0.2" "shorthash": "0.0.2",
"vid-streamer": "^1.0.0-alpha2"
} }
} }
...@@ -11,34 +11,32 @@ ...@@ -11,34 +11,32 @@
<h1>Sixty seconds to freedom. <em>#iamindie</em></h1> <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> <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> <form>
<label class='button-general fileContainer' id='video-button'> <label class='button-general fileContainer' id='video-button'>
<img id='camera-icon' src='images/camera.png'> <img id='camera-icon' src='images/camera.png'>
<br> <br>
1. Record a video 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> <input id='video-upload' name='my-video' type='file' accept='video/*' capture>
</label> </label>
<video id='video-preview' poster='images/video-poster-disabled.jpg'></video> <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'> <button id='upload-it-button' class='button-general'>
<span id='upload-it-button-text'>3. Upload it</span> <span id='upload-it-button-text'>3. Upload it</span>
<progress id='upload-progress' max='100' style='width:100%;'></progress> <progress id='upload-progress' max='100' style='width:100%;'></progress>
</button> </button>
</form> </form>
<div id="message">Message goes here.</div> <div id="message">A message goes here. Is it a message in a bottle? No, it’s a message in a div, silly.</div>
<!-- <img id='capture' width="100%" height="300px"> -->
<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> <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 @@ ...@@ -57,21 +55,40 @@
<h2>#iamindie</h2> <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> <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>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><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 a <em>thing</em> to be mined and farmed and sold.</p>
<p>I am not your lab rat.</p> <p>I am not your lab rat.</p>
<p><strong>I am a <em>person</em>.</strong></p> <p><strong>I am a <em>person</em>.</strong></p>
<p>I have rights and I have freedoms.</p> <p>I have rights and I have freedoms.</p>
<p>I will protect them.</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>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><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>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><strong>I want indepedent technology.</strong></p>
<p>I’m an individual.</p> <p>I’m an individual.</p>
<p>I am independent.</p> <p>I am independent.</p>
<p><strong>I am indie.</strong></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> <script src='js/index.js'></script>
</body> </body>
</html> </html>
\ No newline at end of file
...@@ -168,9 +168,7 @@ uploadItButton.addEventListener('click', function(evt) { ...@@ -168,9 +168,7 @@ uploadItButton.addEventListener('click', function(evt) {
var uploadItButton = document.getElementById('upload-it-button'); var uploadItButton = document.getElementById('upload-it-button');
uploadItButton.disabled = true; 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) { xhr.upload.addEventListener('loadend', function(e) {
...@@ -202,6 +200,17 @@ uploadItButton.addEventListener('click', function(evt) { ...@@ -202,6 +200,17 @@ uploadItButton.addEventListener('click', function(evt) {
console.log('xhr readystatechange'); console.log('xhr readystatechange');
console.log('Received: '); console.log('Received: ');
console.log(e.target.responseText); 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