Upgrade; parallax handling

This commit is contained in:
James Barnsley
2018-09-17 16:21:02 +12:00
parent b5111b1840
commit efa71acbd9
8 changed files with 14134 additions and 10825 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -98,7 +98,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1537004045";
var build = "1537131657";
var version = "3.25.1";
// Construct the script tag

1
src/js/bootstrap.js vendored
View File

@ -51,6 +51,7 @@ var initialState = {
ui: {
theme: 'dark',
shortkeys_enabled: true,
disable_parallax: false,
allow_reporting: true,
slim_mode: false,
selected_tracks: [],

View File

@ -6,24 +6,24 @@ export default class Parallax extends React.Component{
constructor(props){
super(props);
this._loading = false
this._loaded = false
this.state = {
scrollTop: 0,
windowWidth: 0,
windowHeight: 0,
canvas: {
width: 0,
height: 0
},
image: {},
loading: false,
url: false
}
if (!this.props.disabled){
this._loading = false
this._loaded = false
this.state = {
scrollTop: 0,
windowWidth: 0,
windowHeight: 0,
canvas: {
width: 0,
height: 0
},
image: {},
loading: false,
url: false
}
// we need to manually bind this as eventListener doesn't work with anonymous functions
this.handleResize = this.handleResize.bind(this);
this.handleScroll = this.handleScroll.bind(this);
@ -32,43 +32,44 @@ export default class Parallax extends React.Component{
componentDidMount(){
if (!this.props.disabled){
this._mounted = true;
window.addEventListener("resize", this.handleResize);
window.addEventListener("scroll", this.handleScroll);
}
if (this.props.image){
this._loading = true;
this.setState({url: this.props.image, image: false, loading: true});
this.loadImage(this.props.image)
.then(
response => {
if (this._mounted){
this._loading = false;
this._loaded = true;
this.setState({url: this.props.image, image: response, loading: false});
this.updateCanvas(response);
}
this._mounted = true;
if (this.props.image){
this._loading = true;
this.setState({url: this.props.image, image: false, loading: true});
this.loadImage(this.props.image)
.then(
response => {
if (this._mounted){
this._loading = false;
this._loaded = true;
this.setState({url: this.props.image, image: response, loading: false});
this.updateCanvas(response);
}
)
} else {
this._loaded = true;
this.state.image = false;
this.updateCanvas();
}
}
)
} else {
this._loaded = true;
this.state.image = false;
this.updateCanvas();
}
}
componentWillUnmount(){
this._mounted = false;
if (!this.props.disabled){
this._mounted = false;
window.removeEventListener("resize", this.handleResize);
window.removeEventListener("scroll", this.handleScroll);
}
}
componentWillReceiveProps(nextProps){
if (!nextProps.disabled && (!this.state.url || nextProps.image != this.state.url ) && !this._loading && nextProps.image){
if ((!this.state.url || nextProps.image != this.state.url ) && !this._loading && nextProps.image){
this._loading = true;
this.setState({ url: nextProps.image, image: false, loading: true });
this.loadImage(nextProps.image)
@ -86,9 +87,7 @@ export default class Parallax extends React.Component{
}
handleResize(e){
if (this._loaded){
this.updateCanvas(this.state.image);
}
this.updateCanvas(this.state.image);
}
handleScroll(e){
@ -212,11 +211,8 @@ export default class Parallax extends React.Component{
}
render(){
if (this.props.disabled){
return null;
}
return (
<div className={this.props.blur ? "parallax blur" : "parallax"}>
<div className={this.props.blur && !this.props.disabled ? "parallax blur" : "parallax"}>
<canvas
id="parallax-canvas"

View File

@ -512,8 +512,14 @@ const MopidyMiddleware = (function(){
data: {
enabled: true
}
})
store.dispatch(spotifyActions.connect());
});
} else {
store.dispatch({
type: 'SPOTIFY_SET',
data: {
enabled: false
}
});
}
// If we haven't customised our search schemes, add all to search
@ -2082,23 +2088,25 @@ const MopidyMiddleware = (function(){
var track = helpers.formatTrack(action.tl_track);
// We don't have the track already in our index, or we do but it's a partial record
if (store.getState().core.tracks[track.uri] === undefined || store.getState().core.tracks[track.uri].images === undefined){
if (track.uri){
if (store.getState().core.tracks[track.uri] === undefined || store.getState().core.tracks[track.uri].images === undefined){
// We've got Spotify running, and it's a spotify track - go straight to the source!
if (store.getState().spotify.enabled && helpers.uriSource(track.uri) == 'spotify'){
store.dispatch(spotifyActions.getTrack(track.uri));
// We've got Spotify running, and it's a spotify track - go straight to the source!
if (store.getState().spotify.enabled && helpers.uriSource(track.uri) == 'spotify'){
store.dispatch(spotifyActions.getTrack(track.uri));
// Some other source, rely on Mopidy backends to do their work
} else {
store.dispatch(mopidyActions.getImages('tracks',[track.uri]));
}
}
// Some other source, rely on Mopidy backends to do their work
} else {
store.dispatch(mopidyActions.getImages('tracks',[track.uri]));
}
}
store.dispatch({
type: 'CURRENT_TRACK_LOADED',
track: track,
uri: track.uri
});
store.dispatch({
type: 'CURRENT_TRACK_LOADED',
track: track,
uri: track.uri
});
}
break;
case 'MOPIDY_GET_NEXT_TRACK':
@ -2111,7 +2119,7 @@ const MopidyMiddleware = (function(){
// We know it will be here, as the tlid refers to an item in this list
var track = helpers.applyFilter('tlid', response, store.getState().core.queue, true);
if (track){
if (track && track.uri){
store.dispatch({
type: 'NEXT_TRACK_LOADED',
uri: track.uri
@ -2160,33 +2168,34 @@ const MopidyMiddleware = (function(){
**/
case 'MOPIDY_GET_IMAGES':
if (action.uris){
request(socket, store, 'library.getImages', {uris: action.uris})
.then(response => {
var records = [];
for (var uri in response){
if (response.hasOwnProperty(uri)){
var images = response[uri];
images = helpers.digestMopidyImages(store.getState().mopidy, images);
request(socket, store, 'library.getImages', {uris: action.uris})
.then(response => {
var records = [];
for (var uri in response){
if (response.hasOwnProperty(uri)){
var images = response[uri];
images = helpers.digestMopidyImages(store.getState().mopidy, images);
if (images && images.length > 0){
records.push({
uri: uri,
images: images
});
if (images && images.length > 0){
records.push({
uri: uri,
images: images
});
} else {
store.dispatch(lastfmActions.getImages(action.context, uri));
}
}
}
} else {
store.dispatch(lastfmActions.getImages(action.context, uri));
}
}
}
var action_data = {
type: (action.context+'_LOADED').toUpperCase()
}
action_data[action.context] = records;
store.dispatch(action_data);
});
var action_data = {
type: (action.context+'_LOADED').toUpperCase()
}
action_data[action.context] = records;
store.dispatch(action_data);
});
}
next(action);
break;

View File

@ -195,7 +195,6 @@ const SpotifyMiddleware = (function(){
case 'SPOTIFY_CATEGORY_PLAYLISTS_LOADED':
store.dispatch(coreActions.playlistsLoaded(action.playlists.items));
console.log(action);
action.uris = helpers.arrayOf('uri', action.playlists.items);
action.more = action.playlists.next;
action.total = action.playlists.total;

View File

@ -2,7 +2,7 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import { Link, hashHistory } from 'react-router'
import ReactGA from 'react-ga'
import TrackList from '../components/TrackList'
@ -28,6 +28,17 @@ class Playlist extends React.Component{
super(props);
}
componentWillMount(){
var uri = this.props.params.uri;
// Spotify upgraded their playlists URI to remove user component (Sept 2018)
// We accept the old format, and redirect to the new one
if (uri.includes("spotify:user:")){
uri = uri.replace(/spotify:user:([^:]*?):/i, "spotify:");
hashHistory.push(global.baseURL+'playlist/'+encodeURIComponent(uri));
}
}
componentDidMount(){
this.setWindowTitle();
this.props.coreActions.loadPlaylist(this.props.params.uri);