Ported updates from #64

6 files changed, 51 insertions, 29 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>
diff --git a/app/javascript/glitch/reducers/local_settings.js b/app/javascript/glitch/reducers/local_settings.js
index 79ff96307..776dcead7 100644
--- a/app/javascript/glitch/reducers/local_settings.js
+++ b/app/javascript/glitch/reducers/local_settings.js
@@ -28,7 +28,7 @@ Imports
 */
 
 //  Package imports  //
-import Immutable from 'immutable';
+import { Map as ImmutableMap } from 'immutable';
 
 //  Mastodon imports  //
 import { STORE_HYDRATE } from '../../mastodon/actions/store';
@@ -48,27 +48,27 @@ These are only used if no previously-saved values exist.
 
 */
 
-const initialState = Immutable.fromJS({
+const initialState = ImmutableMap({
   layout    : 'auto',
   stretch   : true,
-  collapsed : {
+  collapsed : ImmutableMap({
     enabled     : true,
-    auto        : {
+    auto        : ImmutableMap({
       all              : false,
       notifications    : true,
       lengthy          : true,
       replies          : false,
       media            : false,
-    },
-    backgrounds : {
+    }),
+    backgrounds : ImmutableMap({
       user_backgrounds : false,
       preview_images   : false,
-    },
-  },
-  media     : {
+    }),
+  }),
+  media     : ImmutableMap({
     letterbox   : true,
     fullwidth   : true,
-  },
+  }),
 });
 
                             /* * * * */