(props.onClick ? props.onClick(e) : null)} />;
+ switch (props.type) {
+ case 'svg':
+ return 
(props.onClick ? props.onClick(e) : null)} />;
- case 'gif':
- return 
(props.onClick ? props.onClick(e) : null)} />;
+ case 'gif':
+ return 
(props.onClick ? props.onClick(e) : null)} />;
- case 'fontawesome':
- return
- {
- this.props.rows.map((item, index) => {
- return (
- this.handleContextMenu(e, item)}
- thumbnail={this.props.thumbnail}
- details={this.props.details}
- nocontext={this.props.nocontext}
- />
- );
- })
+ return (
+
+ );
+ }
}
-const mapStateToProps = (state, ownProps) => {
- return {}
-}
+const mapStateToProps = (state, ownProps) => ({});
-const mapDispatchToProps = (dispatch) => {
- return {
- uiActions: bindActionCreators(uiActions, dispatch),
- lastfmActions: bindActionCreators(lastfmActions, dispatch),
- discogsActions: bindActionCreators(discogsActions, dispatch),
- }
-}
+const mapDispatchToProps = (dispatch) => ({
+ uiActions: bindActionCreators(uiActions, dispatch),
+ lastfmActions: bindActionCreators(lastfmActions, dispatch),
+ discogsActions: bindActionCreators(discogsActions, dispatch),
+});
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(List));
diff --git a/src/js/components/ListItem.js b/src/js/components/ListItem.js
index f31cff1c..9760ca43 100755
--- a/src/js/components/ListItem.js
+++ b/src/js/components/ListItem.js
@@ -11,173 +11,195 @@ import Popularity from './Popularity';
import * as helpers from '../helpers';
-export default class ListItem extends React.Component{
+export default class ListItem extends React.Component {
+ constructor(props) {
+ super(props);
+ }
- constructor(props){
- super(props);
- }
+ componentDidMount() {
+ const { item, lastfmActions, discogsActions } = this.props;
+ if (!item) return;
- componentDidMount(){
- const { item, lastfmActions, discogsActions } = this.props;
- if (!item) return;
+ // If the item that has just been mounted doesn't have images,
+ // try fetching them from LastFM
+ if (!item.images) {
+ switch (helpers.uriType(item.uri)) {
+ case 'artist':
+ if (discogsActions) {
+ discogsActions.getArtistImages(item.uri, item);
+ }
+ break;
- // If the item that has just been mounted doesn't have images,
- // try fetching them from LastFM
- if (!item.images){
- switch (helpers.uriType(item.uri)){
+ case 'album':
+ if (lastfmActions && item.artists && item.artists.length > 0) {
+ lastfmActions.getAlbum(item.uri, item.artists[0].name, item.name, (item.mbid ? item.mbid : null));
+ }
+ break;
+ }
+ }
+ }
- case 'artist':
- if (discogsActions) {
- discogsActions.getArtistImages(item.uri, item);
- }
- break;
+ handleClick(e) {
+ // make sure we haven't clicked a nested link (ie Artist name)
+ if (e.target.tagName.toLowerCase() !== 'a') {
+ e.preventDefault();
+ this.props.history.push((this.props.link_prefix ? this.props.link_prefix : '') + encodeURIComponent(this.props.item.uri));
+ helpers.scrollTo();
+ }
+ }
- case 'album':
- if (lastfmActions && item.artists && item.artists.length > 0){
- lastfmActions.getAlbum(item.uri, item.artists[0].name, item.name, (item.mbid ? item.mbid : null));
- }
- break;
- }
- }
- }
+ handleMouseDown(e) {
+ // make sure we haven't clicked a nested link (ie Artist name)
+ if (e.target.tagName.toLowerCase() !== 'a') {
+ e.preventDefault();
+ this.props.history.push((this.props.link_prefix ? this.props.link_prefix : '') + encodeURIComponent(this.props.item.uri));
+ helpers.scrollTo();
+ }
+ }
- handleClick(e){
+ handleContextMenu(e) {
+ if (this.props.handleContextMenu) {
+ e.preventDefault();
+ this.props.handleContextMenu(e, this.props.item);
+ }
+ }
- // make sure we haven't clicked a nested link (ie Artist name)
- if (e.target.tagName.toLowerCase() !== 'a'){
- e.preventDefault();
- this.props.history.push((this.props.link_prefix ? this.props.link_prefix : '') + encodeURIComponent(this.props.item.uri));
- helpers.scrollTo();
- }
- }
+ renderValue(key_string) {
+ const key = key_string.split('.');
+ let value = Object.assign(this.props.item);
- handleMouseDown(e){
+ for (let i = 0; i < key.length; i++) {
+ if (value[key[i]] === undefined) {
+ return null;
+ } if (typeof (value[key[i]]) === 'string' && value[key[i]].replace(' ', '') == '') {
+ return null;
+ }
+ value = value[key[i]];
+ }
- // make sure we haven't clicked a nested link (ie Artist name)
- if (e.target.tagName.toLowerCase() !== 'a'){
- e.preventDefault();
- this.props.history.push((this.props.link_prefix ? this.props.link_prefix : '') + encodeURIComponent(this.props.item.uri));
- helpers.scrollTo();
- }
- }
+ if (key_string === 'tracks_total' || key_string === 'tracks_uris.length') {
+ return (
+
+ {value}
+ {' '}
+tracks
+
+ );
+ }
+ if (key_string === 'followers') {
+ return (
+
+ {value.toLocaleString()}
+ {' '}
+followers
+
+ );
+ }
+ if (key_string === 'added_at') {
+ return (
+
+Added
+
+ {
+ this.props.rows.map((item, index) => (
+ this.handleContextMenu(e, item)}
+ thumbnail={this.props.thumbnail}
+ details={this.props.details}
+ nocontext={this.props.nocontext}
+ />
+ ))
}
-
- );
- }
+ this.handleClick(e)}
+ onContextMenu={(e) => this.handleContextMenu(e)}
+ >
- if (this.props.middle_column){
- class_name += " list__item--has-middle-column";
- }
-
- if (this.props.thumbnail){
- class_name += " list__item--has-thumbnail";
- }
-
- if (this.props.details){
- class_name += " list__item--has-details";
- }
-
- return (
-
+ );
+ }
}
diff --git a/src/js/components/NiceNumber.js b/src/js/components/NiceNumber.js
index 016bfc97..d9359b2b 100755
--- a/src/js/components/NiceNumber.js
+++ b/src/js/components/NiceNumber.js
@@ -1,25 +1,23 @@
-import React, { memo } from 'react'
+import React, { memo } from 'react';
-export default memo((props) => {
+export default memo((props) => {
+ let formatted = parseInt(props.value);
- let formatted = parseInt(props.value);
+ // > 1 million
+ if (formatted > 1000000) {
+ formatted /= 1000000;
+ formatted = Math.round(formatted * 10) / 10;
+ formatted = `${formatted}m`;
- // > 1 million
- if (formatted > 1000000){
- formatted = formatted / 1000000;
- formatted = Math.round( formatted * 10 ) / 10;
- formatted = formatted+'m';
+ // > 1 thousand
+ } else if (formatted > 1000) {
+ formatted /= 1000;
+ formatted = Math.round(formatted * 10) / 10;
+ formatted = `${formatted}k`;
+ } else {
+ formatted = formatted.toLocaleString();
+ }
- // > 1 thousand
- } else if (formatted > 1000){
- formatted = formatted / 1000;
- formatted = Math.round( formatted * 10 ) / 10;
- formatted = formatted+'k';
-
- } else {
- formatted = formatted.toLocaleString();
- }
-
- return formatted;
-});
\ No newline at end of file
+ return formatted;
+});
diff --git a/src/js/components/Notifications.js b/src/js/components/Notifications.js
index a82f5e4c..2001700b 100755
--- a/src/js/components/Notifications.js
+++ b/src/js/components/Notifications.js
@@ -11,212 +11,205 @@ import * as snapcastActions from '../services/snapcast/actions';
import Icon from './Icon';
-class Notifications extends React.Component{
+class Notifications extends React.Component {
+ constructor(props) {
+ super(props);
+ }
- constructor(props){
- super(props)
- }
+ importConfiguration(notification_key, configuration) {
+ console.log('Importing configuration', configuration);
+ const configurations = '';
- importConfiguration(notification_key, configuration){
- console.log("Importing configuration", configuration);
- var configurations = "";
+ if (configuration.interface) {
+ this.props.uiActions.set(configuration.interface);
+ }
- if (configuration.interface){
- this.props.uiActions.set(configuration.interface);
- }
+ if (configuration.spotify) {
+ this.props.spotifyActions.importAuthorization(configuration.spotify.authorization, configuration.spotify.me);
+ }
- if (configuration.spotify){
- this.props.spotifyActions.importAuthorization(configuration.spotify.authorization, configuration.spotify.me);
- }
+ if (configuration.lastfm) {
+ this.props.lastfmActions.importAuthorization(configuration.lastfm.authorization, configuration.lastfm.me);
+ }
- if (configuration.lastfm){
- this.props.lastfmActions.importAuthorization(configuration.lastfm.authorization, configuration.lastfm.me);
- }
+ if (configuration.genius) {
+ this.props.geniusActions.importAuthorization(configuration.genius.authorization, configuration.genius.me);
+ }
- if (configuration.genius){
- this.props.geniusActions.importAuthorization(configuration.genius.authorization, configuration.genius.me);
- }
+ this.props.uiActions.removeNotification(notification_key, true);
+ this.props.uiActions.createNotification({ type: 'info', content: 'Import successful' });
+ }
- this.props.uiActions.removeNotification(notification_key, true);
- this.props.uiActions.createNotification({type: 'info', content: 'Import successful'});
- }
+ renderNotifications() {
+ if (!this.props.notifications || this.props.notifications.length <= 0) return null;
- renderNotifications(){
- if (!this.props.notifications || this.props.notifications.length <= 0) return null
+ const notifications = [];
+ for (const key in this.props.notifications) {
+ if (this.props.notifications.hasOwnProperty(key)) {
+ notifications.push(this.props.notifications[key]);
+ }
+ }
- var notifications = []
- for (var key in this.props.notifications){
- if (this.props.notifications.hasOwnProperty(key)){
- notifications.push(this.props.notifications[key])
- }
- }
+ return (
+
+ {
+ notifications.map((notification) => {
+ switch (notification.type) {
+ case 'shortcut':
+ return (
+ this.handleClick(e)}
- onContextMenu={e => this.handleContextMenu(e)}>
-
- {this.props.right_column && !this.props.nocontext &&
-
+ ) : null}
+
- {
- (this.props.right_column ? this.props.right_column.map((column, index) => {
- return (
-
- {this.renderValue(column, item)}
-
- )
- }) : null)
+ {this.props.right_column && !this.props.nocontext
+ && (
+
+ )}
-
+ {
+ (this.props.right_column ? this.props.right_column.map((column, index) => (
+
+ {this.renderValue(column, item)}
+
+ )) : null)
}
- {this.props.nocontext ? null : this.handleContextMenu(e)} />}
+ {this.props.nocontext ? null : this.handleContextMenu(e)} />}
-
- }
+
+
- {this.props.middle_column ?
- {this.props.thumbnail ?
+
+ ) : null}
+
- {item.name !== undefined ? this.renderValue('name') : {item.uri}}
-
+
+ {item.name !== undefined ? this.renderValue('name') : {item.uri}}
+
- {this.props.details ?-
- {
+ {this.props.details ? (
+
- - {value} - - ) - }) + return ( +
- + {value} + + ); + }) } -
-
+ {
this.props.details.map((detail, index) => {
- var value = this.renderValue(detail);
+ const value = this.renderValue(detail);
- if (!value){
- return null;
- }
+ if (!value) {
+ return null;
+ }
- return (
-
- {
- (this.props.middle_column ? this.props.middle_column.map((column, index) => {
- return (
-
- {this.renderValue(column)}
-
- )
- }) : null)
+ {this.props.middle_column ? (
+
- );
- }
+
+ {
+ (this.props.middle_column ? this.props.middle_column.map((column, index) => (
+
+ {this.renderValue(column)}
+
+ )) : null)
}
-
: null}
-
+
+ );
- return (
-
- {
- notifications.map(notification => {
- switch (notification.type){
- case 'shortcut':
- return (
-
-
- )
+ case 'share-configuration-received':
+ return (
+
+ this.props.uiActions.removeNotification(notification.key, true)} />
- case 'share-configuration-received':
- return (
-
+ );
- default:
- return (
-
- this.props.uiActions.removeNotification(notification.key, true) } />
-
-
- )
+ Configuration shared
-
-
-
- Another user has shared their configuration with you. This includes:
--
- {notification.configuration.ui ?
- User interface : null} - {notification.configuration.spotify ?
- Spotify : null} - {notification.configuration.lastfm ?
- LastFM : null} - {notification.configuration.genius ?
- Genius : null} -
Do you want to import this?
-Configuration shared
+
+
+
+ Another user has shared their configuration with you. This includes:
+-
+ {notification.configuration.ui ?
- User interface : null} + {notification.configuration.spotify ?
- Spotify : null} + {notification.configuration.lastfm ?
- LastFM : null} + {notification.configuration.genius ?
- Genius : null} +
Do you want to import this?
+
- this.props.uiActions.removeNotification(notification.key, true) } />
- {notification.title ?
- )
- }
+ default:
+ return (
+ {notification.title}
: null} - {notification.content ?{notification.content}
: null}
- {notification.description ? {notification.description}
: null }
- {notification.links ? {notification.links.map((link, i) => {
- return {link.text}
- })}
: null }
-
+ this.props.uiActions.removeNotification(notification.key, true)} />
+ {notification.title ?
+ );
+ }
})
}
-
- )
- }
+
+ );
+ }
- renderProcess(process){
+ renderProcess(process) {
+ let progress = 0;
+ if (process.data.total && process.data.remaining) {
+ progress = ((process.data.total - process.data.remaining) / process.data.total * 100).toFixed();
+ }
- var progress = 0;
- if (process.data.total && process.data.remaining){
- progress = ((process.data.total - process.data.remaining) / process.data.total * 100).toFixed()
- }
+ switch (process.status) {
+ case 'running':
+ return (
+ {notification.title}
: null} + {notification.content ?{notification.content}
: null}
+ {notification.description ? {notification.description}
: null }
+ {notification.links ? (
+
+ {notification.links.map((link, i) => {link.text})}
+
+ ) : null }
+
+ { this.props.uiActions.cancelProcess(process.key); }} />
+
+ );
- switch (process.status){
- case 'running':
- return(
-
+
+ {process.message}
+
+
+
+
- {this.props.uiActions.cancelProcess(process.key)}} />
-
- )
-
- case 'cancelling':
- return(
-
-
- {process.message}
-
-
-
-
-
+ case 'cancelling':
+ return (
+
+ );
- case 'cancelled':
- case 'finished':
- return null
- }
- }
+ case 'cancelled':
+ case 'finished':
+ return null;
+ }
+ }
- renderProcesses(){
- if (!this.props.processes || this.props.processes.length <= 0) return null
+ renderProcesses() {
+ if (!this.props.processes || this.props.processes.length <= 0) return null;
- var processes = []
- for (var key in this.props.processes){
- if (this.props.processes.hasOwnProperty(key)){
- processes.push(this.props.processes[key])
- }
- }
+ const processes = [];
+ for (const key in this.props.processes) {
+ if (this.props.processes.hasOwnProperty(key)) {
+ processes.push(this.props.processes[key]);
+ }
+ }
- return (
-
- {processes.map(process => {
- return this.renderProcess(process)
- })}
-
- )
- }
+ return (
+
+ {processes.map((process) => this.renderProcess(process))}
+
+ );
+ }
- // do we want the loading of everything to be displayed?
- // not likely...
- renderLoader(){
- if (!this.props.load_queue){
- return null
- }
+ // do we want the loading of everything to be displayed?
+ // not likely...
+ renderLoader() {
+ if (!this.props.load_queue) {
+ return null;
+ }
- var load_queue = this.props.load_queue
- var load_count = 0
- for (var key in load_queue){
- if (load_queue.hasOwnProperty(key)){
- load_count++
- }
- }
+ const { load_queue } = this.props;
+ let load_count = 0;
+ for (const key in load_queue) {
+ if (load_queue.hasOwnProperty(key)) {
+ load_count++;
+ }
+ }
- if (load_count > 0){
- var className = "loading "
- if (load_count > 20){
- className += 'high'
- } else if (load_count > 5){
- className += 'medium'
- } else {
- className += 'low'
- }
- return (
-
- )
- } else {
- return null
- }
- }
+ if (load_count > 0) {
+ let className = 'loading ';
+ if (load_count > 20) {
+ className += 'high';
+ } else if (load_count > 5) {
+ className += 'medium';
+ } else {
+ className += 'low';
+ }
+ return (
+
+ );
+ }
+ return null;
+ }
- render(){
- return (
-
+
Cancelling
-
- )
+
- {this.renderLoader()}
- {this.renderNotifications()}
- {this.renderProcesses()}
-
- )
- }
+ render() {
+ return (
+
+ {this.renderLoader()}
+ {this.renderNotifications()}
+ {this.renderProcesses()}
+
+ );
+ }
}
-const mapStateToProps = (state, ownProps) => {
- return {
- broadcasts: (state.ui.broadcasts ? state.ui.broadcasts : []),
- notifications: (state.ui.notifications ? state.ui.notifications : []),
- processes: (state.ui.processes ? state.ui.processes : {}),
- };
-}
+const mapStateToProps = (state, ownProps) => ({
+ broadcasts: (state.ui.broadcasts ? state.ui.broadcasts : []),
+ notifications: (state.ui.notifications ? state.ui.notifications : []),
+ processes: (state.ui.processes ? state.ui.processes : {}),
+});
-const mapDispatchToProps = (dispatch) => {
- return {
- uiActions: bindActionCreators(uiActions, dispatch),
- spotifyActions: bindActionCreators(spotifyActions, dispatch),
- geniusActions: bindActionCreators(geniusActions, dispatch),
- lastfmActions: bindActionCreators(lastfmActions, dispatch),
- snapcastActions: bindActionCreators(snapcastActions, dispatch),
- }
-}
+const mapDispatchToProps = (dispatch) => ({
+ uiActions: bindActionCreators(uiActions, dispatch),
+ spotifyActions: bindActionCreators(spotifyActions, dispatch),
+ geniusActions: bindActionCreators(geniusActions, dispatch),
+ lastfmActions: bindActionCreators(lastfmActions, dispatch),
+ snapcastActions: bindActionCreators(snapcastActions, dispatch),
+});
-export default connect(mapStateToProps, mapDispatchToProps)(Notifications)
+export default connect(mapStateToProps, mapDispatchToProps)(Notifications);
diff --git a/src/js/components/Parallax.js b/src/js/components/Parallax.js
index da383fd5..ec29a536 100755
--- a/src/js/components/Parallax.js
+++ b/src/js/components/Parallax.js
@@ -1,88 +1,83 @@
-import React from 'react'
+import React from 'react';
import * as helpers from '../helpers';
-export default class Parallax extends React.Component{
+export default class Parallax extends React.Component {
+ constructor(props) {
+ super(props);
- constructor(props){
- super(props);
+ this.state = {
+ loaded: false,
+ url: null,
+ };
+ }
- this.state = {
- loaded: false,
- url: null
- }
- }
+ componentWillMount() {
+ if (this.props.image) {
+ this.loadImage(this.props.image);
+ }
+ }
- componentWillMount(){
- if (this.props.image){
- this.loadImage(this.props.image);
- }
- }
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.image != this.state.url) {
+ this.loadImage(nextProps.image);
+ }
+ }
- componentWillReceiveProps(nextProps){
- if (nextProps.image != this.state.url){
- this.loadImage(nextProps.image);
- }
- }
+ loadImage(url) {
+ if (url && url !== '') {
+ this.setState({
+ loaded: helpers.isCached(url),
+ url,
+ });
- loadImage(url){
- if (url && url !== ""){
+ const self = this;
+ const imageObject = new Image();
+ imageObject.src = url;
- this.setState({
- loaded: helpers.isCached(url),
- url: url
- });
+ imageObject.onload = function () {
+ self.setState({
+ loaded: true,
+ url,
+ });
+ };
- var self = this;
- var imageObject = new Image();
- imageObject.src = url;
+ // No Image, so reset it
+ } else {
+ this.setState({
+ loaded: false,
+ url: null,
+ });
+ }
+ }
- imageObject.onload = function(){
- self.setState({
- loaded: true,
- url: url
- });
- }
+ render() {
+ let class_name = 'parallax preserve-3d';
+ if (this.props.blur) {
+ class_name += ' parallax--blur';
+ }
+ if (this.state.loaded) {
+ class_name += ' parallax--loaded';
+ }
+ if (this.props.fixedHeight) {
+ class_name += ' parallax--fixed-height';
+ } else {
+ class_name += ' parallax--flexible-height';
+ }
- // No Image, so reset it
- } else {
- this.setState({
- loaded: false,
- url: null
- });
- }
- }
+ let style = {};
+ if (this.state.loaded && this.state.url) {
+ style = { backgroundImage: `url("${this.state.url}")` };
+ }
- render(){
- var class_name = "parallax preserve-3d";
- if (this.props.blur){
- class_name += " parallax--blur";
- }
- if (this.state.loaded){
- class_name += " parallax--loaded";
- }
- if (this.props.fixedHeight){
- class_name += " parallax--fixed-height";
- } else {
- class_name += " parallax--flexible-height";
- }
-
- var style = {};
- if (this.state.loaded && this.state.url){
- style = {backgroundImage: `url("${this.state.url}")`};
- }
-
- return (
-
-
- );
- }
+ return (
+
-
-
-
-
+
+ );
+ }
}
-
-
-
diff --git a/src/js/components/PlaybackControls.js b/src/js/components/PlaybackControls.js
index e788ec30..db5da5a5 100755
--- a/src/js/components/PlaybackControls.js
+++ b/src/js/components/PlaybackControls.js
@@ -4,345 +4,366 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Link from './Link';
-import ProgressSlider from './Fields/ProgressSlider'
-import VolumeControl from './Fields/VolumeControl'
-import MuteControl from './Fields/MuteControl'
-import OutputControl from './Fields/OutputControl'
-import Dater from './Dater'
-import ArtistSentence from './ArtistSentence'
-import Thumbnail from './Thumbnail'
-import Icon from './Icon'
+import ProgressSlider from './Fields/ProgressSlider';
+import VolumeControl from './Fields/VolumeControl';
+import MuteControl from './Fields/MuteControl';
+import OutputControl from './Fields/OutputControl';
+import Dater from './Dater';
+import ArtistSentence from './ArtistSentence';
+import Thumbnail from './Thumbnail';
+import Icon from './Icon';
-import * as helpers from '../helpers'
-import * as uiActions from '../services/ui/actions'
-import * as coreActions from '../services/core/actions'
-import * as mopidyActions from '../services/mopidy/actions'
+import * as helpers from '../helpers';
+import * as uiActions from '../services/ui/actions';
+import * as coreActions from '../services/core/actions';
+import * as mopidyActions from '../services/mopidy/actions';
-class PlaybackControls extends React.Component{
+class PlaybackControls extends React.Component {
+ constructor(props) {
+ super(props);
+ this.stream = null;
+ this.state = {
+ expanded: false,
+ current_track: null,
+ transition_track: null,
+ transition_direction: null,
+ };
+ }
- constructor(props){
- super(props)
- this.stream = null;
- this.state = {
- expanded: false,
- current_track: null,
- transition_track: null,
- transition_direction: null
- }
- }
+ componentDidMount() {
+ if (this.props.http_streaming_enabled) {
+ // Bust our cache, and by consequence, play our stream
+ this.props.coreActions.cachebustHttpStream();
+ }
- componentDidMount(){
- if (this.props.http_streaming_enabled){
+ if (this.props.current_track) {
+ this.setState({ current_track: this.props.current_track });
+ }
+ }
- // Bust our cache, and by consequence, play our stream
- this.props.coreActions.cachebustHttpStream();
- }
+ playStream(props = this.props) {
+ if (!this.stream) {
+ this.stream = new Audio();
+ } else {
+ this.stream.src = null;
+ }
- if (this.props.current_track){
- this.setState({current_track: this.props.current_track});
- }
- }
+ if (!props.http_streaming_enabled || !props.http_streaming_url) {
+ return false;
+ }
- playStream(props = this.props){
-
- if (!this.stream){
- this.stream = new Audio();
- } else {
- this.stream.src = null;
- }
+ this.stream.src = `${props.http_streaming_url}?cb=${props.http_streaming_cachebuster}`;
+ this.stream.muted = props.http_streaming_mute;
+ this.stream.volume = props.http_streaming_volume / 100;
+ this.stream.play();
- if (!props.http_streaming_enabled || !props.http_streaming_url){
- return false;
- }
+ console.log(`Playing stream: ${this.stream.src}`);
+ }
- this.stream.src = props.http_streaming_url+"?cb="+props.http_streaming_cachebuster;
- this.stream.muted = props.http_streaming_mute;
- this.stream.volume = props.http_streaming_volume / 100;
- this.stream.play();
+ componentWillReceiveProps(nextProps) {
+ // Cachebuster changed
+ // This happens when playback changes, so that the stream is "new", rather
+ // than the original stream. This prevents the browser cache from starting
+ // the stream right from the beginning (which could be hours of continuous playback).
+ if (this.props.http_streaming_cachebuster !== nextProps.http_streaming_cachebuster) {
+ this.playStream(nextProps);
+ }
- console.log("Playing stream: "+this.stream.src);
- }
+ // Just been enabled
+ if (!this.props.http_streaming_enabled && nextProps.http_streaming_enabled) {
+ this.playStream(nextProps);
+ }
- componentWillReceiveProps(nextProps){
+ if (this.stream) {
+ // Just been muted
+ if (this.props.http_streaming_mute !== nextProps.http_streaming_mute) {
+ this.stream.muted = nextProps.http_streaming_mute;
+ }
- // Cachebuster changed
- // This happens when playback changes, so that the stream is "new", rather
- // than the original stream. This prevents the browser cache from starting
- // the stream right from the beginning (which could be hours of continuous playback).
- if (this.props.http_streaming_cachebuster !== nextProps.http_streaming_cachebuster){
- this.playStream(nextProps);
- }
+ // Just had volume changed
+ if (this.props.http_streaming_volume !== nextProps.http_streaming_volume) {
+ this.stream.volume = nextProps.http_streaming_volume / 100;
+ }
- // Just been enabled
- if (!this.props.http_streaming_enabled && nextProps.http_streaming_enabled){
- this.playStream(nextProps);
- }
+ // Just been disabled
+ if (!nextProps.http_streaming_enabled) {
+ this.stream = null;
+ }
+ }
- if (this.stream){
+ // Started a track or changed to no track
+ if ((!this.props.current_track && nextProps.current_track) || (this.props.current_track && !nextProps.current_track)) {
+ this.setState({ current_track: nextProps.current_track });
+ }
- // Just been muted
- if (this.props.http_streaming_mute !== nextProps.http_streaming_mute){
- this.stream.muted = nextProps.http_streaming_mute;
- }
+ // Direct swap-out of a track (with no 'null' intermediate state)
+ // This is precautionary and I've never been able to trigger it, but it's a good safety
+ if (this.props.current_track && nextProps.current_track && this.props.current_track.uri !== nextProps.current_track.uri) {
+ this.setState({ current_track: nextProps.current_track });
+ }
- // Just had volume changed
- if (this.props.http_streaming_volume !== nextProps.http_streaming_volume){
- this.stream.volume = nextProps.http_streaming_volume / 100;
- }
+ // Images have just loaded
+ // A bit niggly to have to deeply check this...
+ if (this.props.current_track && nextProps.current_track) {
+ if ((this.props.current_track.images && !nextProps.current_track.images) || (!this.props.current_track.images && nextProps.current_track.images)) {
+ this.setState({ current_track: nextProps.current_track });
+ }
+ }
+ }
- // Just been disabled
- if (!nextProps.http_streaming_enabled){
- this.stream = null;
- }
- }
+ handleTouchStart(e) {
+ const timestamp = Math.floor(Date.now());
- // Started a track or changed to no track
- if ((!this.props.current_track && nextProps.current_track) || (this.props.current_track && !nextProps.current_track)){
- this.setState({current_track: nextProps.current_track});
- }
+ // Save touch start details
+ this.start_time = timestamp;
+ this.start_position = {
+ x: e.touches[0].clientX,
+ };
- // Direct swap-out of a track (with no 'null' intermediate state)
- // This is precautionary and I've never been able to trigger it, but it's a good safety
- if (this.props.current_track && nextProps.current_track && this.props.current_track.uri !== nextProps.current_track.uri){
- this.setState({current_track: nextProps.current_track});
- }
+ return false;
+ }
- // Images have just loaded
- // A bit niggly to have to deeply check this...
- if (this.props.current_track && nextProps.current_track){
+ handleTouchEnd(e) {
+ const timestamp = Math.floor(Date.now());
+ const tap_distance_threshold = 10; // Max distance (px) between touchstart and touchend to qualify as a tap
+ const tap_time_threshold = 200; // Max time (ms) between touchstart and touchend to qualify as a tap
+ const end_position = {
+ x: e.changedTouches[0].clientX,
+ };
- if ((this.props.current_track.images && !nextProps.current_track.images) || (!this.props.current_track.images && nextProps.current_track.images)){
- this.setState({current_track: nextProps.current_track});
- }
- }
- }
+ // Too long between touchstart and touchend
+ if (this.start_time + tap_time_threshold < timestamp) {
+ return false;
+ }
- handleTouchStart(e){
- var timestamp = Math.floor(Date.now());
+ // Make sure there's enough distance between start and end before we handle
+ // this event as a 'tap'
+ if (this.start_position.x + tap_distance_threshold > end_position.x
+ && this.start_position.x - tap_distance_threshold < end_position.x) {
+ // Scroll to top (without smooth_scroll)
+ helpers.scrollTo(null, false);
+ this.props.history.push('/queue');
+ } else {
+ // Swipe to the left = previous track
+ if (this.start_position.x < end_position.x) {
+ this.setTransition('previous');
+ this.props.mopidyActions.previous();
- // Save touch start details
- this.start_time = timestamp;
- this.start_position = {
- x: e.touches[0].clientX
- }
+ // Swipe to the right = skip track
+ } else if (this.start_position.x > end_position.x) {
+ this.setTransition('next');
+ this.props.mopidyActions.next();
+ }
+ }
- return false;
- }
+ this.end_time = timestamp;
+ e.preventDefault();
+ }
- handleTouchEnd(e){
- var timestamp = Math.floor(Date.now());
- var tap_distance_threshold = 10; // Max distance (px) between touchstart and touchend to qualify as a tap
- var tap_time_threshold = 200; // Max time (ms) between touchstart and touchend to qualify as a tap
- var end_position = {
- x: e.changedTouches[0].clientX
- }
+ setTransition(direction) {
+ this.setState({
+ current_track: null,
+ transition_track: this.state.current_track,
+ transition_direction: direction,
+ });
- // Too long between touchstart and touchend
- if (this.start_time + tap_time_threshold < timestamp){
- return false;
- }
+ // Allow time for the animation to complete, then remove
+ // the transitioning track from state
+ setTimeout(() => {
+ this.setState({
+ transition_track: null,
+ transition_direction: null,
+ });
+ },
+ 250);
+ }
- // Make sure there's enough distance between start and end before we handle
- // this event as a 'tap'
- if (this.start_position.x + tap_distance_threshold > end_position.x &&
- this.start_position.x - tap_distance_threshold < end_position.x){
+ renderPlayButton() {
+ let button = ;
+ if (this.props.play_state == 'playing') {
+ button = ;
+ }
+ return button;
+ }
- // Scroll to top (without smooth_scroll)
- helpers.scrollTo(null, false);
- this.props.history.push('/queue');
- } else {
+ renderConsumeButton() {
+ let button = (
+
+ );
+ if (this.props.consume) {
+ button = (
+
+ );
+ }
+ return button;
+ }
- // Swipe to the left = previous track
- if (this.start_position.x < end_position.x){
- this.setTransition('previous');
- this.props.mopidyActions.previous();
+ renderRandomButton() {
+ let button = (
+
+ );
+ if (this.props.random) {
+ button = (
+
+ );
+ }
+ return button;
+ }
- // Swipe to the right = skip track
- } else if (this.start_position.x > end_position.x){
- this.setTransition('next');
- this.props.mopidyActions.next();
- }
- }
+ renderRepeatButton() {
+ let button = (
+
+ );
+ if (this.props.repeat) {
+ button = (
+
+ );
+ }
+ return button;
+ }
- this.end_time = timestamp;
- e.preventDefault();
- }
+ render() {
+ const { next_track, touch_enabled, time_position } = this.props;
+ const { current_track, expanded } = this.state;
- setTransition(direction){
- this.setState({
- current_track: null,
- transition_track: this.state.current_track,
- transition_direction: direction
- });
+ let images = false;
+ if (current_track && current_track.images) {
+ images = current_track.images;
+ }
- // Allow time for the animation to complete, then remove
- // the transitioning track from state
- setTimeout(() => {
- this.setState({
- transition_track: null,
- transition_direction: null
- });
- },
- 250
- );
- }
+ return (
+
+
+
+
+
- renderPlayButton(){
- var button =
- if (this.props.play_state == 'playing'){
- button =
- }
- return button;
- }
+ {next_track && next_track.images ?
+
+ { this.renderPlayButton() }
+
+
- render(){
- const { next_track, touch_enabled, time_position } = this.props;
- const { current_track, expanded } = this.state;
+
+
- var images = false
- if (current_track && current_track.images){
- images = current_track.images
- }
+
+ {this.renderConsumeButton()}
+ {this.renderRandomButton()}
+ {this.renderRepeatButton()}
+
- return (
-
+ );
+ }
}
-const mapStateToProps = (state, ownProps) => {
- return {
- snapcast_enabled: state.pusher.config.snapcast_enabled,
- http_streaming_enabled: state.core.http_streaming_enabled,
- http_streaming_volume: (state.core.http_streaming_volume ? state.core.http_streaming_volume : 50),
- http_streaming_mute: (state.core.http_streaming_mute ? state.core.http_streaming_mute : false),
- http_streaming_url: (state.core.http_streaming_url ? state.core.http_streaming_url : null),
- http_streaming_cachebuster: state.core.http_streaming_cachebuster,
- current_track: (state.core.current_track && state.core.tracks[state.core.current_track.uri] !== undefined ? state.core.tracks[state.core.current_track.uri] : null),
- next_track: (state.core.next_track_uri && state.core.tracks[state.core.next_track_uri] !== undefined ? state.core.tracks[state.core.next_track_uri] : null),
- radio_enabled: (state.ui.radio && state.ui.radio.enabled ? true : false),
- play_state: state.mopidy.play_state,
- time_position: state.mopidy.time_position,
- consume: state.mopidy.consume,
- repeat: state.mopidy.repeat,
- random: state.mopidy.random,
- volume: state.mopidy.volume,
- mute: state.mopidy.mute,
- sidebar_open: state.ui.sidebar_open,
- slim_mode: state.ui.slim_mode,
- touch_enabled: state.ui.playback_controls_touch_enabled
- }
-}
+const mapStateToProps = (state, ownProps) => ({
+ snapcast_enabled: state.pusher.config.snapcast_enabled,
+ http_streaming_enabled: state.core.http_streaming_enabled,
+ http_streaming_volume: (state.core.http_streaming_volume ? state.core.http_streaming_volume : 50),
+ http_streaming_mute: (state.core.http_streaming_mute ? state.core.http_streaming_mute : false),
+ http_streaming_url: (state.core.http_streaming_url ? state.core.http_streaming_url : null),
+ http_streaming_cachebuster: state.core.http_streaming_cachebuster,
+ current_track: (state.core.current_track && state.core.tracks[state.core.current_track.uri] !== undefined ? state.core.tracks[state.core.current_track.uri] : null),
+ next_track: (state.core.next_track_uri && state.core.tracks[state.core.next_track_uri] !== undefined ? state.core.tracks[state.core.next_track_uri] : null),
+ radio_enabled: (!!(state.ui.radio && state.ui.radio.enabled)),
+ play_state: state.mopidy.play_state,
+ time_position: state.mopidy.time_position,
+ consume: state.mopidy.consume,
+ repeat: state.mopidy.repeat,
+ random: state.mopidy.random,
+ volume: state.mopidy.volume,
+ mute: state.mopidy.mute,
+ sidebar_open: state.ui.sidebar_open,
+ slim_mode: state.ui.slim_mode,
+ touch_enabled: state.ui.playback_controls_touch_enabled,
+});
-const mapDispatchToProps = (dispatch) => {
- return {
- coreActions: bindActionCreators(coreActions, dispatch),
- uiActions: bindActionCreators(uiActions, dispatch),
- mopidyActions: bindActionCreators(mopidyActions, dispatch)
- }
-}
+const mapDispatchToProps = (dispatch) => ({
+ coreActions: bindActionCreators(coreActions, dispatch),
+ uiActions: bindActionCreators(uiActions, dispatch),
+ mopidyActions: bindActionCreators(mopidyActions, dispatch),
+});
-export default connect(mapStateToProps, mapDispatchToProps)(PlaybackControls)
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(PlaybackControls);
diff --git a/src/js/components/PlaylistGrid.js b/src/js/components/PlaylistGrid.js
index e73ef1f6..c38fb191 100755
--- a/src/js/components/PlaylistGrid.js
+++ b/src/js/components/PlaylistGrid.js
@@ -1,69 +1,61 @@
-import React from 'react'
-import { connect } from 'react-redux'
-import { createStore, bindActionCreators } from 'redux'
+import React from 'react';
+import { connect } from 'react-redux';
+import { createStore, bindActionCreators } from 'redux';
-import * as helpers from '../helpers'
-import * as uiActions from '../services/ui/actions'
-import GridItem from './GridItem'
+import * as helpers from '../helpers';
+import * as uiActions from '../services/ui/actions';
+import GridItem from './GridItem';
-class PlaylistGrid extends React.Component{
+class PlaylistGrid extends React.Component {
+ constructor(props) {
+ super(props);
+ }
- constructor(props){
- super(props);
- }
+ handleContextMenu(e, item) {
+ e.preventDefault();
+ const data = {
+ e,
+ context: 'playlist',
+ uris: [item.uri],
+ items: [item],
+ tracklist_uri: item.uri,
+ };
+ this.props.uiActions.showContextMenu(data);
+ }
- handleContextMenu(e,item){
- e.preventDefault()
- var data = {
- e: e,
- context: 'playlist',
- uris: [item.uri],
- items: [item],
- tracklist_uri: item.uri
- }
- this.props.uiActions.showContextMenu(data)
- }
+ render() {
+ if (!this.props.playlists) return null;
- render(){
- if (!this.props.playlists ) return null
+ let className = 'grid grid--playlists';
+ if (this.props.className) className += ` ${this.props.className}`;
+ if (this.props.single_row) className += ' grid--single-row';
+ if (this.props.mini) className += ' grid--mini';
- var className = "grid grid--playlists";
- if (this.props.className) className += ' '+this.props.className;
- if (this.props.single_row) className += ' grid--single-row';
- if (this.props.mini) className += ' grid--mini';
-
- return (
-
+
+ ) : null}
- renderRandomButton(){
- var button =
- if (this.props.random){
- button =
- }
- return button;
- }
+
+
+
+ {this.state.transition_track.name}
+
+
+
+ touch_enabled && this.handleTouchStart(e)}
+ onTouchEnd={(e) => touch_enabled && this.handleTouchEnd(e)}
+ tabIndex="-1"
+ >
+
+
- renderRepeatButton(){
- var button =
- if (this.props.repeat){
- button =
- }
- return button;
- }
+
+
+
+ {current_track ? current_track.name : -}
+
+
+ {current_track ?
+
+
+ this.props.mopidyActions.setMute(mute)}
+ />
+ this.props.mopidyActions.setVolume(percent)}
+ />
+
- {next_track && next_track.images ?
+
+
+
-
-
- { this.renderPlayButton() }
-
-
-
-
-
-
-
- {this.renderConsumeButton()}
- {this.renderRandomButton()}
- {this.renderRepeatButton()}
-
-
-
- this.props.mopidyActions.setMute(mute)}
- />
- this.props.mopidyActions.setVolume(percent)}
- />
-
-
-
-
-
-
-
-
- );
- }
+
-
: null}
-
-
-
-
- {this.state.transition_track.name}
-
-
-
- touch_enabled && this.handleTouchStart(e)}
- onTouchEnd={e => touch_enabled && this.handleTouchEnd(e)}
- tabIndex="-1">
-
-
+
-
-
- {current_track ? current_track.name : -}
-
-
- {current_track ?
-
- {
- this.props.playlists.map(playlist => {
- return (
- {this.props.history.push('/playlist/'+encodeURIComponent(playlist.uri))}}
- onContextMenu={e => this.handleContextMenu(e,playlist)}
- />
- )}
- )
+ return (
+
+ );
+ }
}
-const mapStateToProps = (state, ownProps) => {
- return {}
-}
+const mapStateToProps = (state, ownProps) => ({});
-const mapDispatchToProps = (dispatch) => {
- return {
- uiActions: bindActionCreators(uiActions, dispatch)
- }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(PlaylistGrid)
+const mapDispatchToProps = (dispatch) => ({
+ uiActions: bindActionCreators(uiActions, dispatch),
+});
+export default connect(mapStateToProps, mapDispatchToProps)(PlaylistGrid);
diff --git a/src/js/components/Popularity.js b/src/js/components/Popularity.js
index 73f3aa8c..c9328644 100755
--- a/src/js/components/Popularity.js
+++ b/src/js/components/Popularity.js
@@ -2,22 +2,23 @@
import React, { memo } from 'react';
export default memo((props) => {
- if (props.popularity === undefined || props.popularity === null){
- return null;
- }
+ if (props.popularity === undefined || props.popularity === null) {
+ return null;
+ }
- return (
-
-
- 10 ? " filled" : "")}>
- 30 ? " filled" : "")}>
- 50 ? " filled" : "")}>
- 70 ? " filled" : "")}>
- 90 ? " filled" : "")}>
-
-
- {props.popularity}% popularity
-
-
- );
-});
\ No newline at end of file
+ return (
+
+
+ 10 ? ' filled' : ''}`} />
+ 30 ? ' filled' : ''}`} />
+ 50 ? ' filled' : ''}`} />
+ 70 ? ' filled' : ''}`} />
+ 90 ? ' filled' : ''}`} />
+
+
+ {props.popularity}
+% popularity
+
+
+ );
+});
diff --git a/src/js/components/PusherConnectionList.js b/src/js/components/PusherConnectionList.js
index 32035de2..2ddcf166 100755
--- a/src/js/components/PusherConnectionList.js
+++ b/src/js/components/PusherConnectionList.js
@@ -1,82 +1,86 @@
-import React from 'react'
-import { connect } from 'react-redux'
-import { createStore, bindActionCreators } from 'redux'
+import React from 'react';
+import { connect } from 'react-redux';
+import { createStore, bindActionCreators } from 'redux';
-import * as pusherActions from '../services/pusher/actions'
+import * as pusherActions from '../services/pusher/actions';
-class PusherConnectionList extends React.Component{
+class PusherConnectionList extends React.Component {
+ constructor(props) {
+ super(props);
+ }
- constructor(props){
- super(props);
- }
+ componentDidMount() {
+ if (this.props.connected) {
+ this.props.pusherActions.getConnections();
+ }
+ }
- componentDidMount(){
- if (this.props.connected){
- this.props.pusherActions.getConnections();
- }
- }
+ componentWillReceiveProps(newProps) {
+ if (!this.props.connected && newProps.connected) {
+ this.props.pusherActions.getConnections();
+ }
+ }
- componentWillReceiveProps(newProps){
- if (!this.props.connected && newProps.connected){
- this.props.pusherActions.getConnections();
- }
- }
+ render() {
+ if (!this.props.connected) {
+ return
+ {
+ this.props.playlists.map((playlist) => (
+ { this.props.history.push(`/playlist/${encodeURIComponent(playlist.uri)}`); }}
+ onContextMenu={(e) => this.handleContextMenu(e, playlist)}
+ />
+ ))
}
-
- );
- }
+ Not connected
;
+ }
- render(){
- if (!this.props.connected){
- return Not connected
;
- }
+ const connections = [];
+ for (const connection_id in this.props.connections) {
+ if (this.props.connections.hasOwnProperty(connection_id)) {
+ connections.push(this.props.connections[connection_id]);
+ }
+ }
- var connections = [];
- for (var connection_id in this.props.connections){
- if (this.props.connections.hasOwnProperty(connection_id)){
- connections.push(this.props.connections[connection_id]);
- }
- }
+ if (connections.length <= 0) {
+ return No connections
;
+ }
- if (connections.length <= 0){
- return No connections
;
- }
+ return (
+
+ {
+ connections.map((connection) => {
+ let is_me = false;
+ if (connection.connection_id == this.props.connection_id) {
+ is_me = true;
+ }
- return (
-
+ );
+ }
}
-const mapStateToProps = (state, ownProps) => {
- return {
- connected: state.pusher.connected,
- connection_id: state.pusher.connection_id,
- connections: state.pusher.connections
- }
-}
+const mapStateToProps = (state, ownProps) => ({
+ connected: state.pusher.connected,
+ connection_id: state.pusher.connection_id,
+ connections: state.pusher.connections,
+});
-const mapDispatchToProps = (dispatch) => {
- return {
- pusherActions: bindActionCreators(pusherActions, dispatch)
- }
-}
+const mapDispatchToProps = (dispatch) => ({
+ pusherActions: bindActionCreators(pusherActions, dispatch),
+});
-export default connect(mapStateToProps, mapDispatchToProps)(PusherConnectionList)
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(PusherConnectionList);
diff --git a/src/js/components/RelatedArtists.js b/src/js/components/RelatedArtists.js
index 58a8a701..53151069 100755
--- a/src/js/components/RelatedArtists.js
+++ b/src/js/components/RelatedArtists.js
@@ -1,40 +1,38 @@
-import React, { memo } from 'react'
-import Thumbnail from './Thumbnail'
-import URILink from './URILink'
+import React, { memo } from 'react';
+import Thumbnail from './Thumbnail';
+import URILink from './URILink';
export default memo((props) => {
- if (!props.artists){
- return null;
- }
+ if (!props.artists) {
+ return null;
+ }
- return (
-
- {
- connections.map(connection => {
- var is_me = false;
- if (connection.connection_id == this.props.connection_id){
- is_me = true;
- }
-
- return (
-
- );
- }
+
-
- );
+ return (
+ { connection.username } {is_me ? (you) : null }
-
- {connection.ip}
- ({connection.connection_id})
-
-
+
+ );
})
}
-
+ { connection.username }
+ {' '}
+ {is_me ? (you) : null }
+
+
+ {connection.ip}
+
+ {' '}
+(
+ {connection.connection_id}
+)
+
+
+
- {
- props.artists.map((artist, index) => {
+ return (
+
+ );
+});
diff --git a/src/js/components/ResizeListener.js b/src/js/components/ResizeListener.js
index 9e8c2826..c2dcc653 100644
--- a/src/js/components/ResizeListener.js
+++ b/src/js/components/ResizeListener.js
@@ -1,20 +1,18 @@
export default (props) => {
- window.addEventListener("resize", handleWindowResize, false);
-
- const handleWindowResize = e => {
- var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+ window.addEventListener('resize', handleWindowResize, false);
- if (width <= 800){
- if (!props.slim_mode){
- props.uiActions.setSlimMode(true)
- }
- } else {
- if (props.slim_mode){
- props.uiActions.setSlimMode(false)
- }
- }
- }
-
- return null;
-}
\ No newline at end of file
+ const handleWindowResize = (e) => {
+ const width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+
+ if (width <= 800) {
+ if (!props.slim_mode) {
+ props.uiActions.setSlimMode(true);
+ }
+ } else if (props.slim_mode) {
+ props.uiActions.setSlimMode(false);
+ }
+ };
+
+ return null;
+};
diff --git a/src/js/components/Services.js b/src/js/components/Services.js
index 0fc0191e..12e51f3e 100755
--- a/src/js/components/Services.js
+++ b/src/js/components/Services.js
@@ -1,407 +1,430 @@
-import React from 'react'
-import { connect } from 'react-redux'
-import Link from './Link'
-import { bindActionCreators } from 'redux'
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import Link from './Link';
-import Thumbnail from './Thumbnail'
-import Icon from './Icon'
-import URILink from './URILink'
-import SpotifyAuthenticationFrame from '../components/Fields/SpotifyAuthenticationFrame'
-import LastfmAuthenticationFrame from '../components/Fields/LastfmAuthenticationFrame'
-import GeniusAuthenticationFrame from '../components/Fields/GeniusAuthenticationFrame'
-import Snapcast from '../components/Snapcast'
+import Thumbnail from './Thumbnail';
+import Icon from './Icon';
+import URILink from './URILink';
+import SpotifyAuthenticationFrame from './Fields/SpotifyAuthenticationFrame';
+import LastfmAuthenticationFrame from './Fields/LastfmAuthenticationFrame';
+import GeniusAuthenticationFrame from './Fields/GeniusAuthenticationFrame';
+import Snapcast from './Snapcast';
-import * as uiActions from '../services/ui/actions'
-import * as coreActions from '../services/core/actions'
-import * as mopidyActions from '../services/mopidy/actions'
-import * as pusherActions from '../services/pusher/actions'
-import * as spotifyActions from '../services/spotify/actions'
-import * as lastfmActions from '../services/lastfm/actions'
-import * as geniusActions from '../services/genius/actions'
+import * as uiActions from '../services/ui/actions';
+import * as coreActions from '../services/core/actions';
+import * as mopidyActions from '../services/mopidy/actions';
+import * as pusherActions from '../services/pusher/actions';
+import * as spotifyActions from '../services/spotify/actions';
+import * as lastfmActions from '../services/lastfm/actions';
+import * as geniusActions from '../services/genius/actions';
-class Services extends React.Component{
+class Services extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ country: this.props.spotify.country,
+ locale: this.props.spotify.locale,
+ input_in_focus: null,
+ };
+ }
- constructor(props){
- super(props);
- this.state = {
- country: this.props.spotify.country,
- locale: this.props.spotify.locale,
- input_in_focus: null
- }
- }
+ componentDidMount() {
+ if ((this.props.spotify.enabled || this.props.spotify.authorization) && (!this.props.spotify.me || this.props.core.users[this.props.spotify.me.id] === undefined)) {
+ this.props.spotifyActions.getMe();
+ }
+ if (this.props.lastfm.authorization && this.props.core.users[`lastfm:user:${this.props.lastfm.authorization.name}`] === undefined) {
+ this.props.lastfmActions.getMe();
+ }
+ if (this.props.genius.authorization && (!this.props.genius.me || this.props.core.users[`genius:user:${this.props.genius.me.id}`] === undefined)) {
+ this.props.geniusActions.getMe();
+ }
+ }
- componentDidMount(){
- if ((this.props.spotify.enabled || this.props.spotify.authorization) && (!this.props.spotify.me || this.props.core.users[this.props.spotify.me.id] === undefined)){
- this.props.spotifyActions.getMe();
- }
- if (this.props.lastfm.authorization && this.props.core.users["lastfm:user:"+this.props.lastfm.authorization.name] === undefined){
- this.props.lastfmActions.getMe();
- }
- if (this.props.genius.authorization && (!this.props.genius.me || this.props.core.users["genius:user:"+this.props.genius.me.id] === undefined)){
- this.props.geniusActions.getMe();
- }
- }
- componentWillReceiveProps(newProps){
- var changed = false
- var state = this.state
+ componentWillReceiveProps(newProps) {
+ let changed = false;
+ const { state } = this;
- if (newProps.spotify.country != this.state.country && this.state.input_in_focus != 'country'){
- state.country = newProps.spotify.country
- changed = true
- }
+ if (newProps.spotify.country != this.state.country && this.state.input_in_focus != 'country') {
+ state.country = newProps.spotify.country;
+ changed = true;
+ }
- if (newProps.spotify.locale != this.state.locale && this.state.input_in_focus != 'locale'){
- state.locale = newProps.spotify.locale
- changed = true
- }
+ if (newProps.spotify.locale != this.state.locale && this.state.input_in_focus != 'locale') {
+ state.locale = newProps.spotify.locale;
+ changed = true;
+ }
- if (changed){
- this.setState(state)
- }
- }
+ if (changed) {
+ this.setState(state);
+ }
+ }
- handleBlur(name, value){
- this.setState({input_in_focus: null})
- var data = {}
- data[name] = value
- this.props.coreActions.set(data)
- }
+ handleBlur(name, value) {
+ this.setState({ input_in_focus: null });
+ const data = {};
+ data[name] = value;
+ this.props.coreActions.set(data);
+ }
- renderSpotify(){
- var user_object = (this.props.spotify.me && this.props.core.users[this.props.spotify.me.uri] ? this.props.core.users[this.props.spotify.me.uri] : null);
- if (user_object){
- var user = (
-
+ {
+ props.artists.map((artist, index) => {
+ let { images } = artist;
+ if (Array.isArray(images)) {
+ images = images[0];
+ }
- var images = artist.images;
- if (Array.isArray(images)){
- images = images[0];
- }
-
- if (artist.uri){
- return (
-
-
- )
- } else {
- return (
-
-
+
+ );
+ }
+ return (
+
+
- );
-});
\ No newline at end of file
+
-
-
- );
- }
+ if (!this.props.mopidy.uri_schemes || !this.props.mopidy.uri_schemes.includes('spotify:')) {
+ not_installed = (
+ Mopidy-Spotify extension is not running - you will not be able to play any Spotify tracks
--
+
+
+ );
+ }
- return (
- + Mopidy-Spotify + {' '} +extension is not running - you will not be able to play any Spotify tracks +
++
- {not_installed}
-
-
+ return (
+
+ );
+ }
- renderLastfm(){
- var user_object = (this.props.lastfm.me ? this.props.core.users["lastfm:user:"+this.props.lastfm.me.name] : null);
- if (user_object){
- var user = (
-
-
+ {not_installed}
+
+
-
- );
- }
+
-
+ Current user
-
-
-
- {user}
-
-
+
- Current user
+
+
+
+ {user}
+
+
-
- Authorization
-
-
-
+
+ Authorization
+
+
+
- {this.props.lastfm.authorization ?
+ );
+ }
- renderGenius(){
- var user_object = (this.props.genius.me ? this.props.core.users[this.props.genius.me.uri] : null);
- if (user_object){
- var user = (
-
-
-
: null}
+ return (
+ Current user
-
-
-
- {user}
-
-
+ {this.props.lastfm.authorization ? (
+
- );
- }
+
+
+ ) : null}
- Current user
+
+
+
+ {user}
+
+
-
- Authorization
-
-
-
+
+ Authorization
+
+
+
- {this.props.genius.authorization ?
+ );
+ }
- renderIcecast(){
- return (
-
-
: null}
+ return (
+ Current user
-
-
-
- {user}
-
-
+ {this.props.genius.authorization ? (
+
- );
- }
+
+
+ ) : null}
- Current user
+
+
+
+ {user}
+
+
-
- Authorization
-
-
-
+
+ Authorization
+
+
+
-
+ );
+ }
- renderMenu(){
+ renderMenu() {
+ if (this.props.spotify.me && this.props.core.users[this.props.spotify.me.uri]) {
+ var spotify_icon =
-
+
+ Enable
-
-
+
- {service}
-
- );
- } else {
- return null;
- }
- }
+ if (service) {
+ return (
+
+ {service}
+
+ );
+ }
+ return null;
+ }
- render(){
- return (
-
- {this.renderMenu()}
- {this.renderService()}
-
- );
- }
+ render() {
+ return (
+
+ {this.renderMenu()}
+ {this.renderService()}
+
+ );
+ }
}
-const mapStateToProps = (state, ownProps) => {
- return state
-}
+const mapStateToProps = (state, ownProps) => state;
-const mapDispatchToProps = (dispatch) => {
- return {
- coreActions: bindActionCreators(coreActions, dispatch),
- uiActions: bindActionCreators(uiActions, dispatch),
- pusherActions: bindActionCreators(pusherActions, dispatch),
- mopidyActions: bindActionCreators(mopidyActions, dispatch),
- spotifyActions: bindActionCreators(spotifyActions, dispatch),
- lastfmActions: bindActionCreators(lastfmActions, dispatch),
- geniusActions: bindActionCreators(geniusActions, dispatch)
- }
-}
+const mapDispatchToProps = (dispatch) => ({
+ coreActions: bindActionCreators(coreActions, dispatch),
+ uiActions: bindActionCreators(uiActions, dispatch),
+ pusherActions: bindActionCreators(pusherActions, dispatch),
+ mopidyActions: bindActionCreators(mopidyActions, dispatch),
+ spotifyActions: bindActionCreators(spotifyActions, dispatch),
+ lastfmActions: bindActionCreators(lastfmActions, dispatch),
+ geniusActions: bindActionCreators(geniusActions, dispatch),
+});
-export default connect(mapStateToProps, mapDispatchToProps)(Services)
+export default connect(mapStateToProps, mapDispatchToProps)(Services);
diff --git a/src/js/components/Sidebar.js b/src/js/components/Sidebar.js
index 68509172..ba371999 100755
--- a/src/js/components/Sidebar.js
+++ b/src/js/components/Sidebar.js
@@ -12,113 +12,133 @@ import Thumbnail from './Thumbnail';
import * as uiActions from '../services/ui/actions';
import * as mopidyActions from '../services/mopidy/actions';
-class Sidebar extends React.Component{
+class Sidebar extends React.Component {
+ constructor(props) {
+ super(props);
+ }
- constructor(props){
- super(props);
- }
+ render() {
+ return (
+
- );
- }
+
+ );
+ }
}
-const mapStateToProps = (state, ownProps) => {
- return {
- mopidy_connected: state.mopidy.connected,
- pusher_connected: state.pusher.connected,
- spotify_enabled: state.spotify.enabled,
- spotify_authorized: state.spotify.authorization,
- update_available: (state.pusher.version && state.pusher.version.update_available ? state.pusher.version.update_available : false),
- test_mode: (state.ui.test_mode ? state.ui.test_mode : false),
- dragger: state.ui.dragger
- }
-}
+const mapStateToProps = (state, ownProps) => ({
+ mopidy_connected: state.mopidy.connected,
+ pusher_connected: state.pusher.connected,
+ spotify_enabled: state.spotify.enabled,
+ spotify_authorized: state.spotify.authorization,
+ update_available: (state.pusher.version && state.pusher.version.update_available ? state.pusher.version.update_available : false),
+ test_mode: (state.ui.test_mode ? state.ui.test_mode : false),
+ dragger: state.ui.dragger,
+});
-const mapDispatchToProps = (dispatch) => {
- return {
- uiActions: bindActionCreators(uiActions, dispatch),
- mopidyActions: bindActionCreators(mopidyActions, dispatch)
- }
-}
+const mapDispatchToProps = (dispatch) => ({
+ uiActions: bindActionCreators(uiActions, dispatch),
+ mopidyActions: bindActionCreators(mopidyActions, dispatch),
+});
-export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Sidebar));
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Sidebar));
diff --git a/src/js/components/Snapcast.js b/src/js/components/Snapcast.js
index ee1e1888..4887e843 100755
--- a/src/js/components/Snapcast.js
+++ b/src/js/components/Snapcast.js
@@ -17,321 +17,325 @@ import * as uiActions from '../services/ui/actions';
import * as pusherActions from '../services/pusher/actions';
import * as snapcastActions from '../services/snapcast/actions';
-class Snapcast extends React.Component{
+class Snapcast extends React.Component {
+ constructor(props) {
+ super(props);
- constructor(props){
- super(props);
+ this.state = {
+ clients_expanded: [],
+ };
+ }
- this.state = {
- clients_expanded: []
- }
- }
+ componentDidMount() {
+ if (this.props.pusher_connected && this.props.snapcast_enabled) {
+ this.props.snapcastActions.getServer();
+ }
+ }
- componentDidMount(){
- if (this.props.pusher_connected && this.props.snapcast_enabled){
- this.props.snapcastActions.getServer();
- }
- }
+ componentWillReceiveProps(newProps) {
+ // Just connected
+ if (newProps.snapcast_enabled && !this.props.pusher_connected && newProps.pusher_connected) {
+ this.props.snapcastActions.getServer();
- componentWillReceiveProps(newProps){
+ // Just enabled
+ // This is the more probable scenario as we don't know if we're enabled until pusher connects
+ // and then gets the config from the server
+ } else if (!this.props.snapcast_enabled && newProps.snapcast_enabled && newProps.pusher_connected) {
+ this.props.snapcastActions.getServer();
+ }
+ }
- // Just connected
- if (newProps.snapcast_enabled && !this.props.pusher_connected && newProps.pusher_connected){
- this.props.snapcastActions.getServer();
+ toggleClientExpanded(client_id) {
+ const { clients_expanded } = this.state;
+ const index = clients_expanded.indexOf(client_id);
- // Just enabled
- // This is the more probable scenario as we don't know if we're enabled until pusher connects
- // and then gets the config from the server
- } else if (!this.props.snapcast_enabled && newProps.snapcast_enabled && newProps.pusher_connected){
- this.props.snapcastActions.getServer();
- }
- }
+ if (index >= 0) {
+ clients_expanded.splice(index, 1);
+ } else {
+ clients_expanded.push(client_id);
+ }
- toggleClientExpanded(client_id){
- var clients_expanded = this.state.clients_expanded;
- var index = clients_expanded.indexOf(client_id);
+ this.setState({ clients_expanded });
+ }
- if (index >= 0){
- clients_expanded.splice(index, 1);
- } else {
- clients_expanded.push(client_id);
- }
+ renderClientsList(group, groups) {
+ if (!this.props.show_disconnected_clients && group.clients) {
+ var clients = helpers.applyFilter('connected', true, group.clients);
+ } else {
+ var { clients } = group;
+ }
- this.setState({clients_expanded: clients_expanded});
- }
-
- renderClientsList(group, groups){
-
- if (!this.props.show_disconnected_clients && group.clients){
- var clients = helpers.applyFilter('connected', true, group.clients);
- } else {
- var clients = group.clients;
- }
-
- if (!clients || clients.length <= 0){
- return (
-
+ if (!clients || clients.length <= 0) {
+ return (
+
+ );
+ }
- return (
-
No clients
-
- );
- }
+
- {
- clients.map(client => {
- var class_name = "list__item list__item--no-interaction snapcast__client";
- if (client.connected){
- class_name += " snapcast__client--connected";
- } else {
- class_name += " snapcast__client--disconnected";
- }
+ return (
+
+ );
+ }
- render(){
- if (!this.props.snapcast_enabled){
- return (
-
+ {
+ clients.map((client) => {
+ let class_name = 'list__item list__item--no-interaction snapcast__client';
+ if (client.connected) {
+ class_name += ' snapcast__client--connected';
+ } else {
+ class_name += ' snapcast__client--disconnected';
+ }
- if (this.state.clients_expanded.includes(client.id)){
- return (
-
- );
- }
+
-
+ );
+ }
+ return (
+ this.toggleClientExpanded(client.id)}>
- {client.name}
-
-
- {!client.connected ?
-
-
+
+
+ );
})
}
- this.toggleClientExpanded(client.id)}>
+ {client.name}
+
+
+ {!client.connected ?
+ To enable Snapcast, edit your mopidy.conf file
+To enable Snapcast, edit your
+ mopidy.conf
+ {' '}
+file
+
+ return (
+
+ );
+ }
}
-const mapStateToProps = (state, ownProps) => {
- return {
- snapcast_enabled: state.pusher.config.snapcast_enabled,
- pusher_connected: state.pusher.connected,
- show_disconnected_clients: (state.ui.snapcast_show_disconnected_clients !== undefined ? state.ui.snapcast_show_disconnected_clients : false),
- streams: (state.snapcast.streams ? state.snapcast.streams : null),
- groups: (state.snapcast.groups ? state.snapcast.groups : null),
- clients: (state.snapcast.clients ? state.snapcast.clients : null)
- }
-}
+const mapStateToProps = (state, ownProps) => ({
+ snapcast_enabled: state.pusher.config.snapcast_enabled,
+ pusher_connected: state.pusher.connected,
+ show_disconnected_clients: (state.ui.snapcast_show_disconnected_clients !== undefined ? state.ui.snapcast_show_disconnected_clients : false),
+ streams: (state.snapcast.streams ? state.snapcast.streams : null),
+ groups: (state.snapcast.groups ? state.snapcast.groups : null),
+ clients: (state.snapcast.clients ? state.snapcast.clients : null),
+});
-const mapDispatchToProps = (dispatch) => {
- return {
- coreActions: bindActionCreators(coreActions, dispatch),
- uiActions: bindActionCreators(uiActions, dispatch),
- snapcastActions: bindActionCreators(snapcastActions, dispatch),
- pusherActions: bindActionCreators(pusherActions, dispatch)
- }
-}
+const mapDispatchToProps = (dispatch) => ({
+ coreActions: bindActionCreators(coreActions, dispatch),
+ uiActions: bindActionCreators(uiActions, dispatch),
+ snapcastActions: bindActionCreators(snapcastActions, dispatch),
+ pusherActions: bindActionCreators(pusherActions, dispatch),
+});
-export default connect(mapStateToProps, mapDispatchToProps)(Snapcast)
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(Snapcast);
diff --git a/src/js/components/Thumbnail.js b/src/js/components/Thumbnail.js
index b8195460..57f0b3ab 100755
--- a/src/js/components/Thumbnail.js
+++ b/src/js/components/Thumbnail.js
@@ -3,62 +3,60 @@ import React, { memo } from 'react';
import Link from './Link';
import Icon from './Icon';
-export default memo((props) => {
+export default memo((props) => {
+ const mapImageSizes = () => {
+ // Single image
+ if (props.image) {
+ return props.image;
- const mapImageSizes = () => {
-
- // Single image
- if (props.image){
- return props.image;
-
- // Multiple images
- } else if (props.images){
- var images = props.images;
-
- // An array of image objects (eg Artists), so just pick the first one
- if (Array.isArray(images) && images.length > 0){
- images = images[0];
- }
-
- // Default to medium-sized image, but accept size property as override
- var size = 'medium';
- if (props.size){
- size = props.size;
- }
-
- // Return the requested size
- if (images[size]){
- return images[size];
- }
- }
-
- // No images
- return null;
- }
+ // Multiple images
+ } if (props.images) {
+ let { images } = props;
- var image = mapImageSizes();
- var class_name = 'thumbnail thumbnail--loaded';
+ // An array of image objects (eg Artists), so just pick the first one
+ if (Array.isArray(images) && images.length > 0) {
+ images = images[0];
+ }
- if (props.size){
- class_name += ' thumbnail--'+props.size;
- }
- if (props.circle){
- class_name += ' thumbnail--circle';
- }
- if (props.className){
- class_name += ' '+props.className;
- }
-
- var zoom_icon = null;
- if (props.canZoom && image){
- zoom_icon =
-
+
-
-
+
+
+
+
+
+
Display
-
-
-
+
+
-
-
- {
- groups.map(group => {
+
- );
- }
+
+ {
+ groups.map((group) => {
+ group = helpers.collate(group, { clients: this.props.clients });
- group = helpers.collate(group, {clients: this.props.clients});
+ // Average our clients' volume for an overall group volume
+ let group_volume = 0;
+ for (let i = 0; i < group.clients.length; i++) {
+ const client = group.clients[i];
+ group_volume += client.volume;
+ }
+ group_volume /= group.clients.length;
- // Average our clients' volume for an overall group volume
- var group_volume = 0;
- for (var i = 0; i < group.clients.length; i++){
- var client = group.clients[i];
- group_volume += client.volume;
- }
- group_volume = group_volume / group.clients.length;
-
- return (
-
-
-
+ );
})
}
-
-
+
+ return (
+
+
+
- );
+
+
-
Name
-
-
-
-
- {group.name}
- ({group.id})
-
-
-
+
+
+
+
+
+ {group.name}
+ {' '}
+
+
+(
+ {group.id}
+)
+
+
+
+
-
Stream
-
-
-
+
+
-
-
-
+
+
+
+
+
-
Volume
-
-
- this.props.snapcastActions.setGroupMute(group.id, mute)}
- />
- this.props.snapcastActions.setGroupVolume(group.id, percent, old_percent)}
- />
-
-
-
+
+
+
+ this.props.snapcastActions.setGroupMute(group.id, mute)}
+ />
+ this.props.snapcastActions.setGroupVolume(group.id, percent, old_percent)}
+ />
+
+
+
-
Clients
-
-
- {this.renderClientsList(group, groups)}
-
-
+ {this.renderClientsList(group, groups)}
+
+
-
- {props.glow && image && }
- {zoom_icon}
-
- );
-});
\ No newline at end of file
+ // Return the requested size
+ if (images[size]) {
+ return images[size];
+ }
+ }
+
+ // No images
+ return null;
+ };
+
+ const image = mapImageSizes();
+ let class_name = 'thumbnail thumbnail--loaded';
+
+ if (props.size) {
+ class_name += ` thumbnail--${props.size}`;
+ }
+ if (props.circle) {
+ class_name += ' thumbnail--circle';
+ }
+ if (props.className) {
+ class_name += ` ${props.className}`;
+ }
+
+ let zoom_icon = null;
+ if (props.canZoom && image) {
+ zoom_icon =
+
+ {props.glow && image && }
+ {zoom_icon}
+
+ );
+});
diff --git a/src/js/components/Track.js b/src/js/components/Track.js
index 6468d3a4..9496af7d 100755
--- a/src/js/components/Track.js
+++ b/src/js/components/Track.js
@@ -1,316 +1,325 @@
-import React from 'react'
-import Link from './Link'
+import React from 'react';
+import Link from './Link';
-import Icon from './Icon'
-import ArtistSentence from './ArtistSentence'
-import Dater from './Dater'
-import URILink from './URILink'
-import ContextMenuTrigger from './ContextMenuTrigger'
-import Popularity from './Popularity'
-import ErrorBoundary from './ErrorBoundary'
+import Icon from './Icon';
+import ArtistSentence from './ArtistSentence';
+import Dater from './Dater';
+import URILink from './URILink';
+import ContextMenuTrigger from './ContextMenuTrigger';
+import Popularity from './Popularity';
+import ErrorBoundary from './ErrorBoundary';
-import * as helpers from '../helpers'
+import * as helpers from '../helpers';
-export default class Track extends React.Component{
+export default class Track extends React.Component {
+ constructor(props) {
+ super(props);
- constructor(props){
- super(props)
+ this.state = {
+ hover: false,
+ };
- this.state = {
- hover: false
- }
+ this.start_time = 0;
+ this.end_time = 0;
+ this.start_position = false;
+ }
- this.start_time = 0;
- this.end_time = 0;
- this.start_position = false
- }
+ handleMouseEnter(e) {
+ this.setState({ hover: true });
+ }
- handleMouseEnter(e){
- this.setState({hover: true});
- }
+ handleMouseLeave(e) {
+ this.setState({ hover: false });
+ }
- handleMouseLeave(e){
- this.setState({hover: false});
- }
+ handleMouseDown(e) {
+ const target = $(e.target);
- handleMouseDown(e){
- var target = $(e.target);
+ // Clicked a nested link (ie Artist name), so no dragging required
+ if (target.is('a')) {
+ return false;
+ }
- // Clicked a nested link (ie Artist name), so no dragging required
- if (target.is('a')){
- return false;
- }
+ // Only listen for left mouse clicks
+ if (e.button === 0) {
+ this.start_position = {
+ x: e.pageX,
+ y: e.pageY,
+ };
- // Only listen for left mouse clicks
- if (e.button === 0){
- this.start_position = {
- x: e.pageX,
- y: e.pageY
- }
+ // Not left click, then ensure no dragging
+ } else {
+ this.start_position = false;
+ }
+ }
- // Not left click, then ensure no dragging
- } else {
- this.start_position = false
- }
- }
+ handleMouseMove(e) {
+ const target = $(e.target);
- handleMouseMove(e){
- var target = $(e.target);
+ // No drag handling means NO
+ if (this.props.handleDrag === undefined) {
+ return false;
+ }
- // No drag handling means NO
- if (this.props.handleDrag === undefined){
- return false
- }
+ if (this.start_position) {
+ const start_x = this.start_position.x;
+ const start_y = this.start_position.y;
+ const threshold = 5;
- if (this.start_position){
- let start_x = this.start_position.x
- let start_y = this.start_position.y
- let threshold = 5
+ // Have we dragged outside of our threshold zone?
+ if (e.pageX > start_x + threshold || e.pageX < start_x - threshold || e.pageY > start_y + threshold || e.pageY < start_y - threshold) {
+ // Handover to parent for dragging. We can unset all our behaviour now.
+ this.props.handleDrag(e);
+ this.start_position = false;
+ }
+ }
+ }
- // Have we dragged outside of our threshold zone?
- if (e.pageX > start_x + threshold || e.pageX < start_x - threshold || e.pageY > start_y + threshold || e.pageY < start_y - threshold){
+ handleMouseUp(e) {
+ const target = $(e.target);
- // Handover to parent for dragging. We can unset all our behaviour now.
- this.props.handleDrag(e)
- this.start_position = false
- }
- }
- }
+ // Only listen for left clicks
+ if (e.button === 0) {
+ if (this.props.dragger) {
+ e.preventDefault();
- handleMouseUp(e){
- var target = $(e.target);
+ if (this.props.handleDrop !== undefined) {
+ this.props.handleDrop(e);
+ }
+ } else if (!target.is('a') && target.closest('a').length <= 0) {
+ this.props.handleClick(e);
+ this.start_position = false;
+ }
- // Only listen for left clicks
- if (e.button === 0){
- if (this.props.dragger){
- e.preventDefault()
+ // Not left click, then ensure no dragging
+ } else {
+ this.start_position = false;
+ return false;
+ }
+ }
- if (this.props.handleDrop !== undefined){
- this.props.handleDrop(e);
- }
- } else {
- if (!target.is('a') && target.closest('a').length <= 0){
- this.props.handleClick(e);
- this.start_position = false;
- }
- }
+ handleDoubleClick(e) {
+ this.props.handleDoubleClick(e);
+ }
- // Not left click, then ensure no dragging
- } else {
- this.start_position = false;
- return false;
- }
- }
+ handleTouchStart(e) {
+ const target = $(e.target);
+ const timestamp = Math.floor(Date.now());
- handleDoubleClick(e){
- this.props.handleDoubleClick(e);
- }
+ // Touch-drag zone
+ if (target.hasClass('drag-zone')) {
+ this.props.handleTouchDrag(e);
+ e.preventDefault();
+ }
- handleTouchStart(e){
- var target = $(e.target);
- var timestamp = Math.floor(Date.now());
+ // Save touch start details
+ this.start_time = timestamp;
+ this.start_position = {
+ x: e.touches[0].clientX,
+ y: e.touches[0].clientY,
+ };
- // Touch-drag zone
- if (target.hasClass('drag-zone')){
- this.props.handleTouchDrag(e);
- e.preventDefault();
- }
+ return false;
+ }
- // Save touch start details
- this.start_time = timestamp;
- this.start_position = {
- x: e.touches[0].clientX,
- y: e.touches[0].clientY
- }
+ handleTouchEnd(e) {
+ const target = $(e.target);
+ const timestamp = Math.floor(Date.now());
+ const tap_distance_threshold = 10; // Max distance (px) between touchstart and touchend to qualify as a tap
+ const tap_time_threshold = 200; // Max time (ms) between touchstart and touchend to qualify as a tap
+ const end_position = {
+ x: e.changedTouches[0].clientX,
+ y: e.changedTouches[0].clientY,
+ };
- return false;
- }
+ // Too long between touchstart and touchend
+ if (this.start_time + tap_time_threshold < timestamp) {
+ return false;
+ }
- handleTouchEnd(e){
- var target = $(e.target);
- var timestamp = Math.floor(Date.now());
- var tap_distance_threshold = 10; // Max distance (px) between touchstart and touchend to qualify as a tap
- var tap_time_threshold = 200; // Max time (ms) between touchstart and touchend to qualify as a tap
- var end_position = {
- x: e.changedTouches[0].clientX,
- y: e.changedTouches[0].clientY
- }
+ // Make sure there's enough distance between start and end before we handle
+ // this event as a 'tap'
+ if (this.start_position.x + tap_distance_threshold > end_position.x
+ && this.start_position.x - tap_distance_threshold < end_position.x
+ && this.start_position.y + tap_distance_threshold > end_position.y
+ && this.start_position.y - tap_distance_threshold < end_position.y) {
+ // Clicked a nested link (ie Artist name), so no dragging required
+ if (!target.is('a')) {
+ e.preventDefault();
+ }
- // Too long between touchstart and touchend
- if (this.start_time + tap_time_threshold < timestamp){
- return false;
- }
+ // Context trigger
+ if (target.hasClass('touch-contextable')) {
+ // Update our selection. By not passing touch = true selection will work like a regular click
+ // this.props.handleSelection(e);
+ this.props.handleContextMenu(e);
+ return false;
+ }
- // Make sure there's enough distance between start and end before we handle
- // this event as a 'tap'
- if (this.start_position.x + tap_distance_threshold > end_position.x &&
- this.start_position.x - tap_distance_threshold < end_position.x &&
- this.start_position.y + tap_distance_threshold > end_position.y &&
- this.start_position.y - tap_distance_threshold < end_position.y){
+ // We received a touchend within 300ms ago, so handle as double-tap
+ if ((timestamp - this.end_time) > 0 && (timestamp - this.end_time) <= 300) {
+ this.props.handleDoubleTap(e);
+ e.preventDefault();
+ return false;
+ }
- // Clicked a nested link (ie Artist name), so no dragging required
- if (!target.is('a')){
- e.preventDefault();
- }
+ this.props.handleTap(e);
+ }
- // Context trigger
- if (target.hasClass('touch-contextable')){
+ this.end_time = timestamp;
+ }
- // Update our selection. By not passing touch = true selection will work like a regular click
- //this.props.handleSelection(e);
- this.props.handleContextMenu(e);
- return false;
- }
+ render() {
+ if (!this.props.track) {
+ return null;
+ }
- // We received a touchend within 300ms ago, so handle as double-tap
- if ((timestamp - this.end_time) > 0 && (timestamp - this.end_time) <= 300){
- this.props.handleDoubleTap(e);
- e.preventDefault();
- return false;
- }
+ const { track } = this.props;
+ let className = 'list__item list__item--track mouse-draggable mouse-selectable mouse-contextable';
+ const track_details = [];
+ const track_actions = [];
- this.props.handleTap(e);
- }
+ if (track.artists) {
+ track_details.push(
+
+ {track.played_at ? (
+
+
+ );
+ } else if (this.props.track_context == 'queue') {
+ if (track.added_from && track.added_by) {
+ const type = (track.added_from ? helpers.uriType(track.added_from) : null);
- if (track.artists){
- track_details.push(
-
- {track.played_at ?
- )
+ var track_middle_column = (
+
+
+ {track.added_by}
+ {' '}
+
+
+from
+ {link}
+
+
+ );
+ } else if (track.added_by) {
+ var track_middle_column = (
+
+ {track.added_by}
+
+ );
+ }
+ }
- } else if (this.props.track_context == 'queue'){
- if (track.added_from && track.added_by){
- var type = (track.added_from ? helpers.uriType(track.added_from) : null);
+ // If we're touchable, and can sort this tracklist
+ let drag_zone = null;
+ if (helpers.isTouchDevice() && this.props.can_sort) {
+ className += ' list__item--has-drag-zone';
- switch (type){
- case "discover":
- var link =
- {track.added_by}
- from {link}
-
- );
-
- } else if (track.added_by){
- var track_middle_column = (
-
- {track.added_by}
-
- );
- }
- }
-
- // If we're touchable, and can sort this tracklist
- var drag_zone = null;
- if (helpers.isTouchDevice() && this.props.can_sort){
- className += " list__item--has-drag-zone"
-
- drag_zone = (
-
- this.handleMouseEnter(e)}
- onMouseLeave={e => this.handleMouseLeave(e)}
- onMouseDown={e => this.handleMouseDown(e)}
- onMouseUp={e => this.handleMouseUp(e)}
- onMouseMove={e => this.handleMouseMove(e)}
- onDoubleClick={e => this.handleDoubleClick(e)}
- onContextMenu={e => this.props.handleContextMenu(e)}
- onTouchStart={e => this.handleTouchStart(e)}
- onTouchEnd={e => this.handleTouchEnd(e)}>
-
-
-
- {track_middle_column ?
- {track.name ? track.name : {track.uri}}
- {track.explicit ? EXPLICIT : null}
- {track.playing ?
- {track_details ? -
- {track_details}
-
{track_middle_column}
: null}
-
- {drag_zone}
-
- {track.duration ? this.props.handleContextMenu(e)} />
-
- this.handleMouseEnter(e)}
+ onMouseLeave={(e) => this.handleMouseLeave(e)}
+ onMouseDown={(e) => this.handleMouseDown(e)}
+ onMouseUp={(e) => this.handleMouseUp(e)}
+ onMouseMove={(e) => this.handleMouseMove(e)}
+ onDoubleClick={(e) => this.handleDoubleClick(e)}
+ onContextMenu={(e) => this.props.handleContextMenu(e)}
+ onTouchStart={(e) => this.handleTouchStart(e)}
+ onTouchEnd={(e) => this.handleTouchEnd(e)}
+ >
+
+
+
+ {track_middle_column ?
+ {track.name ? track.name : {track.uri}}
+ {track.explicit ? EXPLICIT : null}
+ {track.playing ?
+ {track_details ? (
+ -
+ {track_details}
+
{track_middle_column}
: null}
+
+ {drag_zone}
+
+ {track.duration ? this.props.handleContextMenu(e)} />
+
+
- {
+ return (
+
+ );
+ }
}
-const mapStateToProps = (state, ownProps) => {
- return {
- play_state: state.mopidy.play_state,
- slim_mode: state.ui.slim_mode,
- selected_tracks: state.ui.selected_tracks,
- dragger: state.ui.dragger,
- current_track: state.core.current_track,
- context_menu: state.ui.context_menu
- }
-}
+const mapStateToProps = (state, ownProps) => ({
+ play_state: state.mopidy.play_state,
+ slim_mode: state.ui.slim_mode,
+ selected_tracks: state.ui.selected_tracks,
+ dragger: state.ui.dragger,
+ current_track: state.core.current_track,
+ context_menu: state.ui.context_menu,
+});
-const mapDispatchToProps = (dispatch) => {
- return {
- mopidyActions: bindActionCreators(mopidyActions, dispatch),
- uiActions: bindActionCreators(uiActions, dispatch)
- }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(TrackList)
+const mapDispatchToProps = (dispatch) => ({
+ mopidyActions: bindActionCreators(mopidyActions, dispatch),
+ uiActions: bindActionCreators(uiActions, dispatch),
+});
+export default connect(mapStateToProps, mapDispatchToProps)(TrackList);
diff --git a/src/js/components/URILink.js b/src/js/components/URILink.js
index 6d2e1435..f6075036 100755
--- a/src/js/components/URILink.js
+++ b/src/js/components/URILink.js
@@ -2,66 +2,65 @@
import React, { memo } from 'react';
import Link from './Link';
-export default memo((props) => {
+export default memo((props) => {
+ let to = null;
+ let { uri } = props;
+ if (!props.unencoded) {
+ uri = encodeURIComponent(uri);
+ }
- var to = null;
- var uri = props.uri;
- if (!props.unencoded){
- uri = encodeURIComponent(uri);
- }
+ switch (props.type) {
+ case 'playlist':
+ to = `/playlist/${uri}`;
+ break;
- switch (props.type){
- case 'playlist':
- to = '/playlist/'+uri;
- break;
-
- case 'artist':
- to = '/artist/'+uri;
- break;
+ case 'artist':
+ to = `/artist/${uri}`;
+ break;
- case 'album':
- to = '/album/'+uri;
- break;
+ case 'album':
+ to = `/album/${uri}`;
+ break;
- case 'track':
- to = '/track/'+uri;
- break;
+ case 'track':
+ to = `/track/${uri}`;
+ break;
- case 'user':
- to = '/user/'+uri;
- break;
+ case 'user':
+ to = `/user/${uri}`;
+ break;
- case 'browse':
- to = '/library/browse/'+uri;
- break;
+ case 'browse':
+ to = `/library/browse/${uri}`;
+ break;
- case 'recommendations':
- to = '/discover/recommendations/'+uri;
- break;
+ case 'recommendations':
+ to = `/discover/recommendations/${uri}`;
+ break;
- case 'search':
- var exploded = uri.split('%3A');
- to = '/search/'+exploded[1]+'/'+exploded[2];
- break;
+ case 'search':
+ var exploded = uri.split('%3A');
+ to = `/search/${exploded[1]}/${exploded[2]}`;
+ break;
- default:
- to = null;
- }
+ default:
+ to = null;
+ }
- if (uri){
- return (
- (props.handleContextMenu ? props.handleContextMenu(e) : null)}>
- {props.children}
-
- );
- } else {
- return (
-
- {props.children}
-
- );
- }
-});
\ No newline at end of file
+ if (uri) {
+ return (
+ (props.handleContextMenu ? props.handleContextMenu(e) : null)}
+ >
+ {props.children}
+
+ );
+ }
+ return (
+
+ {props.children}
+
+ );
+});
diff --git a/src/js/helpers.js b/src/js/helpers.js
index d780835a..3262f54e 100755
--- a/src/js/helpers.js
+++ b/src/js/helpers.js
@@ -1,66 +1,66 @@
-
-export let isTouchDevice = function(){
- return 'ontouchstart' in document.documentElement
-}
+export const isTouchDevice = function () {
+ return 'ontouchstart' in document.documentElement;
+};
/**
* Returns a function, that, as long as it continues to be invoked, will not
* be triggered. The function will be called after it stops being called for
* N milliseconds. If `immediate` is passed, trigger the function on the
* leading edge, instead of the trailing.
- **/
-export let debounce = function(fn, wait, immediate){
- var timeout;
- return function(){
- var context = this, args = arguments;
+ * */
+export const debounce = function (fn, wait, immediate) {
+ let timeout;
+ return function () {
+ const context = this; const
+ args = arguments;
- var later = function(){
- timeout = null;
- if (!immediate){
- fn.apply(context, args);
- }
- };
+ const later = function () {
+ timeout = null;
+ if (!immediate) {
+ fn.apply(context, args);
+ }
+ };
- var callNow = immediate && !timeout;
- clearTimeout(timeout);
- timeout = setTimeout(later, wait);
+ const callNow = immediate && !timeout;
+ clearTimeout(timeout);
+ timeout = setTimeout(later, wait);
- if (callNow){
- fn.apply(context, args);
- }
- };
+ if (callNow) {
+ fn.apply(context, args);
+ }
+ };
};
-export let throttle = function(fn, delay){
- let lastCall = 0;
- return function (...args){
- const now = (new Date).getTime();
- if (now - lastCall < delay) {
- return;
- }
- lastCall = now;
- return fn(...args);
- }
-}
+export const throttle = function (fn, delay) {
+ let lastCall = 0;
+ return function (...args) {
+ const now = (new Date()).getTime();
+ if (now - lastCall < delay) {
+ return;
+ }
+ lastCall = now;
+ return fn(...args);
+ };
+};
/**
* Storage handler
* All localStorage tasks are handled below. This means we can detect for localStorage issues in one place
- **/
+ * */
-var storage = (function() {
- var uid = new Date;
- var storage;
- var result;
- try {
- (storage = window.localStorage).setItem(uid, uid);
- result = storage.getItem(uid) == uid;
- storage.removeItem(uid);
- return result && storage;
- } catch (exception) {}
+const storage = (function () {
+ const uid = new Date();
+ let storage;
+ let result;
+ try {
+ (storage = window.localStorage).setItem(uid, uid);
+ result = storage.getItem(uid) == uid;
+ storage.removeItem(uid);
+ return result && storage;
+ } catch (exception) {}
}());
/**
@@ -68,21 +68,18 @@ var storage = (function() {
*
* @param key = string
* @param default_value = mixed (optional, if localStorage key doesn't exist, return this)
- **/
-export let getStorage = function(key, default_value = {}){
- if (storage){
- var value = storage.getItem(key);
- if (value){
- return JSON.parse(value);
- } else {
- return default_value;
- }
-
- } else {
- console.warn("localStorage not available. Using default value for '"+key+"'.");
- return default_value;
- }
-}
+ * */
+export const getStorage = function (key, default_value = {}) {
+ if (storage) {
+ const value = storage.getItem(key);
+ if (value) {
+ return JSON.parse(value);
+ }
+ return default_value;
+ }
+ console.warn(`localStorage not available. Using default value for '${key}'.`);
+ return default_value;
+};
/**
* Set a storage value
@@ -90,30 +87,28 @@ export let getStorage = function(key, default_value = {}){
* @param key = string
* @param value = object
* @param replace = boolean (optional, completely replace our local value rather than merging it)
- **/
-export let setStorage = function(key, value, replace = false){
- if (storage){
- var stored_value = storage.getItem(key);
+ * */
+export const setStorage = function (key, value, replace = false) {
+ if (storage) {
+ const stored_value = storage.getItem(key);
- // We have nothing to merge with, or we want to completely replace previous value
- if (!stored_value || replace){
- var new_value = value;
+ // We have nothing to merge with, or we want to completely replace previous value
+ if (!stored_value || replace) {
+ var new_value = value;
- // Merge new value with existing
- } else {
- var new_value = Object.assign(
- {},
- JSON.parse(stored_value),
- value
- );
- }
- storage.setItem(key, JSON.stringify(new_value));
- return;
- } else {
- console.warn("localStorage not available. '"+key+"'' will not perist when you close your browser.");
- return;
- }
-}
+ // Merge new value with existing
+ } else {
+ var new_value = {
+
+ ...JSON.parse(stored_value),
+ ...value,
+ };
+ }
+ storage.setItem(key, JSON.stringify(new_value));
+ } else {
+ console.warn(`localStorage not available. '${key}'' will not perist when you close your browser.`);
+ }
+};
/**
@@ -122,51 +117,47 @@ export let setStorage = function(key, value, replace = false){
*
* @param data String or Object
* @return Object
- **/
-export let toJSON = function(data){
+ * */
+export const toJSON = function (data) {
+ // Parse it
+ try {
+ const json = JSON.parse(data);
+ return json;
- // Parse it
- try {
- let json = JSON.parse(data);
- return json;
-
- // Could not parse string
- } catch (e){
-
- // Check if it's JSON already
- if (data.constructor === {}.constructor){
- return data;
- } else {
- console.error("Could not convert non-JSON", string);
- }
- }
- return {};
-}
+ // Could not parse string
+ } catch (e) {
+ // Check if it's JSON already
+ if (data.constructor === {}.constructor) {
+ return data;
+ }
+ console.error('Could not convert non-JSON', string);
+ }
+ return {};
+};
/**
* Set the app's favicon to a specific image.
- *
+ *
* @param filename String
*/
-export let setFavicon = function(filename){
- let links = document.getElementsByClassName('favicon');
- for (let link of links){
+export const setFavicon = function (filename) {
+ const links = document.getElementsByClassName('favicon');
+ for (const link of links) {
+ // Construct new
+ {
this.props.tracks.map(
- (track, index) => {
- var track_key = this.buildTrackKey(track, index);
- track.key = track_key;
- return (
-
- );
- }
+
-
+
);
- } else {
- return (
- - Could not find album with URI " - {encodeURIComponent(this.props.uri)}" -
-+ Could not find album with URI " + {encodeURIComponent(this.props.uri)} +" +
+