Don't use global fileInput

js/actionCreators.js

@@ -303,10 +303,16 @@ export function setSkinFromUrl(url) {
   return setSkinFromFile(skinFile);
 }
 
-export function openFileDialog(fileInput) {
-  fileInput.click();
-  // No reducers currently respond to this.
-  return { type: OPEN_FILE_DIALOG };
+export function openFileDialog() {
+  return dispatch => {
+    // Does this represent a memory leak somehow?
+    const fileInput = document.createElement("input");
+    fileInput.type = "file";
+    fileInput.addEventListener("change", e => {
+      dispatch(loadFilesFromReferences(e.target.files));
+    });
+    fileInput.click();
+  };
 }
 
 export function setEqBand(band, value) {

js/components/App.js

@@ -15,15 +15,7 @@ const genWindowMap = {
 
 const GEN_WINDOWS = ["AVS_WINDOW"];
 
-const App = ({
-  media,
-  fileInput,
-  loading,
-  closed,
-  equalizer,
-  playlist,
-  openWindows
-}) => {
+const App = ({ media, loading, closed, equalizer, playlist, openWindows }) => {
   if (closed) {
     return null;
   }
@@ -42,9 +34,9 @@ const App = ({
     <div id="loaded">
       <Skin />
       <WindowManager>
-        <MainWindow fileInput={fileInput} mediaPlayer={media} />
-        {equalizer && <EqualizerWindow fileInput={fileInput} />}
-        {playlist && <PlaylistWindow fileInput={fileInput} />}
+        <MainWindow mediaPlayer={media} />
+        {equalizer && <EqualizerWindow />}
+        {playlist && <PlaylistWindow />}
         {GEN_WINDOWS.map((windowId, i) => {
           const Component = genWindowMap[windowId];
           return openWindows.has(windowId) && <Component key={i} />;

js/components/EqualizerWindow/PresetsContextMenu.js

@@ -10,9 +10,6 @@ const MainContextMenu = props => (
   </ContextMenu>
 );
 
-const mapDispatchToProps = (dispatch, ownProps) => ({
-  openFileDialog: () => dispatch(openFileDialog(ownProps.fileInput)),
-  downloadPreset: () => dispatch(downloadPreset())
-});
+const mapDispatchToProps = { openFileDialog, downloadPreset };
 
 export default connect(null, mapDispatchToProps)(MainContextMenu);

js/components/EqualizerWindow/index.js

@@ -60,7 +60,7 @@ const EqualizerWindow = props => {
           <EqOn />
           <EqAuto />
           <EqGraph />
-          <PresetsContextMenu fileInput={props.fileInput} />
+          <PresetsContextMenu />
           <Band id="preamp" band="preamp" onChange={props.setPreampValue} />
           <div id="plus12db" onClick={props.setEqToMax} />
           <div id="zerodb" onClick={props.setEqToMid} />

js/components/EqualizerWindow/index.test.js

@@ -33,7 +33,7 @@ describe("EqualizerWindow", () => {
     const tree = renderer
       .create(
         <Provider store={store}>
-          <EqualizerWindow fileInput={null} />
+          <EqualizerWindow />
         </Provider>,
         options
       )

js/components/MainWindow/Eject.js

@@ -7,8 +7,6 @@ const Eject = props => (
   <div id="eject" onClick={props.openFileDialog} title="Open File(s)" />
 );
 
-const mapDispatchToProps = (dispatch, ownProps) => ({
-  openFileDialog: () => dispatch(openFileDialog(ownProps.fileInput))
-});
+const mapDispatchToProps = { openFileDialog };
 
 export default connect(() => ({}), mapDispatchToProps)(Eject);

js/components/MainWindow/MainContextMenu.js

@@ -36,10 +36,6 @@ const mapStateToProps = state => ({
   avaliableSkins: state.settings.avaliableSkins
 });
 
-const mapDispatchToProps = (dispatch, ownProps) => ({
-  close: () => dispatch(close()),
-  openFileDialog: () => dispatch(openFileDialog(ownProps.fileInput)),
-  setSkin: url => dispatch(setSkinFromUrl(url))
-});
+const mapDispatchToProps = { close, openFileDialog, setSkin: setSkinFromUrl };
 
 export default connect(mapStateToProps, mapDispatchToProps)(MainContextMenu);

js/components/MainWindow/index.js

@@ -88,7 +88,7 @@ export class MainWindow extends React.Component {
           className="selected title-bard draggable"
           onDoubleClick={this.props.toggleMainWindowShadeMode}
         >
-          <MainContextMenu fileInput={this.props.fileInput} />
+          <MainContextMenu />
           {shade && <MiniTime />}
           <div id="minimize" />
           <Shade />
@@ -118,7 +118,7 @@ export class MainWindow extends React.Component {
         </div>
         <Position />
         <ActionButtons />
-        <Eject fileInput={this.props.fileInput} />
+        <Eject />
         <div className="shuffle-repeat">
           <Shuffle />
           <Repeat />

js/components/PlaylistWindow/index.js

@@ -163,7 +163,8 @@ class PlaylistWindow extends React.Component {
   }
 }
 
-const mapDispatchToProps = (dispatch, ownProps) => ({
+// TODO: Convert to object syntax
+const mapDispatchToProps = dispatch => ({
   focusPlaylist: () =>
     dispatch({
       type: SET_FOCUSED_WINDOW,
@@ -172,7 +173,7 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
   play: () => dispatch(play()),
   pause: () => dispatch(pause()),
   stop: () => dispatch(stop()),
-  openFileDialog: () => dispatch(openFileDialog(ownProps.fileInput)),
+  openFileDialog: () => dispatch(openFileDialog()),
   close: () => dispatch({ type: TOGGLE_PLAYLIST_WINDOW }),
   toggleShade: () => dispatch({ type: TOGGLE_PLAYLIST_SHADE_MODE }),
   toggleVisualizerStyle: () => dispatch(toggleVisualizerStyle()),

js/hotkeys.js

@@ -22,7 +22,7 @@ import {
 
 import { arraysAreEqual } from "./utils";
 
-export default function(fileInput, { dispatch }) {
+export default function(dispatch) {
   let keylog = [];
   const trigger = [
     78, // N
@@ -72,7 +72,7 @@ export default function(fileInput, { dispatch }) {
           dispatch(pause());
           break;
         case 76: // L
-          dispatch(openFileDialog(fileInput));
+          dispatch(openFileDialog());
           break;
         case 82: // R
           dispatch(toggleRepeat());
@@ -90,7 +90,7 @@ export default function(fileInput, { dispatch }) {
           dispatch(previous());
           break;
         case 96: // numpad 0
-          dispatch(openFileDialog(fileInput));
+          dispatch(openFileDialog());
           break;
         case 97: // numpad 1
           dispatch(nextN(-10));

js/media/index.js

@@ -5,7 +5,7 @@ import BufferSource from "./bufferSource";
 import ElementSource from "./elementSource";
 
 export default class Media {
-  constructor(fileInput) {
+  constructor() {
     this._context = new (window.AudioContext || window.webkitAudioContext)();
     this._callbacks = {
       waiting: function() {},
@@ -18,7 +18,6 @@ export default class Media {
     };
     this._balance = 0;
     this.name = null;
-    this.fileInput = fileInput;
 
     // The _source node has to be recreated each time it's stopped or
     // paused, so we don't create it here. Instead we create this dummy

js/winamp.js

@@ -6,11 +6,7 @@ import getStore from "./store";
 import App from "./components/App";
 import Hotkeys from "./hotkeys";
 import Media from "./media";
-import {
-  setSkinFromUrl,
-  loadMediaFromUrl,
-  loadFilesFromReferences
-} from "./actionCreators";
+import { setSkinFromUrl, loadMediaFromUrl } from "./actionCreators";
 
 import { SET_AVALIABLE_SKINS } from "./actionTypes";
 
@@ -18,25 +14,17 @@ class Winamp {
   constructor(options) {
     this.options = options;
 
-    this.fileInput = document.createElement("input");
-    this.fileInput.type = "file";
-    this.fileInput.style.display = "none";
-
-    this.media = new Media(this.fileInput);
+    this.media = new Media();
     this.store = getStore(this.media, this.options.__initialState);
   }
   render(node) {
     render(
       <Provider store={this.store}>
-        <App fileInput={this.fileInput} media={this.media} />
+        <App media={this.media} />
       </Provider>,
       node
     );
 
-    this.fileInput.addEventListener("change", e => {
-      this.store.dispatch(loadFilesFromReferences(e.target.files));
-    });
-
     if (this.options.initialTrack && this.options.initialTrack.url) {
       this.store.dispatch(
         loadMediaFromUrl(
@@ -54,7 +42,7 @@ class Winamp {
     }
     this.store.dispatch(setSkinFromUrl(this.options.initialSkin.url));
 
-    new Hotkeys(this.fileInput, this.store);
+    new Hotkeys(this.store.dispatch);
   }
 }