diff --git a/js/actionCreators.js b/js/actionCreators.js
index 96c7e53b..a50f263c 100644
--- a/js/actionCreators.js
+++ b/js/actionCreators.js
@@ -35,7 +35,8 @@ import {
RANDOMIZE_LIST,
SET_TRACK_ORDER,
TOGGLE_VISUALIZER_STYLE,
- PLAY_TRACK
+ PLAY_TRACK,
+ SET_PLAYLIST_SCROLL_POSITION
} from "./actionTypes";
function playRandomTrack() {
@@ -310,3 +311,7 @@ export function sortListByTitle() {
export function toggleVisualizerStyle() {
return { type: TOGGLE_VISUALIZER_STYLE };
}
+
+export function setPlaylistScrollPosition(position) {
+ return { type: SET_PLAYLIST_SCROLL_POSITION, position };
+}
diff --git a/js/components/PlaylistWindow/ScrollBar.js b/js/components/PlaylistWindow/ScrollBar.js
new file mode 100644
index 00000000..0de43480
--- /dev/null
+++ b/js/components/PlaylistWindow/ScrollBar.js
@@ -0,0 +1,42 @@
+import React from "react";
+import { connect } from "react-redux";
+import Slider from "rc-slider/lib/Slider";
+
+import { setPlaylistScrollPosition } from "../../actionCreators";
+import { getVisibleTrackIds } from "../../selectors";
+
+const Handle = () =>
;
+
+const PlaylistWindow = props => (
+
+);
+
+const mapDispatchToProps = {
+ setPlaylistScrollPosition: position =>
+ setPlaylistScrollPosition(100 - position)
+};
+
+const mapStateToProps = state => {
+ const {
+ display: { playlistScrollPosition },
+ playlist: { trackOrder }
+ } = state;
+
+ return {
+ playlistScrollPosition,
+ allTracksAreVisible: getVisibleTrackIds(state).length === trackOrder.length
+ };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(PlaylistWindow);
diff --git a/js/components/PlaylistWindow/index.js b/js/components/PlaylistWindow/index.js
index 11ba6b85..928ca697 100644
--- a/js/components/PlaylistWindow/index.js
+++ b/js/components/PlaylistWindow/index.js
@@ -1,7 +1,6 @@
import React from "react";
import { connect } from "react-redux";
import classnames from "classnames";
-import Slider from "rc-slider/lib/Slider";
import DropTarget from "../DropTarget";
import MiniTime from "../MiniTime";
@@ -14,6 +13,7 @@ import ListMenu from "./ListMenu";
import ResizeTarget from "./ResizeTarget";
import RunningTimeDisplay from "./RunningTimeDisplay";
import TrackList from "./TrackList";
+import ScrollBar from "./ScrollBar";
import {
WINDOWS,
PLAYLIST_RESIZE_SEGMENT_WIDTH,
@@ -23,10 +23,8 @@ import {
import {
TOGGLE_PLAYLIST_WINDOW,
TOGGLE_PLAYLIST_SHADE_MODE,
- SET_FOCUSED_WINDOW,
- SET_PLAYLIST_SCROLL_POSITION
+ SET_FOCUSED_WINDOW
} from "../../actionTypes";
-import { getVisibleTrackIds } from "../../selectors";
import {
play,
pause,
@@ -39,20 +37,15 @@ import "../../../css/playlist-window.css";
const MIN_WINDOW_HEIGHT = 116;
-const Handle = () => ;
-
const PlaylistWindow = props => {
const {
skinPlaylistStyle,
focusPlaylist,
focused,
- playlistScrollPosition,
- setPlaylistScrollPosition,
playlistSize,
playlistShade,
close,
- toggleShade,
- allTracksAreVisible
+ toggleShade
} = props;
if (playlistShade) {
return ;
@@ -94,18 +87,7 @@ const PlaylistWindow = props => {
-
+
@@ -152,9 +134,6 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
pause: () => dispatch(pause()),
stop: () => dispatch(stop()),
openFileDialog: () => dispatch(openFileDialog(ownProps.fileInput)),
- setPlaylistScrollPosition: position =>
- // TODO: Move this to an action creator so we can see if this is actually changing
- dispatch({ type: SET_PLAYLIST_SCROLL_POSITION, position: 100 - position }),
close: () => dispatch({ type: TOGGLE_PLAYLIST_WINDOW }),
toggleShade: () => dispatch({ type: TOGGLE_PLAYLIST_SHADE_MODE }),
toggleVisualizerStyle: () => dispatch(toggleVisualizerStyle())
@@ -163,24 +142,16 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
const mapStateToProps = state => {
const {
windows: { focused },
- display: {
- skinPlaylistStyle,
- playlistScrollPosition,
- playlistSize,
- playlistShade
- },
- media: { duration },
- playlist: { trackOrder }
+ display: { skinPlaylistStyle, playlistSize, playlistShade },
+ media: { duration }
} = state;
return {
focused,
skinPlaylistStyle,
- playlistScrollPosition,
playlistSize,
playlistShade,
- duration,
- allTracksAreVisible: getVisibleTrackIds(state).length === trackOrder.length
+ duration
};
};