From 95c1f913c69768c476da6467c927e73a01faac23 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Fri, 7 Sep 2018 11:49:22 +0200
Subject: [PATCH] Videoplayer small improvements

* Disable volume change on scroll
* Add L key shortcut to toggle loop
* Minor style fixes (missing font family)
---
 src/styles/plugins/_videoplayer.sass          | 11 +--
 .../nodes/custom/asset/video/view_embed.pug   | 95 +++++++++++--------
 2 files changed, 61 insertions(+), 45 deletions(-)

diff --git a/src/styles/plugins/_videoplayer.sass b/src/styles/plugins/_videoplayer.sass
index 94a7e82f..99040ca1 100644
--- a/src/styles/plugins/_videoplayer.sass
+++ b/src/styles/plugins/_videoplayer.sass
@@ -1,5 +1,5 @@
 $videoplayer-controls-color: white
-$videoplayer-background-color: $black
+$videoplayer-background-color: darken($primary, 10%)
 
 .video-js
 	.vjs-big-play-button:before, .vjs-control:before, .vjs-modal-dialog
@@ -30,7 +30,6 @@ $videoplayer-background-color: $black
 	font-weight: normal
 	font-style: normal
 
-
 .vjs-icon-play
 	font-family: VideoJS
 	font-weight: normal
@@ -285,7 +284,6 @@ $videoplayer-background-color: $black
 	line-height: 1
 	font-weight: normal
 	font-style: normal
-	font-family: Arial, Helvetica, sans-serif
 	-webkit-user-select: none
 	-moz-user-select: none
 	-ms-user-select: none
@@ -712,8 +710,8 @@ body.vjs-full-window
 			z-index: 1
 
 		.vjs-time-tooltip
-			background-color: $videoplayer-background-color
 			color: $videoplayer-controls-color
+			background-color: $videoplayer-background-color
 			z-index: 1
 
 			&:after
@@ -735,9 +733,9 @@ body.vjs-full-window
 
 .vjs-time-tooltip
 	background-color: $videoplayer-controls-color
-	border-radius: 3px
+	border-radius: $border-radius
 	color: $videoplayer-background-color
-	font-family: $font-body
+	font-family: $font-family-base
 	font-size: 1.2em
 	font-weight: bold
 	padding: 5px 8px
@@ -1041,7 +1039,6 @@ video::-webkit-media-text-track-display
 	&:before
 		color: $videoplayer-controls-color
 		content: 'X'
-		font-family: Arial, Helvetica, sans-serif
 		font-size: 4em
 		left: 0
 		line-height: 1
diff --git a/src/templates/nodes/custom/asset/video/view_embed.pug b/src/templates/nodes/custom/asset/video/view_embed.pug
index 5edc1ad2..f62e1ef5 100644
--- a/src/templates/nodes/custom/asset/video/view_embed.pug
+++ b/src/templates/nodes/custom/asset/video/view_embed.pug
@@ -52,7 +52,6 @@ script(type="text/javascript").
 	{% if node.video_sources %}
 
 	var videoPlayer = document.getElementById('videoplayer');
-
 	var options = {
 		controlBar: {
 			volumePanel: { inline: false }
@@ -65,7 +64,62 @@ script(type="text/javascript").
 			'eventCategory' : '{{ node.project }}',
 			'eventsToTrack' : ['start', 'error', 'percentsPlayed']
 		});
-		this.hotkeys();
+
+		this.hotkeys({
+			enableVolumeScroll: false,
+			customKeys: {
+				KeyL: {
+					key: function(event) {
+						return (event.which === 76);
+					},
+					handler: function(player, options, event) {
+						videoPlayerToggleLoop(videoPlayer, videoPlayerLoopButton);
+					}
+				}
+			}
+		});
+
+		// Generic utility to add-buttons to the player.
+		function addVideoPlayerButton(data) {
+
+			var controlBar,
+					newButton = document.createElement('button'),
+					buttonContent = document.createElement('span');
+
+			newButton.className = 'vjs-control vjs-button ' + data.class;
+			buttonContent.className = 'vjs-icon-placeholder';
+			newButton.setAttribute('title', data.title);
+
+			newButton.appendChild(buttonContent);
+			controlBar = document.getElementsByClassName('vjs-control-bar')[0];
+			insertBeforeButton = document.getElementsByClassName('vjs-fullscreen-control')[0];
+			controlBar.insertBefore(newButton, insertBeforeButton);
+
+			return newButton;
+		}
+
+		// Video loop stuff. TODO: Move it to video_plugins.js
+		var videoPlayerLoopButton = addVideoPlayerButton({
+			player: videoPlayer,
+			class: 'vjs-loop-button',
+			icon: 'pi-replay',
+			title: 'Loop'
+		});
+
+		function videoPlayerToggleLoop(videoPlayer, videoPlayerLoopButton) {
+			if (videoPlayer.loop){
+				videoPlayer.loop = false;
+				$(videoPlayerLoopButton).removeClass('vjs-control-active');
+			} else {
+				videoPlayer.loop = true;
+				$(videoPlayerLoopButton).addClass('vjs-control-active');
+			}
+		}
+
+		videoPlayerLoopButton.onclick = function() {
+			videoPlayerToggleLoop(videoPlayer, videoPlayerLoopButton);
+		};
+
 		this.rememberVolumePlugin();
 
 		{% if current_user.is_authenticated %}
@@ -75,45 +129,10 @@ script(type="text/javascript").
 			'report_url': report_url,
 			'fetch_progress_url': fetch_progress_url,
 		});
+
 		{% endif %}
 	});
 
-	function addVideoPlayerButton(data) {
-
-		var controlBar,
-				newButton = document.createElement('button'),
-				buttonContent = document.createElement('span');
-
-		newButton.className = 'vjs-control vjs-button ' + data.class;
-		buttonContent.className = 'vjs-icon-placeholder';
-		newButton.setAttribute('title', data.title);
-
-		newButton.appendChild(buttonContent);
-		controlBar = document.getElementsByClassName('vjs-control-bar')[0];
-		insertBeforeButton = document.getElementsByClassName('vjs-fullscreen-control')[0];
-		controlBar.insertBefore(newButton, insertBeforeButton);
-
-		return newButton;
-	}
-
-	var videoPlayerLoopButton = addVideoPlayerButton({
-		player: videoPlayer,
-		class: 'vjs-loop-button',
-		icon: 'pi-replay',
-		title: 'Loop'
-	});
-
-	videoPlayerLoopButton.onclick = function() {
-		if (videoPlayer.loop){
-			videoPlayer.loop = false;
-			$(this).removeClass('vjs-control-active');
-
-		} else {
-			videoPlayer.loop = true;
-			$(this).addClass('vjs-control-active');
-		}
-	};
-
 	{% endif %} // if node.video_sources
 
 | {% endblock node_scripts %}