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

Total change of DOM layout, scrolling only on main, needs testing

Browse Source
This commit is contained in:
James Barnsley
2018-10-23 21:54:08 +13:00
parent 0f2fb3c991
commit 54344f80e3
13 changed files with 113 additions and 640 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/App.js
View File

@ -321,7 +321,7 @@ class App extends React.Component{
<div className="body">
<Sidebar />
<PlaybackControls />
<main>
<main id="main">
{this.props.children}
</main>
</div>

9
src/js/components/LazyLoadListener.js
View File

@ -10,16 +10,17 @@ export default class LazyLoadListener extends React.Component{
listening: (this.props.loadKey ? true : false),
loadKey: this.props.loadKey
}
this.element = document.getElementById('main');
this.handleScroll = helpers.throttle(this.handleScroll.bind(this), 50);
}
componentWillMount(){
window.addEventListener("scroll", this.handleScroll, false);
this.element.addEventListener("scroll", this.handleScroll, false);
}
componentWillUnmount(){
window.removeEventListener("scroll", this.handleScroll, false);
this.element.removeEventListener("scroll", this.handleScroll, false);
}
componentWillReceiveProps(nextProps){
@ -35,7 +36,7 @@ export default class LazyLoadListener extends React.Component{
if (this.state.listening){
// At, or nearly at the bottom of the page
if ((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 80)){
if (this.element.scrollTop > (this.element.scrollHeight - this.element.offsetHeight - 100)){
// Immediately stop listening to avoid duplicating pagination requests
this.setState(

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

@ -5,215 +5,16 @@ 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){
// 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);
}*/
}
/*
componentDidMount(){
if (!this.props.disabled){
window.addEventListener("resize", this.handleResize);
window.addEventListener("scroll", this.handleScroll);
}
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();
}
}
componentWillUnmount(){
this._mounted = false;
if (!this.props.disabled){
window.removeEventListener("resize", this.handleResize);
window.removeEventListener("scroll", this.handleScroll);
}
}
componentWillReceiveProps(nextProps){
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)
.then(
response => {
if (this._mounted){
this._loading = false;
this._loaded = true;
this.setState({ url: nextProps.image, image: response, loading: false });
this.updateCanvas(response);
}
}
)
}
}
handleResize(e){
this.updateCanvas(this.state.image);
}
handleScroll(e){
// this DOES work, but is in no way high-performing and only on Firefox
if (this._loaded){
this.setState(
{scrollTop: window.scrollY},
this.updateCanvas(this.state.image)
)
}
}
loadImage(url){
return new Promise((resolve, reject) => {
var imageObject = new Image();
imageObject.src = url;
// This seems to prevent Dirble images from loading.
// Other domains don't seem to mind any more, so perhaps we can remove for good.
// TODO: Re-test the nature of crossorigin images
// imageObject.crossOrigin = 'anonymous';
imageObject.onload = function(){
var image = {
width: imageObject.naturalWidth,
height: imageObject.naturalHeight,
original_width: imageObject.naturalWidth,
original_height: imageObject.naturalHeight,
object: imageObject
}
resolve(image);
}
})
}
updateCanvas(image = false){
var canvasWidth = $('.parallax').outerWidth();
var canvasHeight = $('.parallax').outerHeight();
if (this.state.canvas.width != canvasWidth || this.state.canvas.height != canvasHeight){
this.setState({
canvas: {
width: canvasWidth,
height: canvasHeight
}
})
}
this.renderCanvas(image);
}
renderCanvas(image = false){
let self = this;
var canvasDOM = document.getElementById('parallax-canvas')
var context = canvasDOM.getContext('2d')
// Fill the background with mid-grey
context.beginPath();
context.rect(0, 0, this.state.canvas.width, this.state.canvas.height);
switch (this.props.theme){
case 'light':
context.fillStyle = "#EDEDED";
break;
case 'dark':
default:
context.fillStyle = "#121212";
}
context.fill();
if (image && !self.state.loading){
// zoom image to fill canvas, widthwise
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 < 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 / this.state.canvas.height * 100 );
var position = Math.round((this.state.canvas.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(image.object, image.x, image.y, image.width, image.height);
// now update our component
self.setState({ image: image });
}
// Construct a gradient overlay
context.rect(0, 0, this.state.canvas.width, this.state.canvas.height);
let gradient = context.createLinearGradient(0, 0, 0, this.state.canvas.height);
switch (this.props.theme){
case 'light':
gradient.addColorStop(0, 'rgba(255,255,255,0.4)');
gradient.addColorStop(0.9, 'rgba(255,255,255,1)');
break;
case 'dark':
default:
gradient.addColorStop(0, 'rgba(24,24,24,0)');
gradient.addColorStop(0.9, 'rgba(24,24,24,1)');
}
context.fillStyle = gradient;
// And now drop it into place
context.fill();
}
*/
render(){
var class_name = "parallax";
if (this.props.blur){
class_name += " parallax--blur";
}
return (
<div className={this.props.blur && !this.props.disabled ? "parallax blur" : "parallax"}>
<div className={class_name}>
<div className="parallax__image" style={{backgroundImage: 'url('+this.props.image+')'}}></div>
<div className="parallax__overlay"></div>
</div>

3
src/js/views/Queue.js
View File

@ -165,7 +165,7 @@ class Queue extends React.Component{
<Icon name="play_arrow" type="material" />
Now playing
</Header>
<Parallax blur image={current_track_image} theme={this.props.theme} disabled={this.props.disable_parallax} />
<Parallax blur image={current_track_image} />
<div className="content-wrapper">
<div className="current-track">
@ -204,7 +204,6 @@ class Queue extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
disable_parallax: state.ui.disable_parallax,
theme: state.ui.theme,
spotify_enabled: state.spotify.enabled,
radio: state.core.radio,

11
src/js/views/Settings.js
View File

@ -330,17 +330,6 @@ class Settings extends React.Component {
Enable shortkeys
</span>
</label>
<label>
<input
type="checkbox"
name="shortkeys_enabled"
checked={ this.props.ui.disable_parallax }
onChange={ e => this.props.uiActions.set({ disable_parallax: !this.props.ui.disable_parallax })} />
<span className="label tooltip">
Disable parallax
<span className="tooltip__content">Improves scroll performance on low-powered devices</span>
</span>
</label>
</div>
</div>

3
src/js/views/discover/DiscoverNewReleases.js
View File

@ -60,7 +60,7 @@ class DiscoverNewReleases extends React.Component{
if (album){
return (
<div className="intro">
<Parallax image={album.images ? album.images.large : null} blur theme={this.props.theme} disabled={this.props.disable_parallax} />
<Parallax image={album.images ? album.images.large : null} blur />
<div className="content cf">
<Link
to={global.baseURL+'album/'+album.uri}
@ -155,7 +155,6 @@ class DiscoverNewReleases extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
disable_parallax: state.ui.disable_parallax,
theme: state.ui.theme,
load_queue: state.ui.load_queue,
artists: state.core.artists,