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

Indeterminate loading bar is shown while connecting to stream

Browse Source 
- This closes #37
This commit is contained in:
R. Aidan Campbell 2016-05-09 13:15:49 -04:00
parent 5e9fe3c736
commit 8f0b911031
4 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -65,8 +65,9 @@
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent" id="quitGameButton">Quit Current 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 id="listener"></div> <!-- NaCl module placeholder. NaCl gets thrown into here -->
</div>
<div id="loadingSpinner" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></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>

9
static/css/style.css
View File

@ -18,6 +18,15 @@
padding: 20px 24px 24px 24px; padding: 20px 24px 24px 24px;
color: rgba(0,0,0, 0.54); color: rgba(0,0,0, 0.54);
} }
#loadingSpinner {
display: none;
z-index: 1;
position: fixed;
left: 50%;
bottom: 20px;
transform: translate(-50%, -50%);
margin: 0 auto;
}
main { main {
padding: 50px 100px; padding: 50px 100px;
} }

6
static/js/index.js
View File

@ -240,7 +240,7 @@ function showApps() {
function showAppsMode() { function showAppsMode() {
console.log("entering show apps mode."); console.log("entering show apps mode.");
$(".mdl-layout__header").show(); $(".mdl-layout__header").show();
$("#main-content").children().not("#listener").show(); $("#main-content").children().not("#listener, #loadingSpinner").show();
$("#main-content").removeClass("fullscreen"); $("#main-content").removeClass("fullscreen");
$("#listener").removeClass("fullscreen"); $("#listener").removeClass("fullscreen");
$("body").css('backgroundColor', 'white'); $("body").css('backgroundColor', 'white');
@ -345,13 +345,15 @@ function continueReplaceApp() {
function playGameMode() { function playGameMode() {
console.log("entering play game mode"); console.log("entering play game mode");
$(".mdl-layout__header").hide(); $(".mdl-layout__header").hide();
$("#main-content").children().not("#listener").hide(); $("#main-content").children().not("#listener, #loadingSpinner").hide();
$("#main-content").addClass("fullscreen"); $("#main-content").addClass("fullscreen");
$("#listener").addClass("fullscreen"); $("#listener").addClass("fullscreen");
fullscreenNaclModule(); fullscreenNaclModule();
$("body").css('backgroundColor', 'black'); $("body").css('backgroundColor', 'black');
chrome.app.window.current().fullscreen(); chrome.app.window.current().fullscreen();
$('#loadingSpinner').css('display', 'inline-block');
} }
// Maximize the size of the nacl module by scaling and resizing appropriately // Maximize the size of the nacl module by scaling and resizing appropriately

2
static/js/messages.js
View File

@ -25,6 +25,8 @@ function handleMessage(msg) {
showAppsMode(); showAppsMode();
chrome.app.window.current().restore(); chrome.app.window.current().restore();
}); });
} else if(msg.data === 'Connection Established') {
$('#loadingSpinner').css('display', 'none');
} }
} }
} }