safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-09 22:51:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve styling, add disable sound setting.

Browse Source
This commit is contained in:
Michael Jumper
2012-11-05 12:24:55 -08:00
parent fe7a51c58b
commit 53b29d1452
3 changed files with 78 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
guacamole/src/main/webapp/index.xhtml
View File

@@ -92,19 +92,45 @@
<h2>Settings</h2> <h2>Settings</h2>
<div id="settings"> <div id="settings">
<!-- Auto-fit display -->
<dl> <dl>
<dt> <dt>
<input type="checkbox" id="auto-fit"/> <input type="checkbox" id="auto-fit"/>
Auto-fit display to browser window. Auto-fit display to browser window
</dt> </dt>
<dd> <dd>
If checked, remote displays are automatically <p>
scaled to exactly fit within the browser window. If If checked, remote displays are automatically
unchecked, remote displays are always shown at their scaled to exactly fit within the browser window. If
natural resolution, even if doing so causes the display unchecked, remote displays are always shown at their
to extend beyond the bounds of the window. natural resolution, even if doing so causes the
display to extend beyond the bounds of the window.
</p>
</dd> </dd>
</dl> </dl>
<!-- Enable/disable sound -->
<dl>
<dt>
<input type="checkbox" id="disable-sound"/>
Disable sound
</dt>
<dd>
<p>
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.
</p>
<p>
<strong>Changing this setting will only affect
future connections.</strong>
</p>
</dd>
</dl>
</div> </div>
</div> </div>
@@ -121,12 +147,17 @@
var state = new GuacamoleSessionState(); var state = new GuacamoleSessionState();
var auto_fit = document.getElementById("auto-fit"); var auto_fit = document.getElementById("auto-fit");
var disable_sound = document.getElementById("disable-sound");
var clipboard = document.getElementById("clipboard"); var clipboard = document.getElementById("clipboard");
auto_fit.onchange = auto_fit.onclick = function() { auto_fit.onchange = auto_fit.onclick = function() {
state.setProperty("auto-fit", auto_fit.checked); state.setProperty("auto-fit", auto_fit.checked);
}; };
disable_sound.onchange = disable_sound.onclick = function() {
state.setProperty("disable-sound", disable_sound.checked);
};
clipboard.onchange = function() { clipboard.onchange = function() {
state.setProperty("clipboard", clipboard.value); state.setProperty("clipboard", clipboard.value);
}; };
@@ -136,6 +167,8 @@
clipboard.value = new_state[name]; clipboard.value = new_state[name];
else if (name == "auto-fit") else if (name == "auto-fit")
auto_fit.checked = new_state[name]; auto_fit.checked = new_state[name];
else if (name == "disable-sound")
disable_sound.checked = new_state[name];
}; };
// Update clipboard with current data // Update clipboard with current data
@@ -149,6 +182,9 @@
// Update auto-fit setting in UI // Update auto-fit setting in UI
auto_fit.checked = state.getProperty("auto-fit"); 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 // Constructs the URL for a client which connects to the connection
// with the given id. // with the given id.
function getClientURL(id) { function getClientURL(id) {

68
guacamole/src/main/webapp/scripts/interface.js
View File

@@ -35,7 +35,8 @@ var GuacamoleUI = {
}, },
"state" : document.getElementById("statusText"), "state" : document.getElementById("statusText"),
"client" : null "client" : null,
"sessionState" : new GuacamoleSessionState()
}; };
@@ -145,38 +146,39 @@ GuacamoleUI.supportedVideo = [];
}; };
// Query audio support // Query audio support
(function () { if (!GuacamoleUI.sessionState.getProperty("disable-sound"))
var probably_supported = []; (function () {
var maybe_supported = []; var probably_supported = [];
var maybe_supported = [];
// Build array of supported audio formats // Build array of supported audio formats
[ [
'audio/ogg; codecs="vorbis"', 'audio/ogg; codecs="vorbis"',
'audio/mp4; codecs="mp4a.40.5"', 'audio/mp4; codecs="mp4a.40.5"',
'audio/mpeg; codecs="mp3"', 'audio/mpeg; codecs="mp3"',
'audio/webm; codecs="vorbis"', 'audio/webm; codecs="vorbis"',
'audio/wav; codecs=1' 'audio/wav; codecs=1'
].forEach(function(mimetype) { ].forEach(function(mimetype) {
var audio = new Audio(); var audio = new Audio();
var support_level = audio.canPlayType(mimetype); var support_level = audio.canPlayType(mimetype);
// Trim semicolon and trailer // Trim semicolon and trailer
var semicolon = mimetype.indexOf(";"); var semicolon = mimetype.indexOf(";");
if (semicolon != -1) if (semicolon != -1)
mimetype = mimetype.substring(0, semicolon); mimetype = mimetype.substring(0, semicolon);
// Partition by probably/maybe // Partition by probably/maybe
if (support_level == "probably") if (support_level == "probably")
probably_supported.push(mimetype); probably_supported.push(mimetype);
else if (support_level == "maybe") else if (support_level == "maybe")
maybe_supported.push(mimetype); maybe_supported.push(mimetype);
}); });
Array.prototype.push.apply(GuacamoleUI.supportedAudio, probably_supported); Array.prototype.push.apply(GuacamoleUI.supportedAudio, probably_supported);
Array.prototype.push.apply(GuacamoleUI.supportedAudio, maybe_supported); Array.prototype.push.apply(GuacamoleUI.supportedAudio, maybe_supported);
})(); })();
// Query video support // Query video support
(function () { (function () {
@@ -222,8 +224,6 @@ GuacamoleUI.attach = function(guac) {
var guac_display = guac.getDisplay(); var guac_display = guac.getDisplay();
var state = new GuacamoleSessionState();
// Set document title appropriately, based on prefix and connection name // Set document title appropriately, based on prefix and connection name
function updateTitle() { function updateTitle() {
@@ -370,7 +370,7 @@ GuacamoleUI.attach = function(guac) {
function updateDisplayScale() { function updateDisplayScale() {
// If auto-fit is enabled, scale display // If auto-fit is enabled, scale display
if (state.getProperty("auto-fit")) { if (GuacamoleUI.sessionState.getProperty("auto-fit")) {
// Calculate scale to fit screen // Calculate scale to fit screen
var fit_scale = Math.min( var fit_scale = Math.min(
@@ -425,8 +425,8 @@ GuacamoleUI.attach = function(guac) {
title_prefix = null; title_prefix = null;
// Update clipboard with current data // Update clipboard with current data
if (state.getProperty("clipboard")) if (GuacamoleUI.sessionState.getProperty("clipboard"))
guac.setClipboard(state.getProperty("clipboard")); guac.setClipboard(GuacamoleUI.sessionState.getProperty("clipboard"));
// Regularly update screenshot if storage available // Regularly update screenshot if storage available
if (localStorage) if (localStorage)
@@ -492,10 +492,10 @@ GuacamoleUI.attach = function(guac) {
// Server copy handler // Server copy handler
guac.onclipboard = function(data) { 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") if (name == "clipboard")
guac.setClipboard(new_state[name]); guac.setClipboard(new_state[name]);
else if (name == "auto-fit") else if (name == "auto-fit")

2
guacamole/src/main/webapp/styles/login.css
View File

@@ -319,6 +319,8 @@ div#recent-connections .protocol {
#clipboardDiv textarea { #clipboardDiv textarea {
width: 100%; width: 100%;
border: 1px solid #AAA;
border-radius: 0.25em;
} }
#settings dt { #settings dt {