I hereby claim:
- I am jnsdls on github.
- I am jnsdls (https://keybase.io/jnsdls) on keybase.
- I have a public key ASBTypkozJUiVVu0W7-B3nqfAkytucmZW5eTKAQKY8wjZAo
To claim this, I am signing this object:
I hereby claim:
To claim this, I am signing this object:
render() { | |
const { photo, style, nextPhoto } = this.props; | |
return (<div className="photo" style={style || {}}> | |
<div | |
className="photo-img" | |
onClick={nextPhoto} | |
style={{ backgroundImage: `url(${photo.image_url})` }} | |
/> | |
</div>); | |
} |
renderCurrentPhoto(){ | |
const { photos, currentAt } = this.props; | |
const { photoIndex } = this.state; | |
if(photos.length) { | |
// if we have photos loaded, render the current one | |
return <Photo currentAt={currentAt} photo={photos[photoIndex]} nextPhoto={this.handleNextPhoto} /> | |
} else { | |
return null; // we could add a loader here | |
} | |
} |
handleNextPhoto() { | |
const { photoIndex } = this.state; // the only state the Library manages is the current index | |
const { photos, canLoadMore } = this.props; // we get the array of photos from the <App /> | |
if(photoIndex + 5 > photos.length && canLoadMore) { | |
// if we're 5 off of the last photo we tell the <App /> to load 50 more if there are any more to load | |
this.props.loadMore(); | |
} | |
if(photos[photoIndex+1]) { | |
// if there is a photo Object at the next index, go there | |
this.setState({ photoIndex: photoIndex+1 }); |
render() { | |
// flashes is an array of unique flash-IDs so we can render our flash-effect DOM elements | |
// we do some small little CSS effects to make it feel more alive | |
const { flashes, cameraSwitch } = this.state; | |
const { isSaving } = this.props; | |
return (<div className="camera" onTouchStart={this.evalDoubleTap}> | |
<div className="flash-container"> | |
{flashes.map((flash) => <div className="imageWrap shutterClick" key={flash} />)} | |
</div> | |
<div className="camera-controls"> |
switchPanel() { | |
this.props.switchPanel(1); // again we just tell our <App /> to handle it. | |
} |
switchCamera() { | |
this.props.switchCamera() // yup, we literally just call it on the <App /> | |
} | |
// hey, let's also let users double-tap to flip the camera around | |
let prevDate = Date.now(); // set this up once | |
evalDoubleTap() { | |
const newDate = Date.now(); // | |
if(newDate < prevDate + 200) { // if 2 taps happen within 200ms of each other, it's a double tap | |
this.switchCamera(); |
takePhoto() { | |
this.addFlash(); // let's add a small flash effect | |
this.props.takePhoto(); // call the <App /> and tell it to take the picture | |
} | |
addFlash(){ | |
// boilerplate to add a flash-effect | |
setTimeout(() => { | |
this.removeFlash(flash) | |
}, 300) |
render() { | |
// destructuring state that will get passed to <Camera /> and <Library /> | |
// both <Camera /> and <Library /> receive props here | |
// we use ReactSwipe to handle the swipeable panels, it works great out of the box | |
const { saving, canLoadMore, currentAt } = this.state; | |
return (<ReactSwipe | |
className='app-layer' | |
ref="reactSwipe" | |
swipeOptions={{continuous: false, startSlide: 0}}> | |
<Camera /> |
handleTakePhoto() { | |
this.props.bebo.Camera.capturePhoto((image_uri) => { | |
// I'm doing a bunch of image manipulation here before sending the resulting base64 to savePhoto() | |
}) | |
} | |
savePhoto(base64) { | |
const { actingUser, saving } = this.state; | |
if(!actingUser){ return console.error('need acting user to save image')} | |
if(!base64){ return console.error('need savable base64 to save image, but got', base64)} |