aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/listeners.js34
-rw-r--r--src/js/plyr.js30
-rw-r--r--src/js/ui.js4
-rw-r--r--src/js/utils.js3
-rw-r--r--src/less/components/buttons.less8
-rw-r--r--src/less/components/captions.less2
-rw-r--r--src/less/components/volume.less6
7 files changed, 46 insertions, 41 deletions
diff --git a/src/js/listeners.js b/src/js/listeners.js
index 46bce967..d5ab5f56 100644
--- a/src/js/listeners.js
+++ b/src/js/listeners.js
@@ -24,7 +24,12 @@ const listeners = {
const handleKey = event => {
const code = getKeyCode(event);
const pressed = event.type === 'keydown';
- const held = pressed && code === last;
+ const repeat = pressed && code === last;
+
+ // Bail if a modifier key is set
+ if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+ return;
+ }
// If the event is bubbled from the media element
// Firefox doesn't get the keycode for whatever reason
@@ -92,7 +97,7 @@ const listeners = {
case 56:
case 57:
// 0-9
- if (!held) {
+ if (!repeat) {
seekByKey();
}
break;
@@ -100,7 +105,7 @@ const listeners = {
case 32:
case 75:
// Space and K key
- if (!held) {
+ if (!repeat) {
this.togglePlay();
}
break;
@@ -117,7 +122,7 @@ const listeners = {
case 77:
// M key
- if (!held) {
+ if (!repeat) {
this.muted = !this.muted;
}
break;
@@ -139,7 +144,7 @@ const listeners = {
case 67:
// C key
- if (!held) {
+ if (!repeat) {
this.toggleCaptions();
}
break;
@@ -209,7 +214,7 @@ const listeners = {
// Toggle controls on mouse events and entering fullscreen
utils.on(
this.elements.container,
- 'click mouseenter mouseleave mousemove touchmove enterfullscreen exitfullscreen',
+ 'mouseenter mouseleave mousemove touchstart touchend touchmove enterfullscreen exitfullscreen',
event => {
this.toggleControls(event);
}
@@ -269,13 +274,10 @@ const listeners = {
const wrapper = utils.getElement.call(this, `.${this.config.classNames.video}`);
// Bail if there's no wrapper (this should never happen)
- if (!wrapper) {
+ if (!utils.is.htmlElement(wrapper)) {
return;
}
- // Set cursor
- wrapper.style.cursor = 'pointer';
-
// On click play, pause ore restart
utils.on(wrapper, 'click', () => {
// Touch devices will just show controls (if we're hiding controls)
@@ -527,15 +529,9 @@ const listeners = {
});
// Focus in/out on controls
- // TODO: Check we need capture here
- utils.on(
- this.elements.controls,
- 'focusin focusout',
- event => {
- this.toggleControls(event);
- },
- true
- );
+ utils.on(this.elements.controls, 'focusin focusout', event => {
+ this.toggleControls(event);
+ });
}
// Mouse wheel for volume
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 4ec1c207..d41b81aa 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -290,7 +290,7 @@ class Plyr {
* Get playing state
*/
get playing() {
- return !this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2: true);
+ return !this.paused && !this.ended && (this.isHTML5 ? this.media.readyState > 2 : true);
}
/**
@@ -912,8 +912,8 @@ class Plyr {
return this;
}
- // Don't hide if config says not to, it's audio, or not ready or loading
- if (!this.supported.ui || !this.config.hideControls || this.type === 'audio') {
+ // Don't hide if no UI support or it's audio
+ if (!this.supported.ui || this.type === 'audio') {
return this;
}
@@ -928,10 +928,10 @@ class Plyr {
isEnterFullscreen = toggle.type === 'enterfullscreen';
// Whether to show controls
- show = ['click', 'mousemove', 'touchmove', 'mouseenter', 'focusin'].includes(toggle.type);
+ show = ['mouseenter', 'mousemove', 'touchstart', 'touchmove', 'focusin'].includes(toggle.type);
// Delay hiding on move events
- if (['mousemove', 'touchmove'].includes(toggle.type)) {
+ if (['mousemove', 'touchmove', 'touchend'].includes(toggle.type)) {
delay = 2000;
}
@@ -945,11 +945,11 @@ class Plyr {
}
}
- // Clear timer every movement
- window.clearTimeout(this.timers.hover);
+ // Clear timer on every call
+ window.clearTimeout(this.timers.controls);
// If the mouse is not over the controls, set a timeout to hide them
- if (show || this.media.paused || this.loading) {
+ if (show || this.paused || this.loading) {
// Check if controls toggled
const toggled = utils.toggleClass(this.elements.container, this.config.classNames.hideControls, false);
@@ -959,7 +959,7 @@ class Plyr {
}
// Always show controls when paused or if touch
- if (this.media.paused || this.loading) {
+ if (this.paused || this.loading) {
return this;
}
@@ -971,8 +971,16 @@ class Plyr {
// If toggle is false or if we're playing (regardless of toggle),
// then set the timer to hide the controls
- if (!show || !this.media.paused) {
- this.timers.hover = window.setTimeout(() => {
+ if (!show || this.playing) {
+ this.timers.controls = window.setTimeout(() => {
+ console.warn({
+ pressed: this.elements.controls.pressed,
+ hover: this.elements.controls.pressed,
+ playing: this.playing,
+ paused: this.paused,
+ loading: this.loading,
+ });
+
// If the mouse is over the controls (and not entering fullscreen), bail
if ((this.elements.controls.pressed || this.elements.controls.hover) && !isEnterFullscreen) {
return;
diff --git a/src/js/ui.js b/src/js/ui.js
index 3807d9f3..3ae974c3 100644
--- a/src/js/ui.js
+++ b/src/js/ui.js
@@ -143,7 +143,7 @@ const ui = {
utils.toggleClass(this.elements.container, this.config.classNames.stopped, this.paused);
// Set aria state
- if (utils.is.array(this.elements.buttons.play)) {
+ if (utils.is.nodeList(this.elements.buttons.play)) {
Array.from(this.elements.buttons.play).forEach(button => utils.toggleState(button, this.playing));
}
@@ -179,7 +179,7 @@ const ui = {
ui.setRange.call(this, this.elements.inputs.volume, this.muted ? 0 : this.volume);
}
- // Update checkbox for mute state
+ // Update mute state
if (utils.is.htmlElement(this.elements.buttons.mute)) {
utils.toggleState(this.elements.buttons.mute, this.muted || this.volume === 0);
}
diff --git a/src/js/utils.js b/src/js/utils.js
index eb0a9650..299f8c92 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -559,7 +559,8 @@ const utils = {
}
// Get state
- const state = utils.is.boolean(input) ? input : !element.getAttribute('aria-pressed');
+ const pressed = element.getAttribute('aria-pressed') === 'true';
+ const state = utils.is.boolean(input) ? input : !pressed;
// Set the attribute on target
element.setAttribute('aria-pressed', state);
diff --git a/src/less/components/buttons.less b/src/less/components/buttons.less
index d0fd0ae5..8c775d73 100644
--- a/src/less/components/buttons.less
+++ b/src/less/components/buttons.less
@@ -33,9 +33,9 @@
// Change icons on state change
.plyr__control[aria-pressed='false'] .icon--pressed,
- .plyr__control[aria-pressed='true'] .icon--not-pressed,
- .plyr__control[aria-pressed='false'] .label--pressed,
- .plyr__control[aria-pressed='true'] .label--not-pressed {
+.plyr__control[aria-pressed='true'] .icon--not-pressed,
+.plyr__control[aria-pressed='false'] .label--pressed,
+.plyr__control[aria-pressed='true'] .label--not-pressed {
display: none;
}
@@ -53,7 +53,7 @@
.plyr__control--overlaid {
display: none;
position: absolute;
- z-index: 3;
+ z-index: 2;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
diff --git a/src/less/components/captions.less b/src/less/components/captions.less
index 14c1d2e7..56e05ddf 100644
--- a/src/less/components/captions.less
+++ b/src/less/components/captions.less
@@ -26,7 +26,7 @@
background: @plyr-captions-bg;
box-decoration-break: clone;
line-height: 185%;
- white-space: pre;
+ white-space: pre-wrap;
// Firefox adds a <div> when using getCueAsHTML()
div {
diff --git a/src/less/components/volume.less b/src/less/components/volume.less
index f62a572f..1c9054b7 100644
--- a/src/less/components/volume.less
+++ b/src/less/components/volume.less
@@ -13,11 +13,11 @@
@media (min-width: @plyr-bp-screen-sm) {
display: block;
- max-width: 60px;
+ max-width: 50px;
}
@media (min-width: @plyr-bp-screen-md) {
- max-width: 100px;
+ max-width: 80px;
}
}
@@ -25,6 +25,6 @@
// 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 [data-plyr='mute'] {
display: none !important;
}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-10 23:01:20 +0000