Display message in selector instead of disabling browser action

ext/src/_locales/en/messages.json

@@ -34,6 +34,10 @@
         "message": "to:"
       , "description": "Cast <select> (to:)"
     }
+  , "popupNoReceiversFound": {
+        "message": "No receiver devices found"
+      , "description": "Message displayed in the receiver selector if there are no available receivers."
+    }
   , "popupCastButtonTitle": {
         "message": "Cast"
       , "description": "Button text for each receiver entry in the receiver selector."

ext/src/background/StatusManager.ts

@@ -149,10 +149,15 @@ export default new class StatusManager
 
         // Cleanup
         this.receivers.clear();
-        this.bridgePort.onDisconnect.removeListener(
-                this.onBridgePortDisconnect);
-        this.bridgePort.onMessage.removeListener(this.onBridgePortMessage);
-        this.bridgePort = null;
+
+        if (this.bridgePort) {
+            this.bridgePort.onDisconnect.removeListener(
+                    this.onBridgePortDisconnect);
+            this.bridgePort.onMessage.removeListener(
+                    this.onBridgePortMessage);
+
+            this.bridgePort = null;
+        }
 
         window.setTimeout(async () => {
             this.bridgePort = await this.createBridgePort();

ext/src/background/background.ts

@@ -44,7 +44,7 @@ browser.runtime.onInstalled.addListener(async details => {
 
 
 function initBrowserAction () {
-    browser.browserAction.disable();
+    /*browser.browserAction.disable();
 
     function onServiceChange () {
         if (StatusManager.getReceivers().length) {
@@ -55,7 +55,7 @@ function initBrowserAction () {
     }
 
     StatusManager.addEventListener("serviceUp", onServiceChange);
-    StatusManager.addEventListener("serviceDown", onServiceChange);
+    StatusManager.addEventListener("serviceDown", onServiceChange);*/
 
 
     /**

ext/src/background/receiverSelector/NativeReceiverSelector.ts

@@ -100,6 +100,7 @@ export default class NativeReceiverSelector
               , i18n_mediaTypeFile: _("popupMediaTypeFile")
               , i18n_mediaSelectCastLabel: _("popupMediaSelectCastLabel")
               , i18n_mediaSelectToLabel: _("popupMediaSelectToLabel")
+              , i18n_noReceiversFound: _("popupNoReceiversFound")
             })
         });
 

ext/src/ui/popup/index.tsx

@@ -152,13 +152,17 @@ class PopupApp extends Component<{}, PopupAppState> {
                     </div>
                 </div>
                 <ul className="receivers">
-                    { this.state.receivers && this.state.receivers.map(
-                            (receiver, i) => (
-                        <ReceiverEntry receiver={ receiver }
-                                       onCast={ this.onCast }
-                                       isLoading={ this.state.isLoading }
-                                       canCast={ canCast }
-                                       key={ i }/> ))}
+                    { this.state.receivers && this.state.receivers.length
+                        ? this.state.receivers.map((receiver, i) => (
+                            <ReceiverEntry receiver={ receiver }
+                                           onCast={ this.onCast }
+                                           isLoading={ this.state.isLoading }
+                                           canCast={ canCast }
+                                           key={ i } /> ))
+                        : (
+                            <div className="receivers__not-found">
+                                { _("popupNoReceiversFound") }
+                            </div> )}
                 </ul>
             </div>
         );

ext/src/ui/popup/styles/index.css

@@ -33,6 +33,14 @@ body {
     padding: initial;
 }
 
+.receivers__not-found {
+    align-items: center;
+    display: flex;
+    height: 50px;
+    justify-content: center;
+    padding: 0.75em 1em;
+}
+
 .receiver {
     column-gap: 0.75em;
     display: grid;