Skip to content
Permalink
Browse files

Refactored and modified code to remove the state from the Player. Use…

…s a more proper implementation of Flux now, as well as I understand it.
  • Loading branch information...
pseudoramble committed Sep 6, 2015
1 parent 67a8229 commit 4ee25c46d48f6ad8b102a0280e0c1c218887198e
@@ -24,10 +24,12 @@ export default class App extends Component {

componentDidMount() {
ShowStore.addChangeListener(this.recalculateState);
ShowStore.addPlaylistConfiguredListener(this.onPlaylistConfigured);
}

componentWillUnmount() {
ShowStore.removeChangeListener(this.recalculateState);
ShowStore.removePlaylistConfiguredListener(this.onPlaylistConfigured);
}

recalculateState = (params) => {
@@ -38,24 +40,12 @@ export default class App extends Component {
year : year,
shows : ShowStore.getShows(year),
setlist : params.setlist || ShowStore.getSetlist(show),
track : params.track
});
}

onYearSelected(year) {
AppActions.yearSelected(year.key);
}

onShowSelected(show) {
AppActions.showSelected(show.key);
}

onTrackSelected(track) {
this.recalculateState({
track : {
index : track.props.index
},
setlist : this.state.setlist
onPlaylistConfigured = (params) => {
this.setState({
track : params.startTrack
});
}

@@ -90,7 +80,7 @@ export default class App extends Component {
setlistEntries(setlist) {
return setlist.map((track, i) => {
return (
<div key={track.url} index={i}>
<div key={track.id} index={i}>
<span>{track.title}</span>
</div>
);
@@ -101,16 +91,16 @@ export default class App extends Component {
const years = this.yearEntries(this.yearRange("2001", "2015")),
shows = this.showEntries(this.state.shows),
setlist = this.setlistEntries(this.state.setlist),
startTrack = this.state.track ? this.state.track.index : null;
startTrack = this.state.track;

return (
<div className={styles.app}>
<div className={styles.listings}>
<Listing entries={years} onEntryClicked={this.onYearSelected}></Listing>
<Listing entries={shows} onEntryClicked={this.onShowSelected}></Listing>
<Listing entries={setlist} onEntryClicked={this.onTrackSelected.bind(this)}></Listing>
<Listing id="years-listing" title="Years" entries={years}></Listing>
<Listing id="shows-listing" entries={shows}></Listing>
<Listing id="setlist-listing" entries={setlist}></Listing>
</div>
<Player tracklist={this.state.setlist} startTrack={startTrack}></Player>
<Player startTrack={startTrack}></Player>
</div>
);
}
@@ -10,7 +10,8 @@
display: flex;
-webkit-flex-flow: row;
flex-flow: row;


min-height: 20%;
max-height: 900px;
}

@@ -1,18 +1,23 @@
import styles from './_Listing.scss';
import ListingActions from '../../actions/ListingActions';

import React from 'react';

export default class Listing extends React.Component {
onClick(entry) {
ListingActions.listingSelected(this.props.id, entry.key);
}

render() {
let entries = this.props.entries || [];

const entries = this.props.entries || [];
return (
<div className={styles.listing}>
<span className={styles.title}>{this.props.title}</span>
{
entries.map((entry) => {
return (<button key={entry.key} onClick={this.props.onEntryClicked.bind(this, entry)}>{entry}</button>)
return (<button key={entry.key} onClick={this.onClick.bind(this, entry)}>{entry}</button>)
})
}
}
</div>
);
}
@@ -1,7 +1,6 @@
@import "toolkit";

.listing {
padding: 10px;
margin: 10px;
background: #dcddd8;
border: 2px solid green;
@@ -20,6 +19,10 @@
margin: 0 auto;
}

.title {

}

@media all and (max-width: 768px) {
.listing {
-webkit-order: 1;
@@ -1,44 +1,24 @@
import styles from './_Player.scss';
import PlayerActions from '../../actions/PlayerActions';

import React from 'react';

export default class Player extends React.Component {
componentWillMount() {
this.setState({});
}

componentWillReceiveProps(nextProps) {
const nextTrackIndex = nextProps && nextProps.startTrack ? nextProps.startTrack : undefined;

this.setState({
index : nextTrackIndex
});
}

shouldComponentUpdate(nextProps) {
return !!nextProps.startTrack && this.props.track !== nextProps.startTrack;
}

setNextTrack() {
const audioNode = React.findDOMNode(this.refs.audioTag);
const nextTrack = (this.state.index || this.props.startTrack) + 1

if (nextTrack < this.props.tracklist.length) {
audioNode.src = this.props.tracklist[nextTrack].url;

this.setState({
index : nextTrack
});
}
return !this.props.startTrack || this.props.startTrack.id !== nextProps.startTrack.id;
}

componentDidMount() {
const audioNode = React.findDOMNode(this.refs.audioTag);
audioNode.addEventListener("ended", this.setNextTrack.bind(this));
audioNode.addEventListener("ended", this.onTrackEnded.bind(this));
}

onTrackEnded() {
PlayerActions.trackFinished(this.props.startTrack);
}

render() {
const startTrack = this.props.tracklist ? this.props.tracklist[this.props.startTrack || 0] : "";
const startTrack = this.props.startTrack;

return (
<div>
@@ -7,3 +7,8 @@ export const SHOW_ADDED = "SHOW_ADDED";

export const GET_SETLIST = "GET_SETLIST";
export const SETLIST_ADDED = "SETLIST_ADDED";

export const TRACK_CHANGE = "TRACK_CHANGE";
export const TRACK_FINISHED = "TRACK_FINISHED";

export const PLAYLIST_CONFIGURED = "PLAYLIST_CONFIGURED";
@@ -5,7 +5,10 @@ import {
GET_SHOW,
SHOW_ADDED,
GET_SETLIST,
SETLIST_ADDED
SETLIST_ADDED,
TRACK_CHANGE,
TRACK_FINISHED,
PLAYLIST_CONFIGURED
} from '../constants/AppConstants';

class ShowStore extends EventEmitter {
@@ -42,6 +45,30 @@ class ShowStore extends EventEmitter {
else
return [];
}

configureSetlist(id, trackIndex) {
const startTrackIndex = trackIndex || 0,
setlist = this.setlists[id];

if (setlist && setlist.length > 0 && startTrackIndex < setlist.length) {
this.emit(PLAYLIST_CONFIGURED, { startTrack : setlist[startTrackIndex] });
}
}

findTrackIndex(id, trackId) {
return this.setlists[id].reduce((prev, cur, i) => {
if (cur.id === trackId) return i;
else return prev;
}, 0);
}

addPlaylistConfiguredListener(callback) {
this.on(PLAYLIST_CONFIGURED, callback);
}

removePlaylistConfiguredListener(callback) {
this.removeListener(PLAYLIST_CONFIGURED, callback);
}

addChangeListener(callback) {
this.on(SHOW_ADDED, callback);
@@ -54,7 +81,8 @@ class ShowStore extends EventEmitter {
}
};

let store = new ShowStore();
let store = new ShowStore(),
activeSetlist;

AppDispatcher.register((action) => {
switch (action.actionType) {
@@ -63,6 +91,13 @@ AppDispatcher.register((action) => {
break;
case GET_SETLIST:
store.addSetlist(action.show, action.setlist);
activeSetlist = action.show;
break;
case TRACK_CHANGE:
store.configureSetlist(activeSetlist, store.findTrackIndex(activeSetlist, action.track));
break;
case TRACK_FINISHED:
store.configureSetlist(activeSetlist, store.findTrackIndex(activeSetlist, action.track) + 1);
break;
}
});

0 comments on commit 4ee25c4

Please sign in to comment.
You can’t perform that action at this time.