janusweb 1.7.0 → 1.7.2

package/scripts/janusparagraph.js

@@ -1,9 +1,43 @@
-elation.require(['janusweb.janusbase'], function() {
+/*
+ * <paragraph> text-to-texture translator. The builtin XMLtranslator allows:
+ *
+ *  1. inline html             : <paragraph><![CDATA[ <b>hello world</b> ]]></paragraph>
+ *  2. inline html (partial)   : <paragraph selector="span"><![CDATA[ <b>hello <span>world</span></b> ]]></paragraph>
+ *  3. external url            : <paragraph url="https://janusxr.org"/>
+ *  4. external url (partials) : <paragraph url="https://janusxr.org" selector=".infoText"/>
+ *  5. janusroom container html: <paragraph selector=".someclass"/>
+ *  6. janusroom container xml : <paragraph selector="tag subtag title"/>
+ *  7. RSS                     : <paragraph url="https://my.org/foo.rss" selector="item description"/>
+ *  8. XML                     : <paragraph url="https://my.org/bar.xml" selector="title"/>
+ *  9. any data- or selector-format via 'paragraph_translator' event
+ *
+ *  EXAMPLE TRANSLATOR:
+ *
+ *     room.addEventListener("paragraph_translator", function(e){
+ *       const {translator,paragraph} = e.detail
+ *       // now you can override the default translator
+ *       translator.fetch     = async (url) => this.text = "a response"    // my custom fetch function
+ *       translator.translate = async (   ) => ["<h1>head</h1>",this.text] // my x2html translator
+ *     }
+ *
+ *  NOTES:
+ *  1. By default, selectors are done via `document.querySelectorAll`
+ *  2. in case of multiple results:
+ *    2.1 clicking the paragraph with cycle through them
+ *    2.2 setting cycle="3000" allows for (2sec per item) slideshows
+ *    2.3 setting `rooms.objects.myparagraph.index++` cycles to next item
+ *  3. width/height-attributes offers finer control of texture size
+ *  4. ttl-attributes allows finer control of webrequest-cache (default 2 mins)
+ *  5. setting `rooms.object.myparagraph.selector = "#section2"' allows for statemanagement
+ *  6. separation of `this.text` (for JML) and `this.html` (for texture) is necessary (to not break JML/glb exports)
+ */
+
+elation.require(['janusweb.janusbase','janusweb.translators.paragraph.html-xml-rss'], function() {
   elation.component.add('engine.things.janusparagraph', function() {
     this.postinit = function() {
       elation.engine.things.janusparagraph.extendclass.postinit.call(this);
       this.defineProperties({
-        text: {type: 'string', default: '', set: this.toInlineHTML },
+        text: {type: 'string', default: '', set: this.textToHTML },
         font_size: {type: 'integer', default: 16, set: this.updateTexture},
         text_col: {type: 'color', default: 0x000000, set: this.updateTexture},
         back_col: {type: 'color', default: 0xffffff, set: this.updateTexture},
@@ -18,8 +52,33 @@ elation.require(['janusweb.janusbase'], function() {
         shadow: { type: 'boolean', default: true, set: this.updateMaterial },
         shadow_receive: { type: 'boolean', default: true, set: this.updateMaterial, comment: 'Receive shadows from self and other objects' },
         shadow_cast: { type: 'boolean', default: true, set: this.updateMaterial, comment: 'Cast shadows onto self and other objects' },
+        url: { type: 'string', default: '', set: this.fetchSource },
+        selector: { type: 'string', default: '', set: this.fetchSource },
+        index: { type: 'integer', default: 0, set: this.updateHTML },
+        cycle: {type: 'integer', default: 0, set: this.updateHTML },
+        width: { type: 'integer', default: 1024 },  
+        height: { type: 'integer', default: 1024 }, 
+        ttl: { type: 'integer', default: 120000, comment: 'expire texture/html after ms (default:2 mins)' }, 
       });
     }
+
+    this.paragraphs = [] // for cycle / partial purposes
+
+    this.textToHTML = function(){
+      // IMPORTANT: skip infinite loop  
+      if( this.html == this.text ) return 
+      if( this.text ){
+        if( this.html ){ // reset stuff 
+          this.url   = this.selector = '' 
+          this.cycle = this.indexes = 0;
+        }
+        this.fetchSource() // expect 'selector' not being set here 
+      }else{
+        this.html = ''
+        this.updateTexture()
+      } 
+    }
+
     this.createObject3D = function() {
       var material = this.createMaterial();
       var geo = new THREE.PlaneGeometry(2,2);
@@ -27,6 +86,14 @@ elation.require(['janusweb.janusbase'], function() {
       var mesh = new THREE.Mesh(geo, material);
       mesh.castShadow = this.shadow && this.shadow_cast;
       mesh.receiveShadow = this.shadow && this.shadow_receive;
+     
+      elation.events.add(this, 'click', () => {
+        if( this.indexes ){
+          this.index++
+          this.cycle = 0 // disable
+        }
+      })
+
       return mesh;
     }
     this.createForces = function() {
@@ -37,9 +104,9 @@ elation.require(['janusweb.janusbase'], function() {
     this.createMaterial = function() {
       var texture = this.createTexture();
       var sidemap = {
-        'back': THREE.FrontSide,
+        'back':  THREE.FrontSide,
         'front': THREE.BackSide,
-        'none': THREE.DoubleSide
+        'none':  THREE.DoubleSide
       };
       var matargs = {
         color: 0xffffff,
@@ -58,26 +125,28 @@ elation.require(['janusweb.janusbase'], function() {
     }
     this.createTexture = function() {
       this.canvas = document.createElement('canvas');
-      this.canvas.width = 1024;
-      this.canvas.height = 1024;
+      this.canvas.width = this.width;
+      this.canvas.height = this.height;
       this.texture = new THREE.Texture(this.canvas);
       this.texture.encoding = THREE.sRGBEncoding;
-      this.updateTexture();
+      if( this.text ) this.updateTexture();
       return this.texture;
     }
     this.updateTexture = function() {
       if (!this.canvas || !this.texture) return;
       var ctx = this.canvas.getContext('2d'),
           texture = this.texture;
-      this.canvas.width = 1024;
-      this.canvas.height = 1024;
+      this.canvas.width = this.width;
+      this.canvas.height = this.height;
+
       var text_col = '#' + this.text_col.getHexString(),
           back_col = 'rgba(' + (this.back_col.r * 255) + ', ' + (this.back_col.g * 255) + ', ' + (this.back_col.b * 255) + ', ' + this.back_alpha + ')';
       var basestyle = 'font-family: sans-serif;' +
                       'font-size: ' + this.font_size + 'px;' +
+                      'box-sizing: border-box;'  +
                       'color: ' + text_col + ';' +
                       'background: ' + (this.transparent ? 'transparent' : back_col) + ';' +
-                      'max-width: 1014px;' +
+                      `max-width: ${this.width}px;` +
                       'padding: 5px;';
 
       // We need to sanitize our HTML in case someone provides us with malformed markup.
@@ -92,6 +161,19 @@ elation.require(['janusweb.janusbase'], function() {
       content = content.replace(/<img(.*?)>/g, "<img$1 />");
 
       var styletag = '<style>.paragraphcontainer { ' + basestyle + '} .br { height: 1em; } .hr { margin: .5em 0; border: 1px inset #ccc; height: 0px; }';
+      styletag    += 'a { color:unset; text-decoration: none; }' // dont confuse users with nonclickable links
+
+
+
+      // hybrid 2D/3D styling: apply styles from container HTML if any
+      styletag += [ ...(new DOMParser)
+                       .parseFromString(room.fullsource,"text/html")
+                       .querySelectorAll("style[type=\"text/css\"]") 
+                  ]
+                  .map( (el) => el.innerText )
+                  .join("\n")
+
+
       if (this.css) {
         styletag += this.css;
       }
@@ -147,13 +229,19 @@ elation.require(['janusweb.janusbase'], function() {
           shadow: [ 'property', 'shadow' ],
           shadow_receive: [ 'property', 'shadow_receive' ],
           shadow_cast: [ 'property', 'shadow_cast' ],
+          url: [ 'property', 'url' ],
+          selector: [ 'property', 'selector' ],
+          index: ['property','index'],
+          cycle: ['property','cycle'],
+          width: ['property','width'],
+          height: ['property','height'],
+          ttl: ['property','ttl'],
         };
       }
       return this._proxyobject;
     }
 
     this.toInlineHTML = async function(){
-      this.html = this.text
       try{
         // find all img tags and capture src attributes
         const imgRegex = /<img[^>]*src=["'](?!data:)([^"']+)["']/gi;
@@ -171,19 +259,78 @@ elation.require(['janusweb.janusbase'], function() {
         });
         this.html = updatedHtml
       }catch(e){ console.error(e) } // continue when inlining failed
-      this.updateTexture()
     };
 
-    this.toDataURL = function(url){
-      const finalUrl = `${elation.engine.assets.corsproxy||''}${url}`
-      return fetch(finalUrl)
-      .then(response => response.blob())
-      .then(blob => new Promise((resolve, reject) => {
-        const reader = new FileReader()
-        reader.onloadend = () => resolve(reader.result)
-        reader.onerror = reject
-        reader.readAsDataURL(blob)
-      }))
+    this.toDataURL = async function(url){
+      const fullUrl  = this.room.getFullRoomURL(url)
+      const finalUrl = this.room.isLocal( fullUrl) ? url : `${elation.engine.assets.corsproxy||''}${url}`
+      return await this.useCache(url, async () => 
+        await fetch(finalUrl)
+        .then(response => response.blob())
+        .then(blob => new Promise((resolve, reject) => {
+          const reader = new FileReader()
+          reader.onloadend = () => resolve(reader.result)
+          reader.onerror = reject
+          reader.readAsDataURL(blob)
+        }))
+      )
+    }
+
+    this.fetchSource = async function(){
+      if( this.url && this.fetchSource.last == this.url ) return // avoid fake updates
+      this.fetchSource.last = this.url || this.fetchSource.last
+
+      let translator = {  // fallback translator for non-url content
+        translate: async ()    => [this.html],
+        fetch:     async (uri) => {
+          if( String(this.text).match(/^data:text/) ){  // support text data-uri's
+            return await window.fetch(this.text).then( (r) => r.text() )
+          }
+          return this.text || room.fullsource
+        }
+      }
+      // allow (via event) other scripts to select different translator based on url 
+      room.dispatchEvent({type:'paragraph_translator', detail:{ paragraph:this, translator }})
+      this.html = await translator.fetch.call(this, this.url || ' ')
+      await this.toInlineHTML()
+      this.paragraphs  = await translator.translate.apply(this)
+      await this.updateHTML()
+    }
+
+    this.useCache = async function(url, myFetch) {
+      const cache = elation.janusweb.urlcache = elation.janusweb.urlcache || {}
+      if (cache[url]) return cache[url];
+      const data = cache[url] = await myFetch();
+      setTimeout(() => delete cache[url], this.ttl); // default 2 mins TTL cleanup
+      return data;
+    },
+
+    this.autoRotateIndex = function(){
+      if( this.paragraphs.length > 1 ){
+        if( this.cycle == 0 ){
+          clearInterval(this.intervalId )
+          this.intervalId = false
+        }
+        if( !this.intervalId && this.cycle ){
+          this.intervalId = setInterval( () => {
+            this.index = (this.index+1) % this.indexes 
+            this.html = this.paragraphs[ this.index ]
+          }, this.cycle )
+        }
+      }
+    }
+
+    this.updateHTML = async function(html){
+      // skip uninited url content
+      if( !this.html && this.url ) return 
+      if( this.html ){ 
+        this.indexes     = this.paragraphs.length > 1 ? this.paragraphs.length : 1
+        this.html        = this.paragraphs[ this.index % this.indexes ]
+        if( !this.html || this.htmlLast == this.html ) return // skip fake updates
+        this.htmlLast = this.html
+        this.autoRotateIndex()
+        this.updateTexture()
+      }
     }
 
   }, elation.engine.things.janusbase);

package/scripts/janusxrplayer.js

@@ -412,7 +412,7 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
             this.buttonwaspressed = false;
             if (!this.menu.parent || this.menu.parent === this) {
               player.appendChild(this.menu);
-              player.worldToLocal(this.pointer.localToWorld(this.menu.pos.set(0.1,-0.07,-.2)));
+              player.worldToLocal(this.pointer.localToWorld(this.menu.pos.set(0,0,-.25)));
               this.menu.billboard = 'y';
             } else {
               //this.appendChild(this.menu);
@@ -656,9 +656,8 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
         }
       },
       handleRaycastEnter(ev) {
-        let proxyobj = ev.data.object
-        if( !proxyobj || !proxyobj?._target ) return
-        obj = proxyobj._target;
+        let proxyobj = ev.data.object,
+            obj = proxyobj._target;
         let oldactiveobject = this.activeobject;
         if (this.activeobject) {
           this.engine.client.view.proxyEvent({
@@ -724,7 +723,6 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
         this.engine.client.view.proxyEvent(evdata, evdata.element);
       },
       handleRaycastMove(ev) {
-        if( ! ev?.data?.intersection?.face?.normal ) return // skip those!
         this.updateLaserEndpoint(ev.data.intersection.point, ev.data.intersection.face.normal);
         if (this.activeobject) {
           let obj = this.activeobject.objects['3d'];
@@ -781,7 +779,7 @@ elation.require(['engine.things.generic', 'janusweb.external.webxr-input-profile
         }
       },
       handleSelect(ev) {
-        if (this.activeobject && this.laser.visible ) {
+        if (this.activeobject) {
           let obj = this.activeobject.objects['3d'];
           console.log('CLICK IT', this.activeobject);
           this.engine.client.view.proxyEvent({

package/scripts/room.js

@@ -3,11 +3,16 @@ elation.require([
      'engine.things.generic', 'engine.things.label', 'engine.things.skybox',
     'janusweb.object', 'janusweb.portal', 'janusweb.image', 'janusweb.video', 'janusweb.text', 'janusweb.janusparagraph',
     'janusweb.sound', 'janusweb.januslight', 'janusweb.janusparticle', 'janusweb.janusghost',
-    'janusweb.translators.bookmarks', 'janusweb.translators.reddit', 'janusweb.translators.error', 'janusweb.translators.blank', 'janusweb.translators.default', 'janusweb.translators.dat', 'janusweb.translators.janusvfs', 'janusweb.translators.xrfragments'
+    'janusweb.translators.bookmarks', 'janusweb.translators.reddit', 'janusweb.translators.error', 'janusweb.translators.blank', 'janusweb.translators.default', 'janusweb.translators.dat', 'janusweb.translators.janusvfs', 'janusweb.translators.xrfragments', 'janusweb.translators.peertube'
   ], function() {
   let roomTranslators = false;
   function initRoomTranslators(room) {
-    roomTranslators = {
+
+    room.translators = roomTranslators = {
+
+
+      '^peertube$': elation.janusweb.translators.peertube({janus: janus}),
+
       '^janus-vfs:': elation.janusweb.translators.janusvfs({janus: janus}),
       '^about:blank$': elation.janusweb.translators.blank({janus: janus}),
       '^bookmarks$': elation.janusweb.translators.bookmarks({janus: janus}),
@@ -15,7 +20,7 @@ elation.require([
       '^https?:\/\/(www\.)?reddit.com': elation.janusweb.translators.reddit({janus: janus}),
       '^error$': elation.janusweb.translators.error({janus: janus}),
       '.*\.(gltf|glb|dae)$': elation.janusweb.translators.xrfragments({janus: janus}),
-      '^default$': elation.janusweb.translators.default({janus: janus})
+      '^default$': elation.janusweb.translators.default({janus: janus}),
     }
   }
   elation.component.add('engine.things.janusroom', function() {
@@ -247,7 +252,8 @@ elation.require([
         orientation = spawnpoint.orientation;
       }
       var player = this.engine.client.player;
-      if (player.parent !== this) {
+      if( pos.equals(player.position) ) return // ignore 
+      if (player.parent.id !== this.id) {
         // Reparent player to the room if necessary
         this.appendChild(player.getProxyObject());
       }
@@ -298,16 +304,25 @@ elation.require([
               spawnpoint.orientation.multiply(node.orientation);
             }
             spawnpoint.orientation.multiply(new THREE.Quaternion().setFromEuler(new THREE.Euler(0, Math.PI, 0))); // Flip 180 degrees from portal orientation
-            break;
+            return spawnpoint;
           }
         }
-      } else if (this.urlhash) {
+      }
+      if (this.urlhash) {
         // XR Fragments deeplink spec (Level1: URL) https://xrfragment.org/#teleport%20camera
-        let obj = this.getObjectById(this.urlhash) || this.getObjectByDeepName(this.urlhash)
-        if (obj) {
-          obj.localToWorld(spawnpoint.position.set(0,0,0));
-          spawnpoint.orientation.setFromRotationMatrix(obj.objects['3d'].matrixWorld.lookAt(spawnpoint.position, obj.localToWorld(V(0,0,-1)), obj.localToWorld(V(0,1,0).sub(spawnpoint.position))));
-        }
+        // backwards-compat: pos-names are deprecated
+        let obj
+        new URLSearchParams( this.urlhash.replace(/pos=/,'') ).forEach( (v,name) => {
+          let obj = this.getObjectById(name) || this.getObjectByDeepName(name)
+          if (obj) {
+            obj.localToWorld(spawnpoint.position.set(0,0,0));
+            if( obj.type == 'PerspectiveCamera' ){
+              spawnpoint.position.y -= 1.6 // https://xrfragment.org/#teleport%20camera%20spawnpoint
+            }
+            spawnpoint.orientation.setFromRotationMatrix(obj.objects['3d'].matrixWorld.lookAt(spawnpoint.position, obj.localToWorld(V(0,0,-1)), obj.localToWorld(V(0,1,0).sub(spawnpoint.position))));
+          }
+        })
+        if( obj ) elation.events.fire({element: this, type: 'href', data: {href,opts}});
       }
       return spawnpoint;
     }
@@ -561,23 +576,28 @@ elation.require([
       this.debugwindow.show();
       this.debugwindow.center();
     }
-    this.load = function(url, baseurloverride) {
-      if (!url) {
-        url = this.properties.url;
-      } else {
-        this.properties.url = url;
-      }
-      var baseurl = baseurloverride;
+
+    this.getBaseUrl = function(url, baseurloverride){
+      let baseurl = baseurloverride;
       if (!baseurl) {
         if (url && url.match("://") && !this.baseurl) {
           baseurl = url.split('/');
           if (baseurl.length > 3) baseurl.pop();
           baseurl = baseurl.join('/') + '/';
         }
-        this.baseurl = baseurl || "";
+        return baseurl || document.location.origin + document.location.pathname;
       } else {
-        this.baseurl = baseurl;
+        return baseurl;
       }
+    }
+
+    this.load = function(url, baseurloverride) {
+      if (!url) {
+        url = this.properties.url;
+      } else {
+        this.properties.url = url;
+      }
+      this.baseurl = this.getBaseUrl(url,baseurloverride)
 
       this.jsobjects = {};
       this.cookies = {};
@@ -588,14 +608,7 @@ elation.require([
       this.setTitle('loading...');
 
       var proxyurl = this.corsproxy || '';
-
-      var fullurl = url;
-      if (fullurl[0] == '/' && fullurl[1] != '/') fullurl = this.baseurl + fullurl;
-      if (!fullurl.match(/^https?:/) && !fullurl.match(/^\/\//)) {
-        fullurl = self.location.origin + (fullurl[0] == '/' ? '' :'/') + fullurl;
-      } else if (!fullurl.match(/^https?:\/\/(localhost|127\.0\.0\.1)/) && fullurl.indexOf(document.location.origin) != 0) {
-        fullurl = proxyurl + fullurl;
-      }
+      var fullurl = this.getFullRoomURL(url, proxyurl )
 
       elation.events.fire({element: this, type: 'room_load_queued'});
 
@@ -1655,6 +1668,8 @@ elation.require([
         assetlist.push({
           assettype: 'shader',
           name: args.id,
+          shadertype: args.shadertype || 'default',
+          hasalpha: args.hasalpha,
           fragment_src: args.src,
           vertex_src: args.vertex_src,
           uniforms: args.uniforms,
@@ -2103,7 +2118,7 @@ elation.require([
       }
       var urls = [this.url];
       for (var i = 0; i < assets.length; i++) {
-        var url = assets[i].getFullURL();
+        var url = assets[i].getFullRoomURL();
         urls.push(url);
       }
       return urls;
@@ -2828,14 +2843,22 @@ console.log('dispatch to parent', event, this, event.target);
     this.handleDelayedSound = function(ev) {
       // TODO - implement some visual indicator that this room is trying to play sound but was temporarily blocked
     }
-    this.getFullRoomURL = function(url) {
-      if (!url) url = this.url;
-      if (url[0] == '/') {
-        url = this.baseurl.replace(/^(https?:\/\/[^\/]+)\/.*$/, '$1') + url;
-      } else if (!url.match(/:\/\//i)) {
-        url = this.baseurl + url;
+    this.getFullRoomURL = function(url, proxyurl) {
+      let fullurl = url;
+      if (fullurl[0] == '/' && fullurl[1] != '/'){ 
+        fullurl = this.baseurl.replace(/^(https?:\/\/[^\/]+)\/.*$/, '$1') + fullurl;
+      }else if (!fullurl.match(/^https?:/) && !fullurl.match(/^\/\//)) {
+        fullurl = this.baseurl + (
+                    fullurl.match(/^\.\//) ? fullurl.replace(/^\.\//,'')  // './index.html' e.g.
+                                           : fullurl 
+                  )
+      } else if (proxyurl && !this.isLocal(fullurl) ){
+        fullurl = proxyurl + fullurl;
       }
-      return url;
+      return fullurl
+    }
+    this.isLocal = function(url){
+      return url.match(/^https?:\/\/(localhost|127\.0\.0\.1)/) || url.indexOf(document.location.origin) == 0
     }
     this.dispose = function() {
       if (this.assetpack) {

package/scripts/translators/paragraph/html-xml-rss.js

@@ -0,0 +1,47 @@
+// this translator converts the following url-output to HTML:
+// * HTML
+// * XML
+// * RSS
+//
+// NOTE1: to not bloat the core-codebase please define custom translators 
+//       in assetscripts or webui apps. Thank you.
+//
+// NOTE2: 'this' is basically a paragraph janus object 
+
+(function(){
+
+  let XMLTranslator = {
+    fetch: async function(uri){
+      const uriExFragment = String(uri).replace(/#.*/,'')
+      const finalUrl = `${elation.engine.assets.corsproxy||''}${uriExFragment||''}`
+      return await this.useCache( finalUrl, async () => 
+        await fetch( finalUrl )
+        .then( (res) => res.text() )
+      )
+    },
+    translate: async function(){   // generic XML/RSS/HTML preprocessor [this.text to this.html]
+      if( !this.html ) return [""]
+      if( this.selector && typeof this.index != 'undefined' ){
+        const type      = this.html.match(/<(rss|feed)/) ? "text/xml" : "text/html"
+        const parser    = new DOMParser()
+        const xmlDoc    = parser.parseFromString( this.html, type)
+        let paragraphs  = [ ...xmlDoc.querySelectorAll(this.selector) ] // KiSS JML: CSS selectors level 1
+        if( !paragraphs.length ){
+          console.error(`paragraph: level1 css selector '${this.selector}' not matching anything`)
+        }
+        return paragraphs.map( (p) => type == 'text/xml' ? p.textContent : p.outerHTML )
+      }
+      return [this.html]
+    }
+  }
+
+  elation.events.add(null, 'paragraph_translator', function(e){
+    const {translator,paragraph} = e.detail
+    // now you can override the default translator
+    if( String(paragraph.url).match(/^http/) ){
+      translator.fetch     = XMLTranslator.fetch 
+    }
+    translator.translate = XMLTranslator.translate // boldly always set ourselfs as default
+  })
+
+})();

package/scripts/translators/peertube.js

@@ -0,0 +1,89 @@
+elation.require([], function() {
+  elation.component.add('janusweb.translators.peertube', function() {
+    this.init = function() {
+      this.description = "peertube website to 3D translator"
+    }
+    this.exec = function(args) {
+      return new Promise(elation.bind(this, function(resolve, reject) {
+
+        var room = this.room = args.room;
+
+        reject() // for now
+
+        this.setupEvents()
+        var datapath = elation.config.get('janusweb.datapath', '/media/janusweb');
+
+        var roomdata = {
+          assets: {
+            assetlist: [
+              // {assettype: 'model', name: 'scene', src: args.url},
+            ]
+          },
+          room: {
+            pos: [0,0,0],
+            xdir: "1 0 0",
+            zdir: "0 0 1",
+          },
+          object: [
+            // {id: 'scene', js_id: 0, pos: "0 0 0", xdir: "-1 0 0", zdir: "0 0 -1", lighting: "false"}
+          ],
+          link: []
+        };
+        resolve(roomdata);
+      }));
+    }
+
+    // translate XR Fragments microformat into JML
+    this.parseSource = async function(sourcecode, room){
+      this.room = room
+      const isJML = /<fireboxroom>[\s\S]*?<\/fireboxroom>/si;
+      const isPeertube         = /<meta\s+[^>]*property=['"]og:platform['"]\s+[^>]*content=['"]peertube['"][^>]*\/?>/si;
+      const isPeertubeVideo    = /<meta\s+[^>]*property=['"]og:type['"]\s+[^>]*content=['"]video['"][^>]*\/?>/si;
+      const isPeertubeInstance = /<meta\s+[^>]*property=['"]og:type['"]\s+[^>]*content=['"]website['"][^>]*\/?>/si;
+      const is = {
+        JML:              sourcecode.match(isJML),
+        peertube:         sourcecode.match(isPeertube),
+        peertubeVideo:    sourcecode.match(isPeertubeVideo),
+        peertubeInstance: sourcecode.match(isPeertubeInstance),
+      }
+      if( is.JML || !is.peertube ) return // JML takes precedence over microformats 
+      if( !is.peertubeVideo && !is.peertubeInstance ) return 
+      
+      // ok..peertube time: get domtree 
+      let el = document.createElement("div")
+      el.innerHTML = sourcecode
+
+      // try to fetch title + cover
+      const title = el.querySelector("title")
+      let logo    = el.querySelector("meta[property='og:image']")?.getAttribute("content")
+      logo        = logo ? logo : el.querySelector("meta[property='og:image:url']")?.getAttribute("content")
+
+      let url      = new URL( String(room.url) )
+      let instance = url?.origin
+      let search   = url?.search ? new URLSearchParams(url.search).get("search") : ""
+
+      // return JML
+      return room.parseSource(`
+        <title>${ title ? title.innerText.replace(/\n.*/g,'') : room.baseurl.split("/").pop() }</title>
+        <FireBoxRoom>
+            <Assets>
+              ${ logo ? `<assetimage src="${logo}" id="logo"/>` : ''}
+              <assetscript src="https://codeberg.org/coderofsalvation/janus-script-peertube/raw/branch/master/build/janus-script-peertube.js"/>
+              <assetobject src="https://codeberg.org/coderofsalvation/janus-script-peertube/raw/branch/master/build/asset/button.glb" id="button"/>
+              <assetobject src="https://codeberg.org/coderofsalvation/janus-script-peertube/raw/branch/master/build/asset/button.icon.glb"  id="icon"/>
+              <assetsound  src="https://codeberg.org/coderofsalvation/janus-script-peertube/raw/branch/master/build/asset/button.click.mp3" id="button-click"/>
+              <assetsound  src="https://codeberg.org/coderofsalvation/janus-script-peertube/raw/branch/master/build/asset/button.hover.mp3" id="button-hover"/>
+            </Assets>
+            <Room use_local_asset="room_2pedestal" pos="1.15 0 -5" rotation="0 1.5708 0" fwd="1 0 0">
+              ${ is.peertubeInstance ? `<peertube-app pos="4.55 2.71 -4.7" scale="2 2 1" rotation="0 90 0" js_id="mypeertube-app" instance="${instance}" ${search?`search="${search}"`:``} autoload="true"/>`
+                                     : `<peertube     pos="4.55 2.71 -4.7" scale="2 2 1" rotation="0 90 0" js_id="peertube" src="${room.url}" auto_play="true"/>` 
+               }
+              ${ logo ? `<image id="logo"/>` : ''}
+            </Room>
+        </FireBoxRoom>
+      `)
+    }
+    // peertube microformat heuristic: <meta property="og:platform" content="PeerTube">
+    this.parseSource.regex = /<meta\s+[^>]*property=['"]og:platform['"]\s+[^>]*content=['"]peertube['"][^>]*\/?>/si;
+  });
+});

package/scripts/translators/xrfragments.js

@@ -18,12 +18,13 @@ elation.require([], function() {
             ]
           },
           room: {
+            gravity: 0,
             pos: [0,0,0],
             xdir: "1 0 0",
             zdir: "0 0 1",
           },
           object: [
-            {id: 'scene', js_id: 0, pos: "0 0 0", xdir: "-1 0 0", zdir: "0 0 -1", lighting: "false"}
+            {id: 'scene', js_id: "scene", pos: "0 0 0", xdir: "-1 0 0", zdir: "0 0 -1"}
           ],
           link: []
         };
@@ -34,8 +35,8 @@ elation.require([], function() {
     this.spawnUserAtFragment = function(source) {
       // XR Fragments deeplink spec: explicit or default spawn
       // https://xrfragment.org/#teleport%20camera
-      if( ! this.room.urlhash ) this.room.urlhash = 'spawn'
-      this.room.setPlayerPosition.apply(this.room)
+      if( ! room.urlhash ) room.urlhash = 'spawn'
+      room.setPlayerPosition.apply(room)
       console.log("[xrfragment] camera teleport")
     }
 
@@ -78,7 +79,7 @@ elation.require([], function() {
             <Assets>
               <assetobject id="scene" src="${hrefNoHash}"/>
             </Assets>
-            <Room>
+            <Room gravity="0">
               <object pos="0 0 0" collision_id="scene" id="scene" />
             </Room>
         </FireBoxRoom>
@@ -90,4 +91,3 @@ elation.require([], function() {
 
   });
 });
-