Change Lightbox to Support YouTube Videos.

The lightbox will now distinguish between whether or not something is a
photo and a YouTube video by the class name of the message inline
preview. It embeds the YouTube video in the lightbox as an iFrame
rather than previewing the video screenshot.

static/js/click_handlers.js

@@ -387,14 +387,26 @@ $(function () {
         $("#main_div").on("click", ".message_inline_image a", function (e) {
             var img = e.target,
                 row = rows.id($(img).closest(".message_row")),
-                user = current_msg_list.get(row).sender_full_name;
+                user = current_msg_list.get(row).sender_full_name,
+                $target = $(this);
 
             // prevent the link from opening in a new page.
             e.preventDefault();
             // prevent the message compose dialog from happening.
             e.stopPropagation();
 
-            ui.lightbox_photo(img, user);
+            if ($target.parent().hasClass("youtube-video")) {
+                ui.lightbox({
+                    type: "youtube",
+                    id: $target.data("id")
+                });
+            } else {
+                ui.lightbox({
+                    type: "photo",
+                    image: img,
+                    user: user
+                });
+            }
         });
 
         $("#overlay .exit").click(function (e) {

static/js/ui.js

@@ -281,26 +281,59 @@ exports.small_avatar_url = function (message) {
     }
 };
 
+exports.lightbox = function (data) {
+    switch (data.type) {
+        case "photo":
+            exports.lightbox_photo(data.image, data.user);
+            break;
+        case "youtube":
+            exports.youtube_video(data.id);
+            break;
+        default:
+            break;
+    }
+
+    $("#overlay").addClass("show");
+};
+
 exports.lightbox_photo = function (image, user) {
     // image should be an Image Object in JavaScript.
     var url = $(image).attr("src"),
         title = $(image).parent().attr("title");
 
+    $("#overlay .player-container").hide();
+    $("#overlay .image-actions, .image-description, .download").show();
+
     $("#overlay .image-preview")
+        .show()
         .css("background-image", "url(" + url + ")");
 
-    $("#overlay").addClass("show");
+    $(".image-description .title").text(title || "N/A");
-
+    $(".image-description .user").text(user);
-    $(".title").text(title || "N/A");
-    $(".user").text(user);
 
     $(".image-actions .open, .image-actions .download").attr("href", url);
 };
 
 exports.exit_lightbox_photo = function (image) {
     $("#overlay").removeClass("show");
+    $(".player-container iframe").remove();
 };
 
+exports.youtube_video = function (id) {
+    $("#overlay .image-preview, .image-description, .download").hide();
+
+    var iframe = document.createElement("iframe");
+    iframe.width = window.innerWidth;
+    iframe.height = window.innerWidth * 0.5625;
+    iframe.src = "https://www.youtube.com/embed/" + id;
+    iframe.setAttribute("frameborder", 0);
+    iframe.setAttribute("allowfullscreen", true);
+
+    $("#overlay .player-container").html("").show().append(iframe);
+    $(".image-actions .open").attr("href", "https://youtu.be/" + id);
+};
+// k3O01EfM5fU
+
 var loading_more_messages_indicator_showing = false;
 exports.show_loading_more_messages_indicator = function () {
     if (! loading_more_messages_indicator_showing) {

static/styles/overlay.css

@@ -14,6 +14,7 @@
     z-index: 101;
 
     transition: all 0.2s ease;
+    overflow: auto;
 
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
@@ -115,6 +116,20 @@
     text-overflow: ellipsis;
 }
 
+#overlay .player-container {
+    height: calc(100vh - 71px);
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    align-items: center;
+}
+
+#overlay .player-container iframe {
+    width: 80vw;
+    height: 45vw;
+    margin: auto;
+}
+
 #overlay .image-description .user {
     font-weight: 300;
 }

templates/zerver/image-overlay.html

@@ -18,4 +18,5 @@
   </div>
 
   <div class="image-preview"></div>
+  <div class="player-container"></div>
 </div>