mirror of
https://github.com/moonlight-stream/moonlight-chrome.git
synced 2025-08-17 08:36:42 +00:00
loaded image grid, need to finish including google material icons and to add functionality to the grid
This commit is contained in:
Abdallah Soliman
parent
7392ea4ad7
commit
582403410c
89
index.html
89
index.html
@ -1,24 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Expires" content="-1">
|
||||
<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/style.css">
|
||||
</head>
|
||||
<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">
|
||||
<header class="mdl-layout__header">
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Moonlight</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
</div>
|
||||
</header>
|
||||
<main id="main-content" class="mdl-layout__content">
|
||||
<head>
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Expires" content="-1">
|
||||
<title>Moonlight</title>
|
||||
<link rel="stylesheet" href="static/css/material.min.css">
|
||||
<link rel="stylesheet" href="static/css/style.css">
|
||||
</head>
|
||||
<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">
|
||||
<header class="mdl-layout__header">
|
||||
<div class="mdl-layout__header-row">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title">Moonlight</span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
</div>
|
||||
</header>
|
||||
<main id="main-content" class="mdl-layout__content">
|
||||
|
||||
<div id="streamSettings">
|
||||
<div class="mdl-select">
|
||||
@ -60,11 +59,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="gameSelection" class="mdl-select">
|
||||
<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 id="game-grid" class="mdl-grid">
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<h5 id="naclSpinnerMessage"></h5>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script defer src="static/js/jquery-2.2.0.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/common.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/mdns-browser/dns.js"></script>
|
||||
<script type="text/javascript" src="static/js/mdns-browser/main.js"></script>
|
||||
</main>
|
||||
</div>
|
||||
<script defer src="static/js/jquery-2.2.0.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/common.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/mdns-browser/dns.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>
|
||||
<div class="mdl-dialog__content">
|
||||
<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>
|
||||
</div>
|
||||
<div class="mdl-dialog__actions">
|
||||
<button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="cancelPairingDialog">Cancel</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</dialog>
|
||||
|
||||
<dialog id="replaceAppDialog" class="mdl-dialog">
|
||||
<dialog id="replaceAppDialog" class="mdl-dialog">
|
||||
<h3 class="mdl-dialog__title">Quit Running App?</h3>
|
||||
<div class="mdl-dialog__content">
|
||||
<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>
|
||||
</div>
|
||||
<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="continueReplaceApp">Yes</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</dialog>
|
||||
|
||||
<dialog id="addHostDialog" class="mdl-dialog">
|
||||
<dialog id="addHostDialog" class="mdl-dialog">
|
||||
<h3 class="mdl-dialog__title">Add PC Manually</h3>
|
||||
<div class="mdl-dialog__content">
|
||||
<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="continueAddHost">Continue</button>
|
||||
</div>
|
||||
</dialog>
|
||||
</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. -->
|
||||
</div>
|
||||
</body>
|
||||
<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. -->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
2
opus
2
opus
@ -1 +1 @@
|
||||
Subproject commit 81bb160d17c9542ad9cfba05067371b618d1719f
|
||||
Subproject commit f6f8487b76f234437e7d4c2831e630d9d06cb074
|
||||
@ -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 {
|
||||
color: #fff;
|
||||
}
|
||||
@ -126,3 +159,15 @@ main {
|
||||
width 100%;
|
||||
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
BIN
static/fonts/MaterialIcons-Regular.woff
Normal file
Binary file not shown.
@ -55,8 +55,8 @@ function restoreUiAfterNaClLoad() {
|
||||
function snackbarLog(givenMessage) {
|
||||
console.log(givenMessage);
|
||||
var data = {
|
||||
message: givenMessage,
|
||||
timeout: 2000
|
||||
message: givenMessage,
|
||||
timeout: 2000
|
||||
};
|
||||
document.querySelector('#snackbar').MaterialSnackbar.showSnackbar(data);
|
||||
}
|
||||
@ -83,11 +83,11 @@ function moduleDidLoad() {
|
||||
console.log('Returned error was: ' + failedCert);
|
||||
}).then(function (ret) {
|
||||
sendMessage('httpInit', [pairingCert.cert, pairingCert.privateKey, myUniqueid]).then(function (ret) {
|
||||
restoreUiAfterNaClLoad();
|
||||
}, function (failedInit) {
|
||||
console.log('ERROR: failed httpInit!');
|
||||
console.log('Returned error was: ' + failedInit);
|
||||
});
|
||||
restoreUiAfterNaClLoad();
|
||||
}, function (failedInit) {
|
||||
console.log('ERROR: failed httpInit!');
|
||||
console.log('Returned error was: ' + failedInit);
|
||||
});
|
||||
});
|
||||
}
|
||||
else {
|
||||
@ -228,9 +228,9 @@ function continueAddHost() {
|
||||
var inputHost = $('#dialogInputHost').val();
|
||||
|
||||
pairTo(inputHost,
|
||||
function() { document.querySelector('#addHostDialog').close() },
|
||||
function() {snackbarLog('pairing to ' + inputHost + ' failed!');}
|
||||
);
|
||||
function() { document.querySelector('#addHostDialog').close() },
|
||||
function() {snackbarLog('pairing to ' + inputHost + ' failed!');}
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
@ -256,22 +256,29 @@ function showApps() {
|
||||
}
|
||||
|
||||
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.
|
||||
// Most likely, the user just hit the 'retrieve app list' button again
|
||||
$('#selectGame').empty();
|
||||
|
||||
// if game grid is populated, empty it
|
||||
if($("#game-grid").children().length > 0) {
|
||||
$("game-grid").empty();
|
||||
}
|
||||
|
||||
|
||||
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)
|
||||
$('#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.
|
||||
}, 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.
|
||||
return api.resumeApp(rikey, rikeyid).then(function (ret) {
|
||||
sendMessage('startRequest', [host, streamWidth, streamHeight, frameRate,
|
||||
bitrate.toString(), api.serverMajorVersion.toString(), rikey, rikeyid.toString()]);
|
||||
bitrate.toString(), api.serverMajorVersion.toString(), rikey, rikeyid.toString()]);
|
||||
}, function (failedResumeApp) {
|
||||
console.log('ERROR: failed to resume the app!');
|
||||
console.log('Returned error was: ' + failedResumeApp);
|
||||
@ -358,19 +365,19 @@ function startSelectedGame() {
|
||||
});
|
||||
|
||||
api.launchApp(appID,
|
||||
streamWidth + "x" + streamHeight + "x" + frameRate,
|
||||
1, // Allow GFE to optimize game settings
|
||||
rikey, rikeyid,
|
||||
0, // Play audio locally too
|
||||
0x030002 // Surround channel mask << 16 | Surround channel count
|
||||
).then(function (ret) {
|
||||
sendMessage('startRequest', [host, streamWidth, streamHeight, frameRate,
|
||||
streamWidth + "x" + streamHeight + "x" + frameRate,
|
||||
1, // Allow GFE to optimize game settings
|
||||
rikey, rikeyid,
|
||||
0, // Play audio locally too
|
||||
0x030002 // Surround channel mask << 16 | Surround channel count
|
||||
).then(function (ret) {
|
||||
sendMessage('startRequest', [host, streamWidth, streamHeight, frameRate,
|
||||
bitrate.toString(), api.serverMajorVersion.toString(), rikey, rikeyid.toString()]);
|
||||
}, function (failedLaunchApp) {
|
||||
console.log('ERROR: failed to launch app with appID: ' + appID);
|
||||
console.log('Returned error was: ' + failedLaunchApp);
|
||||
return;
|
||||
});
|
||||
}, function (failedLaunchApp) {
|
||||
console.log('ERROR: failed to launch app with appID: ' + appID);
|
||||
console.log('Returned error was: ' + failedLaunchApp);
|
||||
return;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user