aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/utils.js10
-rw-r--r--src/less/components/menus.less3
-rw-r--r--src/less/components/progress.less21
-rw-r--r--src/less/components/sliders.less4
-rw-r--r--src/less/lib/mixins.less4
-rw-r--r--src/less/settings.less9
6 files changed, 19 insertions, 32 deletions
diff --git a/src/js/utils.js b/src/js/utils.js
index a0a551c4..d9dd3df1 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -29,22 +29,22 @@ const utils = {
return !this.nullOrUndefined(input) && Array.isArray(input);
},
weakMap(input) {
- return this.instanceof(input, WeakMap);
+ return this.instanceof(input, window.WeakMap);
},
nodeList(input) {
- return this.instanceof(input, NodeList);
+ return this.instanceof(input, window.NodeList);
},
element(input) {
- return this.instanceof(input, Element);
+ return this.instanceof(input, window.Element);
},
textNode(input) {
return this.getConstructor(input) === Text;
},
event(input) {
- return this.instanceof(input, Event);
+ return this.instanceof(input, window.Event);
},
cue(input) {
- return this.instanceof(input, TextTrackCue) || this.instanceof(input, VTTCue);
+ return this.instanceof(input, window.TextTrackCue) || this.instanceof(input, window.VTTCue);
},
track(input) {
return this.instanceof(input, TextTrack) || (!this.nullOrUndefined(input) && this.string(input.kind));
diff --git a/src/less/components/menus.less b/src/less/components/menus.less
index 80b8fabe..f0a92d06 100644
--- a/src/less/components/menus.less
+++ b/src/less/components/menus.less
@@ -3,6 +3,7 @@
// --------------------------------------------------------------
.plyr__menu {
+ display: flex; // Edge fix
position: relative;
// Animate the icon
@@ -11,7 +12,7 @@
}
.plyr__control[aria-expanded='true'] {
svg {
- transform: rotate(45deg);
+ transform: rotate(90deg);
}
// Hide tooltip
diff --git a/src/less/components/progress.less b/src/less/components/progress.less
index 1472f9c5..1a252937 100644
--- a/src/less/components/progress.less
+++ b/src/less/components/progress.less
@@ -4,7 +4,7 @@
.plyr__progress {
position: relative;
- display: none;
+ display: flex;
flex: 1;
input[type='range'] {
@@ -19,10 +19,6 @@
}
}
-.plyr .plyr__progress {
- display: inline-block;
-}
-
.plyr__progress--buffer {
position: absolute;
left: 0;
@@ -40,6 +36,7 @@
&::-webkit-progress-bar {
background: transparent;
+ transition: width 0.2s ease;
}
&::-webkit-progress-value {
@@ -53,24 +50,12 @@
background: currentColor;
border-radius: 100px;
min-width: @plyr-range-track-height;
+ transition: width 0.2s ease;
}
// Microsoft
&::-ms-fill {
border-radius: 100px;
- }
-}
-
-.plyr__progress--buffer {
- &::-webkit-progress-value {
- transition: width 0.2s ease;
- }
-
- &::-moz-progress-bar {
- transition: width 0.2s ease;
- }
-
- &::-ms-fill {
transition: width 0.2s ease;
}
}
diff --git a/src/less/components/sliders.less b/src/less/components/sliders.less
index b420c8ad..41954a97 100644
--- a/src/less/components/sliders.less
+++ b/src/less/components/sliders.less
@@ -5,7 +5,7 @@
// Specificity is for bootstrap compatibility
.plyr--full-ui input[type='range'] {
display: block;
- height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
+ height: @plyr-range-thumb-active-height;
width: 100%;
margin: 0;
padding: 0;
@@ -16,7 +16,7 @@
border-radius: (@plyr-range-thumb-height * 2);
// Used in JS to populate lower fill for WebKit
- color: @plyr-range-selected-bg;
+ color: @plyr-range-fill-bg;
// WebKit
-webkit-appearance: none;
diff --git a/src/less/lib/mixins.less b/src/less/lib/mixins.less
index 8a3c52ab..da63443b 100644
--- a/src/less/lib/mixins.less
+++ b/src/less/lib/mixins.less
@@ -35,7 +35,7 @@
.plyr-range-thumb() {
position: relative;
height: @plyr-range-thumb-height;
- width: @plyr-range-thumb-width;
+ width: @plyr-range-thumb-height;
background: @plyr-range-thumb-bg;
border: @plyr-range-thumb-border;
border-radius: 100%;
@@ -47,7 +47,7 @@
.plyr-range-thumb-active() {
background: @plyr-range-thumb-active-bg;
border-color: @plyr-range-thumb-active-border-color;
- transform: scale(@plyr-range-thumb-active-scale);
+ transform: scale(unit(@plyr-range-thumb-active-height / @plyr-range-thumb-height));
}
// Fullscreen styles
diff --git a/src/less/settings.less b/src/less/settings.less
index 73cd10ca..0bcdafdb 100644
--- a/src/less/settings.less
+++ b/src/less/settings.less
@@ -78,17 +78,18 @@
// Range sliders
@plyr-range-track-height: 6px;
-@plyr-range-thumb-height: ceil(@plyr-range-track-height * 2.3);
-@plyr-range-thumb-width: ceil(@plyr-range-track-height * 2.3);
+@plyr-range-thumb-height: 14px;
@plyr-range-thumb-bg: #fff;
@plyr-range-thumb-border: 2px solid transparent;
@plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(@plyr-color-gunmetal, 20%);
+@plyr-range-fill-bg: @plyr-color-main;
+
@plyr-range-thumb-active-border-color: #fff;
@plyr-range-thumb-active-bg: @plyr-video-control-bg-hover;
-@plyr-range-thumb-active-scale: 1.5;
+@plyr-range-thumb-active-height: 20px;
+
@plyr-video-range-track-bg: @plyr-video-progress-buffered-bg;
@plyr-audio-range-track-bg: @plyr-audio-progress-buffered-bg;
-@plyr-range-selected-bg: @plyr-color-main;
// Breakpoints
@plyr-bp-sm: 480px;