Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| a978348123 | |||
| 00cf797c20 | |||
| 6b0f58dab2 | |||
| 04cf5dfda1 | |||
| fe1989dea1 | |||
| 5d19b43888 |
@ -1,5 +1,8 @@
|
|||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
## v1.2.6
|
||||||
|
- SASS updates and fixes (cheers @ChristianPV)
|
||||||
|
|
||||||
## v1.2.5
|
## v1.2.5
|
||||||
- Fix for YouTube quality (let them decide quality)
|
- Fix for YouTube quality (let them decide quality)
|
||||||
|
|
||||||
|
|||||||
2
dist/plyr.css
vendored
2
dist/plyr.css
vendored
File diff suppressed because one or more lines are too long
@ -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.2.5/docs.css">
|
<link rel="stylesheet" href="//cdn.plyr.io/1.2.6/docs.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
|
|||||||
@ -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="https://cdn.plyr.io/1.2.5/plyr.css?1">
|
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.6/plyr.css?2">
|
||||||
|
|
||||||
<!-- Docs styles -->
|
<!-- Docs styles -->
|
||||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.5/docs.css?1">
|
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.6/docs.css?1">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
@ -97,13 +97,13 @@
|
|||||||
b.insertBefore(c, b.childNodes[0]);
|
b.insertBefore(c, b.childNodes[0]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})(document, "https://cdn.plyr.io/1.2.5/sprite.svg");
|
})(document, "https://cdn.plyr.io/1.2.6/sprite.svg");
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Plyr core script -->
|
<!-- Plyr core script -->
|
||||||
<script src="https://cdn.plyr.io/1.2.5/plyr.js?1"></script>
|
<script src="https://cdn.plyr.io/1.2.6/plyr.js?1"></script>
|
||||||
|
|
||||||
<!-- Docs script -->
|
<!-- Docs script -->
|
||||||
<script src="https://cdn.plyr.io/1.2.5/docs.js?1"></script>
|
<script src="https://cdn.plyr.io/1.2.6/docs.js?1"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
10
gulpfile.js
10
gulpfile.js
@ -165,11 +165,6 @@ build.templates();
|
|||||||
build.less(bundles.docs.less, "docs");
|
build.less(bundles.docs.less, "docs");
|
||||||
build.js(bundles.docs.js, "docs");
|
build.js(bundles.docs.js, "docs");
|
||||||
|
|
||||||
// Default gulp task
|
|
||||||
gulp.task("default", function(){
|
|
||||||
run("templates", tasks.js, tasks.less, "sprite", "watch");
|
|
||||||
});
|
|
||||||
|
|
||||||
// Build all JS (inc. templates)
|
// Build all JS (inc. templates)
|
||||||
gulp.task("js", function(){
|
gulp.task("js", function(){
|
||||||
run("templates", tasks.js);
|
run("templates", tasks.js);
|
||||||
@ -193,6 +188,11 @@ gulp.task("watch", function () {
|
|||||||
gulp.watch(paths.docs.src.templates, ["js"]);
|
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
|
// Publish a version to CDN and docs
|
||||||
// --------------------------------------------
|
// --------------------------------------------
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "plyr",
|
"name": "plyr",
|
||||||
"version": "1.2.5",
|
"version": "1.2.6",
|
||||||
"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",
|
||||||
|
|||||||
@ -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.
|
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.5/plyr.js` to `https://cdn.plyr.io/1.2.5/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
|
### Bower
|
||||||
If bower is your thang, you can grab Plyr using:
|
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:
|
If you want to use our CDN, you can use the following:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.5/plyr.css">
|
<link rel="stylesheet" href="https://cdn.plyr.io/1.2.6/plyr.css">
|
||||||
<script src="https://cdn.plyr.io/1.2.5/plyr.js"></script>
|
<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.5/sprite.svg`.
|
You can also access the `sprite.svg` file at `https://cdn.plyr.io/1.2.6/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.
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
// Plyr
|
// Plyr
|
||||||
// plyr.js v1.2.5
|
// plyr.js v1.2.6
|
||||||
// https://github.com/selz/plyr
|
// https://github.com/selz/plyr
|
||||||
// License: The MIT License (MIT)
|
// License: The MIT License (MIT)
|
||||||
// ==========================================================================
|
// ==========================================================================
|
||||||
|
|||||||
@ -28,6 +28,7 @@
|
|||||||
|
|
||||||
// Tooltips
|
// Tooltips
|
||||||
@tooltip-bg: @controls-bg;
|
@tooltip-bg: @controls-bg;
|
||||||
|
@tooltip-border-color: @off-white;
|
||||||
@tooltip-color: @control-color;
|
@tooltip-color: @control-color;
|
||||||
@tooltip-padding: @control-spacing;
|
@tooltip-padding: @control-spacing;
|
||||||
@tooltip-arrow-size: 5px;
|
@tooltip-arrow-size: 5px;
|
||||||
@ -316,8 +317,6 @@
|
|||||||
|
|
||||||
// Tooltips
|
// Tooltips
|
||||||
&-tooltip {
|
&-tooltip {
|
||||||
@border-base: darken(@tooltip-bg, 8%);
|
|
||||||
|
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
@ -327,7 +326,7 @@
|
|||||||
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
background: @tooltip-bg;
|
background: @tooltip-bg;
|
||||||
border: 1px solid @border-base;
|
border: 1px solid @tooltip-border-color;
|
||||||
border-radius: @tooltip-radius;
|
border-radius: @tooltip-radius;
|
||||||
color: @tooltip-color;
|
color: @tooltip-color;
|
||||||
font-size: @font-size-small;
|
font-size: @font-size-small;
|
||||||
@ -349,10 +348,8 @@
|
|||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
background: @tooltip-bg;
|
background: @tooltip-bg;
|
||||||
transform: translate(-50%, -50%) rotate(45deg) translateY(2px);
|
transform: translate(-50%, -50%) rotate(45deg) translateY(1px);
|
||||||
|
border: 1px solid @tooltip-border-color;
|
||||||
@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;
|
border-width: 0 1px 1px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -22,9 +22,28 @@ $font-size-large: ceil(($font-size-base * 1.5)) !default;
|
|||||||
// Controls
|
// Controls
|
||||||
$control-spacing: 10px !default;
|
$control-spacing: 10px !default;
|
||||||
$controls-bg: #fff !default;
|
$controls-bg: #fff !default;
|
||||||
$control-bg-hover: @blue !default;
|
$control-bg-hover: $blue !default; !default
|
||||||
.contrast-control-color($controls-bg);
|
|
||||||
.contrast-control-color-hover($control-bg-hover);
|
// 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
|
// Tooltips
|
||||||
$tooltip-bg: $controls-bg !default;
|
$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-bg: rgba(red($gray), green($gray), blue($gray), .2) !default;
|
||||||
$progress-playing-bg: $blue !default;
|
$progress-playing-bg: $blue !default;
|
||||||
$progress-buffered-bg: rgba(red($gray), green($gray), blue($gray), .25) !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;
|
$progress-loading-bg: rgba(0,0,0, .15) !default;
|
||||||
|
|
||||||
// Volume
|
// Volume
|
||||||
@ -59,27 +78,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
|
|||||||
to { background-position: $progress-loading-size 0; }
|
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
|
// Font smoothing
|
||||||
@mixin font-smoothing($mode: on)
|
@mixin font-smoothing($mode: on)
|
||||||
{
|
{
|
||||||
@ -108,7 +106,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
|
|||||||
outline-offset: 0;
|
outline-offset: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Range mixins
|
// <input type="range"> styling
|
||||||
@mixin volume-thumb()
|
@mixin volume-thumb()
|
||||||
{
|
{
|
||||||
height: $volume-thumb-height;
|
height: $volume-thumb-height;
|
||||||
@ -179,6 +177,21 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
|
|||||||
vertical-align: middle;
|
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
|
||||||
&-captions {
|
&-captions {
|
||||||
display: none;
|
display: none;
|
||||||
@ -240,7 +253,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
|
|||||||
margin: 0 2px;
|
margin: 0 2px;
|
||||||
padding: ($control-spacing / 2) $control-spacing;
|
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;
|
border-radius: 3px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
@ -314,8 +327,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
|
|||||||
|
|
||||||
// Tooltips
|
// Tooltips
|
||||||
&-tooltip {
|
&-tooltip {
|
||||||
$border-base: darken($tooltip-bg, 8%);
|
|
||||||
|
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
@ -325,7 +336,6 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
|
|||||||
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
background: $tooltip-bg;
|
background: $tooltip-bg;
|
||||||
border: 1px solid $border-base;
|
|
||||||
border-radius: $tooltip-radius;
|
border-radius: $tooltip-radius;
|
||||||
color: $tooltip-color;
|
color: $tooltip-color;
|
||||||
font-size: $font-size-small;
|
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%;
|
transform-origin: 50% 100%;
|
||||||
transition: transform .2s .1s ease, opacity .2s .1s ease;
|
transition: transform .2s .1s ease, opacity .2s .1s ease;
|
||||||
|
|
||||||
// Arrow
|
|
||||||
&::after {
|
&::after {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
top: 100%;
|
|
||||||
left: 50%;
|
|
||||||
display: block;
|
display: block;
|
||||||
width: 10px;
|
position: absolute;
|
||||||
height: 10px;
|
left: 50%;
|
||||||
background: $tooltip-bg;
|
bottom: -$tooltip-arrow-size;
|
||||||
transform: translate(-50%, -50%) rotate(45deg) translateY(2px);
|
margin-left: -$tooltip-arrow-size;
|
||||||
|
width: 0;
|
||||||
$arrow-border-color: darken($border-base, 5%);
|
height: 0;
|
||||||
border: 1px solid rgba(red($arrow-border-color), green($arrow-border-color), blue($arrow-border-color), .8);
|
transition: inherit;
|
||||||
border-width: 0 1px 1px 0;
|
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,
|
label:hover .player-tooltip,
|
||||||
input.tab-focus:focus + label .player-tooltip,
|
input:focus + label .player-tooltip,
|
||||||
button:hover .player-tooltip,
|
button:hover .player-tooltip,
|
||||||
button.tab-focus:focus .player-tooltip {
|
button:focus .player-tooltip {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translate(-50%, 0) scale(1);
|
transform: translate(-50%, 0) scale(1);
|
||||||
@ -495,7 +502,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
|
|||||||
// Volume control
|
// Volume control
|
||||||
// <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;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
@ -618,7 +625,7 @@ $bp-captions-large: 768px !default; // When captions jump to the larger fo
|
|||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
.player-captions {
|
.player-captions {
|
||||||
bottom: (@control-spacing / 2);
|
bottom: ($control-spacing / 2);
|
||||||
transition: bottom .3s .2s ease;
|
transition: bottom .3s .2s ease;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user