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

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="Expires" content="-1">
<title>Moonlight</title>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="common.js"></script>
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> -->
<link rel="stylesheet" href="static/css/material.min.css">
<link rel="stylesheet" href="static/css/style.css">
</head>
<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">
<h1>Moonlight Streaming</h1>
<h2>Chrome App Status: <code id="statusField">NO-STATUS</code></h2>
<p></p>
<code id="logField">log</code>
<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>
<div id="listener">
</div>
</main>
</div>
<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>
<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>
<script defer src="static/js/jquery-2.2.0.min.js"></script>
<script defer src="static/js/material.min.js"></script>
<script type="text/javascript" src="static/js/common.js"></script>
<script type="text/javascript" src="static/js/index.js"></script>
</body>
</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) {
handleStopStream(message);
} else {
// :(
pp::Var response("Unhandled message received: " + message);
PostMessage(response);
}
}
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));
}
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));
}
@ -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
// 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);
// Start the worker thread to establish the connection
@ -128,7 +133,8 @@ void MoonlightInstance::handleStartStream(std::string startStreamMessage) {
}
void MoonlightInstance::handleStopStream(std::string stopStreamMessage) {
pp::Var response("Stop button pushed. Ignoring.");
PostMessage(response);
}
bool MoonlightInstance::Init(uint32_t argc,

3
manifest.json
View File

@ -12,7 +12,8 @@
"app": {
"background": {
"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": [

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.window.create('index.html', {
'bounds': {
'width': 400,
'height': 500
}
state: "fullscreen",
});
});

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

@ -327,11 +327,10 @@ var common = (function() {
if (typeof window.handleMessage !== 'undefined') {
window.handleMessage(message_event);
return;
} else {
logMessage('Unhandled message: ' + message_event.data);
}
logMessage('Unhandled message: ' + message_event.data);
}
} // TODO: page reloads here???
/**
* 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);
}
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.
function pairPushed() {
common.naclModule.postMessage('pair:' + document.getElementById('GFEHostIPField').value);
@ -14,6 +29,7 @@ function pairPushed() {
// someone pushed the "show apps" button.
// if they entered something in the GFEHostIPField, use that.
// otherwise, we assume they selected from the host history dropdown.
// TODO: pass the host info to the appChoose screen
function showAppsPushed() {
var target = document.getElementById('GFEHostIPField').value;
if (target == null || target == "127.0.0.1") {
@ -21,7 +37,15 @@ function showAppsPushed() {
target = e.options[e.selectedIndex].value;
}
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(?)
@ -35,6 +59,22 @@ function startPushed() {
var gameIDDropdown = document.getElementById("selectGame");
var gameID = gameIDDropdown[gameIDDropdown.selectedIndex].value;
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.
@ -44,6 +84,11 @@ function stopPushed() {
// hook from main.cpp into the javascript
function handleMessage(msg) {
var quitStreamString = "quitStream";
var logEl = document.getElementById('logField');
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