janusweb 1.5.56 → 1.7.1

package/media/assets/webui/apps/locomotion/teleporter.js

@@ -1,8 +1,15 @@
+/*
+ * for room-specific teleport sound use:
+ *
+ * <room teleport_sound_id="mysound" ...>
+ *
+ */
+
 janus.registerElement('locomotion_teleporter', {
   active: false,
   longpresstime: 500,
   deadzone: 5,
-  xrplayer: null,
+  xrplayer: null, // *TODO* use janus.engine.client.xrplayer instead (and allow desktop too)
   linesegments: 100,
 
   create() {
@@ -102,7 +109,13 @@ janus.registerElement('locomotion_teleporter', {
     });
     player.head.add(this.shroud._target);
     this.particles.particle_vel = V(-.4, 0, -.4); // FIXME - particle velocity isn't being set on spawn
-    this.sound = room.createObject('Sound', { id: 'teleport2' }, this);
+
+    let locomotion = janus.ui.apps.default.apps.locomotion;
+    let asseturl = locomotion.resolveFullURL('./locomotion-assets.json');
+    fetch(asseturl).then(res => res.json()).then(assetlist => {
+      this.assetpack = elation.engine.assets.loadJSON(assetlist, locomotion.resolveFullURL('./'));
+      this.sound = room.createObject('Sound', { id: room.teleport_sound_id || 'button-teleport' }, this);
+    })
 
     this.disableCursor();
     window.addEventListener('mousemove', this.handleMouseMove);
@@ -133,13 +146,15 @@ janus.registerElement('locomotion_teleporter', {
     });
     this.activateControlContext('teleporter');
 
-    //room.addEventListener('mousedown', (ev) => this.handleMouseDown(ev));
-    //room.addEventListener('mouseup', (ev) => this.handleMouseUp(ev));
+    // emulated mouse-events (via webxr handtracking e.g.)
+    room.addEventListener('mousemove', (ev) => this.handleMouseMove(ev));
+    room.addEventListener('mousedown', (ev) => this.handleMouseDown(ev));
+    room.addEventListener('mouseup', (ev) => this.handleMouseUp(ev));
     elation.events.add(janus._target, 'room_change', (ev) => this.handleRoomChange(ev));
   },
   update() {
     if (this.active) {
-      let hand = this.xrplayer.trackedobjects['hand_' + this.teleporthand];
+      let hand = this.xrplayer ? this.xrplayer.trackedobjects['hand_' + this.teleporthand] : null
       let startpoint,
           segments = this.linesegments,
           duration = .25,
@@ -152,11 +167,13 @@ janus.registerElement('locomotion_teleporter', {
       if (hand) {
         startpoint = hand.pointer.localToWorld(V(0, 0, 0));
         v0 = hand.pointer.localToWorld(V(0, 0, -speed)).sub(startpoint);
+        hand.teleportPos = hand.teleportPos || v0
       } else {
         startpoint = player.head.localToWorld(V(0,0,0));
         v0 = player.head.localToWorld(V(0,0,-speed)).sub(startpoint);
         return; // Head-locked teleporter is awkward, do we really still support this?
       }
+
       let i = 0,
           p0 = startpoint.clone(),
           dir = v0.clone().normalize();
@@ -181,6 +198,8 @@ janus.registerElement('locomotion_teleporter', {
             this.pos = player.worldToLocal(hit.point);
             this.localToWorld(this.particles.emitter_pos.set(0,0,0));
             this.updateTeleportAngle();
+            // track movement to cancel longpresstimer
+            if( hand ) hand.teleportPos = hand.teleportPos || this.pos.clone()
           }
           laserpoints[i * 2].copy(p0);
           laserpoints[i * 2 + 1].copy(p1);
@@ -231,7 +250,6 @@ janus.registerElement('locomotion_teleporter', {
       if (len > .8) {
         this.updateTeleportAngle();
       } else if (len < .01) {
-        this.showShroud();
         this.teleport();
         this.teleportactive = false;
         this.teleporthand = false;
@@ -262,16 +280,23 @@ janus.registerElement('locomotion_teleporter', {
 
     }
   },
-  teleport() {
+  teleport(mouse) {
     //if (!room.teleport) return;
     let pos = player.localToWorld(this.pos.clone());
     pos.y += player.fatness; // FIXME - This accounts for wonky player sphere collider, when we switch to a capsule we won't need it
     player.pos = pos;
     player.vel = V(0,0,.01); // "wake up" physics engine
-    player.angular.set(0,0,0);
-    let playerangle = Math.atan2(this.pos.x, this.pos.z);
-    console.log('Teleport player', pos, playerangle);
-    this.xrplayer.orientation._target.setFromEuler(new THREE.Euler(0, this.teleportangle - playerangle, 0));
+    console.log('Teleport player', pos);
+    this.showShroud();
+    if( this.sound ){
+      this.sound.pos = pos;
+      this.sound.play();
+    }
+    if( this.xrplayer && this.teleportangle && !mouse){
+      player.angular.set(0,0,0);
+      let playerangle = Math.atan2(this.pos.x, this.pos.z);
+      this.xrplayer.orientation._target.setFromEuler(new THREE.Euler(0, this.teleportangle - playerangle, 0));
+    }
   },
   updateTeleportAngle() {
     let controls = this.activecontrols;
@@ -282,27 +307,28 @@ janus.registerElement('locomotion_teleporter', {
   handleMouseDown(ev) {
     if (!room.teleport) return;
     if (ev.button == 0 && (player.enabled || janus.hmd)) {
+      if( ev.inputSourceObject && this.xrplayer ){ // translate webxr emulated mousedown event 
+        this.teleporthand = ev.inputSourceObject.device.handedness
+        let hand = this.xrplayer.trackedobjects['hand_' + this.teleporthand];
+        if( hand ) hand.teleportPos = false 
+      }
       if (!this.longpresstimer) {
-        //this.longpresstimer = setTimeout(() => { console.log('timer fired'); this.enableCursor(); }, this.longpresstime);
+        this.longpresstimer = setTimeout(() => { console.log('timer fired'); this.enableCursor(); }, this.longpresstime);
         this.mousediff = [0,0];
-      }
-      //this.active = true;
+      }else this.cancelLongPress()
     }
   },
   handleMouseMove(ev) {
     if (!room.teleport) return;
-    if (this.longpresstimer) {
-      this.mousediff[0] += ev.movementX;
-      this.mousediff[1] += ev.movementY
-      var distance = Math.sqrt(this.mousediff[0] * this.mousediff[0] + this.mousediff[1] * this.mousediff[1]);
-      if (distance > this.deadzone) {
-        clearTimeout(this.longpresstimer);
-        this.longpresstimer = false;
-      }
-    }
+    //if (this.longpresstimer) {
+    //  this.mousediff[0] += ev.movementX;
+    //  this.mousediff[1] += ev.movementY
+    //  var distance = Math.sqrt(this.mousediff[0] * this.mousediff[0] + this.mousediff[1] * this.mousediff[1]);
+    //  if (distance > this.deadzone) this.cancelLongPress()
+    //}
   },
   handleTouchMove(ev) {
-    if (!room.teleport) return;
+    if (!room.teleport || !this.active) return;
     if (this.longpresstimer) {
       var touch = ev.changedTouches[0];
 
@@ -315,9 +341,7 @@ janus.registerElement('locomotion_teleporter', {
       }
       this.lasttouch = [touch.clientX, touch.clientY];
       var distance = Math.sqrt(this.mousediff[0] * this.mousediff[0] + this.mousediff[1] * this.mousediff[1]);
-      if (distance > this.deadzone) {
-        clearTimeout(this.longpresstimer);
-      }
+      if (distance > this.deadzone) this.cancelLongPress()
       if (this.active) {
         ev.stopPropagation();
         ev.preventDefault();
@@ -325,42 +349,50 @@ janus.registerElement('locomotion_teleporter', {
     }
   },
   handleMouseUp(ev) {
-    //if (!room.teleport) return;
-    if (this.longpresstimer) {
-      clearTimeout(this.longpresstimer);
-      this.longpresstimer = false;
-    }
-    if (this.active) {
-/*
-      player.pos = this.pos;
-      this.sound.pos = this.pos;
-      this.sound.play();
-*/
-      this.showShroud();
-      this.teleport();
-    }
-    this.disableCursor();
+    if (!room.teleport) return;
+    if (this.teleportactive) {
+      this.teleport(true);
+      this.active = false
+      this.teleportactive = false;
+      this.teleporthand = false;
+      this.disableCursor();
+    }else if( this.longpresstimer ) this.disableCursor();
   },
   enableCursor() {
     if (!room.teleport) return;
+    if( this.xrplayer ){
+      let hand = this.xrplayer.trackedobjects['hand_' + this.teleporthand];
+      if( hand ) hand.pointer.laser.visible = false // prevent (portal)clicks
+    }
+    this.active = true;
+    this.teleportactive = true;
     this.visible = true;
     this.particles.resetParticles();
     this.particles.visible = true;
     if (this.laser.room !== room._target) room.appendChild(this.laser);
     if (this.particles.room !== room._target) room.appendChild(this.particles);
     this.laser.visible = true;
-    this.active = true;
     this.particles.start();
   },
   disableCursor() {
+    if( this.xrplayer ){
+      let hand = this.xrplayer.trackedobjects['hand_' + this.teleporthand];
+      if( hand ) hand.pointer.laser.visible = true // restore original laser 
+    }
+    this.teleportactive = false;
     this.visible = false;
     this.particles.visible = false;
     this.laser.visible = false;
     this.active = false;
     this.particles.stop();
+    this.cancelLongPress()
   },
   showShroud() {
     this.shroud.visible = true;
     this.shroud.opacity = 1;
+  },
+  cancelLongPress(){
+    clearTimeout(this.longpresstimer);
+    this.longpresstimer = false
   }
 });

package/media/assets/webui/apps/navigation/navigation.js

@@ -391,7 +391,7 @@ elation.elements.define('janus.ui.urlbar', class extends elation.elements.ui.pan
   handleAccept(ev) {
     var url = this.input.value;
     if (url.length > 0) {
-      if (url.indexOf(':') == -1) {
+      if (url.indexOf(':') == -1 && !url.match(/^\.\//) ) {
         url = 'http://' + url;
       }
       if (ev.altKey) {
@@ -408,6 +408,11 @@ elation.elements.define('janus.ui.urlbar', class extends elation.elements.ui.pan
     }
   }
   handleBlur(ev) {
+    // enter-key on Quest devices (onscreen keyboards) is not emitted (blur-event instead)
+    // https://developers.meta.com/horizon/documentation/web/webxr-keyboard/
+    if (navigator.userAgent.indexOf('OculusBrowser') != -1) {
+      this.handleAccept({altKey:true}) // get straight to it
+    }
     setTimeout(() => {
       this.suggestions.hide();
     }, 100);

package/media/assets/webui/apps/xrfragment/level0-sidecarfile.js

@@ -0,0 +1,308 @@
+/* XR URI Fragments spec (https://xrfragment.org)
+ *
+ * level0 sidecar files as per the XR URI Fragments spec
+ * https://xrfragment.org/#sidecar%20files
+ * 
+ * NOTE: you can also load sidecarfiles in a roomscript manually:
+ *
+ *       elation.events.add(null, 'room_load_complete', function(e){
+ *         if( room?.sidecarfile ) room.sidecarfile.load()
+ *       })
+ */
+
+elation.require([], function() {
+
+  elation.extend('janusweb.sidecarfile', class {
+    constructor(object) {
+      this.scene     = elation.engine.instances.default.systems.world.scene['world-3d'] 
+      this._object   = object
+      this.extension = /\.(gltf|glb|dae)$/
+      this.extensionXRF = /\.xrf\./ 
+      if( room.url.match(this.extension) && this.isXRF(this.hideSystemFolder) ){
+        this.load()
+      }
+    }
+
+    load(){
+      this.cleanup()
+      this.loadWebVTT() // https://xrfragment.org/#sidecar%20files
+      this.loadSound()  // https://xrfragment.org/#sidecar%20files
+      this.initStartButton()
+      this.initSubtitle()
+    }
+
+    hideSystemFolder(o){
+      // https://xrfragment.org/#system%20folders
+      if(o.name[0] == '_'){ 
+        o.visible = false
+        o.pickable = false
+      }
+    }
+
+    isXRF(cb){
+      // for XRF heuristics see https://xrfragment.org/#%F0%9F%93%9C%20level0%3A%20File
+      let heuristic = room.url.match(this.extensionXRF) 
+      this.scene.traverse( (o) => {
+        if( o.userData?.href )  heuristic = true // has XRF hyperlink
+        if( o.name[0] == '_' )  heuristic = true // has XRF system folder 
+      })
+      return heuristic
+    }
+
+    loadSound(){ // https://xrfragment.org/#sidecar%20files
+      room.removeObject('xrf_audio')
+      const audio     = room.url.replace(this.extension,'.ogg') 
+      room.loadNewAsset("sound", {id:"xrf_audio", src:audio,proxy:false})
+      this.sound = room.createObject('sound',{ id: "xrf_audio", js_id: 'xrf_audio', loop:true })
+    }
+
+    loadWebVTT(){ // https://xrfragment.org/#sidecar%20files
+      const webvtt = room.url.replace(this.extension,'.vtt') 
+      fetch( webvtt )
+      .then( (res)  => res.text() ) 
+      .then( (webvtt) => {
+        this.webvtt = this.parseWEBVTT(webvtt) 
+      })
+      .catch( () => false ) // no biggy (optional)
+    }
+
+    initStartButton(){
+      this.btn = room.createObject('object',{
+        id: 'cube',
+        js_id: 'btnstart',
+        pos: player.localToWorld( V(0,1.8,-1) ),
+        scale: '0.5 0.125 0.01',
+        col: '0.5 0.5 0.5',
+        lighting:false,
+        sync: true,
+        billboard: 'y',
+        collision_id: 'cube'
+      })
+      const label = this.btn.createObject('text',{
+        text: 'Start experience',
+        lighting:false,
+        col: '0 0 0',
+        pos: '0 -0.15 0.5',
+        scale: '1.2 5 1.2',
+      })
+      this.btn.addEventListener('click', () => this.start() )
+      this.positionStartButton()
+    }
+
+    positionStartButton(){
+      setTimeout( () => {
+        this.btn.pos = player.localToWorld( V(0,1.8,-1) )
+      }, 500)
+    }
+
+    initSubtitle(){
+      this.subtitle = player.createObject('paragraph',{
+        js_id: 'subtitle',
+        pos: '0 1.7 -1.5',
+        lighting: false,
+        pickable: false,
+        css: `.paragraphcontainer{ 
+          background: transparent;
+          text-align:center;
+          height:100%; 
+          width:100%; 
+          display: flex;
+          align-items: center;
+          font-size:55px; 
+          line-height:55px;
+          text-shadow: 0px 0px 2px #FFFF;
+          color:black; 
+        }
+        .subtitle{
+          width:100%;
+        }
+        .loading{
+          background:#FFF;
+          display:inline-block;
+          font-size:22px;
+          font-family: monospace;
+          line-height:30px;
+          padding:20px;
+          border-radius:15px;
+        }
+        `,
+        text_col: '1 1 1',
+        back_col: '1 1 1'
+      })
+      this.subtitle.objects['3d'].depthWrite = false 
+      this.subtitle.objects['3d'].depthTest = false 
+      this.subtitle.objects['3d'].renderOrder = 100 
+      this.subtitle.setHTML = (html) => {
+        this.subtitle.visible = true
+        this.subtitle.text = `<div class='subtitle'>${html}</div>`
+      }
+    }
+
+    update(){
+      if( this.update.id || !this.playing ) return // throttle
+      const advance = () => {
+        if( !this?.sound?.timeoffset && this?.sound?.audio?.context){ 
+          this.sound.timeoffset = this.sound.audio.context.currentTime
+        }
+        if( this?.sound?.timeoffset != undefined &&
+            this.webvtt?.items[ this.webvtt?.i ] && 
+            this?.sound?.playStarted             && 
+            this?.sound?.audio?.context?.currentTime ){
+
+          const time = this.sound.audio.context.currentTime - this.sound.timeoffset;
+          let item = this.webvtt.items[ this.webvtt.i ]
+          if( !item.seen && time > item.start.ts ){
+            this.subtitle.setHTML(`
+              ${ item.who ? `<b>${item.who}:</b><br/>` : '' }
+              ${item.text.replace(/\n/g,'<br/>')}
+            `)
+            if( room.hyperlink && item.href && !item.seen ){
+              room.hyperlink.execute(item.href, {portalActivateDelay:6000})
+            }
+            item.seen = true
+          }
+          if( item.seen && time > item.stop.ts ){
+            this.subtitle.visible = false 
+            this.webvtt.i++
+          }
+        }
+        this.update.id = false 
+      }
+      this.update.id = setTimeout( () => advance(), 100 ) // throttle 
+    }
+
+    // naive webvtt parser
+    parseWEBVTT(text) {
+      let i = 0;
+      const WEBVTT_HEADER = /^WEBVTT/i;
+      const TIME_LINE     = /^([0-9:.]+)\s+-->\s+([0-9:.]+)(?:\s+(.+))?$/;
+      const WHO           = /^<v ([^>]+)>/
+      const HREF          = / href:([^ ]+)/
+      const result        = { type: "WEBVTT", items: [], i: 0 };
+      const lines         = text.split(/\r?\n/)
+                                .map( (line) => line.trim() )
+      const vttToSeconds  = (vttString) => {
+        const parts = vttString.split(':');
+        let hours = 0, minutes = 0, secondsWithMs;
+        if (parts.length === 3) { [hours, minutes, secondsWithMs] = parts; }
+        else { [minutes, secondsWithMs] = parts; } // Format is MM:SS.mmm
+        const [seconds, milliseconds] = secondsWithMs.split('.');
+        return (
+          (parseInt(hours) * 3600) +
+          (parseInt(minutes) * 60) +
+          (parseInt(seconds) * 1) +
+          parseInt(milliseconds || 0)
+        );
+      }
+
+      // Skip the WEBVTT header line
+      if (WEBVTT_HEADER.test(lines[i].trim())) i++
+      while (i < lines.length) {
+        if ( lines[i] === "") { i++; continue; } // Skip empty lines
+        // Match cue timing line
+        const timeMatch = lines[i].match(TIME_LINE);
+        if (timeMatch) {
+          const item = {
+            start: {str:timeMatch[1], ts: vttToSeconds(timeMatch[1]) },
+            stop:  {str:timeMatch[2], ts: vttToSeconds(timeMatch[2]) },
+            href:  lines[i].match(HREF) ? lines[i].match(HREF)[1] : false,
+            who: false,
+            text: ""
+          };
+          i++;
+          const speakerMatch = lines[i]?.match(WHO);
+          if (speakerMatch) { 
+            item.who = speakerMatch[1]; 
+            lines[i] = lines[i].replace(WHO,''); 
+          }
+          // Collect all text lines until next empty line
+          while (i < lines.length && lines[i].trim() !== "") {
+            item.text += (item.text ? "\n" : "") + lines[i] ;
+            i++;
+          }
+
+          result.items.push(item);
+        } else { i++; }
+      }
+      return result;
+    }
+
+    start(){
+      // reset subtitles
+      if( this?.webvtt?.items ){
+        this.webvtt.items.map( (item) => item.seen = undefined )
+        this.webvtt.i = 0;
+      }
+      // start sound
+      this.sound.pos = '0 0 0'
+      if( this.sound.isPlaying ) this.sound.stop()
+      this.sound.timeoffset = undefined
+      this.sound.play()
+      // ensure subtitle
+      this.subtitle.visible = false 
+      player.add(this.subtitle)
+      // hide button 
+      this.btn.visible = false
+      this.btn.pickable = false
+      // mark playing
+      this.playing = true
+    }
+
+
+    stop(){
+      this.playing = false
+      this.update.id = false
+      this.subtitle.visible = false 
+      this.subtitle.text = ''
+      this.btn.visible = true
+      this.btn.pickable = true
+    }
+
+    cleanup(){
+      const deleteJsId = (js_id) => {
+        for( let i in player.children ) 
+          if( player.children[i].js_id == js_id )
+            player.remove( player.children[i] )
+      }
+      deleteJsId('subtitle')
+    }
+
+  })
+});
+
+xrf_install_sidecarfiles = function(){
+  if( !room.objects?.scene?.modelasset?.loaded ) {
+    return setTimeout( xrf_install_sidecarfiles, 300 ) 
+  }
+  if( !room.sidecarfile   ) room.sidecarfile = new elation.janusweb.sidecarfile(room);
+  else{
+    room.sidecarfile.positionStartButton() // wait for user being spawned
+    room.sidecarfile.stop()
+  }
+}
+
+xrf_install_sidecarfiles()
+
+elation.events.add(null, 'room_load_complete', xrf_install_sidecarfiles )
+elation.events.add(null, 'room_enable',        xrf_install_sidecarfiles )
+elation.events.add(null, 'janusweb_script_frame', function(){
+  if( room?.sidecarfile ) room.sidecarfile.update()
+})
+elation.events.add(null, 'room_load_start', function(e){
+  if( !e.data ) return
+  if( room?.sidecarfile?.subtitle ) room.sidecarfile.subtitle.setHTML(`<div class='loading'>🔗 ${e.data.name}<br/><br/>please wait..</div>`)
+})
+
+elation.events.add(null, 'room_disable', function(){
+  if( room?.sidecarfile?.subtitle ) room.sidecarfile.stop()
+})
+
+// some convenience WebVTT cue settings => room function mappings 
+// href:#fadeAudioOut&spawnhere => room.fadeAudioOut()
+// href:#myfunc=3               => room.myfunc(3)
+elation.events.add(null, 'href', function(e){
+  if( room?.hyperlink ){
+    const {url,hash} = room.hyperlink.getUrlObject(e.data.href)
+    hash.forEach( (v,k) => { if( room[k] ) room[k](v) })
+  }
+})