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

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

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