Merge branch 'master' of github.com:cgutman/moonlight-chrome

index.html

@@ -23,9 +23,23 @@
             </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="streamSettings">
+                <div class="mdl-select">
+                    <select id="selectResolution">
+                        <option selected="NONE">Stream Resolution</option>
+                        <option value="1280:720">1280x720</option>
+                        <option value="1920:1080">1920x1080</option>
+                    </select>
+                </div>
+                <div class="mdl-select"> 
+                    <select id="selectFramerate">
+                        <option value="NONE">Framerate</option>
+                        <option value="30">30fps</option>
+                        <option value="60">60fps</option>
+                    </select>
+                </div>
+            </div>
 
             <div id="hostSettings">
                 <p>Enter the IP/hostname of the GFE streaming computer, or select one from the history:</p>
@@ -49,7 +63,7 @@
                 <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" class="mdl-select">
+            <div id="gameSelection" class="mdl-select">
                 <p>Select a game to run</p>
                 <select id="selectGame">
                     <option value="game_id_1">Game Name 1</option>

main.cpp

@@ -29,6 +29,9 @@ class MoonlightModule : public pp::Module {
 };
 
 void MoonlightInstance::OnConnectionStarted(uint32_t unused) {
+    // Tell the front end
+    pp::Var response("Connection Established");
+    g_Instance->PostMessage(response);
     // Start receiving input events
     g_Instance->RequestInputEvents(PP_INPUTEVENT_CLASS_MOUSE);
     g_Instance->RequestFilteringInputEvents(PP_INPUTEVENT_CLASS_WHEEL | PP_INPUTEVENT_CLASS_KEYBOARD);
@@ -132,11 +135,37 @@ void MoonlightInstance::HandleMessage(const pp::Var& var_message) {
     }
 }
 
+void split(const std::string& s, char c, std::vector<std::string>& v) {
+   std::string::size_type i = 0;
+   std::string::size_type j = s.find(c);
+
+   while (j != std::string::npos) {
+      v.push_back(s.substr(i, j-i));
+      i = ++j;
+      j = s.find(c, j);
+
+      if (j == std::string::npos) v.push_back(s.substr(i, s.length()));
+   }
+
+}
+
 void MoonlightInstance::handleStartStream(std::string startStreamMessage) {
+    // request:host:width:height:fps:bitrate
+    std::vector<std::string> splitString;
+    split(startStreamMessage, ':', splitString);
+
+    pp::Var response("Setting stream width to: " + splitString.at(2));
+    PostMessage(response);
+    response = ("Setting stream height to: " + splitString.at(3));
+    PostMessage(response);
+    response = ("Setting stream fps to: " + splitString.at(4));
+    PostMessage(response);
+    response = ("Setting stream host to: " + splitString.at(1));
+    PostMessage(response);
     // Populate the stream configuration
-    m_StreamConfig.width = 1280;
-    m_StreamConfig.height = 720;
-    m_StreamConfig.fps = 60;
+    m_StreamConfig.width = stoi(splitString.at(2));
+    m_StreamConfig.height = stoi(splitString.at(3));
+    m_StreamConfig.fps = stoi(splitString.at(4));
     m_StreamConfig.bitrate = 15000; // kilobits per second
     m_StreamConfig.packetSize = 1024;
     m_StreamConfig.streamingRemotely = 0;
@@ -145,7 +174,7 @@ void MoonlightInstance::handleStartStream(std::string startStreamMessage) {
     m_ServerMajorVersion = 4;
 
     // Store the host from the start message
-    m_Host = startStreamMessage.substr(strlen(MSG_START_REQUEST));
+    m_Host = splitString.at(1);
     
     // Start the worker thread to establish the connection
     pthread_create(&m_ConnectionThread, NULL, MoonlightInstance::ConnectionThreadFunc, this);

manifest.json

@@ -17,6 +17,7 @@
         }
     },
     "permissions": [
+        "storage",
         "pointerLock",
         "fullscreen", {
         "socket": [

static/css/style.css

@@ -7,9 +7,6 @@
 main {
 	padding: 50px 100px;
 }
-.log-holder {
-	margin-bottom: 10px;
-}
 #hostSettings {
 	padding: 5px 10px;
 	border: 1px dashed;

static/js/common.js

@@ -330,7 +330,7 @@ var common = (function() {
     } else {
       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

static/js/index.js

@@ -1,15 +1,19 @@
+var target = "";
+var hosts = [];
+
 // Called by the common.js module.
 function attachListeners() {
     document.getElementById('startButton').addEventListener('click', startPushed);
     document.getElementById('stopButton').addEventListener('click', stopPushed);
     document.getElementById('pairButton').addEventListener('click', pairPushed);
     document.getElementById('showAppsButton').addEventListener('click', showAppsPushed);
+    document.getElementById('selectResolution').addEventListener('change', saveResolution);
+    document.getElementById('selectFramerate').addEventListener('change', saveFramerate);
     window.addEventListener("resize", fullscreenNaclModule);
 }
 
 function moduleDidLoad() {
-    var logEl = document.getElementById('logField');
-    logEl.innerHTML = "module loaded";
+    console.log("NaCl module loaded.");
 }
 
 // we want the user to progress through the streaming process
@@ -24,6 +28,7 @@ function hideAllWorkflowDivs() {
 
 // pair button was pushed. pass what the user entered into the GFEHostIPField.
 function pairPushed() {
+
 }
 
 // someone pushed the "show apps" button. 
@@ -31,7 +36,7 @@ function pairPushed() {
 // 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;
+    target = document.getElementById('GFEHostIPField').value;
     if (target == null || target == "127.0.0.1") {
         var e = document.getElementById("selectHost");
         target = e.options[e.selectedIndex].value;
@@ -53,12 +58,15 @@ function showAppsMode() {
 // user wants to start a stream.  We need the host, game ID, and video settings(?)
 // TODO: video settings.
 function startPushed() {
-    var target = document.getElementById('GFEHostIPField').value;
-    if (target == null || target == "127.0.0.1") {
+    target = document.getElementById('GFEHostIPField').value;
+    if (target == null || target == "127.0.0.1" || target == "") {
         var e = document.getElementById("selectHost");
         target = e.options[e.selectedIndex].value;
     }
-    common.naclModule.postMessage('startRequest:' + target);
+    var frameRate = document.getElementById('selectFramerate').value;
+    var resolution = document.getElementById('selectResolution').value;
+    console.log('startRequest:' + target + ":" + resolution + ":" + frameRate);
+    common.naclModule.postMessage('startRequest:' + target + ":" + resolution + ":" + frameRate + ":");
     // we just finished the gameSelection section. only expose the NaCl section
     playGameMode();
 }
@@ -97,12 +105,78 @@ function stopPushed() {
 // hook from main.cpp into the javascript
 function handleMessage(msg) {
     var quitStreamString = "streamTerminated";
-    var logEl = document.getElementById('logField');
-    logEl.innerHTML = msg.data;
+    var connectionEstablishedString = "Connection Established";
     console.log("message received: " + msg.data);
     if (msg.data.lastIndexOf(quitStreamString, 0) === 0) {
         console.log("Stream termination message received. returning to 'show apps' screen.")
         showAppsMode();
+    } else if (msg.data.lastIndexOf(connectionEstablishedString, 0) === 0) {
+        var hostSelect = document.getElementById('selectHost');
+        for(var i = 0; i < hostSelect.length; i++) {
+            if (hostSelect.options[i].value == target) return;
+        }
+
+        var opt = document.createElement('option');
+        opt.appendChild(document.createTextNode(target));
+        opt.value = target;
+        document.getElementById('selectHost').appendChild(opt);
+        hosts.push(target);
+        saveHosts();
     }
 }
 
+function storeData(key, data, callbackFunction) {
+    var obj = {};
+    obj[key] = data;
+    chrome.storage.sync.set(obj, callbackFunction);
+}
+
+function readData(key, callbackFunction) {
+    chrome.storage.sync.get(key, callbackFunction);
+}
+
+function loadResolution(previousValue) {
+    document.getElementById('selectResolution').remove(0);
+    document.getElementById('selectResolution').value = previousValue.resolution != null ? previousValue.resolution : '1280:720';
+}
+
+function saveResolution() {
+    storeData('resolution', document.getElementById('selectResolution').value, null);
+}
+
+function loadFramerate(previousValue) {
+    document.getElementById('selectFramerate').remove(0);
+    document.getElementById('selectFramerate').value = previousValue.frameRate != null ? previousValue.frameRate : '30';
+}
+
+function saveFramerate() {
+    storeData('frameRate', document.getElementById('selectFramerate').value, null);
+}
+
+function saveHosts() {
+    storeData('hosts', hosts, null);
+}
+
+function loadHosts(previousValue) {
+    hosts = previousValue.hosts != null ? previousValue.hosts : [];
+    if (document.getElementById('selectHost').length > 0) {
+        document.getElementById('selectHost').remove(document.getElementById('selectHost').selectedIndex);
+    }
+    for(var i = 0; i < hosts.length; i++) { // programmatically add each new host.
+        var opt = document.createElement('option');
+        opt.appendChild(document.createTextNode(hosts[i]));
+        opt.value = hosts[i];
+        document.getElementById('selectHost').appendChild(opt);
+    }
+}
+
+function onWindowLoad(){
+    // document.getElementById('streamSettings').style.display = 'none';
+    document.getElementById('gameSelection').style.display = 'none';
+    readData('resolution', loadResolution);
+    readData('frameRate', loadFramerate);
+    readData('hosts', loadHosts);
+}
+
+window.onload = onWindowLoad;
+