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

Thumbnails; Refresh button

Browse Source
This commit is contained in:
James Barnsley
2016-10-26 08:51:28 +13:00
parent dff33316ee
commit 737ed9d09d
7 changed files with 102 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/js/components/AlbumGrid.js
View File

@ -10,8 +10,10 @@ export default class AlbumGrid extends React.Component{
render(){
if( this.props.albums ){
var className = "grid album-grid"
if( this.props.className ) className += ' '+this.props.className
return (
<ul className="grid album-grid">
<div className={className}>
{
this.props.albums.map(
(album, index) => {
@ -21,7 +23,7 @@ export default class AlbumGrid extends React.Component{
}
)
}
</ul>
</div>
);
}
return null;

6
src/js/components/ArtistGrid.js
View File

@ -10,8 +10,10 @@ export default class ArtistGrid extends React.Component{
render(){
if( this.props.artists ){
var className = "grid artist-grid"
if( this.props.className ) className += ' '+this.props.className
return (
<ul className="grid artist-grid">
<div className={className}>
{
this.props.artists.map(
(artist, index) => {
@ -20,7 +22,7 @@ export default class ArtistGrid extends React.Component{
}
)
}
</ul>
</div>
);
}
return null;

65
src/js/components/Parallax.js
View File

@ -11,24 +11,27 @@ export default class Parallax extends React.Component{
scrollTop: 0,
windowWidth: 0,
windowHeight: 0,
source: {},
canvas: {
width: 0,
height: 0
},
image: {}
original: {},
image: {},
imageObject: {}
}
}
componentDidMount(){
this.loadImage( helpers.SizedImages( this.props.images ).huge )
var url = helpers.SizedImages( this.props.images ).huge;
this.loadImage( url )
.then(
response => this.setState({ image: response, source: {} })
response => {
this.setState({ image: response })
this.updateCanvas( response )
}
)
this.updateCanvas()
$(window).resize(() => this.updateCanvas());
$(window).resize(() => this.updateCanvas( this.state.image ));
}
loadImage( url ){
@ -38,12 +41,19 @@ export default class Parallax extends React.Component{
imageObject.src = url;
imageObject.onload = function(){
resolve( imageObject )
var image = {
width: imageObject.naturalWidth,
height: imageObject.naturalHeight,
original_width: imageObject.naturalWidth,
original_height: imageObject.naturalHeight,
object: imageObject
}
resolve( image )
}
})
}
updateCanvas(){
updateCanvas( image ){
var canvasWidth = $('.parallax').outerWidth();
var canvasHeight = $('.parallax').outerHeight();
if( this.state.canvas.width != canvasWidth || this.state.canvas.height != canvasHeight ){
@ -54,53 +64,40 @@ export default class Parallax extends React.Component{
}
})
}
console.log( this.state );
this.renderCanvas( image );
}
update(){
renderCanvas( image ){
let self = this;
var parallax = $('.parallax');
var canvasDOM = document.getElementById('parallax-canvas');
var context = canvasDOM.getContext('2d');
var image = {};
Object.assign(image, self.state.source);
// set our canvas dimensions (if necessary)
var canvasWidth = $('#parallax-canvas').outerWidth();
var canvasHeight = $('#parallax-canvas').outerHeight();
if( context.canvas.width != canvasWidth || context.canvas.height != canvasHeight ){
context.canvas.width = canvasWidth;
context.canvas.height = canvasHeight;
}
// zoom image to fill canvas, widthwise
if( image.width < canvasWidth || image.width > canvasWidth ){
var scale = canvasWidth / image.width;
if( image.width < this.state.canvas.width || image.width > this.state.canvas.width ){
var scale = this.state.canvas.width / image.width;
image.width = image.width * scale;
image.height = image.height * scale;
}
// now check for fill heightwise, and zoom in if necessary
if( image.height < canvasHeight ){
var scale = canvasHeight / image.height;
if( image.height < this.state.canvas.height ){
var scale = this.state.canvas.height / image.height;
image.width = image.width * scale;
image.height = image.height * scale;
}
// figure out where we want the image to be, based on scroll position
var percent = Math.round( self.state.scrollTop / canvasHeight * 100 );
var position = Math.round( (canvasHeight / 2) * (percent/100) ) - 100;
var percent = Math.round( self.state.scrollTop / this.state.canvas.height * 100 );
var position = Math.round( (this.state.canvas.height / 2) * (percent/100) ) - 100;
image.x = ( canvasWidth / 2 ) - ( image.width / 2 );
image.y = ( ( canvasHeight / 2 ) - ( image.height / 2 ) ) + ( ( percent / 100 ) * 100);
image.x = ( this.state.canvas.width / 2 ) - ( image.width / 2 );
image.y = ( ( this.state.canvas.height / 2 ) - ( image.height / 2 ) ) + ( ( percent / 100 ) * 100);
// actually draw the image on the canvas
context.drawImage(imageObject, image.x, image.y, image.width, image.height);
context.drawImage(image.object, image.x, image.y, image.width, image.height);
// now update our component
self.setState({ image: image });
// poll for scroll changes

17
src/js/components/SpotifyAuthenticationFrame.js
View File

@ -1,8 +1,11 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router'
import { createStore, bindActionCreators } from 'redux'
import FontAwesome from 'react-fontawesome'
import Thumbnail from './Thumbnail'
import * as actions from '../services/spotify/actions'
@ -51,11 +54,13 @@ class SpotifyAuthenticationFrame extends React.Component{
renderMe(){
if( !this.props.spotify.me ) return null;
if( this.props.spotify.me.display_name ){
return <span>Logged in as { this.props.spotify.me.display_name }</span>
}else{
return <span>Logged in as { this.props.spotify.me.id }</span>
}
return (
<div>
<Thumbnail circle={true} size="small" images={this.props.spotify.me.images} />
Logged in as {this.props.spotify.me.display_name ? this.props.spotify.me.display_name : null }
<Link to={'/user/'+this.props.spotify.me.id}>{ this.props.spotify.me.id }</Link>
</div>
)
}
renderAuthorizeButton(){
@ -92,7 +97,7 @@ class SpotifyAuthenticationFrame extends React.Component{
);
}else{
return (
<button onClick={() => this.props.actions.refreshToken()}>Refresh token</button>
<button onClick={() => this.props.actions.refreshingToken()}>Refresh token</button>
);
}
}

15
src/js/views/Artist.js
View File

@ -35,20 +35,27 @@ class Artist extends React.Component{
return (
<div>
<Parallax images={ this.props.spotify.artist.images } />
<div className="intro">
<Thumbnail size="huge" images={ this.props.spotify.artist.images } />
<h1>{ this.props.spotify.artist.name }</h1>
<p>{ this.props.spotify.artist.followers.total.toLocaleString() } followers</p>
</div>
<div className="col c3w2">
<h3>Top tracks</h3>
<div className="col w70">
<h3 className="left-padding">Top tracks</h3>
{ this.props.spotify.artist.tracks ? <TrackList tracks={ this.props.spotify.artist.tracks } /> : null }
</div>
<div className="col c3w1 cf">
<div className="col w5"></div>
<div className="col w25 cf">
<h3>Related artists</h3>
{ this.props.spotify.artist.related_artists ? <ArtistList artists={ this.props.spotify.artist.related_artists.slice(0,6) } /> : null }
</div>
{ this.props.spotify.artist_albums ? <AlbumGrid albums={ this.props.spotify.artist_albums.items } /> : null }
<h3 className="left-padding">Albums</h3>
{ this.props.spotify.artist_albums ? <AlbumGrid className="no-top-padding" albums={ this.props.spotify.artist_albums.items } /> : null }
</div>
);
}

4
src/scss/components/_images.scss
View File

@ -15,6 +15,10 @@
background-size: cover;
}
&.small {
max-width: 50px;
}
&.circle {
border-radius: 50%;
}

47
src/scss/global/_core.scss
View File

@ -31,6 +31,11 @@ main {
padding: 40px;
}
h1 {
font-weight: 100;
font-size: 26px;
}
h3 {
font-size: 14px;
margin-bottom: 14px;
@ -38,24 +43,46 @@ main {
&.underline {
padding-bottom: 4px;
border-bottom: 1px solid #000000;
border-bottom: 1px solid #000000;
}
}
.no-top-padding { padding-top: 0; }
.no-bottom-padding { padding-bottom: 0; }
.no-right-padding { padding-right: 0; }
.no-left-padding { padding-left: 0; }
.top-padding { padding-top: 20px; }
.bottom-padding { padding-bottom: 20px; }
.right-padding { padding-right: 40px; }
.left-padding { padding-left: 40px; }
}
.col {
min-height: 1px;
float: left;
&.c2w1 { width: 50%; }
&.c3w1 { width: 33.3334%; }
&.c3w2 { width: 66.6667%; }
&.c4w1 { width: 25%; }
&.c4w3 { width: 75%; }
&.c5w1 { width: 20%; }
&.c5w2 { width: 40%; }
&.c5w3 { width: 60%; }
&.c5w4 { width: 80%; }
&.w5 { width: 5%; }
&.w10 { width: 10%; }
&.w15 { width: 15%; }
&.w20 { width: 20%; }
&.w25 { width: 25%; }
&.w30 { width: 30%; }
&.w33 { width: 33.3334%; }
&.w35 { width: 35%; }
&.w40 { width: 40%; }
&.w45 { width: 45%; }
&.w50 { width: 50%; }
&.w55 { width: 55%; }
&.w60 { width: 60%; }
&.w65 { width: 65%; }
&.w66 { width: 66.6667%; }
&.w70 { width: 70%; }
&.w75 { width: 75%; }
&.w80 { width: 80%; }
&.w85 { width: 85%; }
&.w90 { width: 90%; }
&.w95 { width: 95%; }
}
.cf{