janusweb 1.7.2 → 1.7.3

package/media/assets/webui/apps/inventory/inventory.html

@@ -1,62 +1,17 @@
     <h3>Inventory</h3>
-    <collection-jsonapi id="models"
-      host="https://poly.googleapis.com"
-      endpoint="/v1/assets"
-      itempath="assets"
-      apiargs.keywords=""
-      apiargs.format="gltf2"
-      apiargs.key="AIzaSyC9ngd4hqQ9YmaBpUAQP4R9KJEY3dIZ4hM">
-    </collection-jsonapi>
-
-    <ui-tabs>
-      <ui-tab label="Primitives"> 
-        <ui-grid name="primitives" class="models" draggable="true" selectable="true">
-          <ui-item><a href="janus:object/id=cube">cube</a></ui-item>
-          <ui-item><a href="janus:object/id=sphere">sphere</a></ui-item>
-          <ui-item><a href="janus:object/id=cone">cone</a></ui-item>
-          <ui-item><a href="janus:object/id=cylinder">cylinder</a></ui-item>
-          <ui-item><a href="janus:object/id=pyramid">pyramid</a></ui-item>
-          <ui-item><a href="janus:object/id=torus">torus</a></ui-item>
-          <ui-item><a href="janus:object/id=capsule">capsule</a></ui-item>
-          <ui-item><a href="janus:object/id=pipe">pipe</a></ui-item>
-          <ui-item><a href="janus:object/id=plane">plane</a></ui-item>
-
-          <ui-item><a href="janus:image">image</a></ui-item>
-          <ui-item><a href="janus:link">link</a></ui-item>
-          <ui-item><a href="janus:paragraph">paragraph</a></ui-item>
-          <ui-item><a href="janus:particle">particle</a></ui-item>
-          <ui-item><a href="janus:sound">sound</a></ui-item>
-          <ui-item><a href="janus:text/text=Text/col=red/roughness=0.3/metalness=0">text</a></ui-item>
-          <ui-item><a href="janus:video">video</a></ui-item>
-
-          <ui-item><a href="janus:light/light_cone_angle=0">point light</a></ui-item>
-          <ui-item><a href="janus:light/light_cone_angle=0.8">spot light</a></ui-item>
-          <ui-item><a href="janus:light/light_cone_angle=1">directional light</a></ui-item>
-        </ui-grid>
-      </ui-tab>
-      <ui-tab label="Room Assets">
-        <janus-ui-inventory-roomassets></janus-ui-inventory-roomassets>
-      </ui-tab>
-      <!-- Disabled Google Poly - maybe one day ICOSA Gallery or someone else will offer the old Google Blocks API again
-      <ui-tab label="Google Poly"> 
-        <ui-flexpanel id="poly" vertical>
-          <ui-input noflex placeholder="Search for Google Poly models" onaccept="let models = document.getElementById('models'); models.apiargs.keywords = this.value; delete models.apiargs.pageToken; document.getElementById('itemlist').clear(); models.load(); pagination.disabled = false;"></ui-input>
-          <ui-grid name="polyobjects" scrollable-y flex="1" class="models" id="itemlist" itemcomponent="janus.ui.inventory.item.poly" collection="models" selectable="true"></ui-grid>
-          <ui-button noflex id="pagination" onclick="let models = document.getElementById('models'); if (models.rawdata.nextPageToken) { models.apiargs.pageToken = models.rawdata.nextPageToken; models.append(); } else { this.disabled = true; }">Load More</ui-button>
-        </ui-flexpanel>
-      </ui-tab>
-      -->
-      <ui-tab label="Vesta">
-          <h3>Vesta integration coming soon!</h3>
-          <p>When it's ready, you'll be able to access assets you've stored on your Vesta account, and bring them with you anywhere you go.</p>
-          <p><a href="https://vesta.janusvr.com/">Sign up for a vesta account today</a></p>
-      </ui-tab>
-      <ui-tab label="Import">
-        <div>
-          <h3>Did you know!?</h3>
-          <p>You can drag 3d models, images, videos, and sounds into Janus rooms from other websites, or even your local hard drive!</p>
-          <p>Just select the files, drag them over, and drop them into the world.  Then use our in-world editing tools to place it where you want it to be.</p>
-        </div>
-      </ui-tab>
-    </ui-tabs>
-
+    <div class="inv-controls">
+      <input type="text" name="search" class="inv-search" placeholder="Search assets…" />
+      <select name="sortselect" class="inv-sort">
+        <option value="title">Name</option>
+        <option value="type">Type</option>
+        <option value="source">Source</option>
+      </select>
+    </div>
+    <div class="inv-chips" name="sourcefilters"></div>
+    <div class="inv-chips" name="typefilters"></div>
+    <ui-grid name="assetgrid" class="models inv-grid" selectable="true" draggable="true"
+             itemcomponent="janus.ui.inventory.item.asset"></ui-grid>
+    <div class="inv-empty" name="empty">
+      No assets yet. Drag 3D models, images, videos or sounds in from another site or
+      your desktop, or pick a primitive above.
+    </div>

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

@@ -1,82 +1,352 @@
-elation.elements.define('janus.ui.inventory', class extends elation.elements.base {
-  create() {
-    //this.innerHTML = elation.template.get('janus.ui.inventory');
-    let elements = elation.elements.fromTemplate('janus.ui.inventory', this);
-
-    console.log('INVENTORY ELEMENTS', elements);
-    if (elements.primitives) {
-      elation.events.add(elements.primitives, 'select', (ev) => this.handlePrimitiveSelect(ev));
-      //elation.events.add(elements.polyobjects, 'select', (ev) => this.handleAssetSelect(ev));
-    }
-  }
-  addSource(name, collection) {
+/* janus.ui.inventory — a unified, source-aggregated asset browser.
+ *
+ * Sources (built-in primitives, the room's own markup assets, and any
+ * host-registered source) each contribute items. The inventory merges items
+ * that refer to the same underlying asset (by key), so one card can carry
+ * several provenance badges (e.g. an asset that is both in the room and from a
+ * host source), and presents a single searchable / filterable / sortable grid.
+ * Selecting or dragging a card places the asset into the scene via the editor.
+ */
+(function () {
+  // ---- source registry (module-private, shared across inventory instances) --
+  var SOURCES = [];        // [{ name, label, items, refreshOn }]
+  var INSTANCES = [];      // live janus.ui.inventory elements
+  var SOURCE_LABEL = {};   // name -> label (for badges/chips)
+
+  var TYPE_ICON = {
+    object: '▣', image: '\u{1F5BC}', video: '\u{1F39E}',
+    sound: '\u{1F50A}', light: '\u{1F4A1}', text: '\u{1F1F9}', link: '\u{1F517}',
+    particle: '✨', shader: '\u{1F308}', script: '\u{1F4DC}'
+  };
+
+  function notify() { for (var i = 0; i < INSTANCES.length; i++) INSTANCES[i].rebuild(); }
+
+  // Register (or replace, by name) an asset source. Safe to call before any
+  // inventory exists — live inventories rebuild immediately.
+  //   src = { name, label, refreshOn?, items }
+  //   items: array | () => array | () => Promise<array>
+  //   each raw item: { key?, type?, title?/name?, thumbnail?/src?, tags?,
+  //                    url?/href? | getInsertURL() }
+  function addSource(src) {
+    if (!src || !src.name) return;
+    for (var i = 0; i < SOURCES.length; i++) { if (SOURCES[i].name === src.name) { SOURCES.splice(i, 1); break; } }
+    SOURCES.push(src);
+    SOURCE_LABEL[src.name] = src.label || src.name;
+    notify();
   }
-  handlePrimitiveSelect(ev) {
-    let item = ev.target;
-    elation.events.fire({type: 'assetselect', data: item.value.href, element: this});
-    ev.preventDefault();
-    ev.stopPropagation();
+  function removeSource(name) {
+    for (var i = 0; i < SOURCES.length; i++) { if (SOURCES[i].name === name) { SOURCES.splice(i, 1); notify(); return; } }
   }
-  handleAssetSelect(ev) {
-    let item = ev.target;
-    elation.events.fire({type: 'assetselect', data: item.model.root.url, element: this});
-    ev.preventDefault();
-    ev.stopPropagation();
+
+  function normalizeItem(raw, srcname) {
+    var url = (typeof raw.getInsertURL === 'function') ? raw.getInsertURL() : (raw.url || raw.href || '');
+    // 'model' (uploaded 3D files) and 'object' (primitives, room objects) are the
+    // same kind of placeable asset; collapse to one type so they share a filter.
+    var type = raw.type === 'model' ? 'object' : (raw.type || 'object');
+    var rec = {
+      key: raw.key || url || raw.title || raw.name,
+      type: type,
+      title: raw.title || raw.name || raw.key || '',
+      thumbnail: raw.thumbnail || raw.src || null,
+      icon: raw.icon || null,
+      tags: raw.tags ? raw.tags.slice() : [],
+      url: url,
+      sources: [srcname],
+      _bySource: {}
+    };
+    rec._bySource[srcname] = url;
+    return rec;
   }
-});
-elation.elements.define('janus.ui.inventory.item.poly', class extends elation.elements.ui.item {
-  create() {
-    let item = this.value;
-
-    for (let i = 0; i < item.formats.length; i++) {
-      if (item.formats[i].formatType == 'GLTF2') {
-        this.model = item.formats[i];
-      }
+
+  // Merge records sharing a key: union the badges; an asset already in the room
+  // keeps the room insert URL (reference the existing <asset>) over a source URL
+  // (which would add a new asset def).
+  function mergeAssets(records) {
+    var byKey = {}, order = [];
+    for (var i = 0; i < records.length; i++) {
+      var r = records[i], k = r.key, m = byKey[k];
+      if (!m) { byKey[k] = r; order.push(k); continue; }
+      for (var s = 0; s < r.sources.length; s++) if (m.sources.indexOf(r.sources[s]) === -1) m.sources.push(r.sources[s]);
+      for (var sk in r._bySource) m._bySource[sk] = r._bySource[sk];
+      if (!m.thumbnail && r.thumbnail) m.thumbnail = r.thumbnail;
+      if ((!m.title || m.title === m.key) && r.title) m.title = r.title;
+      for (var t = 0; t < r.tags.length; t++) if (m.tags.indexOf(r.tags[t]) === -1) m.tags.push(r.tags[t]);
     }
-    if (!this.model) {
-      this.model = item.formats[0];
+    var out = [];
+    for (var o = 0; o < order.length; o++) {
+      var rec = byKey[order[o]];
+      rec.url = rec._bySource['room'] || rec.url;   // prefer reference-existing
+      out.push(rec);
     }
-
-    let elements = elation.elements.fromTemplate('janus.ui.inventory.item.poly', this);
-    elation.events.add(this, 'click', (ev) => this.click(ev));
-  }
-});
-elation.elements.define('janus.ui.inventory.roomassets', class extends elation.elements.base {
-  create() {
-    this.elements = elation.elements.fromTemplate('janus.ui.inventory.roomassets', this);
+    return out;
   }
-});
-elation.elements.define('janus.ui.inventory.roomassets.list', class extends elation.elements.base {
-  constructor() {
-    super();
-    this.defineAttribute('assettype', { type: 'string' });
-  }
-  create() {
-    this.list = elation.elements.create('ui-grid', {
-      append: this,
-      class: 'models',
-      selectable: 1,
-      draggable: 1,
-      itemcomponent: 'janus.ui.inventory.item.roomasset',
+
+  function activeKeys(state) { var k = [], n; for (n in state) if (state[n]) k.push(n); return k; }
+
+  // ---- built-in sources ------------------------------------------------------
+  var PRIMITIVE_DEFS = [
+    { id: 'cube', label: 'Cube', type: 'object', url: 'janus:object/id=cube' },
+    { id: 'sphere', label: 'Sphere', type: 'object', url: 'janus:object/id=sphere' },
+    { id: 'cone', label: 'Cone', type: 'object', url: 'janus:object/id=cone' },
+    { id: 'cylinder', label: 'Cylinder', type: 'object', url: 'janus:object/id=cylinder' },
+    { id: 'pyramid', label: 'Pyramid', type: 'object', url: 'janus:object/id=pyramid' },
+    { id: 'torus', label: 'Torus', type: 'object', url: 'janus:object/id=torus' },
+    { id: 'capsule', label: 'Capsule', type: 'object', url: 'janus:object/id=capsule' },
+    { id: 'pipe', label: 'Pipe', type: 'object', url: 'janus:object/id=pipe' },
+    { id: 'plane', label: 'Plane', type: 'object', url: 'janus:object/id=plane' },
+    { id: 'image', label: 'Image', type: 'image', url: 'janus:image' },
+    { id: 'link', label: 'Link', type: 'link', url: 'janus:link' },
+    { id: 'paragraph', label: 'Paragraph', type: 'text', url: 'janus:paragraph' },
+    { id: 'particle', label: 'Particle', type: 'particle', url: 'janus:particle' },
+    { id: 'sound', label: 'Sound', type: 'sound', url: 'janus:sound' },
+    { id: 'text', label: 'Text', type: 'text', url: 'janus:text/text=Text/col=red/roughness=0.3/metalness=0' },
+    { id: 'video', label: 'Video', type: 'video', url: 'janus:video' },
+    { id: 'pointlight', label: 'Point light', type: 'light', url: 'janus:light/light_cone_angle=0' },
+    { id: 'spotlight', label: 'Spot light', type: 'light', url: 'janus:light/light_cone_angle=0.8' },
+    { id: 'dirlight', label: 'Directional light', type: 'light', url: 'janus:light/light_cone_angle=1' }
+  ];
+  // Shape primitives that have a glyph in the engine object-icon sprite sheet
+  // (see .inv-prim-* in inventory.css). Others fall back to their type emoji.
+  var PRIM_ICON = { cube:1, sphere:1, cone:1, cylinder:1, pyramid:1, torus:1, capsule:1, pipe:1, plane:1 };
+  function primitiveItems() {
+    return PRIMITIVE_DEFS.map(function (p) {
+      return { key: 'primitive:' + p.id, type: p.type, title: p.label, url: p.url, tags: ['primitive'],
+               icon: PRIM_ICON[p.id] ? p.id : null };
     });
-    this.updateList();
-    elation.events.add(janus._target, 'room_change', (ev) => this.updateList());
   }
-  updateList() {
-    this.list.clear();
-    this.list.innerHTML = '';
-    this.list.setItems(this.getAssetList());
-  }
-  getAssetList() {
-    if (room.assetpack && room.assetpack.assetmap[this.assettype]) {
-      return room.assetpack.assetmap[this.assettype];
+
+  // Per-type insert URL for an existing room asset (references it by id, so no
+  // duplicate asset def is created).
+  var ROOM_REF = { object: 'object/id', image: 'image/image_id', sound: 'sound/sound_id', video: 'video/video_id' };
+  function roomItems() {
+    var out = [], room = window.room;
+    if (!room || !room.assetpack || !room.assetpack.assetmap) return out;
+    var map = room.assetpack.assetmap, type, name, asset, src, ref, parts;
+    for (type in map) {
+      for (name in map[type]) {
+        asset = map[type][name];
+        src = (asset && (asset.src || (typeof asset.getFullURL === 'function' && asset.getFullURL()))) || '';
+        ref = ROOM_REF[type] || 'object/id';
+        parts = ref.split('/');
+        out.push({
+          key: src || (type + ':' + name),
+          type: type,
+          title: name,
+          thumbnail: (type === 'image' ? src : null),
+          url: 'janus:' + parts[0] + '/' + parts[1] + '=' + encodeURIComponent(name),
+          tags: ['room']
+        });
+      }
     }
-    return {};
-  }
-});
-elation.elements.define('janus.ui.inventory.item.roomasset', class extends elation.elements.ui.item {
-  create() {
-    let elements = elation.elements.fromTemplate('janus.ui.inventory.item.roomasset', this);
-    elation.events.add(this, 'click', (ev) => this.click(ev));
+    return out;
   }
-});
+
+  addSource({ name: 'primitive', label: 'Primitive', items: primitiveItems });
+  addSource({ name: 'room', label: 'Room', items: roomItems, refreshOn: ['room_change'] });
+
+  // ---- the inventory element -------------------------------------------------
+  elation.elements.define('janus.ui.inventory', class extends elation.elements.base {
+    create() {
+      this.assets = [];
+      this.q = '';
+      this.activeSources = {};
+      this.activeTypes = {};
+      this.sortKey = 'title';
+      this._rebuildToken = 0;
+
+      elation.elements.fromTemplate('janus.ui.inventory', this);
+      this.grid = this.querySelector('[name=assetgrid]');
+      this.searchEl = this.querySelector('[name=search]');
+      this.sortEl = this.querySelector('[name=sortselect]');
+      this.sourceChips = this.querySelector('[name=sourcefilters]');
+      this.typeChips = this.querySelector('[name=typefilters]');
+      this.emptyEl = this.querySelector('[name=empty]');
+
+      if (this.searchEl) elation.events.add(this.searchEl, 'input,change', (ev) => { this.q = (this.searchEl.value || '').toLowerCase(); this.applyFilters(); });
+      if (this.sortEl) elation.events.add(this.sortEl, 'change', (ev) => { this.sortKey = this.sortEl.value || 'title'; this.applyFilters(); });
+      if (this.sourceChips) elation.events.add(this.sourceChips, 'click', (ev) => this.toggleChip(ev, this.activeSources));
+      if (this.typeChips) elation.events.add(this.typeChips, 'click', (ev) => this.toggleChip(ev, this.activeTypes));
+
+      // Activation: a full click places via the editor (NOT the list's `select`,
+      // which fires on mousedown — that spawned the object mid-press). dragstart
+      // carries the insert URL so dropping into the scene works (independent of
+      // reorder).
+      if (this.grid) {
+        elation.events.add(this.grid, 'click', (ev) => this.handleActivate(ev));
+        elation.events.add(this.grid, 'dragstart', (ev) => this.handleDragStart(ev));
+      }
+
+      // Route selection to the editor controller, so the inventory works whether
+      // it's inside the editor panel or placed standalone (decomposed).
+      var c = (typeof window.getEditorController === 'function') ? window.getEditorController() : null;
+      if (c) { this.controller = c; c.inventory = this; elation.events.add(this, 'assetselect', (ev) => c.handleInventorySelect(ev)); }
+
+      try { elation.events.add(janus._target, 'room_change', () => this.rebuild()); } catch (e) {}
+
+      INSTANCES.push(this);
+      this.rebuild();
+    }
+
+    // Public per-instance hooks (mirror the static API for convenience).
+    addSource(src) { addSource(src); }
+    removeSource(name) { removeSource(name); }
+
+    rebuild() {
+      var token = ++this._rebuildToken;
+      var collected = [], pending = 0, self = this;
+      var finish = function () {
+        if (pending !== 0 || token !== self._rebuildToken) return;
+        self.assets = mergeAssets(collected);
+        self.updateChips();
+        self.applyFilters();
+      };
+      for (var i = 0; i < SOURCES.length; i++) {
+        (function (src) {
+          var items;
+          try { items = (typeof src.items === 'function') ? src.items() : src.items; } catch (e) { items = []; }
+          var push = function (list) { for (var j = 0; j < (list || []).length; j++) collected.push(normalizeItem(list[j], src.name)); };
+          if (items && typeof items.then === 'function') {
+            pending++;
+            items.then(function (list) { push(list); pending--; finish(); }, function () { pending--; finish(); });
+          } else {
+            push(items);
+          }
+        })(SOURCES[i]);
+      }
+      finish();
+    }
+
+    updateChips() {
+      // Source chips come from registered sources; type chips from present types.
+      if (this.sourceChips) {
+        var names = SOURCES.map(function (s) { return s.name; });
+        this.renderChips(this.sourceChips, names, function (n) { return SOURCE_LABEL[n] || n; }, this.activeSources, 'src');
+      }
+      if (this.typeChips) {
+        var types = [], seen = {}, i;
+        for (i = 0; i < this.assets.length; i++) { var t = this.assets[i].type; if (!seen[t]) { seen[t] = 1; types.push(t); } }
+        types.sort();
+        this.renderChips(this.typeChips, types, function (t) { return t; }, this.activeTypes, 'type');
+      }
+    }
+
+    renderChips(container, keys, labelfn, state, kind) {
+      container.innerHTML = '';
+      for (var i = 0; i < keys.length; i++) {
+        var k = keys[i];
+        var chip = document.createElement('button');
+        chip.type = 'button';
+        chip.className = 'inv-chip' + (state[k] ? ' active' : '') + (kind === 'src' ? ' inv-badge-' + k : '');
+        chip.setAttribute('data-key', k);
+        chip.textContent = labelfn(k);
+        container.appendChild(chip);
+      }
+    }
+
+    toggleChip(ev, state) {
+      var chip = ev.target && ev.target.closest ? ev.target.closest('[data-key]') : null;
+      if (!chip) return;
+      var k = chip.getAttribute('data-key');
+      state[k] = !state[k];
+      chip.classList.toggle('active', !!state[k]);
+      this.applyFilters();
+    }
+
+    applyFilters() {
+      var q = this.q, srcs = activeKeys(this.activeSources), types = activeKeys(this.activeTypes);
+      var view = this.assets.filter(function (a) {
+        if (q) {
+          var hit = (a.title || '').toLowerCase().indexOf(q) !== -1;
+          if (!hit) for (var i = 0; i < a.tags.length; i++) if (String(a.tags[i]).toLowerCase().indexOf(q) !== -1) { hit = true; break; }
+          if (!hit) return false;
+        }
+        if (srcs.length) { var ok = false; for (var s = 0; s < a.sources.length; s++) if (srcs.indexOf(a.sources[s]) !== -1) { ok = true; break; } if (!ok) return false; }
+        if (types.length && types.indexOf(a.type) === -1) return false;
+        return true;
+      });
+      var key = this.sortKey;
+      view.sort(function (a, b) {
+        var av = key === 'source' ? (a.sources[0] || '') : (a[key] || '');
+        var bv = key === 'source' ? (b.sources[0] || '') : (b[key] || '');
+        return String(av).localeCompare(String(bv));
+      });
+      if (this.grid) this.grid.setItems(view);
+      if (this.emptyEl) this.emptyEl.style.display = view.length ? 'none' : '';
+    }
+
+    handleActivate(ev) {
+      // Native click: resolve the card from the event target (the anchor/img/title
+      // inside it), so placement happens on click-release, not on mousedown.
+      var item = ev.target && ev.target.closest ? ev.target.closest('.inv-asset-item') : null;
+      var rec = item && item.value;
+      if (!rec || !rec.url) return;
+      elation.events.fire({ type: 'assetselect', element: this, data: rec.url });
+      if (ev.preventDefault) ev.preventDefault();
+      if (ev.stopPropagation) ev.stopPropagation();
+    }
+
+    handleDragStart(ev) {
+      var item = ev.target && ev.target.closest ? ev.target.closest('.inv-asset-item') : null;
+      var rec = item && item.value;
+      if (!rec || !rec.url || !ev.dataTransfer) return;
+      try {
+        ev.dataTransfer.effectAllowed = 'copy';
+        ev.dataTransfer.setData('text/uri-list', rec.url);
+        ev.dataTransfer.setData('text/plain', rec.url);
+      } catch (e) {}
+    }
+  });
+
+  // Card renderer for one merged asset record (this.value). Build in render()
+  // (and on every value assignment) rather than create(): the list assigns
+  // `value` around create time, so a one-shot create() read produced blank cards.
+  elation.elements.define('janus.ui.inventory.item.asset', class extends elation.elements.ui.item {
+    init() {
+      super.init();
+      // Re-render whenever the value is (re)assigned, regardless of set/create order.
+      this.defineAttributes({ value: { type: 'object', set: () => this.render() } });
+    }
+    render() {
+      var v = this.value;
+      this.innerHTML = '';
+      if (v == null || typeof v !== 'object') return;
+      this.addclass('inv-asset-item');
+      var a = document.createElement('a');
+      a.setAttribute('href', v.url || '#');
+      a.setAttribute('draggable', 'true');
+      a.setAttribute('onclick', 'return false');
+      if (v.thumbnail) {
+        var img = document.createElement('img'); img.src = v.thumbnail; a.appendChild(img);
+      } else if (v.icon) {
+        var ic = document.createElement('span'); ic.className = 'inv-type-icon';
+        var sprite = document.createElement('span'); sprite.className = 'inv-prim-icon inv-prim-' + v.icon;
+        ic.appendChild(sprite); a.appendChild(ic);
+      } else {
+        var ic = document.createElement('span'); ic.className = 'inv-type-icon'; ic.textContent = TYPE_ICON[v.type] || '▩'; a.appendChild(ic);
+      }
+      var h = document.createElement('h2'); h.textContent = v.title || ''; a.appendChild(h);
+      this.appendChild(a);
+      if (v.sources && v.sources.length) {
+        var badges = document.createElement('span'); badges.className = 'inv-badges';
+        for (var i = 0; i < v.sources.length; i++) {
+          var b = document.createElement('span');
+          b.className = 'inv-badge inv-badge-' + v.sources[i];
+          b.textContent = SOURCE_LABEL[v.sources[i]] || v.sources[i];
+          b.title = b.textContent;
+          badges.appendChild(b);
+        }
+        this.appendChild(badges);
+      }
+    }
+  });
+
+  // Host registration hook (engine-generic; no downstream coupling). A host can
+  // register an asset source at any time:  window.JanusInventory.addSource({...})
+  // If a host registered before this script loaded (pushing onto a `sources`
+  // queue), drain it now.
+  var hook = (window.JanusInventory = window.JanusInventory || {});
+  if (hook.sources && hook.sources.length) hook.sources.forEach(addSource);
+  hook.sources = null;
+  hook.addSource = addSource;
+  hook.removeSource = removeSource;
+})();

package/media/assets/webui/apps/inventory/inventory.json

@@ -1,9 +1,6 @@
 {
   "templates": {
-    "janus.ui.inventory": "./inventory.html",
-    "janus.ui.inventory.roomassets": "./roomassets.html",
-    "janus.ui.inventory.item.poly": "./inventory-item-poly.html",
-    "janus.ui.inventory.item.roomasset": "./inventory-item-roomasset.html"
+    "janus.ui.inventory": "./inventory.html"
   },
   "scripts":  ["./inventory.js"],
   "css":      ["./inventory.css"],

package/media/assets/webui/apps/xrfragment/level2-hyperlink.js

@@ -96,7 +96,9 @@ elation.require([], function() {
       opts = opts ? {...opts, url, hash} : {url,hash} 
       console.log("hyperlink: "+href)
       elation.events.fire({element: this, type: 'href', data: {href,opts}});
-      if( room.url != url.origin+url.pathname ) return this.executeExternal(href,opts)
+      if( String(url).replace(/#.*/,'') != room.getFullRoomURL(room.url) ){
+        return this.executeExternal(href,opts)
+      }
       hash.forEach( (v,k) => {
         const {operator,param} = this.getOperators(k)
         switch( param ){
@@ -166,11 +168,11 @@ elation.require([], function() {
 
     getUrlObject = function(href){
       const urlExpanded = href[0] == '#'                                                    
-                    ? room.url+href                                                   
-                    : href.match(/:\//) ? href : room.baseurl+href                                 
+                    ? room.getFullRoomURL( room.url )+href
+                    : href.match(/:\//) ? href : room.getFullRoomURL(room.baseurl)+href                                 
       const url  = new URL( urlExpanded )
       const hash = new URLSearchParams( String(url.hash).substr(1) ) 
-      return {url,hash}
+      return {url,hash,href}
     }
 
     getOperators = function(k){
@@ -225,7 +227,7 @@ elation.require([], function() {
 });
 
 xrf_install_hyperlinks = function(){
-  if( !room.objects?.scene?.modelasset?.loaded ) {
+  if( !room || !room?.objects?.scene?.modelasset?.loaded ) {
     return setTimeout( xrf_install_hyperlinks, 300 ) 
   }
   if( !room.hyperlink     ){

package/media/assets/webui/apps/xrfragment/xrfragment.json

@@ -5,8 +5,7 @@
     "./level2-hyperlink.js",
     "./level0-sidecarfile.js",
     "./level7-engine-prefixes.import.js",
-    "./level7-engine-prefixes.export.js",
-    "./patch/metaquest-fix-flickering.js"
+    "./level7-engine-prefixes.export.js"
   ],
   "css":      []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "janusweb",
   "description": "Web client for JanusVR worlds",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "main": "scripts/janusweb.js",
   "author": "James Baicoianu",
   "license": "MIT",

package/scripts/client.js

@@ -152,30 +152,6 @@ elation.require(['elements.elements', 'elements', 'engine.engine', 'engine.asset
           }
         }
       });
-      this.initProxies()
-    }
-    initProxies() {
-      elation.engine.assets = new Proxy(elation.engine.assets,{
-        get(me,k){
-          if( k == "corsproxy" && me[k] ){
-            const p = elation.config.get("engine.assets.corsproxies")
-            if( ! p?.length ){ 
-              return me[k] // nothing to roundrobin
-            }else{ // roundrobin proxies
-              if( !p.index ) p.index = 0
-              const corsproxy = p[ p.index ]  
-              elation.config.set("engine.assets.corsproxy", corsproxy )
-              p.index = (p.index + 1) % p.length
-              return corsproxy
-            }
-          }
-          return me[k]
-        },
-        set(me,k,v){
-          me[k] = v
-          return true
-        }
-      })
     }
     initButtons() {
       this.sharebutton = elation.ui.button({classname: 'janusweb_sharing', label: 'Share'});
@@ -386,9 +362,10 @@ elation.require(['elements.elements', 'elements', 'engine.engine', 'engine.asset
         this.style.overflow = 'hidden';
       }
       getClientArgs() {
-        var fullsize = this.fullsize,
-            width = (this.fullsize ? window.innerWidth : this.width),
-            height = (this.fullsize ? window.innerHeight : this.height);
+        // Resolution hint is the configured width/height. When fullsize, the engine
+        // view sizes itself to its container, so we don't assume the window here.
+        var width = this.width,
+            height = this.height;
         var args = {
           url: this.getRoomURL(),
           homepage: this.homepage || this.src,

package/scripts/config.js

@@ -6,9 +6,14 @@ proxies = [
 ]
 elation.config.set('engine.assets.corsproxy',   proxies[0]); // CORS proxy URL
 elation.config.set('engine.assets.corsproxies', []        ); // rotate **online** proxies only
-proxies.map( (url) => 
+proxies.map( (url) =>
   fetch(url,{method:'HEAD'})
-  .then( (res) => res.ok && elation.config.get("engine.assets.corsproxies").push(url) )
+  .then( (res) => {
+    // online defaults join the rotation unless an explicit set was configured
+    // (e.g. the viewer's corsproxy attribute)
+    let corsproxies = elation.config.get("engine.assets.corsproxies");
+    if (res.ok && !corsproxies.explicit) corsproxies.push(url);
+  })
 )
 
 elation.config.set('engine.assets.workers', 'auto'); // Number of workers to use for asset parsing