Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Re-work how play queue works #104

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Re-work how play queue works #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
968a764
Re work how play queue works
jamesfiltness Sep 3, 2017
9a6c331
Use middleware to control play queue
jamesfiltness Sep 6, 2017
bcef19b
Play next track when current one finishes
jamesfiltness Sep 28, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 26 additions & 119 deletions app/actions/play-queue/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as types from '../../constants/ActionTypes.js';
import { playTrack } from '../player';
import { fetchVideoDataAndPlay, reinitialisePlayer } from '../player';
import { showModal } from '../modal';
import { authenticate } from '../auth';
import prepareTrackData from '../../utils/prepare-track-data';
Expand Down Expand Up @@ -46,45 +46,6 @@ export function trashPlayQueue() {
}
}

export function setCurrentIndex(index) {
return {
type: types.SET_CURRENT_INDEX,
index,
}
}

export function trackSelected(selectedTrackSummaryData) {
return {
type: types.TRACK_SELECTED,
selectedTrackSummaryData,
}
}

export function restartTrack() {
return {
type: types.RESTART_TRACK,
}
}

export function playQueueTrackSelected(selectedTrackData, index) {
return (dispatch, getState) => {
if (getState().playQueue.playQueueCurrentIndex === index) {
dispatch(restartTrack());
} else {
dispatch(setCurrentIndex(index));
const currentTrack = getState().playQueue.playQueueTracks[index];

dispatch(trackSelected(currentTrack));
dispatch(
playTrack(
selectedTrackData.name,
selectedTrackData.artist,
)
);
}
}
}

export function appendTrackToPlayQueue(track, img) {
const trackObj = prepareTrackData([track], img);
return {
Expand All @@ -93,21 +54,6 @@ export function appendTrackToPlayQueue(track, img) {
}
}

export function addTrackToQueueAndPlay(track, img) {
return (dispatch, getState) => {
const trackObj = prepareTrackData([track], img);

appendTrackToQueue(track, img, dispatch).then(() => {
dispatch(
setCurrentIndex(
getState().playQueue.playQueueTracks.length - 1
)
)
dispatch(playCurrentIndex());
})
}
}

export function savePlayList() {
return (dispatch, getState) => {
if (getState().playQueue.playQueueTracks.length) {
Expand All @@ -124,65 +70,6 @@ export function createPlaylist() {
dispatch(showModal('createPlaylist'))
}
}
export function playRandomIndex() {
return(dispatch, getState) => {
const playQueueLength = getState().playQueue.playQueueTracks.length;
const randomTrackIndex = randomIndex(playQueueLength);
dispatch(setCurrentIndex(randomTrackIndex));
}
}

export function incrementCurrentIndex() {
return (dispatch, getState) => {
const playQueue = getState().playQueue;
if (playQueue.shuffle) {
dispatch(playRandomIndex());
}

else if (
playQueue.playQueueTracks.length -1 === playQueue.playQueueCurrentIndex
) {
if (playQueue.repeat) {
// if repeat is enabled and we're on the last track
// play the play queue from the beginning again
dispatch(setCurrentIndex(0));
} else {
return;
}
} else {
dispatch({
type: types.INCREMENT_CURRENT_INDEX,
});
}
}
}

export function decrementCurrentIndex() {
return (dispatch, getState) => {
if (getState().playQueue.shuffle) {
dispatch(playRandomIndex());
} else {
dispatch({
type: types.DECREMENT_CURRENT_INDEX,
});
}
}
}

export function playCurrentIndex() {
return (dispatch, getState) => {
const currentIndex = getState().playQueue.playQueueCurrentIndex;
const currentTrack = getState().playQueue.playQueueTracks[currentIndex];
dispatch(trackSelected(currentTrack));

dispatch(
playTrack(
currentTrack.name,
currentTrack.artist
)
);
}
}

export function shuffle() {
return (dispatch, getState) => {
Expand All @@ -206,19 +93,39 @@ export function replaceQueueWithTracks(tracks, img) {
}
}

export function appendTracksToPlayQueue(tracks, img) {
const trackData = prepareTrackData(tracks, img);
return {
type: types.ADD_TRACKS_TO_PLAY_QUEUE,
trackData,
}
}

export function replaceQueueWithTracksAndPlay(tracks, img) {
console.log(tracks);
return (dispatch, getState) => {
dispatch(replaceQueueWithTracks(tracks, img));
dispatch(resetPlayQueueIndex());
dispatch(playCurrentIndex());
dispatch(playNextTrack());
}
}

export function appendTracksToPlayQueue(tracks, img) {
const trackData = prepareTrackData(tracks, img);
export function playTrack(index) {
return (dispatch, getState) => {
const currentTrackData = getState().playQueue.playQueueTracks[index];
dispatch(
fetchVideoDataAndPlay(
currentTrackData.name,
currentTrackData.artist,
)
);
}
}


export function playNextTrack() {
return {
type: types.ADD_TRACKS_TO_PLAY_QUEUE,
trackData,
type: types.PLAY_NEXT_TRACK,
}
}

33 changes: 22 additions & 11 deletions app/actions/player/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import * as types from '../../constants/ActionTypes.js';
import {
incrementCurrentIndex,
decrementCurrentIndex,
playCurrentIndex
playNextTrack,
} from '../play-queue';

export function playVideo(videoData) {
Expand All @@ -14,22 +12,17 @@ export function playVideo(videoData) {

export function trackEnded() {
return (dispatch, getState) => {
dispatch(incrementCurrentIndex());
dispatch(playCurrentIndex());
}
}

export function playNextTrack() {
export function playNext() {
return (dispatch, getState) => {
dispatch(incrementCurrentIndex());
dispatch(playCurrentIndex());
dispatch(playNextTrack());
}
}

export function playPreviousTrack() {
return (dispatch, getState) => {
dispatch(decrementCurrentIndex());
dispatch(playCurrentIndex());
}
}

Expand Down Expand Up @@ -69,10 +62,28 @@ export function fetchVideoData(selectedTrackString) {
}
}

export function playTrack(trackName, artist) {
export function fetchVideoDataAndPlay(trackName, artist) {
return (dispatch, getState) => {
dispatch(fetchVideoData(`${trackName} - ${artist}`)).then(() => {
dispatch(playVideo(getState().videoData));
});
}
}

export function destroyPlayer() {
return {
type: types.DESTROY_PLAYER,
}
}

export function playerReinitialised() {
return {
type: types.PLAYER_REINITIALISED,
}
}

export function reinitialisePlayer() {
return(dispatch) => {
dispatch(destroyPlayer());
}
}
31 changes: 15 additions & 16 deletions app/components/play-queue/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React, { PropTypes } from 'react';
import classNames from 'classNames';
import { connect } from 'react-redux';
import {
playQueueTrackSelected,
removeTrackFromQueue
import {
playQueueTrackSelected,
removeTrackFromQueue ,
} from '../../actions/play-queue';

export class PlayQueue extends React.Component {
Expand All @@ -12,13 +12,14 @@ export class PlayQueue extends React.Component {
removeTrackFromQueue: PropTypes.func.isRequired,
playQueueCurrentIndex: PropTypes.number,
playQueueTracks: PropTypes.bool.array,
currentIndex: PropTypes.number.isRequired,
}

constructor() {
super();

this.currentScrollTop = 0;

this.state = {
renderPlayQueue: false,
};
Expand All @@ -32,7 +33,7 @@ export class PlayQueue extends React.Component {
this.shouldRenderPlayQueue(nextProps);

if (
this.props.playQueueCurrentIndex !==
this.props.playQueueCurrentIndex !==
nextProps.playQueueCurrentIndex
) {
this.scrollToCurrentIndex(nextProps);
Expand All @@ -47,9 +48,9 @@ export class PlayQueue extends React.Component {
const trackElHeight = trackEl.getBoundingClientRect().height;
const trackPos = track * trackElHeight;
const trackPosBottomEdge = trackPos + trackElHeight;
const playQueueHeight = this.playQueueWrap.getBoundingClientRect().height;
const playQueueHeight = this.playQueueWrap.getBoundingClientRect().height;
const scrollTopPos = this.playQueueWrap.scrollTop;

if (trackPosBottomEdge > (playQueueHeight + scrollTopPos)) {
move = trackPosBottomEdge - (playQueueHeight + scrollTopPos);
this.playQueueWrap.scrollTop = scrollTopPos + move;
Expand All @@ -61,7 +62,7 @@ export class PlayQueue extends React.Component {

shouldRenderPlayQueue(props) {
let renderPlayQueue;

if (props.tracks && props.tracks.length) {
renderPlayQueue = true;
} else {
Expand All @@ -80,21 +81,17 @@ export class PlayQueue extends React.Component {

render() {
if (this.state.renderPlayQueue) {
const currentIndex =
this.props.playQueueCurrentIndex ?
this.props.playQueueCurrentIndex : 0;
return (
<div
<div
className="play-queue"
ref={(playQueueWrap) => this.playQueueWrap = playQueueWrap }
>
<ul className="play-queue__list">
{
this.props.tracks.map((track, i) => {
const selected = currentIndex === i ?
'play-queue__list-item--selected' :
const selected = this.props.currentIndex === i ?
'play-queue__list-item--selected' :
null;

const classes = classNames(
'play-queue__list-item',
selected,
Expand All @@ -111,7 +108,7 @@ export class PlayQueue extends React.Component {
<span className="play-queue__track">
{track.name}
</span>
<span
<span
onClick={
(event) => {
this.onRemoveTrackFromQueue(event, i)
Expand All @@ -138,6 +135,8 @@ function mapStateToProps(state) {
return {
playQueueCurrentIndex: state.playQueue.playQueueCurrentIndex,
playQueueTracks: state.playQueue.playQueueTracks,
currentIndex: state.playQueue.currentIndex,
destroyPlayer: state.playQueue.destroyPlayer,
}
}

Expand Down
Loading