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

Fix for className being wiped out

Browse Source
This commit is contained in:
Sam Potts
2019-04-25 12:01:52 +10:00
parent ad68d9484f
commit f0d3e8c3b9
1 changed files with 312 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
src/js/controls.js vendored
View File

@ -172,7 +172,7 @@ const controls = {
// Create a <button> // Create a <button>
createButton(buttonType, attr) { createButton(buttonType, attr) {
const attributes = Object.assign({}, attr); const attributes = extend({}, attr);
let type = toCamelCase(buttonType); let type = toCamelCase(buttonType);
const props = { const props = {
@ -198,8 +198,10 @@ const controls = {
// Set class name // Set class name
if (Object.keys(attributes).includes('class')) { if (Object.keys(attributes).includes('class')) {
if (!attributes.class.includes(this.config.classNames.control)) { if (!attributes.class.split(' ').some(c => c === this.config.classNames.control)) {
attributes.class += ` ${this.config.classNames.control}`; extend(attributes, {
class: `${attributes.class} ${this.config.classNames.control}`,
});
} }
} else { } else {
attributes.class = this.config.classNames.control; attributes.class = this.config.classNames.control;
@ -377,13 +379,13 @@ const controls = {
}, },
// Create time display // Create time display
createTime(type) { createTime(type, attrs) {
const attributes = getAttributesFromSelector(this.config.selectors.display[type]); const attributes = getAttributesFromSelector(this.config.selectors.display[type], attrs);
const container = createElement( const container = createElement(
'div', 'div',
extend(attributes, { extend(attributes, {
class: `${this.config.classNames.display.time} ${attributes.class ? attributes.class : ''}`.trim(), class: `${attributes.class ? attributes.class : ''} ${this.config.classNames.display.time} `.trim(),
'aria-label': i18n.get(type, this.config), 'aria-label': i18n.get(type, this.config),
}), }),
'00:00', '00:00',
@ -1258,44 +1260,70 @@ const controls = {
}, },
// Build the default HTML // Build the default HTML
// TODO: Set order based on order in the config.controls array?
create(data) { create(data) {
const {
bindMenuItemShortcuts,
createButton,
createProgress,
createRange,
createTime,
setQualityMenu,
setSpeedMenu,
showMenuPanel,
} = controls;
this.elements.controls = null;
// Larger overlaid play button
if (this.config.controls.includes('play-large')) {
this.elements.container.appendChild(createButton.call(this, 'play-large'));
}
// Create the container // Create the container
const container = createElement('div', getAttributesFromSelector(this.config.selectors.controls.wrapper)); const container = createElement('div', getAttributesFromSelector(this.config.selectors.controls.wrapper));
this.elements.controls = container;
// Default item attributes
const defaultAttributes = { class: 'plyr__controls__item' };
// Loop through controls in order
dedupe(this.config.controls).forEach(control => {
// Restart button // Restart button
if (this.config.controls.includes('restart')) { if (control === 'restart') {
container.appendChild(controls.createButton.call(this, 'restart')); container.appendChild(createButton.call(this, 'restart', defaultAttributes));
} }
// Rewind button // Rewind button
if (this.config.controls.includes('rewind')) { if (control === 'rewind') {
container.appendChild(controls.createButton.call(this, 'rewind')); container.appendChild(createButton.call(this, 'rewind', defaultAttributes));
} }
// Play/Pause button // Play/Pause button
if (this.config.controls.includes('play')) { if (control === 'play') {
container.appendChild(controls.createButton.call(this, 'play')); container.appendChild(createButton.call(this, 'play', defaultAttributes));
} }
// Fast forward button // Fast forward button
if (this.config.controls.includes('fast-forward')) { if (control === 'fast-forward') {
container.appendChild(controls.createButton.call(this, 'fast-forward')); container.appendChild(createButton.call(this, 'fast-forward', defaultAttributes));
} }
// Progress // Progress
if (this.config.controls.includes('progress')) { if (control === 'progress') {
const progressContainer = createElement('div', {
class: `${defaultAttributes.class} plyr__progress__container`,
});
const progress = createElement('div', getAttributesFromSelector(this.config.selectors.progress)); const progress = createElement('div', getAttributesFromSelector(this.config.selectors.progress));
// Seek range slider // Seek range slider
progress.appendChild( progress.appendChild(
controls.createRange.call(this, 'seek', { createRange.call(this, 'seek', {
id: `plyr-seek-${data.id}`, id: `plyr-seek-${data.id}`,
}), }),
); );
// Buffer progress // Buffer progress
progress.appendChild(controls.createProgress.call(this, 'buffer')); progress.appendChild(createProgress.call(this, 'buffer'));
// TODO: Add loop display indicator // TODO: Add loop display indicator
@ -1314,32 +1342,45 @@ const controls = {
} }
this.elements.progress = progress; this.elements.progress = progress;
container.appendChild(this.elements.progress); progressContainer.appendChild(this.elements.progress);
container.appendChild(progressContainer);
} }
// Media current time display // Media current time display
if (this.config.controls.includes('current-time')) { if (control === 'current-time') {
container.appendChild(controls.createTime.call(this, 'currentTime')); container.appendChild(createTime.call(this, 'currentTime', defaultAttributes));
} }
// Media duration display // Media duration display
if (this.config.controls.includes('duration')) { if (control === 'duration') {
container.appendChild(controls.createTime.call(this, 'duration')); container.appendChild(createTime.call(this, 'duration', defaultAttributes));
} }
// Volume controls // Volume controls
if (this.config.controls.includes('mute') || this.config.controls.includes('volume')) { if (control === 'mute' || control === 'volume') {
const volume = createElement('div', { let { volume } = this.elements;
class: 'plyr__volume',
}); // Create the volume container if needed
if (!is.element(volume) || !container.contains(volume)) {
volume = createElement(
'div',
extend({}, defaultAttributes, {
class: `${defaultAttributes.class} plyr__volume`.trim(),
}),
);
this.elements.volume = volume;
container.appendChild(volume);
}
// Toggle mute button // Toggle mute button
if (this.config.controls.includes('mute')) { if (control === 'mute') {
volume.appendChild(controls.createButton.call(this, 'mute')); volume.appendChild(createButton.call(this, 'mute'));
} }
// Volume range control // Volume range control
if (this.config.controls.includes('volume')) { if (control === 'volume') {
// Set the attributes // Set the attributes
const attributes = { const attributes = {
max: 1, max: 1,
@ -1349,7 +1390,7 @@ const controls = {
// Create the volume range slider // Create the volume range slider
volume.appendChild( volume.appendChild(
controls.createRange.call( createRange.call(
this, this,
'volume', 'volume',
extend(attributes, { extend(attributes, {
@ -1357,27 +1398,26 @@ const controls = {
}), }),
), ),
); );
this.elements.volume = volume;
} }
container.appendChild(volume);
} }
// Toggle captions button // Toggle captions button
if (this.config.controls.includes('captions')) { if (control === 'captions') {
container.appendChild(controls.createButton.call(this, 'captions')); container.appendChild(createButton.call(this, 'captions', defaultAttributes));
} }
// Settings button / menu // Settings button / menu
if (this.config.controls.includes('settings') && !is.empty(this.config.settings)) { if (control === 'settings' && !is.empty(this.config.settings)) {
const control = createElement('div', { const control = createElement(
class: 'plyr__menu', 'div',
extend({}, defaultAttributes, {
class: `${defaultAttributes.class} plyr__menu`.trim(),
hidden: '', hidden: '',
}); }),
);
control.appendChild( control.appendChild(
controls.createButton.call(this, 'settings', { createButton.call(this, 'settings', {
'aria-haspopup': true, 'aria-haspopup': true,
'aria-controls': `plyr-settings-${data.id}`, 'aria-controls': `plyr-settings-${data.id}`,
'aria-expanded': false, 'aria-expanded': false,
@ -1420,11 +1460,11 @@ const controls = {
); );
// Bind menu shortcuts for keyboard users // Bind menu shortcuts for keyboard users
controls.bindMenuItemShortcuts.call(this, menuItem, type); bindMenuItemShortcuts.call(this, menuItem, type);
// Show menu on click // Show menu on click
on(menuItem, 'click', () => { on(menuItem, 'click', () => {
controls.showMenuPanel.call(this, type, false); showMenuPanel.call(this, type, false);
}); });
const flex = createElement('span', null, i18n.get(type, this.config)); const flex = createElement('span', null, i18n.get(type, this.config));
@ -1489,14 +1529,14 @@ const controls = {
event.stopPropagation(); event.stopPropagation();
// Show the respective menu // Show the respective menu
controls.showMenuPanel.call(this, 'home', true); showMenuPanel.call(this, 'home', true);
}, },
false, false,
); );
// Go back via button click // Go back via button click
on(backButton, 'click', () => { on(backButton, 'click', () => {
controls.showMenuPanel.call(this, 'home', false); showMenuPanel.call(this, 'home', false);
}); });
// Add to pane // Add to pane
@ -1524,22 +1564,22 @@ const controls = {
} }
// Picture in picture button // Picture in picture button
if (this.config.controls.includes('pip') && support.pip) { if (control === 'pip' && support.pip) {
container.appendChild(controls.createButton.call(this, 'pip')); container.appendChild(createButton.call(this, 'pip', defaultAttributes));
} }
// Airplay button // Airplay button
if (this.config.controls.includes('airplay') && support.airplay) { if (control === 'airplay' && support.airplay) {
container.appendChild(controls.createButton.call(this, 'airplay')); container.appendChild(createButton.call(this, 'airplay', defaultAttributes));
} }
// Download button // Download button
if (this.config.controls.includes('download')) { if (control === 'download') {
const attributes = { const attributes = extend({}, defaultAttributes, {
element: 'a', element: 'a',
href: this.download, href: this.download,
target: '_blank', target: '_blank',
}; });
const { download } = this.config.urls; const { download } = this.config.urls;
@ -1550,27 +1590,21 @@ const controls = {
}); });
} }
container.appendChild(controls.createButton.call(this, 'download', attributes)); container.appendChild(createButton.call(this, 'download', attributes));
} }
// Toggle fullscreen button // Toggle fullscreen button
if (this.config.controls.includes('fullscreen')) { if (control === 'fullscreen') {
container.appendChild(controls.createButton.call(this, 'fullscreen')); container.appendChild(createButton.call(this, 'fullscreen', defaultAttributes));
} }
});
// Larger overlaid play button
if (this.config.controls.includes('play-large')) {
this.elements.container.appendChild(controls.createButton.call(this, 'play-large'));
}
this.elements.controls = container;
// Set available quality levels // Set available quality levels
if (this.isHTML5) { if (this.isHTML5) {
controls.setQualityMenu.call(this, html5.getQualityOptions.call(this)); setQualityMenu.call(this, html5.getQualityOptions.call(this));
} }
controls.setSpeedMenu.call(this); setSpeedMenu.call(this);
return container; return container;
}, },