fix rendering issue on IE 11.

index.html

@@ -60,6 +60,7 @@
             PanoramaThumbnail: true,
             KeyboardControl: true,
             clickToToggle: true,
+            VREnable: true,
             Notice: {
                 Enable: true,
                 Message: (isMobile())? "please drag and drop the video" : "please use your mouse drag and drop the video"

src/scripts/Components/BaseCanvas.js

@@ -96,7 +96,7 @@ class BaseCanvas extends Component{
 
         if(renderElement.tagName.toLowerCase() === "video" && (this.options.useHelperCanvas === true || (!supportVideoTexture(renderElement) && this.options.useHelperCanvas === "auto"))){
             this._helperCanvas = this.player.addComponent("HelperCanvas", new HelperCanvas(this.player));
-            // $FlowFixMe
+
             const context = this._helperCanvas.el();
             this._texture = new THREE.Texture(context);
         }else{

src/scripts/Components/Component.js

@@ -1,8 +1,8 @@
 // @ flow
 
 import EventEmitter from 'wolfy87-eventemitter';
-import type { Player, Settings } from '../types';
-import { mergeOptions, warning } from '../utils';
+import type { Player } from '../types';
+import { mergeOptions, ComponentData } from '../utils';
 
 /**
  * base Component layer, which will be use when videojs is not supported environment.
@@ -13,7 +13,7 @@ class Component extends EventEmitter{
     _el: HTMLElement | null;
     _player: Player;
     _renderElement: HTMLElement;
-    _children: Component[];
+    _children: ComponentData[];
 
     constructor(player: Player, options: any = {}, renderElement?: HTMLElement, ready?: () => void){
         super();
@@ -42,7 +42,7 @@ class Component extends EventEmitter{
 
     dispose(){
         for(let i = 0; i < this._children.length; i++){
-            this._children[i].dispose();
+            this._children[i].component.dispose();
         }
 
         if(this._el){
@@ -221,7 +221,7 @@ class Component extends EventEmitter{
 
         if(typeof component.el === "function" && component.el()){
             if(index === -1){
-                location.append(component.el());
+                location.appendChild(component.el());
             }else{
                 let children = location.childNodes;
                 let child = children[index];
@@ -231,7 +231,8 @@ class Component extends EventEmitter{
 
         this._children.push({
             name,
-            component
+            component,
+            location
         });
     }
 

src/scripts/Components/HelperCanvas.js

@@ -11,13 +11,16 @@ class HelperCanvas extends Component {
 
     constructor(player: Player, options?: any = {}){
         let element: any = document.createElement('canvas');
-        element.className = "panorama-video-helper-canvas";
+        element.className = "vjs-panorama-video-helper-canvas";
         options.el = element;
         super(player, options);
         this._videoElement = player.getVideoEl();
         this._width = this._videoElement.offsetWidth;
         this._height = this._videoElement.offsetHeight;
 
+        this.updateDimention();
+        element.style.display = "none";
+
         this._context = element.getContext('2d');
         this._context.drawImage(this._videoElement, 0, 0, this._width, this._height);
         /**
@@ -26,10 +29,16 @@ class HelperCanvas extends Component {
         player.one("loadedmetadata", () => {
             this._width = this._videoElement.videoWidth;
             this._height = this._videoElement.videoHeight;
+            this.updateDimention();
             this.render();
         });
     }
 
+    updateDimention(){
+        this.el().width = this._width;
+        this.el().height = this._height;
+    }
+
     el(){
         return this._el;
     }

src/scripts/Components/Marker.js

@@ -88,6 +88,14 @@ class Marker extends Component{
             this.el().style.top  =  `${point.y}px`;
         }
     }
+
+    get enable(): boolean{
+        return this._enable;
+    }
+
+    get position(): THREE.Vector3{
+        return this._position;
+    }
 }
 
 export default Marker;

src/scripts/Components/MarkerGroup.js

@@ -0,0 +1,50 @@
+// @flow
+
+import THREE from "three";
+import type { Player, MarkerSettings } from '../types';
+import Component from './Component';
+import Marker from './Marker';
+
+class MarkerGroup extends Component{
+    _totalMarkers: number;
+    _markers: Marker;
+    _camera: THREE.PerspectiveCamera;
+
+    constructor(player: Player, options: {
+        id: string;
+        markers: MarkerSettings[]
+    }){
+        super(player, options);
+        this._totalMarkers = 0;
+        this.el().classList.add("vjs-markergroup");
+
+        this.options.markers.forEach((markSetting)=>{
+            this.addMarker(markSetting);
+        });
+    }
+
+    attachEvents(){
+
+    }
+
+    addMarker(markSetting: any): Marker{
+        this._totalMarkers++;
+        markSetting.id= (markSetting.id? markSetting.id : `marker_${this._totalMarkers}`) + `_${this.options.id}`;
+        let marker = new Marker(this.player, markSetting);
+        this.addChild(markSetting.id, marker);
+        this._markers.push(marker);
+        return marker;
+    }
+
+    updateMarkers(){
+        let currentTime = this.player.getVideoEl().currentTime * 1000;
+        this._markers.forEach((marker)=>{
+            if(marker.options.duration > 0){
+
+            }
+
+        });
+    }
+}
+
+export default MarkerGroup;