Fix: size and set it up so that webvr-config is used. (#6)

src/plugin.js

@@ -1,23 +1,19 @@
-import 'webvr-polyfill/build/webvr-polyfill';
-
+import window from 'global/window';
+/* THIS CONFIGURES webvr-polyfill don't change the order */
+import './webvr-config.js';
+import 'webvr-polyfill/src/main';
 import videojs from 'video.js';
 import {version as VERSION} from '../package.json';
-import window from 'global/window';
-
 import * as THREE from 'three';
-
 // previously we used
 // * three/examples/js/controls/VRControls.js
 // * three/examples/js/effects/VREffects.js
 // but since we are using es6 now, there is no good way to make them export to us
 // so the code has been copied locally to allow exporting
 import VRControls from './VRControls.js';
 import VREffect from './VREffect.js';
-
-import WebVrConfig from './webvr.config.js';
 import WebVRManager from 'webvr-boilerplate';
 
-window.WebVrConfig = WebVrConfig;
 window.WebVRManager = WebVRManager;
 
 const navigator = window.navigator;
@@ -238,7 +234,7 @@ const vr = function(options) {
       return;
     }
 
-    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
+    const camera = new THREE.PerspectiveCamera(75, player.currentWidth() / player.currentHeight(), 1, 1000);
 
     // Store vector representing the direction in which the camera is looking, in world space.
     cameraVector = new THREE.Vector3();
@@ -335,10 +331,10 @@ const vr = function(options) {
       antialias: true
     });
 
-    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.setSize(player.currentWidth(), player.currentHeight());
     const effect = new VREffect(renderer);
 
-    effect.setSize(window.innerWidth, window.innerHeight);
+    effect.setSize(player.currentWidth(), player.currentHeight());
 
     let vrDisplay = null;
 

src/webvr-config.js

@@ -0,0 +1,21 @@
+import window from 'global/window';
+// this is used to configure webvr-polyfill
+// see https://github.com/googlevr/webvr-polyfill#configuration
+const WebVRConfig = {
+  // TODO:
+  // implement controls so that thy only work when the player is in focus.
+  // This will require MOUSE_KEYBOARD_CONTROLS_DISABLED, and TOUCH_PANNER_DISABLED to be set to true
+  // and various points in the code will have to be changed. As a lot of the code
+  // expects some sort of controls to be set up, and when no controls are set up
+  // it throws an error about no vr displays being found. VrDisplays is actually referring to controls.
+
+  // Flag to disable touch panner. In case you have your own touch controls.
+  // Default: true.
+  // TOUCH_PANNER_DISABLED: true,
+  // To disable keyboard and mouse controls, if you want to use your own
+  // implementation.
+  // Default: false.
+  // MOUSE_KEYBOARD_CONTROLS_DISABLED: true,
+};
+
+window.WebVRConfig = WebVRConfig;