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

Styling tweaks for demo

Browse Source
This commit is contained in:
Sam Potts
2019-06-20 23:50:46 +10:00
parent 97d9228bed
commit 2e40b91ec1
40 changed files with 442 additions and 433 deletions
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

40
demo/dist/demo.js vendored
View File

@ -657,6 +657,8 @@ typeof navigator === "object" && (function () {
iteratorWithReturn[ITERATOR$2] = function () {
return this;
};
// eslint-disable-next-line no-throw-literal
Array.from(iteratorWithReturn, function () { throw 2; });
} catch (error) { /* empty */ }
var checkCorrectnessOfIteration = function (exec, SKIP_CLOSING) {
@ -677,6 +679,7 @@ typeof navigator === "object" && (function () {
};
var INCORRECT_ITERATION = !checkCorrectnessOfIteration(function (iterable) {
Array.from(iterable);
});
// `Array.from` method
@ -910,7 +913,7 @@ typeof navigator === "object" && (function () {
var createIteratorConstructor = function (IteratorConstructor, NAME, next) {
var TO_STRING_TAG = NAME + ' Iterator';
IteratorConstructor.prototype = objectCreate(IteratorPrototype$1, { next: createPropertyDescriptor(1, next) });
setToStringTag(IteratorConstructor, TO_STRING_TAG, false, true);
setToStringTag(IteratorConstructor, TO_STRING_TAG, false);
iterators[TO_STRING_TAG] = returnThis$1;
return IteratorConstructor;
};
@ -985,7 +988,7 @@ typeof navigator === "object" && (function () {
}
}
// Set @@toStringTag to native iterators
setToStringTag(CurrentIteratorPrototype, TO_STRING_TAG, true, true);
setToStringTag(CurrentIteratorPrototype, TO_STRING_TAG, true);
}
}
@ -2262,7 +2265,8 @@ typeof navigator === "object" && (function () {
var url = new URL('b?e=1', 'http://a');
var searchParams = url.searchParams;
url.pathname = 'c%20d';
return !searchParams.sort
return (isPure && !url.toJSON)
|| !searchParams.sort
|| url.href !== 'http://a/c%20d?e=1'
|| searchParams.get('e') !== '1'
|| String(new URLSearchParams('?a=1')) !== 'a=1'
@ -4974,7 +4978,7 @@ typeof navigator === "object" && (function () {
Promise: PromiseConstructor
});
setToStringTag(PromiseConstructor, PROMISE, false, true);
setToStringTag(PromiseConstructor, PROMISE, false);
setSpecies(PROMISE);
PromiseWrapper = path[PROMISE];
@ -5655,7 +5659,7 @@ typeof navigator === "object" && (function () {
});
var nativeIsFrozen = Object.isFrozen;
var FAILS_ON_PRIMITIVES$1 = fails(function () { });
var FAILS_ON_PRIMITIVES$1 = fails(function () { nativeIsFrozen(1); });
// `Object.isFrozen` method
// https://tc39.github.io/ecma262/#sec-object.isfrozen
@ -10405,6 +10409,7 @@ typeof navigator === "object" && (function () {
try {
for (var s, a = e[Symbol.iterator](); !(r = (s = a.next()).done) && (n.push(s.value), !t || n.length !== t); r = !0) {
;
}
} catch (e) {
o = !0, i = e;
@ -11766,6 +11771,8 @@ typeof navigator === "object" && (function () {
iteratorWithReturn$1[ITERATOR$b] = function () {
return this;
};
// eslint-disable-next-line no-throw-literal
Array.from(iteratorWithReturn$1, function () { throw 2; });
} catch (error) { /* empty */ }
var checkCorrectnessOfIteration$1 = function (exec, SKIP_CLOSING) {
@ -11786,6 +11793,7 @@ typeof navigator === "object" && (function () {
};
var INCORRECT_ITERATION$2 = !checkCorrectnessOfIteration$1(function (iterable) {
Array.from(iterable);
});
// `Array.from` method
@ -11877,7 +11885,7 @@ typeof navigator === "object" && (function () {
var createIteratorConstructor$1 = function (IteratorConstructor, NAME, next) {
var TO_STRING_TAG = NAME + ' Iterator';
IteratorConstructor.prototype = objectCreate$1(IteratorPrototype$4, { next: createPropertyDescriptor$1(1, next) });
setToStringTag$1(IteratorConstructor, TO_STRING_TAG, false, true);
setToStringTag$1(IteratorConstructor, TO_STRING_TAG, false);
iterators$1[TO_STRING_TAG] = returnThis$4;
return IteratorConstructor;
};
@ -11952,7 +11960,7 @@ typeof navigator === "object" && (function () {
}
}
// Set @@toStringTag to native iterators
setToStringTag$1(CurrentIteratorPrototype, TO_STRING_TAG, true, true);
setToStringTag$1(CurrentIteratorPrototype, TO_STRING_TAG, true);
}
}
@ -13165,7 +13173,8 @@ typeof navigator === "object" && (function () {
var url = new URL('b?e=1', 'http://a');
var searchParams = url.searchParams;
url.pathname = 'c%20d';
return !searchParams.sort
return (isPure$1 && !url.toJSON)
|| !searchParams.sort
|| url.href !== 'http://a/c%20d?e=1'
|| searchParams.get('e') !== '1'
|| String(new URLSearchParams('?a=1')) !== 'a=1'
@ -15792,7 +15801,7 @@ typeof navigator === "object" && (function () {
Promise: PromiseConstructor$1
});
setToStringTag$1(PromiseConstructor$1, PROMISE$1, false, true);
setToStringTag$1(PromiseConstructor$1, PROMISE$1, false);
setSpecies$1(PROMISE$1);
PromiseWrapper$1 = path$1[PROMISE$1];
@ -16720,17 +16729,11 @@ typeof navigator === "object" && (function () {
return;
}
var player = this; // Set aspect ratio
var player = this; // Set aspect ratio if fixed
if (!is$2.empty(this.config.ratio)) {
setAspectRatio.call(player);
}
/* else {
player.once('loadedmetadata', () => {
setAspectRatio.call(player);
});
} */
// Quality
} // Quality
Object.defineProperty(player.media, 'quality', {
@ -19327,8 +19330,7 @@ typeof navigator === "object" && (function () {
},
youtube: {
sdk: 'https://www.youtube.com/iframe_api',
api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}' // 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title),fileDetails)&part=snippet',
api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}'
},
googleIMA: {
sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js'

2
demo/dist/demo.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/demo.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
demo/dist/error.css vendored
View File

File diff suppressed because one or more lines are too long

10
demo/src/sass/components/buttons.scss
View File

@ -6,11 +6,9 @@
.button,
.button__count {
align-items: center;
background: $color-button-background;
border: 0;
border-radius: $border-radius-base;
box-shadow: 0 1px 1px rgba(#000, 0.1);
color: $color-button-text;
display: inline-flex;
padding: ($spacing-base * 0.75);
position: relative;
@ -21,6 +19,8 @@
// Buttons
.button {
background: $color-button-background;
color: $color-button-text;
font-weight: $font-weight-bold;
padding-left: ($spacing-base * 1.25);
padding-right: ($spacing-base * 1.25);
@ -28,7 +28,7 @@
&:hover,
&:focus {
color: $color-button-text-hover;
background: $color-button-background-hover;
// Remove the underline/border
&::after {
@ -65,12 +65,14 @@
// Count bubble
.button__count {
animation: fadein 0.2s ease;
background: $color-button-count-background;
color: $color-button-count-text;
margin-left: ($spacing-base * 0.75);
&::before {
border: $arrow-size solid transparent;
border-left-width: 0;
border-right-color: $color-button-background;
border-right-color: $color-button-count-background;
content: '';
height: 0;
position: absolute;

1
demo/src/sass/components/links.scss
View File

@ -12,7 +12,6 @@ button.faux-link {
a {
border-bottom: 1px dotted currentColor;
color: $color-link;
font-weight: $font-weight-bold;
position: relative;
text-decoration: none;
transition: all 0.2s ease;

10
demo/src/sass/components/players.scss
View File

@ -5,7 +5,7 @@
// Example players
.plyr {
border-radius: $border-radius-base;
box-shadow: 0 2px 5px rgba(#000, 0.2);
box-shadow: 0 2px 15px rgba(#000, 0.1);
margin: $spacing-base auto;
&.plyr--audio {
@ -27,6 +27,10 @@
}
// Style full supported player
.plyr__cite .icon {
margin-right: ceil($spacing-base / 6);
.plyr__cite {
color: $color-gray-5;
.icon {
margin-right: ceil($spacing-base / 6);
}
}

3
demo/src/sass/layout/core.scss
View File

@ -35,11 +35,10 @@ main {
aside {
align-items: center;
background: #fff;
color: $gray;
display: flex;
flex-shrink: 0;
justify-content: center;
padding: ($spacing-base * 0.75);
padding: $spacing-base;
position: relative;
text-align: center;
text-shadow: none;

38
demo/src/sass/settings/colors.scss
View File

@ -2,27 +2,41 @@
// Colors
// ==========================================================================
// Greyscale
$gray-dark: #343f4a;
$gray: #55646b;
// Grayscale
$color-gray-9: hsl(210, 15%, 16%);
$color-gray-8: lighten($color-gray-9, 9%);
$color-gray-7: lighten($color-gray-8, 9%);
$color-gray-6: lighten($color-gray-7, 9%);
$color-gray-5: lighten($color-gray-6, 9%);
$color-gray-4: lighten($color-gray-5, 9%);
$color-gray-3: lighten($color-gray-4, 9%);
$color-gray-2: lighten($color-gray-3, 9%);
$color-gray-1: lighten($color-gray-2, 9%);
$color-gray-0: lighten($color-gray-1, 9%);
// Branding
$color-brand-primary: hsl(198, 100%, 50%);
// Text
$color-text: #fff;
// Plyr
$color-brand-primary: #1aafff; // #7bc47f
$color-text: $color-gray-7;
$color-headings: $color-brand-primary;
// Brands
$color-twitter: #4baaf4;
// Elements
$color-link: #fff;
$color-background: $color-brand-primary;
$color-link: $color-brand-primary;
// Background
$color-background-from: hsl(198, 100%, 94%);
$color-background-to: hsl(198, 100%, 98%);
// Buttons
$color-button-background: #fff;
$color-button-text: $gray;
$color-button-text-hover: $gray-dark;
$color-button-background: $color-brand-primary;
$color-button-text: #fff;
$color-button-background-hover: hsl(198, 100%, 55%);
$color-button-count-background: #fff;
$color-button-count-text: $color-gray-6;
// Focus
$tab-focus-default-color: #fff;

2
demo/src/sass/settings/cosmetic.scss
View File

@ -9,4 +9,4 @@ $arrow-size: 5px;
$border-radius-base: 4px;
// Background
$page-background: linear-gradient(to left top, lighten($color-background, 10%), darken($color-background, 20%));
$page-background: linear-gradient(to left top, $color-background-from, $color-background-to);

3
demo/src/sass/settings/plyr.scss
View File

@ -14,6 +14,9 @@ $plyr-font-size-badges: 9px;
// Other
$plyr-font-smoothing: true;
// Colors
$plyr-color-main: $color-brand-primary;
// Captions
$plyr-font-size-captions-base: $plyr-font-size-base;
$plyr-font-size-captions-small: $plyr-font-size-small;

1
demo/src/sass/type/base.scss
View File

@ -14,7 +14,6 @@ body {
font-family: $font-sans-serif;
font-weight: $font-weight-medium;
line-height: $line-height-base;
text-shadow: 0 1px 1px rgba(#000, 0.15);
}
button,

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

@ -4,7 +4,8 @@
h1 {
@include font-size($font-size-h1);
font-weight: $font-weight-medium;
color: $color-headings;
font-weight: $font-weight-bold;
letter-spacing: $letter-spacing-headings;
line-height: 1.2;
margin: 0 0 ($spacing-base * 1.5);