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

Upgrade; parallax handling

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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: [],

86
src/js/components/Parallax.js
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"

91
src/js/services/mopidy/middleware.js
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;

1
src/js/services/spotify/middleware.js
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;

13
src/js/views/Playlist.js
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);