aboutsummaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/js/captions.js1
-rw-r--r--src/js/controls.js10
-rw-r--r--src/js/defaults.js1
-rw-r--r--src/js/listeners.js12
-rw-r--r--src/js/plugins/vimeo.js7
-rw-r--r--src/js/plugins/youtube.js9
-rw-r--r--src/js/plyr.js28
-rw-r--r--src/js/ui.js29
-rw-r--r--src/js/utils.js12
-rw-r--r--src/less/components/buttons.less12
-rw-r--r--src/less/components/controls.less10
11 files changed, 75 insertions, 56 deletions
diff --git a/src/js/captions.js b/src/js/captions.js
index 2673d1d2..851bf58d 100644
--- a/src/js/captions.js
+++ b/src/js/captions.js
@@ -115,6 +115,7 @@ const captions = {
utils.off(track, 'cuechange', event => captions.setCue.call(this, event));
// Hide captions
+ // eslint-disable-next-line
track.mode = 'hidden';
});
diff --git a/src/js/controls.js b/src/js/controls.js
index 0759492b..895dfa2b 100644
--- a/src/js/controls.js
+++ b/src/js/controls.js
@@ -195,12 +195,18 @@ const controls = {
if (utils.is.string(iconToggled)) {
button.appendChild(
controls.createIcon.call(this, iconToggled, {
- class: `icon--${iconToggled}`,
+ class: 'icon--pressed',
})
);
+ button.appendChild(
+ controls.createIcon.call(this, iconDefault, {
+ class: 'icon--not-pressed',
+ })
+ );
+ } else {
+ button.appendChild(controls.createIcon.call(this, iconDefault));
}
- button.appendChild(controls.createIcon.call(this, iconDefault));
button.appendChild(controls.createLabel.call(this, labelKey));
utils.setAttributes(button, attributes);
diff --git a/src/js/defaults.js b/src/js/defaults.js
index 59ac1d0c..cf6bc344 100644
--- a/src/js/defaults.js
+++ b/src/js/defaults.js
@@ -268,7 +268,6 @@ const defaults = {
type: 'plyr--{0}',
stopped: 'plyr--stopped',
playing: 'plyr--playing',
- muted: 'plyr--muted',
loading: 'plyr--loading',
hover: 'plyr--hover',
tooltip: 'plyr__tooltip',
diff --git a/src/js/listeners.js b/src/js/listeners.js
index 31135a38..00f4c9b8 100644
--- a/src/js/listeners.js
+++ b/src/js/listeners.js
@@ -300,7 +300,7 @@ const listeners = {
// Update UI
controls.updateSetting.call(this, 'speed');
- // Save speed to localStorage
+ // Save to storage
storage.set.call(this, { speed: this.speed });
});
@@ -309,20 +309,20 @@ const listeners = {
// Update UI
controls.updateSetting.call(this, 'quality');
- // Save speed to localStorage
+ // Save to storage
storage.set.call(this, { quality: this.quality });
});
// Caption language change
utils.on(this.media, 'captionchange', () => {
- // Save speed to localStorage
+ // Save to storage
storage.set.call(this, { language: this.language });
});
// Volume change
utils.on(this.media, 'volumechange', () => {
- // Save speed to localStorage
- storage.set.call(this, { volume: this.volume });
+ // Save to storage
+ storage.set.call(this, { volume: this.volume, muted: this.muted });
});
// Captions toggle
@@ -330,7 +330,7 @@ const listeners = {
// Update UI
controls.updateSetting.call(this, 'captions');
- // Save speed to localStorage
+ // Save to storage
storage.set.call(this, { captions: this.captions.enabled });
});
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index 1ad26bf4..8ae57dd9 100644
--- a/src/js/plugins/vimeo.js
+++ b/src/js/plugins/vimeo.js
@@ -145,13 +145,16 @@ const vimeo = {
});
// Muted
+ let { muted } = player.config;
Object.defineProperty(player.media, 'muted', {
get() {
- return volume === 0;
+ return muted;
},
set(input) {
const toggle = utils.is.boolean(input) ? input : false;
- player.volume = toggle ? 0 : player.config.volume;
+ muted = toggle;
+ player.embed.setVolume(toggle ? 0 : player.config.volume);
+ utils.dispatchEvent.call(player, player.media, 'volumechange');
},
});
diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js
index 440890e7..da127bed 100644
--- a/src/js/plugins/youtube.js
+++ b/src/js/plugins/youtube.js
@@ -168,7 +168,7 @@ const youtube = {
});
// Volume
- let volume = instance.getVolume() / 100;
+ let { volume } = player.config;
Object.defineProperty(player.media, 'volume', {
get() {
return volume;
@@ -181,13 +181,14 @@ const youtube = {
});
// Muted
- player.media.muted = instance.isMuted();
+ let { muted } = player.config;
Object.defineProperty(player.media, 'muted', {
get() {
- return instance.isMuted();
+ return muted;
},
set(input) {
- const toggle = utils.is.boolean(input) ? input : false;
+ const toggle = utils.is.boolean(input) ? input : muted;
+ muted = toggle;
instance[toggle ? 'mute' : 'unMute']();
utils.dispatchEvent.call(player, player.media, 'volumechange');
},
diff --git a/src/js/plyr.js b/src/js/plyr.js
index ca56b709..8733d4a2 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -280,6 +280,10 @@ class Plyr {
return this;
}
+ get paused() {
+ return this.media.paused;
+ }
+
/**
* Toggle playback based on current status
* @param {boolean} toggle
@@ -355,6 +359,10 @@ class Plyr {
return Number(this.media.currentTime);
}
+ get seeking() {
+ return this.media.seeking;
+ }
+
/**
* Get the duration of the current media
*/
@@ -407,8 +415,10 @@ class Plyr {
// Set the player volume
this.media.volume = volume;
- // Toggle muted state
- this.muted = volume === 0;
+ // If muted, and we're increasing volume, reset muted state
+ if (this.muted && volume > 0) {
+ this.muted = false;
+ }
}
/**
@@ -434,11 +444,17 @@ class Plyr {
// Toggle mute
set muted(mute) {
- // If the method is called without parameter, toggle based on current value
- const toggle = utils.is.boolean(mute) ? mute : this.config.muted;
+ let toggle = mute;
- // Set button state
- utils.toggleState(this.elements.buttons.mute, toggle);
+ // Load muted state from storage
+ if (!utils.is.boolean(toggle)) {
+ toggle = storage.get.call(this).muted;
+ }
+
+ // Use config if all else fails
+ if (!utils.is.boolean(toggle)) {
+ toggle = this.config.muted;
+ }
// Update config
this.config.muted = toggle;
diff --git a/src/js/ui.js b/src/js/ui.js
index 6486b9fb..1c6290cf 100644
--- a/src/js/ui.js
+++ b/src/js/ui.js
@@ -110,7 +110,7 @@ const ui = {
}
// If there's only one time display, display duration there
- if (!this.elements.display.duration && this.config.displayDuration && this.media.paused) {
+ if (!this.elements.display.duration && this.config.displayDuration && this.paused) {
ui.updateTimeDisplay.call(this, this.duration, this.elements.display.currentTime);
}
@@ -164,30 +164,27 @@ const ui = {
// Check playing state
checkPlaying() {
- utils.toggleClass(this.elements.container, this.config.classNames.playing, !this.media.paused);
+ utils.toggleClass(this.elements.container, this.config.classNames.playing, !this.paused);
- utils.toggleClass(this.elements.container, this.config.classNames.stopped, this.media.paused);
+ utils.toggleClass(this.elements.container, this.config.classNames.stopped, this.paused);
- this.toggleControls(this.media.paused);
+ this.toggleControls(this.paused);
},
// Update volume UI and storage
updateVolume() {
- // Update the <input type="range"> if present
- if (this.supported.ui) {
- const value = this.muted ? 0 : this.volume;
-
- if (utils.is.htmlElement(this.elements.inputs.volume)) {
- ui.setRange.call(this, this.elements.inputs.volume, value);
- }
+ if (!this.supported.ui) {
+ return;
}
- // Toggle class if muted
- utils.toggleClass(this.elements.container, this.config.classNames.muted, this.muted);
+ // Update range
+ if (utils.is.htmlElement(this.elements.inputs.volume)) {
+ ui.setRange.call(this, this.elements.inputs.volume, this.muted ? 0 : this.volume);
+ }
// Update checkbox for mute state
- if (this.supported.ui && utils.is.htmlElement(this.elements.buttons.mute)) {
- utils.toggleState(this.elements.buttons.mute, this.muted);
+ if (utils.is.htmlElement(this.elements.buttons.mute)) {
+ utils.toggleState(this.elements.buttons.mute, this.muted || this.volume === 0);
}
},
@@ -214,6 +211,7 @@ const ui = {
return;
}
+ // eslint-disable-next-line
target.value = value;
// Webkit range fill
@@ -312,6 +310,7 @@ const ui = {
const display = `${(displayHours ? `${hours}:` : '') + mins}:${secs}`;
// Render
+ // eslint-disable-next-line
element.textContent = display;
// Return for looping
diff --git a/src/js/utils.js b/src/js/utils.js
index 02f97d5a..1c78766f 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -536,19 +536,17 @@ const utils = {
// Toggle aria-pressed state on a toggle button
// http://www.ssbbartgroup.com/blog/how-not-to-misuse-aria-states-properties-and-roles
- toggleState(target, state) {
+ toggleState(element, input) {
// Bail if no target
- if (!target) {
- return null;
+ if (!utils.is.htmlElement(element)) {
+ return;
}
// Get state
- const newState = utils.is.boolean(state) ? state : !target.getAttribute('aria-pressed');
+ const state = utils.is.boolean(input) ? input : !element.getAttribute('aria-pressed');
// Set the attribute on target
- target.setAttribute('aria-pressed', newState);
-
- return newState;
+ element.setAttribute('aria-pressed', state);
},
// Get percentage
diff --git a/src/less/components/buttons.less b/src/less/components/buttons.less
index 61cb3b01..542580a2 100644
--- a/src/less/components/buttons.less
+++ b/src/less/components/buttons.less
@@ -21,9 +21,7 @@
}
// Hide toggle icons by default
- .icon--exit-fullscreen,
- .icon--muted,
- .icon--captions-on {
+ .icon--pressed {
display: none;
}
@@ -33,6 +31,14 @@
}
}
+// Change icons on state change
+.plyr__control[aria-pressed='true'] .icon--pressed {
+ display: block;
+}
+.plyr__control[aria-pressed='true'] .icon--not-pressed {
+ display: none;
+}
+
// Audio styles
.plyr--audio .plyr__control {
&.plyr__tab-focus,
diff --git a/src/less/components/controls.less b/src/less/components/controls.less
index 62bb4ee8..fd89c74e 100644
--- a/src/less/components/controls.less
+++ b/src/less/components/controls.less
@@ -102,16 +102,6 @@
display: inline-block;
}
-// Change icons on state change
-.plyr--muted .plyr__control .icon--muted,
-.plyr--captions-active .plyr__control .icon--captions-on {
- display: block;
-
- & + svg {
- display: none;
- }
-}
-
// Some options are hidden by default
.plyr [data-plyr='captions'],
.plyr [data-plyr='pip'],
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-08 18:14:00 +0000