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

UI bugs

Browse Source
This commit is contained in:
Sam Potts 2017-11-09 19:40:45 +11:00
parent 86a5724bdb
commit f878581c8f
14 changed files with 78 additions and 59 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

1
src/js/captions.js
View File

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

10
src/js/controls.js vendored
View File

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

1
src/js/defaults.js
View File

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

12
src/js/listeners.js
View File

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

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

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

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

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

28
src/js/plyr.js
View File

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

29
src/js/ui.js
View File

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

12
src/js/utils.js
View File

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

12
src/less/components/buttons.less
View File

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

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

@ -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'],