Player Scroll/Zoom Overlay

This patch provides a visual hint about the somewhat hidden zoom functionality in the Opencast player, explaining that shift + scroll can be used to zoom when just scrolling.
opencast · Sep 27, 2019 · 826333c · 826333c
1 parent cc69cf0
commit 826333c
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 1 deletion.
diff --git a/modules/engage-theodul-plugin-video-videojs/src/main/resources/static/language/en-US.json b/modules/engage-theodul-plugin-video-videojs/src/main/resources/static/language/en-US.json
@@ -11,5 +11,6 @@
     "msg_startPlayingToSetTime": "Please start playing the video before setting a playback time.",
     "msg_waitToSeek": "Seeking is not possible until the video is loaded.",
     "msg_startPlayingToSeek": "Seeking is not possible before clicking on the Play button at least once.",
-    "chromeBuffer": "The buffer checker has been disabled due to Chrome limitations. It is possible that you will encounter problems with the video playback."
+    "chromeBuffer": "The buffer checker has been disabled due to Chrome limitations. It is possible that you will encounter problems with the video playback.",
+    "scroll_overlay_text": "Use shift + scroll to zoom."
 }
diff --git a/modules/engage-theodul-plugin-video-videojs/src/main/resources/static/main.js b/modules/engage-theodul-plugin-video-videojs/src/main/resources/static/main.js
@@ -254,6 +254,7 @@ define(['require', 'jquery', 'underscore', 'backbone', 'basil', 'bowser', 'engag
   var isPiP = true;
   var pipPos = 'left';
   var activeCaption = undefined;
+  var overlayTimer;
 
   var foundQualities = undefined;
   var zoomTimeout = 500;
@@ -758,6 +759,18 @@ define(['require', 'jquery', 'underscore', 'backbone', 'basil', 'bowser', 'engag
         if (event.deltaY < 0) {
           Engage.trigger(events.setZoomLevel.getName(), [-zoom_step_size]);
         }
+      } else {
+        // show zoom overlay
+        var overlay = document.getElementById('overlay'),
+            overlaytext = document.getElementById('overlaytext'),
+            videodisplay = document.getElementById('engage_video');
+        overlaytext.innerText = translate('scroll_overlay_text', 'Use shift + scroll to zoom');
+        overlay.style.display = 'block';
+        overlay.style.top = videodisplay.offsetTop + 'px';
+        overlay.style.height = videodisplay.offsetHeight + 'px';
+        overlayTimer = setTimeout(function() {
+          document.getElementById('overlay').style.display = 'none';
+        }, 1500);
       }
 
       wheelEvent = event;

diff --git a/modules/engage-theodul-plugin-video-videojs/src/main/resources/static/styles/desktop.css b/modules/engage-theodul-plugin-video-videojs/src/main/resources/static/styles/desktop.css
@@ -102,3 +102,27 @@
     top: 88%;
     border: 1px solid white;
 }
+
+#overlay {
+    position: absolute;
+    display: none;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0,0,0,0.5);
+    z-index: 2;
+    cursor: pointer;
+}
+
+#overlaytext {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    font-size: 16px;
+    color: white;
+    transform: translate(-50%,-50%);
+    -ms-transform: translate(-50%,-50%);
+}
diff --git a/modules/engage-theodul-plugin-video-videojs/src/main/resources/static/templates/desktop.html b/modules/engage-theodul-plugin-video-videojs/src/main/resources/static/templates/desktop.html
@@ -35,3 +35,7 @@
 	</div>
 <% } %>
 <% } %>
+
+<div id="overlay" onclick="off()">
+  <div id="overlaytext">Use shift + scroll to zoom</div>
+</div>