Add file media type to receiver selectors

ext/src/_locales/en/messages.json

@@ -21,6 +21,10 @@
         "message": "Screen"
       , "description": "Receiver selector media type <option> text for screen."
     }
+  , "popupMediaTypeFile": {
+        "message": "Browse..."
+      , "description": "Receiver selector media type <option> text for opening a file selector dialog."
+    }
 
   , "popupMediaSelectCastLabel": {
         "message": "Cast"

ext/src/receiver_selectors/NativeMacReceiverSelector.ts

@@ -70,6 +70,7 @@ export default class NativeMacReceiverSelector
               , i18n_mediaTypeApp: _("popupMediaTypeApp")
               , i18n_mediaTypeTab: _("popupMediaTypeTab")
               , i18n_mediaTypeScreen: _("popupMediaTypeScreen")
+              , i18n_mediaTypeFile: _("popupMediaTypeFile")
               , i18n_mediaSelectCastLabel: _("popupMediaSelectCastLabel")
               , i18n_mediaSelectToLabel: _("popupMediaSelectToLabel")
             })

ext/src/receiver_selectors/ReceiverSelector.ts

@@ -7,11 +7,13 @@ export enum ReceiverSelectorMediaType {
     App = 1
   , Tab = 2
   , Screen = 4
+  , File = 8
 }
 
 export interface ReceiverSelection {
     receiver: Receiver;
     mediaType: ReceiverSelectorMediaType;
+    filePath?: string;
 }
 
 export type ReceiverSelectorSelectedEvent = CustomEvent<ReceiverSelection>;

ext/src/shim/cast/classes/ApiConfig.ts

@@ -31,6 +31,7 @@ export default class ApiConfig {
           , public _availableMediaTypes: ReceiverSelectorMediaType
                     = ReceiverSelectorMediaType.App
                     | ReceiverSelectorMediaType.Tab
-                    | ReceiverSelectorMediaType.Screen) {
+                    | ReceiverSelectorMediaType.Screen
+                    | ReceiverSelectorMediaType.File) {
     }
 }

ext/src/ui/popup/index.tsx

@@ -30,11 +30,13 @@ interface PopupAppState {
     mediaType: ReceiverSelectorMediaType;
     availableMediaTypes: ReceiverSelectorMediaType;
     isLoading: boolean;
+    filePath: string;
 }
 
 class PopupApp extends Component<{}, PopupAppState> {
     private port: browser.runtime.Port;
     private win: browser.windows.Window;
+    private defaultMediaType: ReceiverSelectorMediaType;
 
     constructor (props: {}) {
         super(props);
@@ -44,6 +46,7 @@ class PopupApp extends Component<{}, PopupAppState> {
           , mediaType: ReceiverSelectorMediaType.App
           , availableMediaTypes: ReceiverSelectorMediaType.App
           , isLoading: false
+          , filePath: null
         };
 
         // Store window ref
@@ -63,9 +66,11 @@ class PopupApp extends Component<{}, PopupAppState> {
         this.port.onMessage.addListener((message: Message) => {
             switch (message.subject) {
                 case "popup:/populateReceiverList": {
+                    this.defaultMediaType = message.data.defaultMediaType;
+
                     this.setState({
                         receivers: message.data.receivers
-                      , mediaType: message.data.defaultMediaType
+                      , mediaType: this.defaultMediaType
                       , availableMediaTypes: message.data.availableMediaTypes
                     });
 
@@ -93,6 +98,18 @@ class PopupApp extends Component<{}, PopupAppState> {
     }
 
     public render () {
+        let truncatedFileName: string;
+
+        if (this.state.filePath) {
+            const filePath = this.state.filePath;
+            const fileName = filePath.substring(filePath.lastIndexOf("/") + 1);
+
+            truncatedFileName = fileName.length > 12
+                ? `${fileName.substring(0, 12)}...`
+                : fileName;
+        }
+
+
         return (
             <div>
                 <div className="media-select">
@@ -115,6 +132,16 @@ class PopupApp extends Component<{}, PopupAppState> {
                                         & ReceiverSelectorMediaType.Screen) }>
                             { _("popupMediaTypeScreen") }
                         </option>
+                        <option disabled>
+                            ─────
+                        </option>
+                        <option value={ ReceiverSelectorMediaType.File }
+                                disabled={ !(this.state.availableMediaTypes
+                                        & ReceiverSelectorMediaType.File) }>
+                            { this.state.filePath
+                                ? truncatedFileName
+                                : _("popupMediaTypeFile") }
+                        </option>
                     </select>
                     { _("popupMediaSelectToLabel") }
                 </div>
@@ -140,13 +167,45 @@ class PopupApp extends Component<{}, PopupAppState> {
           , data: {
                 receiver
               , mediaType: this.state.mediaType
+              , filePath: this.state.filePath
             }
         });
     }
 
     private onSelectChange (ev: React.ChangeEvent<HTMLSelectElement>) {
+        const mediaType = parseInt(ev.target.value);
+
+        if (mediaType === ReceiverSelectorMediaType.File) {
+            try {
+                const filePath = window.prompt();
+
+                // Validate URL
+                const fileUrl = new URL(filePath.startsWith("file://")
+                    ? filePath
+                    : `file://${filePath}`);
+
+                this.setState({
+                    mediaType
+                  , filePath
+                });
+
+                return;
+            } catch (err) {
+                // Don't need to handle any errors
+            }
+
+            // Set media type to default if failed to set filePath
+            this.setState({
+                mediaType: this.defaultMediaType
+            });
+        } else {
+            this.setState({
+                mediaType
+            });
+        }
+
         this.setState({
-            mediaType: parseInt(ev.target.value)
+            filePath: null
         });
     }
 }