Skip to content

Commit

Permalink
Merge pull request nukeop#221 from trekiteasy/master
Browse files Browse the repository at this point in the history 
Creation of a TrackRow component
  • Loading branch information
@nukeop
nukeop authored Feb 1, 2019
2 parents 2da156d + 227662f commit c6c94a0
Show file tree
Hide file tree
Showing 15 changed files with 475 additions and 295 deletions.
80 changes: 25 additions & 55 deletions app/components/AlbumView/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import React from 'react';
import FontAwesome from 'react-fontawesome';
import { Dimmer, Loader, Image, Segment } from 'semantic-ui-react';
import { Dimmer, Loader } from 'semantic-ui-react';
import _ from 'lodash';

import ContextPopup from '../ContextPopup';
import TrackRow from '../TrackRow';
import * as Utils from '../../utils';

import styles from './styles.scss';
import artPlaceholder from '../../../resources/media/art_placeholder.png';
Expand Down Expand Up @@ -39,7 +41,7 @@ class AlbumView extends React.Component {
}

addAlbumToQueue (album) {
album.tracklist.map((track, i) => {
album.tracklist.map(track => {
this.props.addToQueue(this.props.musicSources, {
artist: album.artists[0].name,
name: track.title,
Expand Down Expand Up @@ -202,65 +204,33 @@ class AlbumView extends React.Component {
</tr>
</thead>
<tbody>
{album.tracklist.map((el, i) =>
this.renderContextPopup(album, el, i)
{album.tracklist.map((track, index) => {
track.artist = this.getArtistName(track, album);
track.name = track.title;
if (parseInt(track.duration) !== track.duration) {
track.duration = Utils.stringDurationToSeconds(track.duration);
}
_.set(track, 'image[0][#text]', _.get(album, 'images[0].uri'));

return (<TrackRow
key={'album-track-row-' + index}
track={track}
index={'album-track-' + index}
clearQueue={this.props.clearQueue}
addToQueue={this.props.addToQueue}
startPlayback={this.props.startPlayback}
selectSong={this.props.selectSong}
musicSources={this.props.musicSources}
displayTrackNumber
displayDuration
/>);
}
)}
</tbody>
</table>
);
}

renderContextPopup (album, el, i) {
return (
<ContextPopup
key={i}
trigger={
<tr>
<td className={styles.center}>{i + 1}</td>
<td className={styles.left}>{el.title}</td>
<td className={styles.center}>{el.duration}</td>
</tr>
}
artist={album.artists[0].name}
title={el.title}
thumb={album.images[0].uri}
>
{this.renderAddTrackToQueueButton(album, el)}
{this.renderPlayTrackButton(album, el)}
</ContextPopup>
);
}

renderPlayTrackButton (album, el) {
return (
<a
href='#'
onClick={() => {
this.props.clearQueue();
this.addToQueue(album, el);
this.props.selectSong(0);
this.props.startPlayback();
}}
aria-label='Play this track now'
className={styles.add_button}
>
<FontAwesome name='play' /> Play now
</a>
);
}

renderAddTrackToQueueButton (album, el) {
return (
<a
href='#'
onClick={() => this.addToQueue(album, el)}
className={styles.add_button}
aria-label='Add track to queue'
>
<FontAwesome name='plus' /> Add to queue
</a>
);
}
renderOptionsButtons (album) {
return (
<ContextPopup
Expand Down
127 changes: 47 additions & 80 deletions app/components/ArtistView/PopularTracks/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React from 'react';
import FontAwesome from 'react-fontawesome';
import numeral from 'numeral';
import TrackRow from '../../TrackRow';
import artPlaceholder from '../../../../resources/media/art_placeholder.png';
import ContextPopup from '../../ContextPopup';

import styles from './styles.scss';

Expand All @@ -15,107 +14,75 @@ class PopularTracks extends React.Component {
};
}

toggleExpand() {
toggleExpand () {
this.setState(prevState => {
return { expanded: !prevState.expanded };
});
}

addToQueue(artist, track) {
this.props.addToQueue(this.props.musicSources, {
artist: artist.name,
name: track.name,
thumbnail: track.image[0]['#text'] || artPlaceholder
});
}

renderPopup(key, artist, track, contents) {
return (
<ContextPopup
key={key}
trigger={
<div className={styles.track_row}>
<img src={track.image[0]['#text'] || artPlaceholder} />
<div className={styles.popular_track_name}>{track.name}</div>
<div className={styles.playcount}>
{numeral(track.playcount).format('0,0')} plays
</div>
</div>
}
artist={artist.name}
title={track.name}
thumb={track.image[0]['#text'] || artPlaceholder}
>
{contents}
</ContextPopup>
);
}

renderAddTrackToQueueButton(track, index, artist) {
return (
<a
key={'add-track-' + index}
href='#'
onClick={() => this.addToQueue(artist, track)}
className={styles.add_button}
aria-label='Add track to queue'
>
<FontAwesome name='plus' /> Add to queue
</a>
);
}

renderPlayTrackButton(track, index) {
let { artist, selectSong, startPlayback, clearQueue } = this.props;

renderAddAllButton (artist, tracks) {
return (
<a
key={'play-track-' + index}
key='add-all-tracks-to-queue'
href='#'
onClick={() => {
clearQueue();
this.addToQueue(artist, track);
selectSong(0);
startPlayback();
tracks.track
.slice(0, this.state.expanded ? 15 : 5)
.map(track => {
this.props.addToQueue(this.props.musicSources, {
artist: artist.name,
name: track.name,
thumbnail: track.image[0]['#text'] || artPlaceholder
});
});
}}
className={styles.add_button}
aria-label='Play this track now'
aria-label='Add all tracks to queue'
>
<FontAwesome name='play' /> Play now
<FontAwesome name='plus' /> Add all
</a>
);
}

render() {
render () {
let { artist, tracks } = this.props;

return (
<div className={styles.popular_tracks_container}>
<div className={styles.header}>Popular tracks:</div>
<a
key='add-all-tracks-to-queue'
href='#'
onClick={() => {
tracks.track
{this.renderAddAllButton(artist, tracks)}
<table>
<thead>
<tr>
<th>
<FontAwesome name='photo' />
</th>
<th>Title</th>
<th>Play Counts</th>
</tr>
</thead>
<tbody>
{tracks.track
.slice(0, this.state.expanded ? 15 : 5)
.map((track, index) => {
this.addToQueue(artist, track);
});
}}
className={styles.add_button}
aria-label='Add all tracks to queue'
>
<FontAwesome name='plus' /> Add all
</a>
{tracks.track
.slice(0, this.state.expanded ? 15 : 5)
.map((track, index) => {
let popupContents = [
this.renderAddTrackToQueueButton(track, index, artist),
this.renderPlayTrackButton(track, index)
];
return this.renderPopup(index, artist, track, popupContents);
})}
return (
<TrackRow
key={'popular-track-row-' + index}
track={track}
index={'popular-track-' + index}
artist={artist}
clearQueue={this.props.clearQueue}
addToQueue={this.props.addToQueue}
startPlayback={this.props.startPlayback}
selectSong={this.props.selectSong}
musicSources={this.props.musicSources}
displayCover
displayPlayCount
/>
);
})}
</tbody>
</table>
<div className='expand_button' onClick={this.toggleExpand.bind(this)}>
<FontAwesome
name={this.state.expanded ? 'angle-double-up' : 'angle-double-down'}
Expand Down
85 changes: 16 additions & 69 deletions app/components/Dashboard/ChartsTab/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
import React from 'react';
import { Tab } from 'semantic-ui-react';
import artPlaceholder from '../../../../resources/media/art_placeholder.png';
import numeral from 'numeral';
import TrackRow from '../../TrackRow';
import FontAwesome from 'react-fontawesome';
import ContextPopup from '../../ContextPopup';



import styles from './styles.scss';
Expand All @@ -14,69 +11,7 @@ class ChartsTab extends React.Component {
super(props);
}

renderTrackRow(track, i) {
return (
<tr key={'toptrack-' + i} className={styles.track}>
<td>
<img src={track.image[0]['#text'] || artPlaceholder} />
</td>
<td className={styles.popular_track_artist}>{track.artist.name}</td>
<td className={styles.popular_track_name}>{track.name}</td>
<td className={styles.playcount}>
{numeral(track.playcount).format('0,0')}
</td>
</tr>
);
}

renderContextPopup(track, i) {
let { addToQueue, musicSources } = this.props;
return (
<ContextPopup
key={'popup-' + i}
artist={track.artist.name}
title={track.name}
thumb={track.image[1]['#text']}
trigger={this.renderTrackRow(track, i)}
>
<a
href='#'
className='add_button'
onClick={() => {
addToQueue(musicSources, {
artist: track.artist.name,
name: track.name,
thumbnail: track.image[1]['#text']
});
}}
aria-label='Add track to queue'
>
<FontAwesome name='plus' /> Add to queue
</a>
<a
href='#'
className='add_button'
onClick={() => {
this.props.clearQueue();
addToQueue(musicSources, {
artist: track.artist.name,
name: track.name,
thumbnail: track.image[1]['#text']
});
this.props.selectSong(0);
this.props.startPlayback();
this.props.startPlayback();

}}
aria-label='Play Song Right Now'
>
<FontAwesome name='play' /> Play now
</a>
</ContextPopup>
);
}

render() {
render () {
return (
<Tab.Pane attached={false}>
<div className={styles.popular_tracks_container}>
Expand All @@ -94,8 +29,20 @@ class ChartsTab extends React.Component {
<tr></tr>
</thead>
<tbody>
{this.props.topTracks.map((track, i) => {
return this.renderContextPopup(track, i);
{this.props.topTracks.map((track, index) => {
return <TrackRow
key={'popular-track-row-' + index}
track={track}
index={'popular-track-' + index}
clearQueue={this.props.clearQueue}
addToQueue={this.props.addToQueue}
startPlayback={this.props.startPlayback}
selectSong={this.props.selectSong}
musicSources={this.props.musicSources}
displayCover
displayArtist
displayPlayCount
/>;
})}
</tbody>
</table>
Expand Down
Loading

0 comments on commit c6c94a0

Please sign in to comment.