moonlight-stream/moonlight-chrome
1
0
Fork 0
mirror of https://github.com/moonlight-stream/moonlight-chrome.git synced 2025-08-18 00:56:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'UI2'

Browse Source
This commit is contained in:
Cameron Gutman 2016-02-16 17:47:59 -05:00
commit 5d16e891c9
11 changed files with 196 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
index.html
View File

@ -4,52 +4,69 @@
<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="index.js"></script> <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> -->
<script type="text/javascript" src="common.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 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>
<!-- 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 id="main-content" class="mdl-layout__content">
<div class="log-holder">
<code id="logField">log</code></div>
<div id="streamSettings" style="display:none"></div>
<div id="title"> <div id="hostSettings">
<h1>Moonlight Streaming</h1> <p>Enter the IP/hostname of the GFE streaming computer, or select one from the history:</p>
<h2>Chrome App Status: <code id="statusField">NO-STATUS</code></h2> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<p></p> <input class="mdl-textfield__input" type="text" id="GFEHostIPField">
<code id="logField">log</code> <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>
<div id="listener">
</div>
</main>
</div> </div>
<script defer src="static/js/jquery-2.2.0.min.js"></script>
<p>Enter the IP/hostname of the GFE streaming computer, or select one from the history:</p> <script defer src="static/js/material.min.js"></script>
<input type="text" size="15" id="GFEHostIPField" value="127.0.0.1"> <script type="text/javascript" src="static/js/common.js"></script>
<script type="text/javascript" src="static/js/index.js"></script>
<select id="selectHost">
<option value="">No history available</option>
</select>
<p></p>
<button id="pairButton">Pair</button>
<button id="showAppsButton">Retrieve App List</button>
<p></p>
<div id="testingDiv" style="border:3px solid red">
<button id="startButton">Start Testing Stuff</button>
<button id="stopButton">Stop Testing Stuff</button>
</div>
<div hidden id="gameSelectionDiv">
<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>

12
main.cpp
View File

@ -87,16 +87,21 @@ void MoonlightInstance::HandleMessage(const pp::Var& var_message) {
} else if (strncmp(message.c_str(), STOP_DIRECTIVE, strlen(STOP_DIRECTIVE)) == 0) { } else if (strncmp(message.c_str(), STOP_DIRECTIVE, strlen(STOP_DIRECTIVE)) == 0) {
handleStopStream(message); handleStopStream(message);
} else { } else {
// :( pp::Var response("Unhandled message received: " + message);
PostMessage(response);
} }
} }
void MoonlightInstance::handlePair(std::string pairMessage) { void MoonlightInstance::handlePair(std::string pairMessage) {
pp::Var response("Pair button pushed. Pairing is unimplemented.");
PostMessage(response);
std::string intendedHost = pairMessage.substr(pairMessage.find(PAIR_DIRECTIVE) + strlen(PAIR_DIRECTIVE)); std::string intendedHost = pairMessage.substr(pairMessage.find(PAIR_DIRECTIVE) + strlen(PAIR_DIRECTIVE));
} }
void MoonlightInstance::handleShowGames(std::string showGamesMessage) { void MoonlightInstance::handleShowGames(std::string showGamesMessage) {
pp::Var response("Show Games button pushed. Show Games is unimplemented");
PostMessage(response);
std::string host = showGamesMessage.substr(showGamesMessage.find(SHOW_GAMES_DIRECTIVE) + strlen(SHOW_GAMES_DIRECTIVE)); std::string host = showGamesMessage.substr(showGamesMessage.find(SHOW_GAMES_DIRECTIVE) + strlen(SHOW_GAMES_DIRECTIVE));
} }
@ -119,7 +124,7 @@ void MoonlightInstance::handleStartStream(std::string startStreamMessage) {
std::string gameID = startStreamMessage.substr(startStreamMessage.find(host) + host.length() + 1); // +1 for the colon delimiter std::string gameID = startStreamMessage.substr(startStreamMessage.find(host) + host.length() + 1); // +1 for the colon delimiter
// Post a status update before we begin // Post a status update before we begin
pp::Var response("Starting connection..."); pp::Var response("Starting connection to " + host + " to play game ID " + gameID);
PostMessage(response); PostMessage(response);
// Start the worker thread to establish the connection // Start the worker thread to establish the connection
@ -128,7 +133,8 @@ void MoonlightInstance::handleStartStream(std::string startStreamMessage) {
} }
void MoonlightInstance::handleStopStream(std::string stopStreamMessage) { void MoonlightInstance::handleStopStream(std::string stopStreamMessage) {
pp::Var response("Stop button pushed. Ignoring.");
PostMessage(response);
} }
bool MoonlightInstance::Init(uint32_t argc, bool MoonlightInstance::Init(uint32_t argc,

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

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

@ -0,0 +1,52 @@
.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 !important;
overflow: none !important;
margin: 0 !important;
padding: 0 !important;
width 100%;
border: none !important;
}

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

@ -1,8 +1,6 @@
// just start the app in fullscreen
chrome.app.runtime.onLaunched.addListener(function() { chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('index.html', { chrome.app.window.create('index.html', {
'bounds': { state: "fullscreen",
'width': 400,
'height': 500
}
}); });
}); });

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

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

@ -6,6 +6,21 @@ function attachListeners() {
document.getElementById('showAppsButton').addEventListener('click', showAppsPushed); document.getElementById('showAppsButton').addEventListener('click', showAppsPushed);
} }
function moduleDidLoad() {
var logEl = document.getElementById('logField');
logEl.innerHTML = "module loaded";
}
// 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() {
document.getElementById('streamSettings').style.display = 'inline-block';
document.getElementById('hostSettings').style.display = 'inline-block';
document.getElementById('gameSelection').style.display = 'none';
// common.hideModule(); // do NOT hide the nacl module. you can't interact with it then
}
// 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);
@ -14,6 +29,7 @@ function pairPushed() {
// someone pushed the "show apps" button. // someone pushed the "show apps" button.
// if they entered something in the GFEHostIPField, use that. // if they entered something in the GFEHostIPField, use that.
// otherwise, we assume they selected from the host history dropdown. // otherwise, we assume they selected from the host history dropdown.
// TODO: pass the host info to the appChoose screen
function showAppsPushed() { function showAppsPushed() {
var target = document.getElementById('GFEHostIPField').value; var target = document.getElementById('GFEHostIPField').value;
if (target == null || target == "127.0.0.1") { if (target == null || target == "127.0.0.1") {
@ -21,7 +37,15 @@ function showAppsPushed() {
target = e.options[e.selectedIndex].value; target = e.options[e.selectedIndex].value;
} }
common.naclModule.postMessage('showAppsPushed:' + target); common.naclModule.postMessage('showAppsPushed:' + target);
document.getElementById("gameSelectionDiv").style.display = "visible"; // we just finished the hostSettings section. expose the next one
showAppsMode();
}
function showAppsMode() {
document.getElementById('streamSettings').style.display = 'none';
document.getElementById('hostSettings').style.display = 'none'
document.getElementById('gameSelection').style.display = 'inline-block'
// common.hideModule(); // do NOT hide the nacl module. you can't interact with it then
} }
// user wants to start a stream. We need the host, game ID, and video settings(?) // user wants to start a stream. We need the host, game ID, and video settings(?)
@ -35,6 +59,22 @@ 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
playGameMode();
}
function playGameMode() {
$(".mdl-layout__header").hide();
$("#main-content").children().not("#listener").hide();
$("#main-content").addClass("fullscreen");
$("#listener").addClass("fullscreen");
fullscreenNaclModule();
}
function fullscreenNaclModule() {
var body = document.getElementById("nacl_module");
body.width=window.innerWidth;
body.height=window.innerHeight;
} }
// user pushed the stop button. we should stop. // user pushed the stop button. we should stop.
@ -44,6 +84,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