aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/plyr.js48
-rw-r--r--src/less/plyr.less16
-rw-r--r--src/less/variables.less5
-rw-r--r--src/scss/plyr.scss15
-rw-r--r--src/scss/variables.scss3
5 files changed, 52 insertions, 35 deletions
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 711c4555..2b696d10 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,6 +1,6 @@
// ==========================================================================
// Plyr
-// plyr.js v2.0.7
+// plyr.js v2.0.9
// https://github.com/selz/plyr
// License: The MIT License (MIT)
// ==========================================================================
@@ -45,7 +45,7 @@
displayDuration: true,
loadSprite: true,
iconPrefix: 'plyr',
- iconUrl: 'https://cdn.plyr.io/2.0.7/plyr.svg',
+ iconUrl: 'https://cdn.plyr.io/2.0.9/plyr.svg',
clickToPlay: true,
hideControls: true,
showPosterOnEnd: false,
@@ -440,14 +440,14 @@
// Bind event handler
function _on(element, events, callback, useCapture) {
- if (_is.htmlElement(element)) {
+ if (!_is.undefined(element)) {
_toggleListener(element, events, callback, true, useCapture);
}
}
// Unbind event handler
function _off(element, events, callback, useCapture) {
- if (_is.htmlElement(element)) {
+ if (!_is.undefined(element)) {
_toggleListener(element, events, callback, false, useCapture);
}
}
@@ -1025,13 +1025,9 @@
}
}
- // Caption cue change helper event
- /*function _captionCueChange() {
- _setActiveCueForTrack(this);
- }*/
-
// Display active caption if it contains text
- function _setActiveCueForTrack(track) {
+ function _setActiveCue(track) {
+ // Get the track from the event if needed
if (_is.event(track)) {
track = track.target;
}
@@ -1091,14 +1087,17 @@
if (!plyr.captionExists) {
_toggleClass(plyr.container, config.classes.captions.enabled);
} else {
+ var tracks = plyr.media.textTracks;
+
// Turn off native caption rendering to avoid double captions
// This doesn't seem to work in Safari 7+, so the <track> elements are removed from the dom below
- var tracks = plyr.media.textTracks;
- for (var x = 0; x < tracks.length; x++) {
+ [].forEach.call(tracks, function(track) {
// Remove the listener to prevent event overlapping
- _off(tracks[x], 'cuechange', _setActiveCueForTrack);
- tracks[x].mode = 'hidden';
- }
+ _off(track, 'cuechange', _setActiveCue);
+
+ // Hide captions
+ track.mode = 'hidden';
+ });
// Enable UI
_showCaptions(plyr);
@@ -1123,11 +1122,11 @@
var track = tracks[config.captions.selectedIndex];
if (track.kind === 'captions' || track.kind === 'subtitles') {
- _on(track, 'cuechange', _setActiveCueForTrack);
+ _on(track, 'cuechange', _setActiveCue);
- // if we change the active track while a cue is already displayed we need to update it
+ // If we change the active track while a cue is already displayed we need to update it
if (track.activeCues && track.activeCues.length > 0) {
- _setActiveCueForTrack(track);
+ _setActiveCue(track);
}
}
} else {
@@ -1153,7 +1152,7 @@
// CRLF (U+000D U+000A), LF (U+000A) or CR (U+000D)
var lineSeparator = '\r\n';
if (req.indexOf(lineSeparator + lineSeparator) === -1) {
- if (req.indexOf('\r\r') !== -1){
+ if (req.indexOf('\r\r') !== -1) {
lineSeparator = '\r';
} else {
lineSeparator = '\n';
@@ -1870,6 +1869,14 @@
_triggerEvent(plyr.media, 'timeupdate');
}, 100);
+ // Check duration again due to YouTube bug
+ // https://github.com/Selz/plyr/issues/374
+ // https://code.google.com/p/gdata-issues/issues/detail?id=8690
+ if (plyr.media.duration !== instance.getDuration()) {
+ plyr.media.duration = instance.getDuration();
+ _triggerEvent(plyr.media, 'durationchange');
+ }
+
break;
case 2:
@@ -3648,7 +3655,8 @@
isMuted: function() { return plyr.media.muted; },
isReady: function() { return _hasClass(plyr.container, config.classes.ready); },
isLoading: function() { return _hasClass(plyr.container, config.classes.loading); },
- on: function(event, callback) { _on(plyr.container, event, callback); },
+ isPaused: function() { return plyr.media.paused; },
+ on: function(event, callback) { _on(plyr.container, event, callback); return this; },
play: _play,
pause: _pause,
stop: function() { _pause(); _seek(); },
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 5ba916cd..a23924e6 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -189,9 +189,6 @@
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
@@ -200,6 +197,9 @@
height: 0;
overflow: hidden;
+ // Require z-index to force border-radius
+ z-index: 0;
+
iframe {
position: absolute;
top: 0;
@@ -208,6 +208,7 @@
height: 100%;
border: 0;
user-select: none;
+ z-index: 1;
}
// Vimeo hack
@@ -259,12 +260,15 @@
.plyr--captions-active .plyr__captions {
display: block;
}
-.plyr--fullscreen-active .plyr__captions {
- font-size: @plyr-font-size-captions-large;
-}
.plyr--hide-controls .plyr__captions {
transform: translateY(-(@plyr-control-spacing * 1.5));
}
+// Large captions in full screen on larger screens
+@media (min-width: @plyr-bp-screen-lg) {
+ .plyr--fullscreen-active .plyr__captions {
+ font-size: @plyr-font-size-captions-large;
+ }
+}
// Controls
// --------------------------------------------------------------
diff --git a/src/less/variables.less b/src/less/variables.less
index c7eab243..0d528380 100644
--- a/src/less/variables.less
+++ b/src/less/variables.less
@@ -17,7 +17,7 @@
@plyr-font-size-base: 16px;
// Captions
-@plyr-captions-bg: fade(#343f4a, 85%);
+@plyr-captions-bg: fade(#000, 85%);
@plyr-captions-color: #fff;
@plyr-font-size-captions-base: @plyr-font-size-base;
@plyr-font-size-captions-medium: ceil(@plyr-font-size-base * 1.5);
@@ -73,4 +73,5 @@
// Breakpoints
@plyr-bp-screen-sm: 480px;
-@plyr-bp-screen-md: 768px; \ No newline at end of file
+@plyr-bp-screen-md: 768px;
+@plyr-bp-screen-lg: 1024px; \ No newline at end of file
diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss
index 47917364..70518591 100644
--- a/src/scss/plyr.scss
+++ b/src/scss/plyr.scss
@@ -172,9 +172,6 @@
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
@@ -184,6 +181,9 @@
overflow: hidden;
border-radius: inherit;
+ // Require z-index to force border-radius
+ z-index: 0;
+
iframe {
position: absolute;
top: 0;
@@ -244,12 +244,15 @@
.plyr--captions-active .plyr__captions {
display: block;
}
-.plyr--fullscreen-active .plyr__captions {
- font-size: $plyr-font-size-captions-large;
-}
.plyr--hide-controls .plyr__captions {
transform: translateY(-($plyr-control-spacing * 2));
}
+// Large captions in full screen on larger screens
+@media (min-width: $plyr-bp-screen-lg) {
+ .plyr--fullscreen-active .plyr__captions {
+ font-size: $plyr-font-size-captions-large;
+ }
+}
// Controls
// --------------------------------------------------------------
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index 0bd31603..da75f11a 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -69,4 +69,5 @@ $plyr-range-selected-bg: $plyr-color-main !default;
// Breakpoints
$plyr-bp-screen-sm: 480px !default;
-$plyr-bp-screen-md: 768px !default; \ No newline at end of file
+$plyr-bp-screen-md: 768px !default;
+$plyr-bp-screen-lg: 1024px !default; \ No newline at end of file