Version bump

Restored !default and fullscreen logic in SASS
Merge pull request #102 from ChristianPV/patch-1
2015-07-28 11:31:32 +10:00 · 2015-07-28 11:29:49 +10:00 · 2015-07-28 10:13:47 +10:00 · 2015-07-27 13:04:02 -03:00 · 2015-07-25 22:06:13 +10:00 · 2015-07-25 21:35:12 +10:00
13 changed files with 157 additions and 142 deletions
--- a/changelog.md
+++ b/changelog.md
@ -1,5 +1,14 @@
 # Changelog

+## v1.2.6
+- SASS updates and fixes (cheers @ChristianPV)
+
+## v1.2.5
+- Fix for YouTube quality (let them decide quality)
+
+## v1.2.4
+- Fix for omitted kind attribute on <track> (fixes #88)
+
 ## v1.2.3
 - Fix for YouTube on iPhone or unsupported browsers (fallback to YouTube native)
 - Docs tidy up
--- a/dist/plyr.css
+++ b/dist/plyr.css
--- a/dist/plyr.js
+++ b/dist/plyr.js
--- a/docs/dist/docs.css
+++ b/docs/dist/docs.css
--- a/docs/error.html
+++ b/docs/error.html
@ -6,7 +6,7 @@
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Docs styles -->
-        <link rel="stylesheet" href="//cdn.plyr.io/1.2.3/docs.css">
+        <link rel="stylesheet" href="//cdn.plyr.io/1.2.6/docs.css">
    </head>
    <body>
        <main>
--- a/docs/index.html
+++ b/docs/index.html
@ -8,10 +8,10 @@
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Styles -->
-        <link rel="stylesheet" href="https://cdn.plyr.io/1.2.3/plyr.css?1">
+        <link rel="stylesheet" href="https://cdn.plyr.io/1.2.6/plyr.css?2">

        <!-- Docs styles -->
-        <link rel="stylesheet" href="https://cdn.plyr.io/1.2.3/docs.css?4">
+        <link rel="stylesheet" href="https://cdn.plyr.io/1.2.6/docs.css?1">
    </head>
    <body>
        <header>
@ -97,13 +97,13 @@
                    b.insertBefore(c, b.childNodes[0]);
                }
            }
-        })(document, "https://cdn.plyr.io/1.2.3/sprite.svg");
+        })(document, "https://cdn.plyr.io/1.2.6/sprite.svg");
        </script>

        <!-- Plyr core script -->
-        <script src="https://cdn.plyr.io/1.2.3/plyr.js?1"></script>
+        <script src="https://cdn.plyr.io/1.2.6/plyr.js?1"></script>

        <!-- Docs script -->
-        <script src="https://cdn.plyr.io/1.2.3/docs.js?1"></script>
+        <script src="https://cdn.plyr.io/1.2.6/docs.js?1"></script>
    </body>
 </html>
--- a/docs/src/less/components/buttons.less
+++ b/docs/src/less/components/buttons.less
@ -25,6 +25,7 @@ nav {
 	position: relative;
 	margin: 0 auto @padding-base;
 	max-width: @example-width-video;
+	white-space: nowrap;

 	&::before {
 		content: "";
--- a/gulpfile.js
+++ b/gulpfile.js
@ -165,11 +165,6 @@ build.templates();
 build.less(bundles.docs.less, "docs");
 build.js(bundles.docs.js, "docs");

-// Default gulp task
-gulp.task("default", function(){
-    run("templates", tasks.js, tasks.less, "sprite");
-});
-
 // Build all JS (inc. templates)
 gulp.task("js", function(){
    run("templates", tasks.js);
@ -193,6 +188,11 @@ gulp.task("watch", function () {
    gulp.watch(paths.docs.src.templates, ["js"]);
 });

+// Default gulp task
+gulp.task("default", function(){
+    run("templates", tasks.js, tasks.less, "sprite", "watch");
+});
+
 // Publish a version to CDN and docs
 // --------------------------------------------

--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "plyr",
-  "version": "1.2.3",
+  "version": "1.2.6",
  "description": "A simple HTML5 media player using custom controls",
  "homepage": "http://plyr.io",
  "main": "gulpfile.js",
--- a/readme.md
+++ b/readme.md
@ -39,7 +39,7 @@ 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.2.3/plyr.js` to `https://cdn.plyr.io/1.2.3/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.2.6/plyr.js` to `https://cdn.plyr.io/1.2.6/plyr.js`

 ### Bower
 If bower is your thang, you can grab Plyr using:
@ -59,11 +59,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.2.3/plyr.css">
-<script src="https://cdn.plyr.io/1.2.3/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.2.6/plyr.css">
+<script src="https://cdn.plyr.io/1.2.6/plyr.js"></script>
 ```

-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.2.3/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.2.6/sprite.svg`.

 ### CSS
 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. 
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v1.2.3
+// plyr.js v1.2.6
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@ -559,9 +559,8 @@

            fullscreen.isFullScreen = function(element) {
                if(typeof element == "undefined") {
-                    element = document;
+                    element = document.body;
                }
-
                switch (this.prefix) {
                    case "":
                        return document.fullscreenElement == element;
@ -572,6 +571,9 @@
                }
            };
            fullscreen.requestFullScreen = function(element) {
+                if(typeof element == "undefined") {
+                    element = document.body;
+                }
                return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + (this.prefix == "ms" ? "RequestFullscreen" : "RequestFullScreen")]();
            };
            fullscreen.cancelFullScreen = function() {
@ -905,7 +907,6 @@
                playerVars: {
                    autoplay: 0,
                    controls: (player.supported.full ? 0 : 1),
-                    vq: "hd720",
                    rel: 0,
                    showinfo: 0,
                    iv_load_policy: 3,
@ -1026,8 +1027,8 @@

                for (var i = 0; i < children.length; i++) {
                    if (children[i].nodeName.toLowerCase() === "track") {
-                        kind = children[i].getAttribute("kind");
-                        if (kind === "captions") {
+                        kind = children[i].kind;
+                        if (kind === "captions" || kind === "subtitles") {
                            captionSrc = children[i].getAttribute("src");
                        }
                    }
@ -1079,7 +1080,7 @@
                        for (var y=0; y < tracks.length; y++) {
                            var track = tracks[y];

-                            if (track.kind === "captions") {
+                            if (track.kind === "captions" || track.kind === "subtitles") {
                                _on(track, "cuechange", function() {
                                    // Clear container
                                    player.captionsContainer.innerHTML = "";
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@ -28,6 +28,7 @@

 // Tooltips
@tooltip-bg:                @controls-bg;
+@tooltip-border-color:      @off-white;
@tooltip-color:             @control-color;
@tooltip-padding:           @control-spacing;   
@tooltip-arrow-size:        5px;
@ -316,8 +317,6 @@

    // Tooltips
    &-tooltip {
-        @border-base: darken(@tooltip-bg, 8%);
-
        visibility: hidden;
        position: absolute;
        z-index: 2;
@ -327,7 +326,7 @@

        opacity: 0;
        background: @tooltip-bg;
-        border: 1px solid @border-base;
+        border: 1px solid @tooltip-border-color;
        border-radius: @tooltip-radius;
        color: @tooltip-color;
        font-size: @font-size-small;
@ -349,10 +348,8 @@
            width: 10px;
            height: 10px;
            background: @tooltip-bg;
-            transform: translate(-50%, -50%) rotate(45deg) translateY(2px);
-            
-            @arrow-border-color: darken(@border-base, 5%);
-            border: 1px solid rgba(red(@arrow-border-color), green(@arrow-border-color), blue(@arrow-border-color), .8);
+            transform: translate(-50%, -50%) rotate(45deg) translateY(1px);
+            border: 1px solid @tooltip-border-color;
            border-width: 0 1px 1px 0;
        }
    }
@ -497,7 +494,7 @@
    // Volume control
    // <input[type='range']> element
    // Specificity is for bootstrap compatibility
-    &-volume[type=range] {
+    &-volume[type="range"] {
        display: inline-block;
        vertical-align: middle;
        -webkit-appearance: none;
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@ -7,50 +7,69 @@
 // -------------------------------

 // Colors
-$blue:                    #3498DB !default;
-$gray-dark:               #343F4A !default;
-$gray:                    #565D64 !default;
-$gray-light:              #6B7D86 !default;
-$gray-lighter:            #CBD0D3 !default;
-$off-white:               #D6DADD !default;
+$blue:                      #3498DB !default;
+$gray-dark:                 #343F4A !default;
+$gray:                      #565D64 !default;
+$gray-light:                #6B7D86 !default;
+$gray-lighter:              #CBD0D3 !default;
+$off-white:                 #D6DADD !default;

 // Font sizes
-$font-size-small:         14px !default;
-$font-size-base:          16px !default;
-$font-size-large:         ceil(($font-size-base * 1.5)) !default;
+$font-size-small:           14px !default;
+$font-size-base:            16px !default;
+$font-size-large:           ceil(($font-size-base * 1.5)) !default; 

 // Controls
-$control-spacing:         10px !default;
-$controls-bg:             #fff !default;
-$control-bg-hover:        @blue !default;
-.contrast-control-color($controls-bg);
-.contrast-control-color-hover($control-bg-hover);
+$control-spacing:           10px !default;
+$controls-bg:               #fff !default;
+$control-bg-hover:          $blue !default; !default
+
+// Contrast
+@mixin contrast-control-color($color: "") {
+  $control-color: null !global;
+  @if lightness($color) >= 65% {
+    $control-color: $gray-light;
+  } @else if(lightness($color) < 65%) {
+    $control-color: $gray-lighter;
+  }
+}
+@mixin contrast-control-color-hover($color: "") {
+  $control-color-hover: null !global;
+  @if lightness($color) >= 65% {
+    $control-color-hover: $gray;
+  } @else if lightness($color) < 65% {
+    $control-color-hover: #fff;
+  }
+}
+
+@include contrast-control-color($controls-bg);
+@include contrast-control-color-hover($control-bg-hover);

 // Tooltips
-$tooltip-bg:              $controls-bg !default;
-$tooltip-color:           $control-color !default;
-$tooltip-padding:         $control-spacing !default;
-$tooltip-arrow-size:      5px !default;
-$tooltip-radius:          3px !default;
+$tooltip-bg:                $controls-bg !default;
+$tooltip-color:             $control-color !default;
+$tooltip-padding:           $control-spacing !default;   
+$tooltip-arrow-size:        5px !default;
+$tooltip-radius:            3px !default;

 // Progress
-$progress-bg:             rgba(red($gray), green($gray), blue($gray), .2) !default;
-$progress-playing-bg:     $blue !default;
-$progress-buffered-bg:    rgba(red($gray), green($gray), blue($gray), .25) !default;
-$progress-loading-size:   40px !default;
-$progress-loading-bg:     rgba(0,0,0, .15) !default;
+$progress-bg:               rgba(red($gray), green($gray), blue($gray), .2) !default;
+$progress-playing-bg:       $blue !default;
+$progress-buffered-bg:      rgba(red($gray), green($gray), blue($gray), .25) !default;
+$progress-loading-size:     40px !default
+$progress-loading-bg:       rgba(0,0,0, .15) !default;

 // Volume
-$volume-track-height:     6px !default;
-$volume-track-bg:         darken($controls-bg, 10%) !default;
-$volume-thumb-height:     ($volume-track-height * 2) !default;
-$volume-thumb-width:      ($volume-track-height * 2) !default;
-$volume-thumb-bg:         $control-color !default;
-$volume-thumb-bg-focus:   $control-bg-hover !default;
+$volume-track-height:       6px !default;
+$volume-track-bg:           darken($controls-bg, 10%) !default;
+$volume-thumb-height:       ($volume-track-height * 2) !default;
+$volume-thumb-width:        ($volume-track-height * 2) !default;
+$volume-thumb-bg:           $control-color !default;
+$volume-thumb-bg-focus:     $control-bg-hover !default;

 // Breakpoints
-$bp-control-split:        560px !default; // When controls split into left/right
-$bp-captions-large:       768px !default; // When captions jump to the larger font size
+$bp-control-split:          560px !default; // When controls split into left/right
+$bp-captions-large:         768px !default; // When captions jump to the larger font size

 // Animation
 // ---------------------------------------
@ -59,45 +78,24 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
    to { background-position: $progress-loading-size 0; }
 }

-// Mixins
-// -------------------------------
-
-// Contrast
-@mixin contrast-control-color($color: "") {
-    @if (lightness($color) >= 65%) {
-        $control-color: $gray-light;
-    }
-    @else if(lightness(@color) < 65%) {
-        $control-color: $gray-lighter;
-    }
-}
-@mixin contrast-control-color-hover($color: "") {
-    @if (lightness($color) >= 65%) {
-        $control-color-hover: $gray;
-    }
-    @else if (lightness($color) < 65%) {
-        $control-color-hover: #fff;
-    }
-}
-
 // Font smoothing
@mixin font-smoothing($mode: on)
 {
-    @if ($mode == 'on') {
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-    } 
-    @else if ($mode == 'off') {
-        -moz-osx-font-smoothing: auto;
-        -webkit-font-smoothing: subpixel-antialiased;
-    }
+  @if ($mode == 'on') {
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+  }
+  @else if ($mode == 'off') {
+    -moz-osx-font-smoothing: auto;
+    -webkit-font-smoothing: subpixel-antialiased;
+  }
 }

 // Contain floats: nicolasgallagher.com/micro-clearfix-hack/
@mixin clearfix()
 {
    zoom: 1;
-    &:before,
+    &:before, 
    &:after { content: ""; display: table; }
    &:after { clear: both; }
 }
@ -108,7 +106,7 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
    outline-offset: 0;
 }

-// Range mixins
+// <input type="range"> styling
@mixin volume-thumb()
 {
    height: $volume-thumb-height;
@ -153,7 +151,7 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo

 // Styles
 // -------------------------------
-// Base
+// Base 
 .player {
    position: relative;
    max-width: 100%;
@ -164,8 +162,8 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
    &,
    *,
    *::after,
-    *::before {
-        box-sizing: border-box;
+    *::before { 
+        box-sizing: border-box; 
    }

    // For video
@ -179,6 +177,21 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
        vertical-align: middle;
    }

+    // For embeds
+    &-video-embed {
+        padding-bottom: 56.25%; /* 16:9 */
+        height: 0;
+        
+        iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border: 0;
+        }
+    }
+
    // Captions
    &-captions {
        display: none;
@ -191,10 +204,10 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
        color: #fff;
        font-size: $font-size-base;
        font-weight: 600;
-        text-shadow:
-        -1px -1px 0 $gray,
-        1px -1px 0 $gray,
-        -1px 1px 0 $gray,
+        text-shadow: 
+        -1px -1px 0 $gray, 
+        1px -1px 0 $gray, 
+        -1px 1px 0 $gray, 
        1px 1px 0 $gray;
        text-align: center;
        @include font-smoothing();
@ -232,15 +245,15 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
                margin-top: 0;
            }
        }
-
-        input + label,
+        
+        input + label, 
        button {
            display: inline-block;
            vertical-align: middle;
            margin: 0 2px;
            padding: ($control-spacing / 2) $control-spacing;
-
-            background .3s ease, color .3s ease, opacity .3s ease;
+            
+            transition: background .3s ease, color .3s ease, opacity .3s ease;
            border-radius: 3px;
            cursor: pointer;

@ -256,7 +269,7 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
        .inverted:checked + label {
            opacity: .5;
        }
-        button,
+        button, 
        .inverted + label,
        input:checked + label {
            color: $control-color;
@ -267,7 +280,7 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
            background: transparent;
            overflow: hidden;
        }
-
+        
        // Specificity for overriding .inverted
        button:focus,
        button:hover,
@ -314,8 +327,6 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo

    // Tooltips
    &-tooltip {
-        $border-base: darken($tooltip-bg, 8%);
-
        visibility: hidden;
        position: absolute;
        z-index: 2;
@ -325,7 +336,6 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo

        opacity: 0;
        background: $tooltip-bg;
-        border: 1px solid $border-base;
        border-radius: $tooltip-radius;
        color: $tooltip-color;
        font-size: $font-size-small;
@ -336,28 +346,25 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
        transform-origin: 50% 100%;
        transition: transform .2s .1s ease, opacity .2s .1s ease;

-        // Arrow
        &::after {
            content: "";
-            position: absolute;
-            z-index: 1;
-            top: 100%;
-            left: 50%;
            display: block;
-            width: 10px;
-            height: 10px;
-            background: $tooltip-bg;
-            transform: translate(-50%, -50%) rotate(45deg) translateY(2px);
-            
-            $arrow-border-color: darken($border-base, 5%);
-            border: 1px solid rgba(red($arrow-border-color), green($arrow-border-color), blue($arrow-border-color), .8);
-            border-width: 0 1px 1px 0;
+            position: absolute;
+            left: 50%;
+            bottom: -$tooltip-arrow-size;
+            margin-left: -$tooltip-arrow-size;
+            width: 0;
+            height: 0;
+            transition: inherit;
+            border-style: solid;
+            border-width: $tooltip-arrow-size $tooltip-arrow-size 0 $tooltip-arrow-size;
+            border-color: $controls-bg transparent transparent;
        }
    }
    label:hover .player-tooltip,
-    input.tab-focus:focus + label .player-tooltip, 
+    input:focus + label .player-tooltip, 
    button:hover .player-tooltip,
-    button.tab-focus:focus .player-tooltip {
+    button:focus .player-tooltip {
        visibility: visible;
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
@ -396,7 +403,7 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
            background: transparent;
        }
        &-buffer[value],
-        &-played[value] {
+        &-played[value] {   
            &::-webkit-progress-bar {
                background: transparent;
            }
@ -442,7 +449,7 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
                -moz-appearance: none;
                @include seek-thumb();
            }
-
+            
            // Microsoft
            &::-ms-track {
                color: transparent;
@ -472,15 +479,15 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
        background-repeat: repeat-x;
        background-color: $progress-buffered-bg;
        background-image: linear-gradient(
-            -45deg,
-            $progress-loading-bg 25%,
-            transparent 25%,
-            transparent 50%,
-            $progress-loading-bg 50%,
+            -45deg, 
+            $progress-loading-bg 25%, 
+            transparent 25%, 
+            transparent 50%, 
+            $progress-loading-bg 50%, 
            $progress-loading-bg 75%,
-            transparent 75%,
+            transparent 75%, 
            transparent);
-            color: transparent;
+        color: transparent;
    }

    // States
@ -502,11 +509,11 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
        -moz-appearance: none;
        width: 100px;
        margin: 0 $control-spacing 0 0;
-        padding: 0;
+        padding: 0;     
        cursor: pointer;
        background: transparent;
        border: none;
-
+        
        // Webkit
        &::-webkit-slider-runnable-track {
            @include volume-track();
@ -524,7 +531,7 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
        &::-moz-range-thumb {
            @include volume-thumb();
        }
-
+        
        // Microsoft
        &::-ms-track {
            height: $volume-track-height;
@ -618,7 +625,7 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
                transform: translateY(0);
            }
            .player-captions {
-                bottom: (@control-spacing / 2);
+                bottom: ($control-spacing / 2);
                transition: bottom .3s .2s ease;
            }
        }
@ -659,4 +666,4 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
    &.fullscreen-enabled [data-player='fullscreen'] + label {
        display: inline-block;
    }
-}
+}
Author	SHA1	Message	Date
Sam Potts	a978348123	Version bump	2015-07-28 11:31:32 +10:00
Sam Potts	00cf797c20	Restored !default and fullscreen logic in SASS	2015-07-28 11:29:49 +10:00
Sam Potts	6b0f58dab2	Merge pull request #102 from ChristianPV/patch-1 Update plyr.scss - Make it work	2015-07-28 10:13:47 +10:00
khrizpv	04cf5dfda1	Update plyr.scss - Make it work There were some things that needed to be changed for the sass preprocessor to work. There were some variables declared as @ that need to be declared with the right syntax: $. Also sass evaluation is eager, while less evaluation is _lazy_ that means in sass, mixins should be declared before they are use. I hope you can accept this change as it's currently not working. Thanks!	2015-07-27 13:04:02 -03:00
Sam Potts	fe1989dea1	gulp	2015-07-25 22:06:13 +10:00
Sam Potts	5d19b43888	Tooltip tweak	2015-07-25 21:35:12 +10:00
Sam Potts	06ed345f29	YouTube quality tweak	2015-07-25 21:11:17 +10:00
Sam Potts	e0cd34c996	Fix for omitted kind attribute on <track> (fixes #88 )	2015-07-25 20:45:11 +10:00
Sam Potts	06641d5709	Docs	2015-07-25 20:29:54 +10:00
Sam Potts	a0d2d5cd24	Minor tweaks	2015-07-25 20:29:19 +10:00