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

Add track moving to the list level

Browse source 
This way we can start to respond to the difference between being in the list and outside.
This commit is contained in:
Jordan Eldredge 2017-12-24 21:56:17 -08:00
parent 57955f2cfe
commit 9c993a2646
2 changed files with 42 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,14 +1,12 @@
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";
class TrackCell extends React.Component {
@ -30,21 +28,7 @@ class TrackCell extends React.Component {
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);
this.props.handleMoveClick(e);
}
render() {
@ -91,7 +75,6 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
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 })
});

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

@ -3,27 +3,65 @@ import { connect } from "react-redux";
import { getTimeStr } from "../../utils";
import { getVisibleTrackIds, getScrollOffset } from "../../selectors";
import { TRACK_HEIGHT } from "../../constants";
import { SELECT_ZERO } from "../../actionTypes";
import { dragSelected } from "../../actionCreators";
import TrackCell from "./TrackCell";
import TrackTitle from "./TrackTitle";
class TrackList extends React.Component {
constructor(props) {
super(props);
this._handleMoveClick = this._handleMoveClick.bind(this);
}
_renderTracks(format) {
return this.props.trackIds.map((id, i) => (
<TrackCell key={id} id={id} index={i}>
<TrackCell
key={id}
id={id}
index={i}
handleMoveClick={this._handleMoveClick}
>
{format(id, i)}
</TrackCell>
));
}
_handleMoveClick(e) {
if (!this._node) {
return;
}
const { top, bottom, left, right } = this._node.getBoundingClientRect();
const mouseStart = e.clientY;
let lastDiff = 0;
const handleMouseMove = ee => {
const { clientY: y, clientX: x } = ee;
if (y < top || y > bottom || x < left || x > right) {
// Mouse is outside the track list
return;
}
const proposedDiff = Math.floor((y - 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 { tracks, offset } = this.props;
return (
<div
ref={node => {
this._node = node;
}}
className="playlist-tracks"
style={{ height: "100%" }}
onClick={this.props.selectZero}
@ -43,7 +81,8 @@ class TrackList extends React.Component {
}
const mapDispatchToProps = {
selectZero: () => ({ type: SELECT_ZERO })
selectZero: () => ({ type: SELECT_ZERO }),
dragSelected
};
const mapStateToProps = state => ({