ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Small UI tweaks and fix for instanceof issue

Browse Source
This commit is contained in:
Sam Potts 2018-01-31 19:33:00 +11:00
parent 2691c7c9d6
commit d76ef3ff91
16 changed files with 59 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

1
demo/error.html
View File

@ -10,6 +10,7 @@
<link rel="stylesheet" href="dist/error.css">
<!-- Preload -->
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-light.woff2">
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
</head>

1
demo/index.html
View File

@ -30,6 +30,7 @@
<link rel="stylesheet" href="dist/demo.css">
<!-- Preload -->
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-light.woff2">
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
</head>

1
demo/index.local.html
View File

@ -30,6 +30,7 @@
<link rel="stylesheet" href="dist/demo.css">
<!-- Preload -->
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-light.woff2">
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-medium.woff2">
<link rel="preload" as="font" crossorigin type="font/woff2" href="https://cdn.plyr.io/static/fonts/gordita-bold.woff2">
</head>

2
demo/src/sass/type/headings.scss
View File

@ -4,7 +4,7 @@
h1 {
@include font-size($font-size-h1);
font-weight: $font-weight-bold;
font-weight: $font-weight-light;
letter-spacing: $letter-spacing-headings;
margin: 0 0 ($spacing-base / 2);
}

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "plyr",
"version": "3.0.0-beta.10",
"version": "3.0.0-beta.11",
"description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
"homepage": "https://plyr.io",
"main": "./dist/plyr.js",

6
readme.md
View File

@ -122,7 +122,7 @@ Include the `plyr.js` script before the closing `</body>` tag and then call `ply
If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript, you can use the following:
```html
<script src="https://cdn.plyr.io/3.0.0-beta.10/plyr.js"></script>
<script src="https://cdn.plyr.io/3.0.0-beta.11/plyr.js"></script>
```
### CSS
@ -136,13 +136,13 @@ Include the `plyr.css` stylsheet into your `<head>`
If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
```html
<link rel="stylesheet" href="https://cdn.plyr.io/3.0.0-beta.10/plyr.css">
<link rel="stylesheet" href="https://cdn.plyr.io/3.0.0-beta.11/plyr.css">
```
### SVG Sprite
The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.0-beta.10/plyr.svg`.
reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.0.0-beta.11/plyr.svg`.
## Advanced

2
src/js/defaults.js
View File

@ -56,7 +56,7 @@ const defaults = {
// Sprite (for icons)
loadSprite: true,
iconPrefix: 'plyr',
iconUrl: 'https://cdn.plyr.io/3.0.0-beta.10/plyr.svg',
iconUrl: 'https://cdn.plyr.io/3.0.0-beta.11/plyr.svg',
// Blank video (used to prevent errors on source change)
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',

6
src/js/plyr.js
View File

@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
// plyr.js v3.0.0-beta.10
// plyr.js v3.0.0-beta.11
// https://github.com/sampotts/plyr
// License: The MIT License (MIT)
// ==========================================================================
@ -559,6 +559,10 @@ class Plyr {
return true;
}
if (this.isAudio) {
return true;
}
// Get audio tracks
return this.media.mozHasAudio || Boolean(this.media.webkitAudioDecodedByteCount) || Boolean(this.media.audioTracks && this.media.audioTracks.length);
}

4
src/js/utils.js
View File

@ -9,7 +9,7 @@ const utils = {
// Check variable types
is: {
plyr(input) {
return this.instanceof(input, Plyr);
return this.instanceof(input, window.Plyr);
},
object(input) {
return this.getConstructor(input) === Object;
@ -587,7 +587,7 @@ const utils = {
const event = new CustomEvent(type, {
bubbles: utils.is.boolean(bubbles) ? bubbles : false,
detail: Object.assign({}, detail, {
plyr: this instanceof Plyr ? this : null,
plyr: utils.is.plyr(this) ? this : null,
}),
});

45
src/sass/components/sliders.scss
View File

@ -91,6 +91,21 @@
@include plyr-tab-focus();
}
}
}
// Video range inputs
.plyr--full-ui.plyr--video input[type='range'] {
&::-webkit-slider-runnable-track {
background-color: $plyr-video-range-track-bg;
}
&::-moz-range-track {
background-color: $plyr-video-range-track-bg;
}
&::-ms-track {
background-color: $plyr-video-range-track-bg;
}
// Pressed styles
&:active {
@ -108,21 +123,6 @@
}
}
// Video range inputs
.plyr--full-ui.plyr--video input[type='range'] {
&::-webkit-slider-runnable-track {
background-color: $plyr-video-range-track-bg;
}
&::-moz-range-track {
background-color: $plyr-video-range-track-bg;
}
&::-ms-track {
background-color: $plyr-video-range-track-bg;
}
}
// Audio range inputs
.plyr--full-ui.plyr--audio input[type='range'] {
&::-webkit-slider-runnable-track {
@ -136,4 +136,19 @@
&::-ms-track {
background-color: $plyr-audio-range-track-bg;
}
// Pressed styles
&:active {
&::-webkit-slider-thumb {
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
}
&::-moz-range-thumb {
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
}
&::-ms-thumb {
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
}
}
}

9
src/sass/lib/mixins.scss
View File

@ -44,8 +44,8 @@
width: $plyr-range-thumb-height;
}
@mixin plyr-range-thumb-active() {
box-shadow: 0 0 0 $plyr-range-thumb-active-shadow-width transparentize($plyr-range-thumb-bg, 0.5);
@mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-bg, 0.5)) {
box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color;
}
// Fullscreen styles
@ -87,6 +87,11 @@
}
}
// Hide cursor in fullscreen when controls hidden
&.plyr--hide-controls {
cursor: none;
}
// Large captions in full screen on larger screens
@media (min-width: $plyr-bp-lg) {
.plyr__captions {

3
src/sass/settings/sliders.scss
View File

@ -9,7 +9,7 @@ $plyr-range-thumb-active-shadow-width: 3px !default;
$plyr-range-thumb-height: 14px !default;
$plyr-range-thumb-bg: #fff !default;
$plyr-range-thumb-border: 2px solid transparent !default;
$plyr-range-thumb-shadow: 0 1px 1px rgba($plyr-video-controls-bg, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
// Track
$plyr-range-track-height: 6px !default;
@ -21,3 +21,4 @@ $plyr-range-fill-bg: $plyr-color-main !default;
// Type specific
$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;
$plyr-audio-range-thumb-shadow-color: rgba(#000, 0.1) !default;