Moving track info to it's own view

src/js/components/Modal/Modal.js

@@ -2,6 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
+import FontAwesome from 'react-fontawesome'
 
 import * as helpers from '../../helpers'
 import Icon from '../Icon'
@@ -16,14 +17,12 @@ import SearchURISchemesModal from './SearchURISchemesModal'
 import VolumeModal from './VolumeModal'
 import AuthorizationModal_Send from './AuthorizationModal_Send'
 import AuthorizationModal_Receive from './AuthorizationModal_Receive'
-import TrackInfoModal from './TrackInfoModal'
 
 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 pusherActions from '../../services/pusher/actions'
-import * as geniusActions from '../../services/genius/actions'
 
 class Modal extends React.Component{
 
@@ -39,14 +38,38 @@ class Modal extends React.Component{
 		}
 	}
 
+	toggleFullscreen(){
+		let app = document.documentElement
+		if (app.requestFullscreen){
+			app.requestFullscreen()
+		} else if (app.webkitRequestFullscreen){
+			app.webkitRequestFullscreen()
+		} else if (app.mozRequestFullScreen){
+			app.mozRequestFullScreen()
+		} else if (app.msRequestFullscreen){
+			app.msRequestFullscreen()
+		}
+	}
+
 	render(){
-		if( !this.props.modal ) return null;
+		if (!this.props.modal){
+			return null;
+		}
+
+		var can_fullscreen = false;
+		if (this.props.modal.name == 'kiosk_mode'){
+			can_fullscreen = true;
+		}
 
 		return (
 			<div className={this.props.modal.name+" modal"}>
-				<div className="close-modal" onClick={ () => this.props.uiActions.closeModal() }>
-					<Icon name="close" className="white" />
+
+				<div className="controls">
+					<div className="control close" onClick={e => this.props.uiActions.closeModal()}>
+						<Icon name="close" className="white" />
+					</div>
 				</div>
+
 				<div className="content">
 
 					{ this.props.modal.name == 'add_to_playlist' ? <AddToPlaylistModal 
@@ -114,12 +137,6 @@ class Modal extends React.Component{
 						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>
 		);
@@ -154,8 +171,7 @@ const mapDispatchToProps = (dispatch) => {
 		uiActions: bindActionCreators(uiActions, dispatch),
 		pusherActions: bindActionCreators(pusherActions, dispatch),
 		spotifyActions: bindActionCreators(spotifyActions, dispatch),
-		mopidyActions: bindActionCreators(mopidyActions, dispatch),
-		geniusActions: bindActionCreators(geniusActions, dispatch)
+		mopidyActions: bindActionCreators(mopidyActions, dispatch)
 	}
 }
 

src/js/components/Modal/TrackInfoModal.js

@@ -1,58 +0,0 @@
-
-import React, { PropTypes } from 'react'
-import FontAwesome from 'react-fontawesome'
-
-import Icon from '../Icon'
-import ArtistSentence from '../ArtistSentence'
-import * as helpers from '../../helpers'
-
-export default class TrackInfoModal extends React.Component{
-
-	constructor(props){
-		super(props)
-	}
-
-	componentDidMount(){
-		if (this.props.current_track && !this.props.current_track.lyrics){
-			this.props.geniusActions.getTrackLyrics(this.props.current_track);
-		}
-	}
-
-	componentWillReceiveProps(nextProps){
-		if (nextProps.current_track && nextProps.current_track.uri !== this.props.current_track.uri && !nextProps.current_track.lyrics){
-			this.props.geniusActions.getTrackLyrics(nextProps.current_track);
-		}
-	}
-
-	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;
-		} else {
-			var track = null
-		}
-
-		return (
-			<div>
-				<h1>Track info</h1>
-				{track ? <h2 className="grey-text">{track.name} by <ArtistSentence artists={track.artists} /></h2> : null}
-				{this.renderLyrics(track)}
-			</div>
-		)
-	}
-}

src/js/components/PlaybackControls.js

@@ -59,18 +59,7 @@ class PlaybackControls extends React.Component{
 
 	handleThumbnailClick(e){
 		e.preventDefault();
-		this.props.uiActions.openModal('kiosk_mode')
-
-		let app = document.documentElement
-		if (app.requestFullscreen){
-			app.requestFullscreen()
-		} else if (app.webkitRequestFullscreen){
-			app.webkitRequestFullscreen()
-		} else if (app.mozRequestFullScreen){
-			app.mozRequestFullScreen()
-		} else if (app.msRequestFullscreen){
-			app.msRequestFullscreen()
-		}
+		this.props.uiActions.openModal('kiosk_mode');
 	}
 
 	render(){

src/js/index.js

@@ -17,6 +17,7 @@ import Album from './views/Album'
 import Artist from './views/Artist'
 import Playlist from './views/Playlist'
 import User from './views/User'
+import Track from './views/Track'
 import Queue from './views/Queue'
 import QueueHistory from './views/QueueHistory'
 import Settings from './views/Settings'
@@ -70,6 +71,7 @@ ReactDOM.render(
 				<Route path="artist/:uri(/:sub_view)" component={Artist} />
 				<Route path="playlist/:uri" component={Playlist} />
 				<Route path="user/:uri" component={User} />
+				<Route path="track/:uri" component={Track} />
 	
 				<Route path="discover/recommendations(/:seeds)" component={DiscoverRecommendations} />
 				<Route path="discover/featured" component={DiscoverFeatured} />

src/js/views/Queue.js

@@ -119,8 +119,7 @@ class Queue extends React.Component{
 					<div className="current-track">
 						{ this.renderArtwork(image) }
 						<div className="title">
-							{this.props.current_track ? this.props.current_track.name : <span>-</span>}
-							&nbsp; <FontAwesome name="info-circle" onClick={e => this.props.uiActions.openModal('track_info')} />
+							{this.props.current_track ? <Link to={global.baseURL+'track/'+this.props.current_track.uri}>{this.props.current_track.name}</Link> : <span>-</span>}
 						</div>
 						{this.props.current_track ? <ArtistSentence artists={ this.props.current_track.artists } /> : <ArtistSentence />}
 					</div>

src/js/views/Track.js

@@ -0,0 +1,173 @@
+
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import FontAwesome from 'react-fontawesome'
+
+import Header from '../components/Header'
+import TrackList from '../components/TrackList'
+import Thumbnail from '../components/Thumbnail'
+import Parallax from '../components/Parallax'
+import ArtistSentence from '../components/ArtistSentence'
+import ArtistGrid from '../components/ArtistGrid'
+import FollowButton from '../components/FollowButton'
+import Dater from '../components/Dater'
+import LazyLoadListener from '../components/LazyLoadListener'
+import ContextMenuTrigger from '../components/ContextMenuTrigger'
+
+import * as helpers from '../helpers'
+import * as uiActions from '../services/ui/actions'
+import * as mopidyActions from '../services/mopidy/actions'
+import * as spotifyActions from '../services/spotify/actions'
+import * as geniusActions from '../services/genius/actions'
+
+class Track extends React.Component{
+
+	constructor(props) {
+		super(props);
+	}
+
+	componentDidMount(){
+		this.loadTrack();
+	}
+
+	handleContextMenu(e){
+		e.preventDefault()
+		var data = { uris: [this.props.params.uri] }
+		this.props.uiActions.showContextMenu( e, data, 'track', 'click' )
+	}
+
+	componentWillReceiveProps( nextProps ){
+
+		// if our URI has changed, fetch new album
+		if( nextProps.params.uri != this.props.params.uri ){
+			this.loadTrack( nextProps )
+
+		// if mopidy has just connected AND we're a local album, go get
+		} else if (!this.props.mopidy_connected && nextProps.mopidy_connected){
+			if( helpers.uriSource( this.props.params.uri ) != 'spotify' ){
+				this.loadTrack( nextProps )
+			}
+		} else if (!nextProps.track.lyrics && nextProps.track.artists && !this.props.track.artists){
+			this.props.geniusActions.getTrackLyrics(nextProps.track);
+		}
+	}
+
+	handleContextMenu(e){
+		var data = {
+			e: e,
+			context: 'track',
+			items: [this.props.track],
+			uris: [this.props.params.uri]
+		}
+		this.props.uiActions.showContextMenu(data)
+	}
+
+	loadTrack( props = this.props ){
+		switch (helpers.uriSource(props.params.uri)){
+
+			case 'spotify':
+				if (props.track){
+					console.info('Loading track from index')
+				}else{
+					this.props.spotifyActions.getTrack( props.params.uri );
+				}
+				break;
+		}
+	}
+
+	play(){
+		this.props.mopidyActions.playURIs([this.props.params.uri], this.props.params.uri)
+	}
+
+	renderLyrics(){
+		if (helpers.isLoading(this.props.load_queue,['genius_'])){
+			return (
+				<div className="body-loader loading">
+					<div className="loader"></div>
+				</div>
+			);
+		} else if (!this.props.track.lyrics){
+			return <div className="lyrics">No lyrics available</div>
+		} else {
+			return <div className="lyrics" dangerouslySetInnerHTML={{__html: this.props.track.lyrics}}></div>
+		}
+	}
+
+	render(){
+		if (helpers.isLoading(this.props.load_queue,['spotify_track/'+helpers.getFromUri('trackid',this.props.params.uri)])){
+			return (
+				<div className="body-loader loading">
+					<div className="loader"></div>
+				</div>
+			)
+		}
+
+		if (!this.props.track){
+			return null
+		}
+
+		return (
+			<div className="view track-view content-wrapper">
+
+				{this.props.slim_mode ? <Header icon="cd" title="Album" handleContextMenuTrigger={e => this.handleContextMenu(e)} uiActions={this.props.uiActions} /> : null}
+
+				<div className="thumbnail-wrapper">
+					<Thumbnail size="large" canZoom images={ this.props.track.album.images } />
+				</div>
+
+				<div className="title">
+
+					<h1>{ this.props.track.name }</h1>
+
+					<ul className="details">
+						{ !this.props.slim_mode ? <li className="has-tooltip"><FontAwesome name={helpers.sourceIcon( this.props.params.uri )} /><span className="tooltip">{helpers.uriSource( this.props.params.uri )} track</span></li> : null }
+						<li><ArtistSentence artists={this.props.track.artists} /></li>
+					</ul>
+				</div>
+
+				<div className="actions">
+					<button className="primary" onClick={e => this.play()}>Play</button>
+					{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
+				</div>
+
+				{this.renderLyrics()}
+
+			</div>
+		)
+	}
+}
+
+
+/**
+ * Export our component
+ *
+ * We also integrate our global store, using connect()
+ **/
+
+const mapStateToProps = (state, ownProps) => {
+	return {
+		slim_mode: state.ui.slim_mode,
+		load_queue: state.ui.load_queue,
+		track: (state.core.tracks && state.core.tracks[ownProps.params.uri] !== undefined ? state.core.tracks[ownProps.params.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,
+		spotify_authorized: state.spotify.authorization,
+		mopidy_connected: state.mopidy.connected
+	};
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		uiActions: bindActionCreators(uiActions, dispatch),
+		uiActions: bindActionCreators(uiActions, dispatch),
+		mopidyActions: bindActionCreators(mopidyActions, dispatch),
+		spotifyActions: bindActionCreators(spotifyActions, dispatch),
+		geniusActions: bindActionCreators(geniusActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Track)

src/scss/components/_modal.scss

@@ -15,27 +15,36 @@
 	background: $overlay_dark;
 	overflow-y: scroll;
 
-	.close-modal {
-		@include animate();
+	.controls {
 		position: absolute;
 		top: 10px;
 		right: 10px;
-		opacity: 0.5;
-		cursor: pointer;
-		padding: 20px;
 		z-index: 99;
 
-		img {
-			width: 30px;
-		}
+		.control {
+			@include animate();
+			display: block;
+			float: right;
+			opacity: 0.5;
+			cursor: pointer;
+			padding: 20px;
 
-		&:hover {
-			opacity: 1;
+			img {
+				width: 30px;
+			}
+
+			&:hover {
+				opacity: 1;
+			}
+
+			.fa {
+				font-size: 24px;
+			}
 		}
 	}
 
 	.content {
-		padding: 10vh 25%;
+		padding: 80px 25%;
 		margin: 0 auto;
 		width: 50%;
 		color: $white;