Type the main window

js/components/MainWindow/__snapshots__/index.test.js.snap

@@ -317,52 +317,10 @@ exports[`MainWindow renders to snapshot 1`] = `
     </div>
     <div
       id="kbps"
-    >
-      <span
-        className=" character character-110"
-      >
-        n
-      </span>
-      <span
-        className=" character character-117"
-      >
-        u
-      </span>
-      <span
-        className=" character character-108"
-      >
-        l
-      </span>
-      <span
-        className=" character character-108"
-      >
-        l
-      </span>
-    </div>
+    />
     <div
       id="khz"
-    >
-      <span
-        className=" character character-110"
-      >
-        n
-      </span>
-      <span
-        className=" character character-117"
-      >
-        u
-      </span>
-      <span
-        className=" character character-108"
-      >
-        l
-      </span>
-      <span
-        className=" character character-108"
-      >
-        l
-      </span>
-    </div>
+    />
     <div
       className="mono-stereo"
     >

js/components/MainWindow/index.tsx

@@ -4,7 +4,6 @@ import classnames from "classnames";
 import { WINDOWS, MEDIA_STATUS } from "../../constants";
 import {
   loadFilesFromReferences,
-  removeAllTracks,
   toggleMainWindowShadeMode,
   scrollVolume
 } from "../../actionCreators";
@@ -38,14 +37,45 @@ import Time from "./Time";
 import MainVolume from "./MainVolume";
 
 import "../../../css/main-window.css";
+import {
+  MediaStatus,
+  WindowId,
+  AppState,
+  Dispatch,
+  FilePicker
+} from "../../types";
 
-export class MainWindow extends React.Component {
+interface StateProps {
+  focused: WindowId;
+  loading: boolean;
+  doubled: boolean;
+  mainShade: boolean;
+  llama: boolean;
+  working: boolean;
+  status: MediaStatus | null;
+}
+
+interface DispatchProps {
+  setFocus(): void;
+  loadFilesFromReferences(files: FileList): void;
+  scrollVolume(e: React.WheelEvent<HTMLDivElement>): void;
+  toggleMainWindowShadeMode(): void;
+}
+
+interface OwnProps {
+  analyser: AnalyserNode;
+  filePickers: FilePicker[];
+}
+
+type Props = StateProps & DispatchProps & OwnProps;
+
+export class MainWindow extends React.Component<Props> {
   _handleClick = () => {
     this.props.setFocus();
   };
 
-  _handleDrop = e => {
-    this.props.loadFilesFromReferences(e);
+  _handleDrop = (e: React.DragEvent<HTMLDivElement>): void => {
+    this.props.loadFilesFromReferences(e.dataTransfer.files);
   };
 
   render() {
@@ -91,7 +121,10 @@ export class MainWindow extends React.Component {
             bottom
             handle={<ClickedDiv id="option" title="Winamp Menu" />}
           >
-            <MainContextMenu filePickers={filePickers} />
+            <MainContextMenu
+              // @ts-ignore MainContextMenu is not typed yet
+              filePickers={filePickers}
+            />
           </ContextMenuTarget>
           {mainShade && <MiniTime />}
           <Minimize />
@@ -107,7 +140,10 @@ export class MainWindow extends React.Component {
           />
           <Time />
         </div>
-        <Visualizer analyser={this.props.analyser} />
+        <Visualizer
+          // @ts-ignore Visualizer is not typed yet
+          analyser={this.props.analyser}
+        />
         <div className="media-info">
           <Marquee />
           <Kbps />
@@ -138,14 +174,14 @@ export class MainWindow extends React.Component {
   }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: AppState): StateProps => {
   const {
     media: { status },
     display: { loading, doubled, llama, working },
     windows: { focused }
   } = state;
   return {
-    mainShade: getWindowShade(state)("main"),
+    mainShade: Boolean(getWindowShade(state)("main")),
     status,
     loading,
     doubled,
@@ -155,12 +191,16 @@ const mapStateToProps = state => {
   };
 };
 
-const mapDispatchToProps = {
-  setFocus: () => ({ type: SET_FOCUSED_WINDOW, window: WINDOWS.MAIN }),
-  loadFilesFromReferences: e => loadFilesFromReferences(e.dataTransfer.files),
-  removeAllTracks,
-  toggleMainWindowShadeMode,
-  scrollVolume
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
+  return {
+    setFocus: () =>
+      dispatch({ type: SET_FOCUSED_WINDOW, window: WINDOWS.MAIN }),
+    loadFilesFromReferences: (files: FileList) =>
+      dispatch(loadFilesFromReferences(files)),
+    toggleMainWindowShadeMode: () => dispatch(toggleMainWindowShadeMode()),
+    scrollVolume: (e: React.WheelEvent<HTMLDivElement>) =>
+      dispatch(scrollVolume(e))
+  };
 };
 export default connect(
   mapStateToProps,

js/components/PlaylistWindow/PlaylistShade.tsx

@@ -8,6 +8,7 @@ import {
 } from "../../selectors";
 import { getTimeStr } from "../../utils";
 import { SET_FOCUSED_WINDOW } from "../../actionTypes";
+import * as Selectors from "../../selectors";
 
 import {
   WINDOWS,
@@ -23,7 +24,7 @@ import { AppState, WindowId, Dispatch } from "../../types";
 
 interface StateProps {
   name: string | null;
-  length: number | null;
+  duration: number | null;
   playlistSize: [number, number];
   focused: WindowId;
   trackOrder: number[];
@@ -55,8 +56,8 @@ class PlaylistShade extends React.Component<StateProps & DispatchProps> {
   }
 
   _time() {
-    const { length, name } = this.props;
-    return name == null ? "" : getTimeStr(length);
+    const { duration, name } = this.props;
+    return name == null ? "" : getTimeStr(duration);
   }
 
   render() {
@@ -109,15 +110,15 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
 };
 
 const mapStateToProps = (state: AppState): StateProps => {
+  const duration = Selectors.getDuration(state);
   const {
-    windows: { focused },
-    media: { length }
+    windows: { focused }
   } = state;
   return {
     focused,
     playlistSize: getWindowSize(state)("playlist"),
     trackOrder: getOrderedTracks(state),
-    length,
+    duration,
     name: getMinimalMediaText(state)
   };
 };

js/components/PlaylistWindow/index.tsx

@@ -13,13 +13,7 @@ import {
   scrollVolume,
   closeWindow
 } from "../../actionCreators";
-import {
-  getScrollOffset,
-  getWindowPixelSize,
-  getWindowSize,
-  getWindowShade,
-  getSkinPlaylistStyle
-} from "../../selectors";
+import * as Selectors from "../../selectors";
 
 import { LOAD_STYLE } from "../../constants";
 
@@ -216,19 +210,18 @@ const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
 const mapStateToProps = (state: AppState): StateProps => {
   const {
     windows: { focused },
-    media: { length },
     playlist: { trackOrder }
   } = state;
 
   return {
-    offset: getScrollOffset(state),
+    offset: Selectors.getScrollOffset(state),
     maxTrackIndex: trackOrder.length - 1,
-    playlistWindowPixelSize: getWindowPixelSize(state)("playlist"),
+    playlistWindowPixelSize: Selectors.getWindowPixelSize(state)("playlist"),
     focused,
-    skinPlaylistStyle: getSkinPlaylistStyle(state),
-    playlistSize: getWindowSize(state)("playlist"),
-    playlistShade: Boolean(getWindowShade(state)("playlist")),
-    duration: length
+    skinPlaylistStyle: Selectors.getSkinPlaylistStyle(state),
+    playlistSize: Selectors.getWindowSize(state)("playlist"),
+    playlistShade: Boolean(Selectors.getWindowShade(state)("playlist")),
+    duration: Selectors.getDuration(state)
   };
 };
 

js/types.ts

@@ -17,6 +17,12 @@ export {
   WindowPositions
 } from "./reducers/windows";
 
+export interface FilePicker {
+  contextMenuName: string;
+  filePicker: () => Promise<Track[]>;
+  requiresNetwork: boolean;
+}
+
 export type Skin = {
   url: string;
   name: string;