psmattas/resolver
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance load image performance

Browse Source
This commit is contained in:
Qolzam
2017-08-24 21:52:34 +07:00
parent 013a8d5c2e
commit bca0752535
9 changed files with 178 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/EditProfile.jsx
View File

@@ -153,6 +153,9 @@ export class EditProfile extends Component {
* Set banner image url
*/
handleRequestSetBanner = (url) => {
console.log('==========Banner==================');
console.log(url);
console.log('====================================');
this.setState({
banner: url
})
@@ -433,8 +436,7 @@ export class EditProfile extends Component {
const mapDispatchToProps = (dispatch, ownProps) => {
return {
update: (info) => dispatch(userActions.dbUpdateUserInfo(info)),
onRequestClose: () => dispatch(userActions.closeEditProfile()),
getImage: (name) => dispatch(imageGalleryActions.dbDownloadImage(name))
onRequestClose: () => dispatch(userActions.closeEditProfile())
}
}

38
app/components/ImageGallery.jsx
View File

@@ -17,7 +17,6 @@ import uuid from 'uuid'
// - Import actions
import * as imageGalleryActions from 'imageGalleryActions'
import * as fileActions from 'fileActions'
import * as globalActions from 'globalActions'
// - Import app components
@@ -59,8 +58,8 @@ export class ImageGallery extends Component {
* @param {event} evt passed by on click event on add image
* @param {string} name is the name of the image
*/
handleSetImage = (evt, name) => {
this.props.set(name)
handleSetImage = (evt, URL,fullPath) => {
this.props.set(URL,fullPath)
this.close()
}
@@ -69,8 +68,8 @@ export class ImageGallery extends Component {
* @param {event} evt passed by on click event on delete image
* @param {integer} id is the image identifier which selected to delete
*/
handleDeleteImage = (evt, id) => {
this.props.deleteImage(id)
handleDeleteImage = (evt, fullPath) => {
this.props.deleteImage(fullPath)
}
componentDidMount() {
@@ -87,9 +86,20 @@ export class ImageGallery extends Component {
* @memberof ImageGallery
*/
handleSendResizedImage = (event) => {
const { resizedImage, fileName } = event.detail
this.props.saveImage(resizedImage, fileName)
const { resizedImage, fileName } = event.detail
const {saveImageGallery} = this.props
FileAPI.uploadImage(resizedImage, fileName, (percent, status) => {
console.log('============= Upload progress ===============');
console.log(percent);
console.log('====================================');
}).then((result) => {
/* Add image to image gallery */
saveImageGallery(result.downloadURL,result.metadata.fullPath)
})
}
/**
@@ -116,9 +126,9 @@ export class ImageGallery extends Component {
return (<GridTile
key={image.id}
title={<SvgDelete hoverColor={grey200} color="white" color="white" style={{ marginLeft: "5px", cursor: "pointer" }} onClick={evt => this.handleDeleteImage(evt, image.id)} />}
title={<SvgDelete hoverColor={grey200} color="white" color="white" style={{ marginLeft: "5px", cursor: "pointer" }} onClick={evt => this.handleDeleteImage(evt, image.fullPath)} />}
subtitle={<span></span>}
actionIcon={<SvgAddImage hoverColor={grey200} color="white" style={{ marginRight: "5px", cursor: "pointer" }} onClick={evt => this.handleSetImage(evt, image.name)} />}
actionIcon={<SvgAddImage hoverColor={grey200} color="white" style={{ marginRight: "5px", cursor: "pointer" }} onClick={evt => this.handleSetImage(evt, image.URL,image.fullPath)} />}
>
<div>
<div style={{ overflowY: "hidden", overflowX: "auto" }}>
@@ -126,7 +136,7 @@ export class ImageGallery extends Component {
<div style={{ display: "block" }}>
<div style={{ display: "block", marginRight: "8px", transition: "transform .25s" }}>
<li style={{ width: "100%", margin: 0, verticalAlign: "bottom", position: "static", display: "inline-block" }}>
<Img fileName={image.name} style={{ width: "100%", height: "auto" }} />
<Img fileName={image.URL} style={{ width: "100%", height: "auto" }} />
</li>
</div>
@@ -214,12 +224,8 @@ export class ImageGallery extends Component {
*/
const mapDispatchToProps = (dispatch, ownProps) => {
return {
saveImage: (file, fileName) => {
dispatch(imageGalleryActions.dbUploadImage(file, fileName))
},
deleteImage: (id) => {
dispatch(imageGalleryActions.dbDeleteImage(id))
}
saveImageGallery: (imageURL,imageFullPath) => dispatch(imageGalleryActions.dbSaveImage(imageURL,imageFullPath)),
deleteImage: (fullPath) => dispatch(imageGalleryActions.dbDeleteImage(fullPath))
}
}

29
app/components/Img.jsx
View File

@@ -43,7 +43,6 @@ export class Img extends Component {
}
// Binding functions to `this`
this.getImageURL = this.getImageURL.bind(this)
this.handleLoadImage = this.handleLoadImage.bind(this)
}
@@ -59,29 +58,6 @@ export class Img extends Component {
})
}
/**
* Get image url if it is not exist on redux store
*
* @memberof Img
*/
getImageURL = () => {
let { fileName } = this.props
if (fileName && fileName !== '') {
if (this.props.imageRequests.indexOf(fileName) > -1)
return
this.props.getImage(fileName)
}
}
componentWillMount() {
let { fileName } = this.props
if (this.props.imageRequests.indexOf(fileName) > -1)
return
this.getImageURL()
}
/**
* Reneder component DOM
* @return {react element} return the DOM which rendered by component
@@ -114,7 +90,7 @@ export class Img extends Component {
let { isImageLoaded } = this.state
return (
<div>
<img onLoad={this.handleLoadImage} src={this.props.avatarURL[fileName] || ''} style={isImageLoaded ? style : { display: 'none' }} />
<img onLoad={this.handleLoadImage} src={fileName || ''} style={isImageLoaded ? style : { display: 'none' }} />
<div style={{ backgroundColor: 'blue' }} style={isImageLoaded ? { display: 'none' } : styles.loding}>
<div style={styles.loadingContent}>
<SvgImage style={styles.loadingImage} />
@@ -136,8 +112,7 @@ export class Img extends Component {
*/
const mapDispatchToProps = (dispatch, ownProps) => {
return {
getImage: (name) => dispatch(imageGalleryActions.dbDownloadImage(name))
}
}

30
app/components/ImgCover.jsx
View File

@@ -60,7 +60,6 @@ export class ImgCover extends Component {
}
// Binding functions to `this`
this.getImageURL = this.getImageURL.bind(this)
this.handleLoadImage = this.handleLoadImage.bind(this)
}
@@ -75,29 +74,6 @@ export class ImgCover extends Component {
})
}
/**
* Get image url if it is not exist on redux store
*
* @memberof Img
*/
getImageURL = () => {
let { fileName } = this.props
if (fileName && fileName !== '') {
if (this.props.imageRequests.indexOf(fileName) > -1)
return
this.props.getImage(fileName)
}
}
componentWillMount() {
let { fileName } = this.props
if (this.props.imageRequests.indexOf(fileName) > -1)
return
this.getImageURL()
}
/**
* Reneder component DOM
* @return {react element} return the DOM which rendered by component
@@ -112,7 +88,7 @@ export class ImgCover extends Component {
*/
const styles = {
cover: {
backgroundImage: 'url(' + (this.props.avatarURL[fileName] || '#') + ')',
backgroundImage: 'url(' + (fileName || '') + ')',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
@@ -153,7 +129,7 @@ export class ImgCover extends Component {
<div>Image has not loaded</div>
</div>
</div>
<img onLoad={this.handleLoadImage} src={this.props.avatarURL[fileName] || ''} style={{ display: 'none'}} />
<img onLoad={this.handleLoadImage} src={fileName || ''} style={{ display: 'none'}} />
</div>
)
}
@@ -169,8 +145,6 @@ export class ImgCover extends Component {
*/
const mapDispatchToProps = (dispatch, ownProps) => {
return {
getImage: (name) => dispatch(imageGalleryActions.dbDownloadImage(name))
}
}

174
app/components/PostWrite.jsx
View File

@@ -82,9 +82,13 @@ export class PostWrite extends Component {
*/
postText: this.props.edit ? this.props.text : '',
/**
* The image of the post
* The URL image of the post
*/
image: this.props.edit ? this.props.image : '',
/**
* The path identifier of image on the server
*/
imageFullPath: this.props.edit ? this.props.imageFullPath : '',
/**
* If it's true gallery will be open
*/
@@ -116,31 +120,31 @@ export class PostWrite extends Component {
}
/**
* Toggle comments of the post to disable/enable
*
*
* @memberof PostWrite
*/
handleToggleComments = () => {
this.setState({
disableComments: !this.state.disableComments,
/**
* Toggle comments of the post to disable/enable
*
*
* @memberof PostWrite
*/
handleToggleComments = () => {
this.setState({
disableComments: !this.state.disableComments,
disabledPost: false
})
}
})
}
/**
* Toggle sharing of the post to disable/enable
*
*
* @memberof PostWrite
*/
handleToggleSharing = () => {
this.setState({
disableSharing: !this.state.disableSharing,
/**
* Toggle sharing of the post to disable/enable
*
*
* @memberof PostWrite
*/
handleToggleSharing = () => {
this.setState({
disableSharing: !this.state.disableSharing,
disabledPost: false
})
}
})
}
/**
* Romove the image of post
@@ -151,6 +155,7 @@ handleToggleSharing = () => {
handleRemoveImage = () => {
this.setState({
image: '',
imageFullPath: '',
disabledPost: false
})
}
@@ -161,52 +166,71 @@ handleToggleSharing = () => {
*/
handlePost = (evt) => {
var image = this.state.image
var tags = PostAPI.getContentTags(this.state.postText)
const {
image,
imageFullPath,
disableComments,
disableSharing,
postText } = this.state
const {
id,
avatar,
name,
edit,
onRequestClose,
post,
update } = this.props
var tags = PostAPI.getContentTags(postText)
// In edit status we should fire update if not we should fire post function
if (!this.props.edit) {
if (!edit) {
if (image !== '') {
this.props.post({
body: this.state.postText,
post({
body: postText,
tags: tags,
image: image,
avatar: this.props.avatar,
name: this.props.name,
disableComments: this.state.disableComments,
disableSharing: this.state.disableSharing
}, this.props.onRequestClose)
imageFullPath: imageFullPath,
avatar: avatar,
name: name,
disableComments: disableComments,
disableSharing: disableSharing
}, onRequestClose)
}
else {
this.props.post({
body: this.state.postText,
post({
body: postText,
tags: tags,
avatar: this.props.avatar,
name: this.props.name,
disableComments: this.state.disableComments,
disableSharing: this.state.disableSharing
}, this.props.onRequestClose)
avatar: avatar,
name: name,
disableComments: disableComments,
disableSharing: disableSharing
}, onRequestClose)
}
}
// In edit status we pass post to update functions
else {
this.props.update({
id: this.props.id,
body: this.state.postText,
update({
id: id,
body: postText,
tags: tags,
image: image,
disableComments: this.state.disableComments,
disableSharing: this.state.disableSharing
}, this.props.onRequestClose)
imageFullPath: imageFullPath,
disableComments: disableComments,
disableSharing: disableSharing
}, onRequestClose)
}
}
/**
* Set post image url
*/
onRequestSetImage = (url) => {
onRequestSetImage = (url, fullPath) => {
this.setState({
image: url,
imageFullPath: fullPath,
disabledPost: false
})
}
@@ -252,32 +276,32 @@ handleToggleSharing = () => {
}
componentWillReceiveProps(nextProps) {
if(!nextProps.open){
if (!nextProps.open) {
this.setState({
/**
* Post text
*/
postText: this.props.edit ? this.props.text : '',
/**
* The image of the post
*/
image: this.props.edit ? this.props.image : '',
/**
* If it's true gallery will be open
*/
galleryOpen: false,
/**
* If it's true post button will be disabled
*/
disabledPost: true,
/**
* If it's true comment will be disabled on post
*/
disableComments: this.props.edit ? this.props.disableComments : false,
/**
* If it's true share will be disabled on post
*/
disableSharing: this.props.edit ? this.props.disableSharing : false,
/**
* Post text
*/
postText: this.props.edit ? this.props.text : '',
/**
* The image of the post
*/
image: this.props.edit ? this.props.image : '',
/**
* If it's true gallery will be open
*/
galleryOpen: false,
/**
* If it's true post button will be disabled
*/
disabledPost: true,
/**
* If it's true comment will be disabled on post
*/
disableComments: this.props.edit ? this.props.disableComments : false,
/**
* If it's true share will be disabled on post
*/
disableSharing: this.props.edit ? this.props.disableSharing : false,
})
}
@@ -364,7 +388,7 @@ handleToggleSharing = () => {
<div style={this.props.style}>
{this.props.children}
<Dialog
id= {this.props.id || 0}
id={this.props.id || 0}
actions={writeActions}
modal={false}
open={this.props.open}
@@ -397,7 +421,7 @@ handleToggleSharing = () => {
hintStyle={{ fontWeight: 200, fontSize: "14px" }}
textareaStyle={{ fontWeight: 200, fontSize: "14px" }}
style={{ margin: "0 16px", flexShrink: 0, width: "initial", flexGrow: 1 }}
/>
{(this.state.image && this.state.image !== '')
@@ -462,7 +486,7 @@ handleToggleSharing = () => {
const mapDispatchToProps = (dispatch, ownProps) => {
return {
post: (post, callBack) => dispatch(postActions.dbAddImagePost(post, callBack)),
update: (post,callBack) => dispatch(postActions.dbUpdatePost(post, callBack))
update: (post, callBack) => dispatch(postActions.dbUpdatePost(post, callBack))
}
}

31
app/components/UserAvatar.jsx
View File

@@ -51,46 +51,21 @@ export class ImgCover extends Component {
}
// Binding functions to `this`
this.getImageURL = this.getImageURL.bind(this)
}
componentWillReceiveProps(nextProps) {
const { fileName, avatarURL } = this.props
if (fileName && !avatarURL[fileName]) {
if (this.props.imageRequests.indexOf(fileName) > -1)
return
this.getImageURL()
}
}
getImageURL = () => {
let { fileName } = this.props
if (fileName && fileName !== '') {
if (this.props.imageRequests.indexOf(fileName) > -1)
return
this.props.getImage(fileName)
}
}
componentWillMount() {
let { fileName } = this.props
if (this.props.imageRequests.indexOf(fileName) > -1)
return
this.getImageURL()
}
/**
* Reneder component DOM
* @return {react element} return the DOM which rendered by component
*/
render() {
let { fileName, style, size, onTouchTap, avatarURL } = this.props
let { fileName, style, size, onTouchTap } = this.props
return (
<Avatar src={avatarURL[fileName] || ''} size={size || 36} style={style} onTouchTap={onTouchTap} />
<Avatar src={fileName || ''} size={size || 36} style={style} onTouchTap={onTouchTap} />
)
}
@@ -106,8 +81,6 @@ export class ImgCover extends Component {
*/
const mapDispatchToProps = (dispatch, ownProps) => {
return {
getImage: (name) => dispatch(imageGalleryActions.dbDownloadImage(name))
}
}