387 lines
11 KiB
JavaScript
Executable File
387 lines
11 KiB
JavaScript
Executable File
|
|
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { bindActionCreators } from 'redux';
|
|
import Link from '../components/Link';
|
|
import ErrorMessage from '../components/ErrorMessage';
|
|
import Header from '../components/Header';
|
|
import Thumbnail from '../components/Thumbnail';
|
|
import LinksSentence from '../components/LinksSentence';
|
|
import LastfmLoveButton from '../components/Fields/LastfmLoveButton';
|
|
import { Dater } from '../components/Dater';
|
|
import SelectField from '../components/Fields/SelectField';
|
|
import ContextMenuTrigger from '../components/ContextMenuTrigger';
|
|
import Icon from '../components/Icon';
|
|
import Loader from '../components/Loader';
|
|
import * as coreActions from '../services/core/actions';
|
|
import * as uiActions from '../services/ui/actions';
|
|
import * as mopidyActions from '../services/mopidy/actions';
|
|
import * as spotifyActions from '../services/spotify/actions';
|
|
import * as lastfmActions from '../services/lastfm/actions';
|
|
import * as geniusActions from '../services/genius/actions';
|
|
import {
|
|
isLoading,
|
|
getFromUri,
|
|
sourceIcon,
|
|
uriSource,
|
|
uriType,
|
|
} from '../util/helpers';
|
|
import { i18n, I18n } from '../locale';
|
|
|
|
class Track extends React.Component {
|
|
componentDidMount() {
|
|
const {
|
|
uri,
|
|
track,
|
|
coreActions: { loadTrack },
|
|
genius_authorized,
|
|
geniusActions: { findTrackLyrics },
|
|
} = this.props;
|
|
|
|
loadTrack(uri);
|
|
|
|
if (track) {
|
|
this.setWindowTitle(track);
|
|
|
|
if (genius_authorized && track.artists && !track.lyrics_results) {
|
|
findTrackLyrics(track);
|
|
}
|
|
}
|
|
}
|
|
|
|
componentDidUpdate = ({
|
|
uri: prevUri,
|
|
track: prevTrack,
|
|
mopidy_connected: prev_mopidy_connected,
|
|
}) => {
|
|
const {
|
|
uri,
|
|
track,
|
|
genius_authorized,
|
|
lastfm_authorized,
|
|
mopidy_connected,
|
|
coreActions: {
|
|
loadTrack,
|
|
},
|
|
geniusActions: {
|
|
findTrackLyrics,
|
|
},
|
|
lastfmActions: {
|
|
getTrack,
|
|
},
|
|
} = this.props;
|
|
// if our URI has changed, fetch new track
|
|
if (prevUri !== uri) {
|
|
loadTrack(uri);
|
|
if (genius_authorized && track.artists) findTrackLyrics(track);
|
|
|
|
// if mopidy has just connected AND we're not a Spotify track, go get
|
|
} else if (!prev_mopidy_connected && mopidy_connected) {
|
|
if (uriSource(uri) !== 'spotify') loadTrack(uri);
|
|
}
|
|
|
|
// We have just received our full track or our track artists
|
|
if ((!prevTrack && track) || (!prevTrack.artists && track.artists)) {
|
|
this.setWindowTitle(track);
|
|
if (lastfm_authorized) getTrack(track.uri);
|
|
if (genius_authorized && !track.lyrics_results) findTrackLyrics(track);
|
|
}
|
|
|
|
if (!prevTrack && track) this.setWindowTitle(track);
|
|
}
|
|
|
|
setWindowTitle = (track = this.props.track) => {
|
|
const {
|
|
uiActions: { setWindowTitle },
|
|
} = this.props;
|
|
|
|
if (track) {
|
|
let artists = '';
|
|
for (let i = 0; i < track.artists.length; i++) {
|
|
if (artists != '') {
|
|
artists += ', ';
|
|
}
|
|
artists += track.artists[i].name;
|
|
}
|
|
setWindowTitle(i18n('track.title_window', { name: track.name, artists }));
|
|
} else {
|
|
setWindowTitle(i18n('track.title'));
|
|
}
|
|
}
|
|
|
|
handleContextMenu = (e) => {
|
|
const {
|
|
uri,
|
|
track,
|
|
uiActions: { showContextMenu },
|
|
} = this.props;
|
|
|
|
showContextMenu({
|
|
e,
|
|
context: 'track',
|
|
items: [track],
|
|
uris: [uri],
|
|
});
|
|
}
|
|
|
|
play = () => {
|
|
const {
|
|
uri,
|
|
mopidyActions: { playURIs },
|
|
} = this.props;
|
|
|
|
playURIs([uri], uri);
|
|
}
|
|
|
|
renderLyricsSelector = () => {
|
|
const {
|
|
track,
|
|
geniusActions: { getTrackLyrics },
|
|
} = this.props;
|
|
|
|
if (track.lyrics_results === undefined || track.lyrics_results === null) {
|
|
return null;
|
|
} if (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">
|
|
<I18n path="services.genius.switch_lyrics_result" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="field lyrics-selector">
|
|
<div className="input">
|
|
<SelectField
|
|
onChange={(value) => getTrackLyrics(track.uri, value)}
|
|
options={
|
|
track.lyrics_results.map((result) => ({
|
|
value: result.path,
|
|
label: result.title,
|
|
defaultValue: (result.path === track.lyrics_path),
|
|
}))
|
|
}
|
|
/>
|
|
<div className="description">
|
|
<I18n path="services.genius.switch_lyrics_result" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
renderLyrics = () => {
|
|
const {
|
|
load_queue,
|
|
track: {
|
|
lyrics,
|
|
lyrics_path,
|
|
} = {},
|
|
} = this.props;
|
|
|
|
if (isLoading(load_queue, ['genius_'])) {
|
|
return (
|
|
<div className="lyrics">
|
|
<Loader body loading />
|
|
</div>
|
|
);
|
|
} if (lyrics) {
|
|
return (
|
|
<div className="lyrics">
|
|
<div className="content" dangerouslySetInnerHTML={{ __html: lyrics }} />
|
|
<div className="origin mid_grey-text">
|
|
<I18n path="track.lyrics_origin" />
|
|
<a
|
|
href={`https://genius.com${lyrics_path}`}
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
>
|
|
{`https://genius.com${lyrics_path}`}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<ErrorMessage type="not-found" title={i18n('errors.no_results')} />
|
|
);
|
|
}
|
|
|
|
render = () => {
|
|
const {
|
|
uri,
|
|
track,
|
|
albums,
|
|
load_queue,
|
|
slim_mode,
|
|
uiActions,
|
|
genius_authorized,
|
|
} = this.props;
|
|
|
|
if (isLoading(load_queue, [`spotify_track/${getFromUri('trackid', uri)}`])) {
|
|
return <Loader body loading />;
|
|
}
|
|
|
|
if (!track) return null;
|
|
|
|
// Flatten our simple album so we can inherit artwork
|
|
if (track.album) {
|
|
const album = albums[track.album.uri];
|
|
|
|
if (album && album.images) {
|
|
track.images = album.images;
|
|
}
|
|
}
|
|
|
|
|
|
return (
|
|
<div className="view track-view content-wrapper">
|
|
|
|
{slim_mode && (
|
|
<Header
|
|
icon="music"
|
|
title="Track"
|
|
handleContextMenuTrigger={this.handleContextMenu}
|
|
uiActions={uiActions}
|
|
/>
|
|
)}
|
|
|
|
<div className="thumbnail-wrapper">
|
|
<Thumbnail size="large" canZoom images={track.images} type="album" />
|
|
</div>
|
|
|
|
<div className="title">
|
|
|
|
<h1>{track.name}</h1>
|
|
<h2>
|
|
{track.album && track.album.uri && <Link to={`/album/${track.album.uri}`}>{track.album.name}</Link>}
|
|
{track.album && !track.album.uri ? track.album.name : null}
|
|
{!track.album && <I18n path="track.unknown_album" />}
|
|
<I18n path="common.by" />
|
|
<LinksSentence items={track.artists} />
|
|
</h2>
|
|
|
|
<ul className="details">
|
|
{!slim_mode && (
|
|
<li className="source">
|
|
<Icon type="fontawesome" name={sourceIcon(uri)} />
|
|
</li>
|
|
)}
|
|
{track.date && <li><Dater type="date" data={track.date} /></li>}
|
|
{track.explicit && (
|
|
<li>
|
|
<span className="flag flag--dark uppercase">
|
|
<I18n path="track.explicit" />
|
|
</span>
|
|
</li>
|
|
)}
|
|
<li>
|
|
{track.disc_number > 0 && (
|
|
<I18n path="track.disc_number" number={track.disc_number} />
|
|
)}
|
|
{track.disc_number > 0 && track.track_number > 0 && <span>, </span>}
|
|
{track.track_number && (
|
|
<I18n path="track.track_number" number={track.track_number} />
|
|
)}
|
|
</li>
|
|
{track.duration && <li><Dater type="length" data={track.duration} /></li>}
|
|
{track.popularity && (
|
|
<li>
|
|
<I18n path="stats.popularity" percent={track.popularity} />
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
|
|
<div className="actions">
|
|
<button className="button button--primary" onClick={this.play} type="button">
|
|
<I18n path="actions.play" />
|
|
</button>
|
|
<LastfmLoveButton
|
|
uri={uri}
|
|
artist={(track.artists ? track.artists[0].name : null)}
|
|
track={track.name}
|
|
is_loved={track.userloved}
|
|
/>
|
|
<ContextMenuTrigger onTrigger={this.handleContextMenu} />
|
|
</div>
|
|
|
|
{!genius_authorized && (
|
|
<p className="no-results">
|
|
<I18n path="track.want_lyrics" />
|
|
<Link to="/settings/services/genius" scrollTo="#services-menu">
|
|
<I18n path="settings.title" />
|
|
</Link>
|
|
.
|
|
</p>
|
|
)}
|
|
{genius_authorized && this.renderLyricsSelector()}
|
|
{genius_authorized && this.renderLyrics()}
|
|
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Rebuild a track URI with some ugly-ass handling of encoding.
|
|
*
|
|
* Basically the ID part of a Mopidy URI needs to be encoded, but the rest of the URI can't be.
|
|
* This means we need to break down the URI (decoded) and then reconstruct with an encoded ID.
|
|
* This is all required because he URI is passed to us *from* a URL which has been encoded for
|
|
* obvious reasons.
|
|
*
|
|
* @param uri String
|
|
* @return String
|
|
* */
|
|
const rebuildUri = (uri) => {
|
|
const rebuilt_uri = `${uriSource(uri)}:${uriType(uri)}:`;
|
|
|
|
// Escape unreserved characters (RFC 3986)
|
|
// https://stackoverflow.com/questions/18251399/why-doesnt-encodeuricomponent-encode-single-quotes-apostrophes
|
|
let id = getFromUri('trackid', uri);
|
|
id = encodeURIComponent(id).replace(/[!'()*]/g, escape);
|
|
|
|
// Reinstate slashes for the Mopidy-Local structure
|
|
id = id.replace(/%2F/g, '/');
|
|
|
|
return rebuilt_uri + id;
|
|
};
|
|
|
|
const mapStateToProps = (state, ownProps) => {
|
|
let uri = decodeURIComponent(ownProps.match.params.uri);
|
|
uri = rebuildUri(uri);
|
|
|
|
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) => ({
|
|
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);
|