From 3f055df3f24567f78eb7dc601c658c168b14f6e4 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Mon, 24 Oct 2016 21:26:01 +1300 Subject: [PATCH] NPM issue with basetag; Basic styles --- npm-debug.log | 40 ++++++++++++++ src/index.html | 4 +- src/js/components/Icon.js | 4 +- src/js/components/Player.js | 80 +++++++++++++++------------ src/js/components/Sidebar.js | 36 +++++++++--- src/js/components/Thumbnail.js | 35 +++++++++--- src/js/services/mopidy/middleware.js | 6 +- src/js/services/mopidy/reducer.js | 2 +- src/js/services/spotify/actions.js | 49 +++++++++------- src/js/services/spotify/middleware.js | 17 +++--- src/js/services/spotify/reducer.js | 3 + src/js/views/Artist.js | 6 +- src/js/views/Playlist.js | 5 +- src/scss/app.scss | 3 +- src/scss/components/_icon.scss | 8 +++ src/scss/components/_lists.scss | 2 +- src/scss/components/_sidebar.scss | 44 +++++++++++++++ src/scss/components/_track.scss | 0 18 files changed, 251 insertions(+), 93 deletions(-) create mode 100644 npm-debug.log create mode 100755 src/scss/components/_icon.scss delete mode 100755 src/scss/components/_track.scss diff --git a/npm-debug.log b/npm-debug.log new file mode 100644 index 00000000..d8c18a1a --- /dev/null +++ b/npm-debug.log @@ -0,0 +1,40 @@ +0 info it worked if it ends with ok +1 verbose cli [ '/usr/bin/nodejs', '/usr/bin/npm', 'run', 'dev' ] +2 info using npm@2.15.8 +3 info using node@v4.4.7 +4 verbose run-script [ 'predev', 'dev', 'postdev' ] +5 info predev iris@1.0.0 +6 info dev iris@1.0.0 +7 verbose unsafe-perm in lifecycle true +8 info iris@1.0.0 Failed to exec dev script +9 verbose stack Error: iris@1.0.0 dev: `mkdir production & cp src/index.html production/index.html & cp -R src/fonts production/fonts & NODE_ENV=development webpack & sass src/scss/app.scss production/app.css` +9 verbose stack Exit status 65 +9 verbose stack at EventEmitter. (/usr/lib/node_modules/npm/lib/utils/lifecycle.js:217:16) +9 verbose stack at emitTwo (events.js:87:13) +9 verbose stack at EventEmitter.emit (events.js:172:7) +9 verbose stack at ChildProcess. (/usr/lib/node_modules/npm/lib/utils/spawn.js:24:14) +9 verbose stack at emitTwo (events.js:87:13) +9 verbose stack at ChildProcess.emit (events.js:172:7) +9 verbose stack at maybeClose (internal/child_process.js:827:16) +9 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5) +10 verbose pkgid iris@1.0.0 +11 verbose cwd /var/www/iris +12 error Linux 3.16.0-4-amd64 +13 error argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "dev" +14 error node v4.4.7 +15 error npm v2.15.8 +16 error code ELIFECYCLE +17 error iris@1.0.0 dev: `mkdir production & cp src/index.html production/index.html & cp -R src/fonts production/fonts & NODE_ENV=development webpack & sass src/scss/app.scss production/app.css` +17 error Exit status 65 +18 error Failed at the iris@1.0.0 dev script 'mkdir production & cp src/index.html production/index.html & cp -R src/fonts production/fonts & NODE_ENV=development webpack & sass src/scss/app.scss production/app.css'. +18 error This is most likely a problem with the iris package, +18 error not with npm itself. +18 error Tell the author that this fails on your system: +18 error mkdir production & cp src/index.html production/index.html & cp -R src/fonts production/fonts & NODE_ENV=development webpack & sass src/scss/app.scss production/app.css +18 error You can get information on how to open an issue for this project with: +18 error npm bugs iris +18 error Or if that isn't available, you can get their info via: +18 error +18 error npm owner ls iris +18 error There is likely additional logging output above. +19 verbose exit [ 1, true ] diff --git a/src/index.html b/src/index.html index 49a63134..b3f40997 100755 --- a/src/index.html +++ b/src/index.html @@ -5,7 +5,7 @@ - + @@ -16,6 +16,6 @@ - + \ No newline at end of file diff --git a/src/js/components/Icon.js b/src/js/components/Icon.js index 7ce6a3eb..a40c1b38 100755 --- a/src/js/components/Icon.js +++ b/src/js/components/Icon.js @@ -9,7 +9,9 @@ export default class Icon extends React.Component{ } render(){ + var className = 'icon'; + if( this.props.className ) className += ' '+this.props.className; var src = require('../../images/icons/'+this.props.name+'.svg'); - return ; + return ; } } \ No newline at end of file diff --git a/src/js/components/Player.js b/src/js/components/Player.js index 92d44154..3b442fd8 100755 --- a/src/js/components/Player.js +++ b/src/js/components/Player.js @@ -6,6 +6,7 @@ import { bindActionCreators } from 'redux' import FontAwesome from 'react-fontawesome' import VolumeSlider from './VolumeSlider' import ArtistList from './ArtistList' +import Thumbnail from './Thumbnail' import * as mopidyActions from '../services/mopidy/actions' @@ -16,63 +17,74 @@ class Player extends React.Component{ } renderTrackInFocus(){ - if( this.props.mopidy && this.props.mopidy.trackInFocus ){ + if( this.props.mopidy && this.props.mopidy.currentTlTrack ){ return (
-
{ this.props.mopidy.trackInFocus.track.name }
- + { this.props.spotify.track && !this.props.mini ? : null } +
{ this.props.mopidy.currentTlTrack.track.name }
+
); } return null; } - renderControls(){ - - var playButton = this.props.mopidyActions.play()}> + renderPlayButton(){ + var button = this.props.mopidyActions.play()}> if( this.props.mopidy.state == 'playing' ){ - playButton = this.props.mopidyActions.pause()}> + button = this.props.mopidyActions.pause()}> } + return button; + } - var consumeButton = this.props.mopidyActions.instruct('tracklist.setConsume', [true])}>Consume + renderConsumeButton(){ + if( this.props.mini ) return null; + var button = this.props.mopidyActions.instruct('tracklist.setConsume', [true])}> if( this.props.mopidy.consume ){ - consumeButton = this.props.mopidyActions.instruct('tracklist.setConsume', [false])}>Un-Consume + button = this.props.mopidyActions.instruct('tracklist.setConsume', [false])}> } + return button; + } - var randomButton = this.props.mopidyActions.instruct('tracklist.setRandom', [true])}>Random + renderRandomButton(){ + if( this.props.mini ) return null; + var button = this.props.mopidyActions.instruct('tracklist.setRandom', [true])}> if( this.props.mopidy.random ){ - randomButton = this.props.mopidyActions.instruct('tracklist.setRandom', [false])}>Un-Random + button = this.props.mopidyActions.instruct('tracklist.setRandom', [false])}> } + return button; + } - var repeatButton = this.props.mopidyActions.instruct('tracklist.setRepeat', [true])}>Repeat + renderRepeatButton(){ + if( this.props.mini ) return null; + var button = this.props.mopidyActions.instruct('tracklist.setRepeat', [true])}> if( this.props.mopidy.repeat ){ - repeatButton = this.props.mopidyActions.instruct('tracklist.setRepeat', [false])}>Un-Repeat + button = this.props.mopidyActions.instruct('tracklist.setRepeat', [false])}> } - - return ( -
- { this.renderTrackInFocus() } - { playButton } - this.props.mopidyActions.previous()}> - -   - this.props.mopidyActions.next()}> - -   - { consumeButton } - { randomButton } - { repeatButton } - this.props.mopidyActions.instruct('playback.setVolume', { volume: volume })} /> -
- ); + return button; } render(){ return ( -
- { this.renderControls() } +
+ + { this.renderTrackInFocus() } + +
+ { this.renderPlayButton() } + this.props.mopidyActions.previous()}> + +   + this.props.mopidyActions.next()}> + +   + { this.renderConsumeButton() } + { this.renderRandomButton() } + { this.renderRepeatButton() } + this.props.mopidyActions.instruct('playback.setVolume', { volume: volume })} /> +
); } diff --git a/src/js/components/Sidebar.js b/src/js/components/Sidebar.js index 2ba0fd60..32f73022 100755 --- a/src/js/components/Sidebar.js +++ b/src/js/components/Sidebar.js @@ -5,6 +5,8 @@ import { bindActionCreators } from 'redux' import { Link } from 'react-router' import Player from '../components/Player' +import Icon from '../components/Icon' +import Thumbnail from '../components/Thumbnail' import FontAwesome from 'react-fontawesome' import * as mopidyActions from '../services/mopidy/actions' @@ -22,11 +24,16 @@ class Sidebar extends React.Component{ render(){ return ( ); diff --git a/src/js/components/Thumbnail.js b/src/js/components/Thumbnail.js index 30d7b06a..516b6a07 100755 --- a/src/js/components/Thumbnail.js +++ b/src/js/components/Thumbnail.js @@ -5,22 +5,41 @@ export default class Thumbnail extends React.Component{ constructor(props) { super(props); + + this.state = { + small: false, + medium: false, + large: false, + huge: false + } } - sizedImageURL(){ - var images = this.props.images; - switch( this.props.size ){ - case 'small': - break; + componentDidMount(){ + this.mapImageSizes(); + } - default: - return images[images.length-1].url + componentWillReceiveProps( nextProps ){ + this.mapImageSizes(); + } + + mapImageSizes(){ + var images = this.props.images; + for( var i = 0; i < images.length; i++ ){ + if( images[i].height > 800 ){ + this.setState({ huge: images[i].url }); + }else if( images[i].height > 600 ){ + this.setState({ large: images[i].url }); + }else if( images[i].height > 280 ){ + this.setState({ medium: images[i].url }); + }else{ + this.setState({ small: images[i].url }); + } } } render(){ return ( - + ); } } \ No newline at end of file diff --git a/src/js/services/mopidy/middleware.js b/src/js/services/mopidy/middleware.js index 63f3e44f..558a19bc 100755 --- a/src/js/services/mopidy/middleware.js +++ b/src/js/services/mopidy/middleware.js @@ -30,10 +30,12 @@ const MopidyMiddleware = (function(){ instruct( ws, store, 'tracklist.getTlTracks' ); break; - //case 'event:trackPlaybackEnded': case 'event:playbackStateChanged': - case 'event:trackPlaybackStarted': instruct( ws, store, 'playback.getState' ); + break; + + //case 'event:trackPlaybackEnded': + case 'event:trackPlaybackStarted': instruct( ws, store, 'playback.getCurrentTlTrack' ); break; diff --git a/src/js/services/mopidy/reducer.js b/src/js/services/mopidy/reducer.js index 0b2e537d..f374601d 100755 --- a/src/js/services/mopidy/reducer.js +++ b/src/js/services/mopidy/reducer.js @@ -66,7 +66,7 @@ export default function reducer(mopidy = {}, action){ case 'MOPIDY_CURRENTTLTRACK': return Object.assign({}, mopidy, { - trackInFocus: action.data + currentTlTrack: action.data }); case 'MOPIDY_VOLUME': diff --git a/src/js/services/spotify/actions.js b/src/js/services/spotify/actions.js index c457e471..1fb2e967 100755 --- a/src/js/services/spotify/actions.js +++ b/src/js/services/spotify/actions.js @@ -22,13 +22,6 @@ export function disconnect(){ } } -export function loadAlbum( uri ){ - return { - type: 'SPOTIFY_LOAD_ALBUM', - uri: uri - } -} - /** * Send an ajax request to the Spotify API @@ -55,7 +48,7 @@ const sendRequest = ( dispatch, getState, endpoint, method = 'GET', data = false }).then( response => resolve(response), error => { - console.error('sendRequest', error) + console.error('Could not send request to '+endpoint, error, data) reject(error) } ) @@ -96,17 +89,12 @@ function getToken( dispatch, getState ){ resolve(getState().spotify.access_token); return } - + // token is expiring/expired, so go get a new one and resolve that refreshToken( dispatch, getState ) .then( - response => { - resolve(response.access_token); - }, - error => { - console.error('getToken', error) - reject(error) - } + response => resolve(response.access_token), + error => reject(error) ); }); } @@ -129,17 +117,17 @@ function refreshToken( dispatch, getState ){ resolve(response); }, error => { - console.error('refreshToken', error) + console.error('Could not refresh token', error) reject(error) } ); }) } -export function refreshToken(){ +export function refreshingToken(){ return (dispatch, getState) => { dispatch({ type: 'SPOTIFY_TOKEN_REFRESHING' }); - doRefreshToken( dispatch, getState ); + refreshToken( dispatch, getState ); } } @@ -164,6 +152,29 @@ export function getMe(){ } +/** + * Get a single track + * + * @param uri string + **/ +export function getTrack( uri ){ + return (dispatch, getState) => { + + // flush out the previous store value + dispatch({ type: 'SPOTIFY_TRACK_LOADED', data: false }); + + sendRequest( dispatch, getState, 'tracks/'+ getFromUri('trackid', uri) ) + .then( response => { + dispatch({ + type: 'SPOTIFY_TRACK_LOADED', + data: response + }); + } + ); + } +} + + /** * Get a single artist * diff --git a/src/js/services/spotify/middleware.js b/src/js/services/spotify/middleware.js index 9ec1ac35..c21853f6 100755 --- a/src/js/services/spotify/middleware.js +++ b/src/js/services/spotify/middleware.js @@ -1,5 +1,5 @@ -import actions from './actions' +var actions = require('./actions.js') const SpotifyMiddleware = (function(){ @@ -7,26 +7,25 @@ const SpotifyMiddleware = (function(){ * The actual middleware inteceptor **/ return store => next => action => { - return next(action); - /* var state = store.getState(); switch(action.type){ - case 'SPOTIFY_AUTHORIZATION_GRANTEDXXX': + // when our mopidy server current track changes + case 'MOPIDY_CURRENTTLTRACK': - // proceed as usual + // proceed as usual so we don't inhibit default functionality next(action) - // now we've been granted, - store.dispatch({ type: 'SPOTIFY_AUTHORIZATION_COMPLETE', data: data }) - break; + // if the current track is a spotify track + if( action.data.track.uri.substring(0,14) == 'spotify:track:' ){ + store.dispatch( actions.getTrack( action.data.track.uri ) ) + } // This action is irrelevant to us, pass it on to the next middleware default: return next(action); } - */ } })(); diff --git a/src/js/services/spotify/reducer.js b/src/js/services/spotify/reducer.js index 32517f8d..972667f5 100755 --- a/src/js/services/spotify/reducer.js +++ b/src/js/services/spotify/reducer.js @@ -43,6 +43,9 @@ export default function reducer(spotify = {}, action){ case 'SPOTIFY_ME_LOADED': return Object.assign({}, spotify, { me: action.data }); + case 'SPOTIFY_TRACK_LOADED': + return Object.assign({}, spotify, { track: action.data }); + case 'SPOTIFY_PLAYLIST_LOADED': return Object.assign({}, spotify, { playlist: action.data }); diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js index efde4f63..713c4682 100755 --- a/src/js/views/Artist.js +++ b/src/js/views/Artist.js @@ -3,6 +3,7 @@ import React, { PropTypes } from 'react' import { connect } from 'react-redux' import { bindActionCreators } from 'redux' +import Header from '../components/Header' import TrackList from '../components/TrackList' import AlbumGrid from '../components/AlbumGrid' @@ -30,10 +31,7 @@ class Artist extends React.Component{ if( this.props.spotify.artist ){ return (
-
+

{ this.props.spotify.artist.followers.total.toLocaleString() } followers

{ this.props.spotify.artist.tracks ? : null } { this.props.spotify.artist_albums ? : null } diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js index 540aa81c..5dcecc92 100755 --- a/src/js/views/Playlist.js +++ b/src/js/views/Playlist.js @@ -31,10 +31,7 @@ class Playlist extends React.Component{ if( this.props.spotify.playlist ){ return (
-
+
); diff --git a/src/scss/app.scss b/src/scss/app.scss index f0265811..3f4a5b71 100755 --- a/src/scss/app.scss +++ b/src/scss/app.scss @@ -1,4 +1,5 @@ + @import 'vendor/font-awesome/index'; @import 'global/variables'; @@ -6,8 +7,8 @@ @import 'global/reset'; @import 'global/forms'; +@import 'components/icon'; @import 'components/sidebar'; @import 'components/lists'; -@import 'components/track'; @import 'components/header'; diff --git a/src/scss/components/_icon.scss b/src/scss/components/_icon.scss new file mode 100755 index 00000000..3e8a94b4 --- /dev/null +++ b/src/scss/components/_icon.scss @@ -0,0 +1,8 @@ + +.icon { + &.white{ + -webkit-filter: invert(1); + -moz-filter: invert(1); + filter: invert(1); + } +} \ No newline at end of file diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss index 023a4ab8..93bb4d83 100755 --- a/src/scss/components/_lists.scss +++ b/src/scss/components/_lists.scss @@ -32,7 +32,7 @@ } &:not(.header):hover { - background: #F4F4F4; + background: #EEEEEE; cursor: pointer; } diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss index 9e6c1c11..0d2f799a 100755 --- a/src/scss/components/_sidebar.scss +++ b/src/scss/components/_sidebar.scss @@ -7,6 +7,15 @@ aside{ bottom: 0; background: #333333; width: 200px; + overflow: hidden; + + .thumbnail { + position: absolute; + top: 0; + height: 100%; + z-index: -1; + opacity: 0.1; + } nav { @@ -18,6 +27,13 @@ aside{ padding: 6px 18px 6px 14px; border-left: 4px solid transparent; + .icon { + height: 14px; + padding-right: 8px; + vertical-align: top; + margin-top: 4px; + } + &.active { border-color: $turquoise; background: rgba( 0,0,0,0.1 ); @@ -44,6 +60,12 @@ aside{ } .player { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 14px; + .track-in-focus { font-size: 16px; text-transform: uppercase; @@ -56,6 +78,7 @@ aside{ .artist-list { opacity: 0.5; + display: block; @include one_line_text .artist a { @@ -69,5 +92,26 @@ aside{ } } } + + .controls { + text-align: center; + + a { + color: #FFFFFF; + cursor: pointer; + font-size: 14px; + padding: 8px; + display: inline-block; + opacity: 0.8; + + &.active { + color: $turquoise; + } + + &:hover { + opacity: 1.0; + } + } + } } } \ No newline at end of file diff --git a/src/scss/components/_track.scss b/src/scss/components/_track.scss deleted file mode 100755 index e69de29b..00000000