Merge branch 'show-remote' into 'develop'

Favicon: refactor, show domain in alt/title

See merge request soapbox-pub/soapbox-fe!201

app/soapbox/components/status.js

@@ -21,6 +21,7 @@ import { NavLink } from 'react-router-dom';
 import ProfileHoverCardContainer from '../features/profile_hover_card/profile_hover_card_container';
 import { isMobile } from '../../../app/soapbox/is_mobile';
 import { debounce } from 'lodash';
+import { getDomain } from 'soapbox/utils/accounts';
 
 // We use the component (and not the container) since we do not want
 // to use the progress bar to show download progress
@@ -455,6 +456,8 @@ class Status extends ImmutablePureComponent {
 
     const statusUrl = `/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`;
     const { profileCardVisible } = this.state;
+    const favicon = status.getIn(['account', 'pleroma', 'favicon']);
+    const domain = getDomain(status.get('account'));
 
     return (
       <HotKeys handlers={handlers}>
@@ -468,9 +471,9 @@ class Status extends ImmutablePureComponent {
                 <RelativeTimestamp timestamp={status.get('created_at')} />
               </NavLink>
 
-              {status.hasIn(['account', 'pleroma', 'favicon']) &&
+              {favicon &&
                 <div className='status__favicon'>
-                  <img src={status.getIn(['account', 'pleroma', 'favicon'])} alt='' />
+                  <img src={favicon} alt={domain} title={domain} />
                 </div>}
 
               <div className='status__profile' onMouseEnter={this.handleProfileHover} onMouseLeave={this.handleProfileLeave}>

app/soapbox/features/status/components/detailed_status.js

@@ -19,6 +19,7 @@ import { StatusInteractionBar } from './status_interaction_bar';
 import ProfileHoverCardContainer from 'soapbox/features/profile_hover_card/profile_hover_card_container';
 import { isMobile } from 'soapbox/is_mobile';
 import { debounce } from 'lodash';
+import { getDomain } from 'soapbox/utils/accounts';
 
 export default class DetailedStatus extends ImmutablePureComponent {
 
@@ -103,6 +104,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
     const outerStyle = { boxSizing: 'border-box' };
     const { compact } = this.props;
     const { profileCardVisible } = this.state;
+    const favicon = status.getIn(['account', 'pleroma', 'favicon']);
+    const domain = getDomain(status.get('account'));
 
     if (!status) {
       return null;
@@ -208,9 +211,9 @@ export default class DetailedStatus extends ImmutablePureComponent {
           <div className='detailed-status__meta'>
             <StatusInteractionBar status={status} />
             <div>
-              {status.hasIn(['account', 'pleroma', 'favicon']) &&
+              {favicon &&
                 <div className='status__favicon'>
-                  <img src={status.getIn(['account', 'pleroma', 'favicon'])} alt='' />
+                  <img src={favicon} alt={domain} title={domain} />
                 </div>}
 
               {statusTypeIcon}<a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>

app/soapbox/utils/accounts.js

@@ -1,21 +1,26 @@
 import { Map as ImmutableMap } from 'immutable';
 import { List as ImmutableList } from 'immutable';
 
+const guessDomain = account => {
+  try {
+    let re = /https?:\/\/(.*?)\//i;
+    return re.exec(account.get('url'))[1];
+  } catch(e) {
+    return null;
+  }
+};
+
 export const getDomain = account => {
-  let re = /https?:\/\/(.*?)\//i;
-  return re.exec(account.get('url'))[1];
+  let domain = account.get('acct').split('@')[1];
+  if (!domain) domain = guessDomain(account);
+  return domain;
 };
 
 // user@domain even for local users
 export const acctFull = account => {
-  let [user, domain] = account.get('acct').split('@');
-  try {
-    if (!domain) domain = getDomain(account);
-  } catch(e) {
-    console.warning('Could not get domain for acctFull. Falling back to acct.');
-    return account.get('acct');
-  }
-  return [user, domain].join('@');
+  const [user, domain] = account.get('acct').split('@');
+  if (!domain) return [user, guessDomain(account)].join('@');
+  return account.get('acct');
 };
 
 export const isStaff = (account = ImmutableMap()) => (