Add account media gallery view to web UI (#3120)
* Add account media gallery view to web UI * Link media view from account dropdown * Adjust linkmaster
Eugen Rochko
8 years ago
committed by
GitHub
parent
b369fc2de4
commit
de475cf8d3
@ -0,0 +1,39 @@ |
||||
import React from 'react'; |
||||
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||
import Permalink from '../../../components/permalink'; |
||||
|
||||
class MediaItem extends ImmutablePureComponent { |
||||
|
||||
static propTypes = { |
||||
media: ImmutablePropTypes.map.isRequired |
||||
}; |
||||
|
||||
render () { |
||||
const { media } = this.props; |
||||
const status = media.get('status'); |
||||
|
||||
let content, style; |
||||
|
||||
if (media.get('type') === 'gifv') { |
||||
content = <span className='media-gallery__gifv__label'>GIF</span>; |
||||
} |
||||
|
||||
if (!status.get('sensitive')) { |
||||
style = { backgroundImage: `url(${media.get('preview_url')})` }; |
||||
} |
||||
|
||||
return ( |
||||
<div className='account-gallery__item'> |
||||
<Permalink |
||||
to={`/statuses/${status.get('id')}`} |
||||
href={status.get('url')} |
||||
style={style}> |
||||
{content} |
||||
</Permalink> |
||||
</div> |
||||
); |
||||
} |
||||
} |
||||
|
||||
export default MediaItem; |
||||
@ -0,0 +1,99 @@ |
||||
import React from 'react'; |
||||
import { connect } from 'react-redux'; |
||||
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||
import PropTypes from 'prop-types'; |
||||
import { |
||||
fetchAccount, |
||||
fetchAccountMediaTimeline, |
||||
expandAccountMediaTimeline |
||||
} from '../../actions/accounts'; |
||||
import LoadingIndicator from '../../components/loading_indicator'; |
||||
import Column from '../ui/components/column'; |
||||
import ColumnBackButton from '../../components/column_back_button'; |
||||
import Immutable from 'immutable'; |
||||
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||
import { getAccountGallery } from '../../selectors'; |
||||
import MediaItem from './components/media_item'; |
||||
import HeaderContainer from '../account_timeline/containers/header_container'; |
||||
import { FormattedMessage } from 'react-intl'; |
||||
import { ScrollContainer } from 'react-router-scroll'; |
||||
|
||||
const mapStateToProps = (state, props) => ({ |
||||
medias: getAccountGallery(state, Number(props.params.accountId)), |
||||
isLoading: state.getIn(['timelines', 'accounts_media_timelines', Number(props.params.accountId), 'isLoading']), |
||||
hasMore: !!state.getIn(['timelines', 'accounts_media_timelines', Number(props.params.accountId), 'next']), |
||||
autoPlayGif: state.getIn(['meta', 'auto_play_gif']), |
||||
}); |
||||
|
||||
class AccountGallery extends ImmutablePureComponent { |
||||
|
||||
static propTypes = { |
||||
params: PropTypes.object.isRequired, |
||||
dispatch: PropTypes.func.isRequired, |
||||
medias: ImmutablePropTypes.list.isRequired, |
||||
isLoading: PropTypes.bool, |
||||
hasMore: PropTypes.bool, |
||||
autoPlayGif: PropTypes.bool, |
||||
}; |
||||
|
||||
componentDidMount () { |
||||
this.props.dispatch(fetchAccount(Number(this.props.params.accountId))); |
||||
this.props.dispatch(fetchAccountMediaTimeline(Number(this.props.params.accountId))); |
||||
} |
||||
|
||||
componentWillReceiveProps (nextProps) { |
||||
if (nextProps.params.accountId !== this.props.params.accountId && nextProps.params.accountId) { |
||||
this.props.dispatch(fetchAccount(Number(nextProps.params.accountId))); |
||||
this.props.dispatch(fetchAccountMediaTimeline(Number(this.props.params.accountId))); |
||||
} |
||||
} |
||||
|
||||
handleScroll = (e) => { |
||||
const { scrollTop, scrollHeight, clientHeight } = e.target; |
||||
|
||||
if (scrollTop === scrollHeight - clientHeight) { |
||||
this.props.dispatch(expandAccountMediaTimeline(Number(this.props.params.accountId))); |
||||
} |
||||
} |
||||
|
||||
render () { |
||||
const { medias, autoPlayGif, isLoading } = this.props; |
||||
|
||||
if (!medias && isLoading) { |
||||
return ( |
||||
<Column> |
||||
<LoadingIndicator /> |
||||
</Column> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<Column> |
||||
<ColumnBackButton /> |
||||
|
||||
<ScrollContainer scrollKey='account_gallery'> |
||||
<div className='scrollable' onScroll={this.handleScroll}> |
||||
<HeaderContainer accountId={this.props.params.accountId} /> |
||||
|
||||
<div className='account-section-headline'> |
||||
<FormattedMessage id='account.media' defaultMessage='Media' /> |
||||
</div> |
||||
|
||||
<div className='account-gallery__container'> |
||||
{medias.map(media => |
||||
<MediaItem |
||||
key={media.get('id')} |
||||
media={media} |
||||
autoPlayGif={autoPlayGif} |
||||
/> |
||||
)} |
||||
</div> |
||||
</div> |
||||
</ScrollContainer> |
||||
</Column> |
||||
); |
||||
} |
||||
|
||||
} |
||||
|
||||
export default connect(mapStateToProps)(AccountGallery); |
||||
Loading…
Reference in new issue