import * as THREE from 'three';
import videojs from 'video.js';
var ROTATE_SPEED = 0.5;
/**
* Provides a quaternion responsible for pre-panning the scene before further
* transformations due to device sensors.
*/
function TouchPanner() {
window.addEventListener('touchstart', this.onTouchStart_.bind(this));
window.addEventListener('touchmove', this.onTouchMove_.bind(this));
window.addEventListener('touchend', this.onTouchEnd_.bind(this));
this.isTouching = false;
this.rotateStart = new THREE.Vector2();
this.rotateEnd = new THREE.Vector2();
this.rotateDelta = new THREE.Vector2();
this.theta = 0;
this.orientation = new THREE.Quaternion();
}
TouchPanner.prototype.getOrientation = function() {
this.orientation.setFromEulerXYZ(0, 0, this.theta);
return this.orientation;
};
TouchPanner.prototype.resetSensor = function() {
this.theta = 0;
};
TouchPanner.prototype.onTouchStart_ = function(e) {
// Only respond if there is exactly one touch.
// Note that the Daydream controller passes in a `touchstart` event with
// no `touches` property, so we must check for that case too.
if (!e.touches || e.touches.length != 1) {
return;
}
this.rotateStart.set(e.touches[0].pageX, e.touches[0].pageY);
this.isTouching = true;
};
TouchPanner.prototype.onTouchMove_ = function(e) {
if (!this.isTouching) {
return;
}
this.rotateEnd.set(e.touches[0].pageX, e.touches[0].pageY);
this.rotateDelta.subVectors(this.rotateEnd, this.rotateStart);
this.rotateStart.copy(this.rotateEnd);
// On iOS, direction is inverted.
if (videojs.browser.IS_IOS) {
this.rotateDelta.x *= -1;
}
var element = document.body;
this.theta += 2 * Math.PI * this.rotateDelta.x / element.clientWidth * ROTATE_SPEED;
};
TouchPanner.prototype.onTouchEnd_ = function(e) {
this.isTouching = false;
};
export default TouchPanner;