Merge pull request #3299 from jwplayer/feature/keyboard-shortcuts-too…

…ltip

Provide information about keyboard shortcut

src/css/controls.less

@@ -5,8 +5,10 @@
 @import "controls/imports/controlbar.less";
 @import "controls/imports/slider.less";
 
+@import "controls/imports/modal.less";
 @import "controls/imports/rightclick.less";
 @import "controls/imports/tooltip.less";
+@import "controls/imports/shortcuts-tooltip.less";
 @import "controls/imports/skipad.less";
 @import "controls/imports/cast.less";
 @import "controls/imports/nextup.less";

src/css/controls/imports/info-overlay.less

@@ -8,8 +8,6 @@
     user-select: text;
     overflow: hidden;
     flex-direction: column;
-    max-width: calc(50% + @mobile-touch-target);
-    max-height: calc(50% + @mobile-touch-target);
 
     .jw-info-close {
         flex: 0 0 auto;
@@ -19,17 +17,6 @@
     .jw-info-open & {
         display: flex;
     }
-
-    .jw-breakpoint-2 &,
-    .jw-flag-small-player & {
-        bottom: 0;
-        right: 0;
-        height: 100%;
-        width: 100%;
-        max-height: none;
-        max-width: none;
-        z-index: 1;
-    }
 }
 
 .jw-info-container {

src/css/controls/imports/modal.less

@@ -0,0 +1,25 @@
+.jw-modal {
+    width: 284px;
+
+    .jw-breakpoint-7 &,
+    .jw-breakpoint-6 &,
+    .jw-breakpoint-5 & {
+        height: 232px;
+    }
+
+    .jw-breakpoint-4 &,
+    .jw-breakpoint-3 & {
+        height: 192px;
+    }
+
+    .jw-breakpoint-2 &,
+    .jw-flag-small-player & {
+        bottom: 0;
+        right: 0;
+        height: 100%;
+        width: 100%;
+        max-height: none;
+        max-width: none;
+        z-index: 1;
+    }
+}

src/css/controls/imports/rightclick.less

@@ -58,7 +58,7 @@
             vertical-align: middle;
 
             .jw-rightclick-link {
-                color: @rightclick-secondary-text;
+                color: @rightclick-primary-text;
 
                 span {
                     color: @rightclick-primary-text;
@@ -68,7 +68,8 @@
     }
 
     .jw-info-overlay-item,
-    .jw-share-item {
+    .jw-share-item,
+    .jw-shortcuts-item {
         border: none;
         background-color: transparent;
         outline: none;

src/css/controls/imports/shortcuts-tooltip.less

@@ -0,0 +1,84 @@
+//  Import added so this file can be used in unit testing.
+@import "../../shared-imports/mixins.less";
+
+@rightclick-primary-text: #fefefe;
+@rightclick-secondary-text: #333;
+@rightclick-bg: #333;
+@rightclick-secondary-bg: #fefefe;
+@ui-padding: 0.5em;
+@ui-margin: 20px;
+
+.jwplayer .jw-shortcuts-tooltip {
+    .topleft(50%, 50%);
+    background: @menu-background-color;
+    transform: translate(-50%, -50%);
+    display: none;
+    color: @active-color;
+    pointer-events: all;
+    user-select: text;
+    overflow: hidden;
+    flex-direction: column;
+
+    &.jw-open {
+        display: flex;
+    }
+
+    .jw-shortcuts-close {
+        flex: 0 0 auto;
+        margin: 5px 5px 5px auto;
+
+        &:focus {
+            border: none;
+            outline: none;
+        }
+    }
+
+    .jw-shortcuts-container {
+        .scrollbar-style();
+        display: flex;
+        flex: 1 1 auto;
+        flex-flow: column;
+        margin: 0 20px 20px;
+        overflow-y: auto;
+        padding: 5px;
+    }
+
+    .jw-shortcuts-title {
+        font-size: 12px;
+        font-weight: bold;
+    }
+
+    .jw-shortcuts-description {
+        margin-bottom: 30px;
+    }
+
+    .jw-shortcuts-tooltip-list {
+        display: flex;
+        max-width: 340px;
+
+        .jw-shortcuts-tooltip-descriptions {
+            list-style: none;
+            padding-left: 0;
+            font-size: 12px;
+            margin-right: 20px;
+            margin-left: 10px;
+            padding-top: 5px;
+        }
+
+        .jw-shortcuts-tooltip-keys {
+            list-style: none;
+            font-size: 12px;
+            padding-top: 5px;
+
+            .jw-hotkey {
+                color: @rightclick-secondary-text;
+                background: @rightclick-secondary-bg;
+                padding: 7px 10px;
+            }
+        }
+
+        li {
+            line-height: 2.15rem;
+        }
+    }
+}

src/js/view/controls/controls.js

@@ -15,6 +15,7 @@ import { cloneIcon } from 'view/controls/icons';
 import ErrorContainer from 'view/error-container';
 import instances from 'api/players';
 import InfoOverlay from 'view/controls/info-overlay';
+import ShortcutsTooltip from 'view/controls/shortcuts-tooltip';
 import FloatingCloseButton from 'view/floating-close-button';
 
 require('css/controls.less');
@@ -57,6 +58,7 @@ export default class Controls {
         this.wrapperElement = playerContainer.querySelector('.jw-wrapper');
         this.rightClickMenu = null;
         this.settingsMenu = null;
+        this.shortcutsTooltip = null;
         this.showing = false;
         this.muteChangeCallback = null;
         this.unmuteCallback = null;
@@ -115,8 +117,16 @@ export default class Controls {
         // Touch UI mode when we're on mobile and we have a percentage height or we can fit the large UI in
         this.infoOverlay = new InfoOverlay(element, model, api, visible => {
             toggleClass(this.div, 'jw-info-open', visible);
+            if (visible) {
+                //  Focus modal close button on open
+                this.div.querySelector('.jw-info-close').focus();
+            }  
         });
-        this.rightClickMenu = new RightClick(this.infoOverlay);
+        //  Add keyboard shortcuts if not on mobi;e
+        if (!OS.mobile) {
+            this.shortcutsTooltip = new ShortcutsTooltip(this.playerContainer, api, model);
+        }
+        this.rightClickMenu = new RightClick(this.infoOverlay, this.shortcutsTooltip);
         if (touchMode) {
             addClass(this.playerContainer, 'jw-flag-touch');
             this.rightClickMenu.setup(model, this.playerContainer, this.playerContainer);
@@ -200,6 +210,7 @@ export default class Controls {
         if (OS.mobile) {
             this.div.appendChild(settingsMenu.element());
         } else {
+            this.playerContainer.setAttribute('aria-describedby', 'jw-shortcuts-tooltip-explanation');
             this.div.insertBefore(settingsMenu.element(), controlbar.element());
         }
 
@@ -262,7 +273,6 @@ export default class Controls {
             }
             const menuHidden = !this.settingsMenu.visible;
             const adMode = this.instreamState;
-
             switch (evt.keyCode) {
                 case 27: // Esc
                     if (model.get('fullscreen')) {
@@ -275,6 +285,17 @@ export default class Controls {
                             related.close({ type: 'escape' });
                         }
                     }
+                    //  Close all modals on esc press.
+                    if (this.rightClickMenu.el) {
+                        this.rightClickMenu.hideMenuHandler();
+                    }
+                    if (this.infoOverlay.visible) {
+                        this.infoOverlay.close();
+                    }
+                    if (this.shortcutsTooltip) {
+                        this.shortcutsTooltip.close();
+
+                    }
                     break;
                 case 13: // enter
                 case 32: // space
@@ -316,6 +337,11 @@ export default class Controls {
                 case 70: // f-key
                     api.setFullscreen();
                     break;
+                case 191: // ? key
+                    if (this.shortcutsTooltip) {
+                        this.shortcutsTooltip.toggleVisibility();
+                    }
+                    break;
                 default:
                     if (evt.keyCode >= 48 && evt.keyCode <= 59) {
                         // if 0-9 number key, move to n/10 of the percentage of the video
@@ -357,9 +383,25 @@ export default class Controls {
                 this.userInactive();
             }
         };
+
         this.playerContainer.addEventListener('blur', blurCallback, true);
         this.blurCallback = blurCallback;
 
+        //  Remove new shortcut tooltip description after first read.
+        const onRemoveShortcutsDescription = () => {
+            const ariaDescriptionId = this.playerContainer.getAttribute('aria-describedby');
+            //  Remove tooltip description after first focus.
+            if (ariaDescriptionId === 'jw-shortcuts-tooltip-explanation') {
+                this.playerContainer.removeAttribute('aria-describedby');
+            }
+            this.playerContainer.removeEventListener('blur', onRemoveShortcutsDescription, true);
+        };
+
+        if (this.shortcutsTooltip) {
+            this.playerContainer.addEventListener('blur', onRemoveShortcutsDescription, true);
+            this.onRemoveShortcutsDescription = onRemoveShortcutsDescription;
+        }
+
         // Show controls when enabled
         this.userActive();
 
@@ -410,6 +452,10 @@ export default class Controls {
             playerContainer.removeEventListener('blur', this.blurCallback);
         }
 
+        if (this.onRemoveShortcutsDescription) {
+            playerContainer.removeEventListener('blur', this.onRemoveShortcutsDescription);
+        }
+
         if (this.displayContainer) {
             this.displayContainer.destroy();
         }

src/js/view/controls/rightclick.js

@@ -17,8 +17,9 @@ function createDomElement(html) {
 }
 
 export default class RightClick {
-    constructor(infoOverlay) {
+    constructor(infoOverlay, shortcutsTooltip) {
         this.infoOverlay = infoOverlay;
+        this.shortcutsTooltip = shortcutsTooltip;
     }
 
     buildArray() {
@@ -42,14 +43,20 @@ export default class RightClick {
         };
 
         const provider = model.get('provider');
+        const menuItems = menu.items;
         if (provider && provider.name.indexOf('flash') >= 0) {
             const text = 'Flash Version ' + flashVersion();
-            menu.items.push({
+            menuItems.push({
                 title: text,
                 type: 'link',
                 link: 'http://www.adobe.com/software/flash/about/'
             });
         }
+        if (this.shortcutsTooltip) {
+            menuItems.splice(menuItems.length - 1, 0, {
+                type: 'keyboardShortcuts'
+            });
+        }
 
         return menu;
     }
@@ -140,6 +147,12 @@ export default class RightClick {
             this.hideMenu();
             this.infoOverlay.open();
         };
+        this.shortcutsTooltipHandler = () => {
+            // Open the info overlay if clicked, and hide the rightclick menu
+            this.mouseOverContext = false;
+            this.hideMenu();
+            this.shortcutsTooltip.open();
+        };
     }
 
     setup(_model, _playerElement, layer) {
@@ -164,6 +177,7 @@ export default class RightClick {
             this.el.addEventListener('mouseout', this.outHandler);
         }
         this.el.querySelector('.jw-info-overlay-item').addEventListener('click', this.infoOverlayHandler);
+        this.el.querySelector('.jw-shortcuts-item').addEventListener('click', this.shortcutsTooltipHandler);
     }
 
     removeHideMenuHandlers() {
@@ -172,6 +186,7 @@ export default class RightClick {
         }
         if (this.el) {
             this.el.querySelector('.jw-info-overlay-item').removeEventListener('click', this.infoOverlayHandler);
+            this.el.querySelector('.jw-shortcuts-item').removeEventListener('click', this.shortcutsTooltipHandler);
             this.el.removeEventListener('mouseover', this.overHandler);
             this.el.removeEventListener('mouseout', this.outHandler);
         }