Ported updates from #64

5 files changed, 41 insertions, 19 deletions

diff --git a/app/javascript/glitch/components/status/action_bar.js b/app/javascript/glitch/components/status/action_bar.js
index 6aa088c04..df0904a7c 100644
--- a/app/javascript/glitch/components/status/action_bar.js
+++ b/app/javascript/glitch/components/status/action_bar.js
@@ -47,7 +47,7 @@ export default class StatusActionBar extends ImmutablePureComponent {
     onReport: PropTypes.func,
     onMuteConversation: PropTypes.func,
     onDeleteNotification: PropTypes.func,
-    me: PropTypes.number.isRequired,
+    me: PropTypes.number,
     withDismiss: PropTypes.bool,
     intl: PropTypes.object.isRequired,
   };
@@ -108,6 +108,7 @@ export default class StatusActionBar extends ImmutablePureComponent {
     const { status, me, intl, withDismiss } = this.props;
     const reblogDisabled = status.get('visibility') === 'private' || status.get('visibility') === 'direct';
     const mutingConversation = status.get('muted');
+    const anonymousAccess = !me;
 
     let menu = [];
     let reblogIcon = 'retweet';
@@ -151,12 +152,12 @@ export default class StatusActionBar extends ImmutablePureComponent {
 
     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} />
+        <IconButton className='status__action-bar-button' disabled={anonymousAccess} title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} />
+        <IconButton className='status__action-bar-button' disabled={anonymousAccess || 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' disabled={anonymousAccess} 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' />
+          <DropdownMenu items={menu} disabled={anonymousAccess} 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>
diff --git a/app/javascript/glitch/components/status/content.js b/app/javascript/glitch/components/status/content.js
index 76f5b765a..06fe04ce0 100644
--- a/app/javascript/glitch/components/status/content.js
+++ b/app/javascript/glitch/components/status/content.js
@@ -4,6 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import escapeTextContentForBrowser from 'escape-html';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
+import classnames from 'classnames';
 
 //  Mastodon imports  //
 import emojify from '../../../mastodon/emoji';
@@ -12,10 +13,6 @@ 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]),
@@ -24,6 +21,7 @@ export default class StatusContent extends React.PureComponent {
     media: PropTypes.element,
     mediaIcon: PropTypes.string,
     parseClick: PropTypes.func,
+    disabled: PropTypes.bool,
   };
 
   state = {
@@ -45,10 +43,11 @@ export default class StatusContent extends React.PureComponent {
         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);
       }
+
+      link.setAttribute('target', '_blank');
+      link.setAttribute('rel', 'noopener');
     }
   }
 
@@ -118,7 +117,13 @@ export default class StatusContent extends React.PureComponent {
   }
 
   render () {
-    const { status, media, mediaIcon } = this.props;
+    const {
+      status,
+      media,
+      mediaIcon,
+      parseClick,
+      disabled,
+    } = this.props;
 
     const hidden = (
       this.props.setExpansion ?
@@ -133,6 +138,9 @@ export default class StatusContent extends React.PureComponent {
       )),
     };
     const directionStyle = { direction: 'ltr' };
+    const classNames = classnames('status__content', {
+      'status__content--with-action': parseClick && !disabled,
+    });
 
     if (isRtl(status.get('search_index'))) {
       directionStyle.direction = 'rtl';
@@ -180,7 +188,7 @@ export default class StatusContent extends React.PureComponent {
       }
 
       return (
-        <div className='status__content status__content--with-action' ref={this.setRef}>
+        <div className={classNames} ref={this.setRef}>
           <p
             style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}
             onMouseDown={this.handleMouseDown}
@@ -207,11 +215,11 @@ export default class StatusContent extends React.PureComponent {
 
         </div>
       );
-    } else if (this.props.parseClick) {
+    } else if (parseClick) {
       return (
         <div
           ref={this.setRef}
-          className='status__content status__content--with-action'
+          className={classNames}
           style={directionStyle}
         >
           <div
diff --git a/app/javascript/glitch/components/status/header.js b/app/javascript/glitch/components/status/header.js
index 78aef1ed5..3187fa7fb 100644
--- a/app/javascript/glitch/components/status/header.js
+++ b/app/javascript/glitch/components/status/header.js
@@ -220,6 +220,7 @@ if we have a `friend` and a normal `<Avatar>` if we don't.
         }
         <a
           href={account.get('url')}
+          target='_blank'
           className='status__display-name'
           onClick={this.handleAccountClick}
         >
diff --git a/app/javascript/glitch/components/status/index.js b/app/javascript/glitch/components/status/index.js
index 314e8b51c..4a91b5aa3 100644
--- a/app/javascript/glitch/components/status/index.js
+++ b/app/javascript/glitch/components/status/index.js
@@ -507,6 +507,7 @@ applicable.
     const { router } = this.context;
     const { status } = this.props;
     const { isExpanded } = this.state;
+    if (!router) return;
     if (destination === undefined) {
       destination = `/statuses/${
         status.getIn(['reblog', 'id'], status.get('id'))
@@ -532,7 +533,13 @@ this operation are further explained in the code below.
 */
 
   render () {
-    const { parseClick, setExpansion, handleRef } = this;
+    const {
+      parseClick,
+      setExpansion,
+      saveHeight,
+      handleRef,
+    } = this;
+    const { router } = this.context;
     const {
       status,
       account,
@@ -706,9 +713,10 @@ collapsed.
           media={media}
           mediaIcon={mediaIcon}
           expanded={isExpanded}
-          setExpansion={this.setExpansion}
-          onHeightUpdate={this.saveHeight}
+          setExpansion={setExpansion}
+          onHeightUpdate={saveHeight}
           parseClick={parseClick}
+          disabled={!router}
         />
         {isExpanded !== false ? (
           <StatusActionBar
diff --git a/app/javascript/glitch/components/status/player.js b/app/javascript/glitch/components/status/player.js
index 37e4b8995..cc65cd34e 100644
--- a/app/javascript/glitch/components/status/player.js
+++ b/app/javascript/glitch/components/status/player.js
@@ -17,6 +17,10 @@ const messages = defineMessages({
 @injectIntl
 export default class StatusPlayer extends React.PureComponent {
 
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
   static propTypes = {
     media: ImmutablePropTypes.map.isRequired,
     letterbox: PropTypes.bool,
@@ -122,7 +126,7 @@ export default class StatusPlayer extends React.PureComponent {
       </div>
     );
 
-    let expandButton = (
+    let expandButton = !this.context.router ? '' : (
       <div className='status__video-player-expand'>
         <IconButton overlay title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} />
       </div>