diff --git a/src/js/controls.js b/src/js/controls.js index a0bbc991..15c82716 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -139,7 +139,7 @@ const controls = { // Create hidden text label createLabel(key, attr = {}) { const text = i18n.get(key, this.config); - const attributes = { ...attr, class: [attr.class, this.config.classNames.hidden].filter(Boolean).join(' '),}; + const attributes = { ...attr, class: [attr.class, this.config.classNames.hidden].filter(Boolean).join(' ') }; return createElement('span', attributes, text); }, @@ -1378,7 +1378,9 @@ const controls = { } // Volume range control - if (control === 'volume') { + // Ignored on iOS as it's handled globally + // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html + if (control === 'volume' && !browser.isIos) { // Set the attributes const attributes = { max: 1, diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss index 8abee204..cc07ef7f 100644 --- a/src/sass/components/controls.scss +++ b/src/sass/components/controls.scss @@ -41,14 +41,6 @@ &.plyr__time + .plyr__time { padding-left: 0; } - - &.plyr__volume { - padding-right: ($plyr-control-spacing / 2); - } - - &.plyr__volume:first-child { - padding-right: 0; - } } // Hide empty controls diff --git a/src/sass/components/volume.scss b/src/sass/components/volume.scss index 82a6dd36..76fb6229 100644 --- a/src/sass/components/volume.scss +++ b/src/sass/components/volume.scss @@ -5,11 +5,12 @@ .plyr__volume { align-items: center; display: flex; - flex: 1; + // flex: 1; position: relative; input[type='range'] { margin-left: ($plyr-control-spacing / 2); + margin-right: ($plyr-control-spacing / 2); position: relative; z-index: 2; } @@ -22,16 +23,3 @@ max-width: 110px; } } - -// Hide sound controls on iOS -// It's not supported to change volume using JavaScript: -// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html -.plyr--is-ios .plyr__volume { - display: none !important; -} - -// Vimeo has no toggle mute method so hide mute button -// https://github.com/vimeo/player.js/issues/236#issuecomment-384663183 -.plyr--is-ios.plyr--vimeo [data-plyr='mute'] { - display: none !important; -}