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

loaded image grid, need to finish including google material icons and to add functionality to the grid

Browse Source
This commit is contained in:
Abdallah Soliman 2016-07-04 17:45:29 -05:00
parent 7392ea4ad7
commit 582403410c
5 changed files with 131 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
index.html
View File

@ -1,24 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1"> <meta http-equiv="Expires" content="-1">
<title>Moonlight</title> <title>Moonlight</title>
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> --> <link rel="stylesheet" href="static/css/material.min.css">
<link rel="stylesheet" href="static/css/material.min.css"> <link rel="stylesheet" href="static/css/style.css">
<link rel="stylesheet" href="static/css/style.css"> </head>
</head> <body data-name="moonlight-chrome" data-tools="pnacl" data-configs="Debug Release" data-path="{tc}/{config}">
<body data-name="moonlight-chrome" data-tools="pnacl" data-configs="Debug Release" data-path="{tc}/{config}"> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class="mdl-layout__header">
<header class="mdl-layout__header"> <div class="mdl-layout__header-row">
<div class="mdl-layout__header-row"> <!-- Title -->
<!-- Title --> <span class="mdl-layout-title">Moonlight</span>
<span class="mdl-layout-title">Moonlight</span> <!-- Add spacer, to align navigation to the right -->
<!-- Add spacer, to align navigation to the right --> <div class="mdl-layout-spacer"></div>
<div class="mdl-layout-spacer"></div> </div>
</div> </header>
</header> <main id="main-content" class="mdl-layout__content">
<main id="main-content" class="mdl-layout__content">
<div id="streamSettings"> <div id="streamSettings">
<div class="mdl-select"> <div class="mdl-select">
@ -60,11 +59,7 @@
</div> </div>
</div> </div>
<div id="gameSelection" class="mdl-select"> <div id="game-grid" class="mdl-grid">
<p>Select a game to run</p>
<select id="selectGame"> </select>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="startGameButton">Run Game</button>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent" id="quitGameButton">Quit Current Game</button>
</div> </div>
<div id="listener"></div> <!-- NaCl module placeholder. NaCl gets thrown into here --> <div id="listener"></div> <!-- NaCl module placeholder. NaCl gets thrown into here -->
@ -76,43 +71,43 @@
<div id="naclSpinner" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"> <div id="naclSpinner" class="mdl-progress mdl-js-progress mdl-progress__indeterminate">
<h5 id="naclSpinnerMessage"></h5> <h5 id="naclSpinnerMessage"></h5>
</div> </div>
</main> </main>
</div> </div>
<script defer src="static/js/jquery-2.2.0.min.js"></script> <script defer src="static/js/jquery-2.2.0.min.js"></script>
<script defer src="static/js/material.min.js"></script> <script defer src="static/js/material.min.js"></script>
<script type="text/javascript" src="static/js/messages.js"></script> <script type="text/javascript" src="static/js/messages.js"></script>
<script type="text/javascript" src="static/js/common.js"></script> <script type="text/javascript" src="static/js/common.js"></script>
<script type="text/javascript" src="static/js/index.js"></script> <script type="text/javascript" src="static/js/index.js"></script>
<script type="text/javascript" src="static/js/utils.js"></script> <script type="text/javascript" src="static/js/utils.js"></script>
<script type="text/javascript" src="static/js/mdns-browser/dns.js"></script> <script type="text/javascript" src="static/js/mdns-browser/dns.js"></script>
<script type="text/javascript" src="static/js/mdns-browser/main.js"></script> <script type="text/javascript" src="static/js/mdns-browser/main.js"></script>
<dialog id="pairingDialog" class="mdl-dialog"> <dialog id="pairingDialog" class="mdl-dialog">
<h3 class="mdl-dialog__title">Pairing</h3> <h3 class="mdl-dialog__title">Pairing</h3>
<div class="mdl-dialog__content"> <div class="mdl-dialog__content">
<p id="pairingDialogText"> <p id="pairingDialogText">
Please enter the number XXXX on the GFE dialog on the computer. This dialog will be dismissed once complete Please enter the number XXXX on the GFE dialog on the computer. This dialog will be dismissed once complete
</p> </p>
</div> </div>
<div class="mdl-dialog__actions"> <div class="mdl-dialog__actions">
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="cancelPairingDialog">Cancel</button> <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="cancelPairingDialog">Cancel</button>
</div> </div>
</dialog> </dialog>
<dialog id="replaceAppDialog" class="mdl-dialog"> <dialog id="replaceAppDialog" class="mdl-dialog">
<h3 class="mdl-dialog__title">Quit Running App?</h3> <h3 class="mdl-dialog__title">Quit Running App?</h3>
<div class="mdl-dialog__content"> <div class="mdl-dialog__content">
<p id="replaceAppDialogText"> <p id="replaceAppDialogText">
Y is already running. Would you like to quit Y to start X? Y is already running. Would you like to quit Y to start X?
</p> </p>
</div> </div>
<div class="mdl-dialog__actions"> <div class="mdl-dialog__actions">
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="cancelReplaceApp">No</button> <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="cancelReplaceApp">No</button>
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="continueReplaceApp">Yes</button> <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="continueReplaceApp">Yes</button>
</div> </div>
</dialog> </dialog>
<dialog id="addHostDialog" class="mdl-dialog"> <dialog id="addHostDialog" class="mdl-dialog">
<h3 class="mdl-dialog__title">Add PC Manually</h3> <h3 class="mdl-dialog__title">Add PC Manually</h3>
<div class="mdl-dialog__content"> <div class="mdl-dialog__content">
<p>IP Address or Hostname of Geforce PC</p> <p>IP Address or Hostname of Geforce PC</p>
@ -126,11 +121,11 @@
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="cancelAddHost">Cancel</button> <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="cancelAddHost">Cancel</button>
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="continueAddHost">Continue</button> <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="continueAddHost">Continue</button>
</div> </div>
</dialog> </dialog>
<div id="snackbar" class="mdl-snackbar mdl-js-snackbar"> <div id="snackbar" class="mdl-snackbar mdl-js-snackbar">
<div class="mdl-snackbar__text"></div> <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> </div>
</body> </body>
</html> </html>

2
opus

@ -1 +1 @@
Subproject commit 81bb160d17c9542ad9cfba05067371b618d1719f Subproject commit f6f8487b76f234437e7d4c2831e630d9d06cb074

45
static/css/style.css
View File

@ -1,3 +1,36 @@
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url('../fonts/MaterialIcons-Regular.woff') format('woff'),
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
.mdl-layout__header-row { .mdl-layout__header-row {
color: #fff; color: #fff;
} }
@ -126,3 +159,15 @@ main {
width 100%; width 100%;
border: none !important; border: none !important;
} }
.box-art {
background-color: transparent;;
}
.box-art > img {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.current-game {
border: 1px solid red;
}

BIN
static/fonts/MaterialIcons-Regular.woff Normal file
View File

Binary file not shown.

73
static/js/index.js
View File

@ -55,8 +55,8 @@ function restoreUiAfterNaClLoad() {
function snackbarLog(givenMessage) { function snackbarLog(givenMessage) {
console.log(givenMessage); console.log(givenMessage);
var data = { var data = {
message: givenMessage, message: givenMessage,
timeout: 2000 timeout: 2000
}; };
document.querySelector('#snackbar').MaterialSnackbar.showSnackbar(data); document.querySelector('#snackbar').MaterialSnackbar.showSnackbar(data);
} }
@ -83,11 +83,11 @@ function moduleDidLoad() {
console.log('Returned error was: ' + failedCert); console.log('Returned error was: ' + failedCert);
}).then(function (ret) { }).then(function (ret) {
sendMessage('httpInit', [pairingCert.cert, pairingCert.privateKey, myUniqueid]).then(function (ret) { sendMessage('httpInit', [pairingCert.cert, pairingCert.privateKey, myUniqueid]).then(function (ret) {
restoreUiAfterNaClLoad(); restoreUiAfterNaClLoad();
}, function (failedInit) { }, function (failedInit) {
console.log('ERROR: failed httpInit!'); console.log('ERROR: failed httpInit!');
console.log('Returned error was: ' + failedInit); console.log('Returned error was: ' + failedInit);
}); });
}); });
} }
else { else {
@ -228,9 +228,9 @@ function continueAddHost() {
var inputHost = $('#dialogInputHost').val(); var inputHost = $('#dialogInputHost').val();
pairTo(inputHost, pairTo(inputHost,
function() { document.querySelector('#addHostDialog').close() }, function() { document.querySelector('#addHostDialog').close() },
function() {snackbarLog('pairing to ' + inputHost + ' failed!');} function() {snackbarLog('pairing to ' + inputHost + ' failed!');}
); );
} }
@ -256,22 +256,29 @@ function showApps() {
} }
api.getAppList().then(function (appList) { api.getAppList().then(function (appList) {
if ($('#selectGame').has('option').length > 0 ) {
// there was already things in the dropdown. Clear it, then add the new ones. // if game grid is populated, empty it
// Most likely, the user just hit the 'retrieve app list' button again if($("#game-grid").children().length > 0) {
$('#selectGame').empty(); $("game-grid").empty();
} }
appList.forEach(function (app) { appList.forEach(function (app) {
$('#selectGame').append($('<option>', {value: app.id, text: app.title})); api.getBoxArt(app.id).then(function (resolvedPromise) {
var imageBlob = new Blob([resolvedPromise], {type: "image/png"});
$("#game-grid").append($("<div>", {html:$("<img \>", {src: URL.createObjectURL(imageBlob), id: 'game-'+app.id }), class: 'box-art mdl-cell mdl-cell--3-col'}));
}, function (failedPromise) {
console.log(failedPromise)
});
}); });
$("#selectGame").html($("#selectGame option").sort(function (a, b) { // thanks, http://stackoverflow.com/a/7466196/3006365
return a.text.toUpperCase() == b.text.toUpperCase() ? 0 : a.text.toUpperCase() < b.text.toUpperCase() ? -1 : 1
}));
if (api.currentGame != 0) if (api.currentGame != 0)
$('#selectGame').val(api.currentGame); $('#game-'+ api.currentGame).addClass(".current-game");
$("#streamSettings").hide();
$("#hostSettings").hide();
$(".mdl-layout__header-row").append("<button class='mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab'><i class='material-icons'>arrow_back</i></button>")
gameSelectUpdated(); // default the button to 'Resume Game' if one is running. gameSelectUpdated(); // default the button to 'Resume Game' if one is running.
}, function (failedAppList) { }, function (failedAppList) {
@ -350,7 +357,7 @@ function startSelectedGame() {
if(api.currentGame == appID) // if user wants to launch the already-running app, then we resume it. if(api.currentGame == appID) // if user wants to launch the already-running app, then we resume it.
return api.resumeApp(rikey, rikeyid).then(function (ret) { return api.resumeApp(rikey, rikeyid).then(function (ret) {
sendMessage('startRequest', [host, streamWidth, streamHeight, frameRate, sendMessage('startRequest', [host, streamWidth, streamHeight, frameRate,
bitrate.toString(), api.serverMajorVersion.toString(), rikey, rikeyid.toString()]); bitrate.toString(), api.serverMajorVersion.toString(), rikey, rikeyid.toString()]);
}, function (failedResumeApp) { }, function (failedResumeApp) {
console.log('ERROR: failed to resume the app!'); console.log('ERROR: failed to resume the app!');
console.log('Returned error was: ' + failedResumeApp); console.log('Returned error was: ' + failedResumeApp);
@ -358,19 +365,19 @@ function startSelectedGame() {
}); });
api.launchApp(appID, api.launchApp(appID,
streamWidth + "x" + streamHeight + "x" + frameRate, streamWidth + "x" + streamHeight + "x" + frameRate,
1, // Allow GFE to optimize game settings 1, // Allow GFE to optimize game settings
rikey, rikeyid, rikey, rikeyid,
0, // Play audio locally too 0, // Play audio locally too
0x030002 // Surround channel mask << 16 | Surround channel count 0x030002 // Surround channel mask << 16 | Surround channel count
).then(function (ret) { ).then(function (ret) {
sendMessage('startRequest', [host, streamWidth, streamHeight, frameRate, sendMessage('startRequest', [host, streamWidth, streamHeight, frameRate,
bitrate.toString(), api.serverMajorVersion.toString(), rikey, rikeyid.toString()]); bitrate.toString(), api.serverMajorVersion.toString(), rikey, rikeyid.toString()]);
}, function (failedLaunchApp) { }, function (failedLaunchApp) {
console.log('ERROR: failed to launch app with appID: ' + appID); console.log('ERROR: failed to launch app with appID: ' + appID);
console.log('Returned error was: ' + failedLaunchApp); console.log('Returned error was: ' + failedLaunchApp);
return; return;
}); });
}); });
} }