diff --git a/src/js/player.js b/src/js/player.js index e872644b9d..8f2b6f37da 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -518,25 +518,7 @@ class Player extends Component { this.playbackRates(options.playbackRates); - if (options.experimentalSvgIcons) { - // Add SVG Sprite to the DOM - const parser = new window.DOMParser(); - const parsedSVG = parser.parseFromString(icons, 'image/svg+xml'); - const errorNode = parsedSVG.querySelector('parsererror'); - - if (errorNode) { - log.warn('Failed to load SVG Icons. Falling back to Font Icons.'); - this.options_.experimentalSvgIcons = null; - } else { - const sprite = parsedSVG.documentElement; - - sprite.style.display = 'none'; - this.el_.appendChild(sprite); - - this.addClass('vjs-svg-icons-enabled'); - } - } - + this.initSvgIcons_(options.experimentalSvgIcons); this.initChildren(); // Set isAudio based on whether or not an audio tag was used @@ -5093,6 +5075,39 @@ class Player extends Component { return baseOptions; } + /** + * Initialize SVG icons. + * + * @param {boolean|string} svgIconsOption + * Takes a Boolean or a string as parameter, if true will activate + * the default icons, if the string represents an svg it will replace + * the default icons. + */ + initSvgIcons_(svgIconsOption) { + if (!svgIconsOption) { + return; + } + + const hasCustomSvgIcons = typeof svgIconsOption === 'string'; + const svgIcons = hasCustomSvgIcons ? svgIconsOption : icons; + // Add SVG Sprite to the DOM + const parser = new window.DOMParser(); + const parsedSVG = parser.parseFromString(svgIcons, 'image/svg+xml'); + const errorNode = parsedSVG.querySelector('parsererror'); + + if (errorNode) { + log.warn('Failed to load SVG Icons. Falling back to Font Icons.'); + this.options_.experimentalSvgIcons = null; + } else { + const sprite = parsedSVG.documentElement; + + sprite.style.display = 'none'; + this.el_.appendChild(sprite); + + this.addClass('vjs-svg-icons-enabled'); + } + } + /** * Set debug mode to enable/disable logs at info level. * diff --git a/test/unit/player.test.js b/test/unit/player.test.js index 3b77360594..aa9b0e5cd3 100644 --- a/test/unit/player.test.js +++ b/test/unit/player.test.js @@ -1000,6 +1000,39 @@ QUnit.test('should revert to font icons if the SVG sprite cannot be loaded', fun player.dispose(); }); +QUnit.test('should add a svg-icons-enabled classname when svg icons string is valid', function(assert) { + // Stub a successful parsing of the SVG sprite. + sinon.stub(window.DOMParser.prototype, 'parseFromString').returns({ + querySelector: () => false, + documentElement: document.createElement('span') + }); + + assert.expect(1); + + const player = TestHelpers.makePlayer({experimentalSvgIcons: ''}); + + assert.ok(player.hasClass('vjs-svg-icons-enabled'), 'svg-icons-enabled classname added'); + + window.DOMParser.prototype.parseFromString.restore(); + player.dispose(); +}); + +QUnit.test('should revert to font icons if the SVG sprite string is not valid', function(assert) { + // Stub an unsuccessful parsing of the SVG sprite. + sinon.stub(window.DOMParser.prototype, 'parseFromString').returns({ + querySelector: () => true + }); + + assert.expect(1); + + const player = TestHelpers.makePlayer({experimentalSvgIcons: ''}); + + assert.ok(!player.hasClass('vjs-svg-icons-enabled'), 'svg-icons-enabled classname was not added'); + + window.DOMParser.prototype.parseFromString.restore(); + player.dispose(); +}); + QUnit.test('should not add a touch-enabled classname when touch is not supported', function(assert) { assert.expect(1);