@lumen5/lottie-web 5.14.0

package/player/js/renderers/HybridRendererBase.js

@@ -0,0 +1,344 @@
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import createNS from '../utils/helpers/svg_elements';
+import createTag from '../utils/helpers/html_elements';
+import SVGRenderer from './SVGRenderer';
+import HSolidElement from '../elements/htmlElements/HSolidElement';
+import {
+  styleDiv,
+} from '../utils/common';
+import BaseRenderer from './BaseRenderer';
+import IImageElement from '../elements/ImageElement';
+import SVGShapeElement from '../elements/svgElements/SVGShapeElement';
+import HShapeElement from '../elements/htmlElements/HShapeElement';
+import HTextElement from '../elements/htmlElements/HTextElement';
+import HCameraElement from '../elements/htmlElements/HCameraElement';
+import HImageElement from '../elements/htmlElements/HImageElement';
+import ISolidElement from '../elements/SolidElement';
+import SVGTextLottieElement from '../elements/svgElements/SVGTextElement';
+
+function HybridRendererBase(animationItem, config) {
+  this.animationItem = animationItem;
+  this.layers = null;
+  this.renderedFrame = -1;
+  this.renderConfig = {
+    className: (config && config.className) || '',
+    imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
+    hideOnTransparent: !(config && config.hideOnTransparent === false),
+    filterSize: {
+      width: (config && config.filterSize && config.filterSize.width) || '400%',
+      height: (config && config.filterSize && config.filterSize.height) || '400%',
+      x: (config && config.filterSize && config.filterSize.x) || '-100%',
+      y: (config && config.filterSize && config.filterSize.y) || '-100%',
+    },
+  };
+  this.globalData = {
+    _mdf: false,
+    frameNum: -1,
+    renderConfig: this.renderConfig,
+  };
+  this.pendingElements = [];
+  this.elements = [];
+  this.threeDElements = [];
+  this.destroyed = false;
+  this.camera = null;
+  this.supports3d = true;
+  this.rendererType = 'html';
+}
+
+extendPrototype([BaseRenderer], HybridRendererBase);
+
+HybridRendererBase.prototype.buildItem = SVGRenderer.prototype.buildItem;
+
+HybridRendererBase.prototype.checkPendingElements = function () {
+  while (this.pendingElements.length) {
+    var element = this.pendingElements.pop();
+    element.checkParenting();
+  }
+};
+
+HybridRendererBase.prototype.appendElementInPos = function (element, pos) {
+  var newDOMElement = element.getBaseElement();
+  if (!newDOMElement) {
+    return;
+  }
+  var layer = this.layers[pos];
+  if (!layer.ddd || !this.supports3d) {
+    if (this.threeDElements) {
+      this.addTo3dContainer(newDOMElement, pos);
+    } else {
+      var i = 0;
+      var nextDOMElement;
+      var nextLayer;
+      var tmpDOMElement;
+      while (i < pos) {
+        if (this.elements[i] && this.elements[i] !== true && this.elements[i].getBaseElement) {
+          nextLayer = this.elements[i];
+          tmpDOMElement = this.layers[i].ddd ? this.getThreeDContainerByPos(i) : nextLayer.getBaseElement();
+          nextDOMElement = tmpDOMElement || nextDOMElement;
+        }
+        i += 1;
+      }
+      if (nextDOMElement) {
+        if (!layer.ddd || !this.supports3d) {
+          this.layerElement.insertBefore(newDOMElement, nextDOMElement);
+        }
+      } else if (!layer.ddd || !this.supports3d) {
+        this.layerElement.appendChild(newDOMElement);
+      }
+    }
+  } else {
+    this.addTo3dContainer(newDOMElement, pos);
+  }
+};
+
+HybridRendererBase.prototype.createShape = function (data) {
+  if (!this.supports3d) {
+    return new SVGShapeElement(data, this.globalData, this);
+  }
+  return new HShapeElement(data, this.globalData, this);
+};
+
+HybridRendererBase.prototype.createText = function (data) {
+  if (!this.supports3d) {
+    return new SVGTextLottieElement(data, this.globalData, this);
+  }
+  return new HTextElement(data, this.globalData, this);
+};
+
+HybridRendererBase.prototype.createCamera = function (data) {
+  this.camera = new HCameraElement(data, this.globalData, this);
+  return this.camera;
+};
+
+HybridRendererBase.prototype.createImage = function (data) {
+  if (!this.supports3d) {
+    return new IImageElement(data, this.globalData, this);
+  }
+  return new HImageElement(data, this.globalData, this);
+};
+
+HybridRendererBase.prototype.createSolid = function (data) {
+  if (!this.supports3d) {
+    return new ISolidElement(data, this.globalData, this);
+  }
+  return new HSolidElement(data, this.globalData, this);
+};
+
+HybridRendererBase.prototype.createNull = SVGRenderer.prototype.createNull;
+
+HybridRendererBase.prototype.getThreeDContainerByPos = function (pos) {
+  var i = 0;
+  var len = this.threeDElements.length;
+  while (i < len) {
+    if (this.threeDElements[i].startPos <= pos && this.threeDElements[i].endPos >= pos) {
+      return this.threeDElements[i].perspectiveElem;
+    }
+    i += 1;
+  }
+  return null;
+};
+
+HybridRendererBase.prototype.createThreeDContainer = function (pos, type) {
+  var perspectiveElem = createTag('div');
+  var style;
+  var containerStyle;
+  styleDiv(perspectiveElem);
+  var container = createTag('div');
+  styleDiv(container);
+  if (type === '3d') {
+    style = perspectiveElem.style;
+    style.width = this.globalData.compSize.w + 'px';
+    style.height = this.globalData.compSize.h + 'px';
+    var center = '50% 50%';
+    style.webkitTransformOrigin = center;
+    style.mozTransformOrigin = center;
+    style.transformOrigin = center;
+    containerStyle = container.style;
+    var matrix = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)';
+    containerStyle.transform = matrix;
+    containerStyle.webkitTransform = matrix;
+  }
+
+  perspectiveElem.appendChild(container);
+  // this.resizerElem.appendChild(perspectiveElem);
+  var threeDContainerData = {
+    container: container,
+    perspectiveElem: perspectiveElem,
+    startPos: pos,
+    endPos: pos,
+    type: type,
+  };
+  this.threeDElements.push(threeDContainerData);
+  return threeDContainerData;
+};
+
+HybridRendererBase.prototype.build3dContainers = function () {
+  var i;
+  var len = this.layers.length;
+  var lastThreeDContainerData;
+  var currentContainer = '';
+  for (i = 0; i < len; i += 1) {
+    if (this.layers[i].ddd && this.layers[i].ty !== 3) {
+      if (currentContainer !== '3d') {
+        currentContainer = '3d';
+        lastThreeDContainerData = this.createThreeDContainer(i, '3d');
+      }
+      lastThreeDContainerData.endPos = Math.max(lastThreeDContainerData.endPos, i);
+    } else {
+      if (currentContainer !== '2d') {
+        currentContainer = '2d';
+        lastThreeDContainerData = this.createThreeDContainer(i, '2d');
+      }
+      lastThreeDContainerData.endPos = Math.max(lastThreeDContainerData.endPos, i);
+    }
+  }
+  len = this.threeDElements.length;
+  for (i = len - 1; i >= 0; i -= 1) {
+    this.resizerElem.appendChild(this.threeDElements[i].perspectiveElem);
+  }
+};
+
+HybridRendererBase.prototype.addTo3dContainer = function (elem, pos) {
+  var i = 0;
+  var len = this.threeDElements.length;
+  while (i < len) {
+    if (pos <= this.threeDElements[i].endPos) {
+      var j = this.threeDElements[i].startPos;
+      var nextElement;
+      while (j < pos) {
+        if (this.elements[j] && this.elements[j].getBaseElement) {
+          nextElement = this.elements[j].getBaseElement();
+        }
+        j += 1;
+      }
+      if (nextElement) {
+        this.threeDElements[i].container.insertBefore(elem, nextElement);
+      } else {
+        this.threeDElements[i].container.appendChild(elem);
+      }
+      break;
+    }
+    i += 1;
+  }
+};
+
+HybridRendererBase.prototype.configAnimation = function (animData) {
+  var resizerElem = createTag('div');
+  var wrapper = this.animationItem.wrapper;
+  var style = resizerElem.style;
+  style.width = animData.w + 'px';
+  style.height = animData.h + 'px';
+  this.resizerElem = resizerElem;
+  styleDiv(resizerElem);
+  style.transformStyle = 'flat';
+  style.mozTransformStyle = 'flat';
+  style.webkitTransformStyle = 'flat';
+  if (this.renderConfig.className) {
+    resizerElem.setAttribute('class', this.renderConfig.className);
+  }
+  wrapper.appendChild(resizerElem);
+
+  style.overflow = 'hidden';
+  var svg = createNS('svg');
+  svg.setAttribute('width', '1');
+  svg.setAttribute('height', '1');
+  styleDiv(svg);
+  this.resizerElem.appendChild(svg);
+  var defs = createNS('defs');
+  svg.appendChild(defs);
+  this.data = animData;
+  // Mask animation
+  this.setupGlobalData(animData, svg);
+  this.globalData.defs = defs;
+  this.layers = animData.layers;
+  this.layerElement = this.resizerElem;
+  this.build3dContainers();
+  this.updateContainerSize();
+};
+
+HybridRendererBase.prototype.destroy = function () {
+  if (this.animationItem.wrapper) {
+    this.animationItem.wrapper.innerText = '';
+  }
+  this.animationItem.container = null;
+  this.globalData.defs = null;
+  var i;
+  var len = this.layers ? this.layers.length : 0;
+  for (i = 0; i < len; i += 1) {
+    if (this.elements[i] && this.elements[i].destroy) {
+      this.elements[i].destroy();
+    }
+  }
+  this.elements.length = 0;
+  this.destroyed = true;
+  this.animationItem = null;
+};
+
+HybridRendererBase.prototype.updateContainerSize = function () {
+  var elementWidth = this.animationItem.wrapper.offsetWidth;
+  var elementHeight = this.animationItem.wrapper.offsetHeight;
+  var elementRel = elementWidth / elementHeight;
+  var animationRel = this.globalData.compSize.w / this.globalData.compSize.h;
+  var sx;
+  var sy;
+  var tx;
+  var ty;
+  if (animationRel > elementRel) {
+    sx = elementWidth / (this.globalData.compSize.w);
+    sy = elementWidth / (this.globalData.compSize.w);
+    tx = 0;
+    ty = ((elementHeight - this.globalData.compSize.h * (elementWidth / this.globalData.compSize.w)) / 2);
+  } else {
+    sx = elementHeight / (this.globalData.compSize.h);
+    sy = elementHeight / (this.globalData.compSize.h);
+    tx = (elementWidth - this.globalData.compSize.w * (elementHeight / this.globalData.compSize.h)) / 2;
+    ty = 0;
+  }
+  var style = this.resizerElem.style;
+  style.webkitTransform = 'matrix3d(' + sx + ',0,0,0,0,' + sy + ',0,0,0,0,1,0,' + tx + ',' + ty + ',0,1)';
+  style.transform = style.webkitTransform;
+};
+
+HybridRendererBase.prototype.renderFrame = SVGRenderer.prototype.renderFrame;
+
+HybridRendererBase.prototype.hide = function () {
+  this.resizerElem.style.display = 'none';
+};
+
+HybridRendererBase.prototype.show = function () {
+  this.resizerElem.style.display = 'block';
+};
+
+HybridRendererBase.prototype.initItems = function () {
+  this.buildAllItems();
+  if (this.camera) {
+    this.camera.setup();
+  } else {
+    var cWidth = this.globalData.compSize.w;
+    var cHeight = this.globalData.compSize.h;
+    var i;
+    var len = this.threeDElements.length;
+    for (i = 0; i < len; i += 1) {
+      var style = this.threeDElements[i].perspectiveElem.style;
+      style.webkitPerspective = Math.sqrt(Math.pow(cWidth, 2) + Math.pow(cHeight, 2)) + 'px';
+      style.perspective = style.webkitPerspective;
+    }
+  }
+};
+
+HybridRendererBase.prototype.searchExtraCompositions = function (assets) {
+  var i;
+  var len = assets.length;
+  var floatingContainer = createTag('div');
+  for (i = 0; i < len; i += 1) {
+    if (assets[i].xt) {
+      var comp = this.createComp(assets[i], floatingContainer, this.globalData.comp, null);
+      comp.initExpressions();
+      this.globalData.projectInterface.registerComposition(comp);
+    }
+  }
+};
+
+export default HybridRendererBase;

package/player/js/renderers/SVGRenderer.js

@@ -0,0 +1,82 @@
+import {
+  createElementID,
+} from '../utils/common';
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import createNS from '../utils/helpers/svg_elements';
+
+import SVGCompElement from '../elements/svgElements/SVGCompElement';
+import SVGRendererBase from './SVGRendererBase';
+
+function SVGRenderer(animationItem, config) {
+  this.animationItem = animationItem;
+  this.layers = null;
+  this.renderedFrame = -1;
+  this.svgElement = createNS('svg');
+  var ariaLabel = '';
+  if (config && config.title) {
+    var titleElement = createNS('title');
+    var titleId = createElementID();
+    titleElement.setAttribute('id', titleId);
+    titleElement.textContent = config.title;
+    this.svgElement.appendChild(titleElement);
+    ariaLabel += titleId;
+  }
+  if (config && config.description) {
+    var descElement = createNS('desc');
+    var descId = createElementID();
+    descElement.setAttribute('id', descId);
+    descElement.textContent = config.description;
+    this.svgElement.appendChild(descElement);
+    ariaLabel += ' ' + descId;
+  }
+  if (ariaLabel) {
+    this.svgElement.setAttribute('aria-labelledby', ariaLabel);
+  }
+  var defs = createNS('defs');
+  this.svgElement.appendChild(defs);
+  var maskElement = createNS('g');
+  this.svgElement.appendChild(maskElement);
+  this.layerElement = maskElement;
+  this.renderConfig = {
+    preserveAspectRatio: (config && config.preserveAspectRatio) || 'xMidYMid meet',
+    imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
+    contentVisibility: (config && config.contentVisibility) || 'visible',
+    progressiveLoad: (config && config.progressiveLoad) || false,
+    hideOnTransparent: !((config && config.hideOnTransparent === false)),
+    viewBoxOnly: (config && config.viewBoxOnly) || false,
+    viewBoxSize: (config && config.viewBoxSize) || false,
+    className: (config && config.className) || '',
+    id: (config && config.id) || '',
+    focusable: config && config.focusable,
+    filterSize: {
+      width: (config && config.filterSize && config.filterSize.width) || '100%',
+      height: (config && config.filterSize && config.filterSize.height) || '100%',
+      x: (config && config.filterSize && config.filterSize.x) || '0%',
+      y: (config && config.filterSize && config.filterSize.y) || '0%',
+    },
+    width: (config && config.width),
+    height: (config && config.height),
+    runExpressions: !config || config.runExpressions === undefined || config.runExpressions,
+  };
+
+  this.globalData = {
+    _mdf: false,
+    frameNum: -1,
+    defs: defs,
+    renderConfig: this.renderConfig,
+  };
+  this.elements = [];
+  this.pendingElements = [];
+  this.destroyed = false;
+  this.rendererType = 'svg';
+}
+
+extendPrototype([SVGRendererBase], SVGRenderer);
+
+SVGRenderer.prototype.createComp = function (data) {
+  return new SVGCompElement(data, this.globalData, this);
+};
+
+export default SVGRenderer;

package/player/js/renderers/SVGRendererBase.js

@@ -0,0 +1,255 @@
+import { getLocationHref } from '../main';
+import {
+  createElementID,
+  getExpressionsPlugin,
+} from '../utils/common';
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import {
+  createSizedArray,
+} from '../utils/helpers/arrays';
+import createNS from '../utils/helpers/svg_elements';
+import BaseRenderer from './BaseRenderer';
+import IImageElement from '../elements/ImageElement';
+import SVGShapeElement from '../elements/svgElements/SVGShapeElement';
+import SVGTextLottieElement from '../elements/svgElements/SVGTextElement'; // eslint-disable-line import/no-cycle
+import ISolidElement from '../elements/SolidElement';
+import NullElement from '../elements/NullElement';
+
+function SVGRendererBase() {
+}
+
+extendPrototype([BaseRenderer], SVGRendererBase);
+
+SVGRendererBase.prototype.createNull = function (data) {
+  return new NullElement(data, this.globalData, this);
+};
+
+SVGRendererBase.prototype.createShape = function (data) {
+  return new SVGShapeElement(data, this.globalData, this);
+};
+
+SVGRendererBase.prototype.createText = function (data) {
+  return new SVGTextLottieElement(data, this.globalData, this);
+};
+
+SVGRendererBase.prototype.createImage = function (data) {
+  return new IImageElement(data, this.globalData, this);
+};
+
+SVGRendererBase.prototype.createSolid = function (data) {
+  return new ISolidElement(data, this.globalData, this);
+};
+
+SVGRendererBase.prototype.configAnimation = function (animData) {
+  this.svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+  this.svgElement.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+  if (this.renderConfig.viewBoxSize) {
+    this.svgElement.setAttribute('viewBox', this.renderConfig.viewBoxSize);
+  } else {
+    this.svgElement.setAttribute('viewBox', '0 0 ' + animData.w + ' ' + animData.h);
+  }
+
+  if (!this.renderConfig.viewBoxOnly) {
+    this.svgElement.setAttribute('width', animData.w);
+    this.svgElement.setAttribute('height', animData.h);
+    this.svgElement.style.width = '100%';
+    this.svgElement.style.height = '100%';
+    this.svgElement.style.transform = 'translate3d(0,0,0)';
+    this.svgElement.style.contentVisibility = this.renderConfig.contentVisibility;
+  }
+  if (this.renderConfig.width) {
+    this.svgElement.setAttribute('width', this.renderConfig.width);
+  }
+  if (this.renderConfig.height) {
+    this.svgElement.setAttribute('height', this.renderConfig.height);
+  }
+  if (this.renderConfig.className) {
+    this.svgElement.setAttribute('class', this.renderConfig.className);
+  }
+  if (this.renderConfig.id) {
+    this.svgElement.setAttribute('id', this.renderConfig.id);
+  }
+  if (this.renderConfig.focusable !== undefined) {
+    this.svgElement.setAttribute('focusable', this.renderConfig.focusable);
+  }
+  this.svgElement.setAttribute('preserveAspectRatio', this.renderConfig.preserveAspectRatio);
+  // this.layerElement.style.transform = 'translate3d(0,0,0)';
+  // this.layerElement.style.transformOrigin = this.layerElement.style.mozTransformOrigin = this.layerElement.style.webkitTransformOrigin = this.layerElement.style['-webkit-transform'] = "0px 0px 0px";
+  this.animationItem.wrapper.appendChild(this.svgElement);
+  // Mask animation
+  var defs = this.globalData.defs;
+
+  this.setupGlobalData(animData, defs);
+  this.globalData.progressiveLoad = this.renderConfig.progressiveLoad;
+  this.data = animData;
+
+  var maskElement = createNS('clipPath');
+  var rect = createNS('rect');
+  rect.setAttribute('width', animData.w);
+  rect.setAttribute('height', animData.h);
+  rect.setAttribute('x', 0);
+  rect.setAttribute('y', 0);
+  var maskId = createElementID();
+  maskElement.setAttribute('id', maskId);
+  maskElement.appendChild(rect);
+  this.layerElement.setAttribute('clip-path', 'url(' + getLocationHref() + '#' + maskId + ')');
+
+  defs.appendChild(maskElement);
+  this.layers = animData.layers;
+  this.elements = createSizedArray(animData.layers.length);
+};
+
+SVGRendererBase.prototype.destroy = function () {
+  if (this.animationItem.wrapper) {
+    this.animationItem.wrapper.innerText = '';
+  }
+  this.layerElement = null;
+  this.globalData.defs = null;
+  var i;
+  var len = this.layers ? this.layers.length : 0;
+  for (i = 0; i < len; i += 1) {
+    if (this.elements[i] && this.elements[i].destroy) {
+      this.elements[i].destroy();
+    }
+  }
+  this.elements.length = 0;
+  this.destroyed = true;
+  this.animationItem = null;
+};
+
+SVGRendererBase.prototype.updateContainerSize = function () {
+};
+
+SVGRendererBase.prototype.findIndexByInd = function (ind) {
+  var i = 0;
+  var len = this.layers.length;
+  for (i = 0; i < len; i += 1) {
+    if (this.layers[i].ind === ind) {
+      return i;
+    }
+  }
+  return -1;
+};
+
+SVGRendererBase.prototype.buildItem = function (pos) {
+  var elements = this.elements;
+  if (elements[pos] || this.layers[pos].ty === 99) {
+    return;
+  }
+  elements[pos] = true;
+  var element = this.createItem(this.layers[pos]);
+
+  elements[pos] = element;
+  if (getExpressionsPlugin()) {
+    if (this.layers[pos].ty === 0) {
+      this.globalData.projectInterface.registerComposition(element);
+    }
+    element.initExpressions();
+  }
+  this.appendElementInPos(element, pos);
+  if (this.layers[pos].tt) {
+    var elementIndex = ('tp' in this.layers[pos])
+      ? this.findIndexByInd(this.layers[pos].tp)
+      : pos - 1;
+    if (elementIndex === -1) {
+      return;
+    }
+    if (!this.elements[elementIndex] || this.elements[elementIndex] === true) {
+      this.buildItem(elementIndex);
+      this.addPendingElement(element);
+    } else {
+      var matteElement = elements[elementIndex];
+      var matteMask = matteElement.getMatte(this.layers[pos].tt);
+      element.setMatte(matteMask);
+    }
+  }
+};
+
+SVGRendererBase.prototype.checkPendingElements = function () {
+  while (this.pendingElements.length) {
+    var element = this.pendingElements.pop();
+    element.checkParenting();
+    if (element.data.tt) {
+      var i = 0;
+      var len = this.elements.length;
+      while (i < len) {
+        if (this.elements[i] === element) {
+          var elementIndex = 'tp' in element.data
+            ? this.findIndexByInd(element.data.tp)
+            : i - 1;
+          var matteElement = this.elements[elementIndex];
+          var matteMask = matteElement.getMatte(this.layers[i].tt);
+          element.setMatte(matteMask);
+          break;
+        }
+        i += 1;
+      }
+    }
+  }
+};
+
+SVGRendererBase.prototype.renderFrame = function (num) {
+  if (this.renderedFrame === num || this.destroyed) {
+    return;
+  }
+  if (num === null) {
+    num = this.renderedFrame;
+  } else {
+    this.renderedFrame = num;
+  }
+  // console.log('-------');
+  // console.log('FRAME ',num);
+  this.globalData.frameNum = num;
+  this.globalData.frameId += 1;
+  this.globalData.projectInterface.currentFrame = num;
+  this.globalData._mdf = false;
+  var i;
+  var len = this.layers.length;
+  if (!this.completeLayers) {
+    this.checkLayers(num);
+  }
+  for (i = len - 1; i >= 0; i -= 1) {
+    if (this.completeLayers || this.elements[i]) {
+      this.elements[i].prepareFrame(num - this.layers[i].st);
+    }
+  }
+  if (this.globalData._mdf) {
+    for (i = 0; i < len; i += 1) {
+      if (this.completeLayers || this.elements[i]) {
+        this.elements[i].renderFrame();
+      }
+    }
+  }
+};
+
+SVGRendererBase.prototype.appendElementInPos = function (element, pos) {
+  var newElement = element.getBaseElement();
+  if (!newElement) {
+    return;
+  }
+  var i = 0;
+  var nextElement;
+  while (i < pos) {
+    if (this.elements[i] && this.elements[i] !== true && this.elements[i].getBaseElement()) {
+      nextElement = this.elements[i].getBaseElement();
+    }
+    i += 1;
+  }
+  if (nextElement) {
+    this.layerElement.insertBefore(newElement, nextElement);
+  } else {
+    this.layerElement.appendChild(newElement);
+  }
+};
+
+SVGRendererBase.prototype.hide = function () {
+  this.layerElement.style.display = 'none';
+};
+
+SVGRendererBase.prototype.show = function () {
+  this.layerElement.style.display = 'block';
+};
+
+export default SVGRendererBase;

package/player/js/renderers/renderersManager.js

@@ -0,0 +1,29 @@
+const renderers = {};
+
+const registerRenderer = (key, value) => {
+  renderers[key] = value;
+};
+
+function getRenderer(key) {
+  return renderers[key];
+}
+
+function getRegisteredRenderer() {
+  // Returns canvas by default for compatibility
+  if (renderers.canvas) {
+    return 'canvas';
+  }
+  // Returns any renderer that is registered
+  for (const key in renderers) {
+    if (renderers[key]) {
+      return key;
+    }
+  }
+  return '';
+}
+
+export {
+  registerRenderer,
+  getRenderer,
+  getRegisteredRenderer,
+};