Various UI and UX improvements to match other Moonlight clients

index.html

@@ -92,10 +92,10 @@
     </dialog>
 
     <dialog id="replaceAppDialog" class="mdl-dialog">
-        <h3 class="mdl-dialog__title">Replace App?</h3>
+        <h3 class="mdl-dialog__title">Quit Running App?</h3>
         <div class="mdl-dialog__content">
             <p id="replaceAppDialogText">
-                You wanted to start app X. App Y is already running. Would you like to stop app Y to start app X?
+                Y is already running. Would you like to quit Y to start X?
             </p>
         </div>
         <div class="mdl-dialog__actions">

static/css/style.css

@@ -7,7 +7,7 @@
 .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);
-  width: 280px; 
+  width: 400px; 
 }
 .mdl-dialog__title {
     padding: 24px 24px 0;
@@ -23,7 +23,7 @@
     z-index: 1;
     position: fixed;
     left: 50%;
-    bottom: 20px;
+    bottom: 50%;
     transform: translate(-50%, -50%);
     margin: 0 auto;
 }

static/js/index.js

@@ -37,7 +37,7 @@ function snackbarLog(givenMessage) {
     console.log(givenMessage);
     var data = {
       message: givenMessage,
-      timeout: 5000
+      timeout: 2000
     };
     document.querySelector('#snackbar').MaterialSnackbar.showSnackbar(data);
 }
@@ -117,8 +117,6 @@ function pairTo(host) {
         return true;
     }
 
-    $('#pairButton').html('Pairing...');
-    snackbarLog('Attempting pair to: ' + host);
     var randomNumber = String("0000" + (Math.random()*10000|0)).slice(-4);
     var pairingDialog = document.querySelector('#pairingDialog');
     $('#pairingDialogText').html('Please enter the number ' + randomNumber + ' on the GFE dialog on the computer.  This dialog will be dismissed once complete');
@@ -128,18 +126,13 @@ function pairTo(host) {
     api.pair(randomNumber).then(function (paired) {
         if (!paired) {
             if (api.currentGame != 0) {
-                snackbarLog(host + ' is already in app. Cannot pair!');
-                $('#pairButton').html('Pairing Failed');
                 $('#pairingDialogText').html('Error: ' + host + ' is in app.  Cannot pair until the app is stopped.');
             } else {
-                snackbarLog('Pairing failed');
-                $('#pairButton').html('Pairing Failed');
                 $('#pairingDialogText').html('Error: failed to pair with ' + host + '.  failure reason unknown.');
             }
             return false;
         }
         
-        $('#pairButton').html('Paired');
         snackbarLog('Pairing successful');
         pairingDialog.close();
         
@@ -276,11 +269,10 @@ function startSelectedGame() {
     api.refreshServerInfo().then(function (ret) {
         if(api.currentGame != 0 && api.currentGame != appID) {
             api.getAppById(api.currentGame).then(function (currentApp) {
-                snackbarLog('Error: ' + host + ' is already in app: ' + currentApp.title);
-
                 var replaceAppDialog = document.querySelector('#replaceAppDialog');
                 document.getElementById('replaceAppDialogText').innerHTML = 
-                    'You wanted to start a new game. ' + currentApp.title + ' is already running. Would you like to stop ' + currentApp.title + ', then start the new game?';
+                    currentApp.title + ' is already running. Would you like to quit ' +
+                    currentApp.title + ' to start ' + $("#selectGame option:selected").text() + '?';
                 replaceAppDialog.showModal();
                 return;
             }, function (failedCurrentApp) {
@@ -291,8 +283,6 @@ function startSelectedGame() {
             return;
         }
 
-        snackbarLog('Starting app: ' + $('#selectGame option:selected').text());
-
         var frameRate = $("#selectFramerate").val();
         var streamWidth = $('#selectResolution option:selected').val().split(':')[0];
         var streamHeight = $('#selectResolution option:selected').val().split(':')[1];
@@ -303,6 +293,8 @@ function startSelectedGame() {
         var rikey = '00000000000000000000000000000000';
         var rikeyid = 0;
 
+        playGameMode();
+
         if(api.currentGame == appID) // if user wants to launch the already-running app, then we resume it.
             return api.resumeApp(rikey, rikeyid).then(function (ret) {
                 sendMessage('startRequest', [host, streamWidth, streamHeight, frameRate, bitrate.toString(), api.serverMajorVersion.toString()]);
@@ -326,8 +318,6 @@ function startSelectedGame() {
                 return;
             });
     });
-    console.log('finished startSelectedGame.');
-    playGameMode();
 }
 
 function cancelReplaceApp() {