Add file media type to receiver selectors

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
         });
     }
 }