secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Service worker caching, Loader component

Browse Source
This commit is contained in:
James Barnsley
2019-09-10 06:59:44 +12:00
parent a86403fa59
commit c08cc71c47
49 changed files with 16390 additions and 11259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/js/views/Track.js
View File

@ -17,7 +17,7 @@ import LazyLoadListener from '../components/LazyLoadListener';
import ContextMenuTrigger from '../components/ContextMenuTrigger';
import URILink from '../components/URILink';
import Icon from '../components/Icon';
import Popularity from '../components/Popularity';
import Loader from '../components/Loader';
import * as helpers from '../helpers';
import * as coreActions from '../services/core/actions';
@ -27,7 +27,7 @@ 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);
}
@ -51,7 +51,7 @@ class Track extends React.Component {
this.props.uiActions.showContextMenu(e, data, 'track', 'click');
}
componentWillReceiveProps(nextProps) {
componentWillReceiveProps(nextProps) {
// if our URI has changed, fetch new track
if (nextProps.uri != this.props.uri) {
this.props.coreActions.loadTrack(nextProps.uri);
@ -68,7 +68,7 @@ class Track extends React.Component {
}
// We have just received our full track or our track artists
if ((!this.props.track && nextProps.track) || (!this.props.track.artists && nextProps.track.artists)) {
if ((!this.props.track && nextProps.track) || (!this.props.track.artists && nextProps.track.artists)) {
this.setWindowTitle(nextProps.track);
// Ready to load LastFM
@ -118,7 +118,7 @@ class Track extends React.Component {
renderLyricsSelector() {
if (this.props.track.lyrics_results === undefined || this.props.track.lyrics_results === null) {
return null;
return null;
} if (this.props.track.lyrics_results.length <= 0) {
return (
<div className="field lyrics-selector">
@ -136,14 +136,14 @@ class Track extends React.Component {
<div className="field lyrics-selector">
<div className="input">
<select
onChange={(e) => this.props.geniusActions.getTrackLyrics(this.props.track.uri, e.target.value)}
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}
defaultValue={result.path == this.props.track.lyrics_path}
>
{result.title}
</option>
@ -162,9 +162,7 @@ class Track extends React.Component {
if (helpers.isLoading(this.props.load_queue, ['genius_'])) {
return (
<div className="lyrics">
<div className="body-loader loading">
<div className="loader" />
</div>
<Loader body loading />
</div>
);
} if (this.props.track.lyrics) {
@ -172,8 +170,8 @@ class Track extends React.Component {
<div className="lyrics">
<div className="content" dangerouslySetInnerHTML={{ __html: this.props.track.lyrics }} />
<div className="origin mid_grey-text">
Origin:
{' '}
Origin:
{' '}
<a href={`https://genius.com${this.props.track.lyrics_path}`} target="_blank">{`https://genius.com${this.props.track.lyrics_path}`}</a>
</div>
</div>
@ -181,22 +179,18 @@ class Track extends React.Component {
}
return (
<ErrorMessage type="not-found" title="Not found">
<p>
Could not find track with URI "
{encodeURIComponent(this.props.uri)}
"
<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>
);
return <Loader body loading />
}
if (!this.props.track) {
@ -217,13 +211,13 @@ Could not find track with URI "
return (
<div className="view track-view content-wrapper">
{this.props.slim_mode ? (
{this.props.slim_mode ? (
<Header
icon="music"
title="Track"
handleContextMenuTrigger={(e) => this.handleContextMenu(e)}
uiActions={this.props.uiActions}
/>
uiActions={this.props.uiActions}
/>
) : null}
<div className="thumbnail-wrapper">
@ -237,8 +231,8 @@ Could not find track with URI "
{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}
&nbsp;by
{' '}
&nbsp;by
{' '}
<ArtistSentence artists={track.artists} />
</h2>
@ -247,26 +241,26 @@ Could not find track with URI "
{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>
{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>
{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>
{track.popularity ? (
<li>
{track.popularity}
% popularity
</li>
) : null}
</ul>
</div>
@ -277,12 +271,12 @@ Track
<ContextMenuTrigger onTrigger={(e) => this.handleContextMenu(e)} />
</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>
{!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}