feat(svg-icons): handle custom svg icons

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.
  *

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: '<svg></svg>'});
+
+ 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);