beatrix
7 years ago
committed by
GitHub
commit
bcda3f85ce
@ -1,93 +0,0 @@
|
||||
/*
|
||||
|
||||
`actions/local_settings`
|
||||
========================
|
||||
|
||||
> For more information on the contents of this file, please contact:
|
||||
>
|
||||
> - kibigo! [@kibi@glitch.social]
|
||||
|
||||
This file provides our Redux actions related to local settings. It
|
||||
consists of the following:
|
||||
|
||||
- __`changesLocalSetting(key, value)` :__
|
||||
Changes the local setting with the given `key` to the given
|
||||
`value`. `key` **MUST** be an array of strings, as required by
|
||||
`Immutable.Map.prototype.getIn()`.
|
||||
|
||||
- __`saveLocalSettings()` :__
|
||||
Saves the local settings to `localStorage` as a JSON object. We
|
||||
shouldn't ever need to call this ourselves.
|
||||
|
||||
*/
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Constants:
|
||||
----------
|
||||
|
||||
We provide the following constants:
|
||||
|
||||
- __`LOCAL_SETTING_CHANGE` :__
|
||||
This string constant is used to dispatch a setting change to our
|
||||
reducer in `reducers/local_settings`, where the setting is
|
||||
actually changed.
|
||||
|
||||
*/
|
||||
|
||||
export const LOCAL_SETTING_CHANGE = 'LOCAL_SETTING_CHANGE';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
`changeLocalSetting(key, value)`:
|
||||
---------------------------------
|
||||
|
||||
Changes the local setting with the given `key` to the given `value`.
|
||||
`key` **MUST** be an array of strings, as required by
|
||||
`Immutable.Map.prototype.getIn()`.
|
||||
|
||||
To accomplish this, we just dispatch a `LOCAL_SETTING_CHANGE` to our
|
||||
reducer in `reducers/local_settings`.
|
||||
|
||||
*/
|
||||
|
||||
export function changeLocalSetting(key, value) {
|
||||
return dispatch => {
|
||||
dispatch({
|
||||
type: LOCAL_SETTING_CHANGE,
|
||||
key,
|
||||
value,
|
||||
});
|
||||
|
||||
dispatch(saveLocalSettings());
|
||||
};
|
||||
};
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
`saveLocalSettings()`:
|
||||
----------------------
|
||||
|
||||
Saves the local settings to `localStorage` as a JSON object.
|
||||
`changeLocalSetting()` calls this whenever it changes a setting. We
|
||||
shouldn't ever need to call this ourselves.
|
||||
|
||||
> __TODO :__
|
||||
> Right now `saveLocalSettings()` doesn't keep track of which user
|
||||
> is currently signed in, but it might be better to give each user
|
||||
> their *own* local settings.
|
||||
|
||||
*/
|
||||
|
||||
export function saveLocalSettings() {
|
||||
return (_, getState) => {
|
||||
const localSettings = getState().get('local_settings').toJS();
|
||||
localStorage.setItem('mastodon-settings', JSON.stringify(localSettings));
|
||||
};
|
||||
};
|
||||
@ -1,227 +0,0 @@
|
||||
/*
|
||||
|
||||
`<AccountHeader>`
|
||||
=================
|
||||
|
||||
> For more information on the contents of this file, please contact:
|
||||
>
|
||||
> - kibigo! [@kibi@glitch.social]
|
||||
|
||||
Original file by @gargron@mastodon.social et al as part of
|
||||
tootsuite/mastodon. We've expanded it in order to handle user bio
|
||||
frontmatter.
|
||||
|
||||
The `<AccountHeader>` component provides the header for account
|
||||
timelines. It is a fairly simple component which mostly just consists
|
||||
of a `render()` method.
|
||||
|
||||
__Props:__
|
||||
|
||||
- __`account` (`ImmutablePropTypes.map`) :__
|
||||
The account to render a header for.
|
||||
|
||||
- __`me` (`PropTypes.number.isRequired`) :__
|
||||
The id of the currently-signed-in account.
|
||||
|
||||
- __`onFollow` (`PropTypes.func.isRequired`) :__
|
||||
The function to call when the user clicks the "follow" button.
|
||||
|
||||
- __`intl` (`PropTypes.object.isRequired`) :__
|
||||
Our internationalization object, inserted by `@injectIntl`.
|
||||
|
||||
*/
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
// Mastodon imports //
|
||||
import emojify from '../../../mastodon/features/emoji/emoji';
|
||||
import IconButton from '../../../mastodon/components/icon_button';
|
||||
import Avatar from '../../../mastodon/components/avatar';
|
||||
import { me } from '../../../mastodon/initial_state';
|
||||
|
||||
// Our imports //
|
||||
import { processBio } from '../../util/bio_metadata';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Inital setup:
|
||||
-------------
|
||||
|
||||
The `messages` constant is used to define any messages that we need
|
||||
from inside props. In our case, these are the `unfollow`, `follow`, and
|
||||
`requested` messages used in the `title` of our buttons.
|
||||
|
||||
*/
|
||||
|
||||
const messages = defineMessages({
|
||||
unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
|
||||
follow: { id: 'account.follow', defaultMessage: 'Follow' },
|
||||
requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' },
|
||||
});
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Implementation:
|
||||
---------------
|
||||
|
||||
*/
|
||||
|
||||
@injectIntl
|
||||
export default class AccountHeader extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
account : ImmutablePropTypes.map,
|
||||
onFollow : PropTypes.func.isRequired,
|
||||
intl : PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
/*
|
||||
|
||||
### `render()`
|
||||
|
||||
The `render()` function is used to render our component.
|
||||
|
||||
*/
|
||||
|
||||
render () {
|
||||
const { account, intl } = this.props;
|
||||
|
||||
/*
|
||||
|
||||
If no `account` is provided, then we can't render a header. Otherwise,
|
||||
we get the `displayName` for the account, if available. If it's blank,
|
||||
then we set the `displayName` to just be the `username` of the account.
|
||||
|
||||
*/
|
||||
|
||||
if (!account) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let displayName = account.get('display_name_html');
|
||||
let info = '';
|
||||
let actionBtn = '';
|
||||
let following = false;
|
||||
|
||||
/*
|
||||
|
||||
Next, we handle the account relationships. If the account follows the
|
||||
user, then we add an `info` message. If the user has requested a
|
||||
follow, then we disable the `actionBtn` and display an hourglass.
|
||||
Otherwise, if the account isn't blocked, we set the `actionBtn` to the
|
||||
appropriate icon.
|
||||
|
||||
*/
|
||||
|
||||
if (me !== account.get('id')) {
|
||||
if (account.getIn(['relationship', 'followed_by'])) {
|
||||
info = (
|
||||
<span className='account--follows-info'>
|
||||
<FormattedMessage id='account.follows_you' defaultMessage='Follows you' />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
if (account.getIn(['relationship', 'requested'])) {
|
||||
actionBtn = (
|
||||
<div className='account--action-button'>
|
||||
<IconButton size={26} disabled icon='hourglass' title={intl.formatMessage(messages.requested)} />
|
||||
</div>
|
||||
);
|
||||
} else if (!account.getIn(['relationship', 'blocking'])) {
|
||||
following = account.getIn(['relationship', 'following']);
|
||||
actionBtn = (
|
||||
<div className='account--action-button'>
|
||||
<IconButton
|
||||
size={26}
|
||||
icon={following ? 'user-times' : 'user-plus'}
|
||||
active={following ? true : false}
|
||||
title={intl.formatMessage(following ? messages.unfollow : messages.follow)}
|
||||
onClick={this.props.onFollow}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
we extract the `text` and
|
||||
`metadata` from our account's `note` using `processBio()`.
|
||||
|
||||
*/
|
||||
|
||||
const { text, metadata } = processBio(account.get('note'));
|
||||
|
||||
/*
|
||||
|
||||
Here, we render our component using all the things we've defined above.
|
||||
|
||||
*/
|
||||
|
||||
return (
|
||||
<div className='account__header__wrapper'>
|
||||
<div
|
||||
className='account__header'
|
||||
style={{ backgroundImage: `url(${account.get('header')})` }}
|
||||
>
|
||||
<div>
|
||||
<a href={account.get('url')} target='_blank' rel='noopener'>
|
||||
<span className='account__header__avatar'>
|
||||
<Avatar account={account} size={90} />
|
||||
</span>
|
||||
<span
|
||||
className='account__header__display-name'
|
||||
dangerouslySetInnerHTML={{ __html: displayName }}
|
||||
/>
|
||||
</a>
|
||||
<span className='account__header__username'>
|
||||
@{account.get('acct')}
|
||||
{account.get('locked') ? <i className='fa fa-lock' /> : null}
|
||||
</span>
|
||||
<div className='account__header__content' dangerouslySetInnerHTML={{ __html: emojify(text) }} />
|
||||
|
||||
{info}
|
||||
{actionBtn}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{metadata.length && (
|
||||
<table className='account__metadata'>
|
||||
<tbody>
|
||||
{(() => {
|
||||
let data = [];
|
||||
for (let i = 0; i < metadata.length; i++) {
|
||||
data.push(
|
||||
<tr key={i}>
|
||||
<th scope='row'><div dangerouslySetInnerHTML={{ __html: emojify(metadata[i][0]) }} /></th>
|
||||
<td><div dangerouslySetInnerHTML={{ __html: emojify(metadata[i][1]) }} /></td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
return data;
|
||||
})()}
|
||||
</tbody>
|
||||
</table>
|
||||
) || null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,66 +0,0 @@
|
||||
/*
|
||||
|
||||
`<ComposeAdvancedOptionsContainer>`
|
||||
===================================
|
||||
|
||||
This container connects `<ComposeAdvancedOptions>` to the Redux store.
|
||||
|
||||
*/
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
// Mastodon imports //
|
||||
import { toggleComposeAdvancedOption } from '../../../../mastodon/actions/compose';
|
||||
|
||||
// Our imports //
|
||||
import ComposeAdvancedOptions from '.';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
State mapping:
|
||||
--------------
|
||||
|
||||
The `mapStateToProps()` function maps various state properties to the
|
||||
props of our component. The only property we care about is
|
||||
`compose.advanced_options`.
|
||||
|
||||
*/
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
values: state.getIn(['compose', 'advanced_options']),
|
||||
});
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Dispatch mapping:
|
||||
-----------------
|
||||
|
||||
The `mapDispatchToProps()` function maps dispatches to our store to the
|
||||
various props of our component. We just need to provide a dispatch for
|
||||
when an advanced option toggle changes.
|
||||
|
||||
*/
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
|
||||
onChange (option) {
|
||||
dispatch(toggleComposeAdvancedOption(option));
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(ComposeAdvancedOptions);
|
||||
@ -1,163 +0,0 @@
|
||||
/*
|
||||
|
||||
`<ComposeAdvancedOptions>`
|
||||
==========================
|
||||
|
||||
> For more information on the contents of this file, please contact:
|
||||
>
|
||||
> - surinna [@srn@dev.glitch.social]
|
||||
|
||||
This adds an advanced options dropdown to the toot compose box, for
|
||||
toggles that don't necessarily fit elsewhere.
|
||||
|
||||
__Props:__
|
||||
|
||||
- __`values` (`ImmutablePropTypes.contains(…).isRequired`) :__
|
||||
An Immutable map with the following values:
|
||||
|
||||
- __`do_not_federate` (`PropTypes.bool.isRequired`) :__
|
||||
Specifies whether or not to federate the status.
|
||||
|
||||
- __`onChange` (`PropTypes.func.isRequired`) :__
|
||||
The function to call when a toggle is changed. We pass this from
|
||||
our container to the toggle.
|
||||
|
||||
- __`intl` (`PropTypes.object.isRequired`) :__
|
||||
Our internationalization object, inserted by `@injectIntl`.
|
||||
|
||||
__State:__
|
||||
|
||||
- __`open` :__
|
||||
This tells whether the dropdown is currently open or closed.
|
||||
|
||||
*/
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { injectIntl, defineMessages } from 'react-intl';
|
||||
|
||||
// Our imports //
|
||||
import ComposeAdvancedOptionsToggle from './toggle';
|
||||
import ComposeDropdown from '../dropdown/index';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Inital setup:
|
||||
-------------
|
||||
|
||||
The `messages` constant is used to define any messages that we need
|
||||
from inside props. These are the various titles and labels on our
|
||||
toggles.
|
||||
|
||||
`iconStyle` styles the icon used for the dropdown button.
|
||||
|
||||
*/
|
||||
|
||||
const messages = defineMessages({
|
||||
local_only_short :
|
||||
{ id: 'advanced-options.local-only.short', defaultMessage: 'Local-only' },
|
||||
local_only_long :
|
||||
{ id: 'advanced-options.local-only.long', defaultMessage: 'Do not post to other instances' },
|
||||
advanced_options_icon_title :
|
||||
{ id: 'advanced_options.icon_title', defaultMessage: 'Advanced options' },
|
||||
});
|
||||
|
||||
/*
|
||||
|
||||
Implementation:
|
||||
---------------
|
||||
|
||||
*/
|
||||
|
||||
@injectIntl
|
||||
export default class ComposeAdvancedOptions extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
values : ImmutablePropTypes.contains({
|
||||
do_not_federate : PropTypes.bool.isRequired,
|
||||
}).isRequired,
|
||||
onChange : PropTypes.func.isRequired,
|
||||
intl : PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
|
||||
### `render()`
|
||||
|
||||
`render()` actually puts our component on the screen.
|
||||
|
||||
*/
|
||||
|
||||
render () {
|
||||
const { intl, values } = this.props;
|
||||
|
||||
/*
|
||||
|
||||
The `options` array provides all of the available advanced options
|
||||
alongside their icon, text, and name.
|
||||
|
||||
*/
|
||||
const options = [
|
||||
{ icon: 'wifi', shortText: messages.local_only_short, longText: messages.local_only_long, name: 'do_not_federate' },
|
||||
];
|
||||
|
||||
/*
|
||||
|
||||
`anyEnabled` tells us if any of our advanced options have been enabled.
|
||||
|
||||
*/
|
||||
|
||||
const anyEnabled = values.some((enabled) => enabled);
|
||||
|
||||
/*
|
||||
|
||||
`optionElems` takes our `options` and creates
|
||||
`<ComposeAdvancedOptionsToggle>`s out of them. We use the `name` of the
|
||||
toggle as its `key` so that React can keep track of it.
|
||||
|
||||
*/
|
||||
|
||||
const optionElems = options.map((option) => {
|
||||
return (
|
||||
<ComposeAdvancedOptionsToggle
|
||||
onChange={this.props.onChange}
|
||||
active={values.get(option.name)}
|
||||
key={option.name}
|
||||
name={option.name}
|
||||
shortText={intl.formatMessage(option.shortText)}
|
||||
longText={intl.formatMessage(option.longText)}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
/*
|
||||
|
||||
Finally, we can render our component.
|
||||
|
||||
*/
|
||||
return (
|
||||
<ComposeDropdown
|
||||
title={intl.formatMessage(messages.advanced_options_icon_title)}
|
||||
icon='home'
|
||||
highlight={anyEnabled}
|
||||
>
|
||||
{optionElems}
|
||||
</ComposeDropdown>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,103 +0,0 @@
|
||||
/*
|
||||
|
||||
`<ComposeAdvancedOptionsToggle>`
|
||||
================================
|
||||
|
||||
> For more information on the contents of this file, please contact:
|
||||
>
|
||||
> - surinna [@srn@dev.glitch.social]
|
||||
|
||||
This creates the toggle used by `<ComposeAdvancedOptions>`.
|
||||
|
||||
__Props:__
|
||||
|
||||
- __`onChange` (`PropTypes.func`) :__
|
||||
This provides the function to call when the toggle is
|
||||
(de-?)activated.
|
||||
|
||||
- __`active` (`PropTypes.bool`) :__
|
||||
This prop controls whether the toggle is currently active or not.
|
||||
|
||||
- __`name` (`PropTypes.string`) :__
|
||||
This identifies the toggle, and is sent to `onChange()` when it is
|
||||
called.
|
||||
|
||||
- __`shortText` (`PropTypes.string`) :__
|
||||
This is a short string used as the title of the toggle.
|
||||
|
||||
- __`longText` (`PropTypes.string`) :__
|
||||
This is a longer string used as a subtitle for the toggle.
|
||||
|
||||
*/
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Toggle from 'react-toggle';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Implementation:
|
||||
---------------
|
||||
|
||||
*/
|
||||
|
||||
export default class ComposeAdvancedOptionsToggle extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
onChange: PropTypes.func.isRequired,
|
||||
active: PropTypes.bool.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
shortText: PropTypes.string.isRequired,
|
||||
longText: PropTypes.string.isRequired,
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
### `onToggle()`
|
||||
|
||||
The `onToggle()` function simply calls the `onChange()` prop with the
|
||||
toggle's `name`.
|
||||
|
||||
*/
|
||||
|
||||
onToggle = () => {
|
||||
this.props.onChange(this.props.name);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
### `render()`
|
||||
|
||||
The `render()` function is used to render our component. We just render
|
||||
a `<Toggle>` and place next to it our text.
|
||||
|
||||
*/
|
||||
|
||||
render() {
|
||||
const { active, shortText, longText } = this.props;
|
||||
return (
|
||||
<div role='button' tabIndex='0' className='advanced-options-dropdown__option' onClick={this.onToggle}>
|
||||
<div className='advanced-options-dropdown__option__toggle'>
|
||||
<Toggle checked={active} onChange={this.onToggle} />
|
||||
</div>
|
||||
<div className='advanced-options-dropdown__option__content'>
|
||||
<strong>{shortText}</strong>
|
||||
{longText}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
// Package imports //
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
// Mastodon imports //
|
||||
import { closeModal } from '../../../mastodon/actions/modal';
|
||||
|
||||
// Our imports //
|
||||
import { changeLocalSetting } from '../../../glitch/actions/local_settings';
|
||||
import LocalSettings from '.';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
settings: state.get('local_settings'),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
onChange (setting, value) {
|
||||
dispatch(changeLocalSetting(setting, value));
|
||||
},
|
||||
onClose () {
|
||||
dispatch(closeModal());
|
||||
},
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(LocalSettings);
|
||||
@ -1,48 +0,0 @@
|
||||
/*
|
||||
|
||||
`<NotificationContainer>`
|
||||
=========================
|
||||
|
||||
This container connects `<Notification>`s to the Redux store.
|
||||
|
||||
*/
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
// Our imports //
|
||||
import Notification from '.';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
const mapStateToProps = (state, props) => {
|
||||
// replace account id with object
|
||||
let leNotif = props.notification.set('account', state.getIn(['accounts', props.notification.get('account')]));
|
||||
|
||||
// populate markedForDelete from state - is mysteriously lost somewhere
|
||||
for (let n of state.getIn(['notifications', 'items'])) {
|
||||
if (n.get('id') === props.notification.get('id')) {
|
||||
leNotif = leNotif.set('markedForDelete', n.get('markedForDelete'));
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return ({
|
||||
notification: leNotif,
|
||||
settings: state.get('local_settings'),
|
||||
notifCleaning: state.getIn(['notifications', 'cleaningMode']),
|
||||
});
|
||||
};
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
export default connect(mapStateToProps)(Notification);
|
||||
@ -1,72 +0,0 @@
|
||||
// `<NotificationFollow>`
|
||||
// ======================
|
||||
|
||||
// * * * * * * * //
|
||||
|
||||
// Imports
|
||||
// -------
|
||||
|
||||
// Package imports.
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
// Mastodon imports.
|
||||
import Permalink from '../../../mastodon/components/permalink';
|
||||
import AccountContainer from '../../../mastodon/containers/account_container';
|
||||
|
||||
// Our imports.
|
||||
import NotificationOverlayContainer from '../notification/overlay/container';
|
||||
|
||||
// * * * * * * * //
|
||||
|
||||
// Implementation
|
||||
// --------------
|
||||
|
||||
export default class NotificationFollow extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
id : PropTypes.string.isRequired,
|
||||
account : ImmutablePropTypes.map.isRequired,
|
||||
notification : ImmutablePropTypes.map.isRequired,
|
||||
};
|
||||
|
||||
render () {
|
||||
const { account, notification } = this.props;
|
||||
|
||||
// Links to the display name.
|
||||
const displayName = account.get('display_name_html') || account.get('username');
|
||||
const link = (
|
||||
<Permalink
|
||||
className='notification__display-name'
|
||||
href={account.get('url')}
|
||||
title={account.get('acct')}
|
||||
to={`/accounts/${account.get('id')}`}
|
||||
dangerouslySetInnerHTML={{ __html: displayName }}
|
||||
/>
|
||||
);
|
||||
|
||||
// Renders.
|
||||
return (
|
||||
<div className='notification notification-follow'>
|
||||
<div className='notification__message'>
|
||||
<div className='notification__favourite-icon-wrapper'>
|
||||
<i className='fa fa-fw fa-user-plus' />
|
||||
</div>
|
||||
|
||||
<FormattedMessage
|
||||
id='notification.follow'
|
||||
defaultMessage='{name} followed you'
|
||||
values={{ name: link }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<AccountContainer id={account.get('id')} withNote={false} />
|
||||
<NotificationOverlayContainer notification={notification} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,49 +0,0 @@
|
||||
/*
|
||||
|
||||
`<NotificationOverlayContainer>`
|
||||
=========================
|
||||
|
||||
This container connects `<NotificationOverlay>`s to the Redux store.
|
||||
|
||||
*/
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
// Our imports //
|
||||
import NotificationOverlay from './notification_overlay';
|
||||
import { markNotificationForDelete } from '../../../../mastodon/actions/notifications';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Dispatch mapping:
|
||||
-----------------
|
||||
|
||||
The `mapDispatchToProps()` function maps dispatches to our store to the
|
||||
various props of our component. We only need to provide a dispatch for
|
||||
deleting notifications.
|
||||
|
||||
*/
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
onMarkForDelete(id, yes) {
|
||||
dispatch(markNotificationForDelete(id, yes));
|
||||
},
|
||||
});
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
show: state.getIn(['notifications', 'cleaningMode']),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(NotificationOverlay);
|
||||
@ -1,263 +0,0 @@
|
||||
/*
|
||||
|
||||
`<StatusContainer>`
|
||||
===================
|
||||
|
||||
Original file by @gargron@mastodon.social et al as part of
|
||||
tootsuite/mastodon. Documentation by @kibi@glitch.social. The code
|
||||
detecting reblogs has been moved here from <Status>.
|
||||
|
||||
*/
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
defineMessages,
|
||||
injectIntl,
|
||||
FormattedMessage,
|
||||
} from 'react-intl';
|
||||
|
||||
// Mastodon imports //
|
||||
import { makeGetStatus } from '../../../mastodon/selectors';
|
||||
import {
|
||||
replyCompose,
|
||||
mentionCompose,
|
||||
} from '../../../mastodon/actions/compose';
|
||||
import {
|
||||
reblog,
|
||||
favourite,
|
||||
unreblog,
|
||||
unfavourite,
|
||||
pin,
|
||||
unpin,
|
||||
} from '../../../mastodon/actions/interactions';
|
||||
import { blockAccount } from '../../../mastodon/actions/accounts';
|
||||
import { initMuteModal } from '../../../mastodon/actions/mutes';
|
||||
import {
|
||||
muteStatus,
|
||||
unmuteStatus,
|
||||
deleteStatus,
|
||||
} from '../../../mastodon/actions/statuses';
|
||||
import { initReport } from '../../../mastodon/actions/reports';
|
||||
import { openModal } from '../../../mastodon/actions/modal';
|
||||
|
||||
// Our imports //
|
||||
import Status from '.';
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
Inital setup:
|
||||
-------------
|
||||
|
||||
The `messages` constant is used to define any messages that we will
|
||||
need in our component. In our case, these are the various confirmation
|
||||
messages used with statuses.
|
||||
|
||||
*/
|
||||
|
||||
const messages = defineMessages({
|
||||
deleteConfirm : {
|
||||
id : 'confirmations.delete.confirm',
|
||||
defaultMessage : 'Delete',
|
||||
},
|
||||
deleteMessage : {
|
||||
id : 'confirmations.delete.message',
|
||||
defaultMessage : 'Are you sure you want to delete this status?',
|
||||
},
|
||||
blockConfirm : {
|
||||
id : 'confirmations.block.confirm',
|
||||
defaultMessage : 'Block',
|
||||
},
|
||||
});
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
State mapping:
|
||||
--------------
|
||||
|
||||
The `mapStateToProps()` function maps various state properties to the
|
||||
props of our component. We wrap this in a `makeMapStateToProps()`
|
||||
function to give us closure and preserve `getStatus()` across function
|
||||
calls.
|
||||
|
||||
*/
|
||||
|
||||
const makeMapStateToProps = () => {
|
||||
const getStatus = makeGetStatus();
|
||||
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
|
||||
let status = getStatus(state, ownProps.id);
|
||||
|
||||
if(status === null) {
|
||||
console.error(`ERROR! NULL STATUS! ${ownProps.id}`);
|
||||
// work-around: find first good status
|
||||
for (let k of state.get('statuses').keys()) {
|
||||
status = getStatus(state, k);
|
||||
if (status !== null) break;
|
||||
}
|
||||
}
|
||||
|
||||
let reblogStatus = status.get('reblog', null);
|
||||
let account = undefined;
|
||||
let prepend = undefined;
|
||||
|
||||
/*
|
||||
|
||||
Here we process reblogs. If our status is a reblog, then we create a
|
||||
`prependMessage` to pass along to our `<Status>` along with the
|
||||
reblogger's `account`, and set `coreStatus` (the one we will actually
|
||||
render) to the status which has been reblogged.
|
||||
|
||||
*/
|
||||
|
||||
if (reblogStatus !== null && typeof reblogStatus === 'object') {
|
||||
account = status.get('account');
|
||||
status = reblogStatus;
|
||||
prepend = 'reblogged_by';
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Here are the props we pass to `<Status>`.
|
||||
|
||||
*/
|
||||
|
||||
return {
|
||||
status : status,
|
||||
account : account || ownProps.account,
|
||||
settings : state.get('local_settings'),
|
||||
prepend : prepend || ownProps.prepend,
|
||||
reblogModal : state.getIn(['meta', 'boost_modal']),
|
||||
deleteModal : state.getIn(['meta', 'delete_modal']),
|
||||
};
|
||||
};
|
||||
|
||||
return mapStateToProps;
|
||||
};
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
Dispatch mapping:
|
||||
-----------------
|
||||
|
||||
The `mapDispatchToProps()` function maps dispatches to our store to the
|
||||
various props of our component. We need to provide dispatches for all
|
||||
of the things you can do with a status: reply, reblog, favourite, et
|
||||
cetera.
|
||||
|
||||
For a few of these dispatches, we open up confirmation modals; the rest
|
||||
just immediately execute their corresponding actions.
|
||||
|
||||
*/
|
||||
|
||||
const mapDispatchToProps = (dispatch, { intl }) => ({
|
||||
|
||||
onReply (status, router) {
|
||||
dispatch(replyCompose(status, router));
|
||||
},
|
||||
|
||||
onModalReblog (status) {
|
||||
dispatch(reblog(status));
|
||||
},
|
||||
|
||||
onReblog (status, e) {
|
||||
if (status.get('reblogged')) {
|
||||
dispatch(unreblog(status));
|
||||
} else {
|
||||
if (e.shiftKey || !this.reblogModal) {
|
||||
this.onModalReblog(status);
|
||||
} else {
|
||||
dispatch(openModal('BOOST', { status, onReblog: this.onModalReblog }));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onFavourite (status) {
|
||||
if (status.get('favourited')) {
|
||||
dispatch(unfavourite(status));
|
||||
} else {
|
||||
dispatch(favourite(status));
|
||||
}
|
||||
},
|
||||
|
||||
onPin (status) {
|
||||
if (status.get('pinned')) {
|
||||
dispatch(unpin(status));
|
||||
} else {
|
||||
dispatch(pin(status));
|
||||
}
|
||||
},
|
||||
|
||||
onEmbed (status) {
|
||||
dispatch(openModal('EMBED', { url: status.get('url') }));
|
||||
},
|
||||
|
||||
onDelete (status) {
|
||||
if (!this.deleteModal) {
|
||||
dispatch(deleteStatus(status.get('id')));
|
||||
} else {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
message: intl.formatMessage(messages.deleteMessage),
|
||||
confirm: intl.formatMessage(messages.deleteConfirm),
|
||||
onConfirm: () => dispatch(deleteStatus(status.get('id'))),
|
||||
}));
|
||||
}
|
||||
},
|
||||
|
||||
onMention (account, router) {
|
||||
dispatch(mentionCompose(account, router));
|
||||
},
|
||||
|
||||
onOpenMedia (media, index) {
|
||||
dispatch(openModal('MEDIA', { media, index }));
|
||||
},
|
||||
|
||||
onOpenVideo (media, time) {
|
||||
dispatch(openModal('VIDEO', { media, time }));
|
||||
},
|
||||
|
||||
onBlock (account) {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
|
||||
confirm: intl.formatMessage(messages.blockConfirm),
|
||||
onConfirm: () => dispatch(blockAccount(account.get('id'))),
|
||||
}));
|
||||
},
|
||||
|
||||
onReport (status) {
|
||||
dispatch(initReport(status.get('account'), status));
|
||||
},
|
||||
|
||||
onMute (account) {
|
||||
dispatch(initMuteModal(account));
|
||||
},
|
||||
|
||||
onMuteConversation (status) {
|
||||
if (status.get('muted')) {
|
||||
dispatch(unmuteStatus(status.get('id')));
|
||||
} else {
|
||||
dispatch(muteStatus(status.get('id')));
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
export default injectIntl(
|
||||
connect(makeMapStateToProps, mapDispatchToProps)(Status)
|
||||
);
|
||||
@ -1,79 +0,0 @@
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
|
||||
// Mastodon imports //
|
||||
import IconButton from '../../../../mastodon/components/icon_button';
|
||||
|
||||
// Our imports //
|
||||
import StatusGalleryItem from './item';
|
||||
|
||||
const messages = defineMessages({
|
||||
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
|
||||
});
|
||||
|
||||
@injectIntl
|
||||
export default class StatusGallery extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
sensitive: PropTypes.bool,
|
||||
media: ImmutablePropTypes.list.isRequired,
|
||||
letterbox: PropTypes.bool,
|
||||
fullwidth: PropTypes.bool,
|
||||
height: PropTypes.number.isRequired,
|
||||
onOpenMedia: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
autoPlayGif: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
state = {
|
||||
visible: !this.props.sensitive,
|
||||
};
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({ visible: !this.state.visible });
|
||||
}
|
||||
|
||||
handleClick = (index) => {
|
||||
this.props.onOpenMedia(this.props.media, index);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { media, intl, sensitive, letterbox, fullwidth } = this.props;
|
||||
|
||||
let children;
|
||||
|
||||
if (!this.state.visible) {
|
||||
let warning;
|
||||
|
||||
if (sensitive) {
|
||||
warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
|
||||
} else {
|
||||
warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
|
||||
}
|
||||
|
||||
children = (
|
||||
<div role='button' tabIndex='0' className='media-spoiler' onClick={this.handleOpen}>
|
||||
<span className='media-spoiler__warning'>{warning}</span>
|
||||
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
const size = media.take(4).size;
|
||||
children = media.take(4).map((attachment, i) => <StatusGalleryItem key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} autoPlayGif={this.props.autoPlayGif} index={i} size={size} letterbox={letterbox} />);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`media-gallery ${fullwidth ? 'full-width' : ''}`} style={{ height: `${this.props.height}px` }}>
|
||||
<div className={`spoiler-button ${this.state.visible ? 'spoiler-button--visible' : ''}`}>
|
||||
<IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />
|
||||
</div>
|
||||
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,158 +0,0 @@
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// Mastodon imports //
|
||||
import { isIOS } from '../../../../mastodon/is_mobile';
|
||||
|
||||
export default class StatusGalleryItem extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
attachment: ImmutablePropTypes.map.isRequired,
|
||||
index: PropTypes.number.isRequired,
|
||||
size: PropTypes.number.isRequired,
|
||||
letterbox: PropTypes.bool,
|
||||
onClick: PropTypes.func.isRequired,
|
||||
autoPlayGif: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
handleMouseEnter = (e) => {
|
||||
if (this.hoverToPlay()) {
|
||||
e.target.play();
|
||||
}
|
||||
}
|
||||
|
||||
handleMouseLeave = (e) => {
|
||||
if (this.hoverToPlay()) {
|
||||
e.target.pause();
|
||||
e.target.currentTime = 0;
|
||||
}
|
||||
}
|
||||
|
||||
hoverToPlay () {
|
||||
const { attachment, autoPlayGif } = this.props;
|
||||
return !autoPlayGif && attachment.get('type') === 'gifv';
|
||||
}
|
||||
|
||||
handleClick = (e) => {
|
||||
const { index, onClick } = this.props;
|
||||
|
||||
if (e.button === 0) {
|
||||
e.preventDefault();
|
||||
onClick(index);
|
||||
}
|
||||
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
render () {
|
||||
const { attachment, index, size, letterbox } = this.props;
|
||||
|
||||
let width = 50;
|
||||
let height = 100;
|
||||
let top = 'auto';
|
||||
let left = 'auto';
|
||||
let bottom = 'auto';
|
||||
let right = 'auto';
|
||||
|
||||
if (size === 1) {
|
||||
width = 100;
|
||||
}
|
||||
|
||||
if (size === 4 || (size === 3 && index > 0)) {
|
||||
height = 50;
|
||||
}
|
||||
|
||||
if (size === 2) {
|
||||
if (index === 0) {
|
||||
right = '2px';
|
||||
} else {
|
||||
left = '2px';
|
||||
}
|
||||
} else if (size === 3) {
|
||||
if (index === 0) {
|
||||
right = '2px';
|
||||
} else if (index > 0) {
|
||||
left = '2px';
|
||||
}
|
||||
|
||||
if (index === 1) {
|
||||
bottom = '2px';
|
||||
} else if (index > 1) {
|
||||
top = '2px';
|
||||
}
|
||||
} else if (size === 4) {
|
||||
if (index === 0 || index === 2) {
|
||||
right = '2px';
|
||||
}
|
||||
|
||||
if (index === 1 || index === 3) {
|
||||
left = '2px';
|
||||
}
|
||||
|
||||
if (index < 2) {
|
||||
bottom = '2px';
|
||||
} else {
|
||||
top = '2px';
|
||||
}
|
||||
}
|
||||
|
||||
let thumbnail = '';
|
||||
|
||||
if (attachment.get('type') === 'image') {
|
||||
const previewUrl = attachment.get('preview_url');
|
||||
const previewWidth = attachment.getIn(['meta', 'small', 'width']);
|
||||
|
||||
const originalUrl = attachment.get('url');
|
||||
const originalWidth = attachment.getIn(['meta', 'original', 'width']);
|
||||
|
||||
const srcSet = `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w`;
|
||||
const sizes = `(min-width: 1025px) ${320 * (width / 100)}px, ${width}vw`;
|
||||
|
||||
thumbnail = (
|
||||
<a
|
||||
className='media-gallery__item-thumbnail'
|
||||
href={attachment.get('remote_url') || originalUrl}
|
||||
onClick={this.handleClick}
|
||||
target='_blank'
|
||||
>
|
||||
<img
|
||||
className={letterbox ? 'letterbox' : ''}
|
||||
src={previewUrl} srcSet={srcSet}
|
||||
sizes={sizes}
|
||||
alt={attachment.get('description')}
|
||||
title={attachment.get('description')}
|
||||
/>
|
||||
</a>
|
||||
);
|
||||
} else if (attachment.get('type') === 'gifv') {
|
||||
const autoPlay = !isIOS() && this.props.autoPlayGif;
|
||||
|
||||
thumbnail = (
|
||||
<div className={`media-gallery__gifv ${autoPlay ? 'autoplay' : ''}`}>
|
||||
<video
|
||||
className={`media-gallery__item-gifv-thumbnail${letterbox ? ' letterbox' : ''}`}
|
||||
role='application'
|
||||
src={attachment.get('url')}
|
||||
onClick={this.handleClick}
|
||||
onMouseEnter={this.handleMouseEnter}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
autoPlay={autoPlay}
|
||||
loop
|
||||
muted
|
||||
/>
|
||||
|
||||
<span className='media-gallery__gifv__label'>GIF</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='media-gallery__item' key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
|
||||
{thumbnail}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,760 +0,0 @@
|
||||
/*
|
||||
|
||||
`<Status>`
|
||||
==========
|
||||
|
||||
Original file by @gargron@mastodon.social et al as part of
|
||||
tootsuite/mastodon. *Heavily* rewritten (and documented!) by
|
||||
@kibi@glitch.social as a part of glitch-soc/mastodon. The following
|
||||
features have been added:
|
||||
|
||||
- Better separating the "guts" of statuses from their wrapper(s)
|
||||
- Collapsing statuses
|
||||
- Moving images inside of CWs
|
||||
|
||||
A number of aspects of this original file have been split off into
|
||||
their own components for better maintainance; for these, see:
|
||||
|
||||
- <StatusHeader>
|
||||
- <StatusPrepend>
|
||||
|
||||
…And, of course, the other <Status>-related components as well.
|
||||
|
||||
*/
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
|
||||
// Mastodon imports //
|
||||
import scheduleIdleTask from '../../../mastodon/features/ui/util/schedule_idle_task';
|
||||
import { autoPlayGif } from '../../../mastodon/initial_state';
|
||||
|
||||
// Our imports //
|
||||
import StatusPrepend from './prepend';
|
||||
import StatusHeader from './header';
|
||||
import StatusContent from './content';
|
||||
import StatusActionBar from './action_bar';
|
||||
import StatusGallery from './gallery';
|
||||
import StatusPlayer from './player';
|
||||
import NotificationOverlayContainer from '../notification/overlay/container';
|
||||
|
||||
/* * * * */
|
||||
|
||||
/*
|
||||
|
||||
The `<Status>` component:
|
||||
-------------------------
|
||||
|
||||
The `<Status>` component is a container for statuses. It consists of a
|
||||
few parts:
|
||||
|
||||
- The `<StatusPrepend>`, which contains tangential information about
|
||||
the status, such as who reblogged it.
|
||||
- The `<StatusHeader>`, which contains the avatar and username of the
|
||||
status author, as well as a media icon and the "collapse" toggle.
|
||||
- The `<StatusContent>`, which contains the content of the status.
|
||||
- The `<StatusActionBar>`, which provides actions to be performed
|
||||
on statuses, like reblogging or sending a reply.
|
||||
|
||||
### Context
|
||||
|
||||
- __`router` (`PropTypes.object`) :__
|
||||
We need to get our router from the surrounding React context.
|
||||
|
||||
### Props
|
||||
|
||||
- __`id` (`PropTypes.number`) :__
|
||||
The id of the status.
|
||||
|
||||
- __`status` (`ImmutablePropTypes.map`) :__
|
||||
The status object, straight from the store.
|
||||
|
||||
- __`account` (`ImmutablePropTypes.map`) :__
|
||||
Don't be confused by this one! This is **not** the account which
|
||||
posted the status, but the associated account with any further
|
||||
action (eg, a reblog or a favourite).
|
||||
|
||||
- __`settings` (`ImmutablePropTypes.map`) :__
|
||||
These are our local settings, fetched from our store. We need this
|
||||
to determine how best to collapse our statuses, among other things.
|
||||
|
||||
- __`onFavourite`, `onReblog`, `onModalReblog`, `onDelete`,
|
||||
`onMention`, `onMute`, `onMuteConversation`, onBlock`, `onReport`,
|
||||
`onOpenMedia`, `onOpenVideo` (`PropTypes.func`) :__
|
||||
These are all functions passed through from the
|
||||
`<StatusContainer>`. We don't deal with them directly here.
|
||||
|
||||
- __`reblogModal`, `deleteModal` (`PropTypes.bool`) :__
|
||||
These tell whether or not the user has modals activated for
|
||||
reblogging and deleting statuses. They are used by the `onReblog`
|
||||
and `onDelete` functions, but we don't deal with them here.
|
||||
|
||||
- __`muted` (`PropTypes.bool`) :__
|
||||
This has nothing to do with a user or conversation mute! "Muted" is
|
||||
what Mastodon internally calls the subdued look of statuses in the
|
||||
notifications column. This should be `true` for notifications, and
|
||||
`false` otherwise.
|
||||
|
||||
- __`collapse` (`PropTypes.bool`) :__
|
||||
This prop signals a directive from a higher power to (un)collapse
|
||||
a status. Most of the time it should be `undefined`, in which case
|
||||
we do nothing.
|
||||
|
||||
- __`prepend` (`PropTypes.string`) :__
|
||||
The type of prepend: `'reblogged_by'`, `'reblog'`, or
|
||||
`'favourite'`.
|
||||
|
||||
- __`withDismiss` (`PropTypes.bool`) :__
|
||||
Whether or not the status can be dismissed. Used for notifications.
|
||||
|
||||
- __`intersectionObserverWrapper` (`PropTypes.object`) :__
|
||||
This holds our intersection observer. In Mastodon parlance,
|
||||
an "intersection" is just when the status is viewable onscreen.
|
||||
|
||||
### State
|
||||
|
||||
- __`isExpanded` :__
|
||||
Should be either `true`, `false`, or `null`. The meanings of
|
||||
these values are as follows:
|
||||
|
||||
- __`true` :__ The status contains a CW and the CW is expanded.
|
||||
- __`false` :__ The status is collapsed.
|
||||
- __`null` :__ The status is not collapsed or expanded.
|
||||
|
||||
- __`isIntersecting` :__
|
||||
This boolean tells us whether or not the status is currently
|
||||
onscreen.
|
||||
|
||||
- __`isHidden` :__
|
||||
This boolean tells us if the status has been unrendered to save
|
||||
CPUs.
|
||||
|
||||
*/
|
||||
|
||||
export default class Status extends ImmutablePureComponent {
|
||||
|
||||
static contextTypes = {
|
||||
router : PropTypes.object,
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
id : PropTypes.string,
|
||||
status : ImmutablePropTypes.map,
|
||||
account : ImmutablePropTypes.map,
|
||||
settings : ImmutablePropTypes.map,
|
||||
notification : ImmutablePropTypes.map,
|
||||
onFavourite : PropTypes.func,
|
||||
onReblog : PropTypes.func,
|
||||
onModalReblog : PropTypes.func,
|
||||
onDelete : PropTypes.func,
|
||||
onPin : PropTypes.func,
|
||||
onMention : PropTypes.func,
|
||||
onMute : PropTypes.func,
|
||||
onMuteConversation : PropTypes.func,
|
||||
onBlock : PropTypes.func,
|
||||
onEmbed : PropTypes.func,
|
||||
onHeightChange : PropTypes.func,
|
||||
onReport : PropTypes.func,
|
||||
onOpenMedia : PropTypes.func,
|
||||
onOpenVideo : PropTypes.func,
|
||||
reblogModal : PropTypes.bool,
|
||||
deleteModal : PropTypes.bool,
|
||||
muted : PropTypes.bool,
|
||||
collapse : PropTypes.bool,
|
||||
prepend : PropTypes.string,
|
||||
withDismiss : PropTypes.bool,
|
||||
intersectionObserverWrapper : PropTypes.object,
|
||||
};
|
||||
|
||||
state = {
|
||||
isExpanded : null,
|
||||
isIntersecting : true,
|
||||
isHidden : false,
|
||||
markedForDelete : false,
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
### Implementation
|
||||
|
||||
#### `updateOnProps` and `updateOnStates`.
|
||||
|
||||
`updateOnProps` and `updateOnStates` tell the component when to update.
|
||||
We specify them explicitly because some of our props are dynamically=
|
||||
generated functions, which would otherwise always trigger an update.
|
||||
Of course, this means that if we add an important prop, we will need
|
||||
to remember to specify it here.
|
||||
|
||||
*/
|
||||
|
||||
updateOnProps = [
|
||||
'status',
|
||||
'account',
|
||||
'settings',
|
||||
'prepend',
|
||||
'boostModal',
|
||||
'muted',
|
||||
'collapse',
|
||||
'notification',
|
||||
]
|
||||
|
||||
updateOnStates = [
|
||||
'isExpanded',
|
||||
'markedForDelete',
|
||||
]
|
||||
|
||||
/*
|
||||
|
||||
#### `componentWillReceiveProps()`.
|
||||
|
||||
If our settings have changed to disable collapsed statuses, then we
|
||||
need to make sure that we uncollapse every one. We do that by watching
|
||||
for changes to `settings.collapsed.enabled` in
|
||||
`componentWillReceiveProps()`.
|
||||
|
||||
We also need to watch for changes on the `collapse` prop---if this
|
||||
changes to anything other than `undefined`, then we need to collapse or
|
||||
uncollapse our status accordingly.
|
||||
|
||||
*/
|
||||
|
||||
componentWillReceiveProps (nextProps) {
|
||||
if (!nextProps.settings.getIn(['collapsed', 'enabled'])) {
|
||||
if (this.state.isExpanded === false) {
|
||||
this.setExpansion(null);
|
||||
}
|
||||
} else if (
|
||||
nextProps.collapse !== this.props.collapse &&
|
||||
nextProps.collapse !== undefined
|
||||
) this.setExpansion(nextProps.collapse ? false : null);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `componentDidMount()`.
|
||||
|
||||
When mounting, we just check to see if our status should be collapsed,
|
||||
and collapse it if so. We don't need to worry about whether collapsing
|
||||
is enabled here, because `setExpansion()` already takes that into
|
||||
account.
|
||||
|
||||
The cases where a status should be collapsed are:
|
||||
|
||||
- The `collapse` prop has been set to `true`
|
||||
- The user has decided in local settings to collapse all statuses.
|
||||
- The user has decided to collapse all notifications ('muted'
|
||||
statuses).
|
||||
- The user has decided to collapse long statuses and the status is
|
||||
over 400px (without media, or 650px with).
|
||||
- The status is a reply and the user has decided to collapse all
|
||||
replies.
|
||||
- The status contains media and the user has decided to collapse all
|
||||
statuses with media.
|
||||
|
||||
We also start up our intersection observer to monitor our statuses.
|
||||
`componentMounted` lets us know that everything has been set up
|
||||
properly and our intersection observer is good to go.
|
||||
|
||||
*/
|
||||
|
||||
componentDidMount () {
|
||||
const { node, handleIntersection } = this;
|
||||
const {
|
||||
status,
|
||||
settings,
|
||||
collapse,
|
||||
muted,
|
||||
id,
|
||||
intersectionObserverWrapper,
|
||||
prepend,
|
||||
} = this.props;
|
||||
const autoCollapseSettings = settings.getIn(['collapsed', 'auto']);
|
||||
|
||||
if (
|
||||
collapse ||
|
||||
autoCollapseSettings.get('all') || (
|
||||
autoCollapseSettings.get('notifications') && muted
|
||||
) || (
|
||||
autoCollapseSettings.get('lengthy') &&
|
||||
node.clientHeight > (
|
||||
status.get('media_attachments').size && !muted ? 650 : 400
|
||||
)
|
||||
) || (
|
||||
autoCollapseSettings.get('reblogs') &&
|
||||
prepend === 'reblogged_by'
|
||||
) || (
|
||||
autoCollapseSettings.get('replies') &&
|
||||
status.get('in_reply_to_id', null) !== null
|
||||
) || (
|
||||
autoCollapseSettings.get('media') &&
|
||||
!(status.get('spoiler_text').length) &&
|
||||
status.get('media_attachments').size
|
||||
)
|
||||
) this.setExpansion(false);
|
||||
|
||||
if (!intersectionObserverWrapper) return;
|
||||
else intersectionObserverWrapper.observe(
|
||||
id,
|
||||
node,
|
||||
handleIntersection
|
||||
);
|
||||
|
||||
this.componentMounted = true;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `shouldComponentUpdate()`.
|
||||
|
||||
If the status is about to be both offscreen (not intersecting) and
|
||||
hidden, then we only need to update it if it's not that way currently.
|
||||
If the status is moving from offscreen to onscreen, then we *have* to
|
||||
re-render, so that we can unhide the element if necessary.
|
||||
|
||||
If neither of these cases are true, we can leave it up to our
|
||||
`updateOnProps` and `updateOnStates` arrays.
|
||||
|
||||
*/
|
||||
|
||||
shouldComponentUpdate (nextProps, nextState) {
|
||||
switch (true) {
|
||||
case !nextState.isIntersecting && nextState.isHidden:
|
||||
return this.state.isIntersecting || !this.state.isHidden;
|
||||
case nextState.isIntersecting && !this.state.isIntersecting:
|
||||
return true;
|
||||
default:
|
||||
return super.shouldComponentUpdate(nextProps, nextState);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `componentDidUpdate()`.
|
||||
|
||||
If our component is being rendered for any reason and an update has
|
||||
triggered, this will save its height.
|
||||
|
||||
This is, frankly, a bit overkill, as the only instance when we
|
||||
actually *need* to update the height right now should be when the
|
||||
value of `isExpanded` has changed. But it makes for more readable
|
||||
code and prevents bugs in the future where the height isn't set
|
||||
properly after some change.
|
||||
|
||||
*/
|
||||
|
||||
componentDidUpdate () {
|
||||
if (
|
||||
this.state.isIntersecting || !this.state.isHidden
|
||||
) this.saveHeight();
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `componentWillUnmount()`.
|
||||
|
||||
If our component is about to unmount, then we'd better unset
|
||||
`this.componentMounted`.
|
||||
|
||||
*/
|
||||
|
||||
componentWillUnmount () {
|
||||
this.componentMounted = false;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `handleIntersection()`.
|
||||
|
||||
`handleIntersection()` either hides the status (if it is offscreen) or
|
||||
unhides it (if it is onscreen). It's called by
|
||||
`intersectionObserverWrapper.observe()`.
|
||||
|
||||
If our status isn't intersecting, we schedule an idle task (using the
|
||||
aptly-named `scheduleIdleTask()`) to hide the status at the next
|
||||
available opportunity.
|
||||
|
||||
tootsuite/mastodon left us with the following enlightening comment
|
||||
regarding this function:
|
||||
|
||||
> Edge 15 doesn't support isIntersecting, but we can infer it
|
||||
|
||||
It then implements a polyfill (intersectionRect.height > 0) which isn't
|
||||
actually sufficient. The short answer is, this behaviour isn't really
|
||||
supported on Edge but we can get kinda close.
|
||||
|
||||
*/
|
||||
|
||||
handleIntersection = (entry) => {
|
||||
const isIntersecting = (
|
||||
typeof entry.isIntersecting === 'boolean' ?
|
||||
entry.isIntersecting :
|
||||
entry.intersectionRect.height > 0
|
||||
);
|
||||
this.setState(
|
||||
(prevState) => {
|
||||
if (prevState.isIntersecting && !isIntersecting) {
|
||||
scheduleIdleTask(this.hideIfNotIntersecting);
|
||||
}
|
||||
return {
|
||||
isIntersecting : isIntersecting,
|
||||
isHidden : false,
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `hideIfNotIntersecting()`.
|
||||
|
||||
This function will hide the status if we're still not intersecting.
|
||||
Hiding the status means that it will just render an empty div instead
|
||||
of actual content, which saves RAMS and CPUs or some such.
|
||||
|
||||
*/
|
||||
|
||||
hideIfNotIntersecting = () => {
|
||||
if (!this.componentMounted) return;
|
||||
this.setState(
|
||||
(prevState) => ({ isHidden: !prevState.isIntersecting })
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `saveHeight()`.
|
||||
|
||||
`saveHeight()` saves the height of our status so that when whe hide it
|
||||
we preserve its dimensions. We only want to store our height, though,
|
||||
if our status has content (otherwise, it would imply that it is
|
||||
already hidden).
|
||||
|
||||
*/
|
||||
|
||||
saveHeight = () => {
|
||||
if (this.node && this.node.children.length) {
|
||||
this.height = this.node.getBoundingClientRect().height;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `setExpansion()`.
|
||||
|
||||
`setExpansion()` sets the value of `isExpanded` in our state. It takes
|
||||
one argument, `value`, which gives the desired value for `isExpanded`.
|
||||
The default for this argument is `null`.
|
||||
|
||||
`setExpansion()` automatically checks for us whether toot collapsing
|
||||
is enabled, so we don't have to.
|
||||
|
||||
We use a `switch` statement to simplify our code.
|
||||
|
||||
*/
|
||||
|
||||
setExpansion = (value) => {
|
||||
switch (true) {
|
||||
case value === undefined || value === null:
|
||||
this.setState({ isExpanded: null });
|
||||
break;
|
||||
case !value && this.props.settings.getIn(['collapsed', 'enabled']):
|
||||
this.setState({ isExpanded: false });
|
||||
break;
|
||||
case !!value:
|
||||
this.setState({ isExpanded: true });
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `handleRef()`.
|
||||
|
||||
`handleRef()` just saves a reference to our status node to `this.node`.
|
||||
It also saves our height, in case the height of our node has changed.
|
||||
|
||||
*/
|
||||
|
||||
handleRef = (node) => {
|
||||
this.node = node;
|
||||
this.saveHeight();
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `parseClick()`.
|
||||
|
||||
`parseClick()` takes a click event and responds appropriately.
|
||||
If our status is collapsed, then clicking on it should uncollapse it.
|
||||
If `Shift` is held, then clicking on it should collapse it.
|
||||
Otherwise, we open the url handed to us in `destination`, if
|
||||
applicable.
|
||||
|
||||
*/
|
||||
|
||||
parseClick = (e, destination) => {
|
||||
const { router } = this.context;
|
||||
const { status } = this.props;
|
||||
const { isExpanded } = this.state;
|
||||
if (!router) return;
|
||||
if (destination === undefined) {
|
||||
destination = `/statuses/${
|
||||
status.getIn(['reblog', 'id'], status.get('id'))
|
||||
}`;
|
||||
}
|
||||
if (e.button === 0) {
|
||||
if (isExpanded === false) this.setExpansion(null);
|
||||
else if (e.shiftKey) {
|
||||
this.setExpansion(false);
|
||||
document.getSelection().removeAllRanges();
|
||||
} else router.history.push(destination);
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
#### `render()`.
|
||||
|
||||
`render()` actually puts our element on the screen. The particulars of
|
||||
this operation are further explained in the code below.
|
||||
|
||||
*/
|
||||
|
||||
render () {
|
||||
const {
|
||||
parseClick,
|
||||
setExpansion,
|
||||
saveHeight,
|
||||
handleRef,
|
||||
} = this;
|
||||
const { router } = this.context;
|
||||
const {
|
||||
status,
|
||||
account,
|
||||
settings,
|
||||
collapsed,
|
||||
muted,
|
||||
prepend,
|
||||
intersectionObserverWrapper,
|
||||
onOpenVideo,
|
||||
onOpenMedia,
|
||||
notification,
|
||||
...other
|
||||
} = this.props;
|
||||
const { isExpanded, isIntersecting, isHidden } = this.state;
|
||||
let background = null;
|
||||
let attachments = null;
|
||||
let media = null;
|
||||
let mediaIcon = null;
|
||||
|
||||
/*
|
||||
|
||||
If we don't have a status, then we don't render anything.
|
||||
|
||||
*/
|
||||
|
||||
if (status === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
If our status is offscreen and hidden, then we render an empty <div> in
|
||||
its place. We fill it with "content" but note that opacity is set to 0.
|
||||
|
||||
*/
|
||||
|
||||
if (!isIntersecting && isHidden) {
|
||||
return (
|
||||
<div
|
||||
ref={this.handleRef}
|
||||
data-id={status.get('id')}
|
||||
style={{
|
||||
height : `${this.height}px`,
|
||||
opacity : 0,
|
||||
overflow : 'hidden',
|
||||
}}
|
||||
>
|
||||
{
|
||||
status.getIn(['account', 'display_name']) ||
|
||||
status.getIn(['account', 'username'])
|
||||
}
|
||||
{status.get('content')}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
If user backgrounds for collapsed statuses are enabled, then we
|
||||
initialize our background accordingly. This will only be rendered if
|
||||
the status is collapsed.
|
||||
|
||||
*/
|
||||
|
||||
if (
|
||||
settings.getIn(['collapsed', 'backgrounds', 'user_backgrounds'])
|
||||
) background = status.getIn(['account', 'header']);
|
||||
|
||||
/*
|
||||
|
||||
This handles our media attachments. Note that we don't show media on
|
||||
muted (notification) statuses. If the media type is unknown, then we
|
||||
simply ignore it.
|
||||
|
||||
After we have generated our appropriate media element and stored it in
|
||||
`media`, we snatch the thumbnail to use as our `background` if media
|
||||
backgrounds for collapsed statuses are enabled.
|
||||
|
||||
*/
|
||||
|
||||
attachments = status.get('media_attachments');
|
||||
if (attachments.size && !muted) {
|
||||
if (attachments.some((item) => item.get('type') === 'unknown')) {
|
||||
|
||||
} else if (
|
||||
attachments.getIn([0, 'type']) === 'video'
|
||||
) {
|
||||
media = ( // Media type is 'video'
|
||||
<StatusPlayer
|
||||
media={attachments.get(0)}
|
||||
sensitive={status.get('sensitive')}
|
||||
letterbox={settings.getIn(['media', 'letterbox'])}
|
||||
fullwidth={settings.getIn(['media', 'fullwidth'])}
|
||||
height={250}
|
||||
onOpenVideo={onOpenVideo}
|
||||
/>
|
||||
);
|
||||
mediaIcon = 'video-camera';
|
||||
} else { // Media type is 'image' or 'gifv'
|
||||
media = (
|
||||
<StatusGallery
|
||||
media={attachments}
|
||||
sensitive={status.get('sensitive')}
|
||||
letterbox={settings.getIn(['media', 'letterbox'])}
|
||||
fullwidth={settings.getIn(['media', 'fullwidth'])}
|
||||
height={250}
|
||||
onOpenMedia={onOpenMedia}
|
||||
autoPlayGif={autoPlayGif}
|
||||
/>
|
||||
);
|
||||
mediaIcon = 'picture-o';
|
||||
}
|
||||
|
||||
if (
|
||||
!status.get('sensitive') &&
|
||||
!(status.get('spoiler_text').length > 0) &&
|
||||
settings.getIn(['collapsed', 'backgrounds', 'preview_images'])
|
||||
) background = attachments.getIn([0, 'preview_url']);
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Here we prepare extra data-* attributes for CSS selectors.
|
||||
Users can use those for theming, hiding avatars etc via UserStyle
|
||||
|
||||
*/
|
||||
|
||||
const selectorAttribs = {
|
||||
'data-status-by': `@${status.getIn(['account', 'acct'])}`,
|
||||
};
|
||||
|
||||
if (prepend && account) {
|
||||
const notifKind = {
|
||||
favourite: 'favourited',
|
||||
reblog: 'boosted',
|
||||
reblogged_by: 'boosted',
|
||||
}[prepend];
|
||||
|
||||
selectorAttribs[`data-${notifKind}-by`] = `@${account.get('acct')}`;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Finally, we can render our status. We just put the pieces together
|
||||
from above. We only render the action bar if the status isn't
|
||||
collapsed.
|
||||
|
||||
*/
|
||||
|
||||
return (
|
||||
<article
|
||||
className={
|
||||
`status${
|
||||
muted ? ' muted' : ''
|
||||
} status-${status.get('visibility')}${
|
||||
isExpanded === false ? ' collapsed' : ''
|
||||
}${
|
||||
isExpanded === false && background ? ' has-background' : ''
|
||||
}${
|
||||
this.state.markedForDelete ? ' marked-for-delete' : ''
|
||||
}`
|
||||
}
|
||||
style={{
|
||||
backgroundImage: (
|
||||
isExpanded === false && background ?
|
||||
`url(${background})` :
|
||||
'none'
|
||||
),
|
||||
}}
|
||||
ref={handleRef}
|
||||
{...selectorAttribs}
|
||||
>
|
||||
{prepend && account ? (
|
||||
<StatusPrepend
|
||||
type={prepend}
|
||||
account={account}
|
||||
parseClick={parseClick}
|
||||
notificationId={this.props.notificationId}
|
||||
/>
|
||||
) : null}
|
||||
<StatusHeader
|
||||
status={status}
|
||||
friend={account}
|
||||
mediaIcon={mediaIcon}
|
||||
collapsible={settings.getIn(['collapsed', 'enabled'])}
|
||||
collapsed={isExpanded === false}
|
||||
parseClick={parseClick}
|
||||
setExpansion={setExpansion}
|
||||
/>
|
||||
<StatusContent
|
||||
status={status}
|
||||
media={media}
|
||||
mediaIcon={mediaIcon}
|
||||
expanded={isExpanded}
|
||||
setExpansion={setExpansion}
|
||||
onHeightUpdate={saveHeight}
|
||||
parseClick={parseClick}
|
||||
disabled={!router}
|
||||
/>
|
||||
{isExpanded !== false ? (
|
||||
<StatusActionBar
|
||||
{...other}
|
||||
status={status}
|
||||
account={status.get('account')}
|
||||
/>
|
||||
) : null}
|
||||
{notification ? (
|
||||
<NotificationOverlayContainer
|
||||
notification={notification}
|
||||
/>
|
||||
) : null}
|
||||
</article>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,203 +0,0 @@
|
||||
// Package imports //
|
||||
import React from 'react';
|
||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import PropTypes from 'prop-types';
|
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||
|
||||
// Mastodon imports //
|
||||
import IconButton from '../../../mastodon/components/icon_button';
|
||||
import { isIOS } from '../../../mastodon/is_mobile';
|
||||
|
||||
const messages = defineMessages({
|
||||
toggle_sound: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' },
|
||||
toggle_visible: { id: 'video_player.toggle_visible', defaultMessage: 'Toggle visibility' },
|
||||
expand_video: { id: 'video_player.expand', defaultMessage: 'Expand video' },
|
||||
});
|
||||
|
||||
@injectIntl
|
||||
export default class StatusPlayer extends React.PureComponent {
|
||||
|
||||
static contextTypes = {
|
||||
router: PropTypes.object,
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
media: ImmutablePropTypes.map.isRequired,
|
||||
letterbox: PropTypes.bool,
|
||||
fullwidth: PropTypes.bool,
|
||||
height: PropTypes.number,
|
||||
sensitive: PropTypes.bool,
|
||||
intl: PropTypes.object.isRequired,
|
||||
autoplay: PropTypes.bool,
|
||||
onOpenVideo: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
height: 110,
|
||||
};
|
||||
|
||||
state = {
|
||||
visible: !this.props.sensitive,
|
||||
preview: true,
|
||||
muted: true,
|
||||
hasAudio: true,
|
||||
videoError: false,
|
||||
};
|
||||
|
||||
handleClick = () => {
|
||||
this.setState({ muted: !this.state.muted });
|
||||
}
|
||||
|
||||
handleVideoClick = (e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
const node = this.video;
|
||||
|
||||
if (node.paused) {
|
||||
node.play();
|
||||
} else {
|
||||
node.pause();
|
||||
}
|
||||
}
|
||||
|
||||
handleOpen = () => {
|
||||
this.setState({ preview: !this.state.preview });
|
||||
}
|
||||
|
||||
handleVisibility = () => {
|
||||
this.setState({
|
||||
visible: !this.state.visible,
|
||||
preview: true,
|
||||
});
|
||||
}
|
||||
|
||||
handleExpand = () => {
|
||||
this.video.pause();
|
||||
this.props.onOpenVideo(this.props.media, this.video.currentTime);
|
||||
}
|
||||
|
||||
setRef = (c) => {
|
||||
this.video = c;
|
||||
}
|
||||
|
||||
handleLoadedData = () => {
|
||||
if (('WebkitAppearance' in document.documentElement.style && this.video.audioTracks.length === 0) || this.video.mozHasAudio === false) {
|
||||
this.setState({ hasAudio: false });
|
||||
}
|
||||
}
|
||||
|
||||
handleVideoError = () => {
|
||||
this.setState({ videoError: true });
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
if (!this.video) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.video.addEventListener('loadeddata', this.handleLoadedData);
|
||||
this.video.addEventListener('error', this.handleVideoError);
|
||||
}
|
||||
|
||||
componentDidUpdate () {
|
||||
if (!this.video) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.video.addEventListener('loadeddata', this.handleLoadedData);
|
||||
this.video.addEventListener('error', this.handleVideoError);
|
||||
}
|
||||
|
||||
componentWillUnmount () {
|
||||
if (!this.video) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.video.removeEventListener('loadeddata', this.handleLoadedData);
|
||||
this.video.removeEventListener('error', this.handleVideoError);
|
||||
}
|
||||
|
||||
render () {
|
||||
const { media, intl, letterbox, fullwidth, height, sensitive, autoplay } = this.props;
|
||||
|
||||
let spoilerButton = (
|
||||
<div className={`status__video-player-spoiler ${this.state.visible ? 'status__video-player-spoiler--visible' : ''}`}>
|
||||
<IconButton overlay title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} onClick={this.handleVisibility} />
|
||||
</div>
|
||||
);
|
||||
|
||||
let expandButton = !this.context.router ? '' : (
|
||||
<div className='status__video-player-expand'>
|
||||
<IconButton overlay title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} />
|
||||
</div>
|
||||
);
|
||||
|
||||
let muteButton = '';
|
||||
|
||||
if (this.state.hasAudio) {
|
||||
muteButton = (
|
||||
<div className='status__video-player-mute'>
|
||||
<IconButton overlay title={intl.formatMessage(messages.toggle_sound)} icon={this.state.muted ? 'volume-off' : 'volume-up'} onClick={this.handleClick} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!this.state.visible) {
|
||||
if (sensitive) {
|
||||
return (
|
||||
<div role='button' tabIndex='0' style={{ height: `${height}px` }} className={`media-spoiler ${fullwidth ? 'full-width' : ''}`} onClick={this.handleVisibility}>
|
||||
{spoilerButton}
|
||||
<span className='media-spoiler__warning'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
|
||||
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div role='button' tabIndex='0' style={{ height: `${height}px` }} className={`media-spoiler ${fullwidth ? 'full-width' : ''}`} onClick={this.handleVisibility}>
|
||||
{spoilerButton}
|
||||
<span className='media-spoiler__warning'><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span>
|
||||
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
if (this.state.preview && !autoplay) {
|
||||
return (
|
||||
<div role='button' tabIndex='0' className={`media-spoiler-video ${fullwidth ? 'full-width' : ''}`} style={{ height: `${height}px`, backgroundImage: `url(${media.get('preview_url')})` }} onClick={this.handleOpen}>
|
||||
{spoilerButton}
|
||||
<div className='media-spoiler-video-play-icon'><i className='fa fa-play' /></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (this.state.videoError) {
|
||||
return (
|
||||
<div style={{ height: `${height}px` }} className='video-error-cover' >
|
||||
<span className='media-spoiler__warning'><FormattedMessage id='video_player.video_error' defaultMessage='Video could not be played' /></span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`status__video-player ${fullwidth ? 'full-width' : ''}`} style={{ height: `${height}px` }}>
|
||||
{spoilerButton}
|
||||
{muteButton}
|
||||
{expandButton}
|
||||
|
||||
<video
|
||||
className={`status__video-player-video${letterbox ? ' letterbox' : ''}`}
|
||||
role='button'
|
||||
tabIndex='0'
|
||||
ref={this.setRef}
|
||||
src={media.get('url')}
|
||||
autoPlay={!isIOS()}
|
||||
loop
|
||||
muted={this.state.muted}
|
||||
onClick={this.handleVideoClick}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,126 +0,0 @@
|
||||
/*
|
||||
|
||||
`reducers/local_settings`
|
||||
========================
|
||||
|
||||
> For more information on the contents of this file, please contact:
|
||||
>
|
||||
> - kibigo! [@kibi@glitch.social]
|
||||
|
||||
This file provides our Redux reducers related to local settings. The
|
||||
associated actions are:
|
||||
|
||||
- __`STORE_HYDRATE` :__
|
||||
Used to hydrate the store with its initial values.
|
||||
|
||||
- __`LOCAL_SETTING_CHANGE` :__
|
||||
Used to change the value of a local setting in the store.
|
||||
|
||||
*/
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Imports:
|
||||
--------
|
||||
|
||||
*/
|
||||
|
||||
// Package imports //
|
||||
import { Map as ImmutableMap } from 'immutable';
|
||||
|
||||
// Mastodon imports //
|
||||
import { STORE_HYDRATE } from '../../mastodon/actions/store';
|
||||
|
||||
// Our imports //
|
||||
import { LOCAL_SETTING_CHANGE } from '../actions/local_settings';
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
initialState:
|
||||
-------------
|
||||
|
||||
You can see the default values for all of our local settings here.
|
||||
These are only used if no previously-saved values exist.
|
||||
|
||||
*/
|
||||
|
||||
const initialState = ImmutableMap({
|
||||
layout : 'auto',
|
||||
stretch : true,
|
||||
navbar_under : false,
|
||||
side_arm : 'none',
|
||||
collapsed : ImmutableMap({
|
||||
enabled : true,
|
||||
auto : ImmutableMap({
|
||||
all : false,
|
||||
notifications : true,
|
||||
lengthy : true,
|
||||
reblogs : false,
|
||||
replies : false,
|
||||
media : false,
|
||||
}),
|
||||
backgrounds : ImmutableMap({
|
||||
user_backgrounds : false,
|
||||
preview_images : false,
|
||||
}),
|
||||
}),
|
||||
media : ImmutableMap({
|
||||
letterbox : true,
|
||||
fullwidth : true,
|
||||
}),
|
||||
});
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
Helper functions:
|
||||
-----------------
|
||||
|
||||
### `hydrate(state, localSettings)`
|
||||
|
||||
`hydrate()` is used to hydrate the `local_settings` part of our store
|
||||
with its initial values. The `state` will probably just be the
|
||||
`initialState`, and the `localSettings` should be whatever we pulled
|
||||
from `localStorage`.
|
||||
|
||||
*/
|
||||
|
||||
const hydrate = (state, localSettings) => state.mergeDeep(localSettings);
|
||||
|
||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
||||
|
||||
/*
|
||||
|
||||
`localSettings(state = initialState, action)`:
|
||||
----------------------------------------------
|
||||
|
||||
This function holds our actual reducer.
|
||||
|
||||
If our action is `STORE_HYDRATE`, then we call `hydrate()` with the
|
||||
`local_settings` property of the provided `action.state`.
|
||||
|
||||
If our action is `LOCAL_SETTING_CHANGE`, then we set `action.key` in
|
||||
our state to the provided `action.value`. Note that `action.key` MUST
|
||||
be an array, since we use `setIn()`.
|
||||
|
||||
> __Note :__
|
||||
> We call this function `localSettings`, but its associated object
|
||||
> in the store is `local_settings`.
|
||||
|
||||
*/
|
||||
|
||||
export default function localSettings(state = initialState, action) {
|
||||
switch(action.type) {
|
||||
case STORE_HYDRATE:
|
||||
return hydrate(state, action.state.get('local_settings'));
|
||||
case LOCAL_SETTING_CHANGE:
|
||||
return state.setIn(action.key, action.value);
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
@ -1,9 +1,6 @@
|
||||
import { start } from 'rails-ujs';
|
||||
import 'font-awesome/css/font-awesome.css';
|
||||
|
||||
// import common styling
|
||||
require('../styles/common.scss');
|
||||
|
||||
require.context('../images/', true);
|
||||
|
||||
start();
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
@font-face {
|
||||
font-family: 'mastodon-font-monospace';
|
||||
src: local('Roboto Mono'),
|
||||
url('../fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
|
||||
url('../fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'),
|
||||
url('../fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
|
||||
url('../fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg');
|
||||
url('~fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
|
||||
url('~fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'),
|
||||
url('~fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
|
||||
url('~fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -1,3 +0,0 @@
|
||||
// glitch-soc added variables
|
||||
|
||||
$dismiss-overlay-width: 4rem;
|
||||
@ -0,0 +1,661 @@
|
||||
import api, { getLinks } from 'themes/glitch/util/api';
|
||||
|
||||
export const ACCOUNT_FETCH_REQUEST = 'ACCOUNT_FETCH_REQUEST';
|
||||
export const ACCOUNT_FETCH_SUCCESS = 'ACCOUNT_FETCH_SUCCESS';
|
||||
export const ACCOUNT_FETCH_FAIL = 'ACCOUNT_FETCH_FAIL';
|
||||
|
||||
export const ACCOUNT_FOLLOW_REQUEST = 'ACCOUNT_FOLLOW_REQUEST';
|
||||
export const ACCOUNT_FOLLOW_SUCCESS = 'ACCOUNT_FOLLOW_SUCCESS';
|
||||
export const ACCOUNT_FOLLOW_FAIL = 'ACCOUNT_FOLLOW_FAIL';
|
||||
|
||||
export const ACCOUNT_UNFOLLOW_REQUEST = 'ACCOUNT_UNFOLLOW_REQUEST';
|
||||
export const ACCOUNT_UNFOLLOW_SUCCESS = 'ACCOUNT_UNFOLLOW_SUCCESS';
|
||||
export const ACCOUNT_UNFOLLOW_FAIL = 'ACCOUNT_UNFOLLOW_FAIL';
|
||||
|
||||
export const ACCOUNT_BLOCK_REQUEST = 'ACCOUNT_BLOCK_REQUEST';
|
||||
export const ACCOUNT_BLOCK_SUCCESS = 'ACCOUNT_BLOCK_SUCCESS';
|
||||
export const ACCOUNT_BLOCK_FAIL = 'ACCOUNT_BLOCK_FAIL';
|
||||
|
||||
export const ACCOUNT_UNBLOCK_REQUEST = 'ACCOUNT_UNBLOCK_REQUEST';
|
||||
export const ACCOUNT_UNBLOCK_SUCCESS = 'ACCOUNT_UNBLOCK_SUCCESS';
|
||||
export const ACCOUNT_UNBLOCK_FAIL = 'ACCOUNT_UNBLOCK_FAIL';
|
||||
|
||||
export const ACCOUNT_MUTE_REQUEST = 'ACCOUNT_MUTE_REQUEST';
|
||||
export const ACCOUNT_MUTE_SUCCESS = 'ACCOUNT_MUTE_SUCCESS';
|
||||
export const ACCOUNT_MUTE_FAIL = 'ACCOUNT_MUTE_FAIL';
|
||||
|
||||
export const ACCOUNT_UNMUTE_REQUEST = 'ACCOUNT_UNMUTE_REQUEST';
|
||||
export const ACCOUNT_UNMUTE_SUCCESS = 'ACCOUNT_UNMUTE_SUCCESS';
|
||||
export const ACCOUNT_UNMUTE_FAIL = 'ACCOUNT_UNMUTE_FAIL';
|
||||
|
||||
export const FOLLOWERS_FETCH_REQUEST = 'FOLLOWERS_FETCH_REQUEST';
|
||||
export const FOLLOWERS_FETCH_SUCCESS = 'FOLLOWERS_FETCH_SUCCESS';
|
||||
export const FOLLOWERS_FETCH_FAIL = 'FOLLOWERS_FETCH_FAIL';
|
||||
|
||||
export const FOLLOWERS_EXPAND_REQUEST = 'FOLLOWERS_EXPAND_REQUEST';
|
||||
export const FOLLOWERS_EXPAND_SUCCESS = 'FOLLOWERS_EXPAND_SUCCESS';
|
||||
export const FOLLOWERS_EXPAND_FAIL = 'FOLLOWERS_EXPAND_FAIL';
|
||||
|
||||
export const FOLLOWING_FETCH_REQUEST = 'FOLLOWING_FETCH_REQUEST';
|
||||
export const FOLLOWING_FETCH_SUCCESS = 'FOLLOWING_FETCH_SUCCESS';
|
||||
export const FOLLOWING_FETCH_FAIL = 'FOLLOWING_FETCH_FAIL';
|
||||
|
||||
export const FOLLOWING_EXPAND_REQUEST = 'FOLLOWING_EXPAND_REQUEST';
|
||||
export const FOLLOWING_EXPAND_SUCCESS = 'FOLLOWING_EXPAND_SUCCESS';
|
||||
export const FOLLOWING_EXPAND_FAIL = 'FOLLOWING_EXPAND_FAIL';
|
||||
|
||||
export const RELATIONSHIPS_FETCH_REQUEST = 'RELATIONSHIPS_FETCH_REQUEST';
|
||||
export const RELATIONSHIPS_FETCH_SUCCESS = 'RELATIONSHIPS_FETCH_SUCCESS';
|
||||
export const RELATIONSHIPS_FETCH_FAIL = 'RELATIONSHIPS_FETCH_FAIL';
|
||||
|
||||
export const FOLLOW_REQUESTS_FETCH_REQUEST = 'FOLLOW_REQUESTS_FETCH_REQUEST';
|
||||
export const FOLLOW_REQUESTS_FETCH_SUCCESS = 'FOLLOW_REQUESTS_FETCH_SUCCESS';
|
||||
export const FOLLOW_REQUESTS_FETCH_FAIL = 'FOLLOW_REQUESTS_FETCH_FAIL';
|
||||
|
||||
export const FOLLOW_REQUESTS_EXPAND_REQUEST = 'FOLLOW_REQUESTS_EXPAND_REQUEST';
|
||||
export const FOLLOW_REQUESTS_EXPAND_SUCCESS = 'FOLLOW_REQUESTS_EXPAND_SUCCESS';
|
||||
export const FOLLOW_REQUESTS_EXPAND_FAIL = 'FOLLOW_REQUESTS_EXPAND_FAIL';
|
||||
|
||||
export const FOLLOW_REQUEST_AUTHORIZE_REQUEST = 'FOLLOW_REQUEST_AUTHORIZE_REQUEST';
|
||||
export const FOLLOW_REQUEST_AUTHORIZE_SUCCESS = 'FOLLOW_REQUEST_AUTHORIZE_SUCCESS';
|
||||
export const FOLLOW_REQUEST_AUTHORIZE_FAIL = 'FOLLOW_REQUEST_AUTHORIZE_FAIL';
|
||||
|
||||
export const FOLLOW_REQUEST_REJECT_REQUEST = 'FOLLOW_REQUEST_REJECT_REQUEST';
|
||||
export const FOLLOW_REQUEST_REJECT_SUCCESS = 'FOLLOW_REQUEST_REJECT_SUCCESS';
|
||||
export const FOLLOW_REQUEST_REJECT_FAIL = 'FOLLOW_REQUEST_REJECT_FAIL';
|
||||
|
||||
export function fetchAccount(id) {
|
||||
return (dispatch, getState) => {
|
||||
dispatch(fetchRelationships([id]));
|
||||
|
||||
if (getState().getIn(['accounts', id], null) !== null) {
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch(fetchAccountRequest(id));
|
||||
|
||||
api(getState).get(`/api/v1/accounts/${id}`).then(response => {
|
||||
dispatch(fetchAccountSuccess(response.data));
|
||||
}).catch(error => {
|
||||
dispatch(fetchAccountFail(id, error));
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchAccountRequest(id) {
|
||||
return {
|
||||
type: ACCOUNT_FETCH_REQUEST,
|
||||
id,
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchAccountSuccess(account) {
|
||||
return {
|
||||
type: ACCOUNT_FETCH_SUCCESS,
|
||||
account,
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchAccountFail(id, error) {
|
||||
return {
|
||||
type: ACCOUNT_FETCH_FAIL,
|
||||
id,
|
||||
error,
|
||||
skipAlert: true,
|
||||
};
|
||||
};
|
||||
|
||||
export function followAccount(id, reblogs = true) {
|
||||
return (dispatch, getState) => {
|
||||
const alreadyFollowing = getState().getIn(['relationships', id, 'following']);
|
||||
dispatch(followAccountRequest(id));
|
||||
|
||||
api(getState).post(`/api/v1/accounts/${id}/follow`, { reblogs }).then(response => {
|
||||
dispatch(followAccountSuccess(response.data, alreadyFollowing));
|
||||
}).catch(error => {
|
||||
dispatch(followAccountFail(error));
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
export function unfollowAccount(id) {
|
||||
return (dispatch, getState) => {
|
||||
dispatch(unfollowAccountRequest(id));
|
||||
|
||||
api(getState).post(`/api/v1/accounts/${id}/unfollow`).then(response => {
|
||||
dispatch(unfollowAccountSuccess(response.data, getState().get('statuses')));
|
||||
}).catch(error => {
|
||||
dispatch(unfollowAccountFail(error));
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
export function followAccountRequest(id) {
|
||||
return {
|
||||
type: ACCOUNT_FOLLOW_REQUEST,
|
||||
id,
|
||||
};
|
||||
};
|
||||
|
||||
export function followAccountSuccess(relationship, alreadyFollowing) {
|
||||
return {
|
||||
type: ACCOUNT_FOLLOW_SUCCESS,
|
||||
relationship,
|
||||
alreadyFollowing,
|
||||
};
|
||||
};
|
||||
|
||||
export function followAccountFail(error) {
|
||||
return {
|
||||
type: ACCOUNT_FOLLOW_FAIL,
|
||||
error,
|
||||
};
|
||||
};
|
||||
|
||||
export function unfollowAccountRequest(id) {
|
||||
return {
|
||||
type: ACCOUNT_UNFOLLOW_REQUEST,
|
||||
id,
|
||||
};
|
||||
};
|
||||
|
||||
export function unfollowAccountSuccess(relationship, statuses) {
|
||||
return {
|
||||
type: ACCOUNT_UNFOLLOW_SUCCESS,
|
||||
relationship,
|
||||
statuses,
|
||||
};
|
||||
};
|
||||
|
||||
export function unfollowAccountFail(error) {
|
||||
return {
|
||||
type: ACCOUNT_UNFOLLOW_FAIL,
|
||||
error,
|
||||
};
|
||||
};
|
||||
|
||||
export function blockAccount(id) {
|
||||
return (dispatch, getState) => {
|
||||
dispatch(blockAccountRequest(id));
|
||||
|
||||
api(getState).post(`/api/v1/accounts/${id}/block`).then(response => {
|
||||
// Pass in entire statuses map so we can use it to filter stuff in different parts of the reducers
|
||||
dispatch(blockAccountSuccess(response.data, getState().get('statuses')));
|
||||
}).catch(error => {
|
||||
dispatch(blockAccountFail(id, error));
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
export function unblockAccount(id) {
|
||||
return (dispatch, getState) => {
|
||||
dispatch(unblockAccountRequest(id));
|
||||
|
||||
api(getState).post(`/api/v1/accounts/${id}/unblock`).then(response => {
|
||||
dispatch(unblockAccountSuccess(response.data));
|
||||
}).catch(error => {
|
||||
dispatch(unblockAccountFail(id, error));
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
export function blockAccountRequest(id) {
|
||||
return {
|
||||
type: ACCOUNT_BLOCK_REQUEST,
|
||||
id,
|
||||
};
|
||||
};
|
||||
|
||||
export function blockAccountSuccess(relationship, statuses) {
|
||||
return {
|
||||
type: ACCOUNT_BLOCK_SUCCESS,
|
||||
relationship,
|
||||
statuses,
|
||||
};
|
||||
};
|
||||
|
||||
export function blockAccountFail(error) {
|
||||
return {
|
||||
type: ACCOUNT_BLOCK_FAIL,
|
||||
error,
|
||||
};
|
||||
};
|
||||
|
||||
export function unblockAccountRequest(id) {
|
||||
return {
|
||||
type: ACCOUNT_UNBLOCK_REQUEST,
|
||||
id,
|
||||
};
|
||||
};
|
||||
|
||||
export function unblockAccountSuccess(relationship) {
|
||||
return {
|
||||
type: ACCOUNT_UNBLOCK_SUCCESS,
|
||||
relationship,
|
||||
};
|
||||
};
|
||||
|
||||
export function unblockAccountFail(error) {
|
||||
return {
|
||||
type: ACCOUNT_UNBLOCK_FAIL,
|
||||
error,
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
export function muteAccount(id, notifications) {
|
||||
return (dispatch, getState) => {
|
||||
dispatch(muteAccountRequest(id));
|
||||
|
||||
api(getState).post(`/api/v1/accounts/${id}/mute`, { notifications }).then(response => {
|
||||
// Pass in entire statuses map so we can use it to filter stuff in different parts of the reducers
|
||||
dispatch(muteAccountSuccess(response.data, getState().get('statuses')));
|
||||
}).catch(error => {
|
||||
dispatch(muteAccountFail(id, error));
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
export function unmuteAccount(id) {
|
||||
return (dispatch, getState) => {
|
||||
dispatch(unmuteAccountRequest(id));
|
||||
|
||||
api(getState).post(`/api/v1/accounts/${id}/unmute`).then(response => {
|
||||
dispatch(unmuteAccountSuccess(response.data));
|
||||
}).catch(error => {
|
||||
dispatch(unmuteAccountFail(id, error));
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
export function muteAccountRequest(id) {
|
||||
return {
|
||||
type: ACCOUNT_MUTE_REQUEST,
|
||||
id,
|
||||
};
|
||||
};
|
||||
|
||||
export function muteAccountSuccess(relationship, statuses) {
|
||||
return {
|
||||
type: ACCOUNT_MUTE_SUCCESS,
|
||||
relationship,
|
||||
statuses,
|
||||
};
|
||||
};
|
||||
|
||||
export function muteAccountFail(error) {
|
||||
return {
|
||||
type: ACCOUNT_MUTE_FAIL,
|
||||
error,
|
||||
};
|
||||
};
|
||||
|
||||
export function unmuteAccountRequest(id) {
|
||||
return {
|
||||
type: ACCOUNT_UNMUTE_REQUEST,
|
||||
id,
|
||||
};
|
||||
};
|
||||
|
||||
export function unmuteAccountSuccess(relationship) {
|
||||
return {
|
||||
type: ACCOUNT_UNMUTE_SUCCESS,
|
||||
relationship,
|
||||
};
|
||||
};
|
||||
|
||||
export function unmuteAccountFail(error) {
|
||||
return {
|
||||
type: ACCOUNT_UNMUTE_FAIL,
|
||||
error,
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
export function fetchFollowers(id) {
|
||||
return (dispatch, getState) => {
|
||||
dispatch(fetchFollowersRequest(id));
|
||||
|
||||
api(getState).get(`/api/v1/accounts/${id}/followers`).then(response => {
|
||||
const next = getLinks(response).refs.find(link => link.rel === 'next');
|
||||
|
||||
dispatch(fetchFollowersSuccess(id, response.data, next ? next.uri : null));
|
||||
dispatch(fetchRelationships(response.data.map(item => item.id)));
|
||||
}).catch(error => {
|
||||
dispatch(fetchFollowersFail(id, error));
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchFollowersRequest(id) {
|
||||
return {
|
||||
type: FOLLOWERS_FETCH_REQUEST,
|
||||
id,
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchFollowersSuccess(id, accounts, next) {
|
||||
return {
|
||||
type: FOLLOWERS_FETCH_SUCCESS,
|
||||
id,
|
||||
accounts,
|
||||
next,
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchFollowersFail(id, error) {
|
||||
return {
|
||||
type: FOLLOWERS_FETCH_FAIL,
|
||||
id,
|
||||
error,
|
||||
};
|
||||
};
|
||||
|
||||
export function expandFollowers(id) {
|
||||
return (dispatch, getState) => {
|
||||
const url = getState().getIn(['user_lists', 'followers', id, 'next']);
|
||||
|
||||
if (url === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch(expandFollowersRequest(id));
|
||||
|
||||
api(getState).get(url).then(response => {
|
||||
const next = getLinks(response).refs.find(link => link.rel === 'next');
|
||||
|
||||
dispatch(expandFollowersSuccess(id, response.data, next ? next.uri : null));
|
||||
dispatch(fetchRelationships(response.data.map(item => item.id)));
|
||||
}).catch(error => {
|
||||
dispatch(expandFollowersFail(id, error));
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
export function expandFollowersRequest(id) {
|
||||
return {
|
||||
type: FOLLOWERS_EXPAND_REQUEST,
|
||||
id,
|
||||
};
|
||||
};
|
||||
|
||||
export function expandFollowersSuccess(id, accounts, next) {
|
||||
return {
|
||||
type: FOLLOWERS_EXPAND_SUCCESS,
|
||||
id,
|
||||
accounts,
|
||||
next,
|
||||
};
|
||||
};
|
||||
|
||||
export function expandFollowersFail(id, error) {
|
||||
return {
|
||||
type: FOLLOWERS_EXPAND_FAIL,
|
||||
id,
|
||||
error,
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchFollowing(id) {
|
||||
return (dispatch, getState) => {
|
||||
dispatch(fetchFollowingRequest(id));
|
||||
|
||||
api(getState).get(`/api/v1/accounts/${id}/following`).then(response => {
|
||||
const next = getLinks(response).refs.find(link => link.rel === 'next');
|
||||
|
||||
dispatch(fetchFollowingSuccess(id, response.data, next ? next.uri : null));
|
||||
dispatch(fetchRelationships(response.data.map(item => item.id)));
|
||||
}).catch(error => {
|
||||
dispatch(fetchFollowingFail(id, error));
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchFollowingRequest(id) {
|
||||
return {
|
||||
type: FOLLOWING_FETCH_REQUEST,
|
||||
id,
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchFollowingSuccess(id, accounts, next) {
|
||||
return {
|
||||
type: FOLLOWING_FETCH_SUCCESS,
|
||||
id,
|
||||
accounts,
|
||||
next,
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchFollowingFail(id, error) {
|
||||
return {
|
||||
type: FOLLOWING_FETCH_FAIL,
|
||||
id,
|
||||
error,
|
||||
};
|
||||
};
|
||||
|
||||
export function expandFollowing(id) {
|
||||
return (dispatch, getState) => {
|
||||
const url = getState().getIn(['user_lists', 'following', id, 'next']);
|
||||
|
||||
if (url === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch(expandFollowingRequest(id));
|
||||
|
||||
api(getState).get(url).then(response => {
|
||||
const next = getLinks(response).refs.find(link => link.rel === 'next');
|
||||
|
||||
dispatch(expandFollowingSuccess(id, response.data, next ? next.uri : null));
|
||||
dispatch(fetchRelationships(response.data.map(item => item.id)));
|
||||
}).catch(error => {
|
||||
dispatch(expandFollowingFail(id, error));
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
export function expandFollowingRequest(id) {
|
||||
return {
|
||||
type: FOLLOWING_EXPAND_REQUEST,
|
||||
id,
|
||||
};
|
||||
};
|
||||
|
||||
export function expandFollowingSuccess(id, accounts, next) {
|
||||
return {
|
||||
type: FOLLOWING_EXPAND_SUCCESS,
|
||||
id,
|
||||
accounts,
|
||||
next,
|
||||
};
|
||||
};
|
||||
|
||||
export function expandFollowingFail(id, error) {
|
||||
return {
|
||||
type: FOLLOWING_EXPAND_FAIL,
|
||||
id,
|
||||
error,
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchRelationships(accountIds) {
|
||||
return (dispatch, getState) => {
|
||||
const loadedRelationships = getState().get('relationships');
|
||||
const newAccountIds = accountIds.filter(id => loadedRelationships.get(id, null) === null);
|
||||
|
||||
if (newAccountIds.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch(fetchRelationshipsRequest(newAccountIds));
|
||||
|
||||
api(getState).get(`/api/v1/accounts/relationships?${newAccountIds.map(id => `id[]=${id}`).join('&')}`).then(response => {
|
||||
dispatch(fetchRelationshipsSuccess(response.data));
|
||||
}).catch(error => {
|
||||
dispatch(fetchRelationshipsFail(error));
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchRelationshipsRequest(ids) {
|
||||
return {
|
||||
type: RELATIONSHIPS_FETCH_REQUEST,
|
||||
ids,
|
||||
skipLoading: true,
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchRelationshipsSuccess(relationships) {
|
||||
return {
|
||||
type: RELATIONSHIPS_FETCH_SUCCESS,
|
||||
relationships,
|
||||
skipLoading: true,
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchRelationshipsFail(error) {
|
||||
return {
|
||||
type: RELATIONSHIPS_FETCH_FAIL,
|
||||
error,
|
||||
skipLoading: true,
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchFollowRequests() {
|
||||
return (dispatch, getState) => {
|
||||
dispatch(fetchFollowRequestsRequest());
|
||||
|
||||
api(getState).get('/api/v1/follow_requests').then(response => {
|
||||
const next = getLinks(response).refs.find(link => link.rel === 'next');
|
||||
dispatch(fetchFollowRequestsSuccess(response.data, next ? next.uri : null));
|
||||
}).catch(error => dispatch(fetchFollowRequestsFail(error)));
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchFollowRequestsRequest() {
|
||||
return {
|
||||
type: FOLLOW_REQUESTS_FETCH_REQUEST,
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchFollowRequestsSuccess(accounts, next) {
|
||||
return {
|
||||
type: FOLLOW_REQUESTS_FETCH_SUCCESS,
|
||||
accounts,
|
||||
next,
|
||||
};
|
||||
};
|
||||
|
||||
export function fetchFollowRequestsFail(error) {
|
||||
return {
|
||||
type: FOLLOW_REQUESTS_FETCH_FAIL,
|
||||
error,
|
||||
};
|
||||
};
|
||||
|
||||
export function expandFollowRequests() {
|
||||
return (dispatch, getState) => {
|
||||
const url = getState().getIn(['user_lists', 'follow_requests', 'next']);
|
||||
|
||||
if (url === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch(expandFollowRequestsRequest());
|
||||
|
||||
api(getState).get(url).then(response => {
|
||||
const next = getLinks(response).refs.find(link => link.rel === 'next');
|
||||
dispatch(expandFollowRequestsSuccess(response.data, next ? next.uri : null));
|
||||
}).catch(error => dispatch(expandFollowRequestsFail(error)));
|
||||
};
|
||||
};
|
||||
|
||||
export function expandFollowRequestsRequest() {
|
||||
return {
|
||||
type: FOLLOW_REQUESTS_EXPAND_REQUEST,
|
||||
};
|
||||
};
|
||||
|
||||
export function expandFollowRequestsSuccess(accounts, next) {
|
||||
return {
|
||||
type: FOLLOW_REQUESTS_EXPAND_SUCCESS,
|
||||
accounts,
|
||||
next,
|
||||
};
|
||||
};
|
||||
|
||||
export function expandFollowRequestsFail(error) {
|
||||
return {
|
||||
type: FOLLOW_REQUESTS_EXPAND_FAIL,
|
||||
error,
|
||||
};
|
||||
};
|
||||
|
||||
export function authorizeFollowRequest(id) {
|
||||
return (dispatch, getState) => {
|
||||
dispatch(authorizeFollowRequestRequest(id));
|
||||
|
||||
api(getState)
|
||||
.post(`/api/v1/follow_requests/${id}/authorize`)
|
||||
.then(() => dispatch(authorizeFollowRequestSuccess(id)))
|
||||
.catch(error => dispatch(authorizeFollowRequestFail(id, error)));
|
||||
};
|
||||
};
|
||||
|
||||
export function authorizeFollowRequestRequest(id) {
|
||||
return {
|
||||
type: FOLLOW_REQUEST_AUTHORIZE_REQUEST,
|
||||
id,
|
||||
};
|
||||
};
|
||||
|
||||
export function authorizeFollowRequestSuccess(id) {
|
||||
return {
|
||||
type: FOLLOW_REQUEST_AUTHORIZE_SUCCESS,
|
||||
id,
|
||||
};
|
||||
};
|
||||
|
||||
export function authorizeFollowRequestFail(id, error) {
|
||||
return {
|
||||
type: FOLLOW_REQUEST_AUTHORIZE_FAIL,
|
||||
id,
|
||||
error,
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
export function rejectFollowRequest(id) {
|
||||
return (dispatch, getState) => {
|
||||
dispatch(rejectFollowRequestRequest(id));
|
||||
|
||||
api(getState)
|
||||
.post(`/api/v1/follow_requests/${id}/reject`)
|
||||
.then(() => dispatch(rejectFollowRequestSuccess(id)))
|
||||
.catch(error => dispatch(rejectFollowRequestFail(id, error)));
|
||||
};
|
||||
};
|
||||
|
||||
export function rejectFollowRequestRequest(id) {
|
||||
return {
|
||||
type: FOLLOW_REQUEST_REJECT_REQUEST,
|
||||
id,
|
||||
};
|
||||
};
|
||||
|
||||
export function rejectFollowRequestSuccess(id) {
|
||||
return {
|
||||
type: FOLLOW_REQUEST_REJECT_SUCCESS,
|
||||
id,
|
||||
};
|
||||
};
|
||||
|
||||
export function rejectFollowRequestFail(id, error) {
|
||||
return {
|
||||
type: FOLLOW_REQUEST_REJECT_FAIL,
|
||||
id,
|
||||
error,
|
||||
};
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue