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
@ -22,9 +22,28 @@ $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-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;
@ -37,7 +56,7 @@ $tooltip-radius:          3px !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-size:     40px !default
 $progress-loading-bg:       rgba(0,0,0, .15) !default;

 // Volume
@ -59,27 +78,6 @@ $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)
 {
@ -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;
@ -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;
@ -240,7 +253,7 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
            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;

@ -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);
@ -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;
            }
        }
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