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

Moved mute button inside plyr__volume

Browse Source
This commit is contained in:
Sam Potts 2018-08-13 23:42:12 +10:00
parent f6bc42c2bc
commit 468b20d227
2 changed files with 35 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/js/controls.js vendored
View File

@ -1142,9 +1142,8 @@ const controls = {
// Focus the first item if key interaction // Focus the first item if key interaction
if (show && is.keyboardEvent(input)) { if (show && is.keyboardEvent(input)) {
controls.focusFirstMenuItem.call(this, null, true); controls.focusFirstMenuItem.call(this, null, true);
} } else if (!show && !hidden) {
// If closing, re-focus the button // If closing, re-focus the button
else if (!show && !hidden) {
setFocus.call(this, button, is.keyboardEvent(input)); setFocus.call(this, button, is.keyboardEvent(input));
} }
}, },
@ -1297,17 +1296,19 @@ const controls = {
container.appendChild(controls.createTime.call(this, 'duration')); container.appendChild(controls.createTime.call(this, 'duration'));
} }
// Toggle mute button // Volume controls
if (this.config.controls.includes('mute')) { if (this.config.controls.includes('mute') || this.config.controls.includes('volume')) {
container.appendChild(controls.createButton.call(this, 'mute'));
}
// Volume range control
if (this.config.controls.includes('volume')) {
const volume = createElement('div', { const volume = createElement('div', {
class: 'plyr__volume', class: 'plyr__volume',
}); });
// Toggle mute button
if (this.config.controls.includes('mute')) {
volume.appendChild(controls.createButton.call(this, 'mute'));
}
// Volume range control
if (this.config.controls.includes('volume')) {
// Set the attributes // Set the attributes
const attributes = { const attributes = {
max: 1, max: 1,
@ -1327,6 +1328,7 @@ const controls = {
); );
this.elements.volume = volume; this.elements.volume = volume;
}
container.appendChild(volume); container.appendChild(volume);
} }
@ -1512,6 +1514,7 @@ const controls = {
this.elements.controls = container; this.elements.controls = container;
// Set available quality levels
if (this.isHTML5) { if (this.isHTML5) {
controls.setQualityMenu.call(this, html5.getQualityOptions.call(this)); controls.setQualityMenu.call(this, html5.getQualityOptions.call(this));
} }

7
src/sass/components/volume.scss
View File

@ -3,20 +3,23 @@
// -------------------------------------------------------------- // --------------------------------------------------------------
.plyr__volume { .plyr__volume {
align-items: center;
display: flex;
flex: 1; flex: 1;
position: relative; position: relative;
input[type='range'] { input[type='range'] {
margin-left: ($plyr-control-spacing / 2);
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
@media (min-width: $plyr-bp-sm) { @media (min-width: $plyr-bp-sm) {
max-width: 50px; max-width: 90px;
} }
@media (min-width: $plyr-bp-md) { @media (min-width: $plyr-bp-md) {
max-width: 80px; max-width: 110px;
} }
} }