ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

YouTube volume fix

Browse Source
This commit is contained in:
Sam Potts 2017-11-05 18:40:41 +11:00
parent 4d417d0396
commit 60084a17f8
9 changed files with 63 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js.map vendored
View File

File diff suppressed because one or more lines are too long

6
src/js/listeners.js
View File

@ -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';
})
);

19
src/js/plugins/vimeo.js
View File

@ -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);
},
};

24
src/js/plugins/youtube.js
View File

@ -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

63
src/js/plyr.js
View File

@ -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;

12
src/js/ui.js
View File

@ -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);
}
},

2
src/less/components/controls.less
View File

@ -53,7 +53,7 @@
right: 0;
bottom: 0;
z-index: 2;
padding: (@plyr-control-spacing * 3.5) (@plyr-control-spacing + 2) @plyr-control-spacing;
padding: (@plyr-control-spacing * 3.5) @plyr-control-spacing @plyr-control-spacing;
background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%));
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;