Merge pull request steemit#757 from steemit/develop

Release 0.1.161202

README.md

@@ -37,7 +37,7 @@ cp steem-example.json steem-dev.json
 (note: it's steem.json in production)
 
 #### Install mysql server
- 
+
 OS X :
 
 ```bash
@@ -55,12 +55,23 @@ sudo apt-get update
 sudo apt-get install mysql-server
 ```
 
+On Ubuntu 16.04+ you may be unable to connect to mysql without root access, if
+so update the mysql root user as follows::
+
+```
+sudo mysql -u root
+DROP USER 'root'@'localhost';
+CREATE USER 'root'@'%' IDENTIFIED BY '';
+GRANT ALL PRIVILEGES ON *.* TO 'root'@'%';
+FLUSH PRIVILEGES;
+```
+
 Now launch mysql client and create steemit_dev database:
 ```bash
 mysql -u root
 > create database steemit_dev;
 ```
- 
+
 Install `sequelize-cli` globally:
 
 ```bash

app/components/App.jsx

@@ -16,6 +16,7 @@ import Icon from 'app/components/elements/Icon';
 import {key_utils} from 'shared/ecc';
 import MiniHeader from 'app/components/modules/MiniHeader';
 import { translate } from '../Translator.js';
+import PageViewsCounter from 'app/components/elements/PageViewsCounter';
 
 class App extends React.Component {
     constructor(props) {
@@ -31,7 +32,6 @@ class App extends React.Component {
     }
 
     componentDidMount() {
-        require('fastclick').attach(document.body);
         // setTimeout(() => this.setState({showCallout: false}), 15000);
     }
 
@@ -243,6 +243,7 @@ class App extends React.Component {
             </div>
             <Dialogs />
             <Modals />
+            <PageViewsCounter />
         </div>
     }
 }

app/components/all.scss

@@ -27,6 +27,8 @@
 @import "./elements/Reblog";
 @import "./elements/YoutubePreview";
 @import "./elements/SignupProgressBar";
+@import "./elements/ShareMenu";
+@import "./elements/Author";
 
 // modules
 @import "./modules/Header";

app/components/cards/Comment.jsx

@@ -9,13 +9,12 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import user from 'app/redux/User';
 import TimeAgoWrapper from 'app/components/elements/TimeAgoWrapper';
-import Icon from 'app/components/elements/Icon';
 import Userpic from 'app/components/elements/Userpic';
 import transaction from 'app/redux/Transaction'
 import {List} from 'immutable'
 import { translate } from 'app/Translator';
 
-export function sortComments( g, comments, sort_order ) {
+export function sortComments( cont, comments, sort_order ) {
 
   function netNegative(a)  {
       return a.get("net_rshares") < 0;
@@ -24,8 +23,8 @@ export function sortComments( g, comments, sort_order ) {
   let sort_orders = {
   /** sort replies by active */
       active: (a,b) => {
-                let acontent = g.get('content').get(a);
-                let bcontent = g.get('content').get(b);
+                let acontent = cont.get(a);
+                let bcontent = cont.get(b);
                 if (netNegative(acontent)) {
                     return 1;
                 } else if (netNegative(bcontent)) {
@@ -36,8 +35,8 @@ export function sortComments( g, comments, sort_order ) {
                 return bactive - aactive;
               },
       update: (a,b) => {
-                let acontent = g.get('content').get(a);
-                let bcontent = g.get('content').get(b);
+                let acontent = cont.get(a);
+                let bcontent = cont.get(b);
                 if (netNegative(acontent)) {
                     return 1;
                 } else if (netNegative(bcontent)) {
@@ -48,8 +47,8 @@ export function sortComments( g, comments, sort_order ) {
                 return bactive.getTime() - aactive.getTime();
               },
       new:  (a,b) =>  {
-                let acontent = g.get('content').get(a);
-                let bcontent = g.get('content').get(b);
+                let acontent = cont.get(a);
+                let bcontent = cont.get(b);
                 if (netNegative(acontent)) {
                     return 1;
                 } else if (netNegative(bcontent)) {
@@ -60,8 +59,8 @@ export function sortComments( g, comments, sort_order ) {
                 return bactive - aactive;
               },
       trending:  (a,b) => {
-                let acontent = g.get('content').get(a);
-                let bcontent = g.get('content').get(b);
+                let acontent = cont.get(a);
+                let bcontent = cont.get(b);
                 if (netNegative(acontent)) {
                     return 1;
                 } else if (netNegative(bcontent)) {
@@ -83,7 +82,7 @@ class CommentImpl extends React.Component {
 
     static propTypes = {
         // html props
-        global: React.PropTypes.object.isRequired,
+        cont: React.PropTypes.object.isRequired,
         content: React.PropTypes.string.isRequired,
         sort_order: React.PropTypes.oneOf(['active', 'updated', 'new', 'trending']).isRequired,
         root: React.PropTypes.bool,
@@ -122,8 +121,8 @@ class CommentImpl extends React.Component {
         }
         this.saveOnShow = (type) => {
             if(process.env.BROWSER) {
-                const g = this.props.global;
-                const content = g.get('content').get(this.props.content)
+                const {cont} = this.props;
+                const content = cont.get(this.props.content)
                 const formId = content.get('author') + '/' + content.get('permlink')
                 if(type)
                     localStorage.setItem('showEditor-' + formId, JSON.stringify({type}, null, 0))
@@ -137,7 +136,7 @@ class CommentImpl extends React.Component {
         this.saveOnShow = this.saveOnShow.bind(this)
         this.onDeletePost = () => {
             const {props: {deletePost}} = this
-            const content = this.props.global.get('content').get(this.props.content);
+            const content = this.props.cont.get(this.props.content);
             deletePost(content.get('author'), content.get('permlink'))
         }
         this.toggleCollapsed = this.toggleCollapsed.bind(this);
@@ -170,8 +169,7 @@ class CommentImpl extends React.Component {
      *    it hides the comment body (but not the header) until the "reveal comment" link is clicked.
      */
     _checkHide(props) {
-        const g = props.global;
-        const content = g.get('content').get(props.content);
+        const content = props.cont.get(props.content);
         if (content) {
             const hide = content.getIn(['stats', 'hide'])
             if(hide) {
@@ -191,8 +189,8 @@ class CommentImpl extends React.Component {
     }
     initEditor(props) {
         if(this.state.PostReplyEditor) return
-        const g = props.global;
-        const content = g.get('content').get(props.content);
+        const {cont} = this.props;
+        const content = cont.get(props.content);
         if (!content) return
         const post = content.get('author') + '/' + content.get('permlink')
         const PostReplyEditor = ReplyEditor(post + '-reply')
@@ -213,8 +211,8 @@ class CommentImpl extends React.Component {
         this.setState({PostReplyEditor, PostEditEditor})
     }
     render() {
-        let g = this.props.global;
-        const dis = g.get('content').get(this.props.content);
+        const {cont} = this.props;
+        const dis = cont.get(this.props.content);
         if (!dis) {
             return <div>{translate('loading')}...</div>
         }
@@ -269,11 +267,20 @@ class CommentImpl extends React.Component {
 
         if(!this.state.collapsed) {
             replies = comment.replies;
-            sortComments( g, replies, this.props.sort_order );
+            sortComments( cont, replies, this.props.sort_order );
             // When a comment has hidden replies and is collapsed, the reply count is off
             //console.log("replies:", replies.length, "num_visible:", replies.filter( reply => !g.get('content').get(reply).getIn(['stats', 'hide'])).length)
-            replies = replies.map((reply, idx) => <Comment key={idx} content={reply} global={g}
-                sort_order={this.props.sort_order} depth={depth + 1} rootComment={rootComment} showNegativeComments={showNegativeComments} />);
+            replies = replies.map((reply, idx) => (
+                <Comment
+                    key={idx}
+                    content={reply}
+                    cont={cont}
+                    sort_order={this.props.sort_order}
+                    depth={depth + 1}
+                    rootComment={rootComment}
+                    showNegativeComments={showNegativeComments}
+                />)
+            );
         }
 
         const commentClasses = ['hentry']
@@ -349,10 +356,10 @@ class CommentImpl extends React.Component {
 const Comment = connect(
     // mapStateToProps
     (state, ownProps) => {
-        const {global, content} = ownProps
+        const {content, cont} = ownProps
         let {depth} = ownProps
         if(depth == null) depth = 1
-        const c = global.getIn(['content', content])
+        const c = cont.get(content);
         let comment_link = null
         let rc = ownProps.rootComment
         if(c) {
@@ -369,7 +376,7 @@ const Comment = connect(
             anchor_link: '#@' + content, // Using a hash here is not standard but intentional; see issue #124 for details
             rootComment: rc,
             username,
-            ignore,
+            ignore
         }
     },
 

app/components/cards/Comment.scss

@@ -1,8 +1,14 @@
 .Comment {
   clear: both;
   margin-bottom: 2.4rem;
-  .Markdown p {
-    margin: 0.1rem 0 0.6rem 0;
+  .Markdown {
+    p {
+      margin: 0.1rem 0 0.6rem 0;
+    }
+
+    p:last-child {
+      margin-bottom: 0.2rem;
+    }
   }
 }
 
@@ -69,7 +75,7 @@
   visibility: hidden;
   //width: 1rem;
   float: right;
-  a {
+  > a {
     color: $dark-gray;
     letter-spacing: 0.1rem;
     padding: 0 0.5rem;
@@ -90,7 +96,6 @@
 
 .Comment__footer {
   margin-left: 62px;
-  margin-top: -0.4rem;
   color: $dark-gray;
   a {
     color: $dark-gray;

app/components/cards/MarkdownViewer.jsx

@@ -28,11 +28,13 @@ class MarkdownViewer extends Component {
         jsonMetadata: React.PropTypes.object,
         highQualityPost: React.PropTypes.bool,
         noImage: React.PropTypes.bool,
+        allowDangerousHTML: React.PropTypes.bool,
     }
 
     static defaultProps = {
         className: '',
         large: false,
+        allowDangerousHTML: false,
     }
 
     constructor() {
@@ -81,7 +83,9 @@ class MarkdownViewer extends Component {
         // Complete removal of javascript and other dangerous tags..
         // The must remain as close as possible to dangerouslySetInnerHTML
         let cleanText = renderedText
-        if (this.props.className !== 'HelpContent') {
+        if (this.props.allowDangerousHTML === true) {
+            console.log('WARN\tMarkdownViewer rendering unsanitized content')
+        } else {
             cleanText = sanitize(renderedText, sanitizeConfig({large, highQualityPost, noImage: noImage && allowNoImage}))
         }
 
@@ -96,19 +100,34 @@ class MarkdownViewer extends Component {
         // In addition to inserting the youtube compoennt, this allows react to compare separately preventing excessive re-rendering.
         let idx = 0
         const sections = []
-        // HtmlReady inserts ~~~ youtube:${id} ~~~
-        for(let section of cleanText.split('~~~ youtube:')) {
-            if(/^[A-Za-z0-9\_\-]+ ~~~/.test(section)) {
-                const youTubeId = section.split(' ')[0]
-                section = section.substring(youTubeId.length + ' ~~~'.length)
+
+        // HtmlReady inserts ~~~ embed:${id} type ~~~
+        for(let section of cleanText.split('~~~ embed:')) {
+            const match = section.match(/^([A-Za-z0-9\_\-]+) (youtube|vimeo) ~~~/)
+            if(match && match.length >= 3) {
+                const id = match[1]
+                const type = match[2]
                 const w = large ? 640 : 480,
                       h = large ? 360 : 270
-                sections.push(
-                    <YoutubePreview key={idx++} width={w} height={h} youTubeId={youTubeId}
-                        frameBorder="0" allowFullScreen="true" />
-                )
+                if(type === 'youtube') {
+                    sections.push(
+                        <YoutubePreview key={idx++} width={w} height={h} youTubeId={id}
+                            frameBorder="0" allowFullScreen="true" />
+                    )
+                } else if(type === 'vimeo') {
+                    const url = `https://player.vimeo.com/video/${id}`
+                    sections.push(
+                        <div className="videoWrapper">
+                            <iframe key={idx++} src={url} width={w} height={h} frameBorder="0"
+                                webkitallowfullscreen mozallowfullscreen allowFullScreen></iframe>
+                        </div>
+                    )
+                } else {
+                    console.error('MarkdownViewer unknown embed type', type);
+                }
+                section = section.substring(`${id} ${type} ~~~`.length)
+                if(section === '') continue
             }
-            if(section === '') continue
             sections.push(<div key={idx++} dangerouslySetInnerHTML={{__html: section}} />)
         }