Removing cardboard

CHANGELOG.md

@@ -1,5 +1,12 @@
+<a name="2.1.1"></a>
+# [2.1.1](https://github.com/videojs/videojs-vr/compare/v1.10.1...v2.1.1) (2024-07-22)
+
+### Chores
+
+* revisting iPhone
+
 <a name="2.1.0"></a>
-# [2.1.0](https://github.com/videojs/videojs-vr/compare/v1.10.1...v2.0.0) (2024-07-22)
+# [2.1.0](https://github.com/videojs/videojs-vr/compare/v1.10.1...v2.1.0) (2024-07-22)
 
 ### Chores
 
@@ -144,7 +151,7 @@
 ### Chores
 
 * update to generator-videojs-plugin[@7](https://github.com/7).2.0 ([634be2b](https://github.com/videojs/videojs-vr/commit/634be2b))
-* **package:** update videojs-generate-rollup-config to version 2.2.0 🚀 ([#135]https://github.com/videojs/videojs-vr/issues/135)) ([d42d1f2](https://github.com/videojs/videojs-vr/commit/d42d1f2))
+* **package:** update videojs-generate-rollup-config to version 2.2.0 🚀 ([#135](https://github.com/videojs/videojs-vr/issues/135)) ([d42d1f2](https://github.com/videojs/videojs-vr/commit/d42d1f2))
 
 <a name="1.4.7"></a>
 ## [1.4.7](https://github.com/videojs/videojs-vr/compare/v1.4.6...v1.4.7) (2018-08-23)

src/plugin.js

@@ -10,6 +10,7 @@ import OrbitOrientationContols from './orbit-orientation-controls.js';
 import * as utils from './utils';
 import CanvasPlayerControls from './canvas-player-controls';
 import OmnitoneController from './omnitone-controller';
+import { DeviceOrientationControls } from '../vendor/three/DeviceOrientationControls.js';
 
 // WebXR related imports
 import WebXRPolyfill from 'webxr-polyfill';
@@ -18,21 +19,23 @@ import {XRControllerModelFactory} from '../node_modules/three/examples/jsm/webxr
 import {BoxLineGeometry} from '../node_modules/three/examples/jsm/geometries/BoxLineGeometry';
 
 // import controls so they get registered with videojs
-import './cardboard-button';
 import './big-vr-play-button';
 
 // Default options for the plugin.
 const defaults = {
   debug: false,
   omnitone: false,
-  forceCardboard: false,
   omnitoneOptions: {},
   projection: 'AUTO',
   sphereDetail: 32,
   sphereRadius: 254.0,
   disableTogglePlay: false
 };
 
+const POLYFILL_CONFIG = {
+  cardboard: false
+};
+
 const errors = {
   'web-vr-out-of-date': {
     headline: '360 is out of date',
@@ -82,7 +85,7 @@ class VR extends Plugin {
       return;
     }
 
-    this.polyfill_ = new WebXRPolyfill();
+    this.polyfill_ = new WebXRPolyfill(POLYFILL_CONFIG);
 
     this.handleVrDisplayActivate_ = videojs.bind(this, this.handleVrDisplayActivate_);
     this.handleVrDisplayDeactivate_ = videojs.bind(this, this.handleVrDisplayDeactivate_);
@@ -544,48 +547,9 @@ void main() {
       return;
     }
     this.vrDisplay.requestPresent([{source: this.renderedCanvas}]).then(() => {
-      if (!this.vrDisplay.cardboardUI_ || !videojs.browser.IS_IOS) {
+      if (!videojs.browser.IS_IOS) {
         return;
       }
-
-      // webvr-polyfill/cardboard ui only watches for click events
-      // to tell that the back arrow button is pressed during cardboard vr.
-      // but somewhere along the line these events are silenced with preventDefault
-      // but only on iOS, so we translate them ourselves here
-      let touches = [];
-      const iosCardboardTouchStart_ = (e) => {
-        for (let i = 0; i < e.touches.length; i++) {
-          touches.push(e.touches[i]);
-        }
-      };
-
-      const iosCardboardTouchEnd_ = (e) => {
-        if (!touches.length) {
-          return;
-        }
-
-        touches.forEach((t) => {
-          const simulatedClick = new window.MouseEvent('click', {
-            screenX: t.screenX,
-            screenY: t.screenY,
-            clientX: t.clientX,
-            clientY: t.clientY
-          });
-
-          this.renderedCanvas.dispatchEvent(simulatedClick);
-        });
-
-        touches = [];
-      };
-
-      this.renderedCanvas.addEventListener('touchstart', iosCardboardTouchStart_);
-      this.renderedCanvas.addEventListener('touchend', iosCardboardTouchEnd_);
-
-      this.iosRevertTouchToClick_ = () => {
-        this.renderedCanvas.removeEventListener('touchstart', iosCardboardTouchStart_);
-        this.renderedCanvas.removeEventListener('touchend', iosCardboardTouchEnd_);
-        this.iosRevertTouchToClick_ = null;
-      };
     });
   }
 
@@ -723,6 +687,7 @@ void main() {
     this.reset();
 
     this.camera = new THREE.PerspectiveCamera(70, this.player_.currentWidth() / this.player_.currentHeight(), 1, 2000);
+    this.orbitcontrols = new DeviceOrientationControls(this.camera);
     this.camera.layers.enable(1);
 
     // Store vector representing the direction in which the camera is looking, in world space.
@@ -755,13 +720,6 @@ void main() {
     this.player_.addChild('BigVrPlayButton', {}, this.bigPlayButtonIndex_);
     this.player_.bigPlayButton = this.player_.getChild('BigVrPlayButton');
 
-    // mobile devices, or cardboard forced to on
-    if (this.options_.forceCardboard ||
-        videojs.browser.IS_ANDROID ||
-        videojs.browser.IS_IOS) {
-      this.addCardboardButton_();
-    }
-
     // if ios remove full screen toggle
     if (videojs.browser.IS_IOS && this.player_.controlBar && this.player_.controlBar.fullscreenToggle) {
       this.player_.controlBar.fullscreenToggle.hide();
@@ -772,7 +730,8 @@ void main() {
       devicePixelRatio: window.devicePixelRatio,
       alpha: false,
       clearColor: 0xffffff,
-      antialias: true
+      antialias: true,
+      powerPreference: 'high-performance'
     });
 
     const webglContext = this.renderer.getContext('webgl');
@@ -857,7 +816,6 @@ void main() {
       // so, we want to add the button if we're not polyfilled.
       if (!this.vrDisplay.isPolyfilled) {
         this.log('Real HMD found using VRControls', this.vrDisplay);
-        this.addCardboardButton_();
 
         // We use VRControls here since we are working with an HMD
         // and we only want orientation controls.
@@ -1251,15 +1209,10 @@ void main() {
       });
     }
 
+    this.orbitcontrols.update();
     this.renderer.render(this.scene, this.camera);
   }
 
-  addCardboardButton_() {
-    if (!this.player_.controlBar.getChild('CardboardButton')) {
-      this.player_.controlBar.addChild('CardboardButton', {});
-    }
-  }
-
   getVideoEl_() {
     return this.player_.el().getElementsByTagName('video')[0];
   }
@@ -1304,11 +1257,6 @@ void main() {
       this.player_.removeChild('BigVrPlayButton');
     }
 
-    // remove the cardboard button
-    if (this.player_.getChild('CardboardButton')) {
-      this.player_.controlBar.removeChild('CardboardButton');
-    }
-
     // show the fullscreen again
     if (videojs.browser.IS_IOS && this.player_.controlBar && this.player_.controlBar.fullscreenToggle) {
       this.player_.controlBar.fullscreenToggle.show();