diff options
author | beatrix <beatrix.bitrot@gmail.com> | 2017-11-18 20:32:17 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-11-18 20:32:17 -0500 |
commit | bcda3f85ce1473e9285299979a471525b2cd7034 (patch) | |
tree | 80c346945531fe17bdf94b70ecd206a07edd5258 /app/javascript/glitch/components | |
parent | dec960c828390466c8fa802ac30e68041a64bff6 (diff) | |
parent | 92cc79be7206534e8c9a9957cc89b5d0eb0bcfac (diff) |
Merge pull request #226 from glitch-soc/glitch-theme
Glitch/Vanilla themes
Diffstat (limited to 'app/javascript/glitch/components')
34 files changed, 0 insertions, 4073 deletions
diff --git a/app/javascript/glitch/components/account/header.js b/app/javascript/glitch/components/account/header.js deleted file mode 100644 index 7bc1a2189..000000000 --- a/app/javascript/glitch/components/account/header.js +++ /dev/null @@ -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> - ); - } - -} diff --git a/app/javascript/glitch/components/column/notif_cleaning_widget/container.js b/app/javascript/glitch/components/column/notif_cleaning_widget/container.js deleted file mode 100644 index d3507d752..000000000 --- a/app/javascript/glitch/components/column/notif_cleaning_widget/container.js +++ /dev/null @@ -1,80 +0,0 @@ -/* - -`<NotificationPurgeButtonsContainer>` -========================= - -This container connects `<NotificationPurgeButtons>`s to the Redux store. - -*/ - -// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - -/* - -Imports: --------- - -*/ - -// Package imports // -import { connect } from 'react-redux'; - -// Our imports // -import NotificationPurgeButtons from './notification_purge_buttons'; -import { - deleteMarkedNotifications, - enterNotificationClearingMode, - markAllNotifications, -} from '../../../../mastodon/actions/notifications'; -import { defineMessages, injectIntl } from 'react-intl'; -import { openModal } from '../../../../mastodon/actions/modal'; - -// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - -/* - -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 messages = defineMessages({ - clearMessage: { id: 'notifications.marked_clear_confirmation', defaultMessage: 'Are you sure you want to permanently clear all selected notifications?' }, - clearConfirm: { id: 'notifications.marked_clear', defaultMessage: 'Clear selected notifications' }, -}); - -const mapDispatchToProps = (dispatch, { intl }) => ({ - onEnterCleaningMode(yes) { - dispatch(enterNotificationClearingMode(yes)); - }, - - onDeleteMarked() { - dispatch(openModal('CONFIRM', { - message: intl.formatMessage(messages.clearMessage), - confirm: intl.formatMessage(messages.clearConfirm), - onConfirm: () => dispatch(deleteMarkedNotifications()), - })); - }, - - onMarkAll() { - dispatch(markAllNotifications(true)); - }, - - onMarkNone() { - dispatch(markAllNotifications(false)); - }, - - onInvert() { - dispatch(markAllNotifications(null)); - }, -}); - -const mapStateToProps = state => ({ - markNewForDelete: state.getIn(['notifications', 'markNewForDelete']), -}); - -export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(NotificationPurgeButtons)); diff --git a/app/javascript/glitch/components/column/notif_cleaning_widget/notification_purge_buttons.js b/app/javascript/glitch/components/column/notif_cleaning_widget/notification_purge_buttons.js deleted file mode 100644 index 62c887fb7..000000000 --- a/app/javascript/glitch/components/column/notif_cleaning_widget/notification_purge_buttons.js +++ /dev/null @@ -1,62 +0,0 @@ -/** - * Buttons widget for controlling the notification clearing mode. - * In idle state, the cleaning mode button is shown. When the mode is active, - * a Confirm and Abort buttons are shown in its place. - */ - - -// Package imports // -import React from 'react'; -import PropTypes from 'prop-types'; -import { defineMessages, injectIntl } from 'react-intl'; -import ImmutablePureComponent from 'react-immutable-pure-component'; - -// Mastodon imports // - -// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - -const messages = defineMessages({ - btnAll : { id: 'notification_purge.btn_all', defaultMessage: 'Select\nall' }, - btnNone : { id: 'notification_purge.btn_none', defaultMessage: 'Select\nnone' }, - btnInvert : { id: 'notification_purge.btn_invert', defaultMessage: 'Invert\nselection' }, - btnApply : { id: 'notification_purge.btn_apply', defaultMessage: 'Clear\nselected' }, -}); - -@injectIntl -export default class NotificationPurgeButtons extends ImmutablePureComponent { - - static propTypes = { - onDeleteMarked : PropTypes.func.isRequired, - onMarkAll : PropTypes.func.isRequired, - onMarkNone : PropTypes.func.isRequired, - onInvert : PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, - markNewForDelete: PropTypes.bool, - }; - - render () { - const { intl, markNewForDelete } = this.props; - - //className='active' - return ( - <div className='column-header__notif-cleaning-buttons'> - <button onClick={this.props.onMarkAll} className={markNewForDelete ? 'active' : ''}> - <b>∀</b><br />{intl.formatMessage(messages.btnAll)} - </button> - - <button onClick={this.props.onMarkNone} className={!markNewForDelete ? 'active' : ''}> - <b>∅</b><br />{intl.formatMessage(messages.btnNone)} - </button> - - <button onClick={this.props.onInvert}> - <b>¬</b><br />{intl.formatMessage(messages.btnInvert)} - </button> - - <button onClick={this.props.onDeleteMarked}> - <i className='fa fa-trash' /><br />{intl.formatMessage(messages.btnApply)} - </button> - </div> - ); - } - -} 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 160f22737..000000000 --- a/app/javascript/glitch/components/compose/advanced_options/container.js +++ /dev/null @@ -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); 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 8251baf4d..000000000 --- a/app/javascript/glitch/components/compose/advanced_options/index.js +++ /dev/null @@ -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> - ); - } - -} 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 d6907472a..000000000 --- a/app/javascript/glitch/components/compose/advanced_options/toggle.js +++ /dev/null @@ -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> - ); - } - -} diff --git a/app/javascript/glitch/components/compose/attach_options/index.js b/app/javascript/glitch/components/compose/attach_options/index.js deleted file mode 100644 index 4340972f0..000000000 --- a/app/javascript/glitch/components/compose/attach_options/index.js +++ /dev/null @@ -1,133 +0,0 @@ -// Package imports // -import React from 'react'; -import PropTypes from 'prop-types'; -import { connect } from 'react-redux'; -import { injectIntl, defineMessages } from 'react-intl'; - -// Our imports // -import ComposeDropdown from '../dropdown/index'; -import { uploadCompose } from '../../../../mastodon/actions/compose'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import ImmutablePureComponent from 'react-immutable-pure-component'; -import { openModal } from '../../../../mastodon/actions/modal'; - -// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - -const messages = defineMessages({ - upload : - { id: 'compose.attach.upload', defaultMessage: 'Upload a file' }, - doodle : - { id: 'compose.attach.doodle', defaultMessage: 'Draw something' }, - attach : - { id: 'compose.attach', defaultMessage: 'Attach...' }, -}); - -const mapStateToProps = state => ({ - // This horrible expression is copied from vanilla upload_button_container - disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 3 || state.getIn(['compose', 'media_attachments']).some(m => m.get('type') === 'video')), - resetFileKey: state.getIn(['compose', 'resetFileKey']), - acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']), -}); - -const mapDispatchToProps = dispatch => ({ - onSelectFile (files) { - dispatch(uploadCompose(files)); - }, - onOpenDoodle () { - dispatch(openModal('DOODLE', { noEsc: true })); - }, -}); - -@injectIntl -@connect(mapStateToProps, mapDispatchToProps) -export default class ComposeAttachOptions extends ImmutablePureComponent { - - static propTypes = { - intl : PropTypes.object.isRequired, - resetFileKey: PropTypes.number, - acceptContentTypes: ImmutablePropTypes.listOf(PropTypes.string).isRequired, - disabled: PropTypes.bool, - onSelectFile: PropTypes.func.isRequired, - onOpenDoodle: PropTypes.func.isRequired, - }; - - handleItemClick = bt => { - if (bt === 'upload') { - this.fileElement.click(); - } - - if (bt === 'doodle') { - this.props.onOpenDoodle(); - } - - this.dropdown.setState({ open: false }); - }; - - handleFileChange = (e) => { - if (e.target.files.length > 0) { - this.props.onSelectFile(e.target.files); - } - } - - setFileRef = (c) => { - this.fileElement = c; - } - - setDropdownRef = (c) => { - this.dropdown = c; - } - - render () { - const { intl, resetFileKey, disabled, acceptContentTypes } = this.props; - - const options = [ - { icon: 'cloud-upload', text: messages.upload, name: 'upload' }, - { icon: 'paint-brush', text: messages.doodle, name: 'doodle' }, - ]; - - const optionElems = options.map((item) => { - const hdl = () => this.handleItemClick(item.name); - return ( - <div - role='button' - tabIndex='0' - key={item.name} - onClick={hdl} - className='privacy-dropdown__option' - > - <div className='privacy-dropdown__option__icon'> - <i className={`fa fa-fw fa-${item.icon}`} /> - </div> - - <div className='privacy-dropdown__option__content'> - <strong>{intl.formatMessage(item.text)}</strong> - </div> - </div> - ); - }); - - return ( - <div> - <ComposeDropdown - title={intl.formatMessage(messages.attach)} - icon='paperclip' - disabled={disabled} - ref={this.setDropdownRef} - > - {optionElems} - </ComposeDropdown> - <input - key={resetFileKey} - ref={this.setFileRef} - type='file' - multiple={false} - accept={acceptContentTypes.toArray().join(',')} - onChange={this.handleFileChange} - disabled={disabled} - style={{ display: 'none' }} - /> - </div> - ); - } - -} diff --git a/app/javascript/glitch/components/compose/dropdown/index.js b/app/javascript/glitch/components/compose/dropdown/index.js deleted file mode 100644 index 5f6467155..000000000 --- a/app/javascript/glitch/components/compose/dropdown/index.js +++ /dev/null @@ -1,77 +0,0 @@ -// Package imports // -import React from 'react'; -import PropTypes from 'prop-types'; - -// Mastodon imports // -import IconButton from '../../../../mastodon/components/icon_button'; - -const iconStyle = { - height : null, - lineHeight : '27px', -}; - -export default class ComposeDropdown extends React.PureComponent { - - static propTypes = { - title: PropTypes.string.isRequired, - icon: PropTypes.string, - highlight: PropTypes.bool, - disabled: PropTypes.bool, - children: PropTypes.arrayOf(PropTypes.node).isRequired, - }; - - state = { - open: false, - }; - - onGlobalClick = (e) => { - if (e.target !== this.node && !this.node.contains(e.target) && this.state.open) { - this.setState({ open: false }); - } - }; - - componentDidMount () { - window.addEventListener('click', this.onGlobalClick); - window.addEventListener('touchstart', this.onGlobalClick); - } - componentWillUnmount () { - window.removeEventListener('click', this.onGlobalClick); - window.removeEventListener('touchstart', this.onGlobalClick); - } - - onToggleDropdown = () => { - if (this.props.disabled) return; - this.setState({ open: !this.state.open }); - }; - - setRef = (c) => { - this.node = c; - }; - - render () { - const { open } = this.state; - let { highlight, title, icon, disabled } = this.props; - - if (!icon) icon = 'ellipsis-h'; - - return ( - <div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'open' : ''} ${highlight ? 'active' : ''} `}> - <div className='advanced-options-dropdown__value'> - <IconButton - className={'inverted'} - title={title} - icon={icon} active={open || highlight} - size={18} - style={iconStyle} - disabled={disabled} - onClick={this.onToggleDropdown} - /> - </div> - <div className='advanced-options-dropdown__dropdown'> - {this.props.children} - </div> - </div> - ); - } - -} 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 4569db99f..000000000 --- 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/local_settings/index.js b/app/javascript/glitch/components/local_settings/index.js deleted file mode 100644 index ef711229a..000000000 --- a/app/javascript/glitch/components/local_settings/index.js +++ /dev/null @@ -1,50 +0,0 @@ -// Package imports -import React from 'react'; -import PropTypes from 'prop-types'; -import ImmutablePropTypes from 'react-immutable-proptypes'; - -// Our imports -import LocalSettingsPage from './page'; -import LocalSettingsNavigation from './navigation'; - -// Stylesheet imports -import './style.scss'; - -export default class LocalSettings extends React.PureComponent { - - static propTypes = { - onChange: PropTypes.func.isRequired, - onClose: PropTypes.func.isRequired, - settings: ImmutablePropTypes.map.isRequired, - }; - - state = { - currentIndex: 0, - }; - - navigateTo = (index) => - this.setState({ currentIndex: +index }); - - render () { - - const { navigateTo } = this; - const { onChange, onClose, settings } = this.props; - const { currentIndex } = this.state; - - return ( - <div className='glitch modal-root__modal local-settings'> - <LocalSettingsNavigation - index={currentIndex} - onClose={onClose} - onNavigate={navigateTo} - /> - <LocalSettingsPage - index={currentIndex} - onChange={onChange} - settings={settings} - /> - </div> - ); - } - -} diff --git a/app/javascript/glitch/components/local_settings/navigation/index.js b/app/javascript/glitch/components/local_settings/navigation/index.js deleted file mode 100644 index fa35e83c7..000000000 --- a/app/javascript/glitch/components/local_settings/navigation/index.js +++ /dev/null @@ -1,74 +0,0 @@ -// Package imports -import React from 'react'; -import PropTypes from 'prop-types'; -import { injectIntl, defineMessages } from 'react-intl'; - -// Our imports -import LocalSettingsNavigationItem from './item'; - -// Stylesheet imports -import './style.scss'; - -// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - -const messages = defineMessages({ - general: { id: 'settings.general', defaultMessage: 'General' }, - collapsed: { id: 'settings.collapsed_statuses', defaultMessage: 'Collapsed toots' }, - media: { id: 'settings.media', defaultMessage: 'Media' }, - preferences: { id: 'settings.preferences', defaultMessage: 'Preferences' }, - close: { id: 'settings.close', defaultMessage: 'Close' }, -}); - -@injectIntl -export default class LocalSettingsNavigation extends React.PureComponent { - - static propTypes = { - index : PropTypes.number, - intl : PropTypes.object.isRequired, - onClose : PropTypes.func.isRequired, - onNavigate : PropTypes.func.isRequired, - }; - - render () { - - const { index, intl, onClose, onNavigate } = this.props; - - return ( - <nav className='glitch local-settings__navigation'> - <LocalSettingsNavigationItem - active={index === 0} - index={0} - onNavigate={onNavigate} - title={intl.formatMessage(messages.general)} - /> - <LocalSettingsNavigationItem - active={index === 1} - index={1} - onNavigate={onNavigate} - title={intl.formatMessage(messages.collapsed)} - /> - <LocalSettingsNavigationItem - active={index === 2} - index={2} - onNavigate={onNavigate} - title={intl.formatMessage(messages.media)} - /> - <LocalSettingsNavigationItem - active={index === 3} - href='/settings/preferences' - index={3} - icon='cog' - title={intl.formatMessage(messages.preferences)} - /> - <LocalSettingsNavigationItem - active={index === 4} - className='close' - index={4} - onNavigate={onClose} - title={intl.formatMessage(messages.close)} - /> - </nav> - ); - } - -} diff --git a/app/javascript/glitch/components/local_settings/navigation/item/index.js b/app/javascript/glitch/components/local_settings/navigation/item/index.js deleted file mode 100644 index a352d5fb2..000000000 --- a/app/javascript/glitch/components/local_settings/navigation/item/index.js +++ /dev/null @@ -1,69 +0,0 @@ -// Package imports -import React from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -// Stylesheet imports -import './style.scss'; - -// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - -export default class LocalSettingsPage extends React.PureComponent { - - static propTypes = { - active: PropTypes.bool, - className: PropTypes.string, - href: PropTypes.string, - icon: PropTypes.string, - index: PropTypes.number.isRequired, - onNavigate: PropTypes.func, - title: PropTypes.string, - }; - - handleClick = (e) => { - const { index, onNavigate } = this.props; - if (onNavigate) { - onNavigate(index); - e.preventDefault(); - } - } - - render () { - const { handleClick } = this; - const { - active, - className, - href, - icon, - onNavigate, - title, - } = this.props; - - const finalClassName = classNames('glitch', 'local-settings__navigation__item', { - active, - }, className); - - const iconElem = icon ? <i className={`fa fa-fw fa-${icon}`} /> : null; - - if (href) return ( - <a - href={href} - className={finalClassName} - > - {iconElem} {title} - </a> - ); - else if (onNavigate) return ( - <a - onClick={handleClick} - role='button' - tabIndex='0' - className={finalClassName} - > - {iconElem} {title} - </a> - ); - else return null; - } - -} diff --git a/app/javascript/glitch/components/local_settings/navigation/item/style.scss b/app/javascript/glitch/components/local_settings/navigation/item/style.scss deleted file mode 100644 index 7f7371993..000000000 --- a/app/javascript/glitch/components/local_settings/navigation/item/style.scss +++ /dev/null @@ -1,27 +0,0 @@ -@import 'styles/mastodon/variables'; - -.glitch.local-settings__navigation__item { - display: block; - padding: 15px 20px; - color: inherit; - background: $primary-text-color; - border-bottom: 1px $ui-primary-color solid; - cursor: pointer; - text-decoration: none; - outline: none; - transition: background .3s; - - &:hover { - background: $ui-secondary-color; - } - - &.active { - background: $ui-highlight-color; - color: $primary-text-color; - } - - &.close, &.close:hover { - background: $error-value-color; - color: $primary-text-color; - } -} diff --git a/app/javascript/glitch/components/local_settings/navigation/style.scss b/app/javascript/glitch/components/local_settings/navigation/style.scss deleted file mode 100644 index 0336f943b..000000000 --- a/app/javascript/glitch/components/local_settings/navigation/style.scss +++ /dev/null @@ -1,10 +0,0 @@ -@import 'styles/mastodon/variables'; - -.glitch.local-settings__navigation { - background: $primary-text-color; - color: $ui-base-color; - width: 200px; - font-size: 15px; - line-height: 20px; - overflow-y: auto; -} diff --git a/app/javascript/glitch/components/local_settings/page/index.js b/app/javascript/glitch/components/local_settings/page/index.js deleted file mode 100644 index 498230f7b..000000000 --- a/app/javascript/glitch/components/local_settings/page/index.js +++ /dev/null @@ -1,212 +0,0 @@ -// Package imports -import React from 'react'; -import PropTypes from 'prop-types'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; - -// Our imports -import LocalSettingsPageItem from './item'; - -// Stylesheet imports -import './style.scss'; - -// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - -const messages = defineMessages({ - layout_auto: { id: 'layout.auto', defaultMessage: 'Auto' }, - layout_desktop: { id: 'layout.desktop', defaultMessage: 'Desktop' }, - layout_mobile: { id: 'layout.single', defaultMessage: 'Mobile' }, - side_arm_none: { id: 'settings.side_arm.none', defaultMessage: 'None' }, -}); - -@injectIntl -export default class LocalSettingsPage extends React.PureComponent { - - static propTypes = { - index : PropTypes.number, - intl : PropTypes.object.isRequired, - onChange : PropTypes.func.isRequired, - settings : ImmutablePropTypes.map.isRequired, - }; - - pages = [ - ({ intl, onChange, settings }) => ( - <div className='glitch local-settings__page general'> - <h1><FormattedMessage id='settings.general' defaultMessage='General' /></h1> - <LocalSettingsPageItem - settings={settings} - item={['layout']} - id='mastodon-settings--layout' - options={[ - { value: 'auto', message: intl.formatMessage(messages.layout_auto) }, - { value: 'multiple', message: intl.formatMessage(messages.layout_desktop) }, - { value: 'single', message: intl.formatMessage(messages.layout_mobile) }, - ]} - onChange={onChange} - > - <FormattedMessage id='settings.layout' defaultMessage='Layout:' /> - </LocalSettingsPageItem> - <LocalSettingsPageItem - settings={settings} - item={['stretch']} - id='mastodon-settings--stretch' - onChange={onChange} - > - <FormattedMessage id='settings.wide_view' defaultMessage='Wide view (Desktop mode only)' /> - </LocalSettingsPageItem> - <LocalSettingsPageItem - settings={settings} - item={['navbar_under']} - id='mastodon-settings--navbar_under' - onChange={onChange} - > - <FormattedMessage id='settings.navbar_under' defaultMessage='Navbar at the bottom (Mobile only)' /> - </LocalSettingsPageItem> - <section> - <h2><FormattedMessage id='settings.compose_box_opts' defaultMessage='Compose box options' /></h2> - <LocalSettingsPageItem - settings={settings} - item={['side_arm']} - id='mastodon-settings--side_arm' - options={[ - { value: 'none', message: intl.formatMessage(messages.side_arm_none) }, - { value: 'direct', message: intl.formatMessage({ id: 'privacy.direct.short' }) }, - { value: 'private', message: intl.formatMessage({ id: 'privacy.private.short' }) }, - { value: 'unlisted', message: intl.formatMessage({ id: 'privacy.unlisted.short' }) }, - { value: 'public', message: intl.formatMessage({ id: 'privacy.public.short' }) }, - ]} - onChange={onChange} - > - <FormattedMessage id='settings.side_arm' defaultMessage='Secondary toot button:' /> - </LocalSettingsPageItem> - </section> - </div> - ), - ({ onChange, settings }) => ( - <div className='glitch local-settings__page collapsed'> - <h1><FormattedMessage id='settings.collapsed_statuses' defaultMessage='Collapsed toots' /></h1> - <LocalSettingsPageItem - settings={settings} - item={['collapsed', 'enabled']} - id='mastodon-settings--collapsed-enabled' - onChange={onChange} - > - <FormattedMessage id='settings.enable_collapsed' defaultMessage='Enable collapsed toots' /> - </LocalSettingsPageItem> - <section> - <h2><FormattedMessage id='settings.auto_collapse' defaultMessage='Automatic collapsing' /></h2> - <LocalSettingsPageItem - settings={settings} - item={['collapsed', 'auto', 'all']} - id='mastodon-settings--collapsed-auto-all' - onChange={onChange} - dependsOn={[['collapsed', 'enabled']]} - > - <FormattedMessage id='settings.auto_collapse_all' defaultMessage='Everything' /> - </LocalSettingsPageItem> - <LocalSettingsPageItem - settings={settings} - item={['collapsed', 'auto', 'notifications']} - id='mastodon-settings--collapsed-auto-notifications' - onChange={onChange} - dependsOn={[['collapsed', 'enabled']]} - dependsOnNot={[['collapsed', 'auto', 'all']]} - > - <FormattedMessage id='settings.auto_collapse_notifications' defaultMessage='Notifications' /> - </LocalSettingsPageItem> - <LocalSettingsPageItem - settings={settings} - item={['collapsed', 'auto', 'lengthy']} - id='mastodon-settings--collapsed-auto-lengthy' - onChange={onChange} - dependsOn={[['collapsed', 'enabled']]} - dependsOnNot={[['collapsed', 'auto', 'all']]} - > - <FormattedMessage id='settings.auto_collapse_lengthy' defaultMessage='Lengthy toots' /> - </LocalSettingsPageItem> - <LocalSettingsPageItem - settings={settings} - item={['collapsed', 'auto', 'reblogs']} - id='mastodon-settings--collapsed-auto-reblogs' - onChange={onChange} - dependsOn={[['collapsed', 'enabled']]} - dependsOnNot={[['collapsed', 'auto', 'all']]} - > - <FormattedMessage id='settings.auto_collapse_reblogs' defaultMessage='Boosts' /> - </LocalSettingsPageItem> - <LocalSettingsPageItem - settings={settings} - item={['collapsed', 'auto', 'replies']} - id='mastodon-settings--collapsed-auto-replies' - onChange={onChange} - dependsOn={[['collapsed', 'enabled']]} - dependsOnNot={[['collapsed', 'auto', 'all']]} - > - <FormattedMessage id='settings.auto_collapse_replies' defaultMessage='Replies' /> - </LocalSettingsPageItem> - <LocalSettingsPageItem - settings={settings} - item={['collapsed', 'auto', 'media']} - id='mastodon-settings--collapsed-auto-media' - onChange={onChange} - dependsOn={[['collapsed', 'enabled']]} - dependsOnNot={[['collapsed', 'auto', 'all']]} - > - <FormattedMessage id='settings.auto_collapse_media' defaultMessage='Toots with media' /> - </LocalSettingsPageItem> - </section> - <section> - <h2><FormattedMessage id='settings.image_backgrounds' defaultMessage='Image backgrounds' /></h2> - <LocalSettingsPageItem - settings={settings} - item={['collapsed', 'backgrounds', 'user_backgrounds']} - id='mastodon-settings--collapsed-user-backgrouns' - onChange={onChange} - dependsOn={[['collapsed', 'enabled']]} - > - <FormattedMessage id='settings.image_backgrounds_users' defaultMessage='Give collapsed toots an image background' /> - </LocalSettingsPageItem> - <LocalSettingsPageItem - settings={settings} - item={['collapsed', 'backgrounds', 'preview_images']} - id='mastodon-settings--collapsed-preview-images' - onChange={onChange} - dependsOn={[['collapsed', 'enabled']]} - > - <FormattedMessage id='settings.image_backgrounds_media' defaultMessage='Preview collapsed toot media' /> - </LocalSettingsPageItem> - </section> - </div> - ), - ({ onChange, settings }) => ( - <div className='glitch local-settings__page media'> - <h1><FormattedMessage id='settings.media' defaultMessage='Media' /></h1> - <LocalSettingsPageItem - settings={settings} - item={['media', 'letterbox']} - id='mastodon-settings--media-letterbox' - onChange={onChange} - > - <FormattedMessage id='settings.media_letterbox' defaultMessage='Letterbox media' /> - </LocalSettingsPageItem> - <LocalSettingsPageItem - settings={settings} - item={['media', 'fullwidth']} - id='mastodon-settings--media-fullwidth' - onChange={onChange} - > - <FormattedMessage id='settings.media_fullwidth' defaultMessage='Full-width media previews' /> - </LocalSettingsPageItem> - </div> - ), - ]; - - render () { - const { pages } = this; - const { index, intl, onChange, settings } = this.props; - const CurrentPage = pages[index] || pages[0]; - - return <CurrentPage intl={intl} onChange={onChange} settings={settings} />; - } - -} diff --git a/app/javascript/glitch/components/local_settings/page/item/index.js b/app/javascript/glitch/components/local_settings/page/item/index.js deleted file mode 100644 index 37e28c084..000000000 --- a/app/javascript/glitch/components/local_settings/page/item/index.js +++ /dev/null @@ -1,90 +0,0 @@ -// Package imports -import React from 'react'; -import PropTypes from 'prop-types'; -import ImmutablePropTypes from 'react-immutable-proptypes'; - -// Stylesheet imports -import './style.scss'; - -// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - -export default class LocalSettingsPageItem extends React.PureComponent { - - static propTypes = { - children: PropTypes.element.isRequired, - dependsOn: PropTypes.array, - dependsOnNot: PropTypes.array, - id: PropTypes.string.isRequired, - item: PropTypes.array.isRequired, - onChange: PropTypes.func.isRequired, - options: PropTypes.arrayOf(PropTypes.shape({ - value: PropTypes.string.isRequired, - message: PropTypes.string.isRequired, - })), - settings: ImmutablePropTypes.map.isRequired, - }; - - handleChange = e => { - const { target } = e; - const { item, onChange, options } = this.props; - if (options && options.length > 0) onChange(item, target.value); - else onChange(item, target.checked); - } - - render () { - const { handleChange } = this; - const { settings, item, id, options, children, dependsOn, dependsOnNot } = this.props; - let enabled = true; - - if (dependsOn) { - for (let i = 0; i < dependsOn.length; i++) { - enabled = enabled && settings.getIn(dependsOn[i]); - } - } - if (dependsOnNot) { - for (let i = 0; i < dependsOnNot.length; i++) { - enabled = enabled && !settings.getIn(dependsOnNot[i]); - } - } - - if (options && options.length > 0) { - const currentValue = settings.getIn(item); - const optionElems = options && options.length > 0 && options.map((opt) => ( - <option - key={opt.value} - value={opt.value} - > - {opt.message} - </option> - )); - return ( - <label className='glitch local-settings__page__item' htmlFor={id}> - <p>{children}</p> - <p> - <select - id={id} - disabled={!enabled} - onBlur={handleChange} - onChange={handleChange} - value={currentValue} - > - {optionElems} - </select> - </p> - </label> - ); - } else return ( - <label className='glitch local-settings__page__item' htmlFor={id}> - <input - id={id} - type='checkbox' - checked={settings.getIn(item)} - onChange={handleChange} - disabled={!enabled} - /> - {children} - </label> - ); - } - -} diff --git a/app/javascript/glitch/components/local_settings/page/item/style.scss b/app/javascript/glitch/components/local_settings/page/item/style.scss deleted file mode 100644 index b2d8f7185..000000000 --- a/app/javascript/glitch/components/local_settings/page/item/style.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import 'styles/mastodon/variables'; - -.glitch.local-settings__page__item { - select { - margin-bottom: 5px; - } -} diff --git a/app/javascript/glitch/components/local_settings/page/style.scss b/app/javascript/glitch/components/local_settings/page/style.scss deleted file mode 100644 index e9eedcad0..000000000 --- a/app/javascript/glitch/components/local_settings/page/style.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import 'styles/mastodon/variables'; - -.glitch.local-settings__page { - display: block; - flex: auto; - padding: 15px 20px 15px 20px; - width: 360px; - overflow-y: auto; -} diff --git a/app/javascript/glitch/components/local_settings/style.scss b/app/javascript/glitch/components/local_settings/style.scss deleted file mode 100644 index 765294607..000000000 --- a/app/javascript/glitch/components/local_settings/style.scss +++ /dev/null @@ -1,34 +0,0 @@ -@import 'styles/mastodon/variables'; - -.glitch.local-settings { - position: relative; - display: flex; - flex-direction: row; - background: $ui-secondary-color; - color: $ui-base-color; - border-radius: 8px; - height: 80vh; - width: 80vw; - max-width: 740px; - max-height: 450px; - overflow: hidden; - - label { - display: block; - } - - h1 { - font-size: 18px; - font-weight: 500; - line-height: 24px; - margin-bottom: 20px; - } - - h2 { - font-size: 15px; - font-weight: 500; - line-height: 20px; - margin-top: 20px; - margin-bottom: 10px; - } -} diff --git a/app/javascript/glitch/components/notification/container.js b/app/javascript/glitch/components/notification/container.js deleted file mode 100644 index dc4c2168a..000000000 --- a/app/javascript/glitch/components/notification/container.js +++ /dev/null @@ -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); diff --git a/app/javascript/glitch/components/notification/follow.js b/app/javascript/glitch/components/notification/follow.js deleted file mode 100644 index e2c21bf35..000000000 --- a/app/javascript/glitch/components/notification/follow.js +++ /dev/null @@ -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> - ); - } - -} diff --git a/app/javascript/glitch/components/notification/index.js b/app/javascript/glitch/components/notification/index.js deleted file mode 100644 index b2e55aad5..000000000 --- a/app/javascript/glitch/components/notification/index.js +++ /dev/null @@ -1,82 +0,0 @@ -// Package imports // -import React from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import ImmutablePureComponent from 'react-immutable-pure-component'; - -// Mastodon imports // - -// Our imports // -import StatusContainer from '../status/container'; -import NotificationFollow from './follow'; - -export default class Notification extends ImmutablePureComponent { - - static propTypes = { - notification: ImmutablePropTypes.map.isRequired, - settings: ImmutablePropTypes.map.isRequired, - }; - - renderFollow (notification) { - return ( - <NotificationFollow - id={notification.get('id')} - account={notification.get('account')} - notification={notification} - /> - ); - } - - renderMention (notification) { - return ( - <StatusContainer - id={notification.get('status')} - notification={notification} - withDismiss - /> - ); - } - - renderFavourite (notification) { - return ( - <StatusContainer - id={notification.get('status')} - account={notification.get('account')} - prepend='favourite' - muted - notification={notification} - withDismiss - /> - ); - } - - renderReblog (notification) { - return ( - <StatusContainer - id={notification.get('status')} - account={notification.get('account')} - prepend='reblog' - muted - notification={notification} - withDismiss - /> - ); - } - - render () { - const { notification } = this.props; - - switch(notification.get('type')) { - case 'follow': - return this.renderFollow(notification); - case 'mention': - return this.renderMention(notification); - case 'favourite': - return this.renderFavourite(notification); - case 'reblog': - return this.renderReblog(notification); - } - - return null; - } - -} 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 089f615f0..000000000 --- a/app/javascript/glitch/components/notification/overlay/container.js +++ /dev/null @@ -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); diff --git a/app/javascript/glitch/components/notification/overlay/notification_overlay.js b/app/javascript/glitch/components/notification/overlay/notification_overlay.js deleted file mode 100644 index aaca95cac..000000000 --- a/app/javascript/glitch/components/notification/overlay/notification_overlay.js +++ /dev/null @@ -1,61 +0,0 @@ -/** - * Notification overlay - */ - - -// Package imports // -import React from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import PropTypes from 'prop-types'; -import ImmutablePureComponent from 'react-immutable-pure-component'; -import { defineMessages, injectIntl } from 'react-intl'; - -// Mastodon imports // - -// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - -const messages = defineMessages({ - markForDeletion: { id: 'notification.markForDeletion', defaultMessage: 'Mark for deletion' }, -}); - -@injectIntl -export default class NotificationOverlay extends ImmutablePureComponent { - - static propTypes = { - notification : ImmutablePropTypes.map.isRequired, - onMarkForDelete : PropTypes.func.isRequired, - show : PropTypes.bool.isRequired, - intl : PropTypes.object.isRequired, - }; - - onToggleMark = () => { - const mark = !this.props.notification.get('markedForDelete'); - const id = this.props.notification.get('id'); - this.props.onMarkForDelete(id, mark); - } - - render () { - const { notification, show, intl } = this.props; - - const active = notification.get('markedForDelete'); - const label = intl.formatMessage(messages.markForDeletion); - - return show ? ( - <div - aria-label={label} - role='checkbox' - aria-checked={active} - tabIndex={0} - className={`notification__dismiss-overlay ${active ? 'active' : ''}`} - onClick={this.onToggleMark} - > - <div className='wrappy'> - <div className='ckbox' aria-hidden='true' title={label}> - {active ? (<i className='fa fa-check' />) : ''} - </div> - </div> - </div> - ) : null; - } - -} diff --git a/app/javascript/glitch/components/status/action_bar.js b/app/javascript/glitch/components/status/action_bar.js deleted file mode 100644 index 34588b008..000000000 --- a/app/javascript/glitch/components/status/action_bar.js +++ /dev/null @@ -1,187 +0,0 @@ -// Package imports // -import React from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import PropTypes from 'prop-types'; -import { defineMessages, injectIntl } from 'react-intl'; -import ImmutablePureComponent from 'react-immutable-pure-component'; - -// Mastodon imports // -import RelativeTimestamp from '../../../mastodon/components/relative_timestamp'; -import IconButton from '../../../mastodon/components/icon_button'; -import DropdownMenuContainer from '../../../mastodon/containers/dropdown_menu_container'; -import { me } from '../../../mastodon/initial_state'; - -const messages = defineMessages({ - delete: { id: 'status.delete', defaultMessage: 'Delete' }, - mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' }, - mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' }, - block: { id: 'account.block', defaultMessage: 'Block @{name}' }, - reply: { id: 'status.reply', defaultMessage: 'Reply' }, - share: { id: 'status.share', defaultMessage: 'Share' }, - replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' }, - reblog: { id: 'status.reblog', defaultMessage: 'Boost' }, - cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' }, - favourite: { id: 'status.favourite', defaultMessage: 'Favourite' }, - open: { id: 'status.open', defaultMessage: 'Expand this status' }, - report: { id: 'status.report', defaultMessage: 'Report @{name}' }, - muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' }, - unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' }, - pin: { id: 'status.pin', defaultMessage: 'Pin on profile' }, - unpin: { id: 'status.unpin', defaultMessage: 'Unpin from profile' }, - embed: { id: 'status.embed', defaultMessage: 'Embed' }, -}); - -@injectIntl -export default class StatusActionBar extends ImmutablePureComponent { - - static contextTypes = { - router: PropTypes.object, - }; - - static propTypes = { - status: ImmutablePropTypes.map.isRequired, - onReply: PropTypes.func, - onFavourite: PropTypes.func, - onReblog: PropTypes.func, - onDelete: PropTypes.func, - onMention: PropTypes.func, - onMute: PropTypes.func, - onBlock: PropTypes.func, - onReport: PropTypes.func, - onEmbed: PropTypes.func, - onMuteConversation: PropTypes.func, - onPin: PropTypes.func, - withDismiss: PropTypes.bool, - intl: PropTypes.object.isRequired, - }; - - // Avoid checking props that are functions (and whose equality will always - // evaluate to false. See react-immutable-pure-component for usage. - updateOnProps = [ - 'status', - 'withDismiss', - ] - - handleReplyClick = () => { - this.props.onReply(this.props.status, this.context.router.history); - } - - handleShareClick = () => { - navigator.share({ - text: this.props.status.get('search_index'), - url: this.props.status.get('url'), - }); - } - - handleFavouriteClick = () => { - this.props.onFavourite(this.props.status); - } - - handleReblogClick = (e) => { - this.props.onReblog(this.props.status, e); - } - - handleDeleteClick = () => { - this.props.onDelete(this.props.status); - } - - handlePinClick = () => { - this.props.onPin(this.props.status); - } - - handleMentionClick = () => { - this.props.onMention(this.props.status.get('account'), this.context.router.history); - } - - handleMuteClick = () => { - this.props.onMute(this.props.status.get('account')); - } - - handleBlockClick = () => { - this.props.onBlock(this.props.status.get('account')); - } - - handleOpen = () => { - this.context.router.history.push(`/statuses/${this.props.status.get('id')}`); - } - - handleEmbed = () => { - this.props.onEmbed(this.props.status); - } - - handleReport = () => { - this.props.onReport(this.props.status); - } - - handleConversationMuteClick = () => { - this.props.onMuteConversation(this.props.status); - } - - render () { - const { status, intl, withDismiss } = this.props; - - const mutingConversation = status.get('muted'); - const anonymousAccess = !me; - const publicStatus = ['public', 'unlisted'].includes(status.get('visibility')); - - let menu = []; - let reblogIcon = 'retweet'; - let replyIcon; - let replyTitle; - - menu.push({ text: intl.formatMessage(messages.open), action: this.handleOpen }); - - if (publicStatus) { - menu.push({ text: intl.formatMessage(messages.embed), action: this.handleEmbed }); - } - - menu.push(null); - - if (status.getIn(['account', 'id']) === me || withDismiss) { - menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick }); - menu.push(null); - } - - if (status.getIn(['account', 'id']) === me) { - if (publicStatus) { - menu.push({ text: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin), action: this.handlePinClick }); - } - - menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick }); - } else { - menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick }); - menu.push(null); - menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick }); - menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick }); - menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), action: this.handleReport }); - } - - if (status.get('in_reply_to_id', null) === null) { - replyIcon = 'reply'; - replyTitle = intl.formatMessage(messages.reply); - } else { - replyIcon = 'reply-all'; - replyTitle = intl.formatMessage(messages.replyAll); - } - - const shareButton = ('share' in navigator) && status.get('visibility') === 'public' && ( - <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShareClick} /> - ); - - return ( - <div className='status__action-bar'> - <IconButton className='status__action-bar-button' disabled={anonymousAccess} title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} /> - <IconButton className='status__action-bar-button' disabled={anonymousAccess || !publicStatus} active={status.get('reblogged')} pressed={status.get('reblogged')} title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /> - <IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} pressed={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /> - {shareButton} - - <div className='status__action-bar-dropdown'> - <DropdownMenuContainer disabled={anonymousAccess} status={status} items={menu} icon='ellipsis-h' size={18} direction='right' ariaLabel='More' /> - </div> - - <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a> - </div> - ); - } - -} diff --git a/app/javascript/glitch/components/status/container.js b/app/javascript/glitch/components/status/container.js deleted file mode 100644 index 0054abd14..000000000 --- a/app/javascript/glitch/components/status/container.js +++ /dev/null @@ -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) -); diff --git a/app/javascript/glitch/components/status/content.js b/app/javascript/glitch/components/status/content.js deleted file mode 100644 index 06015619b..000000000 --- a/app/javascript/glitch/components/status/content.js +++ /dev/null @@ -1,241 +0,0 @@ -// Package imports // -import React from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import PropTypes from 'prop-types'; -import { FormattedMessage } from 'react-intl'; -import classnames from 'classnames'; - -// Mastodon imports // -import { isRtl } from '../../../mastodon/rtl'; -import Permalink from '../../../mastodon/components/permalink'; - -export default class StatusContent extends React.PureComponent { - - static propTypes = { - status: ImmutablePropTypes.map.isRequired, - expanded: PropTypes.oneOf([true, false, null]), - setExpansion: PropTypes.func, - onHeightUpdate: PropTypes.func, - media: PropTypes.element, - mediaIcon: PropTypes.string, - parseClick: PropTypes.func, - disabled: PropTypes.bool, - }; - - state = { - hidden: true, - }; - - componentDidMount () { - const node = this.node; - const links = node.querySelectorAll('a'); - - for (let i = 0; i < links.length; ++i) { - let link = links[i]; - let mention = this.props.status.get('mentions').find(item => link.href === item.get('url')); - - if (mention) { - link.addEventListener('click', this.onMentionClick.bind(this, mention), false); - link.setAttribute('title', mention.get('acct')); - } else if (link.textContent[0] === '#' || (link.previousSibling && link.previousSibling.textContent && link.previousSibling.textContent[link.previousSibling.textContent.length - 1] === '#')) { - link.addEventListener('click', this.onHashtagClick.bind(this, link.text), false); - } else { - link.addEventListener('click', this.onLinkClick.bind(this), false); - link.setAttribute('title', link.href); - } - - link.setAttribute('target', '_blank'); - link.setAttribute('rel', 'noopener'); - } - } - - componentDidUpdate () { - if (this.props.onHeightUpdate) { - this.props.onHeightUpdate(); - } - } - - onLinkClick = (e) => { - if (this.props.expanded === false) { - if (this.props.parseClick) this.props.parseClick(e); - } - } - - onMentionClick = (mention, e) => { - if (this.props.parseClick) { - this.props.parseClick(e, `/accounts/${mention.get('id')}`); - } - } - - onHashtagClick = (hashtag, e) => { - hashtag = hashtag.replace(/^#/, '').toLowerCase(); - - if (this.props.parseClick) { - this.props.parseClick(e, `/timelines/tag/${hashtag}`); - } - } - - handleMouseDown = (e) => { - this.startXY = [e.clientX, e.clientY]; - } - - handleMouseUp = (e) => { - const { parseClick } = this.props; - - if (!this.startXY) { - return; - } - - const [ startX, startY ] = this.startXY; - const [ deltaX, deltaY ] = [Math.abs(e.clientX - startX), Math.abs(e.clientY - startY)]; - - if (e.target.localName === 'button' || e.target.localName === 'a' || (e.target.parentNode && (e.target.parentNode.localName === 'button' || e.target.parentNode.localName === 'a'))) { - return; - } - - if (deltaX + deltaY < 5 && e.button === 0 && parseClick) { - parseClick(e); - } - - this.startXY = null; - } - - handleSpoilerClick = (e) => { - e.preventDefault(); - - if (this.props.setExpansion) { - this.props.setExpansion(this.props.expanded ? null : true); - } else { - this.setState({ hidden: !this.state.hidden }); - } - } - - setRef = (c) => { - this.node = c; - } - - render () { - const { - status, - media, - mediaIcon, - parseClick, - disabled, - } = this.props; - - const hidden = ( - this.props.setExpansion ? - !this.props.expanded : - this.state.hidden - ); - - const content = { __html: status.get('contentHtml') }; - const spoilerContent = { __html: status.get('spoilerHtml') }; - const directionStyle = { direction: 'ltr' }; - const classNames = classnames('status__content', { - 'status__content--with-action': parseClick && !disabled, - }); - - if (isRtl(status.get('search_index'))) { - directionStyle.direction = 'rtl'; - } - - if (status.get('spoiler_text').length > 0) { - let mentionsPlaceholder = ''; - - const mentionLinks = status.get('mentions').map(item => ( - <Permalink - to={`/accounts/${item.get('id')}`} - href={item.get('url')} - key={item.get('id')} - className='mention' - > - @<span>{item.get('username')}</span> - </Permalink> - )).reduce((aggregate, item) => [...aggregate, item, ' '], []); - - const toggleText = hidden ? [ - <FormattedMessage - id='status.show_more' - defaultMessage='Show more' - key='0' - />, - mediaIcon ? ( - <i - className={ - `fa fa-fw fa-${mediaIcon} status__content__spoiler-icon` - } - aria-hidden='true' - key='1' - /> - ) : null, - ] : [ - <FormattedMessage - id='status.show_less' - defaultMessage='Show less' - key='0' - />, - ]; - - if (hidden) { - mentionsPlaceholder = <div>{mentionLinks}</div>; - } - - return ( - <div className={classNames}> - <p - style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }} - onMouseDown={this.handleMouseDown} - onMouseUp={this.handleMouseUp} - > - <span dangerouslySetInnerHTML={spoilerContent} /> - {' '} - <button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}> - {toggleText} - </button> - </p> - - {mentionsPlaceholder} - - <div className={`status__content__spoiler ${!hidden ? 'status__content__spoiler--visible' : ''}`}> - <div - ref={this.setRef} - style={directionStyle} - onMouseDown={this.handleMouseDown} - onMouseUp={this.handleMouseUp} - dangerouslySetInnerHTML={content} - /> - {media} - </div> - - </div> - ); - } else if (parseClick) { - return ( - <div - className={classNames} - style={directionStyle} - > - <div - ref={this.setRef} - onMouseDown={this.handleMouseDown} - onMouseUp={this.handleMouseUp} - dangerouslySetInnerHTML={content} - /> - {media} - </div> - ); - } else { - return ( - <div - className='status__content' - style={directionStyle} - > - <div ref={this.setRef} dangerouslySetInnerHTML={content} /> - {media} - </div> - ); - } - } - -} 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 ae03dc08d..000000000 --- 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 = <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> - ); - } - -} 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 7fcc14377..000000000 --- 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 = ( - <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> - ); - } - -} diff --git a/app/javascript/glitch/components/status/header.js b/app/javascript/glitch/components/status/header.js deleted file mode 100644 index f741950b1..000000000 --- a/app/javascript/glitch/components/status/header.js +++ /dev/null @@ -1,146 +0,0 @@ -/* - -`<StatusHeader>` -================ - -Originally a part of `<Status>`, but extracted into a separate -component for better documentation and maintainance by -@kibi@glitch.social as a part of glitch-soc/mastodon. - -*/ - -// * * * * * * * // - -// Imports -// ------- - -// Package imports. -import React from 'react'; -import PropTypes from 'prop-types'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import { defineMessages, injectIntl } from 'react-intl'; - -// Mastodon imports. -import Avatar from '../../../mastodon/components/avatar'; -import AvatarOverlay from '../../../mastodon/components/avatar_overlay'; -import DisplayName from '../../../mastodon/components/display_name'; -import IconButton from '../../../mastodon/components/icon_button'; -import VisibilityIcon from './visibility_icon'; - -// * * * * * * * // - -// Initial setup -// ------------- - -// Messages for use with internationalization stuff. -const messages = defineMessages({ - collapse: { id: 'status.collapse', defaultMessage: 'Collapse' }, - uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' }, - public: { id: 'privacy.public.short', defaultMessage: 'Public' }, - unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' }, - private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' }, - direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' }, -}); - -// * * * * * * * // - -// The component -// ------------- - -@injectIntl -export default class StatusHeader extends React.PureComponent { - - static propTypes = { - status: ImmutablePropTypes.map.isRequired, - friend: ImmutablePropTypes.map, - mediaIcon: PropTypes.string, - collapsible: PropTypes.bool, - collapsed: PropTypes.bool, - parseClick: PropTypes.func.isRequired, - setExpansion: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, - }; - - // Handles clicks on collapsed button - handleCollapsedClick = (e) => { - const { collapsed, setExpansion } = this.props; - if (e.button === 0) { - setExpansion(collapsed ? null : false); - e.preventDefault(); - } - } - - // Handles clicks on account name/image - handleAccountClick = (e) => { - const { status, parseClick } = this.props; - parseClick(e, `/accounts/${+status.getIn(['account', 'id'])}`); - } - - // Rendering. - render () { - const { - status, - friend, - mediaIcon, - collapsible, - collapsed, - intl, - } = this.props; - - const account = status.get('account'); - - return ( - <header className='status__info'> - <a - href={account.get('url')} - target='_blank' - className='status__avatar' - onClick={this.handleAccountClick} - > - { - friend ? ( - <AvatarOverlay account={account} friend={friend} /> - ) : ( - <Avatar account={account} size={48} /> - ) - } - </a> - <a - href={account.get('url')} - target='_blank' - className='status__display-name' - onClick={this.handleAccountClick} - > - <DisplayName account={account} /> - </a> - <div className='status__info__icons'> - {mediaIcon ? ( - <i - className={`fa fa-fw fa-${mediaIcon}`} - aria-hidden='true' - /> - ) : null} - {( - <VisibilityIcon visibility={status.get('visibility')} /> - )} - {collapsible ? ( - <IconButton - className='status__collapse-button' - animate flip - active={collapsed} - title={ - collapsed ? - intl.formatMessage(messages.uncollapse) : - intl.formatMessage(messages.collapse) - } - icon='angle-double-up' - onClick={this.handleCollapsedClick} - /> - ) : null} - </div> - - </header> - ); - } - -} diff --git a/app/javascript/glitch/components/status/index.js b/app/javascript/glitch/components/status/index.js deleted file mode 100644 index 33a9730e5..000000000 --- a/app/javascript/glitch/components/status/index.js +++ /dev/null @@ -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> - ); - - } - -} diff --git a/app/javascript/glitch/components/status/player.js b/app/javascript/glitch/components/status/player.js deleted file mode 100644 index cc65cd34e..000000000 --- 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 = ( - <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> - ); - } - -} diff --git a/app/javascript/glitch/components/status/prepend.js b/app/javascript/glitch/components/status/prepend.js deleted file mode 100644 index 8c0aed0f4..000000000 --- a/app/javascript/glitch/components/status/prepend.js +++ /dev/null @@ -1,159 +0,0 @@ -/* - -`<StatusPrepend>` -================= - -Originally a part of `<Status>`, but extracted into a separate -component for better documentation and maintainance by -@kibi@glitch.social as a part of glitch-soc/mastodon. - -*/ - - /* * * * */ - -/* - -Imports: --------- - -*/ - -// Package imports // -import React from 'react'; -import PropTypes from 'prop-types'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import { FormattedMessage } from 'react-intl'; - - /* * * * */ - -/* - -The `<StatusPrepend>` component: --------------------------------- - -The `<StatusPrepend>` component holds a status's prepend, ie the text -that says “X reblogged this,” etc. It is represented by an `<aside>` -element. - -### Props - - - __`type` (`PropTypes.string`) :__ - The type of prepend. One of `'reblogged_by'`, `'reblog'`, - `'favourite'`. - - - __`account` (`ImmutablePropTypes.map`) :__ - The account associated with the prepend. - - - __`parseClick` (`PropTypes.func.isRequired`) :__ - Our click parsing function. - -*/ - -export default class StatusPrepend extends React.PureComponent { - - static propTypes = { - type: PropTypes.string.isRequired, - account: ImmutablePropTypes.map.isRequired, - parseClick: PropTypes.func.isRequired, - notificationId: PropTypes.number, - }; - -/* - -### Implementation - -#### `handleClick()`. - -This is just a small wrapper for `parseClick()` that gets fired when -an account link is clicked. - -*/ - - handleClick = (e) => { - const { account, parseClick } = this.props; - parseClick(e, `/accounts/${+account.get('id')}`); - } - -/* - -#### `<Message>`. - -`<Message>` is a quick functional React component which renders the -actual prepend message based on our provided `type`. First we create a -`link` for the account's name, and then use `<FormattedMessage>` to -generate the message. - -*/ - - Message = () => { - const { type, account } = this.props; - let link = ( - <a - onClick={this.handleClick} - href={account.get('url')} - className='status__display-name' - > - <b - dangerouslySetInnerHTML={{ - __html : account.get('display_name_html') || account.get('username'), - }} - /> - </a> - ); - switch (type) { - case 'reblogged_by': - return ( - <FormattedMessage - id='status.reblogged_by' - defaultMessage='{name} boosted' - values={{ name : link }} - /> - ); - case 'favourite': - return ( - <FormattedMessage - id='notification.favourite' - defaultMessage='{name} favourited your status' - values={{ name : link }} - /> - ); - case 'reblog': - return ( - <FormattedMessage - id='notification.reblog' - defaultMessage='{name} boosted your status' - values={{ name : link }} - /> - ); - } - return null; - } - -/* - -#### `render()`. - -Our `render()` is incredibly simple; we just render the icon and then -the `<Message>` inside of an <aside>. - -*/ - - render () { - const { Message } = this; - const { type } = this.props; - - return !type ? null : ( - <aside className={type === 'reblogged_by' ? 'status__prepend' : 'notification__message'}> - <div className={type === 'reblogged_by' ? 'status__prepend-icon-wrapper' : 'notification__favourite-icon-wrapper'}> - <i - className={`fa fa-fw fa-${ - type === 'favourite' ? 'star star-icon' : 'retweet' - } status__prepend-icon`} - /> - </div> - <Message /> - </aside> - ); - } - -} diff --git a/app/javascript/glitch/components/status/visibility_icon.js b/app/javascript/glitch/components/status/visibility_icon.js deleted file mode 100644 index 017b69cbb..000000000 --- a/app/javascript/glitch/components/status/visibility_icon.js +++ /dev/null @@ -1,48 +0,0 @@ -// Package imports // -import React from 'react'; -import PropTypes from 'prop-types'; -import { defineMessages, injectIntl } from 'react-intl'; -import ImmutablePureComponent from 'react-immutable-pure-component'; - -const messages = defineMessages({ - public: { id: 'privacy.public.short', defaultMessage: 'Public' }, - unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' }, - private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' }, - direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' }, -}); - -@injectIntl -export default class VisibilityIcon extends ImmutablePureComponent { - - static propTypes = { - visibility: PropTypes.string, - intl: PropTypes.object.isRequired, - withLabel: PropTypes.bool, - }; - - render() { - const { withLabel, visibility, intl } = this.props; - - const visibilityClass = { - public: 'globe', - unlisted: 'unlock-alt', - private: 'lock', - direct: 'envelope', - }[visibility]; - - const label = intl.formatMessage(messages[visibility]); - - const icon = (<i - className={`status__visibility-icon fa fa-fw fa-${visibilityClass}`} - title={label} - aria-hidden='true' - />); - - if (withLabel) { - return (<span style={{ whiteSpace: 'nowrap' }}>{icon} {label}</span>); - } else { - return icon; - } - } - -} |