diff options
Diffstat (limited to 'app/javascript/glitch')
21 files changed, 3649 insertions, 0 deletions
diff --git a/app/javascript/glitch/actions/local_settings.js b/app/javascript/glitch/actions/local_settings.js new file mode 100644 index 000000000..479b5841d --- /dev/null +++ b/app/javascript/glitch/actions/local_settings.js @@ -0,0 +1,93 @@ +/* + +`actions/local_settings` +======================== + +> For more information on the contents of this file, please contact: +> +> - kibigo! [@kibi@glitch.social] + +This file provides our Redux actions related to local settings. It +consists of the following: + + - __`changesLocalSetting(key, value)` :__ + Changes the local setting with the given `key` to the given + `value`. `key` **MUST** be an array of strings, as required by + `Immutable.Map.prototype.getIn()`. + + - __`saveLocalSettings()` :__ + Saves the local settings to `localStorage` as a JSON object. We + shouldn't ever need to call this ourselves. + +*/ + + /* * * * */ + +/* + +Constants +--------- + +We provide the following constants: + + - __`LOCAL_SETTING_CHANGE` :__ + This string constant is used to dispatch a setting change to our + reducer in `reducers/local_settings`, where the setting is + actually changed. + +*/ + +export const LOCAL_SETTING_CHANGE = 'LOCAL_SETTING_CHANGE'; + + /* * * * */ + +/* + +`changeLocalSetting(key, value)` +-------------------------------- + +Changes the local setting with the given `key` to the given `value`. +`key` **MUST** be an array of strings, as required by +`Immutable.Map.prototype.getIn()`. + +To accomplish this, we just dispatch a `LOCAL_SETTING_CHANGE` to our +reducer in `reducers/local_settings`. + +*/ + +export function changeLocalSetting(key, value) { + return dispatch => { + dispatch({ + type: LOCAL_SETTING_CHANGE, + key, + value, + }); + + dispatch(saveLocalSettings()); + }; +}; + + /* * * * */ + +/* + +`saveLocalSettings()` +--------------------- + +Saves the local settings to `localStorage` as a JSON object. +`changeLocalSetting()` calls this whenever it changes a setting. We +shouldn't ever need to call this ourselves. + +> __TODO :__ +> Right now `saveLocalSettings()` doesn't keep track of which user +> is currently signed in, but it might be better to give each user +> their *own* local settings. + +*/ + +export function saveLocalSettings() { + return (_, getState) => { + const localSettings = getState().get('local_settings').toJS(); + localStorage.setItem('mastodon-settings', JSON.stringify(localSettings)); + }; +}; diff --git a/app/javascript/glitch/components/account/header.js b/app/javascript/glitch/components/account/header.js new file mode 100644 index 000000000..875ee3c54 --- /dev/null +++ b/app/javascript/glitch/components/account/header.js @@ -0,0 +1,112 @@ +// Package imports // +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import PropTypes from 'prop-types'; +import escapeTextContentForBrowser from 'escape-html'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import ImmutablePureComponent from 'react-immutable-pure-component'; + +// Mastodon imports // +import emojify from '../../../mastodon/emoji'; +import IconButton from '../../../mastodon/components/icon_button'; +import Avatar from '../../../mastodon/components/avatar'; + +// Our imports // +import { processBio } from '../../util/bio_metadata'; + +const messages = defineMessages({ + unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' }, + follow: { id: 'account.follow', defaultMessage: 'Follow' }, + requested: { id: 'account.requested', defaultMessage: 'Awaiting approval' }, +}); + +@injectIntl +export default class Header extends ImmutablePureComponent { + + static propTypes = { + account: ImmutablePropTypes.map, + me: PropTypes.number.isRequired, + onFollow: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + }; + + render () { + const { account, me, intl } = this.props; + + if (!account) { + return null; + } + + let displayName = account.get('display_name'); + let info = ''; + let actionBtn = ''; + let lockedIcon = ''; + + if (displayName.length === 0) { + displayName = account.get('username'); + } + + if (me !== account.get('id') && account.getIn(['relationship', 'followed_by'])) { + info = <span className='account--follows-info'><FormattedMessage id='account.follows_you' defaultMessage='Follows you' /></span>; + } + + if (me !== account.get('id')) { + 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'])) { + actionBtn = ( + <div className='account--action-button'> + <IconButton size={26} icon={account.getIn(['relationship', 'following']) ? 'user-times' : 'user-plus'} active={account.getIn(['relationship', 'following'])} title={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.props.onFollow} /> + </div> + ); + } + } + + if (account.get('locked')) { + lockedIcon = <i className='fa fa-lock' />; + } + + const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) }; + const { text, metadata } = processBio(account.get('note')); + + 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 src={account.get('avatar')} staticSrc={account.get('avatar_static')} size={90} /></span> + <span className='account__header__display-name' dangerouslySetInnerHTML={displayNameHTML} /> + </a> + <span className='account__header__username'>@{account.get('acct')} {lockedIcon}</span> + <div className='account__header__content' dangerouslySetInnerHTML={{ __html: emojify(text) }} /> + + {info} + {actionBtn} + </div> + </div> + + {metadata.length && ( + <table className='account__metadata'> + {(() => { + 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; + })()} + </table> + ) || null} + </div> + ); + } + +} diff --git a/app/javascript/glitch/components/compose/advanced_options/container.js b/app/javascript/glitch/components/compose/advanced_options/container.js new file mode 100644 index 000000000..10804454a --- /dev/null +++ b/app/javascript/glitch/components/compose/advanced_options/container.js @@ -0,0 +1,22 @@ +// Package imports // +import { connect } from 'react-redux'; + +// Mastodon imports // +import { toggleComposeAdvancedOption } from '../../../../mastodon/actions/compose'; + +// Our imports // +import ComposeAdvancedOptions from '.'; + +const mapStateToProps = state => ({ + values: state.getIn(['compose', 'advanced_options']), +}); + +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 new file mode 100644 index 000000000..dabf66095 --- /dev/null +++ b/app/javascript/glitch/components/compose/advanced_options/index.js @@ -0,0 +1,137 @@ +// Package imports // +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import Toggle from 'react-toggle'; +import { injectIntl, defineMessages } from 'react-intl'; + +// Mastodon imports // +import IconButton from '../../../../mastodon/components/icon_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' }, +}); + +const iconStyle = { + height: null, + lineHeight: '27px', +}; + +class AdvancedOptionToggle 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 = () => { + this.props.onChange(this.props.name); + } + + 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> + ); + } + +} + +@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, + }; + + onToggleDropdown = () => { + this.setState({ open: !this.state.open }); + }; + + 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); + } + + state = { + open: false, + }; + + handleClick = (e) => { + const option = e.currentTarget.getAttribute('data-index'); + e.preventDefault(); + this.props.onChange(option); + } + + setRef = (c) => { + this.node = c; + } + + render () { + const { open } = this.state; + const { intl, values } = this.props; + + const options = [ + { icon: 'wifi', shortText: messages.local_only_short, longText: messages.local_only_long, key: 'do_not_federate' }, + ]; + + const anyEnabled = values.some((enabled) => enabled); + const optionElems = options.map((option) => { + return ( + <AdvancedOptionToggle + onChange={this.props.onChange} + active={values.get(option.key)} + key={option.key} + name={option.key} + shortText={intl.formatMessage(option.shortText)} + longText={intl.formatMessage(option.longText)} + /> + ); + }); + + return (<div ref={this.setRef} className={`advanced-options-dropdown ${open ? 'open' : ''} ${anyEnabled ? 'active' : ''} `}> + <div className='advanced-options-dropdown__value'> + <IconButton + className='advanced-options-dropdown__value' + title={intl.formatMessage(messages.advanced_options_icon_title)} + icon='ellipsis-h' active={open || anyEnabled} + size={18} + style={iconStyle} + onClick={this.onToggleDropdown} + /> + </div> + <div className='advanced-options-dropdown__dropdown'> + {optionElems} + </div> + </div>); + } + +} diff --git a/app/javascript/glitch/components/notification/container.js b/app/javascript/glitch/components/notification/container.js new file mode 100644 index 000000000..60303537d --- /dev/null +++ b/app/javascript/glitch/components/notification/container.js @@ -0,0 +1,28 @@ +// Package imports // +import { connect } from 'react-redux'; + +// Mastodon imports // +import { makeGetNotification } from '../../../mastodon/selectors'; + +// Our imports // +import Notification from '.'; +import { deleteNotification } from '../../../mastodon/actions/notifications'; + +const makeMapStateToProps = () => { + const getNotification = makeGetNotification(); + + const mapStateToProps = (state, props) => ({ + notification: getNotification(state, props.notification, props.accountId), + settings: state.get('local_settings'), + }); + + return mapStateToProps; +}; + +const mapDispatchToProps = (dispatch) => ({ + onDeleteNotification (id) { + dispatch(deleteNotification(id)); + }, +}); + +export default connect(makeMapStateToProps, mapDispatchToProps)(Notification); diff --git a/app/javascript/glitch/components/notification/follow_notification.js b/app/javascript/glitch/components/notification/follow_notification.js new file mode 100644 index 000000000..7cabd91f6 --- /dev/null +++ b/app/javascript/glitch/components/notification/follow_notification.js @@ -0,0 +1,78 @@ +// Package imports // +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import PropTypes from 'prop-types'; +import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; +import escapeTextContentForBrowser from 'escape-html'; +import ImmutablePureComponent from 'react-immutable-pure-component'; + +// Mastodon imports // +import emojify from '../../../mastodon/emoji'; +import Permalink from '../../../mastodon/components/permalink'; +import AccountContainer from '../../../mastodon/containers/account_container'; + +const messages = defineMessages({ + deleteNotification: { id: 'status.dismiss_notification', defaultMessage: 'Dismiss notification' }, +}); + + +@injectIntl +export default class FollowNotification extends ImmutablePureComponent { + + static contextTypes = { + router: PropTypes.object, + }; + + static propTypes = { + notificationId: PropTypes.number.isRequired, + onDeleteNotification: PropTypes.func.isRequired, + account: ImmutablePropTypes.map.isRequired, + 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 = [ + 'account', + ] + + handleNotificationDeleteClick = () => { + this.props.onDeleteNotification(this.props.notificationId); + } + + render () { + const { account, intl } = this.props; + + const dismissTitle = intl.formatMessage(messages.deleteNotification); + const dismiss = ( + <button + aria-label={dismissTitle} + title={dismissTitle} + onClick={this.handleNotificationDeleteClick} + className='status__prepend-dismiss-button' + > + <i className='fa fa-eraser' /> + </button> + ); + + const displayName = account.get('display_name').length > 0 ? account.get('display_name') : account.get('username'); + const displayNameHTML = { __html: emojify(escapeTextContentForBrowser(displayName)) }; + const link = <Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHTML} />; + 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 }} /> + + {dismiss} + </div> + + <AccountContainer id={account.get('id')} withNote={false} /> + </div> + ); + } + +} diff --git a/app/javascript/glitch/components/notification/index.js b/app/javascript/glitch/components/notification/index.js new file mode 100644 index 000000000..0cdc03cbe --- /dev/null +++ b/app/javascript/glitch/components/notification/index.js @@ -0,0 +1,84 @@ +// Package imports // +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import PropTypes from 'prop-types'; + +// Mastodon imports // + +// Our imports // +import StatusContainer from '../status/container'; +import FollowNotification from './follow_notification'; + +export default class Notification extends ImmutablePureComponent { + + static propTypes = { + notification: ImmutablePropTypes.map.isRequired, + settings: ImmutablePropTypes.map.isRequired, + onDeleteNotification: PropTypes.func.isRequired, + }; + + renderFollow (notification) { + return ( + <FollowNotification + notificationId={notification.get('id')} + account={notification.get('account')} + onDeleteNotification={this.props.onDeleteNotification} + /> + ); + } + + renderMention (notification) { + return ( + <StatusContainer + id={notification.get('status')} + notificationId={notification.get('id')} + withDismiss + /> + ); + } + + renderFavourite (notification) { + return ( + <StatusContainer + id={notification.get('status')} + account={notification.get('account')} + prepend='favourite' + muted + notificationId={notification.get('id')} + withDismiss + /> + ); + } + + renderReblog (notification) { + return ( + <StatusContainer + id={notification.get('status')} + account={notification.get('account')} + prepend='reblog' + muted + notificationId={notification.get('id')} + 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/settings/container.js b/app/javascript/glitch/components/settings/container.js new file mode 100644 index 000000000..6034935eb --- /dev/null +++ b/app/javascript/glitch/components/settings/container.js @@ -0,0 +1,27 @@ +// Package imports // +import { connect } from 'react-redux'; + +// Mastodon imports // +import { closeModal } from '../../../mastodon/actions/modal'; + +// Our imports // +import { changeLocalSetting } from '../../actions/local_settings'; +import Settings from '../../components/settings'; + +const mapStateToProps = state => ({ + settings: state.get('local_settings'), +}); + +const mapDispatchToProps = dispatch => ({ + toggleSetting (setting, e) { + dispatch(changeLocalSetting(setting, e.target.checked)); + }, + changeSetting (setting, e) { + dispatch(changeLocalSetting(setting, e.target.value)); + }, + onClose () { + dispatch(closeModal()); + }, +}); + +export default connect(mapStateToProps, mapDispatchToProps)(Settings); diff --git a/app/javascript/glitch/components/settings/index.js b/app/javascript/glitch/components/settings/index.js new file mode 100644 index 000000000..afe7e9a87 --- /dev/null +++ b/app/javascript/glitch/components/settings/index.js @@ -0,0 +1,221 @@ +// Package imports // +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { injectIntl, defineMessages, FormattedMessage } from 'react-intl'; + +// Our imports // +import SettingsItem from './item'; + +const messages = defineMessages({ + layout_auto: { id: 'layout.auto', defaultMessage: 'Auto' }, + layout_desktop: { id: 'layout.desktop', defaultMessage: 'Desktop' }, + layout_mobile: { id: 'layout.single', defaultMessage: 'Mobile' }, +}); + +@injectIntl +export default class Settings extends React.PureComponent { + + static propTypes = { + settings: ImmutablePropTypes.map.isRequired, + toggleSetting: PropTypes.func.isRequired, + changeSetting: PropTypes.func.isRequired, + onClose: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + }; + + state = { + currentIndex: 0, + }; + + General = () => { + const { intl } = this.props; + return ( + <div> + <h1><FormattedMessage id='settings.general' defaultMessage='General' /></h1> + <SettingsItem + settings={this.props.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={this.props.changeSetting} + > + <FormattedMessage id='settings.layout' defaultMessage='Layout:' /> + </SettingsItem> + + <SettingsItem + settings={this.props.settings} + item={['stretch']} + id='mastodon-settings--stretch' + onChange={this.props.toggleSetting} + > + <FormattedMessage id='settings.wide_view' defaultMessage='Wide view (Desktop mode only)' /> + </SettingsItem> + + </div> + ); + } + + CollapsedStatuses = () => { + return ( + <div> + <h1><FormattedMessage id='settings.collapsed_statuses' defaultMessage='Collapsed toots' /></h1> + <SettingsItem + settings={this.props.settings} + item={['collapsed', 'enabled']} + id='mastodon-settings--collapsed-enabled' + onChange={this.props.toggleSetting} + > + <FormattedMessage id='settings.enable_collapsed' defaultMessage='Enable collapsed toots' /> + </SettingsItem> + <section> + <h2><FormattedMessage id='settings.auto_collapse' defaultMessage='Automatic collapsing' /></h2> + <SettingsItem + settings={this.props.settings} + item={['collapsed', 'auto', 'all']} + id='mastodon-settings--collapsed-auto-all' + onChange={this.props.toggleSetting} + dependsOn={[['collapsed', 'enabled']]} + > + <FormattedMessage id='settings.auto_collapse_all' defaultMessage='Everything' /> + </SettingsItem> + <SettingsItem + settings={this.props.settings} + item={['collapsed', 'auto', 'notifications']} + id='mastodon-settings--collapsed-auto-notifications' + onChange={this.props.toggleSetting} + dependsOn={[['collapsed', 'enabled']]} + dependsOnNot={[['collapsed', 'auto', 'all']]} + > + <FormattedMessage id='settings.auto_collapse_notifications' defaultMessage='Notifications' /> + </SettingsItem> + <SettingsItem + settings={this.props.settings} + item={['collapsed', 'auto', 'lengthy']} + id='mastodon-settings--collapsed-auto-lengthy' + onChange={this.props.toggleSetting} + dependsOn={[['collapsed', 'enabled']]} + dependsOnNot={[['collapsed', 'auto', 'all']]} + > + <FormattedMessage id='settings.auto_collapse_lengthy' defaultMessage='Lengthy toots' /> + </SettingsItem> + <SettingsItem + settings={this.props.settings} + item={['collapsed', 'auto', 'replies']} + id='mastodon-settings--collapsed-auto-replies' + onChange={this.props.toggleSetting} + dependsOn={[['collapsed', 'enabled']]} + dependsOnNot={[['collapsed', 'auto', 'all']]} + > + <FormattedMessage id='settings.auto_collapse_replies' defaultMessage='Replies' /> + </SettingsItem> + <SettingsItem + settings={this.props.settings} + item={['collapsed', 'auto', 'media']} + id='mastodon-settings--collapsed-auto-media' + onChange={this.props.toggleSetting} + dependsOn={[['collapsed', 'enabled']]} + dependsOnNot={[['collapsed', 'auto', 'all']]} + > + <FormattedMessage id='settings.auto_collapse_media' defaultMessage='Toots with media' /> + </SettingsItem> + </section> + <section> + <h2><FormattedMessage id='settings.image_backgrounds' defaultMessage='Image backgrounds' /></h2> + <SettingsItem + settings={this.props.settings} + item={['collapsed', 'backgrounds', 'user_backgrounds']} + id='mastodon-settings--collapsed-user-backgrouns' + onChange={this.props.toggleSetting} + dependsOn={[['collapsed', 'enabled']]} + > + <FormattedMessage id='settings.image_backgrounds_users' defaultMessage='Give collapsed toots an image background' /> + </SettingsItem> + <SettingsItem + settings={this.props.settings} + item={['collapsed', 'backgrounds', 'preview_images']} + id='mastodon-settings--collapsed-preview-images' + onChange={this.props.toggleSetting} + dependsOn={[['collapsed', 'enabled']]} + > + <FormattedMessage id='settings.image_backgrounds_media' defaultMessage='Preview collapsed toot media' /> + </SettingsItem> + </section> + </div> + ); + } + + Media = () => { + return ( + <div> + <h1><FormattedMessage id='settings.media' defaultMessage='Media' /></h1> + <SettingsItem + settings={this.props.settings} + item={['media', 'letterbox']} + id='mastodon-settings--media-letterbox' + onChange={this.props.toggleSetting} + > + <FormattedMessage id='settings.media_letterbox' defaultMessage='Letterbox media' /> + </SettingsItem> + <SettingsItem + settings={this.props.settings} + item={['media', 'fullwidth']} + id='mastodon-settings--media-fullwidth' + onChange={this.props.toggleSetting} + > + <FormattedMessage id='settings.media_fullwidth' defaultMessage='Full-width media previews' /> + </SettingsItem> + </div> + ); + } + + navigateTo = (e) => + this.setState({ currentIndex: +e.currentTarget.getAttribute('data-mastodon-navigation_index') }); + + render () { + + const { General, CollapsedStatuses, Media, navigateTo } = this; + const { onClose } = this.props; + const { currentIndex } = this.state; + + return ( + <div className='modal-root__modal settings-modal'> + + <nav className='settings-modal__navigation'> + <a onClick={navigateTo} role='button' data-mastodon-navigation_index='0' tabIndex='0' className={`settings-modal__navigation-item${currentIndex === 0 ? ' active' : ''}`}> + <FormattedMessage id='settings.general' defaultMessage='General' /> + </a> + <a onClick={navigateTo} role='button' data-mastodon-navigation_index='1' tabIndex='0' className={`settings-modal__navigation-item${currentIndex === 1 ? ' active' : ''}`}> + <FormattedMessage id='settings.collapsed_statuses' defaultMessage='Collapsed toots' /> + </a> + <a onClick={navigateTo} role='button' data-mastodon-navigation_index='2' tabIndex='0' className={`settings-modal__navigation-item${currentIndex === 2 ? ' active' : ''}`}> + <FormattedMessage id='settings.media' defaultMessage='Media' /> + </a> + <a href='/settings/preferences' className='settings-modal__navigation-item'> + <i className='fa fa-fw fa-cog' /> <FormattedMessage id='settings.preferences' defaultMessage='User preferences' /> + </a> + <a onClick={onClose} role='button' tabIndex='0' className='settings-modal__navigation-close'> + <FormattedMessage id='settings.close' defaultMessage='Close' /> + </a> + + </nav> + + <div className='settings-modal__content'> + { + [ + <General />, + <CollapsedStatuses />, + <Media />, + ][currentIndex] || <General /> + } + </div> + + </div> + ); + } + +} diff --git a/app/javascript/glitch/components/settings/item.js b/app/javascript/glitch/components/settings/item.js new file mode 100644 index 000000000..4c67cc2ac --- /dev/null +++ b/app/javascript/glitch/components/settings/item.js @@ -0,0 +1,79 @@ +// Package imports // +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; + +export default class SettingsItem extends React.PureComponent { + + static propTypes = { + settings: ImmutablePropTypes.map.isRequired, + item: PropTypes.array.isRequired, + id: PropTypes.string.isRequired, + options: PropTypes.arrayOf(PropTypes.shape({ + value: PropTypes.string.isRequired, + message: PropTypes.object.isRequired, + })), + dependsOn: PropTypes.array, + dependsOnNot: PropTypes.array, + children: PropTypes.element.isRequired, + onChange: PropTypes.func.isRequired, + }; + + handleChange = (e) => { + const { item, onChange } = this.props; + onChange(item, e); + } + + render () { + 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} selected={currentValue === opt.value} value={opt.value} > + {opt.message} + </option> + )); + return ( + <label htmlFor={id}> + <p>{children}</p> + <p> + <select + id={id} + disabled={!enabled} + onBlur={this.handleChange} + > + {optionElems} + </select> + </p> + </label> + ); + } else { + return ( + <label htmlFor={id}> + <input + id={id} + type='checkbox' + checked={settings.getIn(item)} + onChange={this.handleChange} + disabled={!enabled} + /> + {children} + </label> + ); + } + } + +} diff --git a/app/javascript/glitch/components/status/action_bar.js b/app/javascript/glitch/components/status/action_bar.js new file mode 100644 index 000000000..6aa088c04 --- /dev/null +++ b/app/javascript/glitch/components/status/action_bar.js @@ -0,0 +1,167 @@ +// 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 DropdownMenu from '../../../mastodon/components/dropdown_menu'; + +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' }, + 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' }, + deleteNotification: { id: 'status.dismiss_notification', defaultMessage: 'Dismiss notification' }, +}); + +@injectIntl +export default class StatusActionBar extends ImmutablePureComponent { + + static contextTypes = { + router: PropTypes.object, + }; + + static propTypes = { + status: ImmutablePropTypes.map.isRequired, + notificationId: PropTypes.number, + onReply: PropTypes.func, + onFavourite: PropTypes.func, + onReblog: PropTypes.func, + onDelete: PropTypes.func, + onMention: PropTypes.func, + onMute: PropTypes.func, + onBlock: PropTypes.func, + onReport: PropTypes.func, + onMuteConversation: PropTypes.func, + onDeleteNotification: PropTypes.func, + me: PropTypes.number.isRequired, + 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', + 'me', + 'withDismiss', + ] + + handleReplyClick = () => { + this.props.onReply(this.props.status, this.context.router.history); + } + + handleFavouriteClick = () => { + this.props.onFavourite(this.props.status); + } + + handleReblogClick = (e) => { + this.props.onReblog(this.props.status, e); + } + + handleDeleteClick = () => { + this.props.onDelete(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')}`); + } + + handleReport = () => { + this.props.onReport(this.props.status); + } + + handleConversationMuteClick = () => { + this.props.onMuteConversation(this.props.status); + } + + handleNotificationDeleteClick = () => { + this.props.onDeleteNotification(this.props.notificationId); + } + + render () { + const { status, me, intl, withDismiss } = this.props; + const reblogDisabled = status.get('visibility') === 'private' || status.get('visibility') === 'direct'; + const mutingConversation = status.get('muted'); + + let menu = []; + let reblogIcon = 'retweet'; + let replyIcon; + let replyTitle; + + menu.push({ text: intl.formatMessage(messages.open), action: this.handleOpen }); + menu.push(null); + + if (withDismiss) { + menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick }); + menu.push({ text: intl.formatMessage(messages.deleteNotification), action: this.handleNotificationDeleteClick }); + menu.push(null); + } + + if (status.getIn(['account', 'id']) === me) { + 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('visibility') === 'direct') { + reblogIcon = 'envelope'; + } else if (status.get('visibility') === 'private') { + reblogIcon = 'lock'; + } + */ + + 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); + } + + return ( + <div className='status__action-bar'> + <IconButton className='status__action-bar-button' title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} /> + <IconButton className='status__action-bar-button' disabled={reblogDisabled} active={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} /> + <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /> + + <div className='status__action-bar-dropdown'> + <DropdownMenu 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 new file mode 100644 index 000000000..c45b2e0ec --- /dev/null +++ b/app/javascript/glitch/components/status/container.js @@ -0,0 +1,256 @@ +/* + +`<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, +} from '../../../mastodon/actions/interactions'; +import { + blockAccount, + muteAccount, +} from '../../../mastodon/actions/accounts'; +import { + muteStatus, + unmuteStatus, + deleteStatus, +} from '../../../mastodon/actions/statuses'; +import { initReport } from '../../../mastodon/actions/reports'; +import { openModal } from '../../../mastodon/actions/modal'; +import { deleteNotification } from '../../../mastodon/actions/notifications'; + +// 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', + }, + muteConfirm : { + id : 'confirmations.mute.confirm', + defaultMessage : 'Mute', + }, +}); + + /* * * * */ + +/* + +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); + 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, + me : state.getIn(['meta', 'me']), + settings : state.get('local_settings'), + prepend : prepend || ownProps.prepend, + reblogModal : state.getIn(['meta', 'boost_modal']), + deleteModal : state.getIn(['meta', 'delete_modal']), + autoPlayGif : state.getIn(['meta', 'auto_play_gif']), + }; + }; + + 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)); + } + }, + + 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(openModal('CONFIRM', { + message: <FormattedMessage id='confirmations.mute.message' defaultMessage='Are you sure you want to mute {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />, + confirm: intl.formatMessage(messages.muteConfirm), + onConfirm: () => dispatch(muteAccount(account.get('id'))), + })); + }, + + onMuteConversation (status) { + if (status.get('muted')) { + dispatch(unmuteStatus(status.get('id'))); + } else { + dispatch(muteStatus(status.get('id'))); + } + }, + + onDeleteNotification (id) { + dispatch(deleteNotification(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 new file mode 100644 index 000000000..76f5b765a --- /dev/null +++ b/app/javascript/glitch/components/status/content.js @@ -0,0 +1,239 @@ +// Package imports // +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import escapeTextContentForBrowser from 'escape-html'; +import PropTypes from 'prop-types'; +import { FormattedMessage } from 'react-intl'; + +// Mastodon imports // +import emojify from '../../../mastodon/emoji'; +import { isRtl } from '../../../mastodon/rtl'; +import Permalink from '../../../mastodon/components/permalink'; + +export default class StatusContent extends React.PureComponent { + + static contextTypes = { + router: PropTypes.object, + }; + + 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, + }; + + state = { + hidden: true, + }; + + componentDidMount () { + const node = this.node; + const links = node.querySelectorAll('a'); + + for (var 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('target', '_blank'); + link.setAttribute('rel', 'noopener'); + link.setAttribute('title', link.href); + } + } + } + + 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 } = this.props; + + const hidden = ( + this.props.setExpansion ? + !this.props.expanded : + this.state.hidden + ); + + const content = { __html: emojify(status.get('content')) }; + const spoilerContent = { + __html: emojify(escapeTextContentForBrowser( + status.get('spoiler_text', '') + )), + }; + const directionStyle = { direction: 'ltr' }; + + 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='status__content status__content--with-action' ref={this.setRef}> + <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 + style={directionStyle} + onMouseDown={this.handleMouseDown} + onMouseUp={this.handleMouseUp} + dangerouslySetInnerHTML={content} + /> + {media} + </div> + + </div> + ); + } else if (this.props.parseClick) { + return ( + <div + ref={this.setRef} + className='status__content status__content--with-action' + style={directionStyle} + > + <div + onMouseDown={this.handleMouseDown} + onMouseUp={this.handleMouseUp} + dangerouslySetInnerHTML={content} + /> + {media} + </div> + ); + } else { + return ( + <div + ref={this.setRef} + className='status__content' + style={directionStyle} + > + <div dangerouslySetInnerHTML={content} /> + {media} + </div> + ); + } + } + +} diff --git a/app/javascript/glitch/components/status/gallery/index.js b/app/javascript/glitch/components/status/gallery/index.js new file mode 100644 index 000000000..ae03dc08d --- /dev/null +++ b/app/javascript/glitch/components/status/gallery/index.js @@ -0,0 +1,79 @@ +// 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 new file mode 100644 index 000000000..d646825a3 --- /dev/null +++ b/app/javascript/glitch/components/status/gallery/item.js @@ -0,0 +1,132 @@ +// 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, + }; + + 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='' /> + </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} + 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 new file mode 100644 index 000000000..78aef1ed5 --- /dev/null +++ b/app/javascript/glitch/components/status/header.js @@ -0,0 +1,247 @@ +/* + +`<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'; + + /* * * * */ + +/* + +Inital setup: +------------- + +The `messages` constant is used to define any messages that we need +from inside props. In our case, these are the `collapse` and +`uncollapse` messages used with our collapse/uncollapse buttons. + +*/ + +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 `<StatusHeader>` component: +------------------------------- + +The `<StatusHeader>` component wraps together the header information +(avatar, display name) and upper buttons and icons (collapsing, media +icons) into a single `<header>` element. + +### Props + + - __`account`, `friend` (`ImmutablePropTypes.map`) :__ + These give the accounts associated with the status. `account` is + the author of the post; `friend` will have their avatar appear + in the overlay if provided. + + - __`mediaIcon` (`PropTypes.string`) :__ + If a mediaIcon should be placed in the header, this string + specifies it. + + - __`collapsible`, `collapsed` (`PropTypes.bool`) :__ + These props tell whether a post can be, and is, collapsed. + + - __`parseClick` (`PropTypes.func`) :__ + This function will be called when the user clicks inside the header + information. + + - __`setExpansion` (`PropTypes.func`) :__ + This function is used to set the expansion state of the post. + + - __`intl` (`PropTypes.object`) :__ + This is our internationalization object, provided by + `injectIntl()`. + +*/ + +@injectIntl +export default class StatusHeader extends React.PureComponent { + + static propTypes = { + account: 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, + visibility: PropTypes.string, + }; + +/* + +### Implementation + +#### `handleCollapsedClick()`. + +`handleCollapsedClick()` is just a simple callback for our collapsing +button. It calls `setExpansion` to set the collapsed state of the +status. + +*/ + + handleCollapsedClick = (e) => { + const { collapsed, setExpansion } = this.props; + if (e.button === 0) { + setExpansion(collapsed ? null : false); + e.preventDefault(); + } + } + +/* + +#### `handleAccountClick()`. + +`handleAccountClick()` handles any clicks on the header info. It calls +`parseClick()` with our `account` as the anticipatory `destination`. + +*/ + + handleAccountClick = (e) => { + const { account, parseClick } = this.props; + parseClick(e, `/accounts/${+account.get('id')}`); + } + +/* + +#### `render()`. + +`render()` actually puts our element on the screen. `<StatusHeader>` +has a very straightforward rendering process. + +*/ + + render () { + const { + account, + friend, + mediaIcon, + collapsible, + collapsed, + intl, + visibility, + } = this.props; + + const visibilityClass = { + public: 'globe', + unlisted: 'unlock-alt', + private: 'lock', + direct: 'envelope', + }[visibility]; + + return ( + <header className='status__info'> + { + +/* + +We have to include the status icons before the header content because +it is rendered as a float. + +*/ + + } + <div className='status__info__icons'> + {mediaIcon ? ( + <i + className={`fa fa-fw fa-${mediaIcon}`} + aria-hidden='true' + /> + ) : null} + {( + <i + className={`status__visibility-icon fa fa-fw fa-${visibilityClass}`} + title={intl.formatMessage(messages[visibility])} + aria-hidden='true' + /> + )} + {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> + { + +/* + +This begins our header content. It is all wrapped inside of a link +which gets handled by `handleAccountClick`. We use an `<AvatarOverlay>` +if we have a `friend` and a normal `<Avatar>` if we don't. + +*/ + + } + <a + href={account.get('url')} + className='status__display-name' + onClick={this.handleAccountClick} + > + <div className='status__avatar'>{ + friend ? ( + <AvatarOverlay + staticSrc={account.get('avatar_static')} + overlaySrc={friend.get('avatar_static')} + /> + ) : ( + <Avatar + src={account.get('avatar')} + staticSrc={account.get('avatar_static')} + size={48} + /> + ) + }</div> + <DisplayName account={account} /> + </a> + + </header> + ); + } + +} diff --git a/app/javascript/glitch/components/status/index.js b/app/javascript/glitch/components/status/index.js new file mode 100644 index 000000000..314e8b51c --- /dev/null +++ b/app/javascript/glitch/components/status/index.js @@ -0,0 +1,725 @@ +/* + +`<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'; + +// 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'; + + /* * * * */ + +/* + +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. + + - __`me` (`PropTypes.number`) :__ + This is the id of the currently-signed-in user. + + - __`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. + + - __`autoPlayGif` (`PropTypes.bool`) :__ + This tells the frontend whether or not to autoplay gifs! + + - __`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.number, + status : ImmutablePropTypes.map, + account : ImmutablePropTypes.map, + settings : ImmutablePropTypes.map, + me : PropTypes.number, + onFavourite : PropTypes.func, + onReblog : PropTypes.func, + onModalReblog : PropTypes.func, + onDelete : PropTypes.func, + onMention : PropTypes.func, + onMute : PropTypes.func, + onMuteConversation : PropTypes.func, + onBlock : PropTypes.func, + onReport : PropTypes.func, + onOpenMedia : PropTypes.func, + onOpenVideo : PropTypes.func, + onDeleteNotification : PropTypes.func, + reblogModal : PropTypes.bool, + deleteModal : PropTypes.bool, + autoPlayGif : PropTypes.bool, + muted : PropTypes.bool, + collapse : PropTypes.bool, + prepend : PropTypes.string, + withDismiss : PropTypes.bool, + notificationId : PropTypes.number, + intersectionObserverWrapper : PropTypes.object, + }; + + state = { + isExpanded : null, + isIntersecting : true, + isHidden : 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', + 'me', + 'boostModal', + 'autoPlayGif', + 'muted', + 'collapse', + ] + + updateOnStates = [ + 'isExpanded', + ] + +/* + +#### `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, + } = 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('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 (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, handleRef } = this; + const { + status, + account, + settings, + collapsed, + muted, + prepend, + intersectionObserverWrapper, + onOpenVideo, + onOpenMedia, + autoPlayGif, + ...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']); + } + + +/* + +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' : '' + }` + } + style={{ + backgroundImage: ( + isExpanded === false && background ? + `url(${background})` : + 'none' + ), + }} + ref={handleRef} + > + {prepend && account ? ( + <StatusPrepend + type={prepend} + account={account} + parseClick={parseClick} + notificationId={this.props.notificationId} + onDeleteNotification={this.props.onDeleteNotification} + /> + ) : null} + <StatusHeader + account={status.get('account')} + friend={account} + mediaIcon={mediaIcon} + visibility={status.get('visibility')} + collapsible={settings.getIn(['collapsed', 'enabled'])} + collapsed={isExpanded === false} + parseClick={parseClick} + setExpansion={setExpansion} + /> + <StatusContent + status={status} + media={media} + mediaIcon={mediaIcon} + expanded={isExpanded} + setExpansion={this.setExpansion} + onHeightUpdate={this.saveHeight} + parseClick={parseClick} + /> + {isExpanded !== false ? ( + <StatusActionBar + {...other} + status={status} + account={status.get('account')} + /> + ) : null} + </article> + ); + + } + +} diff --git a/app/javascript/glitch/components/status/player.js b/app/javascript/glitch/components/status/player.js new file mode 100644 index 000000000..37e4b8995 --- /dev/null +++ b/app/javascript/glitch/components/status/player.js @@ -0,0 +1,199 @@ +// 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 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 = ( + <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 new file mode 100644 index 000000000..d9b04b5ec --- /dev/null +++ b/app/javascript/glitch/components/status/prepend.js @@ -0,0 +1,191 @@ +/* + +`<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 escapeTextContentForBrowser from 'escape-html'; +import { defineMessages, injectIntl } from 'react-intl'; +import { FormattedMessage } from 'react-intl'; + +// Mastodon imports // +import emojify from '../../../mastodon/emoji'; + + +const messages = defineMessages({ + deleteNotification: { id: 'status.dismiss_notification', defaultMessage: 'Dismiss notification' }, +}); + + /* * * * */ + +/* + +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. + +*/ + +@injectIntl +export default class StatusPrepend extends React.PureComponent { + + static propTypes = { + type: PropTypes.string.isRequired, + account: ImmutablePropTypes.map.isRequired, + parseClick: PropTypes.func.isRequired, + notificationId: PropTypes.number, + onDeleteNotification: PropTypes.func, + intl: PropTypes.object.isRequired, + }; + +/* + +### 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')}`); + } + + handleNotificationDeleteClick = () => { + this.props.onDeleteNotification(this.props.notificationId); + } + +/* + +#### `<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 : emojify(escapeTextContentForBrowser( + account.get('display_name') || 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, intl } = this.props; + + const dismissTitle = intl.formatMessage(messages.deleteNotification); + const dismiss = this.props.notificationId ? ( + <button + aria-label={dismissTitle} + title={dismissTitle} + onClick={this.handleNotificationDeleteClick} + className='status__prepend-dismiss-button' + > + <i className='fa fa-eraser' /> + </button> + ) : null; + + 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 /> + {dismiss} + </aside> + ); + } + +} diff --git a/app/javascript/glitch/reducers/local_settings.js b/app/javascript/glitch/reducers/local_settings.js new file mode 100644 index 000000000..79ff96307 --- /dev/null +++ b/app/javascript/glitch/reducers/local_settings.js @@ -0,0 +1,123 @@ +/* + +`reducers/local_settings` +======================== + +> For more information on the contents of this file, please contact: +> +> - kibigo! [@kibi@glitch.social] + +This file provides our Redux reducers related to local settings. The +associated actions are: + + - __`STORE_HYDRATE` :__ + Used to hydrate the store with its initial values. + + - __`LOCAL_SETTING_CHANGE` :__ + Used to change the value of a local setting in the store. + +*/ + + /* * * * */ + +/* + +Imports +------- + +*/ + +// Package imports // +import Immutable from 'immutable'; + +// Mastodon imports // +import { STORE_HYDRATE } from '../../mastodon/actions/store'; + +// Our imports // +import { LOCAL_SETTING_CHANGE } from '../actions/local_settings'; + + /* * * * */ + +/* + +initialState +------------ + +You can see the default values for all of our local settings here. +These are only used if no previously-saved values exist. + +*/ + +const initialState = Immutable.fromJS({ + layout : 'auto', + stretch : true, + collapsed : { + enabled : true, + auto : { + all : false, + notifications : true, + lengthy : true, + replies : false, + media : false, + }, + backgrounds : { + user_backgrounds : false, + preview_images : false, + }, + }, + media : { + letterbox : true, + fullwidth : true, + }, +}); + + /* * * * */ + +/* + +Helper functions +---------------- + +### `hydrate(state, localSettings)` + +`hydrate()` is used to hydrate the `local_settings` part of our store +with its initial values. The `state` will probably just be the +`initialState`, and the `localSettings` should be whatever we pulled +from `localStorage`. + +*/ + +const hydrate = (state, localSettings) => state.mergeDeep(localSettings); + + /* * * * */ + +/* + +`localSettings(state = initialState, action)` +--------------------------------------------- + +This function holds our actual reducer. + +If our action is `STORE_HYDRATE`, then we call `hydrate()` with the +`local_settings` property of the provided `action.state`. + +If our action is `LOCAL_SETTING_CHANGE`, then we set `action.key` in +our state to the provided `action.value`. Note that `action.key` MUST +be an array, since we use `setIn()`. + +> __Note :__ +> We call this function `localSettings`, but its associated object +> in the store is `local_settings`. + +*/ + +export default function localSettings(state = initialState, action) { + switch(action.type) { + case STORE_HYDRATE: + return hydrate(state, action.state.get('local_settings')); + case LOCAL_SETTING_CHANGE: + return state.setIn(action.key, action.value); + default: + return state; + } +}; diff --git a/app/javascript/glitch/util/bio_metadata.js b/app/javascript/glitch/util/bio_metadata.js new file mode 100644 index 000000000..c5e87f356 --- /dev/null +++ b/app/javascript/glitch/util/bio_metadata.js @@ -0,0 +1,410 @@ +/* + +`util/bio_metadata` +======================== + +> For more information on the contents of this file, please contact: +> +> - kibigo! [@kibi@glitch.social] + +This file provides two functions for dealing with bio metadata. The +functions are: + + - __`processBio(content)` :__ + Processes `content` to extract any frontmatter. The returned + object has two properties: `text`, which contains the text of + `content` sans-frontmatter, and `metadata`, which is an array + of key-value pairs (in two-element array format). If no + frontmatter was provided in `content`, then `metadata` will be + an empty array. + + - __`createBio(note, data)` :__ + Reverses the process in `processBio()`; takes a `note` and an + array of two-element arrays (which should give keys and values) + and outputs a string containing a well-formed bio with + frontmatter. + +*/ + + /* * * * */ + +/*********************************************************************\ + + To my lovely code maintainers, + + The syntax recognized by the Mastodon frontend for its bio metadata + feature is a subset of that provided by the YAML 1.2 specification. + In particular, Mastodon recognizes metadata which is provided as an + implicit YAML map, where each key-value pair takes up only a single + line (no multi-line values are permitted). To simplify the level of + processing required, Mastodon metadata frontmatter has been limited + to only allow those characters in the `c-printable` set, as defined + by the YAML 1.2 specification, instead of permitting those from the + `nb-json` characters inside double-quoted strings like YAML proper. + ¶ It is important to note that Mastodon only borrows the *syntax* + of YAML, not its semantics. This is to say, Mastodon won't make any + attempt to interpret the data it receives. `true` will not become a + boolean; `56` will not be interpreted as a number. Rather, each key + and every value will be read as a string, and as a string they will + remain. The order of the pairs is unchanged, and any duplicate keys + are preserved. However, YAML escape sequences will be replaced with + the proper interpretations according to the YAML 1.2 specification. + ¶ The implementation provided below interprets `<br>` as `\n` and + allows for an open <p> tag at the beginning of the bio. It replaces + the escaped character entities `'` and `"` with single or + double quotes, respectively, prior to processing. However, no other + escaped characters are replaced, not even those which might have an + impact on the syntax otherwise. These minor allowances are provided + because the Mastodon backend will insert these things automatically + into a bio before sending it through the API, so it is important we + account for them. Aside from this, the YAML frontmatter must be the + very first thing in the bio, leading with three consecutive hyphen- + minues (`---`), and ending with the same or, alternatively, instead + with three periods (`...`). No limits have been set with respect to + the number of characters permitted in the frontmatter, although one + should note that only limited space is provided for them in the UI. + ¶ The regular expression used to check the existence of, and then + process, the YAML frontmatter has been split into a number of small + components in the code below, in the vain hope that it will be much + easier to read and to maintain. I leave it to the future readers of + this code to determine the extent of my successes in this endeavor. + + Sending love + warmth eternal, + - kibigo [@kibi@glitch.social] + +\*********************************************************************/ + +/* CONVENIENCE FUNCTIONS */ + +const unirex = str => new RegExp(str, 'u'); +const rexstr = exp => '(?:' + exp.source + ')'; + +/* CHARACTER CLASSES */ + +const DOCUMENT_START = /^/; +const DOCUMENT_END = /$/; +const ALLOWED_CHAR = // `c-printable` in the YAML 1.2 spec. + /[\t\n\r\x20-\x7e\x85\xa0-\ud7ff\ue000-\ufffd\u{10000}-\u{10FFFF}]/u; +const WHITE_SPACE = /[ \t]/; +const INDENTATION = / */; // Indentation must be only spaces. +const LINE_BREAK = /\r?\n|\r|<br\s*\/?>/; +const ESCAPE_CHAR = /[0abt\tnvfre "\/\\N_LP]/; +const HEXADECIMAL_CHARS = /[0-9a-fA-F]/; +const INDICATOR = /[-?:,[\]{}&#*!|>'"%@`]/; +const FLOW_CHAR = /[,[\]{}]/; + +/* NEGATED CHARACTER CLASSES */ + +const NOT_WHITE_SPACE = unirex('(?!' + rexstr(WHITE_SPACE) + ')[^]'); +const NOT_LINE_BREAK = unirex('(?!' + rexstr(LINE_BREAK) + ')[^]'); +const NOT_INDICATOR = unirex('(?!' + rexstr(INDICATOR) + ')[^]'); +const NOT_FLOW_CHAR = unirex('(?!' + rexstr(FLOW_CHAR) + ')[^]'); +const NOT_ALLOWED_CHAR = unirex( + '(?!' + rexstr(ALLOWED_CHAR) + ')[^]' +); + +/* BASIC CONSTRUCTS */ + +const ANY_WHITE_SPACE = unirex(rexstr(WHITE_SPACE) + '*'); +const ANY_ALLOWED_CHARS = unirex(rexstr(ALLOWED_CHAR) + '*'); +const NEW_LINE = unirex( + rexstr(ANY_WHITE_SPACE) + rexstr(LINE_BREAK) +); +const SOME_NEW_LINES = unirex( + '(?:' + rexstr(ANY_WHITE_SPACE) + rexstr(LINE_BREAK) + ')+' +); +const POSSIBLE_STARTS = unirex( + rexstr(DOCUMENT_START) + rexstr(/<p[^<>]*>/) + '?' +); +const POSSIBLE_ENDS = unirex( + rexstr(SOME_NEW_LINES) + '|' + + rexstr(DOCUMENT_END) + '|' + + rexstr(/<\/p>/) +); +const CHARACTER_ESCAPE = unirex( + rexstr(/\\/) + + '(?:' + + rexstr(ESCAPE_CHAR) + '|' + + rexstr(/x/) + rexstr(HEXADECIMAL_CHARS) + '{2}' + '|' + + rexstr(/u/) + rexstr(HEXADECIMAL_CHARS) + '{4}' + '|' + + rexstr(/U/) + rexstr(HEXADECIMAL_CHARS) + '{8}' + + ')' +); +const ESCAPED_CHAR = unirex( + rexstr(/(?!["\\])/) + rexstr(NOT_LINE_BREAK) + '|' + + rexstr(CHARACTER_ESCAPE) +); +const ANY_ESCAPED_CHARS = unirex( + rexstr(ESCAPED_CHAR) + '*' +); +const ESCAPED_APOS = unirex( + '(?=' + rexstr(NOT_LINE_BREAK) + ')' + rexstr(/[^']|''/) +); +const ANY_ESCAPED_APOS = unirex( + rexstr(ESCAPED_APOS) + '*' +); +const FIRST_KEY_CHAR = unirex( + '(?=' + rexstr(NOT_LINE_BREAK) + ')' + + '(?=' + rexstr(NOT_WHITE_SPACE) + ')' + + rexstr(NOT_INDICATOR) + '|' + + rexstr(/[?:-]/) + + '(?=' + rexstr(NOT_LINE_BREAK) + ')' + + '(?=' + rexstr(NOT_WHITE_SPACE) + ')' + + '(?=' + rexstr(NOT_FLOW_CHAR) + ')' +); +const FIRST_VALUE_CHAR = unirex( + '(?=' + rexstr(NOT_LINE_BREAK) + ')' + + '(?=' + rexstr(NOT_WHITE_SPACE) + ')' + + rexstr(NOT_INDICATOR) + '|' + + rexstr(/[?:-]/) + + '(?=' + rexstr(NOT_LINE_BREAK) + ')' + + '(?=' + rexstr(NOT_WHITE_SPACE) + ')' + // Flow indicators are allowed in values. +); +const LATER_KEY_CHAR = unirex( + rexstr(WHITE_SPACE) + '|' + + '(?=' + rexstr(NOT_LINE_BREAK) + ')' + + '(?=' + rexstr(NOT_WHITE_SPACE) + ')' + + '(?=' + rexstr(NOT_FLOW_CHAR) + ')' + + rexstr(/[^:#]#?/) + '|' + + rexstr(/:/) + '(?=' + rexstr(NOT_WHITE_SPACE) + ')' +); +const LATER_VALUE_CHAR = unirex( + rexstr(WHITE_SPACE) + '|' + + '(?=' + rexstr(NOT_LINE_BREAK) + ')' + + '(?=' + rexstr(NOT_WHITE_SPACE) + ')' + + // Flow indicators are allowed in values. + rexstr(/[^:#]#?/) + '|' + + rexstr(/:/) + '(?=' + rexstr(NOT_WHITE_SPACE) + ')' +); + +/* YAML CONSTRUCTS */ + +const YAML_START = unirex( + rexstr(ANY_WHITE_SPACE) + rexstr(/---/) +); +const YAML_END = unirex( + rexstr(ANY_WHITE_SPACE) + rexstr(/(?:---|\.\.\.)/) +); +const YAML_LOOKAHEAD = unirex( + '(?=' + + rexstr(YAML_START) + + rexstr(ANY_ALLOWED_CHARS) + rexstr(NEW_LINE) + + rexstr(YAML_END) + rexstr(POSSIBLE_ENDS) + + ')' +); +const YAML_DOUBLE_QUOTE = unirex( + rexstr(/"/) + rexstr(ANY_ESCAPED_CHARS) + rexstr(/"/) +); +const YAML_SINGLE_QUOTE = unirex( + rexstr(/'/) + rexstr(ANY_ESCAPED_APOS) + rexstr(/'/) +); +const YAML_SIMPLE_KEY = unirex( + rexstr(FIRST_KEY_CHAR) + rexstr(LATER_KEY_CHAR) + '*' +); +const YAML_SIMPLE_VALUE = unirex( + rexstr(FIRST_VALUE_CHAR) + rexstr(LATER_VALUE_CHAR) + '*' +); +const YAML_KEY = unirex( + rexstr(YAML_DOUBLE_QUOTE) + '|' + + rexstr(YAML_SINGLE_QUOTE) + '|' + + rexstr(YAML_SIMPLE_KEY) +); +const YAML_VALUE = unirex( + rexstr(YAML_DOUBLE_QUOTE) + '|' + + rexstr(YAML_SINGLE_QUOTE) + '|' + + rexstr(YAML_SIMPLE_VALUE) +); +const YAML_SEPARATOR = unirex( + rexstr(ANY_WHITE_SPACE) + + ':' + rexstr(WHITE_SPACE) + + rexstr(ANY_WHITE_SPACE) +); +const YAML_LINE = unirex( + '(' + rexstr(YAML_KEY) + ')' + + rexstr(YAML_SEPARATOR) + + '(' + rexstr(YAML_VALUE) + ')' +); + +/* FRONTMATTER REGEX */ + +const YAML_FRONTMATTER = unirex( + rexstr(POSSIBLE_STARTS) + + rexstr(YAML_LOOKAHEAD) + + rexstr(YAML_START) + rexstr(SOME_NEW_LINES) + + '(?:' + + '(' + rexstr(INDENTATION) + ')' + + rexstr(YAML_LINE) + rexstr(SOME_NEW_LINES) + + '(?:' + + '\\1' + rexstr(YAML_LINE) + rexstr(SOME_NEW_LINES) + + '){0,4}' + + ')?' + + rexstr(YAML_END) + rexstr(POSSIBLE_ENDS) +); + +/* SEARCHES */ + +const FIND_YAML_LINES = unirex( + rexstr(NEW_LINE) + rexstr(INDENTATION) + rexstr(YAML_LINE) +); + +/* STRING PROCESSING */ + +function processString(str) { + switch (str.charAt(0)) { + case '"': + return str + .substring(1, str.length - 1) + .replace(/\\0/g, '\x00') + .replace(/\\a/g, '\x07') + .replace(/\\b/g, '\x08') + .replace(/\\t/g, '\x09') + .replace(/\\\x09/g, '\x09') + .replace(/\\n/g, '\x0a') + .replace(/\\v/g, '\x0b') + .replace(/\\f/g, '\x0c') + .replace(/\\r/g, '\x0d') + .replace(/\\e/g, '\x1b') + .replace(/\\ /g, '\x20') + .replace(/\\"/g, '\x22') + .replace(/\\\//g, '\x2f') + .replace(/\\\\/g, '\x5c') + .replace(/\\N/g, '\x85') + .replace(/\\_/g, '\xa0') + .replace(/\\L/g, '\u2028') + .replace(/\\P/g, '\u2029') + .replace( + new RegExp( + unirex( + rexstr(/\\x/) + '(' + rexstr(HEXADECIMAL_CHARS) + '{2})' + ), 'gu' + ), (_, n) => String.fromCodePoint('0x' + n) + ) + .replace( + new RegExp( + unirex( + rexstr(/\\u/) + '(' + rexstr(HEXADECIMAL_CHARS) + '{4})' + ), 'gu' + ), (_, n) => String.fromCodePoint('0x' + n) + ) + .replace( + new RegExp( + unirex( + rexstr(/\\U/) + '(' + rexstr(HEXADECIMAL_CHARS) + '{8})' + ), 'gu' + ), (_, n) => String.fromCodePoint('0x' + n) + ); + case '\'': + return str + .substring(1, str.length - 1) + .replace(/''/g, '\''); + default: + return str; + } +} + +/* BIO PROCESSING */ + +export function processBio(content) { + content = content.replace(/"/g, '"').replace(/'/g, '\''); + let result = { + text: content, + metadata: [], + }; + let yaml = content.match(YAML_FRONTMATTER); + if (!yaml) return result; + else yaml = yaml[0]; + let start = content.search(YAML_START); + let end = start + yaml.length - yaml.search(YAML_START); + result.text = content.substr(0, start) + content.substr(end); + let metadata = null; + let query = new RegExp(FIND_YAML_LINES, 'g'); + while ((metadata = query.exec(yaml))) { + result.metadata.push([ + processString(metadata[1]), + processString(metadata[2]), + ]); + } + return result; +} + +/* BIO CREATION */ + +export function createBio(note, data) { + if (!note) note = ''; + let frontmatter = ''; + if ((data && data.length) || note.match(/^\s*---\s+/)) { + if (!data) frontmatter = '---\n...\n'; + else { + frontmatter += '---\n'; + for (let i = 0; i < data.length; i++) { + let key = '' + data[i][0]; + let val = '' + data[i][1]; + + // Key processing + if (key === (key.match(YAML_SIMPLE_KEY) || [])[0]) /* do nothing */; + else if (key.indexOf('\'') === -1 && key === (key.match(ANY_ESCAPED_APOS) || [])[0]) key = '\'' + key + '\''; + else { + key = key + .replace(/\x00/g, '\\0') + .replace(/\x07/g, '\\a') + .replace(/\x08/g, '\\b') + .replace(/\x0a/g, '\\n') + .replace(/\x0b/g, '\\v') + .replace(/\x0c/g, '\\f') + .replace(/\x0d/g, '\\r') + .replace(/\x1b/g, '\\e') + .replace(/\x22/g, '\\"') + .replace(/\x5c/g, '\\\\'); + let badchars = key.match( + new RegExp(rexstr(NOT_ALLOWED_CHAR), 'gu') + ) || []; + for (let j = 0; j < badchars.length; j++) { + key = key.replace( + badchars[i], + '\\u' + badchars[i].codePointAt(0).toLocaleString('en', { + useGrouping: false, + minimumIntegerDigits: 4, + }) + ); + } + key = '"' + key + '"'; + } + + // Value processing + if (val === (val.match(YAML_SIMPLE_VALUE) || [])[0]) /* do nothing */; + else if (val.indexOf('\'') === -1 && val === (val.match(ANY_ESCAPED_APOS) || [])[0]) val = '\'' + val + '\''; + else { + val = val + .replace(/\x00/g, '\\0') + .replace(/\x07/g, '\\a') + .replace(/\x08/g, '\\b') + .replace(/\x0a/g, '\\n') + .replace(/\x0b/g, '\\v') + .replace(/\x0c/g, '\\f') + .replace(/\x0d/g, '\\r') + .replace(/\x1b/g, '\\e') + .replace(/\x22/g, '\\"') + .replace(/\x5c/g, '\\\\'); + let badchars = val.match( + new RegExp(rexstr(NOT_ALLOWED_CHAR), 'gu') + ) || []; + for (let j = 0; j < badchars.length; j++) { + val = val.replace( + badchars[i], + '\\u' + badchars[i].codePointAt(0).toLocaleString('en', { + useGrouping: false, + minimumIntegerDigits: 4, + }) + ); + } + val = '"' + val + '"'; + } + + frontmatter += key + ': ' + val + '\n'; + } + frontmatter += '...\n'; + } + } + return frontmatter + note; +} |