janusweb 1.7.2 → 1.7.3

package/README.md

@@ -77,7 +77,7 @@ Run a **local-first** viewer locally on your desktop, raspberry pi (ARM64) or se
 
 | executable    | platforms |
 |-|-|
-| [janusxr.com](https://jbaicoianu.github.io/janusweb/janusxr.com) | <img src="https://i.imgur.com/v7cYVq1.png"/> |
+| [janusxr.com](https://github.com/jbaicoianu/janusweb/releases/latest/download/janusxr.com) | <img src="https://i.imgur.com/v7cYVq1.png"/> |
 
 Run `janusxr.com` from anywhere, or put it into a folder with your 3D models or JanusXR rooms:
 

package/media/assets/webui/apps/comms/chat.html

@@ -1,7 +1,6 @@
-<details name="toggle" open aria-live="polite" role="log">
-  <summary>Text Chat <ui-notificationbutton name="unread" count="0"></ui-notificationbutton></summary>
-  <janus-voip-client-callbutton></janus-voip-client-callbutton>
-  <collection-indexed id="chatmessages" index="timestamp"></collection-indexed>
-  <ui-list name="chatlist" collection="chatmessages" itemtemplate="janus.comms.chat_message" scrollable="1"></ui-list>
-  <ui-input name="chatinput" placeholder="Press T for text chat"></ui-input>
-</details>
+<collection-indexed id="chatmessages" index="timestamp"></collection-indexed>
+<ui-list name="chatlist" class="comms-log" collection="chatmessages" itemtemplate="janus.comms.chat_message" scrollable="1" aria-live="polite" role="log"></ui-list>
+<div class="comms-chat-input">
+  <ui-notificationbutton name="unread" count="0" title="Chat" label="&#128172;"></ui-notificationbutton>
+  <ui-input name="chatinput" placeholder="Press T to chat&#8230;"></ui-input>
+</div>

package/media/assets/webui/apps/comms/comms.css

@@ -1,45 +1,212 @@
 @import url('https://fonts.googleapis.com/css?family=Inconsolata|Montserrat');
 
+/*
+ * Themeable slim comms bar. Consumers (e.g. a host app) restyle by setting
+ * these custom properties on janus-comms-panel rather than overriding rules.
+ */
 janus-comms-panel {
-  display: flex;
-  background: rgba(0,0,0,.5);
-  flex-direction: column;
+  --comms-bar-bg: rgba(0,0,0,.5);
+  --comms-accent: #4cb96f;              /* usernames, active states, scrollbar */
+  --comms-text: #eee;
+  --comms-muted: #aaa;
+  --comms-font: Inconsolata, monospace;
+  --comms-radius: .5em;
+  --comms-log-width: 22em;
+  --comms-log-max-height: 40vh;
+  --comms-show-presence: block;        /* set to none to hide join/part/disconnect lines */
+  --comms-status-connected: #0a0;
+  --comms-status-connecting: #cc0;
+  --comms-status-disconnecting: #999;
+  --comms-status-disconnected: #b00;
+  --comms-status-private: #aaa;
+
+  position: relative;
+  display: inline-block;
   z-index: 100;
-  padding-right: .5em;
-  width: 25vw;
-  min-width: 20em;
+  color: var(--comms-text);
+  font-family: var(--comms-font);
+}
+
+.janus-comms-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: .25em;
+  padding: .2em .35em;
+  background: var(--comms-bar-bg);
+  border-radius: var(--comms-radius);
+  text-shadow: 0 0 3px #000, 0 0 1px #000;
 }
-janus-comms-panel details>summary {
+
+/* Shared pill look for the interactive chips in the bar */
+.janus-comms-bar>janus-comms-userlist>.comms-roster>summary,
+.janus-comms-bar>janus-comms-invite {
   cursor: pointer;
   outline: 0;
+  border-radius: var(--comms-radius);
+  padding: .15em .4em;
+  white-space: nowrap;
+  transition: background 120ms linear;
 }
-janus-comms-chat ui-list[name="chatlist"] {
-  height: 10em;
-  overflow-y: scroll;
-  font-family: Inconsolata, monospace;
-  transform: rotate(0); /* Using an empty transform here forces the browser to composite this element, which fixes bugs which cause elements to disappear while scrolling */
-  width: 100%;
+.janus-comms-bar>janus-comms-userlist>.comms-roster>summary:hover,
+.janus-comms-bar>janus-comms-invite:hover,
+.janus-comms-bar>janus-comms-invite.state_active {
+  background: rgba(255,255,255,.15);
 }
-janus-comms-chat ui-list[name="chatlist"]>ui-item {
-  padding: 0;
-  text-shadow: 0 0 4px #000;
-  border: 0;
+
+/* ---- Connection status: a single dot in the bar ---- */
+janus-comms-status {
+  display: flex;
+  align-items: center;
+  font-size: .8em;
+}
+janus-comms-status>span {   /* the verbose "Connected as ..." label — hidden in bar mode */
+  display: none;
+}
+janus-comms-status .indicator {
+  display: inline-block;
+  width: .7em;
+  height: .7em;
+  border-radius: 50%;
+  box-shadow: 0 0 4px #000;
+  background: var(--comms-status-disconnected);
+  margin: 0 .25em;
+}
+janus-comms-status .indicator.connecting   { background: var(--comms-status-connecting); }
+janus-comms-status .indicator.connected     { background: var(--comms-status-connected); }
+janus-comms-status .indicator.disconnecting { background: var(--comms-status-disconnecting); }
+janus-comms-status .indicator.private       { background: var(--comms-status-private); }
+
+/* ---- Roster: chip in the bar, roster list floats above ---- */
+janus-comms-userlist.comms-roster {
+  position: relative;
+  display: block;
+  font-size: .85em;
+  z-index: 20;   /* roster popover layers above the chat transcript (z 5) */
+}
+.comms-roster>summary {
+  list-style: none;
+}
+.comms-roster>summary::-webkit-details-marker { display: none; }
+.comms-roster>summary ui-indicator {
+  font-weight: bold;
+  color: var(--comms-accent);
+}
+.comms-roster-popover {
+  position: absolute;
+  left: 0;
+  bottom: 100%;
+  margin-bottom: .4em;
+  min-width: 12em;
+  max-height: var(--comms-log-max-height);
+  overflow-y: auto;
+  padding: .4em .6em;
+  background: rgba(15,15,18,.97);
+  border: 1px solid rgba(255,255,255,.12);
+  border-radius: var(--comms-radius);
+  box-shadow: 0 4px 18px rgba(0,0,0,.55);
+}
+.comms-roster-popover p {
+  margin: 0;
+  font-size: .9em;
+  color: var(--comms-muted);
+  max-width: 16em;
+}
+ui-list[name="userlist_room"] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
+  gap: .1em .6em;
+  font-size: .9em;
+}
+
+/* ---- Invite hub trigger ---- */
+janus-comms-invite {
+  display: inline-block;
+  font-size: 1.05em;
+  line-height: 1;
+  user-select: none;
+}
+
+/* ---- Chat: input lives in the bar, transcript floats above and fades in ---- */
+janus-comms-chat {
+  position: static;   /* the transcript anchors to the panel so it left-aligns to the bar */
+  display: flex;
+  flex: 1 1 15em;
+  min-width: 11em;
+}
+.comms-chat-input {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: .2em;
+}
+janus-comms-chat ui-notificationbutton[name="unread"] {
+  cursor: pointer;
+  font-size: 1em;
+  line-height: 1;
 }
 janus-comms-chat ui-input {
-  width: 100%;
+  flex: 1;
   display: flex;
 }
 janus-comms-chat ui-input>input {
   flex: 1 1;
-  background: rgba(64,64,64,.6);
-  color: white;
-  padding: .25em;
+  background: rgba(0,0,0,.25);
+  color: var(--comms-text);
+  font-family: var(--comms-font);
+  padding: .25em .5em;
   border: 0;
-  border-top: 1px solid #666;
+  border-radius: var(--comms-radius);
+}
+janus-comms-chat ui-input>input:focus {
+  background: rgba(0,0,0,.45);
+  outline: 1px solid var(--comms-accent);
 }
-janus-comms-chat ui-input>input:hover {
-  background: rgba(64,64,64,.8);
+
+/*
+ * The transcript floats above the bar, left-aligned to the panel (not the
+ * input box). It's opaque so nothing behind bleeds through, and sits at a low
+ * z within the panel so the roster/invite surfaces layer cleanly above it.
+ * Visibility is driven explicitly: pinned (click the badge), a transient flash
+ * on new/sent messages, or while the input is focused. No hover trigger — that
+ * fought the pin and made show/hide feel random.
+ */
+janus-comms-chat .comms-log {
+  position: absolute;
+  left: 0;
+  bottom: 100%;
+  margin-bottom: .4em;
+  width: var(--comms-log-width);
+  max-width: 70vw;
+  max-height: var(--comms-log-max-height);
+  overflow-y: auto;
+  padding: .5em .7em;
+  background: rgba(15,15,18,.96);
+  border: 1px solid rgba(255,255,255,.12);
+  border-radius: var(--comms-radius);
+  box-shadow: 0 4px 18px rgba(0,0,0,.55);
+  font-family: var(--comms-font);
+  z-index: 5;
+  opacity: 0;
+  pointer-events: none;
+  /* Empty rotate() forces compositing so rows don't vanish while scrolling */
+  transform: translateY(.4em) rotate(0);
+  transition: opacity 160ms ease, transform 160ms ease;
+}
+janus-comms-panel.comms-log-pinned janus-comms-chat .comms-log,
+janus-comms-panel.comms-log-flash janus-comms-chat .comms-log,
+janus-comms-chat:focus-within .comms-log {
+  opacity: 1;
+  pointer-events: auto;
+  transform: none;
+}
+janus-comms-chat .comms-log>ui-item {
+  padding: 0;
+  text-shadow: 0 0 4px #000;
+  border: 0;
 }
+
+/* ---- Message rows ---- */
 janus-comms-chat .message {
   display: block;
   text-indent: -1em;
@@ -48,7 +215,8 @@ janus-comms-chat .message {
 janus-comms-chat .join,
 janus-comms-chat .part,
 janus-comms-chat .disconnect {
-  color: #999;
+  display: var(--comms-show-presence);
+  color: var(--comms-muted);
   font-weight: normal;
   font-style: italic;
   font-size: .7em;
@@ -57,80 +225,110 @@ janus-comms-chat .join .userid::before,
 janus-comms-chat .part .userid::before,
 janus-comms-chat .disconnect .userid::before {
   content: "-!- ";
-  color: #999;
-}
-janus-comms-chat .join .userid {
-  color: #9ff;
+  color: var(--comms-muted);
 }
+janus-comms-chat .join .userid { color: #9ff; }
 janus-comms-chat .disconnect .userid,
-janus-comms-chat .part .userid {
-  color: #099;
-}
+janus-comms-chat .part .userid { color: #099; }
 janus-comms-chat .chat,
-janus-comms-chat .selfchat {
-  color: #aaa;
-  font-weight: normal;
+janus-comms-chat .selfchat { color: var(--comms-text); font-weight: normal; }
+janus-comms-chat .userid { color: var(--comms-accent); font-weight: 900; }
+janus-comms-chat .selfchat .userid { color: #fff; font-weight: bold; }
+janus-comms-chat .chat .userid::after,
+janus-comms-chat .selfchat .userid::after { content: ':'; color: #666; }
+janus-comms-chat .print .userid { display: none; }
+janus-comms-chat .print { color: white; }
+
+/* Log scrollbar */
+janus-comms-chat .comms-log::-webkit-scrollbar,
+.comms-roster-popover::-webkit-scrollbar { width: 6px; }
+janus-comms-chat .comms-log::-webkit-scrollbar-track,
+.comms-roster-popover::-webkit-scrollbar-track { background: rgba(255,255,255,.05); }
+janus-comms-chat .comms-log::-webkit-scrollbar-thumb,
+.comms-roster-popover::-webkit-scrollbar-thumb { background: var(--comms-accent); border-radius: 3px; }
+
+/* Narrow screens: keep only the essentials */
+@media (max-width: 48em) {
+  janus-comms-chat { flex-basis: 7em; }
+  janus-comms-chat .comms-log { width: 80vw; }
 }
-janus-comms-chat .userid {
-  color: #4cb96f;
-  font-weight: 900;
+
+/*
+ * Popupbutton popups (the invite menu, the mic/device picker) are rendered at
+ * the document root, so they must float above the comms panel's stacking
+ * context (z 100) — otherwise they render *behind* the bar and its transcript.
+ */
+ui-window.state_popup {
+  z-index: 10000;
 }
-janus-comms-chat .selfchat .userid {
+
+/* ---- Invite popup menu (rendered at document root, outside the panel) ---- */
+ui-window.janus-comms-invite-popup {
+  background: rgba(15,15,18,.98);
+  border: 1px solid rgba(255,255,255,.14);
+  border-radius: .5em;
+  box-shadow: 0 6px 24px rgba(0,0,0,.6);
   color: #fff;
-  font-weight: bold;
 }
-/*
-janus-comms-chat .chat .userid::before,
-janus-comms-chat .selfchat .userid::before {
-  content: '<';
-  color: #666;
-}
-*/
-janus-comms-chat .chat .userid::after,
-janus-comms-chat .selfchat .userid::after {
-  content: ':';
-  color: #666;
+.janus-comms-invite-menu {
+  display: flex;
+  flex-direction: column;
+  gap: .1em;
+  min-width: 13em;
+  max-width: 90vw;
+  max-height: 80vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: .3em;
+}
+/* Reset the site's uppercase/large/faded button look inside the menu */
+.janus-comms-invite-popup ui-button {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  text-align: left;
+  text-transform: none;
+  font-size: .95em;
+  font-weight: normal;
+  line-height: 1.25;
+  white-space: nowrap;
+  color: #fff;
+  opacity: 1;
+  padding: .5em .6em;
+  border: 0;
+  border-radius: .4em;
+  box-shadow: none;
+  background: transparent;
+  cursor: pointer;
+  transition: background 120ms linear;
 }
-janus-comms-chat .print .userid {
-  display: none;
+.janus-comms-invite-popup ui-button:hover {
+  background: rgba(255,255,255,.12);
 }
-janus-comms-chat .print {
-  color: white;
+.janus-comms-invite-popup janus-voip-client-callbutton {
+  display: block;
 }
-janus-comms-status {
+.janus-comms-invite-popup .janus-comms-schedule {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  gap: .3em;
+  padding: .5em .6em .3em;
+  margin-top: .15em;
+  border-top: 1px solid rgba(255,255,255,.15);
 }
-janus-comms-status {
+.janus-comms-invite-popup .janus-comms-schedule label {
   font-size: .8em;
+  color: #bbb;
 }
-janus-comms-status .indicator {
-  border: 1px solid black;
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  border-radius: .5em;
-  box-shadow: 0 0 5px black;
-  background: #900;
-  margin: .2em .4em .2em .2em;
-}
-janus-comms-status .indicator.connecting {
-  background: #990;
-}
-janus-comms-status .indicator.connected {
-  background: #090;
-}
-janus-comms-status .indicator.disconnecting {
-  background: #999;
-}
-janus-comms-status .indicator.private {
-  background: #aaa;
-}
-ui-list[name="userlist_room"] {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
-  font-size: .75em;
+.janus-comms-invite-popup .janus-comms-schedule input {
+  padding: .35em;
+  border-radius: .3em;
+  border: 1px solid #555;
+  background: #222;
+  color: #eee;
+  font-size: .9em;
 }
+
 janus-voip-picker>ul li {
   display: flex;
   xflex: 1;

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

@@ -1,5 +1,6 @@
-<janus-comms-status name="status"></janus-comms-status>
-
-<janus-comms-userlist labelfont="{labelfont}"></janus-comms-userlist>
-<!-- janus-voip-client></janus-voip-client -->
-<janus-comms-chat name="chat"></janus-comms-chat>
+<div class="janus-comms-bar">
+  <janus-comms-status name="status"></janus-comms-status>
+  <janus-comms-userlist labelfont="{labelfont}"></janus-comms-userlist>
+  <janus-comms-invite></janus-comms-invite>
+  <janus-comms-chat name="chat"></janus-comms-chat>
+</div>

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

@@ -126,13 +126,8 @@ elation.elements.define('janus-comms-userlist', class extends elation.elements.u
     this.userlist_room = this.userlist_room;
     this.userlist_online = this.userlist_online;
     this.userlist_friends = this.userlist_friends;
-    if (room.private) {
-      this.parentNode.elements.chat.open = false;
-      this.elements.userlist_details.open = false;
-    } else {
-      this.parentNode.elements.chat.open = true;
-      this.elements.userlist_details.open = true;
-    }
+    // The roster is a collapsed popover chip in the bar now; leave it closed
+    // by default rather than forcing it (and the chat) open on room load.
     this.updateUsers();
     elation.events.add(this.room, 'join', ev => {
       setTimeout(() => {
@@ -204,7 +199,7 @@ elation.elements.define('janus-comms-chat', class extends elation.elements.base
       player.disable();
       this.updateUnread(0, true);
     }
-    this.elements.chatinput.onblur = (ev) => this.elements.chatinput.placeholder = 'Press T for text chat';
+    this.elements.chatinput.onblur = (ev) => this.elements.chatinput.placeholder = 'Press T to chat…';
 
     window.addEventListener('keydown', (ev) => {
       // FIXME - this should set up a bindable context in the engine's control system
@@ -218,12 +213,29 @@ elation.elements.define('janus-comms-chat', class extends elation.elements.base
     });
     elation.events.add(janus._target, 'clientprint', (ev) => this.handleClientPrint(ev.data));
     elation.events.add(this.janusweb, 'room_load_start', (ev) => { this.updateRoom(ev.element); });
-    // FIXME - first element with the current design is a <detail> element, but this is fragile if that changes
-    this.elements[0].addEventListener('toggle', (ev) => this.elements.chatinput.focus());
-    this.updateRoom(room);
-    if (window.innerWidth < 760) {
-      this.elements.toggle.open = false;
+
+    // The transcript floats above the bar and fades in on activity. Clicking
+    // the unread badge pins it open so it can be read/scrolled at leisure.
+    if (this.elements.unread) {
+      this.elements.unread.addEventListener('click', (ev) => this.togglePin());
     }
+    this.updateRoom(room);
+  }
+  flashLog(duration = 6000) {
+    // Transient reveal on activity. Fades after `duration` unless the log is
+    // pinned or the input is focused (both handled purely in CSS).
+    let panel = this.closest('janus-comms-panel');
+    if (!panel) return;
+    panel.classList.add('comms-log-flash');
+    if (this.flashtimer) clearTimeout(this.flashtimer);
+    this.flashtimer = setTimeout(() => panel.classList.remove('comms-log-flash'), duration);
+  }
+  togglePin() {
+    // Explicit sticky show/hide — clicking the badge keeps the transcript up
+    // until clicked again, independent of the transient flash.
+    let panel = this.closest('janus-comms-panel');
+    if (!panel) return;
+    if (panel.classList.toggle('comms-log-pinned')) this.updateUnread(0, true);
   }
   scrollToBottom() {
     setTimeout(() => {
@@ -279,6 +291,7 @@ if (!this.elements.chatmessages) return;
 
     this.scrollToBottom();
     this.updateUnread(1);
+    this.flashLog();
   }
   sendMessage(msg) {
     if (msg && msg.length > 0) {
@@ -293,6 +306,7 @@ if (!this.elements.chatmessages) return;
       });
       this.elements.chatinput.value = '';
       this.scrollToBottom();
+      this.flashLog();
     }
   }
   handleClientPrint(msg) {
@@ -316,7 +330,9 @@ if (!this.elements.chatmessages) return;
     this.elements.unread.count = this.numunread;
   }
   updateRoom(newroom) {
-    this.elements.toggle.open = !newroom.private;
+    // Retained for room_load_start wiring. The transcript now lives in a
+    // fade-in overlay rather than a <details> toggle, so there is no open
+    // state to sync here.
   }
 });
 

package/media/assets/webui/apps/comms/userlist.html

@@ -1,22 +1,15 @@
 {?room.private}
-<details name="userlist_details">
-        <summary>No online users</summary>
-        <p>This room is marked as private.  You are not broadcasting your location while here - others can't see you, and you can't see them.</p>
+<details name="userlist_details" class="comms-roster">
+  <summary title="Private room">&#128100; <ui-indicator name="roomusers" value="0"></ui-indicator></summary>
+  <div class="comms-roster-popover">
+    <p>This room is private. You're not broadcasting your location while here &mdash; others can't see you, and you can't see them.</p>
+  </div>
 </details>
 {:else}
-<details open name="userlist_details">
-   <summary>Online Users (<ui-indicator name="roomusers" value="0"></ui-indicator>)</summary>
-      <ui-list name="userlist_room" emptycontent="No other users in this room"></ui-list>
-      <!-- ui-tabs showcounts="true">
-        <ui-tab name="roomusers" label="Room">
-          <ui-list name="userlist_room" emptycontent="No other users in this room"></ui-list>
-        </ui-tab>
-        <ui-tab name="globalusers" label="Online">
-          <ui-list name="userlist_online" emptycontent="No users online"></ui-list>
-        </ui-tab>
-        <ui-tab name="friends" label="Friends">
-          <ui-list name="userlist_friends" emptycontent="No friends online"></ui-list>
-        </ui-tab>
-      </ui-tabs -->
+<details name="userlist_details" class="comms-roster">
+  <summary title="People in this room">&#128100; <ui-indicator name="roomusers" value="0"></ui-indicator></summary>
+  <div class="comms-roster-popover">
+    <ui-list name="userlist_room" emptycontent="No other users in this room"></ui-list>
+  </div>
 </details>
 {/room.private}