Auto eslint fix
This commit is contained in:
James Barnsley
@ -27,243 +27,269 @@ import * as spotifyActions from '../services/spotify/actions';
|
||||
import * as lastfmActions from '../services/lastfm/actions';
|
||||
import * as geniusActions from '../services/genius/actions';
|
||||
|
||||
class Track extends React.Component{
|
||||
class Track extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
}
|
||||
componentDidMount() {
|
||||
this.props.coreActions.loadTrack(this.props.uri);
|
||||
|
||||
componentDidMount(){
|
||||
this.props.coreActions.loadTrack(this.props.uri);
|
||||
// We already have the track in our index, so it won't fire componentWillReceiveProps
|
||||
if (this.props.track) {
|
||||
this.setWindowTitle(this.props.track);
|
||||
|
||||
// We already have the track in our index, so it won't fire componentWillReceiveProps
|
||||
if (this.props.track){
|
||||
this.setWindowTitle(this.props.track);
|
||||
if (this.props.genius_authorized && this.props.track.artists && !this.props.track.lyrics_results) {
|
||||
this.props.geniusActions.findTrackLyrics(this.props.track);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.props.genius_authorized && this.props.track.artists && !this.props.track.lyrics_results){
|
||||
this.props.geniusActions.findTrackLyrics(this.props.track);
|
||||
}
|
||||
}
|
||||
}
|
||||
handleContextMenu(e) {
|
||||
e.preventDefault();
|
||||
const data = { uris: [this.props.uri] };
|
||||
this.props.uiActions.showContextMenu(e, data, 'track', 'click');
|
||||
}
|
||||
|
||||
handleContextMenu(e){
|
||||
e.preventDefault()
|
||||
var data = { uris: [this.props.uri] }
|
||||
this.props.uiActions.showContextMenu(e, data, 'track', 'click' )
|
||||
}
|
||||
componentWillReceiveProps(nextProps) {
|
||||
// if our URI has changed, fetch new track
|
||||
if (nextProps.uri != this.props.uri) {
|
||||
this.props.coreActions.loadTrack(nextProps.uri);
|
||||
|
||||
componentWillReceiveProps(nextProps){
|
||||
if (nextProps.genius_authorized && nextProps.tracks.artists) {
|
||||
this.props.geniusActions.findTrackLyrics(nextProps.track);
|
||||
}
|
||||
|
||||
// if our URI has changed, fetch new track
|
||||
if (nextProps.uri != this.props.uri){
|
||||
this.props.coreActions.loadTrack(nextProps.uri);
|
||||
// if mopidy has just connected AND we're not a Spotify track, go get
|
||||
} else if (!this.props.mopidy_connected && nextProps.mopidy_connected) {
|
||||
if (helpers.uriSource(this.props.uri) != 'spotify') {
|
||||
this.props.coreActions.loadTrack(nextProps.uri);
|
||||
}
|
||||
}
|
||||
|
||||
if (nextProps.genius_authorized && nextProps.tracks.artists){
|
||||
this.props.geniusActions.findTrackLyrics(nextProps.track);
|
||||
}
|
||||
// We have just received our full track or our track artists
|
||||
if ((!this.props.track && nextProps.track) || (!this.props.track.artists && nextProps.track.artists)) {
|
||||
this.setWindowTitle(nextProps.track);
|
||||
|
||||
// if mopidy has just connected AND we're not a Spotify track, go get
|
||||
} else if (!this.props.mopidy_connected && nextProps.mopidy_connected){
|
||||
if (helpers.uriSource(this.props.uri) != 'spotify'){
|
||||
this.props.coreActions.loadTrack(nextProps.uri);
|
||||
}
|
||||
}
|
||||
// Ready to load LastFM
|
||||
if (nextProps.lastfm_authorized) {
|
||||
this.props.lastfmActions.getTrack(nextProps.track.uri);
|
||||
}
|
||||
|
||||
// We have just received our full track or our track artists
|
||||
if ((!this.props.track && nextProps.track) || (!this.props.track.artists && nextProps.track.artists)){
|
||||
// Ready to load lyrics
|
||||
if (nextProps.genius_authorized && !nextProps.track.lyrics_results) {
|
||||
this.props.geniusActions.findTrackLyrics(nextProps.track);
|
||||
}
|
||||
}
|
||||
|
||||
this.setWindowTitle(nextProps.track);
|
||||
if (!this.props.track && nextProps.track) {
|
||||
this.setWindowTitle(nextProps.track);
|
||||
}
|
||||
}
|
||||
|
||||
// Ready to load LastFM
|
||||
if (nextProps.lastfm_authorized){
|
||||
this.props.lastfmActions.getTrack(nextProps.track.uri);
|
||||
}
|
||||
setWindowTitle(track = this.props.track) {
|
||||
if (track) {
|
||||
let artists = '';
|
||||
for (let i = 0; i < track.artists.length; i++) {
|
||||
if (artists != '') {
|
||||
artists += ', ';
|
||||
}
|
||||
artists += track.artists[i].name;
|
||||
}
|
||||
this.props.uiActions.setWindowTitle(`${track.name} by ${artists} (track)`);
|
||||
} else {
|
||||
this.props.uiActions.setWindowTitle('Track');
|
||||
}
|
||||
}
|
||||
|
||||
// Ready to load lyrics
|
||||
if (nextProps.genius_authorized && !nextProps.track.lyrics_results){
|
||||
this.props.geniusActions.findTrackLyrics(nextProps.track);
|
||||
}
|
||||
}
|
||||
handleContextMenu(e) {
|
||||
const data = {
|
||||
e,
|
||||
context: 'track',
|
||||
items: [this.props.track],
|
||||
uris: [this.props.uri],
|
||||
};
|
||||
this.props.uiActions.showContextMenu(data);
|
||||
}
|
||||
|
||||
if (!this.props.track && nextProps.track){
|
||||
this.setWindowTitle(nextProps.track);
|
||||
}
|
||||
}
|
||||
play() {
|
||||
this.props.mopidyActions.playURIs([this.props.uri], this.props.uri);
|
||||
}
|
||||
|
||||
setWindowTitle(track = this.props.track){
|
||||
if (track){
|
||||
var artists = "";
|
||||
for (var i = 0; i < track.artists.length; i++){
|
||||
if (artists != ""){
|
||||
artists += ", ";
|
||||
}
|
||||
artists += track.artists[i].name;
|
||||
}
|
||||
this.props.uiActions.setWindowTitle(track.name+" by "+artists+" (track)");
|
||||
} else{
|
||||
this.props.uiActions.setWindowTitle("Track");
|
||||
}
|
||||
}
|
||||
|
||||
handleContextMenu(e){
|
||||
var data = {
|
||||
e: e,
|
||||
context: 'track',
|
||||
items: [this.props.track],
|
||||
uris: [this.props.uri]
|
||||
}
|
||||
this.props.uiActions.showContextMenu(data)
|
||||
}
|
||||
|
||||
play(){
|
||||
this.props.mopidyActions.playURIs([this.props.uri], this.props.uri)
|
||||
}
|
||||
|
||||
renderLyricsSelector(){
|
||||
if (this.props.track.lyrics_results === undefined || this.props.track.lyrics_results === null){
|
||||
return null;
|
||||
|
||||
} else if (this.props.track.lyrics_results.length <= 0){
|
||||
return (
|
||||
<div className="field lyrics-selector">
|
||||
<div className="input">
|
||||
<input type="text" disabled="disabled" value="No results" />
|
||||
<div className="description">
|
||||
renderLyricsSelector() {
|
||||
if (this.props.track.lyrics_results === undefined || this.props.track.lyrics_results === null) {
|
||||
return null;
|
||||
} if (this.props.track.lyrics_results.length <= 0) {
|
||||
return (
|
||||
<div className="field lyrics-selector">
|
||||
<div className="input">
|
||||
<input type="text" disabled="disabled" value="No results" />
|
||||
<div className="description">
|
||||
Switch to another lyrics seach result
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="field lyrics-selector">
|
||||
<div className="input">
|
||||
<select
|
||||
onChange={e => this.props.geniusActions.getTrackLyrics(this.props.track.uri, e.target.value)}>
|
||||
{
|
||||
this.props.track.lyrics_results.map(result => {
|
||||
return (
|
||||
<option
|
||||
key={result.path}
|
||||
value={result.path}
|
||||
defaultValue={result.path == this.props.track.lyrics_path}
|
||||
>
|
||||
{result.title}
|
||||
</option>
|
||||
)
|
||||
})
|
||||
return (
|
||||
<div className="field lyrics-selector">
|
||||
<div className="input">
|
||||
<select
|
||||
onChange={(e) => this.props.geniusActions.getTrackLyrics(this.props.track.uri, e.target.value)}
|
||||
>
|
||||
{
|
||||
this.props.track.lyrics_results.map((result) => (
|
||||
<option
|
||||
key={result.path}
|
||||
value={result.path}
|
||||
defaultValue={result.path == this.props.track.lyrics_path}
|
||||
>
|
||||
{result.title}
|
||||
</option>
|
||||
))
|
||||
}
|
||||
</select>
|
||||
<div className="description">
|
||||
</select>
|
||||
<div className="description">
|
||||
Switch to another lyrics seach result
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderLyrics(){
|
||||
if (helpers.isLoading(this.props.load_queue,['genius_'])){
|
||||
return (
|
||||
<div className="lyrics">
|
||||
<div className="body-loader loading">
|
||||
<div className="loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else if (this.props.track.lyrics){
|
||||
return (
|
||||
<div className="lyrics">
|
||||
<div className="content" dangerouslySetInnerHTML={{__html: this.props.track.lyrics}}></div>
|
||||
<div className="origin mid_grey-text">
|
||||
Origin: <a href={"https://genius.com"+this.props.track.lyrics_path} target="_blank">{"https://genius.com"+this.props.track.lyrics_path}</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<ErrorMessage type="not-found" title="Not found">
|
||||
<p>Could not find track with URI "{encodeURIComponent(this.props.uri)}"</p>
|
||||
</ErrorMessage>
|
||||
);
|
||||
}
|
||||
}
|
||||
renderLyrics() {
|
||||
if (helpers.isLoading(this.props.load_queue, ['genius_'])) {
|
||||
return (
|
||||
<div className="lyrics">
|
||||
<div className="body-loader loading">
|
||||
<div className="loader" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} if (this.props.track.lyrics) {
|
||||
return (
|
||||
<div className="lyrics">
|
||||
<div className="content" dangerouslySetInnerHTML={{ __html: this.props.track.lyrics }} />
|
||||
<div className="origin mid_grey-text">
|
||||
Origin:
|
||||
{' '}
|
||||
<a href={`https://genius.com${this.props.track.lyrics_path}`} target="_blank">{`https://genius.com${this.props.track.lyrics_path}`}</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<ErrorMessage type="not-found" title="Not found">
|
||||
<p>
|
||||
Could not find track with URI "
|
||||
{encodeURIComponent(this.props.uri)}
|
||||
"
|
||||
</p>
|
||||
</ErrorMessage>
|
||||
);
|
||||
}
|
||||
|
||||
render(){
|
||||
if (helpers.isLoading(this.props.load_queue,['spotify_track/'+helpers.getFromUri('trackid',this.props.uri)])){
|
||||
return (
|
||||
<div className="body-loader loading">
|
||||
<div className="loader"></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
render() {
|
||||
if (helpers.isLoading(this.props.load_queue, [`spotify_track/${helpers.getFromUri('trackid', this.props.uri)}`])) {
|
||||
return (
|
||||
<div className="body-loader loading">
|
||||
<div className="loader" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!this.props.track){
|
||||
return null
|
||||
} else {
|
||||
var track = this.props.track;
|
||||
if (!this.props.track) {
|
||||
return null;
|
||||
}
|
||||
const { track } = this.props;
|
||||
|
||||
// Flatten our simple album so we can inherit artwork
|
||||
if (track.album){
|
||||
var album = this.props.albums[track.album.uri];
|
||||
// Flatten our simple album so we can inherit artwork
|
||||
if (track.album) {
|
||||
const album = this.props.albums[track.album.uri];
|
||||
|
||||
if (album && album.images){
|
||||
track.images = album.images;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (album && album.images) {
|
||||
track.images = album.images;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="view track-view content-wrapper">
|
||||
|
||||
{this.props.slim_mode ? <Header
|
||||
icon="music"
|
||||
title="Track"
|
||||
handleContextMenuTrigger={e => this.handleContextMenu(e)}
|
||||
uiActions={this.props.uiActions} /> : null}
|
||||
return (
|
||||
<div className="view track-view content-wrapper">
|
||||
|
||||
<div className="thumbnail-wrapper">
|
||||
<Thumbnail size="large" canZoom images={track.images} />
|
||||
</div>
|
||||
{this.props.slim_mode ? (
|
||||
<Header
|
||||
icon="music"
|
||||
title="Track"
|
||||
handleContextMenuTrigger={(e) => this.handleContextMenu(e)}
|
||||
uiActions={this.props.uiActions}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<div className="title">
|
||||
<div className="thumbnail-wrapper">
|
||||
<Thumbnail size="large" canZoom images={track.images} />
|
||||
</div>
|
||||
|
||||
<h1>{track.name}</h1>
|
||||
<h2>
|
||||
{track.album && track.album.uri ? <Link to={'/album/'+track.album.uri}>{track.album.name}</Link> : null}
|
||||
{track.album && !track.album.uri ? track.album.name : null}
|
||||
{!track.album ? "Unknown album" : null}
|
||||
by <ArtistSentence artists={track.artists} />
|
||||
</h2>
|
||||
<div className="title">
|
||||
|
||||
<ul className="details">
|
||||
{!this.props.slim_mode ? <li className="source"><Icon type="fontawesome" name={helpers.sourceIcon(this.props.uri)} /></li> : null}
|
||||
{track.date ? <li><Dater type="date" data={track.date} /></li> : null}
|
||||
{track.explicit ? <li><span className="flag dark">EXPLICIT</span></li> : null}
|
||||
<li>
|
||||
{track.disc_number ? <span>Disc {track.disc_number}</span> : null}
|
||||
{track.disc_number && track.track_number ? <span>, </span> : null}
|
||||
{track.track_number ? <span>Track {track.track_number}</span> : null}
|
||||
</li>
|
||||
{track.duration ? <li><Dater type="length" data={track.duration} /></li> : null}
|
||||
{track.popularity ? <li>{track.popularity}% popularity</li> : null}
|
||||
</ul>
|
||||
</div>
|
||||
<h1>{track.name}</h1>
|
||||
<h2>
|
||||
{track.album && track.album.uri ? <Link to={`/album/${track.album.uri}`}>{track.album.name}</Link> : null}
|
||||
{track.album && !track.album.uri ? track.album.name : null}
|
||||
{!track.album ? 'Unknown album' : null}
|
||||
by
|
||||
{' '}
|
||||
<ArtistSentence artists={track.artists} />
|
||||
</h2>
|
||||
|
||||
<div className="actions">
|
||||
<button className="button button--primary" onClick={e => this.play()}>Play</button>
|
||||
<LastfmLoveButton uri={this.props.uri} artist={(this.props.track.artists ? this.props.track.artists[0].name : null)} track={this.props.track.name} addText="Love" removeText="Unlove" is_loved={this.props.track.userloved} />
|
||||
<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
|
||||
</div>
|
||||
<ul className="details">
|
||||
{!this.props.slim_mode ? <li className="source"><Icon type="fontawesome" name={helpers.sourceIcon(this.props.uri)} /></li> : null}
|
||||
{track.date ? <li><Dater type="date" data={track.date} /></li> : null}
|
||||
{track.explicit ? <li><span className="flag dark">EXPLICIT</span></li> : null}
|
||||
<li>
|
||||
{track.disc_number ? (
|
||||
<span>
|
||||
Disc
|
||||
{track.disc_number}
|
||||
</span>
|
||||
) : null}
|
||||
{track.disc_number && track.track_number ? <span>, </span> : null}
|
||||
{track.track_number ? (
|
||||
<span>
|
||||
Track
|
||||
{track.track_number}
|
||||
</span>
|
||||
) : null}
|
||||
</li>
|
||||
{track.duration ? <li><Dater type="length" data={track.duration} /></li> : null}
|
||||
{track.popularity ? (
|
||||
<li>
|
||||
{track.popularity}
|
||||
% popularity
|
||||
</li>
|
||||
) : null}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{!this.props.genius_authorized ? <p className="no-results">Want track lyrics? Authorize Genius under <Link to="/settings/genius" scrollTo="#services-menu">Settings</Link>.</p> : null}
|
||||
{this.props.genius_authorized ? this.renderLyricsSelector() : null}
|
||||
{this.props.genius_authorized ? this.renderLyrics() : null}
|
||||
<div className="actions">
|
||||
<button className="button button--primary" onClick={(e) => this.play()}>Play</button>
|
||||
<LastfmLoveButton uri={this.props.uri} artist={(this.props.track.artists ? this.props.track.artists[0].name : null)} track={this.props.track.name} addText="Love" removeText="Unlove" is_loved={this.props.track.userloved} />
|
||||
<ContextMenuTrigger onTrigger={(e) => this.handleContextMenu(e)} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{!this.props.genius_authorized ? (
|
||||
<p className="no-results">
|
||||
Want track lyrics? Authorize Genius under
|
||||
<Link to="/settings/genius" scrollTo="#services-menu">Settings</Link>
|
||||
.
|
||||
</p>
|
||||
) : null}
|
||||
{this.props.genius_authorized ? this.renderLyricsSelector() : null}
|
||||
{this.props.genius_authorized ? this.renderLyrics() : null}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -276,53 +302,51 @@ class Track extends React.Component{
|
||||
*
|
||||
* @param uri String
|
||||
* @return String
|
||||
**/
|
||||
* */
|
||||
const rebuildUri = (uri) => {
|
||||
var rebuilt_uri = helpers.uriSource(uri)+':'+helpers.uriType(uri)+':';
|
||||
const rebuilt_uri = `${helpers.uriSource(uri)}:${helpers.uriType(uri)}:`;
|
||||
|
||||
// Escape unreserved characters (RFC 3986)
|
||||
// https://stackoverflow.com/questions/18251399/why-doesnt-encodeuricomponent-encode-single-quotes-apostrophes
|
||||
var id = helpers.getFromUri('trackid', uri);
|
||||
id = encodeURIComponent(id).replace(/[!'()*]/g, escape);
|
||||
// Escape unreserved characters (RFC 3986)
|
||||
// https://stackoverflow.com/questions/18251399/why-doesnt-encodeuricomponent-encode-single-quotes-apostrophes
|
||||
let id = helpers.getFromUri('trackid', uri);
|
||||
id = encodeURIComponent(id).replace(/[!'()*]/g, escape);
|
||||
|
||||
// Reinstate slashes for the Mopidy-Local structure
|
||||
id = id.replace(/%2F/g, '/');
|
||||
// Reinstate slashes for the Mopidy-Local structure
|
||||
id = id.replace(/%2F/g, '/');
|
||||
|
||||
return rebuilt_uri+id;
|
||||
}
|
||||
return rebuilt_uri + id;
|
||||
};
|
||||
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
var uri = decodeURIComponent(ownProps.match.params.uri);
|
||||
uri = rebuildUri(uri);
|
||||
let uri = decodeURIComponent(ownProps.match.params.uri);
|
||||
uri = rebuildUri(uri);
|
||||
|
||||
console.log(uri);
|
||||
console.log(uri);
|
||||
|
||||
return {
|
||||
uri: uri,
|
||||
slim_mode: state.ui.slim_mode,
|
||||
load_queue: state.ui.load_queue,
|
||||
track: (state.core.tracks && state.core.tracks[uri] !== undefined ? state.core.tracks[uri] : false),
|
||||
tracks: state.core.tracks,
|
||||
artists: state.core.artists,
|
||||
albums: state.core.albums,
|
||||
spotify_library_albums: state.spotify.library_albums,
|
||||
local_library_albums: state.mopidy.library_albums,
|
||||
lastfm_authorized: state.lastfm.authorization,
|
||||
spotify_authorized: state.spotify.authorization,
|
||||
genius_authorized: state.genius.authorization,
|
||||
mopidy_connected: state.mopidy.connected
|
||||
};
|
||||
}
|
||||
return {
|
||||
uri,
|
||||
slim_mode: state.ui.slim_mode,
|
||||
load_queue: state.ui.load_queue,
|
||||
track: (state.core.tracks && state.core.tracks[uri] !== undefined ? state.core.tracks[uri] : false),
|
||||
tracks: state.core.tracks,
|
||||
artists: state.core.artists,
|
||||
albums: state.core.albums,
|
||||
spotify_library_albums: state.spotify.library_albums,
|
||||
local_library_albums: state.mopidy.library_albums,
|
||||
lastfm_authorized: state.lastfm.authorization,
|
||||
spotify_authorized: state.spotify.authorization,
|
||||
genius_authorized: state.genius.authorization,
|
||||
mopidy_connected: state.mopidy.connected,
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
coreActions: bindActionCreators(coreActions, dispatch),
|
||||
uiActions: bindActionCreators(uiActions, dispatch),
|
||||
mopidyActions: bindActionCreators(mopidyActions, dispatch),
|
||||
lastfmActions: bindActionCreators(lastfmActions, dispatch),
|
||||
spotifyActions: bindActionCreators(spotifyActions, dispatch),
|
||||
geniusActions: bindActionCreators(geniusActions, dispatch)
|
||||
}
|
||||
}
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
coreActions: bindActionCreators(coreActions, dispatch),
|
||||
uiActions: bindActionCreators(uiActions, dispatch),
|
||||
mopidyActions: bindActionCreators(mopidyActions, dispatch),
|
||||
lastfmActions: bindActionCreators(lastfmActions, dispatch),
|
||||
spotifyActions: bindActionCreators(spotifyActions, dispatch),
|
||||
geniusActions: bindActionCreators(geniusActions, dispatch),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Track)
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(Track);
|
||||
|
||||
Reference in New Issue
Block a user