Merge branch 'develop' of Tzhx/comment into master

lib/App.js

 
       var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           _ref2$page = _ref2.page,
-          page = _ref2$page === undefined ? 1 : _ref2$page;
+          page = _ref2$page === undefined ? 1 : _ref2$page,
+          _ref2$filterSpeak = _ref2.filterSpeak,
+          filterSpeak = _ref2$filterSpeak === undefined ? 0 : _ref2$filterSpeak;
 
       var pageType = this.props.pageType;
 
           businessId = _props.businessId,
           limit = _props.limit;
 
-      this.axios.get(API + "/comments?type=" + type + "&business_id=" + businessId + "&page=" + page + "&limit=" + limit).then(function (response) {
+      this.axios.get(API + "/comments?type=" + type + "&business_id=" + businessId + "&is_speak=" + filterSpeak + "&page=" + page + "&limit=" + limit).then(function (response) {
         var _response$data = response.data,
             list = _response$data.list,
             page = _response$data.page,

lib/App.module.css

-.comment {
-  width: 100%;
-  padding: 10px;
-  margin-bottom: 100px;
-}
-
-.comment .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
-  position: fixed;
-  top: 45%;
-}
-
-.comment-header-tag {
-  border: 1px solid #cecece;
-  border-radius: 0;
-  color: #666;
-}
-
-.comment-header-tip {
-  color: #5198eb;
-  margin-right: 15px;
-  margin-left: 5px;
-}
-
-.comment-header-text {
-  color: #666;
-}
-
-.comment-img {
-  max-width: 100%;
-}
+.comment {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 100px;
+}
+
+.comment .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
+  position: fixed;
+  top: 45%;
+}
+
+.comment-header-tag {
+  border: 1px solid #cecece;
+  border-radius: 0;
+  color: #666;
+}
+
+.comment-header-tip {
+  color: #5198eb;
+  margin-right: 15px;
+  margin-left: 5px;
+}
+
+.comment-header-text {
+  color: #666;
+}
+
+.comment-img {
+  max-width: 100%;
+}

lib/Comment.js.map

-{"version":3,"sources":["../src/Comment.js"],"names":["Comment","CommentContext","React","createContext","Component","props","app"],"mappings":";;;;;;;;;QAKgBA,O,GAAAA,O;;AALhB;;;;;;AAEA,IAAMC,iBAAiBC,gBAAMC,aAAN,EAAvB;;AAEA;AACO,SAASH,OAAT,CAAiBI,SAAjB,EAA4B;AACjC;AACA,SAAO,UAASC,KAAT,EAAgB;AACrB;AACA;AACA,WACE;AAAC,oBAAD,CAAgB,QAAhB;AAAA;AACG;AAAA,eAAO,8BAAC,SAAD,eAAeA,KAAf,IAAsB,KAAKC,GAA3B,IAAP;AAAA;AADH,KADF;AAKD,GARD;AASD;;QAEQL,c,GAAAA,c;kBAEMD,O","file":"Comment.js","sourcesContent":["import React from \"react\";\n\nconst CommentContext = React.createContext();\n\n// This function takes a component...\nexport function Comment(Component) {\n  // ...and returns another component...\n  return function(props) {\n    // ... and renders the wrapped component with the context theme!\n    // Notice that we pass through any additional props as well\n    return (\n      <CommentContext.Consumer>\n        {app => <Component {...props} app={app} />}\n      </CommentContext.Consumer>\n    );\n  };\n}\n\nexport { CommentContext };\n\nexport default Comment;\n"]}
+{"version":3,"sources":["../src/Comment.js"],"names":["Comment","CommentContext","React","createContext","Component","props","app"],"mappings":";;;;;;;;;QAKgBA,O,GAAAA,O;;AALhB;;;;;;AAEA,IAAMC,iBAAiBC,gBAAMC,aAAN,EAAvB;;AAEA;AACO,SAASH,OAAT,CAAiBI,SAAjB,EAA4B;AACjC;AACA,SAAO,UAASC,KAAT,EAAgB;AACrB;AACA;AACA,WACE;AAAC,oBAAD,CAAgB,QAAhB;AAAA;AACG;AAAA,eAAO,8BAAC,SAAD,eAAeA,KAAf,IAAsB,KAAKC,GAA3B,IAAP;AAAA;AADH,KADF;AAKD,GARD;AASD;;QAEQL,c,GAAAA,c;kBAEMD,O","file":"Comment.js","sourcesContent":["import React from \"react\";\r\n\r\nconst CommentContext = React.createContext();\r\n\r\n// This function takes a component...\r\nexport function Comment(Component) {\r\n  // ...and returns another component...\r\n  return function(props) {\r\n    // ... and renders the wrapped component with the context theme!\r\n    // Notice that we pass through any additional props as well\r\n    return (\r\n      <CommentContext.Consumer>\r\n        {app => <Component {...props} app={app} />}\r\n      </CommentContext.Consumer>\r\n    );\r\n  };\r\n}\r\n\r\nexport { CommentContext };\r\n\r\nexport default Comment;\r\n"]}

lib/axios.js.map

-{"version":3,"sources":["../src/axios.js"],"names":["axios","defaults","withCredentials","headers","common"],"mappings":";;;;;;AAAA;;;;;;AAEAA,gBAAMC,QAAN,CAAeC,eAAf,GAAiC,IAAjC;AACAF,gBAAMC,QAAN,CAAeE,OAAf,CAAuBC,MAAvB,CAA8B,eAA9B,IAAiD,SAAjD;;kBAEeJ,e","file":"axios.js","sourcesContent":["import axios from \"axios\";\n\naxios.defaults.withCredentials = true;\naxios.defaults.headers.common[\"Authorization\"] = \"Bearer \";\n\nexport default axios;\n"]}
+{"version":3,"sources":["../src/axios.js"],"names":["axios","defaults","withCredentials","headers","common"],"mappings":";;;;;;AAAA;;;;;;AAEAA,gBAAMC,QAAN,CAAeC,eAAf,GAAiC,IAAjC;AACAF,gBAAMC,QAAN,CAAeE,OAAf,CAAuBC,MAAvB,CAA8B,eAA9B,IAAiD,SAAjD;;kBAEeJ,e","file":"axios.js","sourcesContent":["import axios from \"axios\";\r\n\r\naxios.defaults.withCredentials = true;\r\naxios.defaults.headers.common[\"Authorization\"] = \"Bearer \";\r\n\r\nexport default axios;\r\n"]}

lib/components/AudioPlayer/index.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _slider = require("antd/es/slider");
+
+var _slider2 = _interopRequireDefault(_slider);
+
+var _icon = require("antd/es/icon");
+
+var _icon2 = _interopRequireDefault(_icon);
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+require("antd/es/slider/style");
+
+require("antd/es/icon/style");
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _dayjs = require("dayjs");
+
+var _dayjs2 = _interopRequireDefault(_dayjs);
+
+var _duration = require("dayjs/plugin/duration");
+
+var _duration2 = _interopRequireDefault(_duration);
+
+var _utc = require("dayjs/plugin/utc");
+
+var _utc2 = _interopRequireDefault(_utc);
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+_dayjs2.default.extend(_duration2.default);
+_dayjs2.default.extend(_utc2.default);
+
+var AudioPlayer = function (_React$Component) {
+  _inherits(AudioPlayer, _React$Component);
+
+  function AudioPlayer(props) {
+    _classCallCheck(this, AudioPlayer);
+
+    var _this = _possibleConstructorReturn(this, (AudioPlayer.__proto__ || Object.getPrototypeOf(AudioPlayer)).call(this, props));
+
+    _this.state = {
+      duration: 0,
+      currentDuration: 0,
+      isPlaying: false
+    };
+    return _this;
+  }
+
+  _createClass(AudioPlayer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      if (this.player) {
+        var src = this.props.src;
+
+        this.player.oncanplay = function (event) {
+          return _this2.setState({ duration: event.target.duration });
+        };
+        this.player.onended = function () {
+          return _this2.setState({ isPlaying: false, currentDuration: 0 });
+        };
+        this.player.onpause = function () {
+          return _this2.setState({ isPlaying: false });
+        };
+        this.player.onplay = function () {
+          return _this2.setState({ isPlaying: true });
+        };
+        this.player.ontimeupdate = function (event) {
+          return _this2.setState({ currentDuration: event.target.currentTime });
+        };
+        this.player.src = src;
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this3 = this;
+
+      if (this.props.src !== prevProps.src) {
+        this.player.oncanplay = function (event) {
+          return _this3.setState({ duration: event.target.duration });
+        };
+        this.player.onended = function () {
+          return _this3.setState({ isPlaying: false, currentDuration: 0 });
+        };
+        this.player.onpause = function () {
+          return _this3.setState({ isPlaying: false });
+        };
+        this.player.onplay = function () {
+          return _this3.setState({ isPlaying: true });
+        };
+        this.player.ontimeupdate = function (event) {
+          return _this3.setState({ currentDuration: event.target.currentTime });
+        };
+        this.player.src = this.props.src;
+      }
+    }
+  }, {
+    key: "clickPlayOrPause",
+    value: function clickPlayOrPause(isPlaying) {
+      if (!this.player) {
+        return;
+      }
+      if (isPlaying) {
+        this.player.pause();
+      } else {
+        // 如果是播放，先暂停其他的播放
+        var playerList = document.getElementsByTagName("audio");
+        if (playerList) {
+          Array.from(playerList).forEach(function (player) {
+            if (!player.paused) {
+              player.pause();
+            }
+          });
+        }
+        this.player.play();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this4 = this;
+
+      var _state = this.state,
+          currentDuration = _state.currentDuration,
+          isPlaying = _state.isPlaying,
+          duration = _state.duration;
+
+      return _react2.default.createElement(
+        "div",
+        { className: "comment-item-speak-audio-container" },
+        _react2.default.createElement("audio", {
+          ref: function ref(_ref) {
+            _this4.player = _ref;
+          },
+          style: { display: "none" }
+        }),
+        _react2.default.createElement(
+          "span",
+          {
+            className: "icon",
+            onClick: function onClick() {
+              _this4.clickPlayOrPause(isPlaying);
+            }
+          },
+          isPlaying ? _react2.default.createElement(_icon2.default, { className: "pause", type: "pause" }) : _react2.default.createElement("i", { className: "schedule schedule-icon_image_audio" })
+        ),
+        _react2.default.createElement(_slider2.default, {
+          step: 0.001,
+          className: "slider",
+          tooltipVisible: false,
+          value: currentDuration,
+          max: duration,
+          onChange: function onChange(value) {
+            if (_this4.player) {
+              _this4.player.currentTime = value;
+            }
+          }
+        }),
+        _react2.default.createElement(
+          "span",
+          { className: "time" },
+          _dayjs2.default.utc(_dayjs2.default.duration(currentDuration, "seconds").asMilliseconds()).format("mm:ss"),
+          "/",
+          _dayjs2.default.utc(_dayjs2.default.duration(duration, "seconds").asMilliseconds()).format("mm:ss")
+        )
+      );
+    }
+  }]);
+
+  return AudioPlayer;
+}(_react2.default.Component);
+
+exports.default = AudioPlayer;
+//# sourceMappingURL=index.js.map

lib/components/AudioPlayer/index.less

+.comment-item-speak-audio-container {
+  background-color: #f5f5f5;
+  border: 1px solid rgba(210, 210, 210, 1);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  .icon {
+    cursor: pointer;
+    width: 28px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    border-radius: 14px;
+    background-color: #fff;
+    color: #71c135;
+    margin-left: 12px;
+    font-size: 14px;
+  }
+
+  .slider {
+    margin: 0 0 0 16px;
+    width: 195px;
+
+    :global {
+      .ant-slider-rail {
+        background-color: #dfdfdf;
+      }
+    }
+  }
+
+  .time {
+    margin-left: 14px;
+    color: #848484;
+    font-size: 12px;
+  }
+}
+
+@media screen and (max-width: 616px) and (min-width: 449px) {
+  .comment-item-speak-audio-container {
+    .slider {
+      width: 195px;
+    }
+  }
+}
+@media screen and (max-width: 449px) and (min-width: 365px) {
+  .comment-item-speak-audio-container {
+    .slider {
+      width: 114px;
+    }
+  }
+}
+@media screen and (max-width: 365px) {
+  .comment-item-speak-audio-container {
+    .slider {
+      width: 60px;
+    }
+  }
+}

lib/components/CommentBox/index.css

-.comment-show-more {
-  color: #4a90e2;
-  text-align: center;
-  width: 100px;
-  background-color: #f8f8f8;
-  cursor: pointer;
-  padding: 10px;
-  margin: 0 auto;
-  transition: all 0.3s;
-}
-.comment-show-more:hover {
-  background-color: #f5f5f5;
-  color: #1890ff;
-}
-.comment-more-box {
-  text-align: center;
-  width: 90%;
-  margin-left: 50px;
-  margin-top: 10px;
-  height: 40px;
-  display: inline-block;
-}
-@media screen and (max-width: 616px) and (min-width: 449px) {
-  .comment-more-box {
-    text-align: center;
-    width: 85%;
-    margin-left: 50px;
-    height: 40px;
-    display: inline-block;
-  }
-}
-@media screen and (max-width: 449px) and (min-width: 365px) {
-  .comment-more-box {
-    text-align: center;
-    width: 80%;
-    margin-left: 50px;
-    height: 40px;
-    display: inline-block;
-  }
-}
-@media screen and (max-width: 365px) {
-  .comment-more-box {
-    text-align: center;
-    width: 75%;
-    margin-left: 50px;
-    height: 40px;
-    display: inline-block;
-  }
-}
+.comment-show-more {
+  color: #4a90e2;
+  text-align: center;
+  width: 100px;
+  background-color: #f8f8f8;
+  cursor: pointer;
+  padding: 10px;
+  margin: 0 auto;
+  transition: all 0.3s;
+}
+.comment-show-more:hover {
+  background-color: #f5f5f5;
+  color: #1890ff;
+}
+.comment-more-box {
+  text-align: center;
+  width: 90%;
+  margin-left: 50px;
+  margin-top: 10px;
+  height: 40px;
+  display: inline-block;
+}
+@media screen and (max-width: 616px) and (min-width: 449px) {
+  .comment-more-box {
+    text-align: center;
+    width: 85%;
+    margin-left: 50px;
+    height: 40px;
+    display: inline-block;
+  }
+}
+@media screen and (max-width: 449px) and (min-width: 365px) {
+  .comment-more-box {
+    text-align: center;
+    width: 80%;
+    margin-left: 50px;
+    height: 40px;
+    display: inline-block;
+  }
+}
+@media screen and (max-width: 365px) {
+  .comment-more-box {
+    text-align: center;
+    width: 75%;
+    margin-left: 50px;
+    height: 40px;
+    display: inline-block;
+  }
+}

lib/components/CommentList/index.css

 .comment-list-pagination {
   text-align: center;
 }
+
+.comment-list-filter-speak {
+  margin-left: 20px;
+  font-size: 14px;
+  color: rgba(93, 93, 93, 0.65);
+}
+
+@media screen and (max-width: 365px) {
+  .comment-list-filter-speak {
+    float: right;
+  }
+}

lib/components/CommentList/index.js

 
 var _spin2 = _interopRequireDefault(_spin);
 
+var _checkbox = require("antd/es/checkbox");
+
+var _checkbox2 = _interopRequireDefault(_checkbox);
+
 var _pagination = require("antd/es/pagination");
 
 var _pagination2 = _interopRequireDefault(_pagination);
 
 require("antd/es/spin/style");
 
+require("antd/es/checkbox/style");
+
 require("antd/es/pagination/style");
 
 var _react = require("react");
 
     var _this = _possibleConstructorReturn(this, (CommentList.__proto__ || Object.getPrototypeOf(CommentList)).call(this, props));
 
-    _this.state = {};
+    _this.state = {
+      filterSpeak: 0
+    };
     return _this;
   }
 
           sGetComment = _props$app.sGetComment,
           onPageChange = _props$app.onPageChange,
           onGetMoreBtnClick = _props$app.onGetMoreBtnClick;
+      var filterSpeak = this.state.filterSpeak;
 
       if (pageType === "slice") {
         // 截断多余评论，通过点击查看更多跳转
             {
               className: "comment-list-show-more",
               onClick: function onClick() {
-                sGetComment({ page: page + 1 });
+                sGetComment({ page: page + 1, filterSpeak: filterSpeak });
                 onPageChange(page + 1);
               }
             },
             current: page,
             total: total,
             onChange: function onChange(p) {
-              sGetComment({ page: p });
+              sGetComment({ page: p, filterSpeak: filterSpeak });
               onPageChange(p);
             }
           })
   }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _props$app2 = this.props.app,
           list = _props$app2.list,
           total = _props$app2.total,
-          loading = _props$app2.loading;
+          loading = _props$app2.loading,
+          isSpeak = _props$app2.isSpeak,
+          sGetComment = _props$app2.sGetComment,
+          onPageChange = _props$app2.onPageChange;
 
 
       var spinning = Boolean(loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor);
           _react2.default.createElement(
             "div",
             null,
-            _reactIntlUniversal2.default.get("comment.totalComment", { total: total })
+            _reactIntlUniversal2.default.get("comment.totalComment", { total: total }),
+            isSpeak && _react2.default.createElement(
+              _checkbox2.default,
+              {
+                className: "comment-list-filter-speak",
+                onChange: function onChange(e) {
+                  _this2.setState({
+                    filterSpeak: e.target.checked ? 1 : 0
+                  });
+                  sGetComment({
+                    page: 1,
+                    filterSpeak: e.target.checked ? 1 : 0
+                  });
+                  onPageChange(1);
+                }
+              },
+              _reactIntlUniversal2.default.get("comment.filterSpeak")
+            )
           ),
           list.map(function (item) {
             return _react2.default.createElement(_CommentBox2.default, {

lib/components/ContentItem/index.css

   word-break: break-all;
 }
 
+.comment-item-speak {
+  margin-top: 4px;
+}
+
+.comment-item-speak-message {
+  font-size: 14px;
+  color: #71c135;
+}
+
+.comment-item-speak-audio-wrapper {
+  margin-top: 8px;
+  width: 350px;
+  height: 44px;
+}
+
 .comment-item-bottom {
   display: flex;
   justify-content: flex-end;
     width: 85%;
     margin-left: 10px;
   }
+
+  .comment-item-speak-audio-wrapper {
+    width: 350px;
+  }
 }
 
 @media screen and (max-width: 449px) and (min-width: 365px) {
     width: 80%;
     margin-left: 10px;
   }
+
+  .comment-item-speak-audio-wrapper {
+    width: 266px;
+  }
 }
 
 @media screen and (max-width: 365px) {
     width: 75%;
     margin-left: 10px;
   }
+
+  .comment-item-speak-audio-wrapper {
+    width: 218px;
+  }
 }
 
 @media (max-width: 575px) {

lib/components/ContentItem/index.js

 
 var _ImagePreviewer2 = _interopRequireDefault(_ImagePreviewer);
 
+var _AudioPlayer = require("../AudioPlayer");
+
+var _AudioPlayer2 = _interopRequireDefault(_AudioPlayer);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
           app = _props.app,
           user_id = _props.user_id,
           page = _props.page;
+      var medias = content.medias,
+          isSpeak = content.is_speak;
       var _props$app = this.props.app,
           locale = _props$app.locale,
           showHoverCard = _props$app.showHoverCard,
               __html: (0, _helper.renderContent)(this.renderTextWithReply(newContent, content))
             }
           }),
+          isSpeak && _react2.default.createElement(
+            "div",
+            { className: "comment-item-speak" },
+            _react2.default.createElement(
+              "span",
+              { className: "comment-item-speak-message" },
+              "[",
+              _reactIntlUniversal2.default.get("comment.speakComment"),
+              "]"
+            ),
+            _react2.default.createElement(
+              "div",
+              { className: "comment-item-speak-audio-wrapper" },
+              _react2.default.createElement(_AudioPlayer2.default, { src: medias && medias[0] && medias[0].url })
+            )
+          ),
           // image为空时不渲染comment-item-image
           imageList.length > 0 && imageList[0] !== "" && _react2.default.createElement(
             "div",
                 showReply ? _react2.default.createElement(_icon2.default, { type: "up" }) : _react2.default.createElement(_icon2.default, { type: "down" })
               )
             ) : null,
-            showEdit && app.userId === content.user_id && _react2.default.createElement("i", {
+            showEdit && !isSpeak && app.userId === content.user_id && _react2.default.createElement("i", {
               className: "comment-item-edit",
               onClick: function onClick() {
                 return _this2.props.app.handleEdit({

lib/components/Editor/Emoji.css

-.emoji .item {
-  float: left;
-  width: 40px;
-  height: 40px;
-  cursor: pointer;
-  white-space: nowrap;
-  /* this is required unless you put the helper span closely near the img */
-  text-align: center;
-  margin: 0;
-}
-
-.emoji .item .helper {
-  display: inline-block;
-  height: 100%;
-  vertical-align: middle;
-}
-
-.emoji .item img {
-  margin: 0 auto;
-  vertical-align: middle;
-  padding: 3px;
-}
-
-.emoji .item img:hover {
-  border: 1px solid #40a9ff;
-}
-
-.ant-carousel .slick-dots {
-  height: 5px;
-}
-
-.ant-carousel .slick-dots li button {
-  height: 5px;
-  width: 25px;
-}
-
-.ant-carousel .slick-dots li.slick-active button {
-  width: 32px;
-}
+.emoji .item {
+  float: left;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  white-space: nowrap;
+  /* this is required unless you put the helper span closely near the img */
+  text-align: center;
+  margin: 0;
+}
+
+.emoji .item .helper {
+  display: inline-block;
+  height: 100%;
+  vertical-align: middle;
+}
+
+.emoji .item img {
+  margin: 0 auto;
+  vertical-align: middle;
+  padding: 3px;
+}
+
+.emoji .item img:hover {
+  border: 1px solid #40a9ff;
+}
+
+.ant-carousel .slick-dots {
+  height: 5px;
+}
+
+.ant-carousel .slick-dots li button {
+  height: 5px;
+  width: 25px;
+}
+
+.ant-carousel .slick-dots li.slick-active button {
+  width: 32px;
+}

lib/components/ImagePreviewer/ImagePreviewer.css

-.container .toolbar {
-  border-bottom: 1px solid #f2f2f2;
-  margin: 0 5px;
-  padding-bottom: 10px;
-}
-.container .toolbar .button {
-  padding: 5px 10px;
-  cursor: pointer;
-}
-.container .toolbar .button.reversal i {
-  transform: rotate3d(0, 1, 0, 180deg);
-}
-.container .pictureWrapper {
-  position: relative;
-  text-align: center;
-  margin-top: 15px;
-  padding: 0 5px;
-}
-.container .pictureWrapper .tools {
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-}
-.container .pictureWrapper .tools .item {
-  width: 33%;
-  display: inline-block;
-  height: 100%;
-}
-.container .pictureWrapper .tools .item.left {
-  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined"),
-    auto;
-}
-.container .pictureWrapper .tools .item.shrink {
-  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined"),
-    auto;
-}
-.container .pictureWrapper .tools .item.right {
-  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined"),
-    auto;
-}
-.container .pictureWrapper .picture {
-  max-width: 100%;
-  max-height: 400px;
-}
-.container .pictureWrapper .prev {
-  position: absolute;
-  width: 50px;
-  background-color: transparent;
-  z-index: 100;
-  opacity: 0.5;
-  font-size: 50px;
-  text-align: left;
-  cursor: pointer;
-  left: 5px;
-  top: 0;
-  bottom: 0;
-}
-.container .pictureWrapper .prev:hover {
-  background-color: #fff;
-}
-.container .pictureWrapper .next {
-  position: absolute;
-  width: 50px;
-  background-color: transparent;
-  z-index: 100;
-  opacity: 0.5;
-  font-size: 50px;
-  text-align: left;
-  cursor: pointer;
-  right: 5px;
-  top: 0;
-  bottom: 0;
-}
-.container .pictureWrapper .next:hover {
-  background-color: #fff;
-}
-.container .pictureWrapper .middle {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.container .list {
-  font-size: 0;
-  margin-top: 25px;
-}
-.container .list .wrapper {
-  width: 11.1%;
-  height: 0;
-  padding-bottom: 11.1%;
-  position: relative;
-  display: inline-block;
-  border-radius: 5px;
-  border: 1px solid transparent;
-  opacity: 0.5;
-}
-.container .list .wrapper.active {
-  border: 1px solid #fc4747;
-  opacity: 1;
-}
-.container .list .wrapper .thumbnail {
-  position: absolute;
-  top: 5px;
-  bottom: 5px;
-  left: 5px;
-  right: 5px;
-  background-size: cover;
-  background-position: center;
-  border-radius: 5px;
-  cursor: pointer;
-}
+.container .toolbar {
+  border-bottom: 1px solid #f2f2f2;
+  margin: 0 5px;
+  padding-bottom: 10px;
+}
+.container .toolbar .button {
+  padding: 5px 10px;
+  cursor: pointer;
+}
+.container .toolbar .button.reversal i {
+  transform: rotate3d(0, 1, 0, 180deg);
+}
+.container .pictureWrapper {
+  position: relative;
+  text-align: center;
+  margin-top: 15px;
+  padding: 0 5px;
+}
+.container .pictureWrapper .tools {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+.container .pictureWrapper .tools .item {
+  width: 33%;
+  display: inline-block;
+  height: 100%;
+}
+.container .pictureWrapper .tools .item.left {
+  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined"),
+    auto;
+}
+.container .pictureWrapper .tools .item.shrink {
+  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined"),
+    auto;
+}
+.container .pictureWrapper .tools .item.right {
+  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined"),
+    auto;
+}
+.container .pictureWrapper .picture {
+  max-width: 100%;
+  max-height: 400px;
+}
+.container .pictureWrapper .prev {
+  position: absolute;
+  width: 50px;
+  background-color: transparent;
+  z-index: 100;
+  opacity: 0.5;
+  font-size: 50px;
+  text-align: left;
+  cursor: pointer;
+  left: 5px;
+  top: 0;
+  bottom: 0;
+}
+.container .pictureWrapper .prev:hover {
+  background-color: #fff;
+}
+.container .pictureWrapper .next {
+  position: absolute;
+  width: 50px;
+  background-color: transparent;
+  z-index: 100;
+  opacity: 0.5;
+  font-size: 50px;
+  text-align: left;
+  cursor: pointer;
+  right: 5px;
+  top: 0;
+  bottom: 0;
+}
+.container .pictureWrapper .next:hover {
+  background-color: #fff;
+}
+.container .pictureWrapper .middle {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.container .list {
+  font-size: 0;
+  margin-top: 25px;
+}
+.container .list .wrapper {
+  width: 11.1%;
+  height: 0;
+  padding-bottom: 11.1%;
+  position: relative;
+  display: inline-block;
+  border-radius: 5px;
+  border: 1px solid transparent;
+  opacity: 0.5;
+}
+.container .list .wrapper.active {
+  border: 1px solid #fc4747;
+  opacity: 1;
+}
+.container .list .wrapper .thumbnail {
+  position: absolute;
+  top: 5px;
+  bottom: 5px;
+  left: 5px;
+  right: 5px;
+  background-size: cover;
+  background-position: center;
+  border-radius: 5px;
+  cursor: pointer;
+}

lib/components/ImagePreviewer/ImagePreviewer.less

-.comment-image-preview-container {
-  .toolbar {
-    border-bottom: 1px solid #f2f2f2;
-    margin: 0 5px;
-    padding-bottom: 10px;
-    .button {
-      padding: 5px 10px;
-      cursor: pointer;
-      &.reversal i {
-        transform: rotate3d(0, 1, 0, 180deg);
-      }
-    }
-  }
-  .pictureWrapper {
-    position: relative; // width: 100%;
-    // padding-bottom: 68%;
-    // height: 0;
-    text-align: center;
-    margin-top: 15px;
-    padding: 0 5px;
-    .tools {
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      right: 0;
-      .item {
-        width: 33%;
-        display: inline-block;
-        height: 100%;
-        &.left {
-          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined"),
-            auto;
-        }
-        &.shrink {
-          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined"),
-            auto;
-        }
-        &.right {
-          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined"),
-            auto;
-        }
-      }
-    }
-    .picture {
-      max-width: 100%;
-      max-height: 400px;
-    }
-    .tool() {
-      position: absolute;
-      width: 50px;
-      background-color: transparent;
-      z-index: 100;
-      opacity: 0.5;
-      font-size: 50px;
-      text-align: left;
-      cursor: pointer;
-      &:hover {
-        background-color: #fff;
-      }
-    }
-    .prev {
-      .tool();
-      left: 5px;
-      top: 0;
-      bottom: 0;
-    }
-    .next {
-      .tool();
-      right: 5px;
-      top: 0;
-      bottom: 0;
-    }
-    .middle {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-    } // .picture {
-    //     position: absolute;
-    //     bottom: 0;
-    //     top: 0;
-    //     left: 5px;
-    //     right: 5px;
-    //     background-size: contain;
-    //     background-position: center;
-    // }
-  }
-  .list {
-    font-size: 0;
-    margin-top: 25px;
-    .wrapper {
-      width: 11.1%;
-      height: 0;
-      padding-bottom: 11.1%;
-      position: relative;
-      display: inline-block;
-      border-radius: 5px;
-      border: 1px solid transparent;
-      opacity: 0.5;
-      &.active {
-        border: 1px solid #fc4747;
-        opacity: 1;
-      }
-      .thumbnail {
-        position: absolute;
-        top: 5px;
-        bottom: 5px;
-        left: 5px;
-        right: 5px;
-        background-size: cover;
-        background-position: center;
-        border-radius: 5px;
-        cursor: pointer;
-      }
-    }
-  }
-}
+.comment-image-preview-container {
+  .toolbar {
+    border-bottom: 1px solid #f2f2f2;
+    margin: 0 5px;
+    padding-bottom: 10px;
+    .button {
+      padding: 5px 10px;
+      cursor: pointer;
+      &.reversal i {
+        transform: rotate3d(0, 1, 0, 180deg);
+      }
+    }
+  }
+  .pictureWrapper {
+    position: relative; // width: 100%;
+    // padding-bottom: 68%;
+    // height: 0;
+    text-align: center;
+    margin-top: 15px;
+    padding: 0 5px;
+    .tools {
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      .item {
+        width: 33%;
+        display: inline-block;
+        height: 100%;
+        &.left {
+          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined"),
+            auto;
+        }
+        &.shrink {
+          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined"),
+            auto;
+        }
+        &.right {
+          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined"),
+            auto;
+        }
+      }
+    }
+    .picture {
+      max-width: 100%;
+      max-height: 400px;
+    }
+    .tool() {
+      position: absolute;
+      width: 50px;
+      background-color: transparent;
+      z-index: 100;
+      opacity: 0.5;
+      font-size: 50px;
+      text-align: left;
+      cursor: pointer;
+      &:hover {
+        background-color: #fff;
+      }
+    }
+    .prev {
+      .tool();
+      left: 5px;
+      top: 0;
+      bottom: 0;
+    }
+    .next {
+      .tool();
+      right: 5px;
+      top: 0;
+      bottom: 0;
+    }
+    .middle {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+    } // .picture {
+    //     position: absolute;
+    //     bottom: 0;
+    //     top: 0;
+    //     left: 5px;
+    //     right: 5px;
+    //     background-size: contain;
+    //     background-position: center;
+    // }
+  }
+  .list {
+    font-size: 0;
+    margin-top: 25px;
+    .wrapper {
+      width: 11.1%;
+      height: 0;
+      padding-bottom: 11.1%;
+      position: relative;
+      display: inline-block;
+      border-radius: 5px;
+      border: 1px solid transparent;
+      opacity: 0.5;
+      &.active {
+        border: 1px solid #fc4747;
+        opacity: 1;
+      }
+      .thumbnail {
+        position: absolute;
+        top: 5px;
+        bottom: 5px;
+        left: 5px;
+        right: 5px;
+        background-size: cover;
+        background-position: center;
+        border-radius: 5px;
+        cursor: pointer;
+      }
+    }
+  }
+}

lib/components/ImagePreviewer/README.md

-+ big //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined
-+ small //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined
-+ prev //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined
++ big //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined
++ small //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined
++ prev //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined
 + next //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined

lib/components/RenderText/index.js.map

-{"version":3,"sources":["../../../src/components/RenderText/index.js"],"names":["App","__html","text"],"mappings":";;;;;;AAAA;;;;AACA;;;;AAEA,IAAMA,MAAM,SAANA,GAAM;AAAA,SACV;AACE,eAAU,sBADZ;AAEE,6BAAyB;AACvBC,cAAQ,2BAAcC,IAAd;AADe;AAF3B,IADU;AAAA,CAAZ;;kBASeF,G","file":"index.js","sourcesContent":["import React from \"react\";\nimport { renderContent } from \"../../helper\";\n\nconst App = text => (\n  <div\n    className=\"comment-item-content\"\n    dangerouslySetInnerHTML={{\n      __html: renderContent(text)\n    }}\n  />\n);\n\nexport default App;\n"]}
+{"version":3,"sources":["../../../src/components/RenderText/index.js"],"names":["App","__html","text"],"mappings":";;;;;;AAAA;;;;AACA;;;;AAEA,IAAMA,MAAM,SAANA,GAAM;AAAA,SACV;AACE,eAAU,sBADZ;AAEE,6BAAyB;AACvBC,cAAQ,2BAAcC,IAAd;AADe;AAF3B,IADU;AAAA,CAAZ;;kBASeF,G","file":"index.js","sourcesContent":["import React from \"react\";\r\nimport { renderContent } from \"../../helper\";\r\n\r\nconst App = text => (\r\n  <div\r\n    className=\"comment-item-content\"\r\n    dangerouslySetInnerHTML={{\r\n      __html: renderContent(text)\r\n    }}\r\n  />\r\n);\r\n\r\nexport default App;\r\n"]}

lib/index.js

 if (process.env.NODE_ENV !== "production") {
   renderComment({
     id: "root-comment",
-    type: 1,
-    businessId: "test",
+    type: 3,
+    businessId: "5ea8320dedd68200018e733d",
     businessUserId: 4,
     userId: 58297,
     currentUser: {

lib/lang/en-US.js

   "comment.totalComment": "Total {total, plural, =1 {one comment} other {# comments}}",
   "comment.reply": "Reply",
   "comment.moreComment": "More comments",
+  "comment.filterSpeak": "Show imitations only",
+  "comment.speakComment": "Imitation audio",
 
   "reply.totalReply": "Total {total, plural, =1 {one reply} other {# replies}}",
   "reply.moreReply": "More replies",

lib/lang/en-US.js.map

-{"version":3,"sources":["../../src/lang/en-US.js"],"names":["USdata"],"mappings":";;;;;AAAA,IAAMA,SAAS;AACb,2BAAyB,uBADZ;AAEb,wBAAsB,eAFT;AAGb,sBAAoB,2BAHP;AAIb,sBAAoB,MAJP;AAKb,sBAAoB,iBALP;AAMb,wBAAsB,iCANT;AAOb,sBAAoB,QAPP;;AASb,qBAAmB,SATN;AAUb,0BACE,4DAXW;AAYb,mBAAiB,OAZJ;AAab,yBAAuB,eAbV;;AAeb,sBAAoB,yDAfP;AAgBb,qBAAmB,cAhBN;AAiBb,oBAAkB,cAjBL;;AAmBb,sBAAoB,MAnBP;AAoBb,0BAAwB,kBApBX;;AAsBb,sBAAoB,SAtBP;AAuBb,mBAAiB,SAvBJ;AAwBb,uBAAqB,QAxBR;AAyBb,uBAAqB,QAzBR;;AA2Bb,2BAAyB,kBA3BZ;AA4Bb,wBAAsB,cA5BT;AA6Bb,qBAAmB,kBA7BN;AA8Bb,qBAAmB,eA9BN;AA+Bb,yBAAuB,kBA/BV;AAgCb,0BAAwB,YAhCX;AAiCb,+BAA6B,SAjChB;AAkCb,yBAAuB;AAlCV,CAAf;;kBAqCeA,M","file":"en-US.js","sourcesContent":["const USdata = {\n  \"editor.alreadyEntered\": \"{count} words entered\",\n  \"editor.placeholder\": \"Say something\",\n  \"editor.maxLength\": \"Maximum {maxLength} words\",\n  \"editor.SubmitBtn\": \"Send\",\n  \"editor.uploadTip\": \"Upload pictures\",\n  \"editor.uploadCount\": \"(You could upload {count} more)\",\n  \"editor.uploadBtn\": \"Upload\",\n\n  \"comment.tourist\": \"Visitor\",\n  \"comment.totalComment\":\n    \"Total {total, plural, =1 {one comment} other {# comments}}\",\n  \"comment.reply\": \"Reply\",\n  \"comment.moreComment\": \"More comments\",\n\n  \"reply.totalReply\": \"Total {total, plural, =1 {one reply} other {# replies}}\",\n  \"reply.moreReply\": \"More replies\",\n  \"reply.collapse\": \"Fold replies\",\n\n  \"picture.collapse\": \"Fold\",\n  \"picture.viewOriginal\": \"See the original\",\n\n  \"popConfirm.title\": \"Delete?\",\n  \"popConfirm.ok\": \"Confirm\",\n  \"popConfirm.cancel\": \"Cancel\",\n  \"popConfirm.delete\": \"Delete\",\n\n  \"message.noMoreComment\": \"No more comments\",\n  \"message.noMoreData\": \"No more data\",\n  \"message.notNull\": \"It's still empty\",\n  \"message.success\": \"Comments sent\",\n  \"message.replyNoNull\": \"It's still empty\",\n  \"message.replySuccess\": \"Reply sent\",\n  \"message.cancelLickSuccess\": \"Unliked\",\n  \"message.likeSuccess\": \"Liked\"\n};\n\nexport default USdata;\n"]}
+{"version":3,"sources":["../../src/lang/en-US.js"],"names":["USdata"],"mappings":";;;;;AAAA,IAAMA,SAAS;AACb,2BAAyB,uBADZ;AAEb,wBAAsB,eAFT;AAGb,sBAAoB,2BAHP;AAIb,sBAAoB,MAJP;AAKb,sBAAoB,iBALP;AAMb,wBAAsB,iCANT;AAOb,sBAAoB,QAPP;;AASb,qBAAmB,SATN;AAUb,0BACE,4DAXW;AAYb,mBAAiB,OAZJ;AAab,yBAAuB,eAbV;AAcb,yBAAuB,sBAdV;AAeb,0BAAwB,iBAfX;;AAiBb,sBAAoB,yDAjBP;AAkBb,qBAAmB,cAlBN;AAmBb,oBAAkB,cAnBL;;AAqBb,sBAAoB,MArBP;AAsBb,0BAAwB,kBAtBX;;AAwBb,sBAAoB,SAxBP;AAyBb,mBAAiB,SAzBJ;AA0Bb,uBAAqB,QA1BR;AA2Bb,uBAAqB,QA3BR;;AA6Bb,2BAAyB,kBA7BZ;AA8Bb,wBAAsB,cA9BT;AA+Bb,qBAAmB,kBA/BN;AAgCb,qBAAmB,eAhCN;AAiCb,yBAAuB,kBAjCV;AAkCb,0BAAwB,YAlCX;AAmCb,+BAA6B,SAnChB;AAoCb,yBAAuB;AApCV,CAAf;;kBAuCeA,M","file":"en-US.js","sourcesContent":["const USdata = {\n  \"editor.alreadyEntered\": \"{count} words entered\",\n  \"editor.placeholder\": \"Say something\",\n  \"editor.maxLength\": \"Maximum {maxLength} words\",\n  \"editor.SubmitBtn\": \"Send\",\n  \"editor.uploadTip\": \"Upload pictures\",\n  \"editor.uploadCount\": \"(You could upload {count} more)\",\n  \"editor.uploadBtn\": \"Upload\",\n\n  \"comment.tourist\": \"Visitor\",\n  \"comment.totalComment\":\n    \"Total {total, plural, =1 {one comment} other {# comments}}\",\n  \"comment.reply\": \"Reply\",\n  \"comment.moreComment\": \"More comments\",\n  \"comment.filterSpeak\": \"Show imitations only\",\n  \"comment.speakComment\": \"Imitation audio\",\n\n  \"reply.totalReply\": \"Total {total, plural, =1 {one reply} other {# replies}}\",\n  \"reply.moreReply\": \"More replies\",\n  \"reply.collapse\": \"Fold replies\",\n\n  \"picture.collapse\": \"Fold\",\n  \"picture.viewOriginal\": \"See the original\",\n\n  \"popConfirm.title\": \"Delete?\",\n  \"popConfirm.ok\": \"Confirm\",\n  \"popConfirm.cancel\": \"Cancel\",\n  \"popConfirm.delete\": \"Delete\",\n\n  \"message.noMoreComment\": \"No more comments\",\n  \"message.noMoreData\": \"No more data\",\n  \"message.notNull\": \"It's still empty\",\n  \"message.success\": \"Comments sent\",\n  \"message.replyNoNull\": \"It's still empty\",\n  \"message.replySuccess\": \"Reply sent\",\n  \"message.cancelLickSuccess\": \"Unliked\",\n  \"message.likeSuccess\": \"Liked\"\n};\n\nexport default USdata;\n"]}

lib/lang/zh-CN.js

   "comment.totalComment": "共{total}条评论",
   "comment.reply": "回复",
   "comment.moreComment": "更多评论",
+  "comment.filterSpeak": "只显示跟读",
+  "comment.speakComment": "跟读语音",
 
   "reply.totalReply": "共{total}条回复",
   "reply.moreReply": "更多回复",

lib/lang/zh-CN.js.map

-{"version":3,"sources":["../../src/lang/zh-CN.js"],"names":["CNdata"],"mappings":";;;;;AAAA,IAAMA,SAAS;AACb,2BAAyB,yBADZ;AAEb,wBAAsB,UAFT;AAGb,sBAAoB,iBAHP;AAIb,sBAAoB,IAJP;AAKb,sBAAoB,MALP;AAMb,wBAAsB,mBANT;AAOb,sBAAoB,IAPP;;AASb,qBAAmB,IATN;AAUb,0BAAwB,aAVX;AAWb,mBAAiB,IAXJ;AAYb,yBAAuB,MAZV;;AAcb,sBAAoB,aAdP;AAeb,qBAAmB,MAfN;AAgBb,oBAAkB,MAhBL;;AAkBb,sBAAoB,IAlBP;AAmBb,0BAAwB,MAnBX;;AAqBb,sBAAoB,QArBP;AAsBb,mBAAiB,IAtBJ;AAuBb,uBAAqB,IAvBR;AAwBb,uBAAqB,IAxBR;;AA0Bb,2BAAyB,SA1BZ;AA2Bb,wBAAsB,UA3BT;AA4Bb,qBAAmB,OA5BN;AA6Bb,qBAAmB,QA7BN;AA8Bb,yBAAuB,OA9BV;AA+Bb,0BAAwB,QA/BX;AAgCb,+BAA6B,QAhChB;AAiCb,yBAAuB;AAjCV,CAAf;;kBAoCeA,M","file":"zh-CN.js","sourcesContent":["const CNdata = {\n  \"editor.alreadyEntered\": \"已输入{count}/{maxLength}字\",\n  \"editor.placeholder\": \"说点什么吧...\",\n  \"editor.maxLength\": \"字数上限{maxLength}\",\n  \"editor.SubmitBtn\": \"发送\",\n  \"editor.uploadTip\": \"上传图片\",\n  \"editor.uploadCount\": \"(您还能上传{count}张图片)\",\n  \"editor.uploadBtn\": \"上传\",\n\n  \"comment.tourist\": \"游客\",\n  \"comment.totalComment\": \"共{total}条评论\",\n  \"comment.reply\": \"回复\",\n  \"comment.moreComment\": \"更多评论\",\n\n  \"reply.totalReply\": \"共{total}条回复\",\n  \"reply.moreReply\": \"更多回复\",\n  \"reply.collapse\": \"收起回复\",\n\n  \"picture.collapse\": \"收起\",\n  \"picture.viewOriginal\": \"查看原图\",\n\n  \"popConfirm.title\": \"确定要删除吗\",\n  \"popConfirm.ok\": \"确定\",\n  \"popConfirm.cancel\": \"取消\",\n  \"popConfirm.delete\": \"删除\",\n\n  \"message.noMoreComment\": \"没有更多评论了\",\n  \"message.noMoreData\": \"没有更多数据了！\",\n  \"message.notNull\": \"没写内容呢\",\n  \"message.success\": \"评论已发送！\",\n  \"message.replyNoNull\": \"没写内容呢\",\n  \"message.replySuccess\": \"回复已发送！\",\n  \"message.cancelLickSuccess\": \"已取消点赞！\",\n  \"message.likeSuccess\": \"已赞！\"\n};\n\nexport default CNdata;\n"]}
+{"version":3,"sources":["../../src/lang/zh-CN.js"],"names":["CNdata"],"mappings":";;;;;AAAA,IAAMA,SAAS;AACb,2BAAyB,yBADZ;AAEb,wBAAsB,UAFT;AAGb,sBAAoB,iBAHP;AAIb,sBAAoB,IAJP;AAKb,sBAAoB,MALP;AAMb,wBAAsB,mBANT;AAOb,sBAAoB,IAPP;;AASb,qBAAmB,IATN;AAUb,0BAAwB,aAVX;AAWb,mBAAiB,IAXJ;AAYb,yBAAuB,MAZV;AAab,yBAAuB,OAbV;AAcb,0BAAwB,MAdX;;AAgBb,sBAAoB,aAhBP;AAiBb,qBAAmB,MAjBN;AAkBb,oBAAkB,MAlBL;;AAoBb,sBAAoB,IApBP;AAqBb,0BAAwB,MArBX;;AAuBb,sBAAoB,QAvBP;AAwBb,mBAAiB,IAxBJ;AAyBb,uBAAqB,IAzBR;AA0Bb,uBAAqB,IA1BR;;AA4Bb,2BAAyB,SA5BZ;AA6Bb,wBAAsB,UA7BT;AA8Bb,qBAAmB,OA9BN;AA+Bb,qBAAmB,QA/BN;AAgCb,yBAAuB,OAhCV;AAiCb,0BAAwB,QAjCX;AAkCb,+BAA6B,QAlChB;AAmCb,yBAAuB;AAnCV,CAAf;;kBAsCeA,M","file":"zh-CN.js","sourcesContent":["const CNdata = {\n  \"editor.alreadyEntered\": \"已输入{count}/{maxLength}字\",\n  \"editor.placeholder\": \"说点什么吧...\",\n  \"editor.maxLength\": \"字数上限{maxLength}\",\n  \"editor.SubmitBtn\": \"发送\",\n  \"editor.uploadTip\": \"上传图片\",\n  \"editor.uploadCount\": \"(您还能上传{count}张图片)\",\n  \"editor.uploadBtn\": \"上传\",\n\n  \"comment.tourist\": \"游客\",\n  \"comment.totalComment\": \"共{total}条评论\",\n  \"comment.reply\": \"回复\",\n  \"comment.moreComment\": \"更多评论\",\n  \"comment.filterSpeak\": \"只显示跟读\",\n  \"comment.speakComment\": \"跟读语音\",\n\n  \"reply.totalReply\": \"共{total}条回复\",\n  \"reply.moreReply\": \"更多回复\",\n  \"reply.collapse\": \"收起回复\",\n\n  \"picture.collapse\": \"收起\",\n  \"picture.viewOriginal\": \"查看原图\",\n\n  \"popConfirm.title\": \"确定要删除吗\",\n  \"popConfirm.ok\": \"确定\",\n  \"popConfirm.cancel\": \"取消\",\n  \"popConfirm.delete\": \"删除\",\n\n  \"message.noMoreComment\": \"没有更多评论了\",\n  \"message.noMoreData\": \"没有更多数据了！\",\n  \"message.notNull\": \"没写内容呢\",\n  \"message.success\": \"评论已发送！\",\n  \"message.replyNoNull\": \"没写内容呢\",\n  \"message.replySuccess\": \"回复已发送！\",\n  \"message.cancelLickSuccess\": \"已取消点赞！\",\n  \"message.likeSuccess\": \"已赞！\"\n};\n\nexport default CNdata;\n"]}

lib/version.json

 {
     "name":       "comment",
-    "buildDate":  1582467062540,
+    "buildDate":  1588149501351,
     "version":    "1.0.4",
-    "numCommits": 204,
-    "hash":       "016964f",
+    "numCommits": 211,
+    "hash":       "7a67067",
     "dirty":      true
 }

package.json

   "dependencies": {
     "antd": "^3.19.3",
     "axios": "^0.18.0",
-    "dayjs": "^1.7.2",
+    "dayjs": "^1.8.25",
     "js-cookie": "^2.2.0",
     "prop-types": "^15.6.2",
     "react": "^16.4.1",

src/App.js

   /**
    * 获取评论列表
    */
-  sGetComment({ page = 1 } = {}) {
+  sGetComment({ page = 1, filterSpeak = 0 } = {}) {
     const { pageType } = this.props;
     this.handleChangeLoading("sGetComment", true);
     const { API, type, businessId, limit } = this.props;
     this.axios
       .get(
-        `${API}/comments?type=${type}&business_id=${businessId}&page=${page}&limit=${limit}`
+        `${API}/comments?type=${type}&business_id=${businessId}&is_speak=${filterSpeak}&page=${page}&limit=${limit}`
       )
       .then(response => {
         const { list, page, total } = response.data;

src/components/AudioPlayer/index.js

+import React from "react";
+import { Slider, Icon } from "antd";
+import dayjs from "dayjs";
+import durationPlugin from "dayjs/plugin/duration";
+import utcPlugin from "dayjs/plugin/utc";
+import "./index.less";
+
+dayjs.extend(durationPlugin);
+dayjs.extend(utcPlugin);
+
+class AudioPlayer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      duration: 0,
+      currentDuration: 0,
+      isPlaying: false
+    };
+  }
+
+  componentDidMount() {
+    if (this.player) {
+      const { src } = this.props;
+      this.player.oncanplay = event =>
+        this.setState({ duration: event.target.duration });
+      this.player.onended = () =>
+        this.setState({ isPlaying: false, currentDuration: 0 });
+      this.player.onpause = () => this.setState({ isPlaying: false });
+      this.player.onplay = () => this.setState({ isPlaying: true });
+      this.player.ontimeupdate = event =>
+        this.setState({ currentDuration: event.target.currentTime });
+      this.player.src = src;
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.src !== prevProps.src) {
+      this.player.oncanplay = event =>
+        this.setState({ duration: event.target.duration });
+      this.player.onended = () =>
+        this.setState({ isPlaying: false, currentDuration: 0 });
+      this.player.onpause = () => this.setState({ isPlaying: false });
+      this.player.onplay = () => this.setState({ isPlaying: true });
+      this.player.ontimeupdate = event =>
+        this.setState({ currentDuration: event.target.currentTime });
+      this.player.src = this.props.src;
+    }
+  }
+
+  clickPlayOrPause(isPlaying) {
+    if (!this.player) {
+      return;
+    }
+    if (isPlaying) {
+      this.player.pause();
+    } else {
+      // 如果是播放，先暂停其他的播放
+      const playerList = document.getElementsByTagName("audio");
+      if (playerList) {
+        Array.from(playerList).forEach(player => {
+          if (!player.paused) {
+            player.pause();
+          }
+        });
+      }
+      this.player.play();
+    }
+  }
+
+  render() {
+    const { currentDuration, isPlaying, duration } = this.state;
+    return (
+      <div className="comment-item-speak-audio-container">
+        {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+        <audio
+          ref={ref => {
+            this.player = ref;
+          }}
+          style={{ display: "none" }}
+        />
+        <span
+          className="icon"
+          onClick={() => {
+            this.clickPlayOrPause(isPlaying);
+          }}
+        >
+          {isPlaying ? (
+            <Icon className="pause" type="pause" />
+          ) : (
+            <i className="schedule schedule-icon_image_audio" />
+          )}
+        </span>
+        <Slider
+          step={0.001}
+          className="slider"
+          tooltipVisible={false}
+          value={currentDuration}
+          max={duration}
+          onChange={value => {
+            if (this.player) {
+              this.player.currentTime = value;
+            }
+          }}
+        />
+        <span className="time">
+          {dayjs
+            .utc(dayjs.duration(currentDuration, "seconds").asMilliseconds())
+            .format("mm:ss")}
+          /
+          {dayjs
+            .utc(dayjs.duration(duration, "seconds").asMilliseconds())
+            .format("mm:ss")}
+        </span>
+      </div>
+    );
+  }
+}
+
+export default AudioPlayer;

src/components/AudioPlayer/index.less

+.comment-item-speak-audio-container {
+  background-color: #f5f5f5;
+  border: 1px solid rgba(210, 210, 210, 1);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  .icon {
+    cursor: pointer;
+    width: 28px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    border-radius: 14px;
+    background-color: #fff;
+    color: #71c135;
+    margin-left: 12px;
+    font-size: 14px;
+  }
+
+  .slider {
+    margin: 0 0 0 16px;
+    width: 195px;
+
+    :global {
+      .ant-slider-rail {
+        background-color: #dfdfdf;
+      }
+    }
+  }
+
+  .time {
+    margin-left: 14px;
+    color: #848484;
+    font-size: 12px;
+  }
+}
+
+@media screen and (max-width: 616px) and (min-width: 449px) {
+  .comment-item-speak-audio-container {
+    .slider {
+      width: 195px;
+    }
+  }
+}
+@media screen and (max-width: 449px) and (min-width: 365px) {
+  .comment-item-speak-audio-container {
+    .slider {
+      width: 114px;
+    }
+  }
+}
+@media screen and (max-width: 365px) {
+  .comment-item-speak-audio-container {
+    .slider {
+      width: 60px;
+    }
+  }
+}

src/components/CommentList/index.css

 .comment-list-pagination {
   text-align: center;
 }
+
+.comment-list-filter-speak {
+  margin-left: 20px;
+  font-size: 14px;
+  color: rgba(93, 93, 93, 0.65);
+}
+
+@media screen and (max-width: 365px) {
+  .comment-list-filter-speak {
+    float: right;
+  }
+}

src/components/CommentList/index.js

 import React, { Component } from "react";
-import { Spin, Pagination } from "antd";
+import { Spin, Pagination, Checkbox } from "antd";
 import intl from "react-intl-universal";
 import Comment from "../../Comment";
 import CommentBox from "../CommentBox";
 class CommentList extends Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      filterSpeak: 0
+    };
   }
 
   componentWillMount() {
       onPageChange,
       onGetMoreBtnClick
     } = this.props.app;
+    const { filterSpeak } = this.state;
     if (pageType === "slice") {
       // 截断多余评论，通过点击查看更多跳转
       return (
           <div
             className="comment-list-show-more"
             onClick={() => {
-              sGetComment({ page: page + 1 });
+              sGetComment({ page: page + 1, filterSpeak });
               onPageChange(page + 1);
             }}
           >
             current={page}
             total={total}
             onChange={p => {
-              sGetComment({ page: p });
+              sGetComment({ page: p, filterSpeak });
               onPageChange(p);
             }}
           />
   }
 
   render() {
-    const { list, total, loading } = this.props.app;
+    const {
+      list,
+      total,
+      loading,
+      isSpeak,
+      sGetComment,
+      onPageChange
+    } = this.props.app;
 
     const spinning = Boolean(
       loading.sGetComment || loading.sCommentFavor || loading.sReplyFavor
       <div>
         <Spin spinning={spinning}>
           {/* <div>共 {total} 条评论</div> */}
-          <div>{intl.get("comment.totalComment", { total })}</div>
+          <div>
+            {intl.get("comment.totalComment", { total })}
+            {isSpeak && (
+              <Checkbox
+                className="comment-list-filter-speak"
+                onChange={e => {
+                  this.setState({
+                    filterSpeak: e.target.checked ? 1 : 0
+                  });
+                  sGetComment({
+                    page: 1,
+                    filterSpeak: e.target.checked ? 1 : 0
+                  });
+                  onPageChange(1);
+                }}
+              >
+                {intl.get("comment.filterSpeak")}
+              </Checkbox>
+            )}
+          </div>
           {list.map(item => (
             <CommentBox
               content={item}

src/components/ContentItem/index.css

   word-break: break-all;
 }
 
+.comment-item-speak {
+  margin-top: 4px;
+}
+
+.comment-item-speak-message {
+  font-size: 14px;
+  color: #71c135;
+}
+
+.comment-item-speak-audio-wrapper {
+  margin-top: 8px;
+  width: 350px;
+  height: 44px;
+}
+
 .comment-item-bottom {
   display: flex;
   justify-content: flex-end;
     width: 85%;
     margin-left: 10px;
   }
+
+  .comment-item-speak-audio-wrapper {
+    width: 350px;
+  }
 }
 
 @media screen and (max-width: 449px) and (min-width: 365px) {
     width: 80%;
     margin-left: 10px;
   }
+
+  .comment-item-speak-audio-wrapper {
+    width: 266px;
+  }
 }
 
 @media screen and (max-width: 365px) {
     width: 75%;
     margin-left: 10px;
   }
+
+  .comment-item-speak-audio-wrapper {
+    width: 218px;
+  }
 }
 
 @media (max-width: 575px) {

src/components/ContentItem/index.js

 import { IMAGE_SPLIT } from "../../constant";
 import "./index.css";
 import ImagePreviewer from "../ImagePreviewer/ImagePreviewer";
+import AudioPlayer from "../AudioPlayer";
 
 // dayjs.locale("zh-cn");
 dayjs.extend(relativeTime);
       user_id,
       page
     } = this.props;
+    const { medias, is_speak: isSpeak } = content;
     const { locale, showHoverCard, showEdit } = this.props.app;
     const { showInput } = this.state;
     let newContent = content.content;
               )
             }}
           />
+
+          {isSpeak && (
+            <div className="comment-item-speak">
+              <span className="comment-item-speak-message">
+                [{intl.get("comment.speakComment")}]
+              </span>
+              <div className="comment-item-speak-audio-wrapper">
+                <AudioPlayer src={medias && medias[0] && medias[0].url} />
+              </div>
+            </div>
+          )}
           {// image为空时不渲染comment-item-image
-          imageList.length > 0 && imageList[0] !== "" && (
-            <div className="comment-item-image">
-              {!this.state.showPreviewer &&
-                imgs.map((item, index) => {
-                  if (item.type === "divider") {
+          imageList.length > 0 &&
+            imageList[0] !== "" && (
+              <div className="comment-item-image">
+                {!this.state.showPreviewer &&
+                  imgs.map((item, index) => {
+                    if (item.type === "divider") {
+                      return (
+                        <div className="comment-item-image-wrapper" key={index}>
+                          <div className="comment-img-divider" />
+                          {/* <img src={item} alt={item} className="comment-img" /> */}
+                        </div>
+                      );
+                    }
                     return (
-                      <div className="comment-item-image-wrapper" key={index}>
-                        <div className="comment-img-divider" />
+                      <div
+                        className="comment-item-image-wrapper"
+                        key={index}
+                        onClick={() => {
+                          let i = index;
+                          if (needClear) {
+                            if (index > 3) {
+                              i -= 1;
+                            }
+                            if (index > 7) {
+                              i -= 1;
+                            }
+                          }
+                          this.showPreviewer(i);
+                        }}
+                      >
+                        <div
+                          style={{ backgroundImage: `url(${item})` }}
+                          className="comment-img-thumbnail"
+                        />
                         {/* <img src={item} alt={item} className="comment-img" /> */}
                       </div>
                     );
-                  }
-                  return (
-                    <div
-                      className="comment-item-image-wrapper"
-                      key={index}
-                      onClick={() => {
-                        let i = index;
-                        if (needClear) {
-                          if (index > 3) {
-                            i -= 1;
-                          }
-                          if (index > 7) {
-                            i -= 1;
-                          }
-                        }
-                        this.showPreviewer(i);
-                      }}
-                    >
-                      <div
-                        style={{ backgroundImage: `url(${item})` }}
-                        className="comment-img-thumbnail"
-                      />
-                      {/* <img src={item} alt={item} className="comment-img" /> */}
-                    </div>
-                  );
-                })}
-              {this.state.showPreviewer && (
-                <ImagePreviewer
-                  list={imageList}
-                  index={this.state.previewerIndex}
-                  onFold={this.hidePreviewer}
-                />
-              )}
-              <div className="clearfix" />
-            </div>
-          )}
+                  })}
+                {this.state.showPreviewer && (
+                  <ImagePreviewer
+                    list={imageList}
+                    index={this.state.previewerIndex}
+                    onFold={this.hidePreviewer}
+                  />
+                )}
+                <div className="clearfix" />
+              </div>
+            )}
           <div className="comment-item-bottom">
             {content.reply_count ? (
               <div>
                 </a>
               </div>
             ) : null}
-            {showEdit && app.userId === content.user_id && (
-              <i
-                className="comment-item-edit"
-                onClick={() =>
-                  this.props.app.handleEdit({
-                    action,
-                    replyId,
-                    commentId,
-                    userId: content.user_id,
-                    content,
-                    replyPage: page
-                  })
-                }
-              />
-            )}
+            {showEdit &&
+              !isSpeak &&
+              app.userId === content.user_id && (
+                <i
+                  className="comment-item-edit"
+                  onClick={() =>
+                    this.props.app.handleEdit({
+                      action,
+                      replyId,
+                      commentId,
+                      userId: content.user_id,
+                      content,
+                      replyPage: page
+                    })
+                  }
+                />
+              )}
             {app.userId === content.user_id && (
               <Popconfirm
                 // title="确定要删除吗?"
                 }
               />
             </div>
-            <span>&nbsp;{content.favor_count}</span>
+            <span>
+              &nbsp;
+              {content.favor_count}
+            </span>
             <div
               onClick={this.handleToggleInput}
               className="comment-item-reply"

src/index.js

 if (process.env.NODE_ENV !== "production") {
   renderComment({
     id: "root-comment",
-    type: 1,
-    businessId: "test",
+    type: 3,
+    businessId: "5ea8320dedd68200018e733d",
     businessUserId: 4,
     userId: 58297,
     currentUser: {

src/lang/en-US.js

     "Total {total, plural, =1 {one comment} other {# comments}}",
   "comment.reply": "Reply",
   "comment.moreComment": "More comments",
+  "comment.filterSpeak": "Show imitations only",
+  "comment.speakComment": "Imitation audio",
 
   "reply.totalReply": "Total {total, plural, =1 {one reply} other {# replies}}",
   "reply.moreReply": "More replies",

src/lang/zh-CN.js

   "comment.totalComment": "共{total}条评论",
   "comment.reply": "回复",
   "comment.moreComment": "更多评论",
+  "comment.filterSpeak": "只显示跟读",
+  "comment.speakComment": "跟读语音",
 
   "reply.totalReply": "共{total}条回复",
   "reply.moreReply": "更多回复",