From 83a4deb3b1a89ccfab5a05f4bf1989073f9d717f Mon Sep 17 00:00:00 2001
From: Abdallah Soliman <abdallah.soliman@case.edu>
Date: Tue, 12 Jul 2016 19:36:23 -0500
Subject: [PATCH 01/12] added icons to hosts

---
 index.html                                   |   3 +-
 static/css/.style.css.swp                    | Bin 0 -> 12288 bytes
 static/css/style.css                         |  53 ++++---------------
 static/js/index.js                           |   3 +-
 static/res/ic_desktop_windows_white_24px.svg |   4 ++
 5 files changed, 18 insertions(+), 45 deletions(-)
 create mode 100644 static/css/.style.css.swp
 create mode 100644 static/res/ic_desktop_windows_white_24px.svg

diff --git a/index.html b/index.html
index c56ea1e..162d760 100644
--- a/index.html
+++ b/index.html
@@ -41,8 +41,9 @@
 
             <div id="hostSettings">
                 <div class="mdl-grid" id='host-grid'>
-                    <div class='mdl-cell mdl-cell--3-col' id='addHostCell'>
+                    <div class='mdl-cell mdl-cell--3-col host-cell' id='addHostCell'>
                         <img src="static/res/ic_add_circle_white_24px.svg" id='addHostIcon'></img>
+                        Add Host
                     </div>
                 </div>
             </div>
diff --git a/static/css/.style.css.swp b/static/css/.style.css.swp
new file mode 100644
index 0000000000000000000000000000000000000000..27ede3f46877e8acef5b8259190df5354342a2a6
GIT binary patch
literal 12288
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

literal 0
HcmV?d00001

diff --git a/static/css/style.css b/static/css/style.css
index da8f73c..50f9b04 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,36 +1,3 @@
-@font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Material Icons'),
-       local('MaterialIcons-Regular'),
-       url('../fonts/MaterialIcons-Regular.woff') format('woff'),
-}
-.material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;  /* Preferred icon size */
-  display: inline-block;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
-
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-
-  /* Support for Firefox. */
-  -moz-osx-font-smoothing: grayscale;
-
-  /* Support for IE. */
-  font-feature-settings: 'liga';
-}
-
 .mdl-layout__header-row {
     color: #fff;
 }
@@ -46,22 +13,12 @@
     color:#fff;
     padding:25px;
 } 
-#addHostIcon {
-    width:64px;
-    height:64px;
-    margin:auto;
-    display:block;
-}
 #backIcon {
     height: 32px;
     width: 32px;
     margin-left: -20px;
     padding-right: 20px;
 }
-#addHostCell {
-    padding-top:3px;
-    padding-bottom:3px;
-}
 .mdl-dialog {
   border: none;
   box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
@@ -184,3 +141,13 @@ main {
     color: #000;
     font-weight: bold;
 }
+.host-cell {
+    display: inline-block;
+    width: 150px !important;
+    height: 150px !important;
+    background-color: #000;
+}
+.host-cell img {
+    width: 80px;;
+    margin-bottom: 10px;
+}
diff --git a/static/js/index.js b/static/js/index.js
index 4eae8b5..5d6b322 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -510,9 +510,10 @@ function onWindowLoad(){
             hosts = previousValue.hosts != null ? previousValue.hosts : [];
             for(var i = 0; i < hosts.length; i++) { // programmatically add each new host.
                 var cell = document.createElement('div');
-                cell.className += 'mdl-cell mdl-cell--3-col';
+                cell.className += 'mdl-cell mdl-cell--3-col host-cell';
                 cell.id = 'hostgrid-' + hosts[i];
                 cell.innerHTML = hosts[i];
+                $(cell).prepend($("<img>", {src: "static/res/ic_desktop_windows_white_24px.svg"}));
                 $('#host-grid').append(cell);
                 cell.onclick = hostChosen;
             }
diff --git a/static/res/ic_desktop_windows_white_24px.svg b/static/res/ic_desktop_windows_white_24px.svg
new file mode 100644
index 0000000..685582f
--- /dev/null
+++ b/static/res/ic_desktop_windows_white_24px.svg
@@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18v12z"/>
+</svg>
\ No newline at end of file

From 02036a6d1413502f9f7c87a6b250b12eaebd43da Mon Sep 17 00:00:00 2001
From: Abdallah Soliman <abdallah.soliman@case.edu>
Date: Tue, 12 Jul 2016 20:15:13 -0500
Subject: [PATCH 02/12] changed cursor on hover to pointer for hostgrid and
 back button

---
 static/css/.style.css.swp | Bin 12288 -> 0 bytes
 static/css/style.css      |   6 ++++++
 2 files changed, 6 insertions(+)
 delete mode 100644 static/css/.style.css.swp

diff --git a/static/css/.style.css.swp b/static/css/.style.css.swp
deleted file mode 100644
index 27ede3f46877e8acef5b8259190df5354342a2a6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 12288
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

diff --git a/static/css/style.css b/static/css/style.css
index 50f9b04..c16afa0 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -19,6 +19,9 @@
     margin-left: -20px;
     padding-right: 20px;
 }
+#backIcon:hover {
+    cursor: pointer;
+}
 .mdl-dialog {
   border: none;
   box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
@@ -147,6 +150,9 @@ main {
     height: 150px !important;
     background-color: #000;
 }
+.host-cell:hover {
+    cursor: pointer;
+}
 .host-cell img {
     width: 80px;;
     margin-bottom: 10px;

From 17ee04333ec24852555dab4c5e6105b92c15ec66 Mon Sep 17 00:00:00 2001
From: Abdallah Soliman <abdallah.soliman@case.edu>
Date: Tue, 12 Jul 2016 20:16:31 -0500
Subject: [PATCH 03/12] ensured cursor for hover on boxart is also a pointer

---
 static/css/style.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/static/css/style.css b/static/css/style.css
index c16afa0..f195a5d 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -134,6 +134,9 @@ main {
     width: 100%;
     height: 100%;
 }
+.box-art:hover {
+    cursor: pointer;
+}
 .current-game {
     border: 3px solid green;
 }

From 4961af16dcfaf4dc1a48f83dab723da2d1023806 Mon Sep 17 00:00:00 2001
From: Abdallah Soliman <abdallah.soliman@case.edu>
Date: Tue, 12 Jul 2016 20:23:41 -0500
Subject: [PATCH 04/12] desired mdl behavior added to host button for trial
 purposes

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

diff --git a/static/js/index.js b/static/js/index.js
index f068950..e0dc712 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -523,7 +523,7 @@ function onWindowLoad(){
             hosts = previousValue.hosts != null ? previousValue.hosts : [];
             for(var i = 0; i < hosts.length; i++) { // programmatically add each new host.
                 var cell = document.createElement('div');
-                cell.className += 'mdl-cell mdl-cell--3-col host-cell';
+                cell.className += 'mdl-cell mdl-cell--3-col host-cell mdl-button mdl-js-button mdl-js-ripple-effect';
                 cell.id = 'hostgrid-' + hosts[i];
                 cell.innerHTML = hosts[i];
                 $(cell).prepend($("<img>", {src: "static/res/ic_desktop_windows_white_24px.svg"}));

From 237af5645d924e9105c9b0d21ceb95d14c7207c3 Mon Sep 17 00:00:00 2001
From: Abdallah Soliman <abdallah.soliman@case.edu>
Date: Tue, 12 Jul 2016 20:33:05 -0500
Subject: [PATCH 05/12] added box shadows because it looks nicer

---
 static/css/style.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/static/css/style.css b/static/css/style.css
index f195a5d..33e155f 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -133,6 +133,9 @@ main {
     margin: 0;
     width: 100%;
     height: 100%;
+    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.34);
+    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.34);
+    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.34);
 }
 .box-art:hover {
     cursor: pointer;
@@ -152,6 +155,9 @@ main {
     width: 150px !important;
     height: 150px !important;
     background-color: #000;
+    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.34);
+    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.34);
+    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.34);
 }
 .host-cell:hover {
     cursor: pointer;

From db256962a4317e755483821e0df931d498213041 Mon Sep 17 00:00:00 2001
From: Abdallah Soliman <abdallah.soliman@case.edu>
Date: Tue, 12 Jul 2016 20:34:12 -0500
Subject: [PATCH 06/12] changed host buttons to be rounded, because looks nicer

---
 static/css/style.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/static/css/style.css b/static/css/style.css
index 33e155f..6eeb4b7 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -158,6 +158,9 @@ main {
     -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.34);
     -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.34);
     box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.34);
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
 }
 .host-cell:hover {
     cursor: pointer;

From 4c882e83fdf1441e428fe6bccf90aa6d02721589 Mon Sep 17 00:00:00 2001
From: Abdallah Soliman <abdallah.soliman@case.edu>
Date: Tue, 12 Jul 2016 20:39:08 -0500
Subject: [PATCH 07/12] inverted colors of hostgrid sample on hover to improve
 readability

---
 static/css/style.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/static/css/style.css b/static/css/style.css
index 6eeb4b7..0d48836 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -164,6 +164,11 @@ main {
 }
 .host-cell:hover {
     cursor: pointer;
+    color: #000 !important;
+}
+.host-cell:hover img {
+    -webkit-filter: invert(100%);
+    filter: invert(100%);
 }
 .host-cell img {
     width: 80px;;

From 0a84d27386d4ccc0f8971916c648886d25efba2d Mon Sep 17 00:00:00 2001
From: "R. Aidan Campbell" <aidan.campbell@gmail.com>
Date: Sat, 23 Jul 2016 13:58:24 -0400
Subject: [PATCH 08/12] fixed issue with game not being highlighted on exit

---
 static/js/index.js    | 33 ++++++++++++++++++++++-----------
 static/js/messages.js |  9 ++++++++-
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/static/js/index.js b/static/js/index.js
index e0dc712..5ade95a 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -218,6 +218,25 @@ function pairingPopupCanceled() {
     document.querySelector('#pairingDialog').close();
 }
 
+// puts the CSS style for current app on the app that's currently running
+// and puts the CSS style for non-current app apps that aren't running
+// this requires a hot-off-the-host `api`, and the appId we're going to stylize
+// the function was made like this so that we can remove duplicated code, but
+// not do N*N stylizations of the box art, or make the code not flow very well 
+function stylizeBoxArt(freshApi, appIdToStylize) {
+    if (freshApi.currentGame === appIdToStylize){ // stylize the currently running game
+        // destylize it, if it has the not-current-game style
+        if ($('#game-'+ appIdToStylize).hasClass("not-current-game")) $('#game-'+ appIdToStylize).removeClass("not-current-game");
+        // add the current-game style
+        $('#game-'+ appIdToStylize).addClass("current-game");
+    } else {
+        // destylize it, if it has the current-game style
+        if ($('#game-'+ appIdToStylize).hasClass("current-game")) $('#game-'+ appIdToStylize).removeClass("current-game");
+        // add the not-current-game style
+        $('#game-'+ appIdToStylize).addClass('not-current-game');
+    }
+}
+
 // show the app list
 function showApps() {
     if(!api || !api.paired) {  // safety checking. shouldn't happen.
@@ -231,21 +250,13 @@ function showApps() {
     api.getAppList().then(function (appList) {
         appList.forEach(function (app) {
             api.getBoxArt(app.id).then(function (resolvedPromise) {
+                // put the box art into the image holder
                 var imageBlob =  new Blob([resolvedPromise], {type: "image/png"});
                 $("#game-grid").append($("<div>", {html:$("<img \>", {src: URL.createObjectURL(imageBlob), id: 'game-'+app.id, name: app.title }), class: 'box-art mdl-cell mdl-cell--3-col'}).append($("<span>", {html: app.title, class:"game-title"})));
                 $('#game-'+app.id).on('click', startGame);
 
-                if (api.currentGame === app.id){ // stylize the currently running game
-                    // destylize it, if it has the not-current-game style
-                    if ($('#game-'+ app.id).hasClass("not-current-game")) $('#game-'+ app.id).removeClass("not-current-game");
-                    // add the current-game style
-                    $('#game-'+ app.id).addClass("current-game");
-                } else {
-                    // destylize it, if it has the current-game style
-                    if ($('#game-'+ app.id).hasClass("current-game")) $('#game-'+ app.id).removeClass("current-game");
-                    // add the not-current-game style
-                    $('#game-'+ app.id).addClass('not-current-game');
-                }
+                // apply CSS stylization to indicate whether the app is active
+                stylizeBoxArt(api, app.id);
 
             }, function (failedPromise) {
                 console.log('Error! Failed to retrieve box art for app ID: ' + app.id + '. Returned value was: ' + failedPromise)
diff --git a/static/js/messages.js b/static/js/messages.js
index cc223c8..8279a0d 100644
--- a/static/js/messages.js
+++ b/static/js/messages.js
@@ -22,10 +22,17 @@ function handleMessage(msg) {
         console.log(msg.data);
         if(msg.data === 'streamTerminated') {  // if it's a recognized event, notify the appropriate function
             $('#loadingSpinner').css('display', 'none'); // This is a fallback for RTSP handshake failing, which immediately terminates the stream.            
-            api.refreshServerInfo().then(function (ret) {
+
+            api.refreshServerInfo().then(function (ret) {  // refresh the serverinfo to acknowledge the currently running app
+                api.getAppList().then(function (appList) {
+                    appList.forEach(function (app) {
+                        stylizeBoxArt(api, app.id);  // and reapply stylization to indicate what's currently running
+                    });
+                });
                 showApps();
                 chrome.app.window.current().restore();
             });
+
         } else if(msg.data === 'Connection Established') {
             $('#loadingSpinner').css('display', 'none');
         } else if(msg.data.indexOf('ProgressMsg: ') === 0) {

From 286bc316e665a3efd75abe096de3ffb48a988487 Mon Sep 17 00:00:00 2001
From: "R. Aidan Campbell" <aidan.campbell@gmail.com>
Date: Sat, 23 Jul 2016 17:00:08 -0400
Subject: [PATCH 09/12] parsed more info from server

---
 static/js/utils.js | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/static/js/utils.js b/static/js/utils.js
index 27e430a..441ef5e 100644
--- a/static/js/utils.js
+++ b/static/js/utils.js
@@ -41,6 +41,12 @@ function NvHTTP(address, clientUid) {
     this._baseUrlHttps = 'https://' + address + ':47984';
     this._baseUrlHttp = 'http://' + address + ':47989';
     this._memCachedBoxArtArray = {};
+
+    this.serverUid = '';
+    this.GfeVersion = '';
+    this.supportedDisplayModes = {}; // key: y-resolution:x-resolution, value: array of supported framerates (only ever seen 30 or 60, here)
+    this.gputype = '';
+    this.numofapps = 0;
     _self = this;
 };
 
@@ -78,7 +84,7 @@ NvHTTP.prototype = {
     _parseServerInfo: function(xmlStr) {
         $xml = _self._parseXML(xmlStr);
         $root = $xml.find('root');
-        
+
         if($root.attr("status_code") != 200) {
             return false;
         }
@@ -86,7 +92,24 @@ NvHTTP.prototype = {
         _self.paired = $root.find("PairStatus").text().trim() == 1;
         _self.currentGame = parseInt($root.find("currentgame").text().trim(), 10);
         _self.serverMajorVersion = parseInt($root.find("appversion").text().trim().substring(0, 1), 10);
-        
+        _self.serverUid = $root.find('uniqueid').text().trim();
+        _self.GfeVersion = $root.find('GfeVersion').text().trim();
+        _self.gputype = $root.find('gputype').text().trim();
+        _self.numofapps = $root.find('numofapps').text().trim();
+        // now for the hard part: parsing the supported streaming
+        $root.find('DisplayMode').each(function(index, value) {  // for each resolution:FPS object
+            var yres = parseInt($(value).find('Height').text());
+            var xres = parseInt($(value).find('Width').text());
+            var fps = parseInt($(value).find('RefreshRate').text());
+            if(!_self.supportedDisplayModes[yres + ':' + xres]) {
+                _self.supportedDisplayModes[yres + ':' + xres] = [];
+            }
+            if(!_self.supportedDisplayModes[yres + ':' + xres].includes(fps)) {
+                _self.supportedDisplayModes[yres + ':' + xres].push(fps);
+            }
+
+        });
+
         // GFE 2.8 started keeping currentgame set to the last game played. As a result, it no longer
         // has the semantics that its name would indicate. To contain the effects of this change as much
         // as possible, we'll force the current game to zero if the server isn't in a streaming session.

From edc4a0ad29161328c53475b55cda17d9d65be71c Mon Sep 17 00:00:00 2001
From: "R. Aidan Campbell" <aidan.campbell@gmail.com>
Date: Sat, 23 Jul 2016 18:54:19 -0400
Subject: [PATCH 10/12] fixed bugs where new hosts would get different icons,
 and where clicking the .svg would fail to load the app list

---
 static/js/index.js | 41 ++++++++++++++++++++++-------------------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/static/js/index.js b/static/js/index.js
index 5ade95a..19b4759 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -1,4 +1,7 @@
-var host = "";
+// CURRENT ISSUE: host is not being saved.  or it may have not been saved, and my state is screwed up.
+// if (given host not in hosts) hosts.append(given host);
+
+var _host = "";
 var hosts = [];
 var pairingCert;
 var myUniqueid;
@@ -149,14 +152,19 @@ function pairTo(host, onSuccess, onFailure) {
 function hostChosen(sourceEvent) {
 
     if(sourceEvent && sourceEvent.srcElement) {
-        console.log('parsing host from grid element.');
-        host = sourceEvent.srcElement.innerText;
+        if (sourceEvent.srcElement.innerText == "") {
+            console.log('user clicked image. we gotta hack to parse out the host.');
+            host = sourceEvent.currentTarget.childNodes[1].textContent;
+        } else {
+            console.log('parsing host from grid element.');
+            host = sourceEvent.srcElement.innerText;
+        }
     }
 
     api = new NvHTTP(host, myUniqueid);
     api.refreshServerInfo().then(function (ret) {
         if(!api.paired) {
-            pairTo(host, function(){ showApps(); }, function(){});
+            pairTo(host, function(){ showApps(); saveHosts(); }, function(){});
         } else {
             showApps();
         }
@@ -178,15 +186,15 @@ function cancelAddHost() {
 }
 
 function addHostToGrid(host) {
-    if(hosts.indexOf(host) < 0) { // we don't have this host in our list. add it, and save it.
-        var cell = document.createElement('div');
-        cell.className += 'mdl-cell mdl-cell--3-col';
-        cell.id = 'hostgrid-' + host;
-        cell.innerHTML = host;
-        $('#host-grid').append(cell);
-        cell.onclick = hostChosen;
+    var cell = document.createElement('div');
+    cell.className += 'mdl-cell mdl-cell--3-col host-cell mdl-button mdl-js-button mdl-js-ripple-effect';
+    cell.id = 'hostgrid-' + host;
+    cell.innerHTML = host;
+    $(cell).prepend($("<img>", {src: "static/res/ic_desktop_windows_white_24px.svg"}));
+    $('#host-grid').append(cell);
+    cell.onclick = hostChosen;
+    if(hosts.indexOf(host) < 0) {
         hosts.push(host);
-        saveHosts();
     }
 }
 
@@ -196,6 +204,7 @@ function continueAddHost() {
     pairTo(inputHost, 
         function() {
            addHostToGrid(inputHost);
+           saveHosts();
            document.querySelector('#addHostDialog').close();
         },
         function() {
@@ -533,13 +542,7 @@ function onWindowLoad(){
         chrome.storage.sync.get('hosts', function(previousValue) {
             hosts = previousValue.hosts != null ? previousValue.hosts : [];
             for(var i = 0; i < hosts.length; i++) { // programmatically add each new host.
-                var cell = document.createElement('div');
-                cell.className += 'mdl-cell mdl-cell--3-col host-cell mdl-button mdl-js-button mdl-js-ripple-effect';
-                cell.id = 'hostgrid-' + hosts[i];
-                cell.innerHTML = hosts[i];
-                $(cell).prepend($("<img>", {src: "static/res/ic_desktop_windows_white_24px.svg"}));
-                $('#host-grid').append(cell);
-                cell.onclick = hostChosen;
+                addHostToGrid(hosts[i]);
             }
 
         });

From 8c78632d0bc4ce3c4aab628ca5fb5a85cf26095c Mon Sep 17 00:00:00 2001
From: "R. Aidan Campbell" <aidan.campbell@gmail.com>
Date: Sat, 23 Jul 2016 20:47:55 -0400
Subject: [PATCH 11/12] added untested support for remote audio playing

---
 index.html         |  6 +++++-
 static/js/index.js | 21 +++++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 162d760..fdc5708 100644
--- a/index.html
+++ b/index.html
@@ -34,8 +34,12 @@
                         <option value="30">30 FPS</option>
                         <option value="60">60 FPS</option>
                     </select>
-                    <output id='bitrateField'>10 Mbps</output>
                 </div>
+                <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="remoteAudioEnabledSwitch" id="remoteAudioEnabledSwitchContainer">
+                    <input type="checkbox" id="remoteAudioEnabledSwitch" class="mdl-switch__input" checked>
+                    <span class="mdl-switch__label">Remote audio off/on</span>
+                </label>
+                <output id='bitrateField'>10 Mbps</output>
                 <input id="bitrateSlider" class="mdl-slider mdl-js-slider" type="range" min="0" max="100" step="0.5" value="10">
             </div>
 
diff --git a/static/js/index.js b/static/js/index.js
index 19b4759..ca06485 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -16,6 +16,7 @@ function attachListeners() {
     $('#selectFramerate').on('change', saveFramerate);
     $('#bitrateSlider').on('input', updateBitrateField); // input occurs every notch you slide
     $('#bitrateSlider').on('change', saveBitrate); // change occurs once the mouse lets go.
+    $("#remoteAudioEnabledSwitch").on('click', saveRemoteAudio);
     $('#hostChosen').on('click', hostChosen);
     $('#addHostCell').on('click', addHost);
     $('#cancelAddHost').on('click', cancelAddHost);
@@ -369,6 +370,8 @@ function startGame(sourceEvent) {
             });
         }
 
+        remote_audio_enabled = $("#remoteAudioEnabledSwitch").parent().hasClass('is-checked') ? 1 : 0;
+
         api.launchApp(appID,
                 streamWidth + "x" + streamHeight + "x" + frameRate,
                 1, // Allow GFE to optimize game settings
@@ -497,6 +500,14 @@ function saveBitrate() {
     storeData('bitrate', $('#bitrateSlider').val(), null);
 }
 
+function saveRemoteAudio() {
+    console.log('saving remote audio state');
+    // problem: when off, and the app is just starting, a tick to the switch doesn't always toggle it
+    // second problem: this callback is called immediately after clicking, so the HTML class `is-checked` isn't toggled yet
+    // to solve the second problem, we invert the boolean.  This has worked in all cases I've tried, except for the first case
+    storeData('remoteAudio', !$("#remoteAudioEnabledSwitch").parent().hasClass('is-checked'), null);
+}
+
 function updateDefaultBitrate() {
     var res = $('#selectResolution').val();
     var frameRate = $('#selectFramerate').val();
@@ -534,6 +545,16 @@ function onWindowLoad(){
         chrome.storage.sync.get('resolution', function(previousValue) {
             $('#selectResolution').val(previousValue.resolution != null ? previousValue.resolution : '1280:720');
         });
+        chrome.storage.sync.get('remoteAudio', function(previousValue) {
+            if(previousValue.remoteAudio == null) {
+                document.querySelector('#remoteAudioEnabledSwitchContainer').MaterialSwitch.off();
+                return;
+            } else if(previousValue.remoteAudio == false) {
+                document.querySelector('#remoteAudioEnabledSwitchContainer').MaterialSwitch.off();
+            }  else {
+                document.querySelector('#remoteAudioEnabledSwitchContainer').MaterialSwitch.on();
+            }
+        });
         // load stored framerate prefs
         chrome.storage.sync.get('frameRate', function(previousValue) {
             $('#selectFramerate').val(previousValue.frameRate != null ? previousValue.frameRate : '60');

From b41294b9b95206b9dac410a852bbe55a396e7147 Mon Sep 17 00:00:00 2001
From: "R. Aidan Campbell" <aidan.campbell@gmail.com>
Date: Sat, 23 Jul 2016 21:00:17 -0400
Subject: [PATCH 12/12] fixed bug where add host button wouldn't invert colors
 on hover

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index fdc5708..ff72d25 100644
--- a/index.html
+++ b/index.html
@@ -45,7 +45,7 @@
 
             <div id="hostSettings">
                 <div class="mdl-grid" id='host-grid'>
-                    <div class='mdl-cell mdl-cell--3-col host-cell' id='addHostCell'>
+                    <div class='mdl-cell mdl-cell--3-col host-cell mdl-button mdl-js-button mdl-js-ripple-effect' id='addHostCell'>
                         <img src="static/res/ic_add_circle_white_24px.svg" id='addHostIcon'></img>
                         Add Host
                     </div>