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

stylized UI to Material Design

Browse Source
This commit is contained in:
Aidan Campbell 2016-02-16 11:44:24 -05:00
parent 5145012d59
commit 7be7d975e4
10 changed files with 158 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
index.html
View File

@ -4,48 +4,70 @@
<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>
<script type="text/javascript" src="common.js"></script> <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> -->
<script type="text/javascript" src="index.js"></script> <link rel="stylesheet" href="static/css/material.min.css">
<link rel="stylesheet" href="static/css/style.css">
</head> </head>
<body data-name="moonlight-chrome" data-width="1280" data-height="720" data-tools="pnacl" data-configs="Debug Release" data-path="{tc}/{config}"> <body data-name="moonlight-chrome" data-width="1280" data-height="720" data-tools="pnacl" data-configs="Debug Release" data-path="{tc}/{config}">
<div id="title"> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<h1>Moonlight Streaming</h1> <header class="mdl-layout__header">
<h2>Chrome App Status: <code id="statusField">NO-STATUS</code></h2> <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>
<!-- Navigation. We hide it in small screens. -->
<ul class='mdl-list'>
<li>Chrome App Status: <code id="statusField">NO-STATUS</code></li>
</ul>
</div>
</header>
<main class="mdl-layout__content">
<div class="log-holder">
<code id="logField">log</code></div>
<div id="streamSettings" style="display:none"></div>
<div id="hostSettings">
<p>Enter the IP/hostname of the GFE streaming computer, or select one from the history:</p>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="GFEHostIPField">
<label class="mdl-textfield__label" for="GFEHostIPField">IP Address</label>
</div>
<div class="mdl-select">
<select id="selectHost">
<option value="">No history available</option>
</select>
</div>
<div class="button-holder">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" id="pairButton">Pair</button>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent" id="showAppsButton">Retrieve App List</button>
</div>
</div>
<div id="testingDiv">
<button id="startButton" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Start Testing Stuff</button>
<button id="stopButton" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">Stop Testing Stuff</button>
</div>
<div id="gameSelection" style="display:none">
<p>Select a game to run</p>
<select id="selectGame">
<option value="game_id_1">Game Name 1</option>
<option value="game_id_2">Game Name 2</option>
<option value="game_id_3">Game Name 3</option>
</select>
<button id="startGameButton">Run Game</button>
<button id="quitGameButton">Quit Current Game</button>
</div>
<!-- The NaCl plugin will be embedded inside the element with id "listener".
See common.js. -->
<div id="listener"></div>
</main>
</div> </div>
<code id="logField">log</code> <script defer src="static/js/jquery-2.2.0.min.js"></script>
<script defer src="static/js/material.min.js"></script>
<div id="streamSettings" style="display:none"></div> <script type="text/javascript" src="static/js/common.js"></script>
<script type="text/javascript" src="static/js/index.js"></script>
<div id="hostSettings">
<p>Enter the IP/hostname of the GFE streaming computer, or select one from the history:</p>
<input type="text" size="15" id="GFEHostIPField" value="127.0.0.1">
<select id="selectHost">
<option value="">No history available</option>
</select>
<p></p>
<button id="pairButton">Pair</button>
<button id="showAppsButton">Retrieve App List</button>
</div>
<div id="testingDiv" style="border:3px solid red">
<button id="startButton">Start Testing Stuff</button>
<button id="stopButton">Stop Testing Stuff</button>
</div>
<div id="gameSelection" style="display:none">
<p>Select a game to run</p>
<select id="selectGame">
<option value="game_id_1">Game Name 1</option>
<option value="game_id_2">Game Name 2</option>
<option value="game_id_3">Game Name 3</option>
</select>
<button id="startGameButton">Run Game</button>
<button id="quitGameButton">Quit Current Game</button>
</div>
<!-- The NaCl plugin will be embedded inside the element with id "listener".
See common.js. -->
<div id="listener"></div>
</body> </body>
</html> </html>

3
manifest.json
View File

@ -12,7 +12,8 @@
"app": { "app": {
"background": { "background": {
"persistent": false, "persistent": false,
"scripts": ["background.js"] "css": ["static/css/material.min.css", "static/css/style.css"],
"scripts": ["static/js/jquery-2.2.0.min.js", "static/js/material.min.js", "static/js/common.js", "static/js/background.js"]
} }
}, },
"permissions": [ "permissions": [

8
static/css/material.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

51
static/css/style.css Normal file
View File

@ -0,0 +1,51 @@
.mdl-layout__header-row {
color: #fff;
}
.mdl-button {
color: #fff !important;
}
main {
padding: 50px 100px;
}
.log-holder {
margin-bottom: 10px;
}
#hostSettings {
padding: 5px 10px;
border: 1px dashed;
margin: 10px 0;
}
#hostSettings p {
margin: 0;
}
#hostSettings div {
display: inline-block;
}
#hostSettings .mdl-textfield {
width: 200px;
margin-right: 20px;
}
#hostSettings #selectHost {
line-height: 20px;
height: 20px;
background: none;
}
#hostSettings .button-holder {
float: right;
}
#testingDiv {
border: 1px dashed;
padding: 10px;
}
#listener {
overflow: hidden;
margin-top: 20px;
border: 1px solid;
}
.fullscreen {
height: 100vh;
overflow: none;
margin: 0;
padding: 0;
width 100%;
}

0
background.js → static/js/background.js
View File

7
common.js → static/js/common.js
View File

@ -327,11 +327,10 @@ var common = (function() {
if (typeof window.handleMessage !== 'undefined') { if (typeof window.handleMessage !== 'undefined') {
window.handleMessage(message_event); window.handleMessage(message_event);
return; } else {
logMessage('Unhandled message: ' + message_event.data);
} }
} // TODO: page reloads here???
logMessage('Unhandled message: ' + message_event.data);
}
/** /**
* Called when the DOM content has loaded; i.e. the page's document is fully * Called when the DOM content has loaded; i.e. the page's document is fully

28
index.js → static/js/index.js
View File

@ -14,7 +14,7 @@ function moduleDidLoad() {
// we want the user to progress through the streaming process // we want the user to progress through the streaming process
// but to save from the PITA of inter-chrome-app-page JS message passing, // but to save from the PITA of inter-chrome-app-page JS message passing,
// I'm opting to // I'm opting to do it in a single page, and keep the data around.
function hideAllWorkflowDivs() { function hideAllWorkflowDivs() {
document.getElementById('streamSettings').style.display = 'inline-block'; document.getElementById('streamSettings').style.display = 'inline-block';
document.getElementById('hostSettings').style.display = 'inline-block'; document.getElementById('hostSettings').style.display = 'inline-block';
@ -24,7 +24,7 @@ function hideAllWorkflowDivs() {
// pair button was pushed. pass what the user entered into the GFEHostIPField. // pair button was pushed. pass what the user entered into the GFEHostIPField.
function pairPushed() { function pairPushed() {
// common.naclModule.postMessage('pair:' + document.getElementById('GFEHostIPField').value); common.naclModule.postMessage('pair:' + document.getElementById('GFEHostIPField').value);
} }
// someone pushed the "show apps" button. // someone pushed the "show apps" button.
@ -39,6 +39,10 @@ function showAppsPushed() {
} }
common.naclModule.postMessage('showAppsPushed:' + target); common.naclModule.postMessage('showAppsPushed:' + target);
// we just finished the hostSettings section. expose the next one // we just finished the hostSettings section. expose the next one
showAppsMode();
}
function showAppsMode() {
document.getElementById('streamSettings').style.display = 'none'; document.getElementById('streamSettings').style.display = 'none';
document.getElementById('hostSettings').style.display = 'none' document.getElementById('hostSettings').style.display = 'none'
document.getElementById('gameSelection').style.display = 'inline-block' document.getElementById('gameSelection').style.display = 'inline-block'
@ -56,14 +60,13 @@ function startPushed() {
var gameIDDropdown = document.getElementById("selectGame"); var gameIDDropdown = document.getElementById("selectGame");
var gameID = gameIDDropdown[gameIDDropdown.selectedIndex].value; var gameID = gameIDDropdown[gameIDDropdown.selectedIndex].value;
common.naclModule.postMessage('setGFEHostIPField:' + target + ":" + gameID); common.naclModule.postMessage('setGFEHostIPField:' + target + ":" + gameID);
// we just finished the gameSelection section. only expose the NaCl section // we just finished the gameSelection section. only expose the NaCl section
document.getElementById('streamSettings').style.display = 'none'; playGameMode();
document.getElementById('hostSettings').style.display = 'none'; }
document.getElementById('gameSelection').style.display = 'none'
document.getElementById('testingDiv').style.display = 'none' function playGameMode() {
document.getElementById('listener').style.display = 'inline-block' $("body").children().not("#listener").hide();
document.getElementById('title').style.display = 'none' $("body").addClass("fullscreen");
} }
// user pushed the stop button. we should stop. // user pushed the stop button. we should stop.
@ -73,6 +76,11 @@ function stopPushed() {
// hook from main.cpp into the javascript // hook from main.cpp into the javascript
function handleMessage(msg) { function handleMessage(msg) {
var quitStreamString = "quitStream";
var logEl = document.getElementById('logField'); var logEl = document.getElementById('logField');
logEl.innerHTML = msg.data; logEl.innerHTML = msg.data;
} if (msg.data.lastIndexOf(quitStreamString, 0) === 0) {
showAppsMode();
}
}

4
static/js/jquery-2.2.0.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

10
static/js/material.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

0
utils.js → static/js/utils.js
View File