Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-22 17:47:16 +00:00
Code Issues Projects Releases Wiki Activity

Fix some playlist click bugs

Browse source
This commit is contained in:
Jordan Eldredge 2017-12-14 21:48:14 -08:00
parent 761d2c27b7
commit c42aea2318
2 changed files with 75 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

115
js/components/PlaylistWindow/TrackCell.js
View file

@ -1,43 +1,77 @@
import React from "react";
import { connect } from "react-redux";
import classnames from "classnames";
import { TRACK_HEIGHT } from "../../constants";
import {
CLICKED_TRACK,
CTRL_CLICKED_TRACK,
SHIFT_CLICKED_TRACK,
PLAY_TRACK
} from "../../actionTypes";
import { dragSelected } from "../../actionCreators";
import { getCurrentTrackId } from "../../selectors";
const TrackCell = props => {
const {
skinPlaylistStyle,
selected,
current,
clickTrack,
playTrack,
children,
onMouseDown
} = props;
const style = {
backgroundColor: selected ? skinPlaylistStyle.selectedbg : null,
color: current ? skinPlaylistStyle.current : null
};
return (
<div
className={classnames({ selected, current })}
style={style}
onMouseDown={e => {
onMouseDown(e);
clickTrack(e);
}}
onDoubleClick={playTrack}
onContextMenu={clickTrack}
>
{children}
</div>
);
};
class TrackCell extends React.Component {
constructor(props) {
super(props);
this._onMouseDown = this._onMouseDown.bind(this);
}
_onMouseDown(e) {
if (e.shiftKey) {
this.props.shiftClick(e);
return;
} else if (e.metaKey || e.ctrlKey) {
this.props.ctrlClick(e);
return;
}
if (!this.props.selected) {
this.props.click(e);
}
const mouseStart = e.clientY;
let lastDiff = 0;
const handleMouseMove = ee => {
const proposedDiff = Math.floor((ee.clientY - mouseStart) / TRACK_HEIGHT);
if (proposedDiff !== lastDiff) {
const diffDiff = proposedDiff - lastDiff;
this.props.dragSelected(diffDiff);
lastDiff = proposedDiff;
}
};
window.addEventListener("mouseup", () => {
window.removeEventListener("mousemove", handleMouseMove);
});
window.addEventListener("mousemove", handleMouseMove);
}
render() {
const {
skinPlaylistStyle,
selected,
current,
children,
onDoubleClick
} = this.props;
const style = {
backgroundColor: selected ? skinPlaylistStyle.selectedbg : null,
color: current ? skinPlaylistStyle.current : null
};
return (
<div
className={classnames({ selected, current })}
style={style}
onMouseDown={this._onMouseDown}
onContextMenu={e => e.preventDefault()}
onDoubleClick={onDoubleClick}
>
{children}
</div>
);
}
}
const mapStateToProps = (state, ownProps) => {
const { display: { skinPlaylistStyle }, playlist: { tracks } } = state;
@ -47,20 +81,17 @@ const mapStateToProps = (state, ownProps) => {
};
const mapDispatchToProps = (dispatch, ownProps) => ({
clickTrack: e => {
if (e.shiftKey) {
e.preventDefault();
return dispatch({ type: SHIFT_CLICKED_TRACK, index: ownProps.index });
} else if (e.metaKey) {
e.preventDefault();
return dispatch({ type: CTRL_CLICKED_TRACK, index: ownProps.index });
} else if (e.ctrlKey) {
e.preventDefault();
return dispatch({ type: CTRL_CLICKED_TRACK, index: ownProps.index });
}
return dispatch({ type: CLICKED_TRACK, index: ownProps.index });
shiftClick: e => {
e.preventDefault();
return dispatch({ type: SHIFT_CLICKED_TRACK, index: ownProps.index });
},
playTrack: () => dispatch({ type: PLAY_TRACK, id: ownProps.id })
ctrlClick: e => {
e.preventDefault();
return dispatch({ type: CTRL_CLICKED_TRACK, index: ownProps.index });
},
click: () => dispatch({ type: CLICKED_TRACK, index: ownProps.index }),
dragSelected: offset => dispatch(dragSelected(offset)),
onDoubleClick: () => dispatch({ type: PLAY_TRACK, id: ownProps.id })
});
export default connect(mapStateToProps, mapDispatchToProps)(TrackCell);

29
js/components/PlaylistWindow/TrackList.js
View file

@ -2,8 +2,6 @@ import React from "react";
import { connect } from "react-redux";
import { getTimeStr } from "../../utils";
import { TRACK_HEIGHT } from "../../constants";
import { dragSelected } from "../../actionCreators";
import { getVisibleTrackIds, getScrollOffset } from "../../selectors";
import TrackCell from "./TrackCell";
import TrackTitle from "./TrackTitle";
@ -11,30 +9,11 @@ import TrackTitle from "./TrackTitle";
class TrackList extends React.Component {
constructor(props) {
super(props);
this._handleClick = this._handleClick.bind(this);
}
_handleClick(e) {
const mouseStart = e.clientY;
let lastDiff = 0;
const handleMouseMove = ee => {
const proposedDiff = Math.floor((ee.clientY - mouseStart) / TRACK_HEIGHT);
if (proposedDiff !== lastDiff) {
const diffDiff = proposedDiff - lastDiff;
this.props.dragSelected(diffDiff);
lastDiff = proposedDiff;
}
};
window.addEventListener("mouseup", () => {
window.removeEventListener("mousemove", handleMouseMove);
});
window.addEventListener("mousemove", handleMouseMove);
}
_renderTracks(format) {
return this.props.trackIds.map((id, i) => (
<TrackCell key={id} id={id} index={i} onMouseDown={this._handleClick}>
<TrackCell key={id} id={id} index={i}>
{format(id, i)}
</TrackCell>
));
@ -58,14 +37,10 @@ class TrackList extends React.Component {
}
}
const mapDispatchToProps = {
dragSelected
};
const mapStateToProps = state => ({
offset: getScrollOffset(state),
trackIds: getVisibleTrackIds(state),
tracks: state.playlist.tracks
});
export default connect(mapStateToProps, mapDispatchToProps)(TrackList);
export default connect(mapStateToProps)(TrackList);