Progress
This commit is contained in:
mgabdev
@@ -2,9 +2,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { List as ImmutableList } from 'immutable'
|
||||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
import { expandAccountFeaturedTimeline, expandAccountTimeline } from '../../actions/timelines'
|
||||
import { fetchAccountIdentityProofs } from '../../actions/identity_proofs'
|
||||
import StatusList from '../../components/status_list'
|
||||
import { expandAccountFeaturedTimeline, expandAccountTimeline } from '../actions/timelines'
|
||||
import { fetchAccountIdentityProofs } from '../actions/identity_proofs'
|
||||
import StatusList from '../components/status_list'
|
||||
|
||||
const messages = defineMessages({
|
||||
empty: { id: 'empty_column.account_timeline', defaultMessage: 'No gabs here!' },
|
||||
@@ -1,105 +0,0 @@
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import InnerHeader from '../inner_header';
|
||||
import MovedNote from '../moved_note';
|
||||
|
||||
export default class Header extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.map,
|
||||
identity_proofs: ImmutablePropTypes.list,
|
||||
onFollow: PropTypes.func.isRequired,
|
||||
onBlock: PropTypes.func.isRequired,
|
||||
onMention: PropTypes.func.isRequired,
|
||||
onRepostToggle: PropTypes.func.isRequired,
|
||||
onReport: PropTypes.func.isRequired,
|
||||
onMute: PropTypes.func.isRequired,
|
||||
onBlockDomain: PropTypes.func.isRequired,
|
||||
onUnblockDomain: PropTypes.func.isRequired,
|
||||
onEndorseToggle: PropTypes.func.isRequired,
|
||||
onAddToList: PropTypes.func.isRequired,
|
||||
domain: PropTypes.string.isRequired,
|
||||
username: PropTypes.string,
|
||||
};
|
||||
|
||||
static contextTypes = {
|
||||
router: PropTypes.object,
|
||||
};
|
||||
|
||||
handleFollow = () => {
|
||||
this.props.onFollow(this.props.account);
|
||||
}
|
||||
|
||||
handleBlock = () => {
|
||||
this.props.onBlock(this.props.account);
|
||||
}
|
||||
|
||||
handleMention = () => {
|
||||
this.props.onMention(this.props.account, this.context.router.history);
|
||||
}
|
||||
|
||||
handleReport = () => {
|
||||
this.props.onReport(this.props.account);
|
||||
}
|
||||
|
||||
handleRepostToggle = () => {
|
||||
this.props.onRepostToggle(this.props.account);
|
||||
}
|
||||
|
||||
handleMute = () => {
|
||||
this.props.onMute(this.props.account);
|
||||
}
|
||||
|
||||
handleBlockDomain = () => {
|
||||
const domain = this.props.account.get('acct').split('@')[1];
|
||||
|
||||
if (!domain) return;
|
||||
|
||||
this.props.onBlockDomain(domain);
|
||||
}
|
||||
|
||||
handleUnblockDomain = () => {
|
||||
const domain = this.props.account.get('acct').split('@')[1];
|
||||
|
||||
if (!domain) return;
|
||||
|
||||
this.props.onUnblockDomain(domain);
|
||||
}
|
||||
|
||||
handleEndorseToggle = () => {
|
||||
this.props.onEndorseToggle(this.props.account);
|
||||
}
|
||||
|
||||
handleAddToList = () => {
|
||||
this.props.onAddToList(this.props.account);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { account, identity_proofs } = this.props;
|
||||
const moved = (account) ? account.get('moved') : false;
|
||||
|
||||
return (
|
||||
<div className='account-timeline__header'>
|
||||
{ moved && <MovedNote from={account} to={account.get('moved')} /> }
|
||||
|
||||
<InnerHeader
|
||||
account={account}
|
||||
identity_proofs={identity_proofs}
|
||||
onFollow={this.handleFollow}
|
||||
onBlock={this.handleBlock}
|
||||
onMention={this.handleMention}
|
||||
onRepostToggle={this.handleRepostToggle}
|
||||
onReport={this.handleReport}
|
||||
onMute={this.handleMute}
|
||||
onBlockDomain={this.handleBlockDomain}
|
||||
onUnblockDomain={this.handleUnblockDomain}
|
||||
onEndorseToggle={this.handleEndorseToggle}
|
||||
onAddToList={this.handleAddToList}
|
||||
domain={this.props.domain}
|
||||
username={this.props.username}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
.account-timeline {
|
||||
&__header {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { default } from './header'
|
||||
@@ -1 +0,0 @@
|
||||
export { default } from './inner_header'
|
||||
@@ -1,337 +0,0 @@
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { debounce } from 'lodash';
|
||||
import Button from '../../../components/button';
|
||||
import { autoPlayGif, me, isStaff } from '../../../initial_state';
|
||||
import Avatar from '../../../components/avatar';
|
||||
import { shortNumberFormat } from '../../../utils/numbers';
|
||||
import ProfileInfoPanel from './profile_info_panel/profile_info_panel';
|
||||
|
||||
const messages = defineMessages({
|
||||
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
|
||||
follow: { id: 'account.follow', defaultMessage: 'Follow' },
|
||||
requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
|
||||
unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
|
||||
edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
|
||||
linkVerifiedOn: { id: 'account.link_verified_on', defaultMessage: 'Ownership of this link was checked on {date}' },
|
||||
account_locked: { id: 'account.locked_info', defaultMessage: 'This account privacy status is set to locked. The owner manually reviews who can follow them.' },
|
||||
mention: { id: 'account.mention', defaultMessage: 'Mention' },
|
||||
unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
|
||||
block: { id: 'account.block', defaultMessage: 'Block @{name}' },
|
||||
mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
|
||||
report: { id: 'account.report', defaultMessage: 'Report @{name}' },
|
||||
share: { id: 'account.share', defaultMessage: 'Share @{name}\'s profile' },
|
||||
media: { id: 'account.media', defaultMessage: 'Media' },
|
||||
blockDomain: { id: 'account.block_domain', defaultMessage: 'Hide everything from {domain}' },
|
||||
unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unhide {domain}' },
|
||||
hideReposts: { id: 'account.hide_reblogs', defaultMessage: 'Hide reposts from @{name}' },
|
||||
showReposts: { id: 'account.show_reblogs', defaultMessage: 'Show reposts from @{name}' },
|
||||
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' },
|
||||
follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' },
|
||||
blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' },
|
||||
domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Hidden domains' },
|
||||
mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
|
||||
endorse: { id: 'account.endorse', defaultMessage: 'Feature on profile' },
|
||||
unendorse: { id: 'account.unendorse', defaultMessage: 'Don\'t feature on profile' },
|
||||
admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
|
||||
add_or_remove_from_list: { id: 'account.add_or_remove_from_list', defaultMessage: 'Add or Remove from lists' },
|
||||
accountFollowsYou: { id: 'account.follows_you', defaultMessage: 'Follows you' },
|
||||
accountBlocked: { id: 'account.blocked', defaultMessage: 'Blocked' },
|
||||
accountMuted: { id: 'account.muted', defaultMessage: 'Muted' },
|
||||
domainBlocked: { id: 'account.domain_blocked', defaultMessage: 'Domain hidden' },
|
||||
});
|
||||
|
||||
export default
|
||||
@injectIntl
|
||||
class Header extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
account: ImmutablePropTypes.map,
|
||||
identity_props: ImmutablePropTypes.list,
|
||||
onFollow: PropTypes.func.isRequired,
|
||||
onBlock: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
domain: PropTypes.string.isRequired,
|
||||
username: PropTypes.string,
|
||||
};
|
||||
|
||||
state = {
|
||||
isSmallScreen: (window.innerWidth <= 895),
|
||||
}
|
||||
|
||||
openEditProfile = () => {
|
||||
window.open('/settings/profile', '_blank');
|
||||
}
|
||||
|
||||
isStatusesPageActive = (match, location) => {
|
||||
if (!match) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return !location.pathname.match(/\/(followers|following|favorites|pins)\/?$/);
|
||||
}
|
||||
|
||||
componentWillMount () {
|
||||
window.addEventListener('resize', this.handleResize, { passive: true });
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
window.removeEventListener('resize', this.handleResize);
|
||||
}
|
||||
|
||||
onChat = () => {
|
||||
const { account } = this.props;
|
||||
|
||||
axios.post('https://chat.gab.com/private-message', {
|
||||
username: account.get('username'),
|
||||
})
|
||||
.then(function (response) {
|
||||
console.log(response);
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
handleResize = debounce(() => {
|
||||
this.setState({ isSmallScreen: (window.innerWidth <= 895) });
|
||||
}, 5, {
|
||||
trailing: true,
|
||||
});
|
||||
|
||||
makeMenu() {
|
||||
const { account, intl, domain } = this.props;
|
||||
|
||||
let menu = [];
|
||||
|
||||
if (!account || !me) {
|
||||
return [];
|
||||
}
|
||||
|
||||
if ('share' in navigator) {
|
||||
menu.push({ text: intl.formatMessage(messages.share, { name: account.get('username') }), action: this.handleShare });
|
||||
menu.push(null);
|
||||
}
|
||||
|
||||
if (account.get('id') === me) {
|
||||
menu.push({ text: intl.formatMessage(messages.edit_profile), href: '/settings/profile' });
|
||||
menu.push({ text: intl.formatMessage(messages.preferences), href: '/settings/preferences' });
|
||||
menu.push(null);
|
||||
menu.push({ text: intl.formatMessage(messages.follow_requests), to: '/follow_requests' });
|
||||
menu.push(null);
|
||||
menu.push({ text: intl.formatMessage(messages.mutes), to: '/mutes' });
|
||||
menu.push({ text: intl.formatMessage(messages.blocks), to: '/blocks' });
|
||||
menu.push({ text: intl.formatMessage(messages.domain_blocks), to: '/domain_blocks' });
|
||||
} else {
|
||||
menu.push({ text: intl.formatMessage(messages.mention, { name: account.get('acct') }), action: this.props.onMention });
|
||||
|
||||
if (account.getIn(['relationship', 'following'])) {
|
||||
if (account.getIn(['relationship', 'showing_reblogs'])) {
|
||||
menu.push({ text: intl.formatMessage(messages.hideReposts, { name: account.get('username') }), action: this.props.onRepostToggle });
|
||||
} else {
|
||||
menu.push({ text: intl.formatMessage(messages.showReposts, { name: account.get('username') }), action: this.props.onRepostToggle });
|
||||
}
|
||||
|
||||
menu.push({ text: intl.formatMessage(messages.add_or_remove_from_list), action: this.props.onAddToList });
|
||||
menu.push({ text: intl.formatMessage(account.getIn(['relationship', 'endorsed']) ? messages.unendorse : messages.endorse), action: this.props.onEndorseToggle });
|
||||
menu.push(null);
|
||||
}
|
||||
|
||||
if (account.getIn(['relationship', 'muting'])) {
|
||||
menu.push({ text: intl.formatMessage(messages.unmute, { name: account.get('username') }), action: this.props.onMute });
|
||||
} else {
|
||||
menu.push({ text: intl.formatMessage(messages.mute, { name: account.get('username') }), action: this.props.onMute });
|
||||
}
|
||||
|
||||
if (account.getIn(['relationship', 'blocking'])) {
|
||||
menu.push({ text: intl.formatMessage(messages.unblock, { name: account.get('username') }), action: this.props.onBlock });
|
||||
} else {
|
||||
menu.push({ text: intl.formatMessage(messages.block, { name: account.get('username') }), action: this.props.onBlock });
|
||||
}
|
||||
|
||||
menu.push({ text: intl.formatMessage(messages.report, { name: account.get('username') }), action: this.props.onReport });
|
||||
}
|
||||
|
||||
if (account.get('acct') !== account.get('username')) {
|
||||
const domain = account.get('acct').split('@')[1];
|
||||
|
||||
menu.push(null);
|
||||
|
||||
if (account.getIn(['relationship', 'domain_blocking'])) {
|
||||
menu.push({ text: intl.formatMessage(messages.unblockDomain, { domain }), action: this.props.onUnblockDomain });
|
||||
} else {
|
||||
menu.push({ text: intl.formatMessage(messages.blockDomain, { domain }), action: this.props.onBlockDomain });
|
||||
}
|
||||
}
|
||||
|
||||
if (account.get('id') !== me && isStaff) {
|
||||
menu.push(null);
|
||||
menu.push({ text: intl.formatMessage(messages.admin_account, { name: account.get('username') }), href: `/admin/accounts/${account.get('id')}` });
|
||||
}
|
||||
|
||||
return menu;
|
||||
}
|
||||
|
||||
makeInfo() {
|
||||
const { account, intl } = this.props;
|
||||
|
||||
let info = [];
|
||||
|
||||
if (!account || !me) return info;
|
||||
|
||||
if (me !== account.get('id') && account.getIn(['relationship', 'followed_by'])) {
|
||||
info.push(<span key='followed_by' className='relationship-tag'>{intl.formatMessage(messages.accountFollowsYou)}</span>);
|
||||
} else if (me !== account.get('id') && account.getIn(['relationship', 'blocking'])) {
|
||||
info.push(<span key='blocked' className='relationship-tag'>{intl.formatMessage(messages.accountBlocked)}</span>);
|
||||
}
|
||||
|
||||
if (me !== account.get('id') && account.getIn(['relationship', 'muting'])) {
|
||||
info.push(<span key='muted' className='relationship-tag'>{intl.formatMessage(messages.accountMuted)}</span>);
|
||||
} else if (me !== account.get('id') && account.getIn(['relationship', 'domain_blocking'])) {
|
||||
info.push(<span key='domain_blocked' className='relationship-tag'>{intl.formatMessage(messages.domainBlocked)}</span>);
|
||||
}
|
||||
|
||||
return info;
|
||||
};
|
||||
|
||||
getActionBtn() {
|
||||
const { account, intl } = this.props;
|
||||
|
||||
let actionBtn = null;
|
||||
|
||||
if (!account || !me) return actionBtn;
|
||||
|
||||
if (me !== account.get('id')) {
|
||||
if (!account.get('relationship')) { // Wait until the relationship is loaded
|
||||
//
|
||||
} else if (account.getIn(['relationship', 'requested'])) {
|
||||
actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.requested)} onClick={this.props.onFollow} />;
|
||||
} else if (!account.getIn(['relationship', 'blocking'])) {
|
||||
actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames('logo-button', { 'button--destructive': account.getIn(['relationship', 'following']) })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.props.onFollow} />;
|
||||
} else if (account.getIn(['relationship', 'blocking'])) {
|
||||
actionBtn = <Button className='logo-button' text={intl.formatMessage(messages.unblock, { name: account.get('username') })} onClick={this.props.onBlock} />;
|
||||
}
|
||||
}
|
||||
|
||||
return actionBtn;
|
||||
};
|
||||
|
||||
render () {
|
||||
const { account, intl, domain, username } = this.props;
|
||||
const { isSmallScreen } = this.state;
|
||||
|
||||
if (!account) {
|
||||
return (
|
||||
<div className='account__header'>
|
||||
<div className='account__header__image account__header__image--none'></div>
|
||||
<div className='account__header__bar'>
|
||||
<div className='account__header__extra'>
|
||||
<div className='account__header__avatar'></div>
|
||||
</div>
|
||||
{
|
||||
isSmallScreen &&
|
||||
<div className='account-mobile-container account-mobile-container--nonuser'>
|
||||
<ProfileInfoPanel username={username} />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const info = this.makeInfo();
|
||||
const actionBtn = this.getActionBtn();
|
||||
const menu = this.makeMenu();
|
||||
|
||||
const content = { __html: account.get('note_emojified') };
|
||||
const fields = account.get('fields');
|
||||
const acct = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
|
||||
|
||||
const headerImgSrc = autoPlayGif ? account.get('header') : account.get('header_static');
|
||||
const headerMissing = (headerImgSrc.indexOf('/headers/original/missing.png') > -1);
|
||||
|
||||
const avatarSize = isSmallScreen ? 90 : 200;
|
||||
|
||||
return (
|
||||
<div className={classNames('account__header', { inactive: !!account.get('moved') })}>
|
||||
<div className={classNames('account__header__image', { 'account__header__image--none': headerMissing })}>
|
||||
<div className='account__header__info'>
|
||||
{info}
|
||||
</div>
|
||||
|
||||
<img src={headerImgSrc} alt='' className='parallax' />
|
||||
</div>
|
||||
|
||||
<div className='account__header__bar'>
|
||||
<div className='account__header__extra'>
|
||||
|
||||
<div className='account__header__avatar'>
|
||||
<Avatar account={account} size={avatarSize} />
|
||||
</div>
|
||||
|
||||
<div className='account__header__extra__links'>
|
||||
|
||||
<NavLink isActive={this.isStatusesPageActive} activeClassName='active' to={`/${account.get('acct')}`} title={intl.formatNumber(account.get('statuses_count'))}>
|
||||
{shortNumberFormat(account.get('statuses_count'))}
|
||||
<FormattedMessage id='account.posts' defaultMessage='Gabs' />
|
||||
</NavLink>
|
||||
|
||||
<NavLink exact activeClassName='active' to={`/${account.get('acct')}/following`} title={intl.formatNumber(account.get('following_count'))}>
|
||||
{shortNumberFormat(account.get('following_count'))}
|
||||
<FormattedMessage id='account.follows' defaultMessage='Follows' />
|
||||
</NavLink>
|
||||
|
||||
<NavLink exact activeClassName='active' to={`/${account.get('acct')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
|
||||
{shortNumberFormat(account.get('followers_count'))}
|
||||
<FormattedMessage id='account.followers' defaultMessage='Followers' />
|
||||
</NavLink>
|
||||
|
||||
{
|
||||
account.get('id') === me &&
|
||||
<div>
|
||||
<NavLink exact activeClassName='active' to={`/${account.get('acct')}/favorites`} title={intl.formatNumber(account.get('favourite_count'))}>
|
||||
{ /* : TODO : shortNumberFormat(account.get('favourite_count')) */ }
|
||||
<span>•</span>
|
||||
<FormattedMessage id='navigation_bar.favorites' defaultMessage='Favorites' />
|
||||
</NavLink>
|
||||
<NavLink exact activeClassName='active' to={`/${account.get('acct')}/pins`} title={intl.formatNumber(account.get('pinned_count'))}>
|
||||
{ /* : TODO : shortNumberFormat(account.get('pinned_count')) */ }
|
||||
<span>•</span>
|
||||
<FormattedMessage id='navigation_bar.pins' defaultMessage='Pins' />
|
||||
</NavLink>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
{
|
||||
isSmallScreen &&
|
||||
<div className='account-mobile-container'>
|
||||
<ProfileInfoPanel username={username} account={account} />
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
me &&
|
||||
<div className='account__header__extra__buttons'>
|
||||
{actionBtn}
|
||||
{account.get('id') !== me &&
|
||||
<Button className='button button--alternative-2' onClick={this.props.onMention}>
|
||||
<FormattedMessage id='account.mention' defaultMessage='Mention' values={{
|
||||
name: account.get('acct')
|
||||
}} />
|
||||
</Button>
|
||||
}
|
||||
{/*<DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' />*/}
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
.relationship-tag {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
vertical-align: top;
|
||||
color: $primary-text-color;
|
||||
background-color: $base-overlay-background;
|
||||
text-transform: uppercase;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
opacity: 0.7;
|
||||
|
||||
@include text-sizing(11px, 500);
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { default } from './moved_note'
|
||||
@@ -1,47 +0,0 @@
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import DisplayName from '../../../../components/display_name';
|
||||
import Icon from '../../../../components/icon';
|
||||
|
||||
export default class MovedNote extends ImmutablePureComponent {
|
||||
|
||||
static contextTypes = {
|
||||
router: PropTypes.object,
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
to: ImmutablePropTypes.map.isRequired,
|
||||
};
|
||||
|
||||
render () {
|
||||
const { to } = this.props;
|
||||
const displayNameHtml = { __html: from.get('display_name_html') };
|
||||
|
||||
return (
|
||||
<div className='moved-note'>
|
||||
<div className='moved-note__message'>
|
||||
<div className='moved-note__icon-wrapper'>
|
||||
<Icon id='suitcase' className='moved-note__icon' fixedWidth />
|
||||
</div>
|
||||
<FormattedMessage
|
||||
id='account.moved_to'
|
||||
defaultMessage='{name} has moved to:'
|
||||
values={{
|
||||
name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi>
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<NavLink to={`/${this.props.to.get('acct')}`} className='moved-note__display-name'>
|
||||
<div className='moved-note__display-avatar'>
|
||||
<Avatar account={to} />
|
||||
</div>
|
||||
<DisplayName account={to} />
|
||||
</NavLink>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
.moved-note {
|
||||
padding: 14px 10px 16px 10px;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border-top: 1px solid lighten($ui-base-color, 8%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
|
||||
&__message {
|
||||
position: relative;
|
||||
margin-left: 58px;
|
||||
color: $dark-text-color;
|
||||
padding-bottom: 4px;
|
||||
font-size: 14px;
|
||||
|
||||
>span {
|
||||
display: block;
|
||||
|
||||
@include text-overflow;
|
||||
}
|
||||
}
|
||||
|
||||
&__icon-wrapper {
|
||||
left: -26px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&__display-name {
|
||||
display: block;
|
||||
color: $secondary-text-color;
|
||||
margin-bottom: 0;
|
||||
line-height: 24px;
|
||||
overflow: hidden;
|
||||
|
||||
strong,
|
||||
span {
|
||||
display: block;
|
||||
|
||||
@include text-overflow;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-size: 16px;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
&:hover strong {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&__display-avatar {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
@@ -1,117 +0,0 @@
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import { List as ImmutableList } from 'immutable';
|
||||
import {
|
||||
followAccount,
|
||||
unfollowAccount,
|
||||
blockAccount,
|
||||
unblockAccount,
|
||||
unmuteAccount,
|
||||
pinAccount,
|
||||
unpinAccount,
|
||||
} from '../../../actions/accounts';
|
||||
import {
|
||||
mentionCompose,
|
||||
} from '../../../actions/compose';
|
||||
import { initMuteModal } from '../../../actions/mutes';
|
||||
import { initReport } from '../../../actions/reports';
|
||||
import { openModal } from '../../../actions/modal';
|
||||
import { blockDomain, unblockDomain } from '../../../actions/domain_blocks';
|
||||
import { unfollowModal } from '../../../initial_state';
|
||||
import { makeGetAccount } from '../../../selectors';
|
||||
import Header from '../components/header';
|
||||
|
||||
const messages = defineMessages({
|
||||
unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
|
||||
blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Hide entire domain' },
|
||||
blockAndReport: { id: 'confirmations.block.block_and_report', defaultMessage: 'Block & Report' },
|
||||
});
|
||||
|
||||
const makeMapStateToProps = () => {
|
||||
const getAccount = makeGetAccount();
|
||||
|
||||
const mapStateToProps = (state, { accountId }) => ({
|
||||
account: getAccount(state, accountId),
|
||||
domain: state.getIn(['meta', 'domain']),
|
||||
identity_proofs: state.getIn(['identity_proofs', accountId], ImmutableList()),
|
||||
});
|
||||
|
||||
return mapStateToProps;
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch, { intl }) => ({
|
||||
|
||||
onFollow (account) {
|
||||
if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
|
||||
if (unfollowModal) {
|
||||
dispatch(openModal('UNFOLLOW', {
|
||||
accountId: account.get('id'),
|
||||
}))
|
||||
} else {
|
||||
dispatch(unfollowAccount(account.get('id')))
|
||||
}
|
||||
} else {
|
||||
dispatch(followAccount(account.get('id')))
|
||||
}
|
||||
},
|
||||
|
||||
onBlock (account) {
|
||||
if (account.getIn(['relationship', 'blocking'])) {
|
||||
dispatch(unblockAccount(account.get('id')));
|
||||
} else {
|
||||
dispatch(openModal('BLOCK_ACCOUNT', {
|
||||
accountId: account.get('id'),
|
||||
}));
|
||||
}
|
||||
},
|
||||
|
||||
onMention (account, router) {
|
||||
dispatch(mentionCompose(account, router));
|
||||
},
|
||||
|
||||
onRepostToggle (account) {
|
||||
if (account.getIn(['relationship', 'showing_reblogs'])) {
|
||||
dispatch(followAccount(account.get('id'), false));
|
||||
} else {
|
||||
dispatch(followAccount(account.get('id'), true));
|
||||
}
|
||||
},
|
||||
|
||||
onEndorseToggle (account) {
|
||||
if (account.getIn(['relationship', 'endorsed'])) {
|
||||
dispatch(unpinAccount(account.get('id')));
|
||||
} else {
|
||||
dispatch(pinAccount(account.get('id')));
|
||||
}
|
||||
},
|
||||
|
||||
onReport (account) {
|
||||
dispatch(initReport(account));
|
||||
},
|
||||
|
||||
onMute (account) {
|
||||
if (account.getIn(['relationship', 'muting'])) {
|
||||
dispatch(unmuteAccount(account.get('id')));
|
||||
} else {
|
||||
dispatch(initMuteModal(account));
|
||||
}
|
||||
},
|
||||
|
||||
onBlockDomain (domain) {
|
||||
dispatch(openModal('BLOCK_DOMAIN', {
|
||||
domain,
|
||||
}));
|
||||
},
|
||||
|
||||
onUnblockDomain (domain) {
|
||||
dispatch(unblockDomain(domain));
|
||||
},
|
||||
|
||||
onAddToList(account){
|
||||
dispatch(openModal('LIST_ADDER', {
|
||||
accountId: account.get('id'),
|
||||
}));
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Header));
|
||||
@@ -1 +0,0 @@
|
||||
export { default } from './account_timeline'
|
||||
@@ -11,6 +11,7 @@ export default class ComposeExtraButton extends PureComponent {
|
||||
icon: PropTypes.string,
|
||||
small: PropTypes.bool,
|
||||
active: PropTypes.bool,
|
||||
buttonRef: PropTypes.func,
|
||||
}
|
||||
|
||||
render() {
|
||||
@@ -21,16 +22,12 @@ export default class ComposeExtraButton extends PureComponent {
|
||||
icon,
|
||||
children,
|
||||
small,
|
||||
active
|
||||
active,
|
||||
buttonRef
|
||||
} = this.props
|
||||
|
||||
const containerClasses = cx({
|
||||
default: 1,
|
||||
mr10: !small,
|
||||
mr2: small,
|
||||
})
|
||||
|
||||
const btnClasses = cx({
|
||||
backgroundSubtle_onHover: 1,
|
||||
backgroundColorBrandLight: active,
|
||||
py10: !small,
|
||||
px10: !small,
|
||||
@@ -43,16 +40,16 @@ export default class ComposeExtraButton extends PureComponent {
|
||||
fillColorWhite: active,
|
||||
})
|
||||
|
||||
const iconSize = !!small ? '12px' : '18px'
|
||||
const iconSize = !!small ? '12px' : '16px'
|
||||
|
||||
return (
|
||||
<div className={containerClasses} data-tip={title}>
|
||||
<div className={[_s.default, _s.mr2].join(' ')} ref={buttonRef}>
|
||||
<Button
|
||||
className={btnClasses}
|
||||
title={title}
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
backgroundColor='secondary'
|
||||
backgroundColor='none'
|
||||
iconClassName={iconClasses}
|
||||
icon={icon}
|
||||
iconWidth={iconSize}
|
||||
|
||||
@@ -1,29 +1,30 @@
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { length } from 'stringz';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { defineMessages, injectIntl } from 'react-intl'
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component'
|
||||
import { length } from 'stringz'
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes'
|
||||
import classNames from 'classnames/bind'
|
||||
import CharacterCounter from '../character_counter';
|
||||
import UploadForm from '../upload_form';
|
||||
import ReplyIndicatorContainer from '../../containers/reply_indicator_container';
|
||||
import AutosuggestTextbox from '../../../../components/autosuggest_textbox';
|
||||
import PollButton from '../../components/poll_button';
|
||||
import UploadButton from '../../components/upload_button';
|
||||
import SpoilerButton from '../../components/spoiler_button';
|
||||
import PostPrivacyButton from '../../../../components/post_privacy_button';
|
||||
import CharacterCounter from '../character_counter'
|
||||
import UploadForm from '../upload_form'
|
||||
import ReplyIndicatorContainer from '../../containers/reply_indicator_container'
|
||||
import AutosuggestTextbox from '../../../../components/autosuggest_textbox'
|
||||
import PollButton from '../../components/poll_button'
|
||||
import UploadButton from '../../components/upload_button'
|
||||
import SpoilerButton from '../../components/spoiler_button'
|
||||
import RichTextEditorButton from '../../components/rich_text_editor_button'
|
||||
import GifSelectorButton from '../../components/gif_selector_button'
|
||||
import StatusVisibilityButton from '../../components/status_visibility_button'
|
||||
import EmojiPickerButton from '../../components/emoji_picker_button'
|
||||
import EmojiPickerDropdown from '../../containers/emoji_picker_dropdown_container';
|
||||
import PollFormContainer from '../../containers/poll_form_container';
|
||||
import SchedulePostDropdown from '../../components/schedule_post_dropdown';
|
||||
import QuotedStatusPreviewContainer from '../../containers/quoted_status_preview_container';
|
||||
import Icon from '../../../../components/icon';
|
||||
import Button from '../../../../components/button';
|
||||
import PollFormContainer from '../../containers/poll_form_container'
|
||||
import SchedulePostDropdown from '../../components/schedule_post_dropdown'
|
||||
import QuotedStatusPreviewContainer from '../../containers/quoted_status_preview_container'
|
||||
import Icon from '../../../../components/icon'
|
||||
import Button from '../../../../components/button'
|
||||
import Avatar from '../../../../components/avatar'
|
||||
import { isMobile } from '../../../../utils/is_mobile';
|
||||
import { countableText } from '../../util/counter';
|
||||
import { isMobile } from '../../../../utils/is_mobile'
|
||||
import { countableText } from '../../util/counter'
|
||||
|
||||
const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
|
||||
const maxPostCharacterCount = 3000;
|
||||
const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d'
|
||||
const maxPostCharacterCount = 3000
|
||||
|
||||
const messages = defineMessages({
|
||||
placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
|
||||
@@ -266,6 +267,7 @@ class ComposeForm extends ImmutablePureComponent {
|
||||
pb10: 1,
|
||||
borderBottom1PX: 1,
|
||||
borderColorSecondary: 1,
|
||||
mb10: 1,
|
||||
displayNone: !spoiler
|
||||
})
|
||||
|
||||
@@ -303,11 +305,6 @@ class ComposeForm extends ImmutablePureComponent {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{ /*
|
||||
<div className='emoji-picker-wrapper'>
|
||||
<EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
|
||||
</div> */ }
|
||||
|
||||
<AutosuggestTextbox
|
||||
ref={(isModalOpen && shouldCondense) ? null : this.setAutosuggestTextarea}
|
||||
placeholder={intl.formatMessage(messages.placeholder)}
|
||||
@@ -340,16 +337,18 @@ class ComposeForm extends ImmutablePureComponent {
|
||||
|
||||
<div className={actionsContainerClasses}>
|
||||
<div className={[_s.default, _s.flexRow, _s.marginRightAuto].join(' ')}>
|
||||
<RichTextEditorButton small={shouldCondense} />
|
||||
<UploadButton small={shouldCondense} />
|
||||
{
|
||||
!edit && <PollButton small={shouldCondense} />
|
||||
}
|
||||
{
|
||||
!shouldCondense &&
|
||||
<PostPrivacyButton />
|
||||
<StatusVisibilityButton small={shouldCondense} />
|
||||
}
|
||||
<SpoilerButton small={shouldCondense} />
|
||||
<SchedulePostDropdown small={shouldCondense} position={isModalOpen ? 'top' : undefined} />
|
||||
<GifSelectorButton small={shouldCondense} />
|
||||
<EmojiPickerButton small={shouldCondense} />
|
||||
</div>
|
||||
<CharacterCounter max={maxPostCharacterCount} text={text} small={shouldCondense} />
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
import { addPoll, removePoll } from '../../../actions/compose'
|
||||
import { defineMessages, injectIntl } from 'react-intl'
|
||||
import { openPopover } from '../../../actions/popover'
|
||||
import ComposeExtraButton from './compose_extra_button'
|
||||
|
||||
const messages = defineMessages({
|
||||
emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
|
||||
})
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
// unavailable: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 0),
|
||||
// active: state.getIn(['compose', 'poll']) !== null,
|
||||
@@ -8,46 +13,47 @@ const mapStateToProps = state => ({
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
|
||||
onClick() {
|
||||
dispatch((_, getState) => {
|
||||
if (getState().getIn(['compose', 'poll'])) {
|
||||
dispatch(removePoll())
|
||||
} else {
|
||||
dispatch(addPoll())
|
||||
}
|
||||
})
|
||||
onClick(targetRef) {
|
||||
dispatch(openPopover('EMOJI_PICKER', {
|
||||
targetRef,
|
||||
}))
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
export default
|
||||
@injectIntl
|
||||
@connect(mapStateToProps, mapDispatchToProps)
|
||||
class EmojiPickerButton extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
disabled: PropTypes.bool,
|
||||
unavailable: PropTypes.bool,
|
||||
active: PropTypes.bool,
|
||||
intl: PropTypes.object.isRequired,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
active: PropTypes.bool,
|
||||
small: PropTypes.bool,
|
||||
}
|
||||
|
||||
handleClick = () => {
|
||||
this.props.onClick()
|
||||
this.props.onClick(this.button)
|
||||
}
|
||||
|
||||
setButton = (n) => {
|
||||
this.button = n
|
||||
}
|
||||
|
||||
render() {
|
||||
const { active, unavailable, disabled, small } = this.props
|
||||
const { active, small, intl } = this.props
|
||||
|
||||
if (unavailable) return null
|
||||
const title = intl.formatMessage(messages.emoji)
|
||||
|
||||
return (
|
||||
<ComposeExtraButton
|
||||
disabled={disabled}
|
||||
onClick={this.handleClick}
|
||||
icon='happy'
|
||||
title={title}
|
||||
small={small}
|
||||
active={active}
|
||||
buttonRef={this.setButton}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,392 +0,0 @@
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import detectPassiveEvents from 'detect-passive-events';
|
||||
import Overlay from 'react-overlays/lib/Overlay';
|
||||
import { EmojiPicker as EmojiPickerAsync } from '../../../ui/util/async_components';
|
||||
import { buildCustomEmojis } from '../../../../components/emoji/emoji';
|
||||
|
||||
const messages = defineMessages({
|
||||
emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
|
||||
emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search...' },
|
||||
emoji_not_found: { id: 'emoji_button.not_found', defaultMessage: 'No emojos!! (╯°□°）╯︵ ┻━┻' },
|
||||
custom: { id: 'emoji_button.custom', defaultMessage: 'Custom' },
|
||||
recent: { id: 'emoji_button.recent', defaultMessage: 'Frequently used' },
|
||||
search_results: { id: 'emoji_button.search_results', defaultMessage: 'Search results' },
|
||||
people: { id: 'emoji_button.people', defaultMessage: 'People' },
|
||||
nature: { id: 'emoji_button.nature', defaultMessage: 'Nature' },
|
||||
food: { id: 'emoji_button.food', defaultMessage: 'Food & Drink' },
|
||||
activity: { id: 'emoji_button.activity', defaultMessage: 'Activity' },
|
||||
travel: { id: 'emoji_button.travel', defaultMessage: 'Travel & Places' },
|
||||
objects: { id: 'emoji_button.objects', defaultMessage: 'Objects' },
|
||||
symbols: { id: 'emoji_button.symbols', defaultMessage: 'Symbols' },
|
||||
flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' },
|
||||
});
|
||||
|
||||
const assetHost = process.env.CDN_HOST || '';
|
||||
let EmojiPicker, Emoji; // load asynchronously
|
||||
|
||||
const backgroundImageFn = () => `${assetHost}/emoji/sheet_10.png`;
|
||||
const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false;
|
||||
|
||||
const categoriesSort = [
|
||||
'recent',
|
||||
'custom',
|
||||
'people',
|
||||
'nature',
|
||||
'foods',
|
||||
'activity',
|
||||
'places',
|
||||
'objects',
|
||||
'symbols',
|
||||
'flags',
|
||||
];
|
||||
|
||||
class ModifierPickerMenu extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
active: PropTypes.bool,
|
||||
onSelect: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
handleClick = e => {
|
||||
this.props.onSelect(e.currentTarget.getAttribute('data-index') * 1);
|
||||
}
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (nextProps.active) {
|
||||
this.attachListeners();
|
||||
} else {
|
||||
this.removeListeners();
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
this.removeListeners();
|
||||
}
|
||||
|
||||
handleDocumentClick = e => {
|
||||
if (this.node && !this.node.contains(e.target)) {
|
||||
this.props.onClose();
|
||||
}
|
||||
}
|
||||
|
||||
attachListeners () {
|
||||
document.addEventListener('click', this.handleDocumentClick, false);
|
||||
document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
|
||||
}
|
||||
|
||||
removeListeners () {
|
||||
document.removeEventListener('click', this.handleDocumentClick, false);
|
||||
document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
|
||||
}
|
||||
|
||||
setRef = c => {
|
||||
this.node = c;
|
||||
}
|
||||
|
||||
render () {
|
||||
const { active } = this.props;
|
||||
|
||||
return (
|
||||
<div className='emoji-picker-dropdown__modifiers__menu' style={{ display: active ? 'block' : 'none' }} ref={this.setRef}>
|
||||
<button onClick={this.handleClick} data-index={1}>
|
||||
<Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={1} backgroundImageFn={backgroundImageFn} />
|
||||
</button>
|
||||
<button onClick={this.handleClick} data-index={2}>
|
||||
<Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={2} backgroundImageFn={backgroundImageFn} />
|
||||
</button>
|
||||
<button onClick={this.handleClick} data-index={3}>
|
||||
<Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={3} backgroundImageFn={backgroundImageFn} />
|
||||
</button>
|
||||
<button onClick={this.handleClick} data-index={4}>
|
||||
<Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={4} backgroundImageFn={backgroundImageFn} />
|
||||
</button>
|
||||
<button onClick={this.handleClick} data-index={5}>
|
||||
<Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={5} backgroundImageFn={backgroundImageFn} />
|
||||
</button>
|
||||
<button onClick={this.handleClick} data-index={6}>
|
||||
<Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={6} backgroundImageFn={backgroundImageFn} />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class ModifierPicker extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
active: PropTypes.bool,
|
||||
modifier: PropTypes.number,
|
||||
onChange: PropTypes.func,
|
||||
onClose: PropTypes.func,
|
||||
onOpen: PropTypes.func,
|
||||
};
|
||||
|
||||
handleClick = () => {
|
||||
if (this.props.active) {
|
||||
this.props.onClose();
|
||||
} else {
|
||||
this.props.onOpen();
|
||||
}
|
||||
}
|
||||
|
||||
handleSelect = modifier => {
|
||||
this.props.onChange(modifier);
|
||||
this.props.onClose();
|
||||
}
|
||||
|
||||
render () {
|
||||
const { active, modifier } = this.props;
|
||||
|
||||
return (
|
||||
<div className='emoji-picker-dropdown__modifiers'>
|
||||
<Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={this.handleClick} backgroundImageFn={backgroundImageFn} />
|
||||
<ModifierPickerMenu active={active} onSelect={this.handleSelect} onClose={this.props.onClose} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@injectIntl
|
||||
class EmojiPickerMenu extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
custom_emojis: ImmutablePropTypes.list,
|
||||
frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.string),
|
||||
loading: PropTypes.bool,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
onPick: PropTypes.func.isRequired,
|
||||
style: PropTypes.object,
|
||||
placement: PropTypes.string,
|
||||
arrowOffsetLeft: PropTypes.string,
|
||||
arrowOffsetTop: PropTypes.string,
|
||||
intl: PropTypes.object.isRequired,
|
||||
skinTone: PropTypes.number.isRequired,
|
||||
onSkinTone: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
style: {},
|
||||
loading: true,
|
||||
frequentlyUsedEmojis: [],
|
||||
};
|
||||
|
||||
state = {
|
||||
modifierOpen: false,
|
||||
placement: null,
|
||||
};
|
||||
|
||||
handleDocumentClick = e => {
|
||||
if (this.node && !this.node.contains(e.target)) {
|
||||
this.props.onClose();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
document.addEventListener('click', this.handleDocumentClick, false);
|
||||
document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
document.removeEventListener('click', this.handleDocumentClick, false);
|
||||
document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
|
||||
}
|
||||
|
||||
setRef = c => {
|
||||
this.node = c;
|
||||
}
|
||||
|
||||
getI18n = () => {
|
||||
const { intl } = this.props;
|
||||
|
||||
return {
|
||||
search: intl.formatMessage(messages.emoji_search),
|
||||
notfound: intl.formatMessage(messages.emoji_not_found),
|
||||
categories: {
|
||||
search: intl.formatMessage(messages.search_results),
|
||||
recent: intl.formatMessage(messages.recent),
|
||||
people: intl.formatMessage(messages.people),
|
||||
nature: intl.formatMessage(messages.nature),
|
||||
foods: intl.formatMessage(messages.food),
|
||||
activity: intl.formatMessage(messages.activity),
|
||||
places: intl.formatMessage(messages.travel),
|
||||
objects: intl.formatMessage(messages.objects),
|
||||
symbols: intl.formatMessage(messages.symbols),
|
||||
flags: intl.formatMessage(messages.flags),
|
||||
custom: intl.formatMessage(messages.custom),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
handleClick = emoji => {
|
||||
if (!emoji.native) {
|
||||
emoji.native = emoji.colons;
|
||||
}
|
||||
|
||||
this.props.onClose();
|
||||
this.props.onPick(emoji);
|
||||
}
|
||||
|
||||
handleModifierOpen = () => {
|
||||
this.setState({ modifierOpen: true });
|
||||
}
|
||||
|
||||
handleModifierClose = () => {
|
||||
this.setState({ modifierOpen: false });
|
||||
}
|
||||
|
||||
handleModifierChange = modifier => {
|
||||
this.props.onSkinTone(modifier);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { loading, style, intl, custom_emojis, skinTone, frequentlyUsedEmojis } = this.props;
|
||||
|
||||
if (loading) {
|
||||
return <div style={{ width: 299 }} />;
|
||||
}
|
||||
|
||||
const title = intl.formatMessage(messages.emoji);
|
||||
const { modifierOpen } = this.state;
|
||||
|
||||
return (
|
||||
<div className={classNames('emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={this.setRef}>
|
||||
<EmojiPicker
|
||||
perLine={8}
|
||||
emojiSize={22}
|
||||
sheetSize={32}
|
||||
custom={buildCustomEmojis(custom_emojis)}
|
||||
color=''
|
||||
emoji=''
|
||||
set='twitter'
|
||||
title={title}
|
||||
i18n={this.getI18n()}
|
||||
onClick={this.handleClick}
|
||||
include={categoriesSort}
|
||||
recent={frequentlyUsedEmojis}
|
||||
skin={skinTone}
|
||||
showPreview={false}
|
||||
backgroundImageFn={backgroundImageFn}
|
||||
autoFocus
|
||||
emojiTooltip
|
||||
/>
|
||||
|
||||
<ModifierPicker
|
||||
active={modifierOpen}
|
||||
modifier={skinTone}
|
||||
onOpen={this.handleModifierOpen}
|
||||
onClose={this.handleModifierClose}
|
||||
onChange={this.handleModifierChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default
|
||||
@injectIntl
|
||||
class EmojiPickerDropdown extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
custom_emojis: ImmutablePropTypes.list,
|
||||
frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.string),
|
||||
intl: PropTypes.object.isRequired,
|
||||
onPickEmoji: PropTypes.func.isRequired,
|
||||
onSkinTone: PropTypes.func.isRequired,
|
||||
skinTone: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
state = {
|
||||
active: false,
|
||||
loading: false,
|
||||
};
|
||||
|
||||
setRef = (c) => {
|
||||
this.dropdown = c;
|
||||
}
|
||||
|
||||
onShowDropdown = ({ target }) => {
|
||||
this.setState({ active: true });
|
||||
|
||||
if (!EmojiPicker) {
|
||||
this.setState({ loading: true });
|
||||
|
||||
EmojiPickerAsync().then(EmojiMart => {
|
||||
EmojiPicker = EmojiMart.Picker;
|
||||
Emoji = EmojiMart.Emoji;
|
||||
|
||||
this.setState({ loading: false });
|
||||
}).catch(() => {
|
||||
this.setState({ loading: false });
|
||||
});
|
||||
}
|
||||
|
||||
const { top } = target.getBoundingClientRect();
|
||||
this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' });
|
||||
}
|
||||
|
||||
onHideDropdown = () => {
|
||||
this.setState({ active: false });
|
||||
}
|
||||
|
||||
onToggle = (e) => {
|
||||
if (!this.state.loading && (!e.key || e.key === 'Enter')) {
|
||||
if (this.state.active) {
|
||||
this.onHideDropdown();
|
||||
} else {
|
||||
this.onShowDropdown(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
handleKeyDown = e => {
|
||||
if (e.key === 'Escape') {
|
||||
this.onHideDropdown();
|
||||
}
|
||||
}
|
||||
|
||||
setTargetRef = c => {
|
||||
this.target = c;
|
||||
}
|
||||
|
||||
findTarget = () => {
|
||||
return this.target;
|
||||
}
|
||||
|
||||
render () {
|
||||
const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
|
||||
const title = intl.formatMessage(messages.emoji);
|
||||
const { active, loading, placement } = this.state;
|
||||
|
||||
return (
|
||||
<div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown}>
|
||||
<div ref={this.setTargetRef} className='emoji-button' title={title} aria-label={title} aria-expanded={active} role='button' onClick={this.onToggle} onKeyDown={this.onToggle} tabIndex={0}>
|
||||
<img
|
||||
className={classNames('emojione', { 'pulse-loading': active && loading })}
|
||||
alt='🙂'
|
||||
src={`${assetHost}/emoji/1f602.svg`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Overlay show={active} placement={placement} target={this.findTarget}>
|
||||
<EmojiPickerMenu
|
||||
custom_emojis={this.props.custom_emojis}
|
||||
loading={loading}
|
||||
onClose={this.onHideDropdown}
|
||||
onPick={onPickEmoji}
|
||||
onSkinTone={onSkinTone}
|
||||
skinTone={skinTone}
|
||||
frequentlyUsedEmojis={frequentlyUsedEmojis}
|
||||
/>
|
||||
</Overlay>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
import { changeComposeSpoilerness } from '../../../actions/compose'
|
||||
import ComposeExtraButton from './compose_extra_button'
|
||||
|
||||
const messages = defineMessages({
|
||||
marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
|
||||
unmarked: { id: 'compose_form.spoiler.unmarked', defaultMessage: 'Text is not hidden' },
|
||||
title: { id: 'compose_form.spoiler.title', defaultMessage: 'Warning' },
|
||||
})
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
active: state.getIn(['compose', 'spoiler']),
|
||||
})
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
|
||||
onClick () {
|
||||
dispatch(changeComposeSpoilerness())
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
export default
|
||||
@injectIntl
|
||||
@connect(mapStateToProps, mapDispatchToProps)
|
||||
class SpoilerButton extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
active: PropTypes.bool,
|
||||
intl: PropTypes.object.isRequired,
|
||||
small: PropTypes.bool,
|
||||
}
|
||||
|
||||
handleClick = (e) => {
|
||||
e.preventDefault()
|
||||
this.props.onClick()
|
||||
}
|
||||
|
||||
render () {
|
||||
const { active, intl, small } = this.props
|
||||
|
||||
return (
|
||||
<ComposeExtraButton
|
||||
title={intl.formatMessage(messages.title)}
|
||||
icon='gif'
|
||||
onClick={this.handleClick}
|
||||
small={small}
|
||||
active={active}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
import { defineMessages, injectIntl } from 'react-intl'
|
||||
import { addPoll, removePoll } from '../../../actions/compose'
|
||||
import ComposeExtraButton from './compose_extra_button'
|
||||
|
||||
const messages = defineMessages({
|
||||
add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add poll' },
|
||||
title: { id: 'poll_button.title', defaultMessage: 'Poll' },
|
||||
remove_poll: { id: 'poll_button.remove_poll', defaultMessage: 'Remove poll' },
|
||||
})
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
unavailable: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 0),
|
||||
active: state.getIn(['compose', 'poll']) !== null,
|
||||
})
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
|
||||
onClick() {
|
||||
dispatch((_, getState) => {
|
||||
if (getState().getIn(['compose', 'poll'])) {
|
||||
dispatch(removePoll())
|
||||
} else {
|
||||
dispatch(addPoll())
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
export default
|
||||
@connect(mapStateToProps, mapDispatchToProps)
|
||||
@injectIntl
|
||||
class PollButton extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
disabled: PropTypes.bool,
|
||||
unavailable: PropTypes.bool,
|
||||
active: PropTypes.bool,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
small: PropTypes.bool,
|
||||
}
|
||||
|
||||
handleClick = () => {
|
||||
this.props.onClick()
|
||||
}
|
||||
|
||||
render() {
|
||||
const { intl, active, unavailable, disabled, small } = this.props
|
||||
|
||||
if (unavailable) return null
|
||||
|
||||
return (
|
||||
<ComposeExtraButton
|
||||
title={intl.formatMessage(active ? messages.remove_poll : messages.title)}
|
||||
disabled={disabled}
|
||||
onClick={this.handleClick}
|
||||
icon='poll'
|
||||
small={small}
|
||||
active={active}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import { injectIntl, defineMessages } from 'react-intl'
|
||||
import { changeComposeSpoilerness } from '../../../actions/compose'
|
||||
import ComposeExtraButton from './compose_extra_button'
|
||||
|
||||
const messages = defineMessages({
|
||||
marked: { id: 'compose_form.spoiler.marked', defaultMessage: 'Text is hidden behind warning' },
|
||||
unmarked: { id: 'compose_form.spoiler.unmarked', defaultMessage: 'Text is not hidden' },
|
||||
title: { id: 'compose_form.spoiler.title', defaultMessage: 'Warning' },
|
||||
})
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
active: state.getIn(['compose', 'spoiler']),
|
||||
})
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
|
||||
onClick () {
|
||||
dispatch(changeComposeSpoilerness())
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
export default
|
||||
@injectIntl
|
||||
@connect(mapStateToProps, mapDispatchToProps)
|
||||
class SpoilerButton extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
active: PropTypes.bool,
|
||||
intl: PropTypes.object.isRequired,
|
||||
small: PropTypes.bool,
|
||||
}
|
||||
|
||||
handleClick = (e) => {
|
||||
e.preventDefault()
|
||||
this.props.onClick()
|
||||
}
|
||||
|
||||
render () {
|
||||
const { active, intl, small } = this.props
|
||||
|
||||
return (
|
||||
<ComposeExtraButton
|
||||
title={intl.formatMessage(messages.title)}
|
||||
icon='letter-t'
|
||||
onClick={this.handleClick}
|
||||
small={small}
|
||||
active={active}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import { defineMessages, injectIntl } from 'react-intl'
|
||||
import { openPopover } from '../../../actions/popover'
|
||||
import ComposeExtraButton from './compose_extra_button'
|
||||
|
||||
const messages = defineMessages({
|
||||
visibility: { id: 'privacy.visibility', defaultMessage: 'Visibility' },
|
||||
})
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
value: state.getIn(['compose', 'privacy']),
|
||||
})
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
onOpenPopover(targetRef) {
|
||||
dispatch(openPopover('STATUS_VISIBILITY', {
|
||||
targetRef,
|
||||
}))
|
||||
},
|
||||
})
|
||||
|
||||
export default
|
||||
@connect(mapStateToProps, mapDispatchToProps)
|
||||
@injectIntl
|
||||
class StatusVisibilityButton extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
onClick: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
small: PropTypes.bool,
|
||||
onOpenPopover: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
handleOnClick = () => {
|
||||
this.props.onOpenPopover(this.button)
|
||||
}
|
||||
|
||||
setButton = (n) => {
|
||||
this.button = n
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
intl,
|
||||
small,
|
||||
value
|
||||
} = this.props
|
||||
|
||||
let icon;
|
||||
switch (value) {
|
||||
case 'unlisted':
|
||||
icon = 'unlock'
|
||||
break;
|
||||
case 'private':
|
||||
icon = 'lock'
|
||||
break;
|
||||
default:
|
||||
icon = 'globe'
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<ComposeExtraButton
|
||||
icon={icon}
|
||||
title={intl.formatMessage(messages.visibility)}
|
||||
onClick={this.handleOnClick}
|
||||
small={small}
|
||||
buttonRef={this.setButton}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,82 +0,0 @@
|
||||
import EmojiPickerDropdown from '../components/emoji_picker_dropdown';
|
||||
import { changeSetting } from '../../../actions/settings';
|
||||
import { createSelector } from 'reselect';
|
||||
import { Map as ImmutableMap } from 'immutable';
|
||||
import { useEmoji } from '../../../actions/emojis';
|
||||
|
||||
const perLine = 8;
|
||||
const lines = 2;
|
||||
|
||||
const DEFAULTS = [
|
||||
'+1',
|
||||
'grinning',
|
||||
'kissing_heart',
|
||||
'heart_eyes',
|
||||
'laughing',
|
||||
'stuck_out_tongue_winking_eye',
|
||||
'sweat_smile',
|
||||
'joy',
|
||||
'yum',
|
||||
'disappointed',
|
||||
'thinking_face',
|
||||
'weary',
|
||||
'sob',
|
||||
'sunglasses',
|
||||
'heart',
|
||||
'ok_hand',
|
||||
];
|
||||
|
||||
const getFrequentlyUsedEmojis = createSelector([
|
||||
state => state.getIn(['settings', 'frequentlyUsedEmojis'], ImmutableMap()),
|
||||
], emojiCounters => {
|
||||
let emojis = emojiCounters
|
||||
.keySeq()
|
||||
.sort((a, b) => emojiCounters.get(a) - emojiCounters.get(b))
|
||||
.reverse()
|
||||
.slice(0, perLine * lines)
|
||||
.toArray();
|
||||
|
||||
if (emojis.length < DEFAULTS.length) {
|
||||
let uniqueDefaults = DEFAULTS.filter(emoji => !emojis.includes(emoji));
|
||||
emojis = emojis.concat(uniqueDefaults.slice(0, DEFAULTS.length - emojis.length));
|
||||
}
|
||||
|
||||
return emojis;
|
||||
});
|
||||
|
||||
const getCustomEmojis = createSelector([
|
||||
state => state.get('custom_emojis'),
|
||||
], emojis => emojis.filter(e => e.get('visible_in_picker')).sort((a, b) => {
|
||||
const aShort = a.get('shortcode').toLowerCase();
|
||||
const bShort = b.get('shortcode').toLowerCase();
|
||||
|
||||
if (aShort < bShort) {
|
||||
return -1;
|
||||
} else if (aShort > bShort ) {
|
||||
return 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}));
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
custom_emojis: getCustomEmojis(state),
|
||||
skinTone: state.getIn(['settings', 'skinTone']),
|
||||
frequentlyUsedEmojis: getFrequentlyUsedEmojis(state),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch, { onPickEmoji }) => ({
|
||||
onSkinTone: skinTone => {
|
||||
dispatch(changeSetting(['skinTone'], skinTone));
|
||||
},
|
||||
|
||||
onPickEmoji: emoji => {
|
||||
dispatch(useEmoji(emoji));
|
||||
|
||||
if (onPickEmoji) {
|
||||
onPickEmoji(emoji);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(EmojiPickerDropdown);
|
||||
@@ -30,19 +30,14 @@ class GroupsCollection extends ImmutablePureComponent {
|
||||
render() {
|
||||
const { groupIds } = this.props
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className={[_s.default, _s.flexRow, _s.flexWrap].join(' ')}>
|
||||
<ScrollableList
|
||||
scrollKey='groups_collection'
|
||||
emptyMessage={''}
|
||||
>
|
||||
{
|
||||
groupIds.map((groupId, i) => (
|
||||
<GroupCollectionItem key={`group-collection-item-${i}`} id={groupId} />
|
||||
))
|
||||
}
|
||||
</ScrollableList>
|
||||
{
|
||||
groupIds.map((groupId, i) => (
|
||||
<GroupCollectionItem key={`group-collection-item-${i}`} id={groupId} />
|
||||
))
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,245 +0,0 @@
|
||||
import Immutable from 'immutable';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import punycode from 'punycode';
|
||||
import classnames from 'classnames';
|
||||
import Icon from '../../../../components/icon';
|
||||
|
||||
const IDNA_PREFIX = 'xn--';
|
||||
|
||||
const decodeIDNA = domain => {
|
||||
return domain
|
||||
.split('.')
|
||||
.map(part => part.indexOf(IDNA_PREFIX) === 0 ? punycode.decode(part.slice(IDNA_PREFIX.length)) : part)
|
||||
.join('.');
|
||||
};
|
||||
|
||||
const getHostname = url => {
|
||||
const parser = document.createElement('a');
|
||||
parser.href = url;
|
||||
return parser.hostname;
|
||||
};
|
||||
|
||||
const trim = (text, len) => {
|
||||
const cut = text.indexOf(' ', len);
|
||||
|
||||
if (cut === -1) {
|
||||
return text;
|
||||
}
|
||||
|
||||
return text.substring(0, cut) + (text.length > len ? '…' : '');
|
||||
};
|
||||
|
||||
const domParser = new DOMParser();
|
||||
|
||||
const addAutoPlay = html => {
|
||||
const document = domParser.parseFromString(html, 'text/html').documentElement;
|
||||
const iframe = document.querySelector('iframe');
|
||||
|
||||
if (iframe) {
|
||||
if (iframe.src.indexOf('?') !== -1) {
|
||||
iframe.src += '&';
|
||||
} else {
|
||||
iframe.src += '?';
|
||||
}
|
||||
|
||||
iframe.src += 'autoplay=1&auto_play=1';
|
||||
|
||||
// DOM parser creates html/body elements around original HTML fragment,
|
||||
// so we need to get innerHTML out of the body and not the entire document
|
||||
return document.querySelector('body').innerHTML;
|
||||
}
|
||||
|
||||
return html;
|
||||
};
|
||||
|
||||
export default class Card extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
card: ImmutablePropTypes.map,
|
||||
onOpenMedia: PropTypes.func.isRequired,
|
||||
defaultWidth: PropTypes.number,
|
||||
cacheWidth: PropTypes.func,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
};
|
||||
|
||||
state = {
|
||||
width: this.props.defaultWidth || 280,
|
||||
embedded: false,
|
||||
};
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (!Immutable.is(this.props.card, nextProps.card)) {
|
||||
this.setState({ embedded: false });
|
||||
}
|
||||
}
|
||||
|
||||
handlePhotoClick = () => {
|
||||
const { card, onOpenMedia } = this.props;
|
||||
|
||||
onOpenMedia(
|
||||
Immutable.fromJS([
|
||||
{
|
||||
type: 'image',
|
||||
url: card.get('embed_url'),
|
||||
description: card.get('title'),
|
||||
meta: {
|
||||
original: {
|
||||
width: card.get('width'),
|
||||
height: card.get('height'),
|
||||
},
|
||||
},
|
||||
},
|
||||
]),
|
||||
0
|
||||
);
|
||||
};
|
||||
|
||||
handleEmbedClick = () => {
|
||||
const { card } = this.props;
|
||||
|
||||
if (card.get('type') === 'photo') {
|
||||
this.handlePhotoClick();
|
||||
} else {
|
||||
this.setState({ embedded: true });
|
||||
}
|
||||
}
|
||||
|
||||
setRef = c => {
|
||||
if (c) {
|
||||
if (this.props.cacheWidth) this.props.cacheWidth(c.offsetWidth);
|
||||
this.setState({ width: c.offsetWidth });
|
||||
}
|
||||
}
|
||||
|
||||
renderVideo () {
|
||||
const { card } = this.props
|
||||
const content = { __html: addAutoPlay(card.get('html')) }
|
||||
const { width } = this.state
|
||||
const ratio = card.get('width') / card.get('height')
|
||||
const height = width / ratio
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={this.setRef}
|
||||
className={[_s.default, _s.backgroundColorSecondary3, _s.positionAbsolute, _s.top0, _s.right0, _s.bottom0, _s.left0, _s.statusCardVideo].join(' ')}
|
||||
dangerouslySetInnerHTML={content}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
render () {
|
||||
const { card } = this.props
|
||||
const { width, embedded } = this.state
|
||||
|
||||
if (card === null) return null
|
||||
|
||||
const maxDescription = 160
|
||||
const cardImg = card.get('image')
|
||||
const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name')
|
||||
const horizontal = (card.get('width') > card.get('height') && (card.get('width') + 100 >= width)) || card.get('type') !== 'link' || embedded
|
||||
const interactive = card.get('type') !== 'link'
|
||||
|
||||
const title = interactive ?
|
||||
(
|
||||
<a
|
||||
className={[_s.default, _s.displayFlex, _s.text, _s.noUnderline, _s.overflowWrapBreakWord, _s.colorPrimary, _s.fontSize15PX, _s.fontWeightMedium].join(' ')}
|
||||
href={card.get('url')}
|
||||
title={card.get('title')}
|
||||
rel='noopener'
|
||||
target='_blank'
|
||||
>
|
||||
{card.get('title')}
|
||||
</a>
|
||||
)
|
||||
: (
|
||||
<span className={[_s.default, _s.displayFlex, _s.text, _s.overflowWrapBreakWord, _s.colorPrimary, _s.fontSize15PX, _s.fontWeightMedium].join(' ')}>
|
||||
{card.get('title')}
|
||||
</span>
|
||||
)
|
||||
|
||||
const description = (
|
||||
<div className={[_s.default, _s.flexNormal, _s.px10, _s.py10, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
|
||||
{title}
|
||||
<p className={[_s.default, _s.displayFlex, _s.text, _s.my5, _s.overflowWrapBreakWord, _s.colorSecondary, _s.fontSize13PX, _s.fontWeightNormal].join(' ')}>
|
||||
{trim(card.get('description') || '', maxDescription)}
|
||||
</p>
|
||||
<span className={[_s.default, _s.marginTopAuto, _s.flexRow, _s.alignItemsCenter, _s.colorSecondary, _s.text, _s.displayFlex, _s.textOverflowEllipsis, _s.fontSize13PX].join(' ')}>
|
||||
<Icon id='link' width='10px' height='10px' className={[_s.fillColorSecondary, _s.mr5].join(' ')} fixedWidth />
|
||||
{provider}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
|
||||
let embed = ''
|
||||
let thumbnail = interactive ?
|
||||
<img src={cardImg} className={[_s.default, _s.objectFitCover, _s.positionAbsolute, _s.width100PC, _s.height100PC, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')} />
|
||||
:
|
||||
<img src={cardImg} className={[_s.default, _s.objectFitCover, _s.width330PX, _s.height220PX].join(' ')} />
|
||||
|
||||
if (interactive) {
|
||||
if (embedded) {
|
||||
embed = this.renderVideo()
|
||||
}
|
||||
|
||||
let iconVariant = 'play'
|
||||
|
||||
if (card.get('type') === 'photo') {
|
||||
iconVariant = 'search-plus'
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={[_s.default, _s.width100PC, _s.px10].join(' ')}>
|
||||
<div className={[_s.default, _s.overflowHidden, _s.width100PC, _s.borderColorSecondary2, _s.border1PX, _s.radiusSmall].join(' ')}>
|
||||
<div className={[_s.default, _s.width100PC].join(' ')}>
|
||||
<div className={[_s.default, _s.width100PC, _s.paddingTop5625PC].join(' ')}>
|
||||
{ !!embed && embed}
|
||||
{ !embed && thumbnail}
|
||||
{ !embed &&
|
||||
<div className={[_s.default, _s.positionAbsolute, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
|
||||
<button
|
||||
className={[_s.default, _s.cursorPointer, _s.backgroundColorOpaque, _s.radiusSmall, _s.py15, _s.px15].join(' ')}
|
||||
onClick={this.handleEmbedClick}
|
||||
>
|
||||
<Icon id={iconVariant} className={[_s.fillColorWhite].join(' ')}/>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{description}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
} else if (cardImg) {
|
||||
embed = (
|
||||
<div className={[_s.default].join(' ')}>
|
||||
{thumbnail}
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
embed = (
|
||||
<div className={[_s.default, _s.py15, _s.px15, _s.width72PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
|
||||
<Icon id='file-text' width='22px' height='22px' className={_s.fillColorSecondary} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={[_s.default, _s.width100PC, _s.px10].join(' ')}>
|
||||
<a
|
||||
href={card.get('url')}
|
||||
className={[_s.default, _s.cursorPointer, _s.flexRow, _s.overflowHidden, _s.noUnderline, _s.width100PC, _s.backgroundSubtle_onHover, _s.borderColorSecondary2, _s.border1PX, _s.radiusSmall].join(' ')}
|
||||
rel='noopener'
|
||||
ref={this.setRef}
|
||||
>
|
||||
{embed}
|
||||
{description}
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,169 +0,0 @@
|
||||
.status-card {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
color: $dark-text-color;
|
||||
margin-top: 14px;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
|
||||
@include border-design(lighten($ui-base-color, 8%), 1px, 4px);
|
||||
|
||||
&__actions {
|
||||
@include flex(center, center);
|
||||
@include abs-position(0, 0, 0, 0);
|
||||
|
||||
&>div {
|
||||
background: rgba($base-shadow-color, 0.6);
|
||||
border-radius: 8px;
|
||||
padding: 12px 9px;
|
||||
flex: 0 0 auto;
|
||||
|
||||
@include flex(center, center);
|
||||
}
|
||||
|
||||
button,
|
||||
a {
|
||||
display: inline;
|
||||
color: $secondary-text-color;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: 0 8px;
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 19px;
|
||||
position: relative;
|
||||
bottom: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
color: $darker-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
@include text-overflow(nowrap);
|
||||
}
|
||||
|
||||
&__content {
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
padding: 14px 14px 14px 8px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
color: $darker-text-color;
|
||||
}
|
||||
|
||||
&__host {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
font-size: 13px;
|
||||
|
||||
@include text-overflow(nowrap);
|
||||
}
|
||||
|
||||
&__image {
|
||||
flex: 0 0 100px;
|
||||
background: lighten($ui-base-color, 8%);
|
||||
position: relative;
|
||||
|
||||
&>.fa {
|
||||
font-size: 21px;
|
||||
position: absolute;
|
||||
transform-origin: 50% 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
&__image-image {
|
||||
border-radius: 4px 0 0 4px;
|
||||
display: block;
|
||||
margin: 0;
|
||||
object-fit: cover;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
|
||||
@include size(100%);
|
||||
}
|
||||
|
||||
&.horizontal {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.horizontal & {
|
||||
&__image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__image-image {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
&__title {
|
||||
white-space: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&.compact {
|
||||
border-color: lighten($ui-base-color, 4%);
|
||||
|
||||
&.interactive {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.compact & {
|
||||
&__content {
|
||||
padding: 10px 8px 8px 8px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__image {
|
||||
flex: 0 0 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.status-card {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-base-color, 8%);
|
||||
}
|
||||
|
||||
&.compact:hover {
|
||||
background-color: lighten($ui-base-color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
.status-card-photo {
|
||||
cursor: zoom-in;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
|
||||
@include size(100%, auto);
|
||||
}
|
||||
|
||||
.status-card-video {
|
||||
iframe {
|
||||
@include size(100%);
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { default } from './card'
|
||||
@@ -7,7 +7,7 @@ export function AccountGallery() {
|
||||
}
|
||||
|
||||
export function Blocks() {
|
||||
return import(/* webpackChunkName: "features/blocks" */'../../blocks')
|
||||
return import(/* webpackChunkName: "features/blocks" */'../../blocked_accounts')
|
||||
}
|
||||
|
||||
export function CommunityTimeline() {
|
||||
@@ -19,7 +19,7 @@ export function Compose() {
|
||||
}
|
||||
|
||||
export function DomainBlocks() {
|
||||
return import(/* webpackChunkName: "features/domain_blocks" */'../../domain_blocks')
|
||||
return import(/* webpackChunkName: "features/domain_blocks" */'../../blocked_domains')
|
||||
}
|
||||
|
||||
export function EmbedModal() {
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export { default } from './video'
|
||||
@@ -1,648 +0,0 @@
|
||||
import { defineMessages, injectIntl } from 'react-intl'
|
||||
import { is } from 'immutable'
|
||||
import { throttle } from 'lodash'
|
||||
import classNames from 'classnames/bind'
|
||||
import { decode } from 'blurhash'
|
||||
import { isFullscreen, requestFullscreen, exitFullscreen } from '../../utils/fullscreen'
|
||||
import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from '../../utils/media_aspect_ratio'
|
||||
import { displayMedia } from '../../initial_state'
|
||||
import Button from '../../components/button'
|
||||
import Text from '../../components/text'
|
||||
|
||||
const cx = classNames.bind(_s)
|
||||
|
||||
const messages = defineMessages({
|
||||
play: { id: 'video.play', defaultMessage: 'Play' },
|
||||
pause: { id: 'video.pause', defaultMessage: 'Pause' },
|
||||
mute: { id: 'video.mute', defaultMessage: 'Mute sound' },
|
||||
unmute: { id: 'video.unmute', defaultMessage: 'Unmute sound' },
|
||||
hide: { id: 'video.hide', defaultMessage: 'Hide video' },
|
||||
fullscreen: { id: 'video.fullscreen', defaultMessage: 'Full screen' },
|
||||
exit_fullscreen: { id: 'video.exit_fullscreen', defaultMessage: 'Exit full screen' },
|
||||
sensitive: { id: 'status.sensitive_warning', defaultMessage: 'Sensitive content' },
|
||||
hidden: { id: 'status.media_hidden', defaultMessage: 'Media hidden' },
|
||||
})
|
||||
|
||||
const formatTime = secondsNum => {
|
||||
let hours = Math.floor(secondsNum / 3600)
|
||||
let minutes = Math.floor((secondsNum - (hours * 3600)) / 60)
|
||||
let seconds = secondsNum - (hours * 3600) - (minutes * 60)
|
||||
|
||||
if (hours < 10) hours = '0' + hours
|
||||
if (minutes < 10) minutes = '0' + minutes
|
||||
if (seconds < 10) seconds = '0' + seconds
|
||||
|
||||
return (hours === '00' ? '' : `${hours}:`) + `${minutes}:${seconds}`
|
||||
}
|
||||
|
||||
export const findElementPosition = el => {
|
||||
let box
|
||||
|
||||
if (el.getBoundingClientRect && el.parentNode) {
|
||||
box = el.getBoundingClientRect()
|
||||
}
|
||||
|
||||
if (!box) {
|
||||
return {
|
||||
left: 0,
|
||||
top: 0,
|
||||
}
|
||||
}
|
||||
|
||||
const docEl = document.documentElement
|
||||
const body = document.body
|
||||
|
||||
const clientLeft = docEl.clientLeft || body.clientLeft || 0
|
||||
const scrollLeft = window.pageXOffset || body.scrollLeft
|
||||
const left = (box.left + scrollLeft) - clientLeft
|
||||
|
||||
const clientTop = docEl.clientTop || body.clientTop || 0
|
||||
const scrollTop = window.pageYOffset || body.scrollTop
|
||||
const top = (box.top + scrollTop) - clientTop
|
||||
|
||||
return {
|
||||
left: Math.round(left),
|
||||
top: Math.round(top),
|
||||
}
|
||||
}
|
||||
|
||||
export const getPointerPosition = (el, event) => {
|
||||
const position = {}
|
||||
const box = findElementPosition(el)
|
||||
const boxW = el.offsetWidth
|
||||
const boxH = el.offsetHeight
|
||||
const boxY = box.top
|
||||
const boxX = box.left
|
||||
|
||||
let pageY = event.pageY
|
||||
let pageX = event.pageX
|
||||
|
||||
if (event.changedTouches) {
|
||||
pageX = event.changedTouches[0].pageX
|
||||
pageY = event.changedTouches[0].pageY
|
||||
}
|
||||
|
||||
position.y = Math.max(0, Math.min(1, (pageY - boxY) / boxH))
|
||||
position.x = Math.max(0, Math.min(1, (pageX - boxX) / boxW))
|
||||
|
||||
return position
|
||||
}
|
||||
|
||||
export default
|
||||
@injectIntl
|
||||
class Video extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
preview: PropTypes.string,
|
||||
src: PropTypes.string.isRequired,
|
||||
alt: PropTypes.string,
|
||||
width: PropTypes.number,
|
||||
height: PropTypes.number,
|
||||
sensitive: PropTypes.bool,
|
||||
startTime: PropTypes.number,
|
||||
detailed: PropTypes.bool,
|
||||
inline: PropTypes.bool,
|
||||
cacheWidth: PropTypes.func,
|
||||
visible: PropTypes.bool,
|
||||
onToggleVisibility: PropTypes.func,
|
||||
intl: PropTypes.object.isRequired,
|
||||
blurhash: PropTypes.string,
|
||||
aspectRatio: PropTypes.number,
|
||||
}
|
||||
|
||||
state = {
|
||||
currentTime: 0,
|
||||
duration: 0,
|
||||
volume: 0.5,
|
||||
paused: true,
|
||||
dragging: false,
|
||||
containerWidth: this.props.width,
|
||||
fullscreen: false,
|
||||
hovered: false,
|
||||
muted: false,
|
||||
hoveringVolumeButton: false,
|
||||
hoveringVolumeControl: false,
|
||||
revealed: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'),
|
||||
}
|
||||
|
||||
volHeight = 100
|
||||
volOffset = 13
|
||||
|
||||
volHandleOffset = v => {
|
||||
const offset = v * this.volHeight + this.volOffset
|
||||
return (offset > 110) ? 110 : offset
|
||||
}
|
||||
|
||||
setPlayerRef = c => {
|
||||
this.player = c
|
||||
|
||||
if (c) {
|
||||
if (this.props.cacheWidth) this.props.cacheWidth(this.player.offsetWidth)
|
||||
this.setState({
|
||||
containerWidth: c.offsetWidth,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
setVideoRef = c => {
|
||||
this.video = c
|
||||
|
||||
if (this.video) {
|
||||
const { volume, muted } = this.video
|
||||
this.setState({
|
||||
volume,
|
||||
muted,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
setSeekRef = c => {
|
||||
this.seek = c
|
||||
}
|
||||
|
||||
setVolumeRef = c => {
|
||||
this.volume = c
|
||||
}
|
||||
|
||||
setCanvasRef = c => {
|
||||
this.canvas = c
|
||||
}
|
||||
|
||||
handleClickRoot = e => e.stopPropagation()
|
||||
|
||||
handlePlay = () => {
|
||||
this.setState({ paused: false })
|
||||
}
|
||||
|
||||
handlePause = () => {
|
||||
this.setState({ paused: true })
|
||||
}
|
||||
|
||||
handleTimeUpdate = () => {
|
||||
const { currentTime, duration } = this.video
|
||||
this.setState({
|
||||
currentTime: Math.floor(currentTime),
|
||||
duration: Math.floor(duration),
|
||||
})
|
||||
}
|
||||
|
||||
handleVolumeMouseDown = e => {
|
||||
document.addEventListener('mousemove', this.handleMouseVolSlide, true)
|
||||
document.addEventListener('mouseup', this.handleVolumeMouseUp, true)
|
||||
document.addEventListener('touchmove', this.handleMouseVolSlide, true)
|
||||
document.addEventListener('touchend', this.handleVolumeMouseUp, true)
|
||||
|
||||
this.handleMouseVolSlide(e)
|
||||
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
handleVolumeMouseUp = () => {
|
||||
document.removeEventListener('mousemove', this.handleMouseVolSlide, true)
|
||||
document.removeEventListener('mouseup', this.handleVolumeMouseUp, true)
|
||||
document.removeEventListener('touchmove', this.handleMouseVolSlide, true)
|
||||
document.removeEventListener('touchend', this.handleVolumeMouseUp, true)
|
||||
}
|
||||
|
||||
handleMouseVolSlide = throttle(e => {
|
||||
const rect = this.volume.getBoundingClientRect()
|
||||
const y = 1 - ((e.clientY - rect.top) / this.volHeight)
|
||||
|
||||
if (!isNaN(y)) {
|
||||
var slideamt = y
|
||||
if (y > 1) {
|
||||
slideamt = 1
|
||||
} else if (y < 0) {
|
||||
slideamt = 0
|
||||
}
|
||||
this.video.volume = slideamt
|
||||
this.setState({ volume: slideamt })
|
||||
}
|
||||
}, 60)
|
||||
|
||||
handleMouseDown = e => {
|
||||
document.addEventListener('mousemove', this.handleMouseMove, true)
|
||||
document.addEventListener('mouseup', this.handleMouseUp, true)
|
||||
document.addEventListener('touchmove', this.handleMouseMove, true)
|
||||
document.addEventListener('touchend', this.handleMouseUp, true)
|
||||
|
||||
this.setState({ dragging: true })
|
||||
this.video.pause()
|
||||
this.handleMouseMove(e)
|
||||
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
}
|
||||
|
||||
handleMouseUp = () => {
|
||||
document.removeEventListener('mousemove', this.handleMouseMove, true)
|
||||
document.removeEventListener('mouseup', this.handleMouseUp, true)
|
||||
document.removeEventListener('touchmove', this.handleMouseMove, true)
|
||||
document.removeEventListener('touchend', this.handleMouseUp, true)
|
||||
|
||||
this.setState({ dragging: false })
|
||||
this.video.play()
|
||||
}
|
||||
|
||||
handleMouseMove = throttle(e => {
|
||||
const { x } = getPointerPosition(this.seek, e)
|
||||
const currentTime = Math.floor(this.video.duration * x)
|
||||
|
||||
if (!isNaN(currentTime)) {
|
||||
this.video.currentTime = currentTime
|
||||
this.setState({ currentTime })
|
||||
}
|
||||
}, 60)
|
||||
|
||||
togglePlay = () => {
|
||||
if (this.state.paused) {
|
||||
this.video.play()
|
||||
} else {
|
||||
this.video.pause()
|
||||
}
|
||||
}
|
||||
|
||||
toggleFullscreen = () => {
|
||||
if (isFullscreen()) {
|
||||
exitFullscreen()
|
||||
} else {
|
||||
requestFullscreen(this.player)
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
document.addEventListener('fullscreenchange', this.handleFullscreenChange, true)
|
||||
document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange, true)
|
||||
document.addEventListener('mozfullscreenchange', this.handleFullscreenChange, true)
|
||||
document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true)
|
||||
|
||||
if (this.props.blurhash) {
|
||||
this._decode()
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener('fullscreenchange', this.handleFullscreenChange, true)
|
||||
document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange, true)
|
||||
document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange, true)
|
||||
document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange, true)
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
|
||||
this.setState({ revealed: nextProps.visible })
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (prevState.revealed && !this.state.revealed && this.video) {
|
||||
this.video.pause()
|
||||
}
|
||||
if (prevProps.blurhash !== this.props.blurhash && this.props.blurhash) {
|
||||
this._decode()
|
||||
}
|
||||
}
|
||||
|
||||
_decode() {
|
||||
const hash = this.props.blurhash
|
||||
const pixels = decode(hash, 32, 32)
|
||||
|
||||
if (pixels && this.canvas) {
|
||||
const ctx = this.canvas.getContext('2d')
|
||||
const imageData = new ImageData(pixels, 32, 32)
|
||||
|
||||
ctx.putImageData(imageData, 0, 0)
|
||||
}
|
||||
}
|
||||
|
||||
handleFullscreenChange = () => {
|
||||
this.setState({ fullscreen: isFullscreen() })
|
||||
}
|
||||
|
||||
handleMouseEnter = () => {
|
||||
this.setState({ hovered: true })
|
||||
}
|
||||
|
||||
handleMouseLeave = () => {
|
||||
this.setState({ hovered: false })
|
||||
}
|
||||
|
||||
handleMouseEnterAudio = () => {
|
||||
this.setState({ hoveringVolumeButton: true })
|
||||
}
|
||||
|
||||
handleMouseLeaveAudio = throttle(e => {
|
||||
this.setState({ hoveringVolumeButton: false })
|
||||
}, 2000)
|
||||
|
||||
handleMouseEnterVolumeControl = () => {
|
||||
this.setState({ hoveringVolumeControl: true })
|
||||
}
|
||||
|
||||
handleMouseLeaveVolumeControl = throttle(e => {
|
||||
this.setState({ hoveringVolumeControl: false })
|
||||
}, 2000)
|
||||
|
||||
toggleMute = () => {
|
||||
this.video.muted = !this.video.muted
|
||||
this.setState({ muted: this.video.muted })
|
||||
}
|
||||
|
||||
toggleReveal = () => {
|
||||
if (this.props.onToggleVisibility) {
|
||||
this.props.onToggleVisibility()
|
||||
} else {
|
||||
this.setState({ revealed: !this.state.revealed })
|
||||
}
|
||||
}
|
||||
|
||||
handleLoadedData = () => {
|
||||
if (this.props.startTime) {
|
||||
this.video.currentTime = this.props.startTime
|
||||
this.video.play()
|
||||
}
|
||||
}
|
||||
|
||||
handleProgress = () => {
|
||||
const { buffered, duration } = this.video
|
||||
|
||||
if (!buffered) return
|
||||
if (buffered.length > 0) {
|
||||
this.setState({
|
||||
buffer: buffered.end(0) / duration * 100,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
handleVolumeChange = () => {
|
||||
const { volume, muted } = this.video
|
||||
this.setState({
|
||||
volume,
|
||||
muted,
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
preview,
|
||||
src,
|
||||
inline,
|
||||
startTime,
|
||||
intl,
|
||||
alt,
|
||||
detailed,
|
||||
sensitive,
|
||||
aspectRatio
|
||||
} = this.props
|
||||
|
||||
const {
|
||||
containerWidth,
|
||||
currentTime,
|
||||
duration,
|
||||
volume,
|
||||
buffer,
|
||||
dragging,
|
||||
paused,
|
||||
fullscreen,
|
||||
hovered,
|
||||
muted,
|
||||
revealed,
|
||||
hoveringVolumeButton,
|
||||
hoveringVolumeControl
|
||||
} = this.state
|
||||
|
||||
const progress = (currentTime / duration) * 100
|
||||
|
||||
const volumeHeight = (muted) ? 0 : volume * this.volHeight
|
||||
const volumeHandleLoc = (muted) ? this.volHandleOffset(0) : this.volHandleOffset(volume)
|
||||
const playerStyle = {}
|
||||
|
||||
let { width, height } = this.props
|
||||
|
||||
if (inline && containerWidth) {
|
||||
width = containerWidth
|
||||
const minSize = containerWidth / (16 / 9)
|
||||
|
||||
if (isPanoramic(aspectRatio)) {
|
||||
height = Math.max(Math.floor(containerWidth / maximumAspectRatio), minSize)
|
||||
} else if (isPortrait(aspectRatio)) {
|
||||
height = Math.max(Math.floor(containerWidth / minimumAspectRatio), minSize)
|
||||
} else {
|
||||
height = Math.floor(containerWidth / aspectRatio)
|
||||
}
|
||||
|
||||
playerStyle.height = height
|
||||
}
|
||||
|
||||
let preload
|
||||
|
||||
if (startTime || fullscreen || dragging) {
|
||||
preload = 'auto'
|
||||
} else if (detailed) {
|
||||
preload = 'metadata'
|
||||
} else {
|
||||
preload = 'none'
|
||||
}
|
||||
|
||||
// className={classNames('video-player', {
|
||||
// inactive: !revealed,
|
||||
// detailed,
|
||||
// inline: inline && !fullscreen,
|
||||
// fullscreen
|
||||
// })}
|
||||
|
||||
const seekHandleClasses = cx({
|
||||
default: 1,
|
||||
positionAbsolute: 1,
|
||||
circle: 1,
|
||||
px10: 1,
|
||||
py10: 1,
|
||||
backgroundColorBrand: 1,
|
||||
marginLeftNeg5PX: 1,
|
||||
z3: 1,
|
||||
boxShadow1: 1,
|
||||
opacity0: !dragging,
|
||||
opacity1: dragging || hovered,
|
||||
})
|
||||
|
||||
const progressClasses = cx({
|
||||
default: 1,
|
||||
radiusSmall: 1,
|
||||
mt10: 1,
|
||||
positionAbsolute: 1,
|
||||
height4PX: 1,
|
||||
})
|
||||
|
||||
const volumeControlClasses = cx({
|
||||
default: 1,
|
||||
positionAbsolute: 1,
|
||||
backgroundColorOpaque: 1,
|
||||
videoPlayerVolume: 1,
|
||||
height122PX: 1,
|
||||
circle: 1,
|
||||
displayNone: !hoveringVolumeButton && !hoveringVolumeControl || !hovered,
|
||||
})
|
||||
|
||||
return (
|
||||
<div
|
||||
role='menuitem'
|
||||
className={[_s.default].join(' ')}
|
||||
style={playerStyle}
|
||||
ref={this.setPlayerRef}
|
||||
onMouseEnter={this.handleMouseEnter}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
onClick={this.handleClickRoot}
|
||||
tabIndex={0}
|
||||
>
|
||||
|
||||
{
|
||||
!revealed &&
|
||||
<canvas
|
||||
width={32}
|
||||
height={32}
|
||||
ref={this.setCanvasRef}
|
||||
className={[_s.default, _s.positionAbsolute, _s.height100PC, _s.width100PC, _s.top0, _s.left0].join(' ')}
|
||||
/>
|
||||
}
|
||||
|
||||
{
|
||||
revealed &&
|
||||
<video
|
||||
className={[_s.default, _s.height100PC, _s.width100PC, _s.outlineNone].join(' ')}
|
||||
playsInline
|
||||
ref={this.setVideoRef}
|
||||
src={src}
|
||||
poster={preview}
|
||||
preload={preload}
|
||||
loop
|
||||
role='button'
|
||||
tabIndex='0'
|
||||
aria-label={alt}
|
||||
title={alt}
|
||||
width={width}
|
||||
height={height}
|
||||
volume={volume}
|
||||
onClick={this.togglePlay}
|
||||
onPlay={this.handlePlay}
|
||||
onPause={this.handlePause}
|
||||
onTimeUpdate={this.handleTimeUpdate}
|
||||
onLoadedData={this.handleLoadedData}
|
||||
onProgress={this.handleProgress}
|
||||
onVolumeChange={this.handleVolumeChange}
|
||||
/>
|
||||
}
|
||||
|
||||
{ /* <div className={classNames('spoiler-button', { 'spoiler-button--hidden': revealed })}>
|
||||
<button type='button' className='spoiler-button__overlay' onClick={this.toggleReveal}>
|
||||
<span className='spoiler-button__overlay__label'>
|
||||
{intl.formatMessage(sensitive ? messages.sensitive : messages.hidden)}
|
||||
</span>
|
||||
</button>
|
||||
</div> */ }
|
||||
|
||||
<div
|
||||
className={volumeControlClasses}
|
||||
onMouseDown={this.handleVolumeMouseDown}
|
||||
onMouseEnter={this.handleMouseEnterVolumeControl}
|
||||
onMouseLeave={this.handleMouseLeaveVolumeControl}
|
||||
ref={this.setVolumeRef}
|
||||
>
|
||||
<div
|
||||
className={[_s.default, _s.radiusSmall, _s.my10, _s.positionAbsolute, _s.width4PX, _s.ml10, _s.backgroundColorPrimaryOpaque].join(' ')}
|
||||
style={{
|
||||
height: '102px',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className={[_s.default, _s.radiusSmall, _s.my10, _s.bottom0, _s.positionAbsolute, _s.width4PX, _s.ml10, _s.backgroundColorPrimary].join(' ')}
|
||||
style={{
|
||||
height: `${volumeHeight}px`
|
||||
}}
|
||||
/>
|
||||
<span
|
||||
className={[_s.default, _s.cursorPointer, _s.positionAbsolute, _s.circle, _s.px5, _s.boxShadow1, _s.marginBottomNeg5PX, _s.py5, _s.backgroundColorPrimary, _s.z3].join(' ')}
|
||||
tabIndex='0'
|
||||
style={{
|
||||
marginLeft: '7px',
|
||||
bottom: `${volumeHandleLoc}px`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={[_s.default, _s.z2, _s.px15, _s.videoPlayerControlsBackground, _s.positionAbsolute, _s.bottom0, _s.right0, _s.left0].join(' ')}>
|
||||
|
||||
<div
|
||||
className={[_s.default, _s.cursorPointer, _s.height22PX, _s.videoPlayerSeek].join(' ')}
|
||||
onMouseDown={this.handleMouseDown}
|
||||
ref={this.setSeekRef}
|
||||
>
|
||||
|
||||
<div className={[progressClasses, _s.backgroundPanel, _s.width100PC].join(' ')} />
|
||||
<div className={[progressClasses, _s.backgroundSubtle].join(' ')} style={{ width: `${buffer}%` }} />
|
||||
<div className={[progressClasses, _s.backgroundColorBrand].join(' ')} style={{ width: `${progress}%` }} />
|
||||
|
||||
<span
|
||||
className={seekHandleClasses}
|
||||
tabIndex='0'
|
||||
style={{
|
||||
left: `${progress}%`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.pb5, _s.noSelect].join(' ')}>
|
||||
<Button
|
||||
narrow
|
||||
backgroundColor='none'
|
||||
aria-label={intl.formatMessage(paused ? messages.play : messages.pause)}
|
||||
onClick={this.togglePlay}
|
||||
icon={paused ? 'play' : 'pause'}
|
||||
iconWidth='16px'
|
||||
iconHeight='16px'
|
||||
iconClassName={_s.fillColorWhite}
|
||||
className={_s.pl0}
|
||||
/>
|
||||
|
||||
<div className={[_s.default, _s.marginLeftAuto, _s.flexRow, _s.alignItemsCenter].join(' ')}>
|
||||
<Text color='white' size='small'>
|
||||
{formatTime(currentTime)}
|
||||
/
|
||||
{formatTime(duration)}
|
||||
</Text>
|
||||
|
||||
<Button
|
||||
narrow
|
||||
backgroundColor='none'
|
||||
type='button'
|
||||
aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)}
|
||||
onClick={this.toggleMute}
|
||||
icon={muted ? 'audio-mute' : 'audio'}
|
||||
iconWidth='24px'
|
||||
iconHeight='24px'
|
||||
iconClassName={_s.fillColorWhite}
|
||||
className={[_s.px10, _s.ml10].join(' ')}
|
||||
onMouseEnter={this.handleMouseEnterAudio}
|
||||
onMouseLeave={this.handleMouseLeaveAudio}
|
||||
/>
|
||||
|
||||
<Button
|
||||
narrow
|
||||
backgroundColor='none'
|
||||
aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)}
|
||||
onClick={this.toggleFullscreen}
|
||||
icon={fullscreen ? 'minimize-fullscreen' : 'fullscreen'}
|
||||
iconWidth='20px'
|
||||
iconHeight='20px'
|
||||
iconClassName={_s.fillColorWhite}
|
||||
className={[_s.px10, _s.pr0].join(' ')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
.video-player {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: $base-shadow-color;
|
||||
max-width: 100%;
|
||||
border-radius: 4px;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
video {
|
||||
z-index: 1;
|
||||
|
||||
@include max-size(100vw, 80vh);
|
||||
}
|
||||
|
||||
&.fullscreen {
|
||||
margin: 0;
|
||||
|
||||
@include size(100% !important);
|
||||
|
||||
video {
|
||||
@include max-size(100% !important);
|
||||
@include size(100% !important);
|
||||
}
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
|
||||
video,
|
||||
.video-player__controls {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&__spoiler {
|
||||
display: none;
|
||||
z-index: 4;
|
||||
border: 0;
|
||||
background: $base-overlay-background;
|
||||
color: $darker-text-color;
|
||||
transition: none;
|
||||
pointer-events: none;
|
||||
|
||||
@include abs-position(0, auto, auto, 0);
|
||||
@include size(100%);
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
pointer-events: auto;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: lighten($darker-text-color, 7%);
|
||||
}
|
||||
}
|
||||
|
||||
&__title {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
display: block;
|
||||
|
||||
@include text-sizing(11px, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user