1.5.10

Fix broken npm require/import

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## v1.5.8
+- Fix for touch device seek tooltip
+- Seek improvements
+
+## v1.5.7
+- Fix for control tooltips always showing
+
 ## v1.5.6
 - Seek tooltip (option for tooltips changed, please check docs)
 - SASS compile error fixes (fixes #148)

controls.md

@@ -49,7 +49,7 @@ This is an example `html` option with all controls.
 var controls = ["<div class='plyr__controls'>",
     "<div class='plyr__progress'>",
         "<label for='seek{id}' class='plyr__sr-only'>Seek</label>",
-        "<input id='seek{id}' class='plyr__progress--seek' type='range' min='0' max='100' step='0.5' value='0' data-plyr='seek'>",
+        "<input id='seek{id}' class='plyr__progress--seek' type='range' min='0' max='100' step='0.1' value='0' data-plyr='seek'>",
         "<progress class='plyr__progress--played' max='100' value='0'>",
             "<span>0</span>% played",
         "</progress>",

package.json

@@ -1,9 +1,9 @@
 {
   "name": "plyr",
-  "version": "1.5.6",
+  "version": "1.5.10",
-  "description": "A simple HTML5 media player using custom controls",
+  "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
   "homepage": "http://plyr.io",
-  "main": "gulpfile.js",
+  "main": "src/js/plyr.js",
   "dependencies": {},
   "devDependencies": {
     "gulp": "^3.9.0",
@@ -24,9 +24,6 @@
     "gulp-util": "^3.0.7",
     "run-sequence": "^1.1.5"
   },
-  "scripts": {
-    "preinstall": "npm install -g gulp"
-  },
   "keywords": [
     "HTML5 Video",
     "HTML5 Audio",
@@ -36,8 +33,15 @@
     "type": "git",
     "url": "git://github.com/selz/plyr.git"
   },
-  "authors": [
+  "license": "MIT",
-    "Sam Potts <me@sampotts.me>"
+  "bugs": {
-  ],
+    "url": "https://github.com/selz/plyr/issues"
-  "license": "MIT"
+  },
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Sam Potts <sam@selz.com> (selz.com)"
 }

readme.md

@@ -40,13 +40,22 @@ If you have any cool ideas or features, please let me know by [creating an issue
 
 Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
 
-**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.5.6/plyr.js` to `https://cdn.plyr.io/1.5.6/plyr.js`
+**Heads up:** the example `index.html` file needs to be served from a webserver (such as Apache, Nginx, IIS or similar) unless you change the file sources to include http or https. e.g. change `//cdn.plyr.io/1.5.9/plyr.js` to `https://cdn.plyr.io/1.5.9/plyr.js`
+
+### Node Package Manager (NPM)
+Using NPM, you can grab Plyr:
+```
+npm install plyr
+```
+[https://www.npmjs.com/package/plyr](https://www.npmjs.com/package/plyr)
 
 ### Bower
 If bower is your thang, you can grab Plyr using:
 ```
 bower install plyr
 ```
+[http://bower.io/search/?q=plyr](http://bower.io/search/?q=plyr)
+
 More info on setting up dependencies can be found in the [Bower Docs](http://bower.io/docs/creating-packages/#maintaining-dependencies)
 
 ### Ember
@@ -60,11 +69,11 @@ More info is on [npm](https://www.npmjs.com/package/ember-cli-plyr) and [GitHub]
 If you want to use our CDN, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/1.5.6/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/1.5.9/plyr.css">
-<script src="https://cdn.plyr.io/1.5.6/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.5.9/plyr.js"></script>
 ```
 
-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.6/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.5.9/sprite.svg`.
 
 ### CSS & Styling
 If you want to use the default css, add the `plyr.css` file from `/dist` into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request.
@@ -161,7 +170,7 @@ More info on CORS here:
 Here's an example of a default setup:
 
 ```html
-<script src="https://cdn.plyr.io/1.5.6/plyr.js"></script>
+<script src="https://cdn.plyr.io/1.5.9/plyr.js"></script>
 <script>plyr.setup();</script>
 ```
 

src/js/plyr.js

@@ -162,7 +162,7 @@
         '<div class="plyr__controls">',
             '<div class="plyr__progress">',
                 '<label for="seek{id}" class="plyr__sr-only">Seek</label>',
-                '<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.5" value="0" data-plyr="seek">',
+                '<input id="seek{id}" class="plyr__progress--seek" type="range" min="0" max="100" step="0.1" value="0" data-plyr="seek">',
                 '<progress class="plyr__progress--played" max="100" value="0">',
                     '<span>0</span>% ' + config.i18n.played,
                 '</progress>',
@@ -943,7 +943,7 @@
             container.insertAdjacentHTML('beforeend', html);
 
             // Setup tooltips
-            if (config.tooltips) {
+            if (config.tooltips.controls) {
                 var labels = _getElements(config.selectors.labels + ' .' + config.classes.hidden);
 
                 for (var i = labels.length - 1; i >= 0; i--) {
@@ -2048,7 +2048,7 @@
         // Update hover tooltip for seeking
         function _updateSeekTooltip(event) {
             // Bail if setting not true
-            if (!config.tooltips.seek) {
+            if (!config.tooltips.seek || plyr.browser.touch) {
                 return;
             }
 
@@ -2251,11 +2251,11 @@
                 // Load HTML5 sources
                 plyr.media.load();
 
-                // Display duration if available
-                _displayDuration();
-
                 // Setup interface
                 _setupInterface();
+
+                // Display duration if available
+                _displayDuration();
             }
 
             // Play if autoplay attribute is present

src/less/plyr.less

@@ -32,7 +32,7 @@
 
 // Tooltips
 @plyr-tooltip-bg:                @plyr-controls-bg;
-@plyr-tooltip-border-color:      fade(@plyr-gray-dark, 10%);
+@plyr-tooltip-border-color:      fade(darken(@plyr-controls-bg, 5%), 10%);
 @plyr-tooltip-border-width:      1px;
 @plyr-tooltip-shadow:            0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color;
 @plyr-tooltip-color:             @plyr-control-color;
@@ -110,8 +110,11 @@
 .seek-thumb() {
     background: transparent;
     border: 0;
-    width: (@plyr-control-spacing * 4);
+    width: 1px;
     height: @plyr-control-spacing;
+}
+.seek-thumb-touch() {
+    width: (@plyr-control-spacing * 4);
     transform: translateX(-50%);
 }
 .seek-track() {
@@ -495,6 +498,21 @@
         }
     }
 
+    // Touch seek wider handle
+    &--is-touch &--seek[type='range'] {
+        &::-webkit-slider-thumb {
+            .seek-thumb-touch();
+        }
+        // Mozilla
+        &::-moz-range-thumb {
+            .seek-thumb-touch();
+        }
+        // Microsoft
+        &::-ms-thumb {
+            .seek-thumb-touch();
+        }
+    }
+
     // Loading state
     &--loading .plyr__progress--buffer {
         animation: plyr-progress 1s linear infinite;

src/sass/plyr.scss

@@ -111,8 +111,11 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
 @mixin seek-thumb() {
     background: transparent;
     border: 0;
-    width: ($plyr-control-spacing * 4);
+    width: 1px;
     height: $plyr-control-spacing;
+}
+@mixin seek-thumb-touch() {
+    width: ($plyr-control-spacing * 4);
     transform: translateX(-50%);
 }
 @mixin seek-track() {
@@ -496,6 +499,21 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
         }
     }
 
+    // Touch seek wider handle
+    &--is-touch &--seek[type='range'] {
+        &::-webkit-slider-thumb {
+            @include seek-thumb-touch();
+        }
+        // Mozilla
+        &::-moz-range-thumb {
+            @include seek-thumb-touch();
+        }
+        // Microsoft
+        &::-ms-thumb {
+            @include seek-thumb-touch();
+        }
+    }
+
     // Loading state
     &--loading .plyr__progress--buffer {
         animation: plyr-progress 1s linear infinite;
@@ -637,33 +655,33 @@ $plyr-bp-captions-large:         768px !default; // When captions jump to the la
             left: 0;
             right: 0;
         }
+    }
 
-        // Hide controls when playing in full screen
+    // Hide controls when playing in full screen
-        &--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing,
+    &--fullscreen-active.plyr--fullscreen--hide-controls.plyr--playing,
-        &.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing {
+    &.plyr--fullscreen.plyr--fullscreen--hide-controls.plyr--playing {
-            .plyr__controls {
+        .plyr__controls {
-                transform: translateY(100%) translateY($plyr-control-spacing / 2);
+            transform: translateY(100%) translateY($plyr-control-spacing / 2);
-                transition: transform .3s .2s ease;
+            transition: transform .3s .2s ease;
-            }
-            .plyr__captions {
-                bottom: ($plyr-control-spacing / 2);
-                transition: bottom .3s .2s ease;
-            }
-            &.plyr--hover .plyr__controls {
-                transform: translateY(0);
-            }
         }
+        .plyr__captions {
+            bottom: ($plyr-control-spacing / 2);
+            transition: bottom .3s .2s ease;
+        }
+        &.plyr--hover .plyr__controls {
+            transform: translateY(0);
+        }
+    }
 
-        // Captions
+    // Captions
-        &.plyr--fullscreen .plyr__captions,
+    &.plyr--fullscreen .plyr__captions,
-        &--fullscreen-active .plyr__captions,
+    &--fullscreen-active .plyr__captions,
-        &--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions {
+    &--fullscreen--hide-controls.plyr--fullscreen-active.plyr--playing.plyr--hover .plyr__captions {
-            top: auto;
+        top: auto;
-            bottom: 90px;
+        bottom: 90px;
 
-            @media (min-width: $plyr-bp-control-split) {
+        @media (min-width: $plyr-bp-control-split) {
-                bottom: 60px;
+            bottom: 60px;
-            }
         }
     }