-- Leo's gemini proxy
-- Connecting to git.thebackupbox.net:1965...
-- Connected
-- Sending request
-- Meta line: 20 text/gemini
repo: janusweb action: commit revision: path_from: revision_from: 0519792e955ed1e07bf9880087e816869ad8db91: path_to: revision_to:
commit 0519792e955ed1e07bf9880087e816869ad8db91
Author: James Baicoianu <james_github@baicoianu.com>
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 @@
<ui-buttonbar>
{#showedit}<janus-ui-editor-button>Edit</janus-ui-editor-button>{/showedit}
- {#showshare}<ui-button name="share" onclick="janus.engine.client.shareScreenshot()">Share</ui-button>{/showshare}
+ {#showshare}<janus-button-share>Share</janus-button-share>{/showshare}
{#showfullscreen}<ui-button name="fullscreen" onclick="janus.engine.client.toggleFullscreen()">⛶</ui-button>{/showfullscreen}
{#showvr}<janus-button-webvr></janus-button-webvr>{/showvr}
{#showar}<janus-button-webar></janus-button-webar>{/showar}
+ {#showaudio}<janus-button-audio>Audio</janus-button-audio>{/showaudio}
+ {#showvoip}<janus-button-voip>Voice</janus-button-voip>{/showvoip}
{#showsettings}<janus-ui-settings-button>Config</janus-ui-settings-button>{/showsettings}
</ui-buttonbar>
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 = `
+ <ui-slider name="volume_env" label="Environment" min="0" max="1.2" value="1"></ui-slider>
+ <ui-slider name="volume_voip" label="Voice Chat" min="0" max="1.2" value="1"></ui-slider>
+ `;
+ 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 = `<janus-voip-picker name="voipsettings"></janus-voip-picker>`;
+ 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 = `<janus-voip-picker name="voipsettings"></janus-voip-picker>`;
+ 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 += `<li>${res} `;
+ resolutions[res].forEach(img => {
+ str += `<img src="${img.src}" style="max-width: 32px; max-height: 32px; display: inline-block; ">`;
+ });
+ str += `</li>`;
+ }
+ return str;
+ }
+ this.popup.content.fromString(`
+<section>
+ <h2>Objects</h2>
+ <ul>
+ <li>
+ Mesh: ${stats.objects.mesh}
+ <ul>
+ <li>Vertices: ${stats.geometry.verts}</li>
+ <li>Faces: ${stats.geometry.faces}</li>
+ <li>Materials: ${stats.materials.count}</li>
+ </ul>
+ </li>
+ <li>Empty: ${stats.objects.empty}</li>
+ <li>
+ Lights: ${stats.objects.light}
+ <ul>
+ <li>Spot: ${stats.lights.spot} (${stats.lights.spot_shadow} with shadows)</li>
+ <li>Point: ${stats.lights.point} (${stats.lights.point_shadow} with shadows)</li>
+ <li>Directional: ${stats.lights.directional} (${stats.lights.directional_shadow} with shadows)</li>
+ </ul>
+ </li>
+ <li>
+ Textures: ${stats.textures.count}
+ <ul>
+ ${showTextures(stats.textures.resolutions)}
+ </ul>
+ </li>
+ </ul>
+ `);
+ }
+});
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-----
-- Response ended
-- Page fetched on Sun Jun 2 18:14:34 2024