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

Volume fixes and other tidy up work

Browse Source
This commit is contained in:
Sam Potts 2017-11-08 23:46:20 +11:00
parent c948e95ade
commit bb66be98da
9 changed files with 76 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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
readme.md
View File

@ -1,6 +1,6 @@
<aside class="notice">
This branch is currently in beta and not production-ready.
</aside>
---
Beware: This branch is currently in beta and not production-ready
---
# Plyr
A simple, accessible and customizable HTML5, YouTube and Vimeo media player.

2
src/js/defaults.js
View File

@ -63,7 +63,7 @@ const defaults = {
// Speed default and options to display
speed: {
default: 1,
selected: 1,
options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
},

2
src/js/listeners.js
View File

@ -404,7 +404,7 @@ const listeners = {
// Mute
utils.on(this.elements.buttons.mute, 'click', event =>
proxy(event, 'mute', () => {
this.muted = 'toggle';
this.muted = !this.muted;
})
);

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

@ -119,20 +119,20 @@ const vimeo = {
});
// Playback speed
let { playbackRate } = player.media;
let speed = player.config.speed.selected;
Object.defineProperty(player.media, 'playbackRate', {
get() {
return playbackRate;
return speed;
},
set(input) {
playbackRate = input;
speed = input;
player.embed.setPlaybackRate(input);
utils.dispatchEvent.call(player, player.media, 'ratechange');
},
});
// Volume
let { volume } = player.media;
let { volume } = player.config;
Object.defineProperty(player.media, 'volume', {
get() {
return volume;
@ -156,7 +156,7 @@ const vimeo = {
});
// Loop
let { loop } = player.media;
let { loop } = player.config;
Object.defineProperty(player.media, 'loop', {
get() {
return loop;

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

@ -123,10 +123,9 @@ const youtube = {
};
player.media.duration = instance.getDuration();
player.media.paused = true;
player.media.muted = instance.isMuted();
player.media.currentTime = 0;
// Seeking
player.media.currentTime = 0;
Object.defineProperty(player.media, 'currentTime', {
get() {
return Number(instance.getCurrentTime());
@ -153,6 +152,21 @@ const youtube = {
},
});
// Quality
Object.defineProperty(player.media, 'quality', {
get() {
return instance.getPlaybackQuality();
},
set(input) {
// Trigger request event
utils.dispatchEvent.call(player, player.media, 'qualityrequested', false, {
quality: input,
});
instance.setPlaybackQuality(input);
},
});
// Volume
let volume = instance.getVolume() / 100;
Object.defineProperty(player.media, 'volume', {
@ -167,6 +181,7 @@ const youtube = {
});
// Muted
player.media.muted = instance.isMuted();
Object.defineProperty(player.media, 'muted', {
get() {
return instance.isMuted();

71
src/js/plyr.js
View File

@ -401,13 +401,14 @@ class Plyr {
volume = min;
}
// Update config
this.config.volume = volume;
// Set the player volume
this.media.volume = volume;
// Toggle muted state
if (volume === 0) {
this.muted = true;
}
this.muted = volume === 0;
}
/**
@ -434,11 +435,14 @@ 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.media.muted;
const toggle = utils.is.boolean(mute) ? mute : this.config.muted;
// Set button state
utils.toggleState(this.elements.buttons.mute, toggle);
// Update config
this.config.muted = toggle;
// Set mute on the player
this.media.muted = toggle;
}
@ -449,10 +453,15 @@ class Plyr {
// Playback speed
set speed(input) {
// Load speed from storage or default value
let speed = utils.is.number(input)
? input
: parseFloat(storage.get.call(this).speed || this.speed.selected || this.config.speed.default);
let speed = null;
if (utils.is.number(input)) {
speed = input;
} else if (utils.is.number(storage.get.call(this).speed)) {
({ speed } = storage.get.call(this));
} else {
speed = this.config.speed.selected;
}
// Set min/max
if (speed < 0.1) {
@ -467,6 +476,9 @@ class Plyr {
return;
}
// Update config
this.config.speed.selected = speed;
// Set media speed
this.media.playbackRate = speed;
}
@ -477,43 +489,30 @@ class Plyr {
// Set playback quality
set quality(input) {
// Load speed from storage or default value
const quality = utils.is.string(input)
? input
: parseFloat(storage.get.call(this).quality || this.config.quality.selected);
let quality = null;
if (!this.config.quality.options.includes(quality)) {
if (utils.is.string(input)) {
quality = input;
} else if (utils.is.number(storage.get.call(this).speed)) {
({ quality } = storage.get.call(this));
} else {
quality = this.config.quality.selected;
}
if (!this.options.quality.includes(quality)) {
this.warn(`Unsupported quality option (${quality})`);
return;
}
// Set media speed
switch (this.type) {
case 'youtube':
this.utils.dispatchEvent.call(this, this.media, 'qualityrequested', false, {
quality,
});
// Update config
this.config.quality.selected = quality;
this.embed.setPlaybackQuality(quality);
break;
default:
this.warn('Quality options are only available for YouTube');
break;
}
// Set quality
this.media.quality = quality;
}
get quality() {
// Set media speed
switch (this.type) {
case 'youtube':
return this.embed.getPlaybackQuality();
default:
this.warn('Quality options are only available for YouTube');
return null;
}
return this.media.quality;
}
// Toggle loop

13
src/js/ui.js
View File

@ -69,16 +69,21 @@ const ui = {
// Captions
captions.setup.call(this);
// Set volume
// Reset volume
this.volume = null;
// this.muted = null;
// Set playback speed
// Reset mute state
this.muted = null;
// Reset speed
this.speed = null;
// Set loop
// Reset loop state
this.loop = null;
// Reset quality options
this.options.quality = [];
// Reset time display
ui.timeUpdate.call(this);