Add video from Paris

CHANGES.rst

@@ -5,11 +5,15 @@ www.gafam.info CHANGES
 
 in progress
 -----------
+
+2018-01-24 0.6.0
+----------------
 - Fix HTML description metadata
 - Add translation to Esperanto. Thanks, David!
 - Add translation to Russian. Thanks, Elena!
 - Add translation to Mandarin Chinese. Thanks, Jenny!
 - Improve typography in "reproduce" section
+- Add video from Paris
 
 2018-01-17 0.5.0
 ----------------

README.rst

@@ -62,3 +62,17 @@ Create thumbnail image from poster PDF
     # Copy to target directory
     cp gafam-german-card.gif ../htdocs/static/img/
 
+
+Download MP4 video from Twitter
+===============================
+::
+
+    # Just a workbench
+    mkdir tmp; cd tmp
+
+    # youtube-dl does it all ;]
+    youtube-dl --output 'lqdn-gafam-paris.mp4' https://twitter.com/laquadrature/status/944148790684069888
+
+    # Upload to content web space
+    make ptrace source=lqdn-gafam-paris.mp4
+

TODO.rst

@@ -21,7 +21,7 @@ Ongoing
 ****
 Todo
 ****
-- [o] Add video from the Paris campaign
+- [x] Add video from the Paris campaign
     > Also, here is a video of them spreading it in Paris:
     > https://twitter.com/laquadrature/status/944148790684069888
 

htdocs/index.html

@@ -216,7 +216,31 @@
 
                 </li>
                 <li class="content is-spaced">
-                    Go ahead, disseminate the printouts in your local neighbourhood and send pictures. Cheers!
+
+                    <p class="is-size-5 has-text-weight-semibold">
+                        Go ahead, disseminate the printouts in your local neighbourhood and send pictures. Cheers!
+                    </p>
+
+                    <div class="columns is-variable is-8">
+                        <div class="column is-4">
+                            <div class="card">
+                                <div class="card-image">
+                                    <div id="lqdn-gafam-posters-paris-video"/>
+                                </div>
+                                <div class="card-content">
+                                    <div class="content">
+                                        Night, cold, rain - nothing stops those who support La Quadrature.
+                                    </div>
+                                </div>
+                                <footer class="card-footer">
+                                    <a class="card-footer-item" href="https://twitter.com/laquadrature/status/944148790684069888">
+                                        <time datetime="2017-12-22">22 Dec 2017</time>
+                                    </a>
+                                </footer>
+                            </div>
+                        </div>
+                    </div>
+
                 </li>
             </ol>
         </p>

package.json

@@ -31,6 +31,7 @@
         "css-loader": "^0.28.7",
         "expose-loader": "^0.7.3",
         "file-loader": "^1.1.5",
+        "flowplayer": "^7.2.1",
         "font-awesome": "^4.7.0",
         "github-embed": "^1.0.1",
         "github-fork-ribbon-css": "^0.2.1",

src/js/main.js

@@ -59,4 +59,19 @@ $(document).ready(function() {
         ]
     });
 
+
+    // Initialize video player
+    require('flowplayer/dist/skin/skin.css')
+    var flowplayer = require('flowplayer/dist/flowplayer.js');
+
+    flowplayer('#lqdn-gafam-posters-paris-video', {
+        swf: require('flowplayer/dist/flowplayer.swf'),
+        clip: {
+            sources: [{
+                type: 'video/mp4',
+                src: 'https://ptrace.gafam.info/2017-12-22_lqdn-gafam-paris.mp4'
+            }]
+        }
+    });
+
 });