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
## v1.0.26
- Fixes for SASS (cheers @brunowego)
- Indentation reset to 4 spaces
## v1.0.25
- Fixes for iOS volume controls (hidden)
- Classnames for left/right controls changed

View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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>
<body>
<main>

View File

@ -8,10 +8,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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 -->
<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>
<body>
<header>
@ -67,13 +67,13 @@
<!-- Load SVG defs -->
<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
<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>
<!-- 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 -->
<script src="//cdn.plyr.io/1.0.25/docs.js"></script>
<script src="//cdn.plyr.io/1.0.26/docs.js"></script>
</body>
</html>

View File

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