Added ‘global’ keyboard shortcut option

Version bump for NPM
Merge branch 'master' of https://github.com/Selz/plyr
2016-08-22 14:15:49 +10:00 · 2016-08-22 13:08:19 +10:00 · 2016-08-22 13:07:07 +10:00 · 2016-08-22 13:06:26 +10:00 · 2016-08-22 12:53:38 +10:00 · 2016-08-22 08:40:02 +10:00
5 changed files with 146 additions and 88 deletions
--- a/changelog.md
+++ b/changelog.md
@ -1,5 +1,11 @@
 # Changelog

+# v2.0.2
+- Added 'global' keyboard shortcut option
+
+# v2.0.1
+- Version bump for NPM
+
 # v2.0.0
 This version contains several potential ***breaking changes***:

--- a/dist/plyr.js
+++ b/dist/plyr.js
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "plyr",
-  "version": "2.0.0",
+  "version": "2.0.2",
  "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
  "homepage": "http://plyr.io",
  "main": "src/js/plyr.js",
--- a/readme.md
+++ b/readme.md
@ -20,6 +20,7 @@ We wanted a lightweight, accessible and customizable media player that supports
 - **[API](#api)** - toggle playback, volume, seeking, and more
 - **[Events](#events)** - no messing around with Vimeo and YouTube APIs, all events are standardized across formats
 - **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes
+- **[Shortcuts](#shortcuts)** - supports keyboard shortcuts
 - **i18n support** - support for internationalization of controls
 - **No dependencies** - written in "vanilla" JavaScript, no jQuery required
 - **SASS and LESS** - to include in your build processes
@ -75,7 +76,7 @@ ember addon:install ember-cli-plyr
 More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub](https://github.com/louisrudner/ember-cli-plyr)

 ## Quick setup
-Here's a quick run through on getting up and running.
+Here's a quick run through on getting up and running. There's also a [demo on Codepen](http://codepen.io/sampotts/pen/jARJYp).

 ### HTML
 Plyr extends upon the standard HTML5 markup so that's all you need for those types. More info on advanced HTML markup can be found under [initialising](#initialising).
@ -121,7 +122,7 @@ Include the `plyr.js` script before the closing `</body>` tag and then call `ply
 If you want to use our CDN for the JavaScript, you can use the following:

 ```html
-<script src="https://cdn.plyr.io/2.0.0/plyr.js"></script>
+<script src="https://cdn.plyr.io/2.0.2/plyr.js"></script>
 ```

 ### CSS
@ -134,11 +135,11 @@ Include the `plyr.css` stylsheet into your `<head>`
 If you want to use our CDN for the default CSS, you can use the following:

 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/2.0.0/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/2.0.2/plyr.css">
 ```

 ### SVG Sprite
-The SVG sprite is loaded automatically from our CDN. To change this, see the [options](#Options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/2.0.0/plyr.svg`.
+The SVG sprite is loaded automatically from our CDN. To change this, see the [options](#Options) below. For reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/2.0.2/plyr.svg`.

 ## Advanced

@ -320,9 +321,9 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
    </tr>
    <tr>
      <td><code>keyboardShortcuts</code></td>
-      <td>Boolean</td>
-      <td><code>true</code></td>
-      <td>Enable <a href="#shortcuts">keyboard shortcuts</a></td>
+      <td>Object</td>
+      <td><code>{ focused: true, global: true }</code></td>
+      <td>Enable <a href="#shortcuts">keyboard shortcuts</a> for focused players only or global as well (if there's only one player in the document)</td>
    </tr>
    <tr>
      <td><code>tooltips</code></td>
@ -872,46 +873,65 @@ More info on the respective API's here:
 *Please note*: not all API methods may work 100%. Your mileage may vary. It's better to use the universal plyr API where possible.

 ## Shortcuts
-By default, a focused player will bind the following keyboard shortcuts:
+By default, a player will bind the following keyboard shortcuts when it has focus. If you have the `global` option to `true` and there's only one player in the document then the shortcuts will work when any element has focus, apart from an element that requires input (such as an `<input>`, `<select>` or `[contenteditable]`). 

 <table class="table" width="100%">
  <thead>
    <tr>
      <th width="25%">Key</th>
-      <th width="75%">Action</th>
+      <th width="25%">Global</th>
+      <th width="50%">Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>0</code> to <code>9</code></td>
+      <td>✔</td>
      <td>Seek from 0 to 90% respectively</td>
    </tr> 
    <tr>
-      <td><code>space</code> or <code>K</code></td>
+      <td><code>space</code></td>
+      <td></td>
      <td>Toggle playback</td>
    </tr>
+    <tr>
+      <td><code>K</code></td>
+      <td>✔</td>
+      <td>Toggle playback</td>
+    </tr>
+    <tr>
+      <td><code>&larr;</code></td>
+      <td></td>
+      <td>Seek backward by the <code>seekTime</code> option</td>
+    </tr>
    <tr>
      <td><code>&rarr;</code></td>
+      <td></td>
      <td>Seek forward by the <code>seekTime</code> option</td>
    </tr>
    <tr>
      <td><code>&uarr;</code></td>
+      <td></td>
      <td>Increase volume</td>
    </tr>
    <tr>
      <td><code>&darr;</code></td>
+      <td></td>
      <td>Decrease volume</td>
    </tr>
    <tr>
      <td><code>M</code></td>
+      <td>✔</td>
      <td>Toggle mute</td>
    </tr>
    <tr>
      <td><code>F</code></td>
+      <td>✔</td>
      <td>Toggle fullscreen</td>
    </tr>
    <tr>
      <td><code>C</code></td>
+      <td>✔</td>
      <td>Toggle captions</td>
    </tr>
  </tbody>
@ -925,7 +945,7 @@ Because Plyr is an extension of the standard HTML5 video and audio elements, thi
 - Using [dash.js](https://github.com/Dash-Industry-Forum/dash.js) - [Demo](http://codepen.io/sampotts/pen/BzpJXN)

 ## Fullscreen
-Fullscreen in Plyr is supported by all browsers that [currently support it](http://caniuse.com/#feat=fullscreen). If you're using the default CSS, you can also use a "full browser" mode which will use the full browser window by adding the `plyr-fullscreen` class to your container.
+Fullscreen in Plyr is supported by all browsers that [currently support it](http://caniuse.com/#feat=fullscreen). 

 ## Browser support

@ -990,6 +1010,11 @@ Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me]

 ## Used by
 - [Selz.com](https://selz.com)
+- [Peugeot.fr](http://www.peugeot.fr/marque-et-technologie/technologies/peugeot-i-cockpit.html)
+- [Peugeot.de](http://www.peugeot.de/modelle/modellberater/208-3-turer/fotos-videos.html)
+- [TomTom.com](http://prioritydriving.tomtom.com/)
+- [DIGBMX](http://digbmx.com/)
+- [Grime Archive](https://grimearchive.com/)
 - [koel - A personal music streaming server that works.](http://koel.phanan.net/)
 - [Oscar Radio](http://oscar-radio.xyz/)

--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v2.0.0
+// plyr.js v2.0.2
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@ -43,12 +43,15 @@
        displayDuration:        true,
        loadSprite:             true,
        iconPrefix:             'plyr',
-        iconUrl:                'https://cdn.plyr.io/2.0.0/plyr.svg',
+        iconUrl:                'https://cdn.plyr.io/2.0.2/plyr.svg',
        clickToPlay:            true,
        hideControls:           true,
        showPosterOnEnd:        false,
        disableContextMenu:     true,
-        keyboardShorcuts:       true,
+        keyboardShorcuts:       {
+            focused:            true,
+            global:             true
+        },
        tooltips: {
            controls:           false,
            seek:               true
@ -56,6 +59,7 @@
        selectors: {
            html5:              'video, audio',
            embed:              '[data-type]',
+            editable:           'input, select, [contenteditable]',
            container:          '.plyr',
            controls: {
                container:      null,
@ -2896,12 +2900,35 @@
            }

            // Keyboard shortcuts
-            if (config.keyboardShorcuts) {
-                var first = true;
+            if (config.keyboardShorcuts.focused) {
+                var last = null;

-                _on(plyr.container, 'keydown keyup', function(event) {
+                // Handle global presses
+                if (config.keyboardShorcuts.global) {
+                    _on(window, 'keydown keyup', function(event) {
                        var code = getKeyCode(event),
-                        pressed = event.type === 'keydown';
+                        focused = getFocusElement(),
+                        allowed = [48,49,50,51,52,53,54,56,57,75,77,70,67],
+                        count   = get().length;
+
+                        // Only handle global key press if there's only one player
+                        // and the key is in the allowed keys 
+                        // and if the focused element is not editable (e.g. text input)
+                        // and any that accept key input http://webaim.org/techniques/keyboard/
+                        if (count === 1 && _inArray(allowed, code) && (!_is.htmlElement(focused) || !_matches(focused, config.selectors.editable))) {
+                            handleKey(event);
+                        }
+                    });
+                }
+
+                // Handle presses on focused
+                _on(plyr.container, 'keydown keyup', handleKey);
+            }
+
+            function handleKey(event) {
+                var code = getKeyCode(event),
+                    pressed = event.type === 'keydown',
+                    held = pressed && code === last;

                // If the event is bubbled from the media element
                // Firefox doesn't get the keycode for whatever reason
@ -2932,6 +2959,7 @@
                    // If the code is found prevent default (e.g. prevent scrolling for arrows)
                    if (_inArray(preventDefault, code)) {
                        event.preventDefault();
+                        event.stopPropagation();
                    }

                    switch(code) {
@ -2945,24 +2973,24 @@
                        case 54: 
                        case 55: 
                        case 56:
-                            case 57: if (first) { seekByKey() } break;
+                        case 57: if (!held) { seekByKey(); } break;
                        // Space and K key
                        case 32: 
-                            case 75: if (first) { _togglePlay(); } break;
+                        case 75: if (!held) { _togglePlay(); } break;
                        // Arrow up
                        case 38: _increaseVolume(); break;
                        // Arrow down
                        case 40: _decreaseVolume(); break;
                        // M key
-                            case 77: if (first) { _toggleMute() } break;
+                        case 77: if (!held) { _toggleMute() } break;
                        // Arrow forward
                        case 39: _forward(); break;
                        // Arrow back
                        case 37: _rewind(); break;
                        // F key
-                            case 70: if (first) { _toggleFullscreen() } break;
+                        case 70: _toggleFullscreen(); break;
                        // C key
-                            case 67: if (first) { _toggleCaptions() } break;
+                        case 67: if (!held) { _toggleCaptions(); } break;
                    }

                    // Escape is handle natively when in full screen 
@ -2971,13 +2999,12 @@
                        _toggleFullscreen();
                    }

-                        // First run completed
-                        first = false;
+                    // Store last code for next cycle
+                    last = code;
                }
                else {
-                        first = true;
+                    last = null;
                }
-                });
            }

            // Focus/tab management
Author	SHA1	Message	Date
Sam Potts	df7f52d885	Added ‘global’ keyboard shortcut option	2016-08-22 14:15:49 +10:00
Sam Potts	d5b5faafbb	Version bump for NPM	2016-08-22 13:08:19 +10:00
Sam Potts	a318e8588b	Merge branch 'master' of https://github.com/Selz/plyr	2016-08-22 13:07:07 +10:00
Sam Potts	51fb252cd8	Update changelog.md	2016-08-22 13:06:26 +10:00
Sam Potts	232a9fe868	Update changelog.md	2016-08-22 12:53:38 +10:00
Sam Potts	e8bfe73b1d	Update readme.md	2016-08-22 08:40:02 +10:00
Sam Potts	ab0d762675	Update readme.md	2016-08-21 22:46:11 +10:00
Sam Potts	a6a314e011	Update readme.md	2016-08-21 21:53:16 +10:00
Sam Potts	514bdff92e	Update readme.md	2016-08-21 21:53:02 +10:00
Sam Potts	745e56a3a3	Update readme.md	2016-08-21 21:40:24 +10:00