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

Smooth swipe control for mobile

Browse Source
This commit is contained in:
James Barnsley
2019-02-12 19:30:35 +13:00
parent 816666e3ba
commit eafe6a955b
6 changed files with 61 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/js/components/PlaybackControls.js
View File

@ -25,6 +25,7 @@ class PlaybackControls extends React.Component{
this.stream = null;
this.state = {
expanded: false,
current_track: null,
transition_track: null,
transition_direction: null
}
@ -90,6 +91,16 @@ class PlaybackControls extends React.Component{
this.stream = null;
}
}
if ((!this.props.current_track && nextProps.current_track) || (this.props.current_track && !nextProps.current_track)){
console.log("One was null, the other wasn't", {old: this.props.current_track, next: nextProps.current_track});
this.setState({current_track: nextProps.current_track});
}
if (this.props.current_track && nextProps.current_track && this.props.current_track.uri !== nextProps.current_track.uri){
console.log("URI different", {old: this.props.current_track.uri, next: nextProps.current_track.uri});
this.setState({current_track: nextProps.current_track});
}
}
handleTouchStart(e){
@ -146,7 +157,8 @@ class PlaybackControls extends React.Component{
setTransition(direction){
this.setState({
transition_track: this.props.current_track,
current_track: null,
transition_track: this.state.current_track,
transition_direction: direction
});
@ -157,7 +169,7 @@ class PlaybackControls extends React.Component{
transition_direction: null
});
},
150
200
);
}
@ -195,8 +207,8 @@ class PlaybackControls extends React.Component{
render(){
var images = false
if (this.props.current_track && this.props.current_track.images){
images = this.props.current_track.images
if (this.state.current_track && this.state.current_track.images){
images = this.state.current_track.images
}
return (
@ -222,10 +234,10 @@ class PlaybackControls extends React.Component{
<Thumbnail size="small" images={images} />
</Link>
<div className="title">
{this.props.current_track ? this.props.current_track.name : <span>-</span>}
{this.state.current_track ? this.state.current_track.name : <span>-</span>}
</div>
<div className="artist">
{this.props.current_track ? <ArtistSentence artists={this.props.current_track.artists} nolinks={this.props.slim_mode} /> : <ArtistSentence />}
{this.state.current_track ? <ArtistSentence artists={this.state.current_track.artists} nolinks={this.props.slim_mode} /> : <ArtistSentence />}
</div>
</div>
@ -252,7 +264,7 @@ class PlaybackControls extends React.Component{
<section className="progress">
<ProgressSlider />
<span className="current">{ this.props.time_position ? <Dater type="length" data={this.props.time_position} /> : '-' }</span>
<span className="total">{ this.props.current_track ? <Dater type="length" data={this.props.current_track.duration} /> : '-' }</span>
<span className="total">{ this.state.current_track ? <Dater type="length" data={this.state.current_track.duration} /> : '-' }</span>
</section>
<section className="volume">

24
src/scss/components/_playback-controls.scss
View File

@ -15,42 +15,36 @@
position: absolute;
bottom: 50px;
width: 220px;
z-index: 1;
font-size: 14px;
color: colour(white);
text-decoration: none;
@keyframes slide_left {
0% { transform: translateX(0px); }
99% { transform: translateX(-15px); opacity: 0; }
100% { transform: translateX(0px); opacity: 0; }
0% { transform: translateX(0px); opacity: 1; }
100% { transform: translateX(-15px); opacity: 0; }
}
@keyframes slide_right {
0% { transform: translateX(0px); }
99% { transform: translateX(15px); opacity: 0; }
100% { transform: translateX(0px); opacity: 0; }
0% { transform: translateX(0px); opacity: 1; }
100% { transform: translateX(15px); opacity: 0; }
}
&__transition {
z-index: 2;
background: lighten(colour(dark_grey), 15%);
@include responsive($bp_medium){
opacity: 1;
@include responsive($bp_medium){
&--previous {
animation: slide_right 0.1s;
animation: slide_right 0.2s;
}
&--next {
animation: slide_left 0.1s;
animation: slide_left 0.2s;
}
}
}
&--transitioning {
opacity: 0;
}
.light-theme & {
color: colour(darkest_grey);
}