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

12
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.
@ -23,7 +23,7 @@ We wanted a lightweight, accessible and customizable media player that supports
- **HTML Video & Audio** - support for both formats
- **[Embedded Video](#embeds)** - support for YouTube and Vimeo video playback
- **[Streaming](#streaming)** - support for hls.js, Shaka and dash.js streaming playback
- **[API](#api)** - toggle playback, volume, seeking, and more through a standardized API
- **[API](#api)** - toggle playback, volume, seeking, and more through a standardized API
- **[Events](#events)** - no messing around with Vimeo and YouTube APIs, all events are standardized across formats
- **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes
- **[Shortcuts](#shortcuts)** - supports keyboard shortcuts
@ -192,7 +192,7 @@ You can specify a range of arguments for the constructor to use:
- A CSS string selector that's compatible with [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
- A [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement)
- A [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) or Array of [HTMLElement](https://developer.mozilla.org/en/docs/Web/API/HTMLElement) - the first element will be used
- A [jQuery](https://jquery.com) object - if multiple are passed, the first element will be used
- A [jQuery](https://jquery.com) object - if multiple are passed, the first element will be used
Here's some examples
@ -231,7 +231,7 @@ Options can be passed as an object to the constructor as above or as JSON in `da
<video data-plyr='{ "title": "This is an example" }'></video>
```
Note the single quotes encapsulating the JSON and double quotes on the object keys. Only string values need double quotes.
Note the single quotes encapsulating the JSON and double quotes on the object keys. Only string values need double quotes.
<table class="table" width="100%">
<thead>

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