diff --git a/index.html b/index.html
index 596cb3b..9ae5504 100644
--- a/index.html
+++ b/index.html
@@ -16,10 +16,6 @@
Moonlight
-
-
- - Chrome App Status:
NO-STATUS
-
@@ -70,6 +66,10 @@
+
+
+
+
diff --git a/static/css/style.css b/static/css/style.css
index ceb4bbd..ea76143 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -18,6 +18,16 @@
padding: 20px 24px 24px 24px;
color: rgba(0,0,0, 0.54);
}
+#naclSpinner {
+ display: none;
+ z-index: 2;
+ position: fixed;
+ left: 50%;
+ bottom: 50%;
+ transform: translate(-50%, -50%);
+ margin: 0 auto;
+ text-align: center;
+}
#loadingSpinner {
display: none;
z-index: 1;
diff --git a/static/js/index.js b/static/js/index.js
index 93c8dad..792840f 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -6,6 +6,8 @@ var api;
// Called by the common.js module.
function attachListeners() {
+ changeUiModeForNaClLoad();
+
$('#selectResolution').on('change', saveResolution);
$('#selectFramerate').on('change', saveFramerate);
$('#bitrateSlider').on('input', updateBitrateField); // input occurs every notch you slide
@@ -33,6 +35,19 @@ function fullscreenChromeWindow() {
chrome.app.window.current().fullscreen();
}
+function changeUiModeForNaClLoad() {
+ $("#main-content").children().not("#listener, #naclSpinner").hide();
+
+ $('#naclSpinnerMessage').text('Loading Moonlight plugin...');
+ $('#naclSpinner').css('display', 'inline-block');
+}
+
+function restoreUiAfterNaClLoad() {
+ $("#main-content").children().not("#listener, #naclSpinner, #gameSelection").show();
+ $('#naclSpinner').hide();
+ $('#loadingSpinner').css('display', 'none');
+}
+
function snackbarLog(givenMessage) {
console.log(givenMessage);
var data = {
@@ -63,15 +78,17 @@ function moduleDidLoad() {
console.log('ERROR: failed to generate new cert!');
console.log('Returned error was: ' + failedCert);
}).then(function (ret) {
- sendMessage('httpInit', [pairingCert.cert, pairingCert.privateKey, myUniqueid]);
+ sendMessage('httpInit', [pairingCert.cert, pairingCert.privateKey, myUniqueid]).then(function (ret) {
+ restoreUiAfterNaClLoad();
}, function (failedInit) {
console.log('ERROR: failed httpInit!');
console.log('Returned error was: ' + failedInit);
});
+ });
}
else {
sendMessage('httpInit', [pairingCert.cert, pairingCert.privateKey, myUniqueid]).then(function (ret) {
- snackbarLog('Initialization complete.');
+ restoreUiAfterNaClLoad();
}, function (failedInit) {
console.log('ERROR: failed httpInit!');
console.log('Returned error was: ' + failedInit);
@@ -91,16 +108,6 @@ function updateHost() {
}
}
-// we want the user to progress through the streaming process
-// but to save from the PITA of inter-chrome-app-page JS message passing,
-// I'm opting to do it in a single page, and keep the data around.
-function hideAllWorkflowDivs() {
- $('#streamSettings').css('display', 'inline-block');
- $('#hostSettings').css('display', 'inline-block');
- $('#gameSelection').css('display', 'none');
- // do NOT hide the nacl module. you can't interact with it then
-}
-
// pair to the given hostname or IP. Returns whether pairing was successful.
function pairTo(host) {
if(!pairingCert) {
@@ -233,7 +240,7 @@ function showApps() {
function showAppsMode() {
console.log("entering show apps mode.");
$(".mdl-layout__header").show();
- $("#main-content").children().not("#listener, #loadingSpinner").show();
+ $("#main-content").children().not("#listener, #loadingSpinner, #naclSpinner").show();
$("#main-content").removeClass("fullscreen");
$("#listener").removeClass("fullscreen");
$("body").css('backgroundColor', 'white');