Compare commits

..

5 Commits

Author SHA1 Message Date
9feffb2972 Version bump 2015-03-15 10:18:56 +11:00
acea5cdb24 Built js 2015-03-15 10:14:00 +11:00
55ed577b6a Indentation
Converted to 4 space width tabbing
2015-03-15 10:12:36 +11:00
20b206a161 Merge pull request #62 from brunowego/patch-1
Updated SASS support
2015-03-15 10:00:00 +11:00
9c028a0ecc Updated SASS support 2015-03-14 15:50:32 -03:00
16 changed files with 1510 additions and 1500 deletions

View File

@ -1,5 +1,9 @@
# Changelog # Changelog
## v1.0.26
- Fixes for SASS (cheers @brunowego)
- Indentation reset to 4 spaces
## v1.0.25 ## v1.0.25
- Fixes for iOS volume controls (hidden) - Fixes for iOS volume controls (hidden)
- Classnames for left/right controls changed - Classnames for left/right controls changed

View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Docs styles --> <!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.25/docs.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.26/docs.css">
</head> </head>
<body> <body>
<main> <main>

View File

@ -8,10 +8,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles --> <!-- Styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.25/plyr.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.26/plyr.css">
<!-- Docs styles --> <!-- Docs styles -->
<link rel="stylesheet" href="//cdn.plyr.io/1.0.25/docs.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.26/docs.css">
</head> </head>
<body> <body>
<header> <header>
@ -67,13 +67,13 @@
<!-- Load SVG defs --> <!-- Load SVG defs -->
<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store --> <!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
<script> <script>
(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.25/sprite.svg"); (function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"//cdn.plyr.io/1.0.26/sprite.svg");
</script> </script>
<!-- Plyr core script --> <!-- Plyr core script -->
<script src="//cdn.plyr.io/1.0.25/plyr.js"></script> <script src="//cdn.plyr.io/1.0.26/plyr.js"></script>
<!-- Docs script --> <!-- Docs script -->
<script src="//cdn.plyr.io/1.0.25/docs.js"></script> <script src="//cdn.plyr.io/1.0.26/docs.js"></script>
</body> </body>
</html> </html>

View File

@ -1,6 +1,6 @@
{ {
"name": "plyr", "name": "plyr",
"version": "1.0.25", "version": "1.0.26",
"description": "A simple HTML5 media player using custom controls", "description": "A simple HTML5 media player using custom controls",
"homepage": "http://plyr.io", "homepage": "http://plyr.io",
"main": "gulpfile.js", "main": "gulpfile.js",

View File

@ -38,7 +38,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. 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.0.25/plyr.js` to `https://cdn.plyr.io/1.0.25/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.0.26/plyr.js` to `https://cdn.plyr.io/1.0.26/plyr.js`
### Bower ### Bower
If bower is your thang, you can grab Plyr using: If bower is your thang, you can grab Plyr using:
@ -51,11 +51,11 @@ More info on setting up dependencies can be found in the [Bower Docs](http://bow
If you want to use our CDN, you can use the following. HTTPS (SSL) is supported. If you want to use our CDN, you can use the following. HTTPS (SSL) is supported.
```html ```html
<link rel="stylesheet" href="//cdn.plyr.io/1.0.25/plyr.css"> <link rel="stylesheet" href="//cdn.plyr.io/1.0.26/plyr.css">
<script src="//cdn.plyr.io/1.0.25/plyr.js"></script> <script src="//cdn.plyr.io/1.0.26/plyr.js"></script>
``` ```
You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.25/sprite.svg`. You can also access the `sprite.svg` file at `//cdn.plyr.io/1.0.26/sprite.svg`.
### CSS ### 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. 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.

View File

@ -37,7 +37,7 @@ $progress-buffered-bg: $gray;
$progress-loading-size: 40px; $progress-loading-size: 40px;
$progress-loading-bg: rgba(0,0,0, .15); $progress-loading-bg: rgba(0,0,0, .15);
// Range // Volume
$volume-track-height: 6px; $volume-track-height: 6px;
$volume-track-bg: $gray; $volume-track-bg: $gray;
$volume-thumb-height: ($volume-track-height * 2); $volume-thumb-height: ($volume-track-height * 2);
@ -79,7 +79,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
// Animation // Animation
// --------------------------------------- // ---------------------------------------
@keyframes progress { @keyframes progress {
to { background-position: @progress-loading-size 0; } to { background-position: $progress-loading-size 0; }
} }
// <input type="range"> styling // <input type="range"> styling
@ -101,29 +101,31 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
border: 0; border: 0;
border-radius: ($volume-track-height / 2); border-radius: ($volume-track-height / 2);
} }
@mixin seek-thumb() { @mixin seek-thumb()
{
background: transparent; background: transparent;
border: 0; border: 0;
width: ($control-spacing * 2); width: ($control-spacing * 2);
height: $control-spacing; height: $control-spacing;
} }
@mixin seek-track() { @mixin seek-track()
{
background: none; background: none;
border: 0; border: 0;
} }
// Font smoothing // Font smoothing
// --------------------------------------- // ---------------------------------------
@mixin font-smoothing($mode: on) when ($mode = on) @mixin font-smoothing($mode: on)
{ {
@if $mode == 'on' {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} } @else if $mode == 'off' {
@mixin font-smoothing($mode: on) when ($mode = off)
{
-moz-osx-font-smoothing: auto; -moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;
} }
}
// Styles // Styles
// ------------------------------- // -------------------------------
@ -191,7 +193,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
text-align: center; text-align: center;
// Layout // Layout
&-sound { &-right {
display: block; display: block;
margin: $control-spacing auto 0; margin: $control-spacing auto 0;
} }
@ -238,16 +240,19 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
background: transparent; background: transparent;
overflow: hidden; overflow: hidden;
} }
input:focus + label,
button:focus { // Specificity for overriding .inverted
@include tab-focus(); button:focus,
color: $control-color-focus;
}
button:hover, button:hover,
input + label:hover { [type="checkbox"]:focus + label,
[type="checkbox"] + label:hover {
background: $control-bg-hover; background: $control-bg-hover;
color: $control-color-hover; color: $control-color-hover;
} }
button:focus,
input:focus + label {
outline: 0;
}
.icon-exit-fullscreen, .icon-exit-fullscreen,
.icon-muted, .icon-muted,
.icon-captions-on { .icon-captions-on {
@ -330,8 +335,9 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: $control-spacing;
margin: 0; margin: 0;
padding: 0;
vertical-align: top; vertical-align: top;
-webkit-appearance: none; -webkit-appearance: none;
@ -339,7 +345,6 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
border: none; border: none;
background: transparent; background: transparent;
} }
&-buffer[value], &-buffer[value],
&-played[value] { &-played[value] {
&::-webkit-progress-bar { &::-webkit-progress-bar {
@ -366,7 +371,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
// <input[type='range']> element // <input[type='range']> element
// Specificity is for bootstrap compatibility // Specificity is for bootstrap compatibility
&-seek[type=range] { &-seek[type=range] {
z-index: 3; z-index: 4;
cursor: pointer; cursor: pointer;
outline: 0; outline: 0;
@ -441,6 +446,7 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
// <input[type='range']> element // <input[type='range']> element
// Specificity is for bootstrap compatibility // Specificity is for bootstrap compatibility
&-volume[type=range] { &-volume[type=range] {
display: inline-block;
vertical-align: middle; vertical-align: middle;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
@ -452,20 +458,20 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
// Webkit // Webkit
&::-webkit-slider-runnable-track { &::-webkit-slider-runnable-track {
@include range-track(); @include volume-track();
} }
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
margin-top: -(($volume-thumb-height - $volume-track-height) / 2); margin-top: -(($volume-thumb-height - $volume-track-height) / 2);
@include range-thumb(); @include volume-thumb();
} }
// Mozilla // Mozilla
&::-moz-range-track { &::-moz-range-track {
@include range-track(); @include volume-track();
} }
&::-moz-range-thumb { &::-moz-range-thumb {
@include range-thumb(); @include volume-thumb();
} }
// Microsoft // Microsoft
@ -478,10 +484,10 @@ $bp-captions-large: 768px; // When captions jump to the larger font size
} }
&::-ms-fill-lower, &::-ms-fill-lower,
&::-ms-fill-upper { &::-ms-fill-upper {
@include range-track(); @include volume-track();
} }
&::-ms-thumb { &::-ms-thumb {
@include range-thumb(); @include volume-thumb();
} }
&:focus { &:focus {