-
+
+ {overlay && }
+
+
+
@@ -165,34 +148,4 @@ function Milkdrop(props: Props) {
);
}
-
-const mapStateToProps = (state: AppState): StateProps => ({
- desktop: Selectors.getMilkdropDesktopEnabled(state),
- fullscreen: Selectors.getMilkdropFullscreenEnabled(state),
- overlay: Selectors.getPresetOverlayOpen(state),
- presetsAreCycling: Selectors.getPresetsAreCycling(state),
- currentPresetIndex: Selectors.getCurrentPresetIndex(state),
- trackTitle: Selectors.getCurrentTrackDisplayName(state),
- mediaIsPlaying: Selectors.getMediaIsPlaying(state),
-});
-
-const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
- closeWindow: () => dispatch(Actions.closeWindow(WINDOWS.MILKDROP)),
- toggleDesktop: () => dispatch(Actions.toggleMilkdropDesktop()),
- toggleFullscreen: () => dispatch(Actions.toggleMilkdropFullscreen()),
- setFullscreen: (fullscreen: boolean) =>
- dispatch(Actions.setMilkdropFullscreen(fullscreen)),
- togglePresetOverlay: () => dispatch(Actions.togglePresetOverlay()),
- selectRandomPreset: () => dispatch(Actions.selectRandomPreset()),
- toggleRandomize: () => dispatch(Actions.toggleRandomizePresets()),
- toggleCycling: () => dispatch(Actions.togglePresetCycling()),
- handlePresetDrop: e => dispatch(Actions.handlePresetDrop(e)),
- selectNextPreset: (transitionType?: TransitionType) =>
- dispatch(Actions.selectNextPreset(transitionType)),
- selectPreviousPreset: (transitionType?: TransitionType) =>
- dispatch(Actions.selectPreviousPreset(transitionType)),
- scheduleMilkdropMessage: (message: string) =>
- dispatch(Actions.scheduleMilkdropMessage(message)),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Milkdrop);
+export default Milkdrop;
diff --git a/js/components/MiniTime.tsx b/js/components/MiniTime.tsx
index 6c966d25..dc299eaf 100644
--- a/js/components/MiniTime.tsx
+++ b/js/components/MiniTime.tsx
@@ -1,14 +1,13 @@
-import { AppState, Dispatch } from "../types";
import React from "react";
-import { connect } from "react-redux";
import classnames from "classnames";
import { getTimeObj } from "../utils";
-import { TOGGLE_TIME_MODE } from "../actionTypes";
import { TIME_MODE, MEDIA_STATUS } from "../constants";
+import * as Actions from "../actionCreators";
import Character from "./Character";
import * as Selectors from "../selectors";
import "../../css/mini-time.css";
+import { useTypedSelector, useActionCreator } from "../hooks";
// Sigh. When the display is blinking (say when it's paused) we need to
// alternate between the actual character and the space character. Not
@@ -27,39 +26,29 @@ const Background = () => (
);
-interface StateProps {
- status: string | null;
- timeMode: string;
- timeElapsed: number;
- length: number | null;
-}
+const MiniTime = () => {
+ const status = useTypedSelector(Selectors.getMediaStatus);
+ const duration = useTypedSelector(Selectors.getDuration);
+ const timeElapsed = useTypedSelector(Selectors.getTimeElapsed);
+ const timeMode = useTypedSelector(Selectors.getTimeMode);
-interface DispatchProps {
- toggle: () => void;
-}
-
-type Props = StateProps & DispatchProps;
-
-const MiniTime = (props: Props) => {
+ const toggle = useActionCreator(Actions.toggleTimeMode);
let seconds = null;
// TODO: Clean this up: If stopped, just render the background, rather than
// rendering spaces twice.
- if (props.status !== MEDIA_STATUS.STOPPED && props.length != null) {
+ if (status !== MEDIA_STATUS.STOPPED && duration != null) {
seconds =
- props.timeMode === TIME_MODE.ELAPSED
- ? props.timeElapsed
- : props.length - props.timeElapsed;
+ timeMode === TIME_MODE.ELAPSED ? timeElapsed : duration - timeElapsed;
}
const timeObj = getTimeObj(seconds);
const showMinus =
- props.timeMode === TIME_MODE.REMAINING &&
- props.status !== MEDIA_STATUS.STOPPED;
+ timeMode === TIME_MODE.REMAINING && status !== MEDIA_STATUS.STOPPED;
return (
@@ -72,18 +61,4 @@ const MiniTime = (props: Props) => {
);
};
-const mapStateToProps = (state: AppState): StateProps => ({
- status: state.media.status,
- timeMode: state.media.timeMode,
- timeElapsed: Selectors.getTimeElapsed(state),
- length: Selectors.getDuration(state),
-});
-
-const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
- // TODO: move to actionCreators
- toggle: () => {
- dispatch({ type: TOGGLE_TIME_MODE });
- },
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(MiniTime);
+export default MiniTime;
diff --git a/js/components/OptionsContextMenu.tsx b/js/components/OptionsContextMenu.tsx
index 031682c6..bfc1f8bd 100644
--- a/js/components/OptionsContextMenu.tsx
+++ b/js/components/OptionsContextMenu.tsx
@@ -1,82 +1,56 @@
import React from "react";
-import { connect } from "react-redux";
import { Hr, Node } from "./ContextMenu";
import SkinsContextMenu from "./SkinsContextMenu";
-import { Dispatch, TimeMode, AppState } from "../types";
import * as Actions from "../actionCreators";
+import * as Selectors from "../selectors";
import { TIME_MODE } from "../constants";
+import { useActionCreator, useTypedSelector } from "../hooks";
-interface StateProps {
- timeMode: TimeMode;
- doubled: boolean;
- repeat: boolean;
- shuffle: boolean;
-}
+const OptionsContextMenu = () => {
+ const toggleTimeMode = useActionCreator(Actions.toggleTimeMode);
+ const toggleDoubleSizeMode = useActionCreator(Actions.toggleDoubleSizeMode);
+ const toggleRepeat = useActionCreator(Actions.toggleRepeat);
+ const toggleShuffle = useActionCreator(Actions.toggleShuffle);
-interface DispatchProps {
- toggleTimeMode(): void;
- toggleDoubleSizeMode(): void;
- toggleRepeat(): void;
- toggleShuffle(): void;
-}
-
-const OptionsContextMenu = (props: DispatchProps & StateProps) => (
-
- {/* */}
-
-
-
-
- {/* */}
-
- {/* */}
-
-
-
-
-);
-
-const mapStateToProps = (state: AppState): StateProps => {
- return {
- doubled: state.display.doubled,
- timeMode: state.media.timeMode,
- repeat: state.media.repeat,
- shuffle: state.media.shuffle,
- };
+ const doubled = useTypedSelector(Selectors.getDoubled);
+ const timeMode = useTypedSelector(Selectors.getTimeMode);
+ const repeat = useTypedSelector(Selectors.getRepeat);
+ const shuffle = useTypedSelector(Selectors.getShuffle);
+ return (
+ <>
+ {/* */}
+
+
+
+
+ {/* */}
+
+ {/* */}
+
+
+
+
+ );
};
-const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => {
- return {
- toggleTimeMode: () => dispatch(Actions.toggleTimeMode()),
- toggleDoubleSizeMode: () => dispatch(Actions.toggleDoubleSizeMode()),
- toggleRepeat: () => dispatch(Actions.toggleRepeat()),
- toggleShuffle: () => dispatch(Actions.toggleShuffle()),
- };
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(OptionsContextMenu);
+export default OptionsContextMenu;
diff --git a/js/components/PlaybackContextMenu.tsx b/js/components/PlaybackContextMenu.tsx
index 3a3738b8..3b9d2b24 100644
--- a/js/components/PlaybackContextMenu.tsx
+++ b/js/components/PlaybackContextMenu.tsx
@@ -1,74 +1,51 @@
import React from "react";
-import { connect } from "react-redux";
import * as Actions from "../actionCreators";
import { Hr, Node } from "./ContextMenu";
-import { Dispatch } from "../types";
+import { useActionCreator } from "../hooks";
-interface Props {
- previous(): void;
- play(): void;
- pause(): void;
- stop(): void;
- next(): void;
- seekBackward(steps: number): void;
- seekForward(steps: number): void;
- nextN(steps: number): void;
-}
-
-const PlaybackContextMenu = (props: Props) => (
-
-
-
-
-
-
-
- {/*
+const PlaybackContextMenu = () => {
+ const previous = useActionCreator(Actions.previous);
+ const play = useActionCreator(Actions.play);
+ const pause = useActionCreator(Actions.pause);
+ const stop = useActionCreator(Actions.stop);
+ const next = useActionCreator(Actions.next);
+ const seekForward = useActionCreator(Actions.seekForward);
+ const seekBackward = useActionCreator(Actions.seekBackward);
+ const nextN = useActionCreator(Actions.nextN);
+ return (
+
+
+
+
+
+
+
+ {/*
*/}
- props.seekBackward(5)}
- />
- props.seekForward(5)}
- />
- {/*
+ seekBackward(5)}
+ />
+ seekForward(5)}
+ />
+ {/*
*/}
- props.nextN(-10)}
- />
- props.nextN(10)}
- />
- {/*
+ nextN(-10)} />
+ nextN(10)} />
+ {/*
*/}
-
-);
-
-const mapDispatchToProps = (dispatch: Dispatch): Props => {
- return {
- previous: () => dispatch(Actions.previous()),
- play: () => dispatch(Actions.play()),
- pause: () => dispatch(Actions.pause()),
- stop: () => dispatch(Actions.stop()),
- next: () => dispatch(Actions.next()),
- seekForward: steps => dispatch(Actions.seekForward(steps)),
- seekBackward: steps => dispatch(Actions.seekBackward(steps)),
- nextN: steps => dispatch(Actions.nextN(steps)),
- };
+
+ );
};
-export default connect(null, mapDispatchToProps)(PlaybackContextMenu);
+export default PlaybackContextMenu;
diff --git a/js/components/PlaylistWindow/AddMenu.tsx b/js/components/PlaylistWindow/AddMenu.tsx
index da590de0..e510c3ea 100644
--- a/js/components/PlaylistWindow/AddMenu.tsx
+++ b/js/components/PlaylistWindow/AddMenu.tsx
@@ -1,66 +1,24 @@
import React from "react";
-import { connect } from "react-redux";
-import { LOAD_STYLE } from "../../constants";
-import { getTrackCount } from "../../selectors";
-import { addTracksFromReferences } from "../../actionCreators";
-import { promptForFileReferences } from "../../fileUtils";
+import * as Selectors from "../../selectors";
+import * as Actions from "../../actionCreators";
import PlaylistMenu from "./PlaylistMenu";
-import { AppState, Dispatch } from "../../types";
-interface StateProps {
- nextIndex: number;
-}
+import { useTypedSelector, useActionCreator } from "../../hooks";
-interface DispatchProps {
- addFilesAtIndex(i: number): void;
- addDirAtIndex(i: number): void;
-}
-const el = document.createElement("input");
-el.type = "file";
-// @ts-ingore
-const DIR_SUPPORT =
- // @ts-ignore
- typeof el.webkitdirectory !== "undefined" ||
- // @ts-ignore
- typeof el.mozdirectory !== "undefined" ||
- // @ts-ignore
- typeof el.directory !== "undefined";
+const AddMenu = () => {
+ const nextIndex = useTypedSelector(Selectors.getTrackCount);
+ const addDirAtIndex = useActionCreator(Actions.addDirAtIndex);
+ const addFilesAtIndex = useActionCreator(Actions.addFilesAtIndex);
+ return (
+