moonlight-stream/moonlight-chrome
1
0
Fork 0
mirror of https://github.com/moonlight-stream/moonlight-chrome.git synced 2025-08-17 00:26:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #246 from Jorys-Paulin/feature-a11y

Browse Source 
Accessibility and keyboard support
This commit is contained in:
Cameron Gutman 2017-06-23 22:08:39 -07:00 committed by GitHub
commit d19ca54fda
3 changed files with 33 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@ -14,7 +14,7 @@
<div class="mdl-layout mdl-js-layout">
<header id="main-navigation" class="mdl-layout__header mdl-layout__header--transparent">
<div class="mdl-layout__header-row">
<span id='backIcon'><i class="material-icons">keyboard_arrow_left</i></span>
<button id="backIcon" class="mdl-button mdl-js-button mdl-button--icon" role="link" aria-label="Host selection"><i class="material-icons">keyboard_arrow_left</i></button>
<!-- Title -->
<span class="mdl-layout-title">MOON<span>LIGHT</span></span>
<!-- Add spacer, to align navigation to the right -->
@ -61,7 +61,7 @@
<div class="nav-menu-parent">
<div id="bandwidthMenu">
<button id='bitrateField' class="mdl-button">10 Mbps</button>
<button id="bitrateField" class="mdl-button">10 Mbps</button>
</div>
<div class="bitrateMenu mdl-menu mdl-js-menu mdl-js-ripple-effect" for="bandwidthMenu">
@ -81,7 +81,7 @@
Remote audio
</div>
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="quitCurrentApp">
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="quitCurrentApp" aria-label="Quit current app">
<i class="material-icons">remove_circle_outline</i>
Quit Current App
</button>
@ -91,8 +91,8 @@
<main id="main-content" class="mdl-layout__content">
<div id="host-grid">
<div class="page-title">Your PCs</div>
<div class="add-host-card mdl-card mdl-shadow--4dp" id='addHostCell'>
<div class="mdl-card__title mdl-card--expand" id="addHostIcon">
<div class="add-host-card mdl-card mdl-shadow--4dp" id="addHostCell">
<div class="mdl-card__title mdl-card--expand" id="addHostIcon" role="link" tabindex="0" aria-label="Add Host">
<h2 class="mdl-card__title-text" >Add Host</h2>
</div>
</div>
@ -168,7 +168,7 @@
</dialog>
<div id="snackbar" class="mdl-snackbar mdl-js-snackbar">
<div class="mdl-snackbar__text"></div>
<button id='snackButton' class="mdl-snackbar__action" type="button"></button> <!-- this button exists to suppress the snackbar warning. we're really using a toast. -->
<button id="snackButton" class="mdl-snackbar__action" type="button"></button> <!-- this button exists to suppress the snackbar warning. we're really using a toast. -->
</div>
</body>
</html>
</html>

7
static/css/style.css
View File

@ -105,10 +105,7 @@ main {
padding:25px;
}
#backIcon {
width: 32px;
height: 24px;
position: fixed;
top: 16px;
left: 28px;
}
#backIcon:hover {
@ -122,7 +119,7 @@ main {
.mdl-dialog__title {
padding: 24px 24px 0;
margin: 0;
font-size: 2.5rem;
font-size: 2.5rem;
}
.mdl-dialog__content {
padding: 20px 24px 24px 24px;
@ -191,7 +188,7 @@ main {
cursor: pointer;
transition: all .2s ease-in-out;
}
#host-grid .mdl-card:hover, #game-grid .mdl-card:hover {
#host-grid .mdl-card:hover, #host-grid .mdl-card:focus, #host-grid .mdl-card:active, #game-grid .mdl-card:hover, #game-grid .mdl-card:focus, #game-grid .mdl-card:active {
transform: scale(1.1);
}
#host-grid .mdl-card__title {

38
static/js/index.js
View File

@ -28,7 +28,7 @@ function fullscreenChromeWindow() {
// FIRST restore it to the previous size, then fullscreen it to the whole screen
// this prevents the previous window size from being 'maximized',
// and allows us to functionally retain two window sizes
// so that when the user hits `esc`, they go back to the "restored" size,
// so that when the user hits `esc`, they go back to the "restored" size,
// instead of "maximized", which would immediately go to fullscreen
chrome.app.window.current().restore();
chrome.app.window.current().fullscreen();
@ -193,14 +193,14 @@ function moduleDidLoad() {
}
if(!pairingCert) { // we couldn't load a cert. Make one.
console.log("Failed to load local cert. Generating new one");
console.log("Failed to load local cert. Generating new one");
sendMessage('makeCert', []).then(function (cert) {
storeData('cert', cert, null);
pairingCert = cert;
console.log("Generated new cert.");
}, function (failedCert) {
console.log('ERROR: failed to generate new cert!');
console.log('Returned error was: ' + failedCert);
console.log('Returned error was: ' + failedCert);
}).then(function (ret) {
sendMessage('httpInit', [pairingCert.cert, pairingCert.privateKey, myUniqueid]).then(function (ret) {
restoreUiAfterNaClLoad();
@ -291,11 +291,11 @@ function hostChosen(host) {
api = host;
if (!host.paired) {
// Still not paired; go to the pairing flow
pairTo(host, function() {
showApps(host);
pairTo(host, function() {
showApps(host);
saveHosts();
},
function(){
},
function(){
startPollingHosts();
});
} else {
@ -337,10 +337,10 @@ function addHost() {
// host is an NvHTTP object
function addHostToGrid(host, ismDNSDiscovered) {
var outerDiv = $("<div>", {class: 'host-container mdl-card mdl-shadow--4dp', id: 'host-container-' + host.serverUid });
var outerDiv = $("<div>", {class: 'host-container mdl-card mdl-shadow--4dp', id: 'host-container-' + host.serverUid, role: 'link', tabindex: 0, 'aria-label': host.hostname });
var cell = $("<div>", {class: 'mdl-card__title mdl-card--expand', id: 'hostgrid-' + host.serverUid });
$(cell).prepend($("<h2>", {class: "mdl-card__title-text", html: host.hostname}));
var removalButton = $("<div>", {class: "remove-host", id: "removeHostButton-" + host.serverUid});
var removalButton = $("<div>", {class: "remove-host", id: "removeHostButton-" + host.serverUid, role: 'button', tabindex: 0, 'aria-label': 'Remove host ' + host.hostname});
removalButton.off('click');
removalButton.click(function () {
removeClicked(host);
@ -349,10 +349,15 @@ function addHostToGrid(host, ismDNSDiscovered) {
cell.click(function () {
hostChosen(host);
});
outerDiv.keypress(function(e){
if(e.keyCode == 13) {
hostChosen(host);
}
});
$(outerDiv).append(cell);
if (!ismDNSDiscovered) {
// we don't have the option to delete mDNS hosts. So don't show it to the user.
$(outerDiv).append(removalButton);
$(outerDiv).append(removalButton);
}
$('#host-grid').append(outerDiv);
hosts[host.serverUid] = host;
@ -386,7 +391,7 @@ function removeClicked(host) {
// and puts the CSS style for non-current app apps that aren't running
// this requires a hot-off-the-host `api`, and the appId we're going to stylize
// the function was made like this so that we can remove duplicated code, but
// not do N*N stylizations of the box art, or make the code not flow very well
// not do N*N stylizations of the box art, or make the code not flow very well
function stylizeBoxArt(freshApi, appIdToStylize) {
if (freshApi.currentGame === appIdToStylize){ // stylize the currently running game
// destylize it, if it has the not-current-game style
@ -430,7 +435,7 @@ function showApps(host) {
// to mitigate this we ensure we don't add a duplicate.
// This isn't perfect: there's lots of RTTs before the logic prevents anything
var imageBlob = new Blob([resolvedPromise], {type: "image/png"});
var outerDiv = $("<div>", {class: 'game-container mdl-card mdl-shadow--4dp', id: 'game-'+app.id, backgroundImage: URL.createObjectURL(imageBlob) });
var outerDiv = $("<div>", {class: 'game-container mdl-card mdl-shadow--4dp', id: 'game-'+app.id, backgroundImage: URL.createObjectURL(imageBlob), role: 'link', tabindex: 0, title: app.title, 'aria-label': app.title });
$(outerDiv).append($("<img \>", {src: URL.createObjectURL(imageBlob), id: 'game-'+app.id, name: app.title }));
$(outerDiv).append($("<div>", {class: "game-title", html: $("<span>", {html: app.title} )}));
$("#game-grid").append(outerDiv);
@ -440,6 +445,11 @@ function showApps(host) {
$('#game-'+app.id).on('click', function () {
startGame(host, app.id);
});
$('#game-'+app.id).keypress(function(e){
if(e.keyCode == 13) {
startGame(host, app.id);
}
});
// apply CSS stylization to indicate whether the app is active
stylizeBoxArt(host, app.id);
@ -530,7 +540,7 @@ function startGame(host, appID) {
if(host.currentGame != 0 && host.currentGame != appID) {
host.getAppById(host.currentGame).then(function (currentApp) {
var quitAppDialog = document.querySelector('#quitAppDialog');
document.getElementById('quitAppDialogText').innerHTML =
document.getElementById('quitAppDialogText').innerHTML =
currentApp.title + ' is already running. Would you like to quit ' +
currentApp.title + '?';
quitAppDialog.showModal();
@ -678,7 +688,7 @@ function stopGame(host, callbackFunction) {
}
var appName = runningApp.title;
snackbarLog('Stopping ' + appName);
host.quitApp().then(function (ret2) {
host.quitApp().then(function (ret2) {
host.refreshServerInfo().then(function (ret3) { // refresh to show no app is currently running.
showAppsMode();
stylizeBoxArt(host, runningApp.id);