diff options
author | Fire Demon <firedemon@creature.cafe> | 2020-10-28 19:11:21 -0500 |
---|---|---|
committer | Fire Demon <firedemon@creature.cafe> | 2020-10-28 19:11:21 -0500 |
commit | 84a56390fda455e4bf42d0d9f44527bfbf207dfc (patch) | |
tree | a951d84e093c2406eb9587e0559ca43cd827625c /app/javascript/flavours/glitch/features/picture_in_picture/components/header.js | |
parent | ecaf21464226b5cecc6d100165f7d1265afdffb9 (diff) | |
parent | 5a41704f8926d9594c66028ca30dc1fc0f98da3d (diff) |
Merge remote-tracking branch 'upstream/master' into dev
Diffstat (limited to 'app/javascript/flavours/glitch/features/picture_in_picture/components/header.js')
-rw-r--r-- | app/javascript/flavours/glitch/features/picture_in_picture/components/header.js | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/features/picture_in_picture/components/header.js b/app/javascript/flavours/glitch/features/picture_in_picture/components/header.js new file mode 100644 index 000000000..24adcde25 --- /dev/null +++ b/app/javascript/flavours/glitch/features/picture_in_picture/components/header.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import PropTypes from 'prop-types'; +import IconButton from 'flavours/glitch/components/icon_button'; +import { Link } from 'react-router-dom'; +import Avatar from 'flavours/glitch/components/avatar'; +import DisplayName from 'flavours/glitch/components/display_name'; + +const mapStateToProps = (state, { accountId }) => ({ + account: state.getIn(['accounts', accountId]), +}); + +export default @connect(mapStateToProps) +class Header extends ImmutablePureComponent { + + static propTypes = { + accountId: PropTypes.string.isRequired, + statusId: PropTypes.string.isRequired, + account: ImmutablePropTypes.map.isRequired, + onClose: PropTypes.func.isRequired, + }; + + render () { + const { account, statusId, onClose } = this.props; + + return ( + <div className='picture-in-picture__header'> + <Link to={`/statuses/${statusId}`} className='picture-in-picture__header__account'> + <Avatar account={account} size={36} /> + <DisplayName account={account} /> + </Link> + + <IconButton icon='times' onClick={onClose} title='Close' /> + </div> + ); + } + +} |