web: First cut at implementing playlist support.
authorMarcus Brinkmann <marcus.brinkmann@ruhr-uni-bochum.de>
Wed, 17 May 2017 16:00:41 +0000 (18:00 +0200)
committerMarcus Brinkmann <marcus.brinkmann@ruhr-uni-bochum.de>
Wed, 17 May 2017 16:11:16 +0000 (18:11 +0200)
web/donate/index.org
web/share/campaign/campaign.js
web/share/campaign/img/thumbs/6qQt5_kJGnY.jpg [new file with mode: 0644]
web/share/campaign/img/thumbs/FpO6ePjIyVs.jpg [new file with mode: 0644]
web/share/campaign/img/thumbs/p7ULsUdBMwM.jpg [new file with mode: 0644]

index df009c2..a7e8ffa 100644 (file)
          <h2>Video of the Day: Rick Astley <small>GnuPG will never gonna give you up</small></h2>
          <div class="row">
            <div class="col-lg-10 col-lg-offset-0">
-             <div class="embed-responsive embed-responsive-16by9 camp-video" data-embed="DLzxrzFCyOs">
-               <img src="http://i0.kym-cdn.com/photos/images/facebook/001/217/711/afd.jpg_large">
+             <div class="embed-responsive embed-responsive-16by9 camp-video"
+                  data-embed="p7ULsUdBMwM,6qQt5_kJGnY,FpO6ePjIyVs" data-embed-list="PLjX3x3GHoOWLdrpy17aX5JaCnea2_CxBa">
+               <img src="/share/campaign/img/thumbs/6qQt5_kJGnY.jpg">
                <div class="play-button"></div>
                <div class="video-text">Click to start the video (requires JavaScript from YouTube).</div>
               </div>
index 00de5e9..f2094bd 100644 (file)
@@ -43,19 +43,6 @@ $(document).ready(function() {
   $('.carousel').bcSwipe({ threshold: 50 });
 });
 
-/* Defer loading Youtube iframe until the user clicks on the video.  */
-$(document).ready(function() {
-  /* For the video preview, we use this for devices without hover events.  */
-  if ("ontouchstart" in document.documentElement) {
-    $("body").addClass("touch");
-  }
-
-  /* Click handler for all videos.  */
-  $(".camp-video").one("click", function() {
-    let yt_id = $(this).data("embed");
-    $(this).html('<iframe class="embed-responsive-item" allowfullscreen src="https://www.youtube.com/embed/' + yt_id + '?autoplay=1&rel=0"></iframe>');
-  });
-});
 
 /* Fill donation amounts w/ javascript if possible.  */
 $(document).ready(function() {
@@ -73,3 +60,56 @@ $(document).ready(function() {
     });
   }
 });
+
+function get_param_from_url(name) {
+    let params = location.search.substring(1); // Snip away the ?
+    params = params.split('&');
+    let idx = 0;
+    for (; idx < params.length; idx++) {
+       let param = params[idx].split('=');
+       if (param[0] != name) {
+           return;
+       }
+       if (param.length > 1) {
+           return decodeURIComponent(param[1]);
+       }
+       return "";
+    }
+}
+
+/* Defer loading Youtube iframe until the user clicks on the video.  */
+$(document).ready(function() {
+  /* For the video preview, we use this for devices without hover events.  */
+  if ("ontouchstart" in document.documentElement) {
+    $("body").addClass("touch");
+  }
+
+    let wanted_yt_id = get_param_from_url('play');
+    $(".camp-video").each(function() {
+       let yt_ids = $(this).data("embed").split(",");
+       let yt_id_idx = yt_ids.indexOf(wanted_yt_id);
+       if (yt_id_idx != -1) {
+           $(this).data("embed", wanted_yt_id);
+           $(this).children("img").attr("src", "/share/campaign/img/thumbs/" + wanted_yt_id + ".jpg");
+           break;
+       }
+    });
+
+    /* To download the thumbs in share/campaign/img/thumbs:
+       for f in YTID1 YTID2 ...; do wget -O $f.jpg http://i1.ytimg.com/vi/$f/maxresdefault.jpg; done # or hqdefault.jpg */
+
+    /* Click handler for all videos.  */
+
+    /* http://i1.ytimg.com/vi/VGazSZUYyf4/hqdefault.jpg */
+    $(".camp-video").one("click", function() {
+       let yt_id = $(this).data("embed").split(",")[0];
+       let yt_list = $(this).data("embed-list");
+       let extra_parms = "";
+       if (yt_list) {
+           extra_parms = "&list=" + yt_list;
+       }
+       $(this).html('<iframe class="embed-responsive-item" allowfullscreen src="https://www.youtube.com/embed/'
+                    + yt_id + '?autoplay=1&modestbranding=1&rel=0' + extra_parms + '"></iframe>');
+    });
+  }
+});
diff --git a/web/share/campaign/img/thumbs/6qQt5_kJGnY.jpg b/web/share/campaign/img/thumbs/6qQt5_kJGnY.jpg
new file mode 100644 (file)
index 0000000..52bdf66
Binary files /dev/null and b/web/share/campaign/img/thumbs/6qQt5_kJGnY.jpg differ
diff --git a/web/share/campaign/img/thumbs/FpO6ePjIyVs.jpg b/web/share/campaign/img/thumbs/FpO6ePjIyVs.jpg
new file mode 100644 (file)
index 0000000..7435d26
Binary files /dev/null and b/web/share/campaign/img/thumbs/FpO6ePjIyVs.jpg differ
diff --git a/web/share/campaign/img/thumbs/p7ULsUdBMwM.jpg b/web/share/campaign/img/thumbs/p7ULsUdBMwM.jpg
new file mode 100644 (file)
index 0000000..9756e77
Binary files /dev/null and b/web/share/campaign/img/thumbs/p7ULsUdBMwM.jpg differ