setLoop not working in react-360
I am trying to add an event for when my 360 video is completed so I can redirect the user somewhere else. To accomplish this I need to set my video to not loop and add an event handler for this.
The video should be set to not loop as stated int he documentation. However when I use setLoop(false). The player doesn't seem to get effected and the video loops anyways.
Heres my full code: `// This file contains the boilerplate to execute your React app. // If you want to modify your application's content, start in "index.js"
import {Math as VRMath, ReactInstance, Surface, AppRegistry} from 'react-360-web'; // import {Environment, NativeModules, staticResourceURL} from 'react-360'; // const {VideoModule} = NativeModules;
function init(bundle, parent, options = {}) {
const hvPanel = new Surface(300, 300, Surface.SurfaceShape.Flat);
//see which keys are down
var keys = {};
window.onkeyup = function(e) { keys[e.keyCode] = false; }
window.onkeydown = function(e) { keys[e.keyCode] = true; }const cameraDirection = [0, 0, -1]; var isPlaying = true; var TravelledY = 0; var movingVert = false; var movingHorizLeft = false;
const r360 = new ReactInstance(bundle, parent, { // Add custom options here fullScreen: true, frame: () => { const cameraQuat = r360.getCameraQuaternion(); cameraDirection[0] = 0; cameraDirection[1] = 0; cameraDirection[2] = -1;
// cameraDirection will point out from the view of the camera,
// we can use it to compute surface angles
VRMath.rotateByQuaternion(cameraDirection, cameraQuat);
const cx = cameraDirection[0];
const cy = cameraDirection[1];
const cz = cameraDirection[2];
const horizAngle = Math.atan2(cx, -cz);
const vertAngle = Math.asin(cy / Math.sqrt(cx * cx + cy * cy + cz * cz));
hvPanel.setAngle(horizAngle, vertAngle);
//////////////////////////////////////////////////////////////////
///////////////////////////// WASD ///////////////////////////////
//////////////////////////////////////////////////////////////////
//W
if(keys[87]){
console.log('W');
var tempY = TravelledY + 0.02;
if(!(tempY >= 1.6)){
var quatToMultiply = [0,0,0,1];
VRMath.setQuatFromEuler(quatToMultiply,0.02,0,0);
TravelledY += 0.02;
VRMath.quaternionMultiply(r360._cameraQuat,quatToMultiply);
}
}
//A
if(keys[65]){
var quatToMultiply = [0,0,0,1];
movingHorizLeft = true;
VRMath.setQuatFromEuler(quatToMultiply,0,0.02,0);
VRMath.quaternionMultiply(quatToMultiply,r360._cameraQuat);
r360._cameraQuat = quatToMultiply;
}
//S
if(keys[83]){
var tempY = TravelledY - 0.02;
if(!(tempY <= -1.6)){
var quatToMultiply = [0,0,0,1];
VRMath.setQuatFromEuler(quatToMultiply,-0.02,0,0);
TravelledY -= 0.02;
VRMath.quaternionMultiply(r360._cameraQuat,quatToMultiply);
}
}
//D
if(keys[68]){
console.log('D');
var quatToMultiply = [0,0,0,1];
VRMath.setQuatFromEuler(quatToMultiply,0,-0.02,0);
VRMath.quaternionMultiply(quatToMultiply,r360._cameraQuat);
r360._cameraQuat = quatToMultiply;
}
//////////////////////////////////////////////////////////////////
///////////////////////////// ARROWS /////////////////////////////
//////////////////////////////////////////////////////////////////
//UP
if(keys[38]){
console.log('UP');
var tempY = TravelledY + 0.02;
if(!(tempY >= 1.6)){
var quatToMultiply = [0,0,0,1];
VRMath.setQuatFromEuler(quatToMultiply,0.02,0,0);
TravelledY += 0.02;
VRMath.quaternionMultiply(r360._cameraQuat,quatToMultiply);
}
}
//DOWN
if(keys[40]){
console.log('DOWN');
var tempY = TravelledY - 0.02;
if(!(tempY <= -1.6)){
var quatToMultiply = [0,0,0,1];
VRMath.setQuatFromEuler(quatToMultiply,-0.02,0,0);
TravelledY -= 0.02;
VRMath.quaternionMultiply(r360._cameraQuat,quatToMultiply);
}
}
//LEFT
if(keys[37]){
console.log('LEFT');
var quatToMultiply = [0,0,0,1];
VRMath.setQuatFromEuler(quatToMultiply,0,0.02,0);
//VRMath.quaternionMultiply(r360._cameraQuat,quatToMultiply);
VRMath.quaternionMultiply(quatToMultiply,r360._cameraQuat);
r360._cameraQuat = quatToMultiply;
}
//RIGHT
if(keys[39]){
console.log('RIGHT');
var quatToMultiply = [0,0,0,1];
VRMath.setQuatFromEuler(quatToMultiply,0,-0.02,0);
VRMath.quaternionMultiply(quatToMultiply,r360._cameraQuat);
r360._cameraQuat = quatToMultiply;
}
},
...options,
}); //const player = r360.compositor.createVideoPlayer('myplayer'); // Set the video to be played, and its format //player.setSource('G:/CAPP-Natural-Gas-Assets/TestAssets/Test.mp4', '2D'); // Render your app content to the default cylinder surface
// Creating a Video Player const player = r360.compositor.createVideoPlayer('myplayer'); // Set the video to be played, and its format player.setSource('MY_VIDEO_LINK.mp4' , '3DTB'); // To play a video as your background, reference it by its unique id r360.compositor.setBackgroundVideo('myplayer'); player.setLoop(false);
const videoEventhandle = (e) => { console.log('------------Video Event----------\n', e); }
const videoEndedEventhandle = (e) => { console.log('HUEHUEHUHE ENDED BBRROOOOOOOOOOOOOOO'); }
var x; var y; document.addEventListener("mousedown", function(){ x = event.clientX; // Get the hori coord y = event.clientY; // Get the vert coord var coor = "X coords: " + x + ", Y coords: " + y; console.log(coor); console.log('MouseDown'); //mousedown = true; });
document.addEventListener("mouseup", function(){ var x1 = event.clientX; // Get the hori coord var y1 = event.clientY; // Get the vert coord var coor = "X coords: " + x1 + ", Y coords: " + y1; console.log(coor); //mousedown = false; var didClick = true; if(Math.abs(x - x1) > 5){ didClick = false; } if(Math.abs(y - y1) > 5){ didClick = false; }
if(didClick){
console.log('CLICK');
if(isPlaying){
player.pause('myplayer');
player.setLoop(false);
isPlaying = false;
hvPanel.resize(300, 300);
} else {
player.setMuted(false);
player.play('myplayer');
hvPanel.resize(0, 0);
isPlaying = true;
player.setLoop(false);
}
}
console.log('MOUSE UP');
}); // r360.registerComponent('Hello360', () => hvPanel); player._element.addEventListener('ended', videoEventhandle, true); r360.renderToSurface(r360.createRoot('PausePanel'), hvPanel); //r360.renderToSurface(r360.createRoot('Hello360'), hvPanel);
//r360.renderToSurface(r360.createRoot('Hello360'), pausePanel); //player._element.addEventListener('click', videoEventhandle, true); //player._element.addEventListener('onEnded', videoEndedEventhandle, true);
var myVar = setInterval(myTimer, 1000);
function myTimer() { console.log('HUEHUEHUEHUHEUHEUHE'); player.setLoop(false); } } window.React360 = {init}; ` This is super odd as the player.play('myplayer') and player.pause('myplayer') work perfectly. Is there something I am missing when it comes to looping?
On another note my video ended event handler is not working either. Any help with that too would be greatly appreciated.
player._element.addEventListener('ended', videoEventhandle, true); const videoEventhandle = (e) => { console.log('------------Video Event----------\n', e); }
Additional Information
- 'react-360' package version: [email protected]
- 'react-360-web' package version: [email protected]
- Operating System: Windows 10
- Browser: Chrome 70.0.3538.67
- VR Device: Out of VR
Source: facebookarchive/react-360