From 9b4e7b661bae8a3d55a78fd6a61d067a7eb46eca Mon Sep 17 00:00:00 2001
From: Cameron Gutman <aicommander@gmail.com>
Date: Tue, 5 Sep 2017 21:04:59 -0700
Subject: [PATCH] Switch GFE optimizations from a menu to a toggle

---
 index.html         | 27 ++++++++++-----------------
 static/js/index.js | 30 ++++++++++++++++--------------
 2 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/index.html b/index.html
index b5b7653..dd1a234 100644
--- a/index.html
+++ b/index.html
@@ -21,23 +21,6 @@
             <div class="mdl-layout-spacer"></div>
             <!-- Navigation -->
             <nav class="mdl-navigation">
-                    <div class="nav-menu-parent">
-                        <div id="optimizeMenu">
-                            <button id="selectOptimize" data-value="1" class="mdl-button mdl-js-button">
-                                GFE Optimization
-                            </button>
-                        </div>
-
-                        <ul class="optimizeMenu mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
-                            for="selectOptimize">
-                            <li class="mdl-menu__item" data-value="1">GFE Optimization</li>
-                            <li class="mdl-menu__item" data-value="0">No GFE Optimization</li>
-                        </ul>
-
-                        <div id="optimizeTooltip" class="mdl-tooltip" for="optimizeMenu">
-                            Allow Geforce Experience to optimize game settings for stream
-                        </div>
-                    </div>
                     <div class="nav-menu-parent">
                         <div id="resolutionMenu">
                             <button id="selectResolution" data-value="1280:720" class="mdl-button mdl-js-button">
@@ -96,6 +79,16 @@
                         Remote audio
                     </div>
 
+                    <div class="nav-menu-parent">
+                        <label id="optimizeGamesBtn" class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="optimizeGamesSwitch">
+                            <input type="checkbox" id="optimizeGamesSwitch" class="mdl-icon-toggle__input">
+                            <i class="mdl-icon-toggle__label material-icons">timeline</i>
+                        </label>
+                        <div id="optimizeGamesTooltip" class="mdl-tooltip" for="optimizeGamesBtn">
+                            Allow GeForce Experience to optimize game settings for streaming
+                        </div>
+                    </div>
+
                     <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" id="quitCurrentApp" aria-label="Quit current app">
                         <i class="material-icons">remove_circle_outline</i>
                         Quit Current App
diff --git a/static/js/index.js b/static/js/index.js
index 58f7b30..6dd3212 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -12,11 +12,11 @@ function attachListeners() {
     changeUiModeForNaClLoad();
 
     $('.resolutionMenu li').on('click', saveResolution);
-    $('.optimizeMenu li').on('click', saveOptimize);
     $('.framerateMenu li').on('click', saveFramerate);
     $('#bitrateSlider').on('input', updateBitrateField); // input occurs every notch you slide
     //$('#bitrateSlider').on('change', saveBitrate); //FIXME: it seems not working
     $("#remoteAudioEnabledSwitch").on('click', saveRemoteAudio);
+    $('#optimizeGamesSwitch').on('click', saveOptimize);
     $('#addHostCell').on('click', addHost);
     $('#backIcon').on('click', showHostsAndSettingsMode);
     $('#quitCurrentApp').on('click', stopGameWithConfirmation);
@@ -568,7 +568,7 @@ function startGame(host, appID) {
             }
 
             var frameRate = $('#selectFramerate').data('value').toString();
-	    var optimize = $('#selectOptimize').data('value').toString();
+            var optimize = $("#optimizeGamesSwitch").parent().hasClass('is-checked') ? 1 : 0;
             var streamWidth = $('#selectResolution').data('value').split(':')[0];
             var streamHeight = $('#selectResolution').data('value').split(':')[1];
             // we told the user it was in Mbps. We're dirty liars and use Kbps behind their back.
@@ -718,10 +718,13 @@ function saveResolution() {
 }
 
 function saveOptimize() {
-    var chosenOptimize = $(this).data('value');
-    $('#selectOptimize').text($(this).text()).data('value', chosenOptimize);
-    storeData('optimize', chosenOptimize, null);
-    updateDefaultBitrate();
+    // MaterialDesignLight uses the mouseup trigger, so we give it some time to change the class name before
+    // checking the new state
+    setTimeout(function() {
+        var chosenOptimize = $("#optimizeGamesSwitch").parent().hasClass('is-checked');
+        console.log('%c[index.js, saveOptimize]', 'color: green;', 'Saving optimize state : ' + chosenOptimize);
+        storeData('optimize', chosenOptimize, null);
+    }, 100);
 }
 
 function saveFramerate() {
@@ -829,17 +832,16 @@ function onWindowLoad(){
             }
         });
 
-	// load stored optimization prefs
+        // load stored optimization prefs
         chrome.storage.sync.get('optimize', function(previousValue) {
-            if(previousValue.optimize != null) {
-                $('.optimizeMenu li').each(function () {
-                    if ($(this).data('value') === previousValue.optimize) {
-                        $('#selectOptimize').text($(this).text()).data('value', previousValue.optimize);
-                    }
-                });
+            if(previousValue.optimize == null) {
+                document.querySelector('#optimizeGamesBtn').MaterialIconToggle.uncheck();
+            } else if (previousValue.optimize == false) {
+                document.querySelector('#optimizeGamesBtn').MaterialIconToggle.uncheck();
+            }  else {
+                document.querySelector('#optimizeGamesBtn').MaterialIconToggle.check();
             }
         });
-
 	
         // load stored bitrate prefs
         chrome.storage.sync.get('bitrate', function(previousValue) {