WIP

docs/index.html

@@ -121,7 +121,10 @@
         <!-- Docs script -->
         <script src="dist/docs.js"></script>
 
-        <!-- Shr core script -->
+        <!-- Rangetouch to fix <input type="range"> on touch devices (see https://rangetouch.com) -->
+        <script src="https://cdn.rangetouch.com/0.0.9/rangetouch.js"></script>
+
+        <!-- Sharing libary (https://shr.one) -->
         <script src="https://cdn.shr.one/0.1.9/shr.js"></script>
         <script>if(window.shr) { window.shr.setup({ count: { classname: 'btn__count' } }); }</script>
     </body>

docs/src/less/components/examples.less

@@ -12,44 +12,14 @@ video,
     max-width: 100%;
     vertical-align: middle;
 }
-.plyr__video-embed {
-    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
-}
 
 // Example players
 .plyr {
     margin: 0 auto;
     border-radius: @border-radius-base;
-
-    &--fullscreen,
-    &--fullscreen-active {
-        max-width: none;
-
-        .plyr-controls,
-        video,
-        iframe {
-            border-radius: 0;
-        }
-        iframe {
-            -webkit-mask-image: none;
-        }
-    }
 }
 .plyr--audio {
     max-width: @example-width-audio;
-
-    /*.plyr__controls {
-        border-radius: @border-radius-base;
-    }
-    .plyr__progress {
-        border-radius: @border-radius-base @border-radius-base 0 0;
-
-        progress,
-        [type='range'] {
-            border-radius: @border-radius-base @border-radius-base 0 0;
-            overflow: hidden;
-        }
-    }*/
 }
 
 // Style full supported player
@@ -62,7 +32,7 @@ video,
     }
 }
 
-.plyr--video ~ ul .plyr__cite--video,
+.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video,
 .plyr--audio ~ ul .plyr__cite--audio,
 .plyr--youtube ~ ul .plyr__cite--youtube,
 .plyr--vimeo ~ ul .plyr__cite--vimeo {

src/js/plyr.js

@@ -2269,7 +2269,7 @@
             _pause();
 
             // Set seek input to 0
-            if(plyr.buttons.seek) {
+            if(plyr.buttons && plyr.buttons.seek) {
                 plyr.buttons.seek.value = 0;
             }
 
@@ -2559,11 +2559,20 @@
             _on(plyr.media, 'waiting canplay seeked', _checkLoading);
 
             // Click video
-            if (config.clickToPlay) {
+            if (config.clickToPlay && plyr.type !== 'audio') {
-                // Set cursor
+                // Re-fetch the wrapper
-                plyr.videoContainer.style.cursor = "pointer";
+                var wrapper = _getElement('.' + config.classes.videoWrapper);
 
-                _on(plyr.media, 'click', function() {
+                // Bail if there's no wrapper (this should never happen)
+                if(!wrapper) {
+                    return;
+                }
+
+                // Set cursor
+                wrapper.style.cursor = "pointer";
+
+                // On click play, pause ore restart
+                _on(wrapper, 'click', function() {
                     if (plyr.media.paused) {
                         _play();
                     }

src/less/plyr.less

@@ -7,7 +7,7 @@
 // -------------------------------
 
 // Colors
-@plyr-color-main:                    #63B4E1;
+@plyr-color-main:                    #3498DB;
 
 // Font sizes
 @plyr-font-size-small:               14px;
@@ -55,9 +55,10 @@
 @range-thumb-width:                  floor(@range-track-height * 2);
 @range-thumb-bg:                     #fff;
 @range-thumb-border:                 2px solid transparent;
+@range-thumb-shadow:                 0 1px 1px fade(@plyr-video-controls-bg, 15%);
 @range-thumb-active-border-color:    #fff;
 @range-thumb-active-bg:              @plyr-video-control-bg-hover;
-@range-thumb-shadow:                 0 1px 1px fade(@plyr-video-controls-bg, 15%);
+@range-thumb-active-scale:           1.25;
 
 // Breakpoints
 @plyr-bp-control-split:              560px; // When controls split into left/right
@@ -72,9 +73,9 @@
 // Mixins
 // -------------------------------
 // <input type="range"> styling
-.range-track() {
+.range-track(@background: @range-track-bg) {
     height: @range-track-height;
-    background: @range-track-bg;
+    background: @background;
     border: 0;
     border-radius: (@range-track-height / 2);
     user-select: none;
@@ -93,7 +94,7 @@
 .range-thumb-active() {
     background: @range-thumb-active-bg;
     border-color: @range-thumb-active-border-color;
-    transform: scale(1.25);
+    transform: scale(@range-thumb-active-scale);
 }
 
 // Styles
@@ -132,7 +133,7 @@
     // Specificity is for bootstrap compatibility
     input[type='range'] {
         display: block;
-        height: @range-thumb-height;
+        height: (@range-thumb-height * @range-thumb-active-scale);
         width: 100%;
         margin: 0;
         padding: 0; 
@@ -171,17 +172,17 @@
             border: 0;
             color: transparent;
         }
-        &::-ms-fill-lower,
         &::-ms-fill-upper {
             .range-track();
         }
+        &::-ms-fill-lower {
+            .range-track(@plyr-progress-playing-bg);
+        }
         &::-ms-thumb {
             .range-thumb();
-
             // For some reason, Edge uses the -webkit margin above
             margin-top: 0; 
         }
-
         &::-ms-tooltip {
             display: none;
         }
@@ -229,6 +230,9 @@
     position: relative;
     background: #000;
     border-radius: inherit;
+
+    // Cleaner radius, also forces iframe radius
+    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
 }
 
 // Container for embeds
@@ -277,6 +281,7 @@
     font-size: @plyr-font-size-captions-base;
     text-align: center;
     font-weight: 400;
+    -webkit-font-smoothing: subpixel-antialiased;
 
     span {
         border-radius: 2px;
@@ -488,6 +493,7 @@
     color: @plyr-tooltip-color;
     font-size: @plyr-font-size-small;
     line-height: 1.3;
+    -webkit-font-smoothing: subpixel-antialiased;
 
     transform: translate(-50%, 10px) scale(.8);
     transform-origin: 50% 100%;
@@ -539,7 +545,6 @@
         &::-moz-range-track {
             background: transparent;
         }
-        &::-ms-fill-lower,
         &::-ms-fill-upper {
             background: transparent;
         }
@@ -586,6 +591,7 @@
     z-index: 1;
     color: @plyr-progress-playing-bg;
     background: transparent;
+    transition: none;
 
     &::-webkit-progress-value {
         min-width: @range-track-height;
@@ -598,9 +604,7 @@
         border-bottom-right-radius: 0;
     }
     &::-ms-fill {
-        min-width: @range-track-height;
+        display: none;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
     }
 }
 .plyr__progress--buffer[value] {
@@ -643,6 +647,7 @@
     vertical-align: middle;
     font-size: @plyr-font-size-small;
     line-height: .95;
+    -webkit-font-smoothing: subpixel-antialiased;
 }
 
 // Media duration hidden on small screens
@@ -671,15 +676,10 @@
 // Hide sound controls on iOS
 // It's not supported to change volume using JavaScript:
 // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
-.plyr--is-ios .plyr__volume,
+.plyr--is-ios .plyr__volume[type='range'],
-.plyr--is-ios [data-plyr='mute'],
+.plyr--is-ios [data-plyr='mute'] {
-.plyr--is-ios.plyr--audio .plyr__controls--right {
     display: none;
 }
-// Center buttons so it looks less odd
-.plyr--is-ios.plyr--audio .plyr__controls--left {
-    float: none;
-}
 
 // Fullscreen
 // --------------------------------------------------------------
@@ -694,6 +694,7 @@
     width: 100%;
     z-index: 10000000;
     background: #000;
+    border-radius: 0;
 
     video {
         height: 100%;