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

Loader for lyrics

Browse Source
This commit is contained in:
James Barnsley
2017-10-09 16:56:09 +13:00
parent b344c3585c
commit 011750796c
5 changed files with 128 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/js/components/Modal/Modal.js
View File

@ -49,18 +49,76 @@ class Modal extends React.Component{
</div>
<div className="content">
{ this.props.modal.name == 'add_to_playlist' ? <AddToPlaylistModal uiActions={this.props.uiActions} coreActions={this.props.coreActions} spotifyActions={this.props.spotifyActions} mopidyActions={this.props.mopidyActions} playlists={this.props.playlists} tracks_uris={this.props.modal.data.tracks_uris} spotify_library_playlists={this.props.spotify_library_playlists} mopidy_library_playlists={this.props.mopidy_library_playlists} processes={this.props.processes} /> : null }
{ this.props.modal.name == 'add_to_queue' ? <AddToQueueModal uiActions={this.props.uiActions} mopidyActions={this.props.mopidyActions} /> : null }
{ this.props.modal.name == 'create_playlist' ? <CreatePlaylistModal uiActions={this.props.uiActions} coreActions={this.props.coreActions} /> : null }
{ this.props.modal.name == 'edit_playlist' ? <EditPlaylistModal uiActions={this.props.uiActions} coreActions={this.props.coreActions} data={this.props.modal.data} /> : null }
{ this.props.modal.name == 'send_authorization' ? <AuthorizationModal_Send uiActions={this.props.uiActions} pusherActions={this.props.pusherActions} data={this.props.modal.data} /> : null }
{ this.props.modal.name == 'receive_authorization' ? <AuthorizationModal_Receive uiActions={this.props.uiActions} spotifyActions={this.props.spotifyActions} data={this.props.modal.data} /> : null }
{ this.props.modal.name == 'edit_radio' ? <EditRadioModal uiActions={this.props.uiActions} pusherActions={this.props.pusherActions} spotifyActions={this.props.spotifyActions} data={this.props.modal.data} radio={this.props.radio} artists={this.props.artists} tracks={this.props.tracks} /> : null }
{ this.props.modal.name == 'image_zoom' ? <ImageZoomModal uiActions={this.props.uiActions} data={this.props.modal.data} /> : null }
{ this.props.modal.name == 'kiosk_mode' ? <KioskModeModal uiActions={this.props.uiActions} data={this.props.modal.data} current_track={this.props.current_track} /> : null }
{ this.props.modal.name == 'search_uri_schemes' ? <SearchURISchemesModal uiActions={this.props.uiActions} coreActions={this.props.coreActions} search_uri_schemes={this.props.search_uri_schemes} available_uri_schemes={this.props.uri_schemes} data={this.props.modal.data} /> : null }
{ this.props.modal.name == 'volume' ? <VolumeModal uiActions={this.props.uiActions} mopidyActions={this.props.mopidyActions} volume={this.props.volume} mute={this.props.mute} /> : null }
{ this.props.modal.name == 'track_info' ? <TrackInfoModal uiActions={this.props.uiActions} geniusActions={this.props.geniusActions} current_track={this.props.current_track} /> : null }
{ this.props.modal.name == 'add_to_playlist' ? <AddToPlaylistModal
uiActions={this.props.uiActions}
coreActions={this.props.coreActions}
spotifyActions={this.props.spotifyActions}
mopidyActions={this.props.mopidyActions}
playlists={this.props.playlists}
tracks_uris={this.props.modal.data.tracks_uris}
spotify_library_playlists={this.props.spotify_library_playlists}
mopidy_library_playlists={this.props.mopidy_library_playlists}
processes={this.props.processes} /> : null }
{ this.props.modal.name == 'add_to_queue' ? <AddToQueueModal
uiActions={this.props.uiActions}
mopidyActions={this.props.mopidyActions} /> : null }
{ this.props.modal.name == 'create_playlist' ? <CreatePlaylistModal
uiActions={this.props.uiActions}
coreActions={this.props.coreActions} /> : null }
{ this.props.modal.name == 'edit_playlist' ? <EditPlaylistModal
uiActions={this.props.uiActions}
coreActions={this.props.coreActions}
data={this.props.modal.data} /> : null }
{ this.props.modal.name == 'send_authorization' ? <AuthorizationModal_Send
uiActions={this.props.uiActions}
pusherActions={this.props.pusherActions}
data={this.props.modal.data} /> : null }
{ this.props.modal.name == 'receive_authorization' ? <AuthorizationModal_Receive
uiActions={this.props.uiActions}
spotifyActions={this.props.spotifyActions}
data={this.props.modal.data} /> : null }
{ this.props.modal.name == 'edit_radio' ? <EditRadioModal
uiActions={this.props.uiActions}
pusherActions={this.props.pusherActions}
spotifyActions={this.props.spotifyActions}
data={this.props.modal.data}
radio={this.props.radio}
artists={this.props.artists}
tracks={this.props.tracks} /> : null }
{ this.props.modal.name == 'image_zoom' ? <ImageZoomModal
uiActions={this.props.uiActions}
data={this.props.modal.data} /> : null }
{ this.props.modal.name == 'kiosk_mode' ? <KioskModeModal
uiActions={this.props.uiActions}
data={this.props.modal.data}
current_track={this.props.current_track} /> : null }
{ this.props.modal.name == 'search_uri_schemes' ? <SearchURISchemesModal
uiActions={this.props.uiActions}
coreActions={this.props.coreActions}
search_uri_schemes={this.props.search_uri_schemes}
available_uri_schemes={this.props.uri_schemes}
data={this.props.modal.data} /> : null }
{ this.props.modal.name == 'volume' ? <VolumeModal
uiActions={this.props.uiActions}
mopidyActions={this.props.mopidyActions}
volume={this.props.volume}
mute={this.props.mute} /> : null }
{ this.props.modal.name == 'track_info' ? <TrackInfoModal
load_queue={this.props.load_queue}
uiActions={this.props.uiActions}
geniusActions={this.props.geniusActions}
current_track={this.props.current_track} /> : null }
</div>
</div>
@ -82,6 +140,7 @@ const mapStateToProps = (state, ownProps) => {
playlists: state.core.playlists,
context_menu: state.ui.context_menu,
processes: state.ui.processes,
load_queue: state.ui.load_queue,
mopidy_connected: state.mopidy.connected,
spotify_authorized: state.spotify.authorization,
spotify_library_playlists: state.spotify.library_playlists,

18
src/js/components/Modal/TrackInfoModal.js
View File

@ -24,6 +24,22 @@ export default class TrackInfoModal extends React.Component{
}
}
renderLyrics(track){
if (helpers.isLoading(this.props.load_queue,['genius_'])){
return (
<div className="body-loader loading">
<div className="loader"></div>
</div>
);
} else if (!track){
return <div className="lyrics">Could not load track</div>
} else if (!track.lyrics){
return <div className="lyrics">No lyrics available</div>
} else {
return <div className="lyrics" dangerouslySetInnerHTML={{__html: track.lyrics}}></div>
}
}
render(){
if (this.props.current_track){
var track = this.props.current_track;
@ -35,7 +51,7 @@ export default class TrackInfoModal extends React.Component{
<div>
<h1>Track info</h1>
{track ? <h2 className="grey-text">{track.name} by <ArtistSentence artists={track.artists} /></h2> : null}
{track && track.lyrics ? <div className="lyrics" dangerouslySetInnerHTML={{__html: track.lyrics}}></div> : "No lyrics"}
{this.renderLyrics(track)}
</div>
)
}

1
src/js/services/core/middleware.js
View File

@ -7,7 +7,6 @@ var pusherActions = require('../pusher/actions.js');
var mopidyActions = require('../mopidy/actions.js');
var spotifyActions = require('../spotify/actions.js');
var lastfmActions = require('../lastfm/actions.js');
var geniusActions = require('../genius/actions.js');
var helpers = require('../../helpers.js');
const CoreMiddleware = (function(){

66
src/js/services/genius/actions.js
View File

@ -24,7 +24,7 @@ const sendRequest = (dispatch, getState, endpoint) => {
Authorization: 'Bearer 2AGP9sfzKQcxfKSZuGa_3lqsDIpuOiTGT7-vhJYcKaaDjHIIA2HICsxXCiC30Xxi'
},
data: JSON.stringify({
url: 'https://api.genius.com/'+endpoint
url: 'https://genius.com/'+endpoint
}),
url: '//'+getState().mopidy.host+':'+getState().mopidy.port+'/iris/http/proxy_request'
};
@ -50,45 +50,45 @@ const sendRequest = (dispatch, getState, endpoint) => {
export function getTrackLyrics(track){
return (dispatch, getState) => {
var query = '';
var endpoint = '';
for (var i = 0; i < track.artists.length; i++){
query += track.artists[i].name+' ';
endpoint += track.artists[i].name+' ';
}
query += track.name+' lyrics';
query = query.replace(/\s+/g, '-').toLowerCase();
endpoint += track.name+' lyrics';
endpoint = endpoint.replace(/\s+/g, '-').toLowerCase();
var config = {
method: 'POST',
cache: false,
timeout: 15000,
data: JSON.stringify({
url: 'https://genius.com/'+query
}),
url: '//'+getState().mopidy.host+':'+getState().mopidy.port+'/iris/http/proxy_request'
};
sendRequest(dispatch, getState, endpoint)
.then(
response => {
var html = $(response);
var lyrics = html.find('.lyrics');
if (lyrics.length > 0){
$.ajax(config).then(
response => {
var html = $(response.response);
var lyrics = html.find('.lyrics');
if (lyrics.length > 0){
lyrics = lyrics.first();
lyrics.find('a').replaceWith(function(){
return this.innerHTML;
});
lyrics = lyrics.first();
lyrics.find('a').replaceWith(function(){ return this.innerHTML; });
var lyrics_html = lyrics.html();
lyrics_html = lyrics_html.replace(/(\[)/g, '<span class="grey-text">[');
lyrics_html = lyrics_html.replace(/(\])/g, ']</span>');
dispatch({
type: 'TRACK_LOADED',
key: track.uri,
track: {
lyrics: lyrics.html()
}
});
dispatch({
type: 'TRACK_LOADED',
key: track.uri,
track: {
lyrics: lyrics_html
}
});
}
},
error => {
dispatch(coreActions.handleException(
'Could not get track lyrics',
error
));
}
},
(xhr, status, error) => {
console.log(xhr, status, error)
}
)
);
}
}

7
src/scss/components/_modal.scss
View File

@ -269,6 +269,13 @@
}
}
&.track_info {
.lyrics {
font-size: 1.2em;
padding: 60px 0;
}
}
.actions {
padding-top: 50px;
text-align: center;