From b6eaa2b0c0195cd0fbb7c54f328793e507d2ec1d Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Mon, 28 Mar 2016 14:20:43 -0400
Subject: [PATCH] fix device disconnect

---
 dashboard-ui/scripts/mediacontroller.js | 62 ++++++++++++++++---------
 1 file changed, 40 insertions(+), 22 deletions(-)

diff --git a/dashboard-ui/scripts/mediacontroller.js b/dashboard-ui/scripts/mediacontroller.js
index 3507ec7446..4f1e66e84f 100644
--- a/dashboard-ui/scripts/mediacontroller.js
+++ b/dashboard-ui/scripts/mediacontroller.js
@@ -119,18 +119,25 @@
 
     function showActivePlayerMenu(playerInfo) {
 
-        require(['paper-checkbox', 'fade-in-animation', 'fade-out-animation', 'paper-dialog'], function () {
-            showActivePlayerMenuInternal(playerInfo);
+        require(['dialogHelper', 'paper-checkbox', ], function (dialogHelper) {
+            showActivePlayerMenuInternal(dialogHelper, playerInfo);
         });
     }
 
-    function showActivePlayerMenuInternal(playerInfo) {
+    function showActivePlayerMenuInternal(dialogHelper, playerInfo) {
 
         var html = '';
 
-        var dlg = document.createElement('paper-dialog');
-        dlg.setAttribute('with-backdrop', 'with-backdrop');
-        dlg.setAttribute('role', 'alertdialog');
+        var dialogOptions = {
+            removeOnClose: true
+        };
+
+        dialogOptions.modal = false;
+        dialogOptions.entryAnimationDuration = 160;
+        dialogOptions.exitAnimationDuration = 160;
+        dialogOptions.autoFocus = false;
+
+        var dlg = dialogHelper.createDialog(dialogOptions);
 
         html += '<h2>';
         html += (playerInfo.deviceName || playerInfo.name);
@@ -152,33 +159,44 @@
 
         // On small layouts papepr dialog doesn't respond very well. this button isn't that important here anyway.
         if (screen.availWidth >= 600) {
-            html += '<paper-button onclick="Dashboard.navigate(\'nowplaying.html\');" dialog-dismiss>' + Globalize.translate('ButtonRemoteControl') + '</paper-button>';
+            html += '<paper-button class="btnRemoteControl">' + Globalize.translate('ButtonRemoteControl') + '</paper-button>';
         }
 
-        html += '<paper-button dialog-dismiss onclick="MediaController.disconnectFromPlayer();">' + Globalize.translate('ButtonDisconnect') + '</paper-button>';
-        html += '<paper-button dialog-dismiss>' + Globalize.translate('ButtonCancel') + '</paper-button>';
+        html += '<paper-button class="btnDisconnect">' + Globalize.translate('ButtonDisconnect') + '</paper-button>';
+        html += '<paper-button class="btnCancel">' + Globalize.translate('ButtonCancel') + '</paper-button>';
         html += '</div>';
 
         dlg.innerHTML = html;
 
         document.body.appendChild(dlg);
 
-        setTimeout(function () {
+        var chkMirror = dlg.querySelector('.chkMirror');
 
-            var chkMirror = dlg.querySelector('.chkMirror');
+        if (chkMirror) {
+            chkMirror.addEventListener('change', onMirrorChange);
+        }
 
-            if (chkMirror) {
-                chkMirror.addEventListener('change', onMirrorChange);
+        var destination = '';
+
+        dlg.querySelector('.btnRemoteControl').addEventListener('click', function () {
+            destination = 'nowplaying.html';
+            dialogHelper.close(dlg);
+        });
+
+        dlg.querySelector('.btnDisconnect').addEventListener('click', function () {
+            MediaController.disconnectFromPlayer();
+            dialogHelper.close(dlg);
+        });
+
+        dlg.querySelector('.btnCancel').addEventListener('click', function () {
+            dialogHelper.close(dlg);
+        });
+
+        dialogHelper.open(dlg).then(function () {
+            if (destination) {
+                Dashboard.navigate(destination);
             }
-
-            dlg.open();
-
-            // Has to be assigned a z-index after the call to .open() 
-            dlg.addEventListener('iron-overlay-closed', function () {
-                dlg.parentNode.removeChild(dlg);
-            });
-
-        }, 100);
+        });
     }
 
     function onMirrorChange() {