Merge branch 'develop' into staging

app/components/all.scss

@@ -21,6 +21,7 @@
 @import "./elements/GeneratedPasswordInput";
 @import "./elements/TagList";
 @import "./elements/ChangePassword";
+@import "./elements/Reputation";
 
 // modules
 @import "./modules/Header";

app/components/cards/PostSummary.jsx

@@ -11,15 +11,12 @@ import extractContent from 'app/utils/ExtractContent';
 import { browserHistory } from 'react-router';
 import VotesAndComments from 'app/components/elements/VotesAndComments';
 import TagList from 'app/components/elements/TagList';
-import {authorNameAndRep} from 'app/utils/ComponentFormatters'
-import {Map} from 'immutable'
+import {authorNameAndRep} from 'app/utils/ComponentFormatters';
+import {Map} from 'immutable';
+import Reputation from 'app/components/elements/Reputation';
 
 function TimeAuthorCategory({post, links, authorRepLog10, gray}) {
-    const author = <Tooltip t={authorRepLog10 ? authorRepLog10 + ' Reputation' : ''}>
-        <span className={gray ? 'darkred' : '' /*rephide*/}>
-            {authorNameAndRep(post.author, authorRepLog10)}
-        </span>
-    </Tooltip>
+    const author = <strong>{post.author}</strong>;
 
     return (
         <span className="vcard">
@@ -30,6 +27,7 @@ function TimeAuthorCategory({post, links, authorRepLog10, gray}) {
                 <span itemProp="author" itemScope itemType="http://schema.org/Person">
                     {links ? <Link to={post.author_link}>{author}</Link> :
                         <strong>{author}</strong>}
+                    <Reputation value={authorRepLog10} />
                 </span>
             </span>
             <span> in&nbsp;{links ? <TagList post={post} /> : <strong>{post.category}</strong>}</span>

app/components/elements/Author.jsx

@@ -1,11 +1,12 @@
 /* eslint react/prop-types: 0 */
-import React from 'react'
+import React from 'react';
 import shouldComponentUpdate from 'app/utils/shouldComponentUpdate'
 import {LinkWithDropdown} from 'react-foundation-components/lib/global/dropdown'
 import Follow from 'app/components/elements/Follow';
-import Icon from 'app/components/elements/Icon'
-import {browserHistory} from 'react-router'
-import {authorNameAndRep} from 'app/utils/ComponentFormatters'
+import Icon from 'app/components/elements/Icon';
+import {browserHistory} from 'react-router';
+import {authorNameAndRep} from 'app/utils/ComponentFormatters';
+import Reputation from 'app/components/elements/Reputation';
 
 const {string, bool, number} = React.PropTypes
 
@@ -30,7 +31,7 @@ class Author extends React.Component {
         const {username} = this.props // redux
 
         const author_link = <span itemProp="author" itemScope itemType="http://schema.org/Person">
-            <a onClick={this.onAuthorClick}>{authorNameAndRep(author, authorRepLog10)}</a>
+            <a onClick={this.onAuthorClick}><strong>{author}</strong></a><Reputation value={authorRepLog10} />
         </span>
 
         if(!username)

app/components/elements/Reputation.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default ({value}) => {
+    if (!value) return null;
+    return <span className="Reputation" title="Reputation">{value}</span>;
+}

app/components/elements/Reputation.scss

@@ -0,0 +1,10 @@
+.Reputation {
+  font-size: 80%;
+  padding: 0 2px;
+  margin-left: 2px;
+  margin-right: 2px;
+  background-color: #f8f8f8;
+  border-radius: 50%;
+  border: 1px solid #dadada;
+  color: $dark-gray;
+}

app/utils/SanitizeConfig.js

@@ -1,9 +1,24 @@
 
-
 const iframeWhitelist = [
-    /^(https?:)?\/\/www.youtube.com\/embed\/.*/i,
-    // /^(https?:)?\/\/player.vimeo.com\/video\/.*/i, // <-- medium-editor branch
-]
+    // { re: /^(https?:)?\/\/player.vimeo.com\/video\/.*/i }, // <-- medium-editor branch
+    { re: /^(https?:)?\/\/www.youtube.com\/embed\/.*/i,
+      fn: src => {
+        return src.replace(/\?.+$/, ''); // strip query string (yt: autoplay=1,controls=0,showinfo=0, etc)
+      }
+    },
+    {
+        re: /^https:\/\/w.soundcloud.com\/player\/.*/i,
+        fn: src => {
+            if(!src) return null
+            // <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/257659076&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
+            const m = src.match(/url=(.+?)&/)
+            if(!m || m.length !== 2) return null
+            return 'https://w.soundcloud.com/player/?url=' + m[1] +
+                '&auto_play=false&hide_related=false&show_comments=true' +
+                '&show_user=true&show_reposts=false&visual=true'
+        }
+    }
+];
 
 // Medium insert plugin uses: div, figure, figcaption, iframe
 export default ({large = true, highQualityPost = true, noImage = false, sanitizeErrors = []}) => ({
@@ -27,13 +42,15 @@ export default ({large = true, highQualityPost = true, noImage = false, sanitize
     },
     transformTags: {
         iframe: (tagName, attribs) => {
-            const src = attribs.src
-            for(const re of iframeWhitelist)
-                if(re.test(src)) {
+            const srcAtty = attribs.src;
+            for(const item of iframeWhitelist)
+                if(item.re.test(srcAtty)) {
+                    const src = typeof item.fn === 'function' ? item.fn(srcAtty, item.re) : srcAtty
+                    if(!src) break
                     return {
                         tagName: 'iframe',
                         attribs: {
-                            src: src.replace(/\?.+$/, ''), // strip query string (yt: autoplay=1,controls=0,showinfo=0, etc)
+                            src,
                             width: large ? '640' : '384',
                             height: large ? '360' : '240',
                             allowFullScreen: 'on',
@@ -43,8 +60,8 @@ export default ({large = true, highQualityPost = true, noImage = false, sanitize
                     }
                 }
             console.log('Blocked, did not match iframe "src" white list urls:', tagName, attribs)
-            sanitizeErrors.push('Invalid iframe URL: ' + src)
-            return {tagName: 'img', attribs: {src: 'brokenimg.jpg'}}
+            sanitizeErrors.push('Invalid iframe URL: ' + srcAtty)
+            return {tagName: 'div', text: `(Unsupported ${srcAtty})`}
         },
         img: (tagName, attribs) => {
             if(noImage) return {tagName: 'div', text: '(Image removed)'}