From fbc0bede3e240dbde99fb7d2fa14caab114d4da8 Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Sat, 29 Dec 2018 12:48:50 -0800 Subject: [PATCH] Type the main window --- .../__snapshots__/index.test.js.snap | 46 +------------ .../MainWindow/{index.js => index.tsx} | 68 +++++++++++++++---- .../PlaylistWindow/PlaylistShade.tsx | 13 ++-- js/components/PlaylistWindow/index.tsx | 21 ++---- js/types.ts | 6 ++ 5 files changed, 76 insertions(+), 78 deletions(-) rename js/components/MainWindow/{index.js => index.tsx} (70%) diff --git a/js/components/MainWindow/__snapshots__/index.test.js.snap b/js/components/MainWindow/__snapshots__/index.test.js.snap index 340dafa2..b0413e83 100644 --- a/js/components/MainWindow/__snapshots__/index.test.js.snap +++ b/js/components/MainWindow/__snapshots__/index.test.js.snap @@ -317,52 +317,10 @@ exports[`MainWindow renders to snapshot 1`] = `
- - n - - - u - - - l - - - l - -
+ />
- - n - - - u - - - l - - - l - -
+ />
diff --git a/js/components/MainWindow/index.js b/js/components/MainWindow/index.tsx similarity index 70% rename from js/components/MainWindow/index.js rename to js/components/MainWindow/index.tsx index 68aaa09c..6d68e72b 100644 --- a/js/components/MainWindow/index.js +++ b/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): void; + toggleMainWindowShadeMode(): void; +} + +interface OwnProps { + analyser: AnalyserNode; + filePickers: FilePicker[]; +} + +type Props = StateProps & DispatchProps & OwnProps; + +export class MainWindow extends React.Component { _handleClick = () => { this.props.setFocus(); }; - _handleDrop = e => { - this.props.loadFilesFromReferences(e); + _handleDrop = (e: React.DragEvent): void => { + this.props.loadFilesFromReferences(e.dataTransfer.files); }; render() { @@ -91,7 +121,10 @@ export class MainWindow extends React.Component { bottom handle={} > - + {mainShade && } @@ -107,7 +140,10 @@ export class MainWindow extends React.Component { />
- +
@@ -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) => + dispatch(scrollVolume(e)) + }; }; export default connect( mapStateToProps, diff --git a/js/components/PlaylistWindow/PlaylistShade.tsx b/js/components/PlaylistWindow/PlaylistShade.tsx index 8e6596bf..adc8b291 100644 --- a/js/components/PlaylistWindow/PlaylistShade.tsx +++ b/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 { } _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) }; }; diff --git a/js/components/PlaylistWindow/index.tsx b/js/components/PlaylistWindow/index.tsx index 7a8c4e35..a0beda33 100644 --- a/js/components/PlaylistWindow/index.tsx +++ b/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) }; }; diff --git a/js/types.ts b/js/types.ts index 51f81ff9..fdc0b5af 100644 --- a/js/types.ts +++ b/js/types.ts @@ -17,6 +17,12 @@ export { WindowPositions } from "./reducers/windows"; +export interface FilePicker { + contextMenuName: string; + filePicker: () => Promise; + requiresNetwork: boolean; +} + export type Skin = { url: string; name: string;