Version bump

Merge branch 'master' of github.com:selz/plyr
Tooltip fix (Fixes #97 )
2015-07-21 08:51:44 +10:00 · 2015-07-21 08:51:25 +10:00 · 2015-07-21 08:51:14 +10:00 · 2015-07-20 23:11:11 +10:00 · 2015-07-20 23:09:57 +10:00 · 2015-07-20 23:04:13 +10:00
11 changed files with 36 additions and 28 deletions
--- a/dist/plyr.css
+++ b/dist/plyr.css
--- 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.0/docs.css">
+        <link rel="stylesheet" href="//cdn.plyr.io/1.2.1/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.0/plyr.css?1">
+        <link rel="stylesheet" href="https://cdn.plyr.io/1.2.1/plyr.css?1">

        <!-- Docs styles -->
-        <link rel="stylesheet" href="https://cdn.plyr.io/1.2.0/docs.css?2">
+        <link rel="stylesheet" href="https://cdn.plyr.io/1.2.1/docs.css?3">
    </head>
    <body>
        <header>
@ -92,18 +92,18 @@
                a.send();
                a.onload = function(){
                    var c = d.createElement("div");
-                    c.style.display="none";
+                    c.setAttribute("hidden", "");
                    c.innerHTML = a.responseText;
                    b.insertBefore(c, b.childNodes[0]);
                }
            }
-        })(document, "https://cdn.plyr.io/1.2.0/sprite.svg");
+        })(document, "https://cdn.plyr.io/1.2.1/sprite.svg");
        </script>

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

        <!-- Docs script -->
-        <script src="https://cdn.plyr.io/1.2.0/docs.js?1"></script>
+        <script src="https://cdn.plyr.io/1.2.1/docs.js?1"></script>
    </body>
 </html>
--- a/docs/src/less/components/base.less
+++ b/docs/src/less/components/base.less
@ -8,13 +8,19 @@
    box-sizing: border-box; 
 }

+// Hidden
+[hidden] {
+    display: none;
+}
+
 // Base
 html {
+    height: 100%;
    font-size: 100%;
+    background: linear-gradient(#fff, @body-background);
 }
 body {
    font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    background: @body-background;
    line-height: 1.5;
    text-align: center;
    color: @gray;
--- a/docs/src/less/components/buttons.less
+++ b/docs/src/less/components/buttons.less
@ -123,7 +123,7 @@ nav {
 	position: relative;
 	margin-left: 6px;
 	padding: ((@padding-base / 2) - 1px);
-	background: @body-background;
+	background: #fff;
 	border: 1px solid @gray-light;

 	&::before {
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "plyr",
-  "version": "1.2.0",
+  "version": "1.2.1",
  "description": "A simple HTML5 media player using custom controls",
  "homepage": "http://plyr.io",
  "main": "gulpfile.js",
--- a/readme.md
+++ b/readme.md
@ -3,10 +3,10 @@ A simple, accessible HTML5 media player.

 [Checkout the demo](http://plyr.io)

-[![Image of Plyr](https://cdn.plyr.io/static/plyr.png?2)](http://plyr.io)
+[![Image of Plyr](https://cdn.plyr.io/static/plyr.jpg)](http://plyr.io)

 ## Why?
-We wanted a lightweight, accessible and customisable media player that just supports *modern* browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job. 
+We wanted a lightweight, accessible and customisable media player that just supports [*modern*](#browser-support) browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job. 

 ## Features
 - **Accessible** - full support for captions and screen readers.
@ -15,7 +15,7 @@ We wanted a lightweight, accessible and customisable media player that just supp
 - **Semantic** - uses the *right* elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no `<span>` or `<a href="#">` button hacks.
 - **Responsive** - as you'd expect these days.
 - **Audio & Video** - support for both formats.
- **[Embed](#embed)** - support for YouTube (Vimeo soon).
+- **[Embedded Video](#embeds)** - support for YouTube (Vimeo soon).
 - **[API](#api)** - toggle playback, volume, seeking, and more.
 - **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes.
 - **No dependencies** - written in vanilla JavaScript, no jQuery required. 
@ -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.0/plyr.js` to `https://cdn.plyr.io/1.2.0/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.1/plyr.js` to `https://cdn.plyr.io/1.2.1/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.0/plyr.css">
-<script src="https://cdn.plyr.io/1.2.0/plyr.js"></script>
+<link rel="stylesheet" href="https://cdn.plyr.io/1.2.1/plyr.css">
+<script src="https://cdn.plyr.io/1.2.1/plyr.js"></script>
 ```

-You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.2.0/sprite.svg`.
+You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.2.1/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.0
+// plyr.js v1.2.1
 // https://github.com/selz/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@ -28,7 +28,7 @@

 // Tooltips
@tooltip-bg:                @controls-bg;
-@tooltip-color:             #fff;
+@tooltip-color:             @control-color;
@tooltip-padding:           @control-spacing;   
@tooltip-arrow-size:        5px;
@tooltip-radius:            3px;
@ -331,8 +331,9 @@
        line-height: 1.5;
        font-weight: 600;

-        transform: translate(-50%, (@tooltip-padding * 3));
-        transition: transform .2s .2s ease, opacity .2s .2s ease;
+        transform: translate(-50%, (@tooltip-padding * 3)) scale(0);
+        transform-origin: 50% 100%;
+        transition: transform .2s .1s ease, opacity .2s .1s ease;

        &::after {
            content: "";
@ -355,7 +356,7 @@
    button:focus .player-tooltip {
        visibility: visible;
        opacity: 1;
-        transform: translate(-50%, 0);
+        transform: translate(-50%, 0) scale(1);
    }
    label:hover .player-tooltip,
    button:hover .player-tooltip {
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@ -28,7 +28,7 @@ $control-bg-hover:        @blue !default;

 // Tooltips
 $tooltip-bg:              $controls-bg !default;
-$tooltip-color:           #fff !default;
+$tooltip-color:           $control-color !default;
 $tooltip-padding:         $control-spacing !default;
 $tooltip-arrow-size:      5px !default;
 $tooltip-radius:          3px !default;
@ -329,8 +329,9 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
        line-height: 1.5;
        font-weight: 600;

-        transform: translate(-50%, ($tooltip-padding * 3));
-        transition: transform .2s .2s ease, opacity .2s .2s ease;
+        transform: translate(-50%, ($tooltip-padding * 3)) scale(0);
+        transform-origin: 50% 100%;
+        transition: transform .2s .1s ease, opacity .2s .1s ease;

        &::after {
            content: "";
@ -353,7 +354,7 @@ $bp-captions-large:       768px !default; // When captions jump to the larger fo
    button:focus .player-tooltip {
        visibility: visible;
        opacity: 1;
-        transform: translate(-50%, 0);
+        transform: translate(-50%, 0) scale(1);
    }
    label:hover .player-tooltip,
    button:hover .player-tooltip {
Author	SHA1	Message	Date
Sam Potts	5dc0d84300	Version bump	2015-07-21 08:51:44 +10:00
Sam Potts	ec8923ef08	Merge branch 'master' of github.com:selz/plyr	2015-07-21 08:51:25 +10:00
Sam Potts	5a414572f9	Tooltip fix (Fixes #97 )	2015-07-21 08:51:14 +10:00
Sam Potts	7f40307b0a	Update readme.md	2015-07-20 23:11:11 +10:00
Sam Potts	a12485d10f	Update readme.md	2015-07-20 23:09:57 +10:00
Sam Potts	4695bbf483	Merge branch 'master' of github.com:selz/plyr	2015-07-20 23:04:13 +10:00
Sam Potts	20ee77a55e	Docs tweak	2015-07-20 23:03:24 +10:00
Sam Potts	78a0ac8674	Update readme.md	2015-07-20 22:51:33 +10:00