aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorSam Potts <me@sampotts.me>2016-04-26 19:14:42 +1000
committerSam Potts <me@sampotts.me>2016-04-26 19:14:42 +1000
commit6c8d118f8382bbdc44ba4a82c05d0cd5daa896c0 (patch)
treefeada78873d4440d81c9a32c85e9af0326c01231 /src
parente26694c32202ed5eee2ae07c3834946aae93f5bc (diff)
downloadplyr-6c8d118f8382bbdc44ba4a82c05d0cd5daa896c0.tar.lz
plyr-6c8d118f8382bbdc44ba4a82c05d0cd5daa896c0.tar.xz
plyr-6c8d118f8382bbdc44ba4a82c05d0cd5daa896c0.zip
WIP
Diffstat (limited to 'src')
-rw-r--r--src/js/plyr.js17
-rw-r--r--src/less/plyr.less41
2 files changed, 34 insertions, 24 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 7ac9d7f2..45bc2c18 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -2269,7 +2269,7 @@
_pause();
// Set seek input to 0
- if(plyr.buttons.seek) {
+ if(plyr.buttons && plyr.buttons.seek) {
plyr.buttons.seek.value = 0;
}
@@ -2559,11 +2559,20 @@
_on(plyr.media, 'waiting canplay seeked', _checkLoading);
// Click video
- if (config.clickToPlay) {
+ if (config.clickToPlay && plyr.type !== 'audio') {
+ // Re-fetch the wrapper
+ var wrapper = _getElement('.' + config.classes.videoWrapper);
+
+ // Bail if there's no wrapper (this should never happen)
+ if(!wrapper) {
+ return;
+ }
+
// Set cursor
- plyr.videoContainer.style.cursor = "pointer";
+ wrapper.style.cursor = "pointer";
- _on(plyr.media, 'click', function() {
+ // On click play, pause ore restart
+ _on(wrapper, 'click', function() {
if (plyr.media.paused) {
_play();
}
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 99df1115..4d102a09 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -7,7 +7,7 @@
// -------------------------------
// Colors
-@plyr-color-main: #63B4E1;
+@plyr-color-main: #3498DB;
// Font sizes
@plyr-font-size-small: 14px;
@@ -55,9 +55,10 @@
@range-thumb-width: floor(@range-track-height * 2);
@range-thumb-bg: #fff;
@range-thumb-border: 2px solid transparent;
+@range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%);
@range-thumb-active-border-color: #fff;
@range-thumb-active-bg: @plyr-video-control-bg-hover;
-@range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%);
+@range-thumb-active-scale: 1.25;
// Breakpoints
@plyr-bp-control-split: 560px; // When controls split into left/right
@@ -72,9 +73,9 @@
// Mixins
// -------------------------------
// <input type="range"> styling
-.range-track() {
+.range-track(@background: @range-track-bg) {
height: @range-track-height;
- background: @range-track-bg;
+ background: @background;
border: 0;
border-radius: (@range-track-height / 2);
user-select: none;
@@ -93,7 +94,7 @@
.range-thumb-active() {
background: @range-thumb-active-bg;
border-color: @range-thumb-active-border-color;
- transform: scale(1.25);
+ transform: scale(@range-thumb-active-scale);
}
// Styles
@@ -132,7 +133,7 @@
// Specificity is for bootstrap compatibility
input[type='range'] {
display: block;
- height: @range-thumb-height;
+ height: (@range-thumb-height * @range-thumb-active-scale);
width: 100%;
margin: 0;
padding: 0;
@@ -171,17 +172,17 @@
border: 0;
color: transparent;
}
- &::-ms-fill-lower,
&::-ms-fill-upper {
.range-track();
}
+ &::-ms-fill-lower {
+ .range-track(@plyr-progress-playing-bg);
+ }
&::-ms-thumb {
.range-thumb();
-
// For some reason, Edge uses the -webkit margin above
margin-top: 0;
}
-
&::-ms-tooltip {
display: none;
}
@@ -229,6 +230,9 @@
position: relative;
background: #000;
border-radius: inherit;
+
+ // Cleaner radius, also forces iframe radius
+ -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
// Container for embeds
@@ -277,6 +281,7 @@
font-size: @plyr-font-size-captions-base;
text-align: center;
font-weight: 400;
+ -webkit-font-smoothing: subpixel-antialiased;
span {
border-radius: 2px;
@@ -488,6 +493,7 @@
color: @plyr-tooltip-color;
font-size: @plyr-font-size-small;
line-height: 1.3;
+ -webkit-font-smoothing: subpixel-antialiased;
transform: translate(-50%, 10px) scale(.8);
transform-origin: 50% 100%;
@@ -539,7 +545,6 @@
&::-moz-range-track {
background: transparent;
}
- &::-ms-fill-lower,
&::-ms-fill-upper {
background: transparent;
}
@@ -586,6 +591,7 @@
z-index: 1;
color: @plyr-progress-playing-bg;
background: transparent;
+ transition: none;
&::-webkit-progress-value {
min-width: @range-track-height;
@@ -598,9 +604,7 @@
border-bottom-right-radius: 0;
}
&::-ms-fill {
- min-width: @range-track-height;
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
+ display: none;
}
}
.plyr__progress--buffer[value] {
@@ -643,6 +647,7 @@
vertical-align: middle;
font-size: @plyr-font-size-small;
line-height: .95;
+ -webkit-font-smoothing: subpixel-antialiased;
}
// Media duration hidden on small screens
@@ -671,15 +676,10 @@
// Hide sound controls on iOS
// It's not supported to change volume using JavaScript:
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
-.plyr--is-ios .plyr__volume,
-.plyr--is-ios [data-plyr='mute'],
-.plyr--is-ios.plyr--audio .plyr__controls--right {
+.plyr--is-ios .plyr__volume[type='range'],
+.plyr--is-ios [data-plyr='mute'] {
display: none;
}
-// Center buttons so it looks less odd
-.plyr--is-ios.plyr--audio .plyr__controls--left {
- float: none;
-}
// Fullscreen
// --------------------------------------------------------------
@@ -694,6 +694,7 @@
width: 100%;
z-index: 10000000;
background: #000;
+ border-radius: 0;
video {
height: 100%;