diff --git a/index.html b/index.html index 596cb3b..9ae5504 100644 --- a/index.html +++ b/index.html @@ -16,10 +16,6 @@ Moonlight
- -
@@ -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');