From 61cc902c6335d9eca55ba469b28c92e49b395a0e Mon Sep 17 00:00:00 2001
From: Aidan Campbell <aidan.campbell@gmail.com>
Date: Thu, 18 Feb 2016 13:43:26 -0500
Subject: [PATCH 1/6] UI added to select stream settings. Beginning work on #9

---
 index.html         | 24 +++++++++++++++++++++---
 static/js/index.js |  8 ++++++++
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index aa965ca..e82a18d 100644
--- a/index.html
+++ b/index.html
@@ -24,8 +24,26 @@
         </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>
+                <code id="logField">log</code>
+            </div>
+
+            <div id="streamSettings">
+                <div class="mdl-select">
+                    <select id="selectResolution">
+                        <option selected="720">Stream Resolution</option>
+                        <option value="720">1280x720</option>
+                        <option value="768">1366x768</option>
+                        <option value="1280">1920x1080</option>
+                    </select>
+                </div>
+                <div class="mdl-select"> 
+                    <select id="selectFramerate">
+                        <option value="30">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 +67,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>
diff --git a/static/js/index.js b/static/js/index.js
index 88ee339..0e2c687 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -106,3 +106,11 @@ function handleMessage(msg) {
     }
 }
 
+
+function onWindowLoad(){
+    document.getElementById('streamSettings').style.display = 'none';
+    document.getElementById('gameSelection').style.display = 'none';
+}
+
+window.onload = onWindowLoad;
+

From 0aa55254ebd542cba356616f6fa6c7c71f74af22 Mon Sep 17 00:00:00 2001
From: Aidan Campbell <aidan.campbell@gmail.com>
Date: Thu, 18 Feb 2016 16:28:33 -0500
Subject: [PATCH 2/6] stream settings are now stored, but they don't do
 anything

---
 index.html    | 4 ++--
 manifest.json | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index e82a18d..f8d3eb7 100644
--- a/index.html
+++ b/index.html
@@ -30,7 +30,7 @@
             <div id="streamSettings">
                 <div class="mdl-select">
                     <select id="selectResolution">
-                        <option selected="720">Stream Resolution</option>
+                        <option selected="NONE">Stream Resolution</option>
                         <option value="720">1280x720</option>
                         <option value="768">1366x768</option>
                         <option value="1280">1920x1080</option>
@@ -38,7 +38,7 @@
                 </div>
                 <div class="mdl-select"> 
                     <select id="selectFramerate">
-                        <option value="30">Framerate</option>
+                        <option value="NONE">Framerate</option>
                         <option value="30">30fps</option>
                         <option value="60">60fps</option>
                     </select>
diff --git a/manifest.json b/manifest.json
index 4ea4cef..69b3145 100644
--- a/manifest.json
+++ b/manifest.json
@@ -17,6 +17,7 @@
         }
     },
     "permissions": [
+        "storage",
         "pointerLock",
         "fullscreen", {
         "socket": [

From c675de7b7f2c245fd8f6aed73b493641a220165f Mon Sep 17 00:00:00 2001
From: Aidan Campbell <aidan.campbell@gmail.com>
Date: Thu, 18 Feb 2016 17:10:40 -0500
Subject: [PATCH 3/6] removed 'log' element for javascript log

---
 index.html           | 3 ---
 static/css/style.css | 3 ---
 2 files changed, 6 deletions(-)

diff --git a/index.html b/index.html
index f8d3eb7..3a1a69a 100644
--- a/index.html
+++ b/index.html
@@ -23,9 +23,6 @@
             </div>
         </header>
         <main id="main-content" class="mdl-layout__content">
-            <div class="log-holder">
-                <code id="logField">log</code>
-            </div>
 
             <div id="streamSettings">
                 <div class="mdl-select">
diff --git a/static/css/style.css b/static/css/style.css
index e5a0ff8..8be7d88 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -7,9 +7,6 @@
 main {
 	padding: 50px 100px;
 }
-.log-holder {
-	margin-bottom: 10px;
-}
 #hostSettings {
 	padding: 5px 10px;
 	border: 1px dashed;

From 8dfa196a13d174ecb66098589fcf42c5b9fc12e3 Mon Sep 17 00:00:00 2001
From: Aidan Campbell <aidan.campbell@gmail.com>
Date: Thu, 18 Feb 2016 17:41:40 -0500
Subject: [PATCH 4/6] saving and loading hostname

---
 main.cpp            |  3 ++
 static/js/common.js |  2 +-
 static/js/index.js  | 77 ++++++++++++++++++++++++++++++++++++++++-----
 3 files changed, 73 insertions(+), 9 deletions(-)

diff --git a/main.cpp b/main.cpp
index 906a40c..5c2405d 100644
--- a/main.cpp
+++ b/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);
diff --git a/static/js/common.js b/static/js/common.js
index 7f32805..d56e16e 100644
--- a/static/js/common.js
+++ b/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
diff --git a/static/js/index.js b/static/js/index.js
index 0e2c687..181ffc0 100644
--- a/static/js/index.js
+++ b/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,8 +58,8 @@ 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;
     }
@@ -97,19 +102,75 @@ 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').value = previousValue.resolution != null ? previousValue.resolution : '720';
+}
+
+function saveResolution() {
+    storeData('resolution', document.getElementById('selectResolution').value, null);
+}
+
+function loadFramerate(previousValue) {
+    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('streamSettings').style.display = 'none';
     document.getElementById('gameSelection').style.display = 'none';
+    readData('resolution', loadResolution);
+    readData('frameRate', loadFramerate);
+    readData('hosts', loadHosts);
 }
 
 window.onload = onWindowLoad;

From acfe4d8be63a9a3461f034ee8f1b8a03b2088f69 Mon Sep 17 00:00:00 2001
From: Aidan Campbell <aidan.campbell@gmail.com>
Date: Thu, 18 Feb 2016 21:55:27 -0500
Subject: [PATCH 5/6] now choosing video parameters makes a difference

---
 index.html         |  7 +++----
 main.cpp           | 34 ++++++++++++++++++++++++++++++----
 static/js/index.js |  7 +++++--
 3 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/index.html b/index.html
index 3a1a69a..217de20 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
                 <!-- Navigation. We hide it in small screens. -->
                 <ul class='mdl-list'>
                     <li>Chrome App Status: <code id="statusField">NO-STATUS</code></li>
-                </ul>   
+                </ul>
             </div>
         </header>
         <main id="main-content" class="mdl-layout__content">
@@ -28,9 +28,8 @@
                 <div class="mdl-select">
                     <select id="selectResolution">
                         <option selected="NONE">Stream Resolution</option>
-                        <option value="720">1280x720</option>
-                        <option value="768">1366x768</option>
-                        <option value="1280">1920x1080</option>
+                        <option value="1280:720">1280x720</option>
+                        <option value="1920:1080">1920x1080</option>
                     </select>
                 </div>
                 <div class="mdl-select"> 
diff --git a/main.cpp b/main.cpp
index 5c2405d..1245725 100644
--- a/main.cpp
+++ b/main.cpp
@@ -135,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;
@@ -148,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);
diff --git a/static/js/index.js b/static/js/index.js
index 181ffc0..46551f3 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -63,7 +63,10 @@ function startPushed() {
         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();
 }
@@ -133,7 +136,7 @@ function readData(key, callbackFunction) {
 }
 
 function loadResolution(previousValue) {
-    document.getElementById('selectResolution').value = previousValue.resolution != null ? previousValue.resolution : '720';
+    document.getElementById('selectResolution').value = previousValue.resolution != null ? previousValue.resolution : '1280:720';
 }
 
 function saveResolution() {

From 884eb395893c067b7e490886f0b12bebd0b5b005 Mon Sep 17 00:00:00 2001
From: Aidan Campbell <aidan.campbell@gmail.com>
Date: Thu, 18 Feb 2016 22:11:03 -0500
Subject: [PATCH 6/6] removed default resolution/FPS text if saved value is
 found

---
 static/js/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/static/js/index.js b/static/js/index.js
index 46551f3..53e4d6e 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -136,6 +136,7 @@ function readData(key, callbackFunction) {
 }
 
 function loadResolution(previousValue) {
+    document.getElementById('selectResolution').remove(0);
     document.getElementById('selectResolution').value = previousValue.resolution != null ? previousValue.resolution : '1280:720';
 }
 
@@ -144,6 +145,7 @@ function saveResolution() {
 }
 
 function loadFramerate(previousValue) {
+    document.getElementById('selectFramerate').remove(0);
     document.getElementById('selectFramerate').value = previousValue.frameRate != null ? previousValue.frameRate : '30';
 }