fix small screen issue

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "videojs-vr",
-  "version": "1.7.2",
+  "name": "videojs-vr-sd",
+  "version": "1.7.3",
   "description": "A plugin to add 360 and VR video support to video.js.",
   "author": {
     "name": "James Broberg",
@@ -40,7 +40,7 @@
     "build:lang": "vjslang --dir dist/lang",
     "clean": "shx rm -rf ./dist ./test/dist && shx mkdir -p ./dist ./test/dist",
     "lint": "vjsstandard",
-    "prepublishOnly": "npm-run-all build-prod && vjsverify --verbose",
+
     "start": "npm-run-all -p server watch",
     "server": "karma start scripts/karma.conf.js --singleRun=false --auto-watch",
     "test": "npm run build-test && karma start scripts/karma.conf.js",

src/plugin.js

@@ -14,14 +14,16 @@ import OmnitoneController from './omnitone-controller';
 // import controls so they get regisetered with videojs
 import './cardboard-button';
 import './big-vr-play-button';
+import {doubleSizeForSmallScreen} from './utils';
 
 // Default options for the plugin.
 const defaults = {
   debug: false,
   omnitone: false,
   forceCardboard: false,
   omnitoneOptions: {},
-  projection: 'AUTO'
+  projection: 'AUTO',
+  sphereDetail: 32
 };
 
 const errors = {
@@ -126,7 +128,7 @@ class VR extends Plugin {
       }
       return this.changeProjection_('NONE');
     } else if (projection === '360') {
-      this.movieGeometry = new THREE.SphereBufferGeometry(256, 32, 32);
+      this.movieGeometry = new THREE.SphereBufferGeometry(256, this.options_.sphereDetail, this.options_.sphereDetail);
       this.movieMaterial = new THREE.MeshBasicMaterial({ map: this.videoTexture, overdraw: true, side: THREE.BackSide });
 
       this.movieScreen = new THREE.Mesh(this.movieGeometry, this.movieMaterial);
@@ -137,7 +139,11 @@ class VR extends Plugin {
       this.scene.add(this.movieScreen);
     } else if (projection === '360_LR' || projection === '360_TB') {
       // Left eye view
-      let geometry = new THREE.SphereGeometry(256, 32, 32);
+      let geometry = new THREE.SphereGeometry(
+        256,
+        this.options_.sphereDetail,
+        this.options_.sphereDetail
+      );
 
       let uvs = geometry.faceVertexUvs[ 0 ];
 
@@ -163,7 +169,11 @@ class VR extends Plugin {
       this.scene.add(this.movieScreen);
 
       // Right eye view
-      geometry = new THREE.SphereGeometry(256, 32, 32);
+      geometry = new THREE.SphereGeometry(
+        256,
+        this.options_.sphereDetail,
+        this.options_.sphereDetail
+      );
 
       uvs = geometry.faceVertexUvs[ 0 ];
 
@@ -224,7 +234,13 @@ class VR extends Plugin {
 
       this.scene.add(this.movieScreen);
     } else if (projection === '180') {
-      let geometry = new THREE.SphereGeometry(256, 32, 32, Math.PI, Math.PI);
+      let geometry = new THREE.SphereGeometry(
+        256,
+        this.options_.sphereDetail,
+        this.options_.sphereDetail,
+        Math.PI,
+        Math.PI
+      );
 
       // Left eye view
       geometry.scale(-1, 1, 1);
@@ -247,7 +263,13 @@ class VR extends Plugin {
       this.scene.add(this.movieScreen);
 
       // Right eye view
-      geometry = new THREE.SphereGeometry(256, 32, 32, Math.PI, Math.PI);
+      geometry = new THREE.SphereGeometry(
+        256,
+        this.options_.sphereDetail,
+        this.options_.sphereDetail,
+        Math.PI,
+        Math.PI
+      );
       geometry.scale(-1, 1, 1);
       uvs = geometry.faceVertexUvs[0];
 
@@ -565,8 +587,9 @@ void main() {
   }
 
   handleResize_() {
-    const width = this.player_.currentWidth();
-    const height = this.player_.currentHeight();
+    const size = doubleSizeForSmallScreen();
+    const width = size.width;
+    const height = size.height;
 
     this.effect.setSize(width, height, false);
     this.camera.aspect = width / height;
@@ -653,10 +676,12 @@ void main() {
       }
     };
 
-    this.renderer.setSize(this.player_.currentWidth(), this.player_.currentHeight(), false);
+    const size = doubleSizeForSmallScreen();
+
+    this.renderer.setSize(size.width, size.height, false);
     this.effect = new VREffect(this.renderer);
 
-    this.effect.setSize(this.player_.currentWidth(), this.player_.currentHeight(), false);
+    this.effect.setSize(size.width, size.height, false);
     this.vrDisplay = null;
 
     // Previous timestamps for gamepad updates

src/utils.js

@@ -68,3 +68,20 @@ export const getInternalProjectionName = function(projection) {
   }
 
 };
+
+// double currentWidth/Height for small screen device, for better quality
+// also need a high sphereDetail like 128 (https://github.com/videojs/videojs-vr/pull/225)
+// this is just a workaround
+export const doubleSizeForSmallScreen = function() {
+  let width = this.player_.currentWidth();
+  let height = this.player_.currentHeight();
+
+  if (this.player_.videoWidth() > this.player_.currentWidth() * 2) {
+    width = this.player_.currentWidth() * 2;
+    height = this.player_.currentHeight() * 2;
+  }
+  return {
+    width,
+    height
+  };
+};