Commit 6bcf49d8 authored by Aral Balkan's avatar Aral Balkan
Browse files

Added Twitter intents and updated the successful update message. Also added a...

Added Twitter intents and updated the successful update message. Also added a Tweet link to the video pages.
parent 4bfff2f4
......@@ -73,8 +73,7 @@ app.get '/video/:videoName', (request, response) ->
# For dev — remove from production.
videoTemplate = (fs.readFileSync 'templates/video.html').toString()
videoHTML = videoTemplate.replace '{{VIDEO}}', request.params.videoName
videoHTML = videoTemplate.replace /\{\{VIDEO\}\}/g, request.params.videoName
console.log videoHTML
......
......@@ -75,6 +75,43 @@
margin-top: 21px;
}
#message
{
border: 5px solid #3498db;
/*border-width: 5px;*/
border-radius: 8px;
padding: 0px 12px 0px 12px;
margin-top: 12px;
}
#message .record-your-own-video
{
text-align: center;
font-size: 18px;
}
#message a.tweet-link
{
text-decoration:none;
font-size: 20px;
color:black;
}
#message p.tweet-button
{
text-align:center;
margin-top:24px;
display:block;
background-color: #ddd;
padding:12px;
border-radius: 8px;
}
#message img
{
width:24px;
}
/*
File input styling hack courtesy of Barney Carroll
(https://coderwall.com/p/uer3ow)
......
......@@ -19,8 +19,9 @@ uploadItButton.disabled = true;
// videoPreview.style.display = 'none';
// uploadItButton.style.display = 'none';
progressBar.style.display = 'none';
messageDisplay.style.display = 'none';
mobileNotice.style.display = 'none';
messageDisplay.style.display = 'none';
// Only way to disable the video preview I’ve been able to find
// (setting disabled=true doesn’t have an effect).
......@@ -176,13 +177,31 @@ uploadItButton.addEventListener('click', function(evt) {
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>'
// message = '<div id=\'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>'
// + '</div>'
//
// Display status message and display link to the user’s video.
//
tweetLink = 'https://twitter.com/intent/tweet?'
+ 'text=I am indie.&'
+ 'url=https://iam.ind.ie/video/' + videoName
+ 'hashtags=iamindie&'
+ 'related=indie:For Ind.ie updates,aral:For thoughts from the founder and lead designer,laurakalbag:For design and accessibility,jo_annap:For updates on operations,ridiculousgnome:For development,victordons: For industrial design'
message = '<h2>Uploaded. Thank you!</h2>'
+ '<p>Here’s the link to your video:</p>'
+ '<p style="text-align:center;"><a href="/video/'+ videoName +'">iam.ind.ie/video/' + videoName +'</a></p>'
+ '<p>Please share your video with the #iamindie hashtag to help us spread the word.</p>'
+ '<a href="'+ tweetLink +'" style="text-decoration:none; font-size: 20px; color:black;">'
+ '<p style="text-align:center; margin-top:24px; display:block; background-color: #ddd; padding:12px; border-radius: 8px;"><img src="/images/twitter-bird-blue-48.png" style="width:24px;"> Tweet it</p>'
+ '</a>'
displayMessage(message);
// var nextPage = '/video/' + videoName;
......
......@@ -2,10 +2,19 @@
<html lang='en'>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta name='twitter:card' content='photo' />
<meta name='twitter:site' content='@indie' />
<meta name='twitter:title' content='Ind.ie — Designing Hope' />
<meta name='twitter:description' content='At Ind.ie we are designing independent technologies that protect fundamental freedoms, human rights, and democracy.' />
<meta name='twitter:image' content='https://ind.ie/assets/images/hope.png' />
<meta name='twitter:url' content='https://iam.ind.ie/videos/{{VIDEO}}' />
<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>
......@@ -13,13 +22,21 @@
<video id='video' src='/videos/{{VIDEO}}' preload='auto' controls></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>
<p>Do you care about freedom, human rights, and democracy? <a href='https://ind.ie'>So do we</a>.</p>
<div id='message'>
<h2>Lend us your voice</h2>
<p class='record-your-own-video'><a href='/'>Record your own video</a></p>
<p>Please share this video with the #iamindie hashtag to help us spread the word about Ind.ie.</p>
<a href='https://twitter.com/intent/tweet?text=I%20am%20indie.&amp;url=https://iam.ind.ie/video/{{VIDEO}}&amp;hashtags=iamindie&amp;related=indie:For%20Ind.ie%20updates,aral:For%20thoughts%20from%20the%20founder%20and%20lead%20designer,laurakalbag:For%20design%20and%20accessibility,jo_annap:For%20updates%20on%20operations,ridiculousgnome:For%20development,victordons:%20For%20industrial%20design' class='tweet-link'><p class='tweet-button'><img src='/images/twitter-bird-blue-48.png'> Tweet this</p></a>
</div>
<script>
// Get the video element to load.
var video = document.getElementById('video');
video.load();
</script>
</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