aboutsummaryrefslogtreecommitdiffstats
path: root/src/js
diff options
context:
space:
mode:
Diffstat (limited to 'src/js')
-rw-r--r--src/js/listeners.js6
-rw-r--r--src/js/plugins/vimeo.js19
-rw-r--r--src/js/plugins/youtube.js24
-rw-r--r--src/js/plyr.js63
-rw-r--r--src/js/ui.js12
5 files changed, 59 insertions, 65 deletions
diff --git a/src/js/listeners.js b/src/js/listeners.js
index 3d2aba66..44817b46 100644
--- a/src/js/listeners.js
+++ b/src/js/listeners.js
@@ -253,7 +253,7 @@ const listeners = {
case 77:
// M key
if (!held) {
- this.toggleMute();
+ this.muted = 'toggle';
}
break;
@@ -402,7 +402,7 @@ const listeners = {
// Mute
utils.on(this.elements.buttons.mute, 'click', event =>
proxy(event, 'mute', () => {
- this.toggleMute();
+ this.muted = 'toggle';
})
);
@@ -423,7 +423,7 @@ const listeners = {
// Picture-in-Picture
utils.on(this.elements.buttons.pip, 'click', event =>
proxy(event, 'pip', () => {
- this.togglePictureInPicture();
+ this.pip = 'toggle';
})
);
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index 81f96c9b..0b815fa5 100644
--- a/src/js/plugins/vimeo.js
+++ b/src/js/plugins/vimeo.js
@@ -126,22 +126,28 @@ const vimeo = {
},
});
+ // Muted
+ Object.defineProperty(player.media, 'muted', {
+ get() {
+ return volume === 0;
+ },
+ set(input) {
+ const toggle = utils.is.boolean(input) ? input : false;
+ player.volume = toggle ? 0 : player.config.volume;
+ },
+ });
+
// Source
let currentSrc;
-
player.embed.getVideoUrl().then(value => {
currentSrc = value;
});
-
Object.defineProperty(player.media, 'currentSrc', {
get() {
return currentSrc;
},
});
- // Rebuild UI
- window.setTimeout(() => ui.build.call(player), 0);
-
// Get title
player.embed.getVideoTitle().then(title => {
player.config.title = title;
@@ -222,6 +228,9 @@ const vimeo = {
this.media.paused = true;
utils.dispatchEvent.call(this, this.media, 'ended');
});
+
+ // Rebuild UI
+ window.setTimeout(() => ui.build.call(player), 0);
},
};
diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js
index 12e9d3e6..38f649a5 100644
--- a/src/js/plugins/youtube.js
+++ b/src/js/plugins/youtube.js
@@ -145,12 +145,26 @@ const youtube = {
});
// Volume
+ let volume = instance.getVolume() / 100;
Object.defineProperty(player.media, 'volume', {
get() {
- return instance.getVolume() / 100;
+ return volume;
},
set(input) {
- instance.setVolume(input * 100);
+ volume = input;
+ instance.setVolume(volume * 100);
+ utils.dispatchEvent.call(player, player.media, 'volumechange');
+ },
+ });
+
+ // Muted
+ Object.defineProperty(player.media, 'muted', {
+ get() {
+ return instance.isMuted();
+ },
+ set(input) {
+ const toggle = utils.is.boolean(input) ? input : false;
+ instance[toggle ? 'mute' : 'unMute']();
utils.dispatchEvent.call(player, player.media, 'volumechange');
},
});
@@ -175,9 +189,6 @@ const youtube = {
player.media.setAttribute('tabindex', -1);
}
- // Rebuild UI
- window.setTimeout(() => ui.build.call(player), 0);
-
utils.dispatchEvent.call(player, player.media, 'timeupdate');
utils.dispatchEvent.call(player, player.media, 'durationchange');
@@ -205,6 +216,9 @@ const youtube = {
utils.dispatchEvent.call(player, player.media, 'canplaythrough');
}
}, 200);
+
+ // Rebuild UI
+ window.setTimeout(() => ui.build.call(player), 50);
},
onStateChange(event) {
// Get the instance
diff --git a/src/js/plyr.js b/src/js/plyr.js
index ce0ccdc8..d9450f95 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -347,7 +347,6 @@ class Plyr {
let volume = value;
const max = 1;
const min = 0;
- const isSet = !utils.is.undefined(volume);
if (utils.is.string(volume)) {
volume = Number(volume);
@@ -377,12 +376,8 @@ class Plyr {
// Toggle muted state
if (volume === 0) {
- this.toggleMute(true);
- } else if (this.media.muted && isSet) {
- this.toggleMute();
+ this.muted = true;
}
-
- return this;
}
get volume() {
@@ -404,7 +399,7 @@ class Plyr {
}
// Toggle mute
- toggleMute(mute) {
+ set muted(mute) {
// If the method is called without parameter, toggle based on current value
const toggle = utils.is.boolean(mute) ? mute : !this.media.muted;
@@ -413,32 +408,10 @@ class Plyr {
// Set mute on the player
this.media.muted = toggle;
+ }
- // If volume is 0 after unmuting, restore default volume
- if (!this.media.muted && this.media.volume === 0) {
- this.setVolume(this.config.volume);
- }
-
- // Embeds
- if (this.isEmbed) {
- switch (this.type) {
- case 'youtube':
- this.embed[this.media.muted ? 'mute' : 'unMute']();
- break;
-
- case 'vimeo':
- this.embed.setVolume(this.media.muted ? 0 : this.config.volume);
- break;
-
- default:
- break;
- }
-
- // Trigger volumechange for embeds
- utils.dispatchEvent.call(this, this.media, 'volumechange');
- }
-
- return this;
+ get muted() {
+ return this.media.muted;
}
// Playback speed
@@ -625,11 +598,9 @@ class Plyr {
// Caption language
set language(input) {
- const player = this;
-
// Nothing specified
if (!utils.is.string(input)) {
- return player;
+ return;
}
// Normalize
@@ -637,7 +608,7 @@ class Plyr {
// If nothing to change, bail
if (this.captions.language === language) {
- return player;
+ return;
}
// Reset UI
@@ -654,9 +625,6 @@ class Plyr {
// Re-run setup
captions.setup.call(this);
-
- // Allow chaining
- return this;
}
get language() {
@@ -725,8 +693,7 @@ class Plyr {
// Toggle picture-in-picture
// TODO: update player with state, support, enabled
// TODO: detect outside changes
- togglePictureInPicture(input) {
- const player = this;
+ set pip(input) {
const states = {
pip: 'picture-in-picture',
inline: 'inline',
@@ -734,21 +701,27 @@ class Plyr {
// Bail if no support
if (!support.pip) {
- return player;
+ return;
}
// Toggle based on current state if not passed
- const toggle = utils.is.boolean(input) ? input : this.media.webkitPresentationMode === states.inline;
+ const toggle = utils.is.boolean(input) ? input : this.pip === states.inline;
// Toggle based on current state
this.media.webkitSetPresentationMode(toggle ? states.pip : states.inline);
+ }
- return this;
+ get pip() {
+ if (!support.pip) {
+ return null;
+ }
+
+ return this.media.webkitPresentationMode;
}
// Trigger airplay
// TODO: update player with state, support, enabled
- airPlay() {
+ airplay() {
// Bail if no support
if (!support.airplay) {
return this;
diff --git a/src/js/ui.js b/src/js/ui.js
index ad0b4d56..c0448054 100644
--- a/src/js/ui.js
+++ b/src/js/ui.js
@@ -7,7 +7,6 @@ import captions from './captions';
import controls from './controls';
import fullscreen from './fullscreen';
import listeners from './listeners';
-import storage from './storage';
const ui = {
addStyleHook() {
@@ -72,7 +71,6 @@ const ui = {
// Set volume
this.volume = null;
- ui.updateVolume.call(this);
// Set playback speed
this.speed = null;
@@ -169,19 +167,19 @@ const ui = {
updateVolume() {
// Update the <input type="range"> if present
if (this.supported.ui) {
- const value = this.media.muted ? 0 : this.media.volume;
+ const value = this.muted ? 0 : this.volume;
- if (this.elements.inputs.volume) {
+ if (utils.is.htmlElement(this.elements.inputs.volume)) {
ui.setRange.call(this, this.elements.inputs.volume, value);
}
}
// Toggle class if muted
- utils.toggleClass(this.elements.container, this.config.classNames.muted, this.media.muted);
+ utils.toggleClass(this.elements.container, this.config.classNames.muted, this.muted);
// Update checkbox for mute state
- if (this.supported.ui && this.elements.buttons.mute) {
- utils.toggleState(this.elements.buttons.mute, this.media.muted);
+ if (this.supported.ui && utils.is.htmlElement(this.elements.buttons.mute)) {
+ utils.toggleState(this.elements.buttons.mute, this.muted);
}
},
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-08 20:48:26 +0000