Display message in selector instead of disabling browser action

app/NativeMacReceiverSelector/ViewController.swift

@@ -106,33 +106,48 @@ class ViewController : NSViewController {
         stackView.addArrangedSubview(mediaTypeStackView)
 
 
-        /**
-         * For each receiver in the initData list, create a new
-         * ReceiverView, set self as a ReceiverViewDelegate and
-         * appends to main stack view.
-         *
-         * Keeps a reference to the receiver view to call disable()
-         * later.
-         */
-        for receiver in initData.receivers {
-            // Create separator between last receiver / media type
-            let receiverSeparator = NSBox()
-            receiverSeparator.boxType = .separator
+        if initData.receivers.count < 1 {
+            let separator = NSBox()
+            separator.boxType = .separator
 
-            let receiverView = ReceiverView(receiver: receiver)
-            receiverView.receiverViewDelegate = self
+            let notFoundStackView = NSStackView(views: [
+                makeLabel(initData.i18n_noReceiversFound)
+            ])
 
-            if UInt(initData.availableMediaTypes) == 0
-                    || (initData.availableMediaTypes
-                            & initData.defaultMediaType.rawValue) == 0 {
-                receiverView.isEnabled = false
+            notFoundStackView.alignment = .centerX
+            notFoundStackView.edgeInsets = NSEdgeInsetsMake(18, 0, 18, 0)
+
+            stackView.addArrangedSubview(separator)
+            stackView.addArrangedSubview(notFoundStackView)
+        } else {
+            /**
+             * For each receiver in the initData list, create a new
+             * ReceiverView, set self as a ReceiverViewDelegate and
+             * appends to main stack view.
+             *
+             * Keeps a reference to the receiver view to call disable()
+             * later.
+             */
+            for receiver in initData.receivers {
+                // Create separator between last receiver / media type
+                let receiverSeparator = NSBox()
+                receiverSeparator.boxType = .separator
+
+                let receiverView = ReceiverView(receiver: receiver)
+                receiverView.receiverViewDelegate = self
+
+                if UInt(initData.availableMediaTypes) == 0
+                        || (initData.availableMediaTypes
+                                & initData.defaultMediaType.rawValue) == 0 {
+                    receiverView.isEnabled = false
+                }
+
+
+                self.receiverViews.append(receiverView)
+
+                stackView.addArrangedSubview(receiverSeparator)
+                stackView.addArrangedSubview(receiverView)
             }
-
-
-            self.receiverViews.append(receiverView)
-
-            stackView.addArrangedSubview(receiverSeparator)
-            stackView.addArrangedSubview(receiverView)
         }
 
 

app/NativeMacReceiverSelector/models/InitData.swift

@@ -16,4 +16,5 @@ struct InitData : Codable {
     let i18n_mediaTypeFile: String
     let i18n_mediaSelectCastLabel: String
     let i18n_mediaSelectToLabel: String
+    let i18n_noReceiversFound: String
 }

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;