repo: janusweb
action: commit
revision: 
path_from: 
revision_from: 0519792e955ed1e07bf9880087e816869ad8db91:
path_to: 
revision_to: 

commit 0519792e955ed1e07bf9880087e816869ad8db91
Author: James Baicoianu 
Date:   Sat Feb 27 16:04:55 2021 -0800

    Added sound, voip, share, and debug buttons

diff --git a/media/assets/webui/apps/buttons/buttons.css b/media/assets/webui/apps/buttons/buttons.css

--- a/media/assets/webui/apps/buttons/buttons.css
+++ b/media/assets/webui/apps/buttons/buttons.css
@@ -1,6 +1,8 @@
 janus-button-webvr,
 janus-button-webar,
 janus-ui-editor-button,
+janus-button-audio,
+janus-button-voip,
 janus-button-start {
   border: none;
   border-radius: .5em;
@@ -15,21 +17,28 @@ janus-button-start {
   background-image: linear-gradient(#484e55, #3a3f44 60%, #313539);
   background-color: transparent;
   display: inline-block;
+  position: relative;
 }
 janus-button-webvr[hover],
 janus-button-webar[hover],
+janus-button-audio[hover],
+janus-button-voip[hover],
 janus-ui-editor-button[hover],
 janus-button-start[hover] {
   background-image: linear-gradient(#323232, #404142 40%, #393b3d);
 }
 janus-button-webvr:active,
 janus-button-webar:active,
+janus-button-audio:active,
+janus-button-voip:active,
 janus-ui-editor-button:active,
 janus-button-start:active {
   background-image: linear-gradient(#020202, #101112 40%, #191b1d);
 }
 janus-button-webvr[disabled],
 janus-button-webar[disabled],
+janus-button-audio[disabled],
+janus-button-voip[disabled],
 janus-button-start[disabled],
 janus-ui-editor-button[disabled] {
   color: #999;
@@ -42,6 +51,9 @@ janus-ui-buttons>ui-buttonbar>ui-button:first-of-type,
 janus-ui-buttons>ui-buttonbar>ui-button:last-of-type,
 janus-ui-buttons>ui-buttonbar>janus-button-webvr,
 janus-ui-buttons>ui-buttonbar>janus-button-webar,
+janus-ui-buttons>ui-buttonbar>janus-button-audio,
+janus-ui-buttons>ui-buttonbar>janus-button-voip,
+janus-ui-buttons>ui-buttonbar>janus-button-share,
 janus-ui-buttons>ui-buttonbar>janus-ui-settings-button,
 janus-ui-buttons>ui-buttonbar>janus-ui-editor-button {
     width: 60px;
@@ -58,3 +70,31 @@ janus-ui-buttons>ui-buttonbar>janus-ui-editor-button {
 janus-ui-buttons>ui-buttonbar>ui-button[name="fullscreen"] {
   font-size: 1.5em;
 }
+janus-button-audio>ui-window,
+janus-button-voip>ui-window {
+  line-height: normal;
+}
+ui-panel[top] janus-button-audio>ui-window,
+ui-panel[top] janus-button-voip>ui-window {
+  top: 40px;
+  bottom: auto;
+}
+ui-panel[bottom] janus-button-audio>ui-window,
+ui-panel[bottom] janus-button-voip>ui-window {
+  bottom: 40px;
+  top: auto;
+}
+ui-panel[left] janus-button-audio>ui-window,
+ui-panel[left] janus-button-voip>ui-window {
+  left: 0;
+  right: auto;
+}
+ui-panel[right] janus-button-audio>ui-window,
+ui-panel[right] janus-button-voip>ui-window {
+  right: 0;
+  left: auto;
+}
+janus-button-audio:focus>ui-window,
+janus-button-voip:focus>ui-window {
+  display: block;
+}
diff --git a/media/assets/webui/apps/buttons/buttons.html b/media/assets/webui/apps/buttons/buttons.html

--- a/media/assets/webui/apps/buttons/buttons.html
+++ b/media/assets/webui/apps/buttons/buttons.html
@@ -1,9 +1,11 @@
       
         {#showedit}Edit{/showedit}
-        {#showshare}Share{/showshare}
+        {#showshare}Share{/showshare}
         {#showfullscreen}⛶{/showfullscreen}
         {#showvr}{/showvr}
         {#showar}{/showar}
+        {#showaudio}Audio{/showaudio}
+        {#showvoip}Voice{/showvoip}
         {#showsettings}Config{/showsettings}
       

diff --git a/media/assets/webui/apps/buttons/buttons.js b/media/assets/webui/apps/buttons/buttons.js

--- a/media/assets/webui/apps/buttons/buttons.js
+++ b/media/assets/webui/apps/buttons/buttons.js
@@ -8,6 +8,8 @@ elation.elements.define('janus.ui.buttons', class extends elation.elements.base
       showvr: { type: 'boolean', default: true },
       showar: { type: 'boolean', default: true },
       showsettings: { type: 'boolean', default: true },
+      showaudio: { type: 'boolean', default: true },
+      showvoip: { type: 'boolean', default: true },
     });
   }
   create() {
@@ -17,6 +19,8 @@ elation.elements.define('janus.ui.buttons', class extends elation.elements.base
     if (this.showvr == 'false') this.showvr = false;
     if (this.showar == 'false') this.showar = false;
     if (this.showsettings == 'false') this.showsettings = false;
+    if (this.showaudio == 'false') this.showaudio = false;
+    if (this.showvoip == 'false') this.showvoip = false;
     this.innerHTML = elation.template.get('janus.ui.buttons', this);
   }
 });
@@ -77,30 +81,26 @@ elation.elements.define('janus-button-webvr', class extends elation.elements.ui.
       inactivelabel: { type: 'string', default: 'VR' },
     });

-    this.label = this.activelabel;
+    this.label = this.inactivelabel;
     super.create();
     this.view = janus.engine.client.view;

     elation.events.add(janus.engine.client, 'xrsessionstart', ev => this.handleXRSessionStart(ev));
     elation.events.add(janus.engine.client, 'xrsessionend', ev => this.handleXRSessionEnd(ev));

+    this.disabled = true;
     if ('xr' in navigator) {
       this.label = this.inactivelabel;
       this.xr = true;
-    } else if ('getVRDevices' in navigator) {
-      window.addEventListener( 'vrdisplayconnect', (ev) => {
-        this.show();
-      }, false );
-
-      window.addEventListener( 'vrdisplaydisconnect', (ev) => {
-        this.hide();
-      }, false );
-
-      window.addEventListener( 'vrdisplaypresentchange', (ev) => {
-        if (this.view.vrdisplay.isPresenting) {
+      navigator.xr.isSessionSupported('immersive-vr').then(supported => {
+        if (supported) {
+          this.disabled = false;
         } else {
+          this.title = 'WebXR supported, but no VR devices found';
         }
-      }, false );
+      });
+    } else {
+      this.title = 'WebXR is not supported in this browser';
     }
   }
   onactivate(ev) {
@@ -189,3 +189,178 @@ elation.elements.define('janus-button-start', class extends elation.elements.ui.
     //janus.ui.show();
   }
 });
+elation.elements.define('janus-button-audio', class extends elation.elements.ui.popupbutton {
+  init() {
+    super.init();
+    this.defineAttribute('muted', { type: 'boolean' });
+  }
+  create() {
+    this.popupcontent = `
+      
+      
+    `;
+    super.create();
+    this.createPopup();
+    this.hidePopup();
+    elation.events.add(this.popup.content.elements['volume_env'], 'change', (ev) => this.adjustEnvironmentVolume(ev.data));
+    //this.addEventListener('click', (ev) => this.handleClick(ev));
+
+    let soundsystem = janus.engine.systems.sound;
+    elation.events.add(soundsystem, 'mute', ev => this.muted = true);
+    elation.events.add(soundsystem, 'unmute', ev => this.muted = false);
+/*
+    if (!soundsystem.canPlaySound) {
+      this.muted = true;
+    }
+*/
+    this.updateMuteState();
+    elation.events.add(soundsystem, 'sound_enabled', (ev) => this.updateMuteState());
+  }
+  adjustEnvironmentVolume(volume) {
+    if (room.audionodes) {
+      room.audionodes.gain.gain.value = volume;
+      this.updateMuteState();
+    }
+  }
+  adjustVOIPVolume(volume) {
+    // TODO
+  }
+  updateMuteState() {
+    let soundsystem = janus.engine.systems.sound;
+    let muted = !(soundsystem.canPlaySound && soundsystem.enabled);
+    if (room.audionodes) {
+      muted = muted || room.audionodes.gain.gain.value == 0;
+    }
+    this.muted = muted;
+  }
+});
+elation.elements.define('janus-button-voip', class extends elation.elements.ui.popupbutton {
+  init() {
+    super.init();
+    this.defineAttribute('active', { type: 'boolean' });
+    this.defineAttribute('muted', { type: 'boolean' });
+  }
+  create() {
+    this.popupcontent = ``;
+    super.create();
+    this.createPopup();
+    this.hidePopup();
+    elation.events.add(this.popup.content.elements['picker'], 'voip-picker-select', (ev) => this.hidePopup());
+    this.updateMuteState();
+//setInterval(() => this.updateMuteState(), 1000);
+  }
+  updateMuteState() {
+    //let muted = !(soundsystem.canPlaySound && soundsystem.enabled);
+    let voipclient = this.voipclient;
+    if (!this.voipclient) {
+      voipclient = document.querySelector('janus-voip-client');
+      this.voipclient = voipclient;
+      if (this.voipclient) {
+        elation.events.add(this.voipclient, 'init', ev => this.updateMuteState());
+      }
+    }
+    let muted = true;
+    if (voipclient) {
+      if (voipclient.localuser && !this.registeredEvents) {
+        elation.events.add(voipclient.localuser, 'mute', () => this.updateMuteState());
+        elation.events.add(voipclient.localuser, 'unmute', () => this.updateMuteState());
+        elation.events.add(voipclient.localuser, 'update', ev => this.updateMuteState());
+        this.registeredEvents = true;
+      }
+      if (voipclient.localuser && !voipclient.localuser.muted) {
+        muted = false;
+      }
+    }
+    if (this.muted != muted) this.muted = muted;
+  }
+});
+elation.elements.define('janus-button-share', class extends elation.elements.ui.button {
+  init() {
+    super.init();
+  }
+/*
+  create() {
+    this.popupcontent = ``;
+    super.create();
+    this.createPopup();
+    this.hidePopup();
+    elation.events.add(this.popup.content.elements['picker'], 'voip-picker-select', (ev) => this.hidePopup());
+    this.updateMuteState();
+//setInterval(() => this.updateMuteState(), 1000);
+  }
+*/
+  handleClick(ev) {
+    if (navigator.share) {
+      player.disable();
+      janus.engine.client.screenshot()
+        .then(image => fetch(image))
+        .then(res => res.blob())
+        .then(blob => {
+          var file = new File([blob], "fivars-screenshot.jpg", {type: 'image/jpeg'});
+console.log('share the file', file);
+
+          navigator.share({
+            title: 'FIVARS Festival',
+            text: 'Come join me',
+            url: document.location.href,
+          }).then(() => console.log('shared!'))
+            .catch(error => console.log('sharing error', error));
+        });
+    }
+  }
+});
+elation.elements.define('janus-button-debug', class extends elation.elements.ui.popupbutton {
+  init() {
+    super.init();
+  }
+  create() {
+    this.popupcontent = ``;
+    super.create();
+    this.createPopup();
+    this.hidePopup();
+  }
+  showPopup() {
+    super.showPopup();
+    let stats = room.getDebugStats();
+    let showTextures = function(resolutions) {
+      let str = '';
+      for (let res in resolutions) {
+        str += `
${res} `;
+        resolutions[res].forEach(img => {
+          str += ``;
+        });
+        str += `
`;
+      }
+      return str;
+    }
+    this.popup.content.fromString(`
+

+  
Objects
+  

+    

+      Mesh: ${stats.objects.mesh}
+      

+        
Vertices: ${stats.geometry.verts}
+        
Faces: ${stats.geometry.faces}
+        
Materials: ${stats.materials.count}
+      
 
+    
+    
Empty: ${stats.objects.empty}
+    

+      Lights: ${stats.objects.light}
+      

+        
Spot: ${stats.lights.spot} (${stats.lights.spot_shadow} with shadows)
+        
Point: ${stats.lights.point} (${stats.lights.point_shadow} with shadows)
+        
Directional: ${stats.lights.directional} (${stats.lights.directional_shadow} with shadows)
+      
+    
+    

+      Textures: ${stats.textures.count}
+      

+        ${showTextures(stats.textures.resolutions)}
+      
+    
+  
+    `);
+  }
+});
diff --git a/media/assets/webui/apps/buttons/buttons.json b/media/assets/webui/apps/buttons/buttons.json

--- a/media/assets/webui/apps/buttons/buttons.json
+++ b/media/assets/webui/apps/buttons/buttons.json
@@ -6,6 +6,7 @@
     "./buttons.css"
   ],
   "scripts": [
+    "./share-min.js",
     "./buttons.js"
   ]
 }

-----END OF PAGE-----