Videojs: Show endscreen with links

pillar/web/static/assets/js/vendor/videojs.endcard.js

@@ -0,0 +1,109 @@
+(function(vjs) {
+"use strict";  
+  var
+  extend = function(obj) {
+    var arg, i, k;
+    for (i = 1; i < arguments.length; i++) {
+      arg = arguments[i];
+      for (k in arg) {
+        if (arg.hasOwnProperty(k)) {
+          obj[k] = arg[k];
+        }
+      }
+    }
+    return obj;
+  },
+
+  defaults = {
+    count: 10,
+    counter: "counter",
+    countdown: "countdown",
+    countdown_text: "Next video in:",
+    endcard: "player-endcard",
+    related: "related-content",
+    next: "next-video",
+    getRelatedContent: function(callback){callback();},
+    getNextVid: function(callback){callback();}
+  },
+
+  endcard = function(options) {
+    var player = this;
+    var el = this.el();
+    var settings = extend({}, defaults, options || {});
+
+    // set background
+    var card = document.createElement('div');
+    card.id = settings.endcard;
+    card.style.display = 'none';
+
+    el.appendChild(card);
+
+    settings.getRelatedContent(function(content) {
+      if (content instanceof Array) {
+        var related_content_div = document.createElement('div');
+        related_content_div.id = settings.related;
+
+        for (var i = 0; i < content.length; i++) {
+          related_content_div.appendChild(content[i]);
+        }
+
+        card.appendChild(related_content_div);
+      }
+      else {
+        throw new TypeError("options.getRelatedContent must return an array");
+      }
+    });
+
+    settings.getNextVid(function(next) {
+      if (typeof next !== "undefined") {
+        var next_div = document.createElement('div');
+        var counter = document.createElement('span');
+        var countdown = document.createElement('div');
+        counter.id = settings.counter;
+        countdown.id = settings.countdown;
+        next_div.id = settings.next;
+
+        countdown.innerHTML = settings.countdown_text;
+        countdown.appendChild(counter);
+        next_div.appendChild(countdown);
+        next_div.appendChild(next);
+
+        card.appendChild(next_div);
+      }
+    });
+
+    var counter_started = 0;
+    player.on('ended', function() {
+      card.style.display = 'block';
+      var next = document.getElementById(settings.next);
+      if (next !== null) {
+        var href = next.getElementsByTagName("a")[0].href;
+        var count = settings.count;
+        counter.innerHTML = count;
+
+        var interval = setInterval(function(){
+          count--;
+          if (count <= 0) {
+            clearInterval(interval);
+            window.location = href;
+            return;
+          }
+          counter.innerHTML = count;
+        }, 1000);
+      }
+      if (counter_started === 0) {
+        counter_started++;
+        player.on('playing', function() {
+          card.style.display = 'none';
+          clearInterval(interval);
+        });
+      }
+    });
+
+
+
+  };
+
+  vjs.plugin('endcard', endcard);
+    
+})(window.videojs);

src/styles/plugins/_videoplayer.sass

@@ -1365,3 +1365,28 @@ video::-webkit-media-text-track-display
 			position: absolute
 			bottom: 3em
 			left: 0.5em
+
+
+#player-endcard
+	background-color: rgba($black, .5)
+	bottom: 0
+	font-size: 1.5em
+	left: 0
+	position: absolute
+	right: 0
+	top: 0
+	z-index: 1
+
+	#related-content,
+	.end-card-content
+		@extend .align-items-center
+		@extend .d-flex
+		@extend .flex-column
+		@extend .h-100
+		@extend .justify-content-center
+
+	.btn-video-overlay
+		border: thin solid $white
+
+		&:hover
+			background-color: rgba($white, .5)

src/templates/nodes/custom/asset/video/view_embed.pug

@@ -91,9 +91,32 @@ script(type="text/javascript").
 			'fetch_progress_url': fetch_progress_url,
 		});
 
+		this.endcard({
+			getRelatedContent: getRelatedContent
+		});
+
 		{% endif %}
 	});
 
+	function getRelatedContent(callback) {
+			var el = document.createElement('div');
+			el.className  = 'end-card-content';
+			el.innerHTML  = '<h4><button class="js-video-play my-3 px-5 btn btn-video-overlay"><i class="pi-play"></i> Play Again</button></h4>';
+			el.innerHTML += '<button class="js-video-loop px-4 btn btn-sm btn-video-overlay"><i class="pi-back"></i> Loop</button>';
+			setTimeout(function(){
+					callback([el])
+			}, 0);
+	}
+
+	$('body').on('click', '.js-video-play', function(){
+		videoPlayer.play();
+	});
+
+	$('body').on('click', '.js-video-loop', function(){
+		videoPlayerToggleLoop(videoPlayer, videoPlayerLoopButton);
+		videoPlayer.play();
+	});
+
 	// Generic utility to add-buttons to the player.
 	function addVideoPlayerButton(data) {