diff --git a/app/javascript/glitch/actions/local_settings.js b/app/javascript/glitch/actions/local_settings.js deleted file mode 100644 index 93c5a9a171f..00000000000 --- a/app/javascript/glitch/actions/local_settings.js +++ /dev/null @@ -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)); - }; -}; diff --git a/app/javascript/glitch/components/account/header.js b/app/javascript/glitch/components/account/header.js deleted file mode 100644 index 7bc1a2189bb..00000000000 --- a/app/javascript/glitch/components/account/header.js +++ /dev/null @@ -1,227 +0,0 @@ -/* - -`` -================= - -> 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 `` 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 = ( - - - - ); - } - if (account.getIn(['relationship', 'requested'])) { - actionBtn = ( -
- -
- ); - } else if (!account.getIn(['relationship', 'blocking'])) { - following = account.getIn(['relationship', 'following']); - actionBtn = ( -
- -
- ); - } - } - -/* - 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 ( -
-
-
- - - - - - - - @{account.get('acct')} - {account.get('locked') ? : null} - -
- - {info} - {actionBtn} -
-
- - {metadata.length && ( - - - {(() => { - let data = []; - for (let i = 0; i < metadata.length; i++) { - data.push( - - - - - ); - } - return data; - })()} - -
- ) || null} -
- ); - } - -} diff --git a/app/javascript/glitch/components/compose/advanced_options/container.js b/app/javascript/glitch/components/compose/advanced_options/container.js deleted file mode 100644 index 160f2273765..00000000000 --- a/app/javascript/glitch/components/compose/advanced_options/container.js +++ /dev/null @@ -1,66 +0,0 @@ -/* - -`` -=================================== - -This container connects `` 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); diff --git a/app/javascript/glitch/components/compose/advanced_options/index.js b/app/javascript/glitch/components/compose/advanced_options/index.js deleted file mode 100644 index 8251baf4dd1..00000000000 --- a/app/javascript/glitch/components/compose/advanced_options/index.js +++ /dev/null @@ -1,163 +0,0 @@ -/* - -`` -========================== - -> 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 -``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 ( - - ); - }); - -/* - -Finally, we can render our component. - -*/ - return ( - - {optionElems} - - ); - } - -} diff --git a/app/javascript/glitch/components/compose/advanced_options/toggle.js b/app/javascript/glitch/components/compose/advanced_options/toggle.js deleted file mode 100644 index d6907472a4f..00000000000 --- a/app/javascript/glitch/components/compose/advanced_options/toggle.js +++ /dev/null @@ -1,103 +0,0 @@ -/* - -`` -================================ - -> For more information on the contents of this file, please contact: -> -> - surinna [@srn@dev.glitch.social] - -This creates the toggle used by ``. - -__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 `` and place next to it our text. - -*/ - - render() { - const { active, shortText, longText } = this.props; - return ( -
-
- -
-
- {shortText} - {longText} -
-
- ); - } - -} diff --git a/app/javascript/glitch/components/local_settings/container.js b/app/javascript/glitch/components/local_settings/container.js deleted file mode 100644 index 4569db99f49..00000000000 --- a/app/javascript/glitch/components/local_settings/container.js +++ /dev/null @@ -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); diff --git a/app/javascript/glitch/components/notification/container.js b/app/javascript/glitch/components/notification/container.js deleted file mode 100644 index dc4c2168a97..00000000000 --- a/app/javascript/glitch/components/notification/container.js +++ /dev/null @@ -1,48 +0,0 @@ -/* - -`` -========================= - -This container connects ``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); diff --git a/app/javascript/glitch/components/notification/follow.js b/app/javascript/glitch/components/notification/follow.js deleted file mode 100644 index e2c21bf3505..00000000000 --- a/app/javascript/glitch/components/notification/follow.js +++ /dev/null @@ -1,72 +0,0 @@ -// `` -// ====================== - -// * * * * * * * // - -// 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 = ( - - ); - - // Renders. - return ( -
-
-
- -
- - -
- - - -
- ); - } - -} diff --git a/app/javascript/glitch/components/notification/overlay/container.js b/app/javascript/glitch/components/notification/overlay/container.js deleted file mode 100644 index 089f615f088..00000000000 --- a/app/javascript/glitch/components/notification/overlay/container.js +++ /dev/null @@ -1,49 +0,0 @@ -/* - -`` -========================= - -This container connects ``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); diff --git a/app/javascript/glitch/components/status/container.js b/app/javascript/glitch/components/status/container.js deleted file mode 100644 index 0054abd1499..00000000000 --- a/app/javascript/glitch/components/status/container.js +++ /dev/null @@ -1,263 +0,0 @@ -/* - -`` -=================== - -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 . - -*/ - - /* * * * */ - -/* - -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 `` 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 ``. - -*/ - - 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: @{account.get('acct')} }} />, - 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) -); diff --git a/app/javascript/glitch/components/status/gallery/index.js b/app/javascript/glitch/components/status/gallery/index.js deleted file mode 100644 index ae03dc08d70..00000000000 --- a/app/javascript/glitch/components/status/gallery/index.js +++ /dev/null @@ -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 = ; - } else { - warning = ; - } - - children = ( -
- {warning} - -
- ); - } else { - const size = media.take(4).size; - children = media.take(4).map((attachment, i) => ); - } - - return ( -
-
- -
- - {children} -
- ); - } - -} diff --git a/app/javascript/glitch/components/status/gallery/item.js b/app/javascript/glitch/components/status/gallery/item.js deleted file mode 100644 index 7fcc1437777..00000000000 --- a/app/javascript/glitch/components/status/gallery/item.js +++ /dev/null @@ -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 = ( - - {attachment.get('description')} - - ); - } else if (attachment.get('type') === 'gifv') { - const autoPlay = !isIOS() && this.props.autoPlayGif; - - thumbnail = ( -
-
- ); - } - - return ( -
- {thumbnail} -
- ); - } - -} diff --git a/app/javascript/glitch/components/status/index.js b/app/javascript/glitch/components/status/index.js deleted file mode 100644 index 33a9730e5ac..00000000000 --- a/app/javascript/glitch/components/status/index.js +++ /dev/null @@ -1,760 +0,0 @@ -/* - -`` -========== - -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: - - - - - - -…And, of course, the other -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 `` component: -------------------------- - -The `` component is a container for statuses. It consists of a -few parts: - - - The ``, which contains tangential information about - the status, such as who reblogged it. - - The ``, which contains the avatar and username of the - status author, as well as a media icon and the "collapse" toggle. - - The ``, which contains the content of the status. - - The ``, 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 - ``. 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
in -its place. We fill it with "content" but note that opacity is set to 0. - -*/ - - if (!isIntersecting && isHidden) { - return ( -
- { - status.getIn(['account', 'display_name']) || - status.getIn(['account', 'username']) - } - {status.get('content')} -
- ); - } - -/* - -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' - - ); - mediaIcon = 'video-camera'; - } else { // Media type is 'image' or 'gifv' - media = ( - - ); - 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 ( -
- {prepend && account ? ( - - ) : null} - - - {isExpanded !== false ? ( - - ) : null} - {notification ? ( - - ) : null} -
- ); - - } - -} diff --git a/app/javascript/glitch/components/status/player.js b/app/javascript/glitch/components/status/player.js deleted file mode 100644 index cc65cd34ef9..00000000000 --- a/app/javascript/glitch/components/status/player.js +++ /dev/null @@ -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 = ( -
- -
- ); - - let expandButton = !this.context.router ? '' : ( -
- -
- ); - - let muteButton = ''; - - if (this.state.hasAudio) { - muteButton = ( -
- -
- ); - } - - if (!this.state.visible) { - if (sensitive) { - return ( -
- {spoilerButton} - - -
- ); - } else { - return ( -
- {spoilerButton} - - -
- ); - } - } - - if (this.state.preview && !autoplay) { - return ( -
- {spoilerButton} -
-
- ); - } - - if (this.state.videoError) { - return ( -
- -
- ); - } - - return ( -
- {spoilerButton} - {muteButton} - {expandButton} - -
- ); - } - -} diff --git a/app/javascript/glitch/reducers/local_settings.js b/app/javascript/glitch/reducers/local_settings.js deleted file mode 100644 index 03654fbe22a..00000000000 --- a/app/javascript/glitch/reducers/local_settings.js +++ /dev/null @@ -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; - } -}; diff --git a/app/javascript/mastodon/actions/accounts.js b/app/javascript/mastodon/actions/accounts.js index f63325658d6..fbaebf786dd 100644 --- a/app/javascript/mastodon/actions/accounts.js +++ b/app/javascript/mastodon/actions/accounts.js @@ -105,13 +105,12 @@ export function fetchAccountFail(id, error) { }; }; -export function followAccount(id, reblogs = true) { +export function followAccount(id) { 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)); + api(getState).post(`/api/v1/accounts/${id}/follow`).then(response => { + dispatch(followAccountSuccess(response.data)); }).catch(error => { dispatch(followAccountFail(error)); }); @@ -137,11 +136,10 @@ export function followAccountRequest(id) { }; }; -export function followAccountSuccess(relationship, alreadyFollowing) { +export function followAccountSuccess(relationship) { return { type: ACCOUNT_FOLLOW_SUCCESS, relationship, - alreadyFollowing, }; }; diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js index 3ee9e1e7bb2..8a35049b32c 100644 --- a/app/javascript/mastodon/actions/compose.js +++ b/app/javascript/mastodon/actions/compose.js @@ -8,7 +8,6 @@ import { refreshHomeTimeline, refreshCommunityTimeline, refreshPublicTimeline, - refreshDirectTimeline, } from './timelines'; export const COMPOSE_CHANGE = 'COMPOSE_CHANGE'; @@ -32,7 +31,6 @@ export const COMPOSE_SUGGESTION_SELECT = 'COMPOSE_SUGGESTION_SELECT'; export const COMPOSE_MOUNT = 'COMPOSE_MOUNT'; export const COMPOSE_UNMOUNT = 'COMPOSE_UNMOUNT'; -export const COMPOSE_ADVANCED_OPTIONS_CHANGE = 'COMPOSE_ADVANCED_OPTIONS_CHANGE'; export const COMPOSE_SENSITIVITY_CHANGE = 'COMPOSE_SENSITIVITY_CHANGE'; export const COMPOSE_SPOILERNESS_CHANGE = 'COMPOSE_SPOILERNESS_CHANGE'; export const COMPOSE_SPOILER_TEXT_CHANGE = 'COMPOSE_SPOILER_TEXT_CHANGE'; @@ -46,8 +44,6 @@ export const COMPOSE_UPLOAD_CHANGE_REQUEST = 'COMPOSE_UPLOAD_UPDATE_REQUEST' export const COMPOSE_UPLOAD_CHANGE_SUCCESS = 'COMPOSE_UPLOAD_UPDATE_SUCCESS'; export const COMPOSE_UPLOAD_CHANGE_FAIL = 'COMPOSE_UPLOAD_UPDATE_FAIL'; -export const COMPOSE_DOODLE_SET = 'COMPOSE_DOODLE_SET'; - export function changeCompose(text) { return { type: COMPOSE_CHANGE, @@ -95,16 +91,14 @@ export function mentionCompose(account, router) { export function submitCompose() { return function (dispatch, getState) { - let status = getState().getIn(['compose', 'text'], ''); + const status = getState().getIn(['compose', 'text'], ''); if (!status || !status.length) { return; } dispatch(submitComposeRequest()); - if (getState().getIn(['compose', 'advanced_options', 'do_not_federate'])) { - status = status + ' 👁️'; - } + api(getState).post('/api/v1/statuses', { status, in_reply_to_id: getState().getIn(['compose', 'in_reply_to'], null), @@ -134,8 +128,6 @@ export function submitCompose() { if (response.data.in_reply_to_id === null && response.data.visibility === 'public') { insertOrRefresh('community', refreshCommunityTimeline); insertOrRefresh('public', refreshPublicTimeline); - } else if (response.data.visibility === 'direct') { - insertOrRefresh('direct', refreshDirectTimeline); } }).catch(function (error) { dispatch(submitComposeFail(error)); @@ -163,13 +155,6 @@ export function submitComposeFail(error) { }; }; -export function doodleSet(options) { - return { - type: COMPOSE_DOODLE_SET, - options: options, - }; -}; - export function uploadCompose(files) { return function (dispatch, getState) { if (getState().getIn(['compose', 'media_attachments']).size > 3) { @@ -349,13 +334,6 @@ export function unmountCompose() { }; }; -export function toggleComposeAdvancedOption(option) { - return { - type: COMPOSE_ADVANCED_OPTIONS_CHANGE, - option: option, - }; -} - export function changeComposeSensitivity() { return { type: COMPOSE_SENSITIVITY_CHANGE, diff --git a/app/javascript/mastodon/actions/notifications.js b/app/javascript/mastodon/actions/notifications.js index 4a4462e1d32..b24ac8b7338 100644 --- a/app/javascript/mastodon/actions/notifications.js +++ b/app/javascript/mastodon/actions/notifications.js @@ -6,17 +6,6 @@ import { defineMessages } from 'react-intl'; export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE'; -// tracking the notif cleaning request -export const NOTIFICATIONS_DELETE_MARKED_REQUEST = 'NOTIFICATIONS_DELETE_MARKED_REQUEST'; -export const NOTIFICATIONS_DELETE_MARKED_SUCCESS = 'NOTIFICATIONS_DELETE_MARKED_SUCCESS'; -export const NOTIFICATIONS_DELETE_MARKED_FAIL = 'NOTIFICATIONS_DELETE_MARKED_FAIL'; -export const NOTIFICATIONS_MARK_ALL_FOR_DELETE = 'NOTIFICATIONS_MARK_ALL_FOR_DELETE'; -export const NOTIFICATIONS_ENTER_CLEARING_MODE = 'NOTIFICATIONS_ENTER_CLEARING_MODE'; // arg: yes -// Unmark notifications (when the cleaning mode is left) -export const NOTIFICATIONS_UNMARK_ALL_FOR_DELETE = 'NOTIFICATIONS_UNMARK_ALL_FOR_DELETE'; -// Mark one for delete -export const NOTIFICATION_MARK_FOR_DELETE = 'NOTIFICATION_MARK_FOR_DELETE'; - export const NOTIFICATIONS_REFRESH_REQUEST = 'NOTIFICATIONS_REFRESH_REQUEST'; export const NOTIFICATIONS_REFRESH_SUCCESS = 'NOTIFICATIONS_REFRESH_SUCCESS'; export const NOTIFICATIONS_REFRESH_FAIL = 'NOTIFICATIONS_REFRESH_FAIL'; @@ -199,67 +188,3 @@ export function scrollTopNotifications(top) { top, }; }; - -export function deleteMarkedNotifications() { - return (dispatch, getState) => { - dispatch(deleteMarkedNotificationsRequest()); - - let ids = []; - getState().getIn(['notifications', 'items']).forEach((n) => { - if (n.get('markedForDelete')) { - ids.push(n.get('id')); - } - }); - - if (ids.length === 0) { - return; - } - - api(getState).delete(`/api/v1/notifications/destroy_multiple?ids[]=${ids.join('&ids[]=')}`).then(() => { - dispatch(deleteMarkedNotificationsSuccess()); - }).catch(error => { - console.error(error); - dispatch(deleteMarkedNotificationsFail(error)); - }); - }; -}; - -export function enterNotificationClearingMode(yes) { - return { - type: NOTIFICATIONS_ENTER_CLEARING_MODE, - yes: yes, - }; -}; - -export function markAllNotifications(yes) { - return { - type: NOTIFICATIONS_MARK_ALL_FOR_DELETE, - yes: yes, // true, false or null. null = invert - }; -}; - -export function deleteMarkedNotificationsRequest() { - return { - type: NOTIFICATIONS_DELETE_MARKED_REQUEST, - }; -}; - -export function deleteMarkedNotificationsFail() { - return { - type: NOTIFICATIONS_DELETE_MARKED_FAIL, - }; -}; - -export function markNotificationForDelete(id, yes) { - return { - type: NOTIFICATION_MARK_FOR_DELETE, - id: id, - yes: yes, - }; -}; - -export function deleteMarkedNotificationsSuccess() { - return { - type: NOTIFICATIONS_DELETE_MARKED_SUCCESS, - }; -}; diff --git a/app/javascript/mastodon/actions/streaming.js b/app/javascript/mastodon/actions/streaming.js index e60ddacd9ea..dcce048cab5 100644 --- a/app/javascript/mastodon/actions/streaming.js +++ b/app/javascript/mastodon/actions/streaming.js @@ -51,4 +51,3 @@ export const connectCommunityStream = () => connectTimelineStream('community', ' export const connectMediaStream = () => connectTimelineStream('community', 'public:local'); export const connectPublicStream = () => connectTimelineStream('public', 'public'); export const connectHashtagStream = (tag) => connectTimelineStream(`hashtag:${tag}`, `hashtag&tag=${tag}`); -export const connectDirectStream = () => connectTimelineStream('direct', 'direct'); diff --git a/app/javascript/mastodon/actions/timelines.js b/app/javascript/mastodon/actions/timelines.js index 935bbb6f0b7..09abe2702a5 100644 --- a/app/javascript/mastodon/actions/timelines.js +++ b/app/javascript/mastodon/actions/timelines.js @@ -115,7 +115,6 @@ export function refreshTimeline(timelineId, path, params = {}) { export const refreshHomeTimeline = () => refreshTimeline('home', '/api/v1/timelines/home'); export const refreshPublicTimeline = () => refreshTimeline('public', '/api/v1/timelines/public'); export const refreshCommunityTimeline = () => refreshTimeline('community', '/api/v1/timelines/public', { local: true }); -export const refreshDirectTimeline = () => refreshTimeline('direct', '/api/v1/timelines/direct'); export const refreshAccountTimeline = accountId => refreshTimeline(`account:${accountId}`, `/api/v1/accounts/${accountId}/statuses`); export const refreshAccountMediaTimeline = accountId => refreshTimeline(`account:${accountId}:media`, `/api/v1/accounts/${accountId}/statuses`, { only_media: true }); export const refreshHashtagTimeline = hashtag => refreshTimeline(`hashtag:${hashtag}`, `/api/v1/timelines/tag/${hashtag}`); @@ -156,7 +155,6 @@ export function expandTimeline(timelineId, path, params = {}) { export const expandHomeTimeline = () => expandTimeline('home', '/api/v1/timelines/home'); export const expandPublicTimeline = () => expandTimeline('public', '/api/v1/timelines/public'); export const expandCommunityTimeline = () => expandTimeline('community', '/api/v1/timelines/public', { local: true }); -export const expandDirectTimeline = () => expandTimeline('direct', '/api/v1/timelines/direct'); export const expandAccountTimeline = accountId => expandTimeline(`account:${accountId}`, `/api/v1/accounts/${accountId}/statuses`); export const expandAccountMediaTimeline = accountId => expandTimeline(`account:${accountId}:media`, `/api/v1/accounts/${accountId}/statuses`, { only_media: true }); export const expandHashtagTimeline = hashtag => expandTimeline(`hashtag:${hashtag}`, `/api/v1/timelines/tag/${hashtag}`); diff --git a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap index 4005c860f1a..76ab3374ae8 100644 --- a/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap +++ b/app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap @@ -3,7 +3,6 @@ exports[` Autoplay renders a animated avatar 1`] = `
Autoplay renders a animated avatar 1`] = ` exports[` Still renders a still avatar 1`] = `
renders the props.text instead of children 1`] = ` foo `; - -exports[`
); } else { - buttons = ; + buttons = ; } } diff --git a/app/javascript/mastodon/components/autosuggest_textarea.js b/app/javascript/mastodon/components/autosuggest_textarea.js index a065ac98844..14a8d4c381b 100644 --- a/app/javascript/mastodon/components/autosuggest_textarea.js +++ b/app/javascript/mastodon/components/autosuggest_textarea.js @@ -11,8 +11,8 @@ import classNames from 'classnames'; const textAtCursorMatchesToken = (str, caretPosition) => { let word; - let left = str.slice(0, caretPosition).search(/[^\s\u200B]+$/); - let right = str.slice(caretPosition).search(/[\s\u200B]/); + let left = str.slice(0, caretPosition).search(/\S+$/); + let right = str.slice(caretPosition).search(/\s/); if (right < 0) { word = str.slice(left); diff --git a/app/javascript/mastodon/components/avatar.js b/app/javascript/mastodon/components/avatar.js index dd155f05906..f7c484ee3a7 100644 --- a/app/javascript/mastodon/components/avatar.js +++ b/app/javascript/mastodon/components/avatar.js @@ -64,7 +64,6 @@ export default class Avatar extends React.PureComponent { onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} style={style} - data-avatar-of={`@${account.get('acct')}`} /> ); } diff --git a/app/javascript/mastodon/components/avatar_overlay.js b/app/javascript/mastodon/components/avatar_overlay.js index 2ecf9fa448b..f5d67b34e8b 100644 --- a/app/javascript/mastodon/components/avatar_overlay.js +++ b/app/javascript/mastodon/components/avatar_overlay.js @@ -21,8 +21,8 @@ export default class AvatarOverlay extends React.PureComponent { return (
-
-
+
+
); } diff --git a/app/javascript/mastodon/components/button.js b/app/javascript/mastodon/components/button.js index 16868010c85..51e2e6a7a80 100644 --- a/app/javascript/mastodon/components/button.js +++ b/app/javascript/mastodon/components/button.js @@ -14,7 +14,6 @@ export default class Button extends React.PureComponent { className: PropTypes.string, style: PropTypes.object, children: PropTypes.node, - title: PropTypes.string, }; static defaultProps = { @@ -36,26 +35,26 @@ export default class Button extends React.PureComponent { } render () { - let attrs = { - className: classNames('button', this.props.className, { - 'button-secondary': this.props.secondary, - 'button--block': this.props.block, - }), - disabled: this.props.disabled, - onClick: this.handleClick, - ref: this.setRef, - style: { - padding: `0 ${this.props.size / 2.25}px`, - height: `${this.props.size}px`, - lineHeight: `${this.props.size}px`, - ...this.props.style, - }, + const style = { + padding: `0 ${this.props.size / 2.25}px`, + height: `${this.props.size}px`, + lineHeight: `${this.props.size}px`, + ...this.props.style, }; - if (this.props.title) attrs.title = this.props.title; + const className = classNames('button', this.props.className, { + 'button-secondary': this.props.secondary, + 'button--block': this.props.block, + }); return ( - ); diff --git a/app/javascript/mastodon/components/column.js b/app/javascript/mastodon/components/column.js index 2e1467595fc..e81236d265f 100644 --- a/app/javascript/mastodon/components/column.js +++ b/app/javascript/mastodon/components/column.js @@ -7,8 +7,6 @@ export default class Column extends React.PureComponent { static propTypes = { children: PropTypes.node, - extraClasses: PropTypes.string, - name: PropTypes.string, }; scrollTop () { @@ -42,10 +40,10 @@ export default class Column extends React.PureComponent { } render () { - const { children, extraClasses, name } = this.props; + const { children } = this.props; return ( -
+
{children}
); diff --git a/app/javascript/mastodon/components/column_back_button.js b/app/javascript/mastodon/components/column_back_button.js index 50c3bf11fcf..8a60c4192a9 100644 --- a/app/javascript/mastodon/components/column_back_button.js +++ b/app/javascript/mastodon/components/column_back_button.js @@ -9,8 +9,7 @@ export default class ColumnBackButton extends React.PureComponent { }; handleClick = () => { - // if history is exhausted, or we would leave mastodon, just go to root. - if (window.history && (window.history.length === 1 || window.history.length === window._mastoInitialHistoryLen)) { + if (window.history && window.history.length === 1) { this.context.router.history.push('/'); } else { this.context.router.history.goBack(); diff --git a/app/javascript/mastodon/components/column_back_button_slim.js b/app/javascript/mastodon/components/column_back_button_slim.js index 2cdf1b25b16..3b4f46d99f4 100644 --- a/app/javascript/mastodon/components/column_back_button_slim.js +++ b/app/javascript/mastodon/components/column_back_button_slim.js @@ -9,12 +9,8 @@ export default class ColumnBackButtonSlim extends React.PureComponent { }; handleClick = () => { - // if history is exhausted, or we would leave mastodon, just go to root. - if (window.history && (window.history.length === 1 || window.history.length === window._mastoInitialHistoryLen)) { - this.context.router.history.push('/'); - } else { - this.context.router.history.goBack(); - } + if (window.history && window.history.length === 1) this.context.router.history.push('/'); + else this.context.router.history.goBack(); } render () { diff --git a/app/javascript/mastodon/components/column_header.js b/app/javascript/mastodon/components/column_header.js index 71530ffdd68..80a8fbdb3a6 100644 --- a/app/javascript/mastodon/components/column_header.js +++ b/app/javascript/mastodon/components/column_header.js @@ -1,18 +1,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; -import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; -import ImmutablePropTypes from 'react-immutable-proptypes'; - -// Glitch imports -import NotificationPurgeButtonsContainer from '../../glitch/components/column/notif_cleaning_widget/container'; +import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; const messages = defineMessages({ show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' }, hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' }, moveLeft: { id: 'column_header.moveLeft_settings', defaultMessage: 'Move column to the left' }, moveRight: { id: 'column_header.moveRight_settings', defaultMessage: 'Move column to the right' }, - enterNotifCleaning : { id: 'notification_purge.start', defaultMessage: 'Enter notification cleaning mode' }, }); @injectIntl @@ -27,19 +22,14 @@ export default class ColumnHeader extends React.PureComponent { title: PropTypes.node.isRequired, icon: PropTypes.string.isRequired, active: PropTypes.bool, - localSettings : ImmutablePropTypes.map, multiColumn: PropTypes.bool, focusable: PropTypes.bool, showBackButton: PropTypes.bool, - notifCleaning: PropTypes.bool, // true only for the notification column - notifCleaningActive: PropTypes.bool, - onEnterCleaningMode: PropTypes.func, children: PropTypes.node, pinned: PropTypes.bool, onPin: PropTypes.func, onMove: PropTypes.func, onClick: PropTypes.func, - intl: PropTypes.object.isRequired, }; static defaultProps = { @@ -49,7 +39,6 @@ export default class ColumnHeader extends React.PureComponent { state = { collapsed: true, animating: false, - animatingNCD: false, }; handleToggleClick = (e) => { @@ -70,32 +59,17 @@ export default class ColumnHeader extends React.PureComponent { } handleBackClick = () => { - // if history is exhausted, or we would leave mastodon, just go to root. - if (window.history && (window.history.length === 1 || window.history.length === window._mastoInitialHistoryLen)) { - this.context.router.history.push('/'); - } else { - this.context.router.history.goBack(); - } + if (window.history && window.history.length === 1) this.context.router.history.push('/'); + else this.context.router.history.goBack(); } handleTransitionEnd = () => { this.setState({ animating: false }); } - handleTransitionEndNCD = () => { - this.setState({ animatingNCD: false }); - } - - onEnterCleaningMode = () => { - this.setState({ animatingNCD: true }); - this.props.onEnterCleaningMode(!this.props.notifCleaningActive); - } - render () { - const { intl, icon, active, children, pinned, onPin, multiColumn, focusable, showBackButton, intl: { formatMessage }, notifCleaning, notifCleaningActive } = this.props; - const { collapsed, animating, animatingNCD } = this.state; - - let title = this.props.title; + const { title, icon, active, children, pinned, onPin, multiColumn, focusable, showBackButton, intl: { formatMessage } } = this.props; + const { collapsed, animating } = this.state; const wrapperClassName = classNames('column-header__wrapper', { 'active': active, @@ -114,20 +88,8 @@ export default class ColumnHeader extends React.PureComponent { 'active': !collapsed, }); - const notifCleaningButtonClassName = classNames('column-header__button', { - 'active': notifCleaningActive, - }); - - const notifCleaningDrawerClassName = classNames('ncd column-header__collapsible', { - 'collapsed': !notifCleaningActive, - 'animating': animatingNCD, - }); - let extraContent, pinButton, moveButtons, backButton, collapseButton; - //*glitch - const msgEnterNotifCleaning = intl.formatMessage(messages.enterNotifCleaning); - if (children) { extraContent = (
@@ -178,30 +140,13 @@ export default class ColumnHeader extends React.PureComponent { {title} +
{backButton} - { notifCleaning ? ( - - ) : null} {collapseButton}
- { notifCleaning ? ( -
-
- {(notifCleaningActive || animatingNCD) ? () : null } -
-
- ) : null} -
{(!collapsed || animating) && collapsedContent} diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js index d0c1b049f89..06f53841d23 100644 --- a/app/javascript/mastodon/components/icon_button.js +++ b/app/javascript/mastodon/components/icon_button.js @@ -20,10 +20,8 @@ export default class IconButton extends React.PureComponent { disabled: PropTypes.bool, inverted: PropTypes.bool, animate: PropTypes.bool, - flip: PropTypes.bool, overlay: PropTypes.bool, tabIndex: PropTypes.string, - label: PropTypes.string, }; static defaultProps = { @@ -44,18 +42,14 @@ export default class IconButton extends React.PureComponent { } render () { - let style = { + const style = { fontSize: `${this.props.size}px`, + width: `${this.props.size * 1.28571429}px`, height: `${this.props.size * 1.28571429}px`, lineHeight: `${this.props.size}px`, ...this.props.style, ...(this.props.active ? this.props.activeStyle : {}), }; - if (!this.props.label) { - style.width = `${this.props.size * 1.28571429}px`; - } else { - style.textAlign = 'left'; - } const { active, @@ -65,7 +59,6 @@ export default class IconButton extends React.PureComponent { expanded, icon, inverted, - flip, overlay, pressed, tabIndex, @@ -79,21 +72,6 @@ export default class IconButton extends React.PureComponent { overlayed: overlay, }); - const flipDeg = flip ? -180 : -360; - const rotateDeg = active ? flipDeg : 0; - - const motionDefaultStyle = { - rotate: rotateDeg, - }; - - const springOpts = { - stiffness: this.props.flip ? 60 : 120, - damping: 7, - }; - const motionStyle = { - rotate: animate ? spring(rotateDeg, springOpts) : 0, - }; - if (!animate) { // Perf optimization: avoid unnecessary components unless // we actually need to animate. @@ -114,7 +92,7 @@ export default class IconButton extends React.PureComponent { } return ( - + {({ rotate }) =>