From 53b29d1452effc690fa4243da201e8dadf061b40 Mon Sep 17 00:00:00 2001 From: Michael Jumper Date: Mon, 5 Nov 2012 12:24:55 -0800 Subject: [PATCH] Improve styling, add disable sound setting. --- guacamole/src/main/webapp/index.xhtml | 48 +++++++++++-- .../src/main/webapp/scripts/interface.js | 68 +++++++++---------- guacamole/src/main/webapp/styles/login.css | 2 + 3 files changed, 78 insertions(+), 40 deletions(-) diff --git a/guacamole/src/main/webapp/index.xhtml b/guacamole/src/main/webapp/index.xhtml index e98ddc65e..4740bfe73 100644 --- a/guacamole/src/main/webapp/index.xhtml +++ b/guacamole/src/main/webapp/index.xhtml @@ -92,19 +92,45 @@

Settings

+ +
- Auto-fit display to browser window. + Auto-fit display to browser window
- If checked, remote displays are automatically - scaled to exactly fit within the browser window. If - unchecked, remote displays are always shown at their - natural resolution, even if doing so causes the display - to extend beyond the bounds of the window. +

+ If checked, remote displays are automatically + scaled to exactly fit within the browser window. If + unchecked, remote displays are always shown at their + natural resolution, even if doing so causes the + display to extend beyond the bounds of the window. +

+ + +
+
+ + Disable sound +
+
+

+ If on a device or network where bandwidth usage must + be kept to a minimum, you may wish to check this box + and disable sound. This can also be necessary if a + device doesn't actually support sound, but claims + to, resulting in wasted bandwidth. +

+

+ Changing this setting will only affect + future connections. +

+
+
+
@@ -121,12 +147,17 @@ var state = new GuacamoleSessionState(); var auto_fit = document.getElementById("auto-fit"); + var disable_sound = document.getElementById("disable-sound"); var clipboard = document.getElementById("clipboard"); auto_fit.onchange = auto_fit.onclick = function() { state.setProperty("auto-fit", auto_fit.checked); }; + disable_sound.onchange = disable_sound.onclick = function() { + state.setProperty("disable-sound", disable_sound.checked); + }; + clipboard.onchange = function() { state.setProperty("clipboard", clipboard.value); }; @@ -136,6 +167,8 @@ clipboard.value = new_state[name]; else if (name == "auto-fit") auto_fit.checked = new_state[name]; + else if (name == "disable-sound") + disable_sound.checked = new_state[name]; }; // Update clipboard with current data @@ -149,6 +182,9 @@ // Update auto-fit setting in UI auto_fit.checked = state.getProperty("auto-fit"); + // Update disable-sound setting in UI + disable_sound.checked = state.getProperty("disable-sound"); + // Constructs the URL for a client which connects to the connection // with the given id. function getClientURL(id) { diff --git a/guacamole/src/main/webapp/scripts/interface.js b/guacamole/src/main/webapp/scripts/interface.js index 0276b0d2a..76933073c 100644 --- a/guacamole/src/main/webapp/scripts/interface.js +++ b/guacamole/src/main/webapp/scripts/interface.js @@ -35,7 +35,8 @@ var GuacamoleUI = { }, "state" : document.getElementById("statusText"), - "client" : null + "client" : null, + "sessionState" : new GuacamoleSessionState() }; @@ -145,38 +146,39 @@ GuacamoleUI.supportedVideo = []; }; // Query audio support - (function () { - var probably_supported = []; - var maybe_supported = []; + if (!GuacamoleUI.sessionState.getProperty("disable-sound")) + (function () { + var probably_supported = []; + var maybe_supported = []; - // Build array of supported audio formats - [ - 'audio/ogg; codecs="vorbis"', - 'audio/mp4; codecs="mp4a.40.5"', - 'audio/mpeg; codecs="mp3"', - 'audio/webm; codecs="vorbis"', - 'audio/wav; codecs=1' - ].forEach(function(mimetype) { + // Build array of supported audio formats + [ + 'audio/ogg; codecs="vorbis"', + 'audio/mp4; codecs="mp4a.40.5"', + 'audio/mpeg; codecs="mp3"', + 'audio/webm; codecs="vorbis"', + 'audio/wav; codecs=1' + ].forEach(function(mimetype) { - var audio = new Audio(); - var support_level = audio.canPlayType(mimetype); + var audio = new Audio(); + var support_level = audio.canPlayType(mimetype); - // Trim semicolon and trailer - var semicolon = mimetype.indexOf(";"); - if (semicolon != -1) - mimetype = mimetype.substring(0, semicolon); + // Trim semicolon and trailer + var semicolon = mimetype.indexOf(";"); + if (semicolon != -1) + mimetype = mimetype.substring(0, semicolon); - // Partition by probably/maybe - if (support_level == "probably") - probably_supported.push(mimetype); - else if (support_level == "maybe") - maybe_supported.push(mimetype); + // Partition by probably/maybe + if (support_level == "probably") + probably_supported.push(mimetype); + else if (support_level == "maybe") + maybe_supported.push(mimetype); - }); + }); - Array.prototype.push.apply(GuacamoleUI.supportedAudio, probably_supported); - Array.prototype.push.apply(GuacamoleUI.supportedAudio, maybe_supported); - })(); + Array.prototype.push.apply(GuacamoleUI.supportedAudio, probably_supported); + Array.prototype.push.apply(GuacamoleUI.supportedAudio, maybe_supported); + })(); // Query video support (function () { @@ -222,8 +224,6 @@ GuacamoleUI.attach = function(guac) { var guac_display = guac.getDisplay(); - var state = new GuacamoleSessionState(); - // Set document title appropriately, based on prefix and connection name function updateTitle() { @@ -370,7 +370,7 @@ GuacamoleUI.attach = function(guac) { function updateDisplayScale() { // If auto-fit is enabled, scale display - if (state.getProperty("auto-fit")) { + if (GuacamoleUI.sessionState.getProperty("auto-fit")) { // Calculate scale to fit screen var fit_scale = Math.min( @@ -425,8 +425,8 @@ GuacamoleUI.attach = function(guac) { title_prefix = null; // Update clipboard with current data - if (state.getProperty("clipboard")) - guac.setClipboard(state.getProperty("clipboard")); + if (GuacamoleUI.sessionState.getProperty("clipboard")) + guac.setClipboard(GuacamoleUI.sessionState.getProperty("clipboard")); // Regularly update screenshot if storage available if (localStorage) @@ -492,10 +492,10 @@ GuacamoleUI.attach = function(guac) { // Server copy handler guac.onclipboard = function(data) { - state.setProperty("clipboard", data); + GuacamoleUI.sessionState.setProperty("clipboard", data); }; - state.onchange = function(old_state, new_state, name) { + GuacamoleUI.sessionState.onchange = function(old_state, new_state, name) { if (name == "clipboard") guac.setClipboard(new_state[name]); else if (name == "auto-fit") diff --git a/guacamole/src/main/webapp/styles/login.css b/guacamole/src/main/webapp/styles/login.css index 1d136526d..f801cdfa9 100644 --- a/guacamole/src/main/webapp/styles/login.css +++ b/guacamole/src/main/webapp/styles/login.css @@ -319,6 +319,8 @@ div#recent-connections .protocol { #clipboardDiv textarea { width: 100%; + border: 1px solid #AAA; + border-radius: 0.25em; } #settings dt {