feat: 支持跟读

lib/App.js

@@ -1,11 +1,11 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RenderText = exports.Editor = undefined;
 
-var _message2 = require("antd/es/message");
+var _message2 = require('antd/es/message');
 
 var _message3 = _interopRequireDefault(_message2);
 
@@ -13,57 +13,57 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 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/message/style");
+require('antd/es/message/style');
 
-var _react = require("react");
+var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _propTypes = require("prop-types");
+var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
-var _axios = require("axios");
+var _axios = require('axios');
 
 var _axios2 = _interopRequireDefault(_axios);
 
-var _jsCookie = require("js-cookie");
+var _jsCookie = require('js-cookie');
 
 var _jsCookie2 = _interopRequireDefault(_jsCookie);
 
-var _reactIntlUniversal = require("react-intl-universal");
+var _reactIntlUniversal = require('react-intl-universal');
 
 var _reactIntlUniversal2 = _interopRequireDefault(_reactIntlUniversal);
 
-var _constant = require("./constant");
+var _constant = require('./constant');
 
-var _Comment = require("./Comment");
+var _Comment = require('./Comment');
 
-var _helper = require("./helper");
+var _helper = require('./helper');
 
-var _CommentInput = require("./components/CommentInput");
+var _CommentInput = require('./components/CommentInput');
 
 var _CommentInput2 = _interopRequireDefault(_CommentInput);
 
-var _CommentList = require("./components/CommentList");
+var _CommentList = require('./components/CommentList');
 
 var _CommentList2 = _interopRequireDefault(_CommentList);
 
-var _Editor = require("./components/Editor");
+var _Editor = require('./components/Editor');
 
 var _Editor2 = _interopRequireDefault(_Editor);
 
-var _RenderText = require("./components/RenderText");
+var _RenderText = require('./components/RenderText');
 
 var _RenderText2 = _interopRequireDefault(_RenderText);
 
-var _EditComment = require("./components/EditComment/EditComment");
+var _EditComment = require('./components/EditComment/EditComment');
 
 var _EditComment2 = _interopRequireDefault(_EditComment);
 
-var _lang = require("./lang");
+var _lang = require('./lang');
 
-require("./App.css");
+require('./App.css');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -94,13 +94,13 @@ var App = function (_Component) {
       // 是否没有更多评论了
       isNoMoreComment: false,
       initDone: false,
-      locale: "zh-CN",
+      locale: 'zh-CN',
       editModalVisible: false,
-      action: "",
-      replyId: "",
-      commentId: "",
-      userId: "",
-      content: "",
+      action: '',
+      replyId: '',
+      commentId: '',
+      userId: '',
+      content: '',
       replyPage: 1,
       emojiList: []
     };
@@ -123,16 +123,16 @@ var App = function (_Component) {
   }
 
   _createClass(App, [{
-    key: "componentWillMount",
+    key: 'componentWillMount',
     value: function componentWillMount() {
       this.axios = _axios2.default;
       this.axios.defaults.withCredentials = true;
       if (this.props.token) {
-        this.axios.defaults.headers.common["Authorization"] = "Bearer " + this.props.token;
+        this.axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.props.token;
       }
     }
   }, {
-    key: "componentDidMount",
+    key: 'componentDidMount',
     value: function componentDidMount() {
       this.loadLocales();
       this.loadEmoji();
@@ -145,27 +145,27 @@ var App = function (_Component) {
      */
 
   }, {
-    key: "loadLocales",
+    key: 'loadLocales',
     value: function loadLocales() {
       var _this2 = this;
 
       var currentLocale = this.props.locales;
 
-      var cookieLang = _jsCookie2.default.get("lnk_lang");
+      var cookieLang = _jsCookie2.default.get('lnk_lang');
       if (!currentLocale) {
         currentLocale = cookieLang || _reactIntlUniversal2.default.determineLocale({
-          urlLocaleKey: "lang"
+          urlLocaleKey: 'lang'
         });
       }
       currentLocale = _lang.SUPPORT_LOCALES.find(function (item) {
         return item.value === currentLocale;
-      }) ? currentLocale : "zh-CN";
-      var version = require("./version.json").hash;
+      }) ? currentLocale : 'zh-CN';
+      var version = require('./version.json').hash;
       // 使用绝对路径
-      var languageURL = _constant.LANGUAGE_LINK + "/" + currentLocale + ".json?v=" + version;
+      var languageURL = _constant.LANGUAGE_LINK + '/' + currentLocale + '.json?v=' + version;
       return fetch(languageURL).then(function (response) {
         if (response.status >= 400) {
-          throw new Error("Bad response from server");
+          throw new Error('Bad response from server');
         }
         return response.json();
       }).then(function (data) {
@@ -184,21 +184,21 @@ var App = function (_Component) {
      */
 
   }, {
-    key: "loadEmoji",
+    key: 'loadEmoji',
     value: function loadEmoji() {
       var _this3 = this;
 
-      this.axios.get(this.props.emojiAPI + "/emoticons").then(function (response) {
+      this.axios.get(this.props.emojiAPI + '/emoticons').then(function (response) {
         var emojiMap = {};
         response.data.list.forEach(function (item) {
           emojiMap[item.name] = item.url;
         });
-        window.sessionStorage.setItem("emojiMap", JSON.stringify(emojiMap));
+        window.sessionStorage.setItem('emojiMap', JSON.stringify(emojiMap));
         _this3.setState({ emojiList: response.data.list });
       }).catch(this.errorHandler);
     }
   }, {
-    key: "handleEdit",
+    key: 'handleEdit',
     value: function handleEdit(_ref) {
       var replyId = _ref.replyId,
           commentId = _ref.commentId,
@@ -208,7 +208,7 @@ var App = function (_Component) {
 
       this.setState({
         editModalVisible: true,
-        action: content.replies ? "comment" : content.reply ? "replyToReply" : "reply",
+        action: content.replies ? 'comment' : content.reply ? 'replyToReply' : 'reply',
         replyId: replyId,
         commentId: commentId,
         userId: userId,
@@ -217,14 +217,14 @@ var App = function (_Component) {
       });
     }
   }, {
-    key: "handleClose",
+    key: 'handleClose',
     value: function handleClose() {
       this.setState({
         editModalVisible: false
       });
     }
   }, {
-    key: "error",
+    key: 'error',
     value: function error(msg) {
       var info = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
 
@@ -236,7 +236,7 @@ var App = function (_Component) {
       }
     }
   }, {
-    key: "errorHandler",
+    key: 'errorHandler',
     value: function errorHandler(error) {
       var locale = this.state.locale;
 
@@ -259,7 +259,7 @@ var App = function (_Component) {
      */
 
   }, {
-    key: "handleChangeLoading",
+    key: 'handleChangeLoading',
     value: function handleChangeLoading(key, value) {
       var loading = this.state.loading;
 
@@ -272,24 +272,26 @@ var App = function (_Component) {
      */
 
   }, {
-    key: "sGetComment",
+    key: 'sGetComment',
     value: function sGetComment() {
       var _this4 = this;
 
       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;
 
-      this.handleChangeLoading("sGetComment", true);
+      this.handleChangeLoading('sGetComment', true);
       var _props = this.props,
           API = _props.API,
           type = _props.type,
           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,
@@ -299,7 +301,7 @@ var App = function (_Component) {
           var newList = list;
           var oldList = _this4.state.list;
 
-          if (pageType === "more") {
+          if (pageType === 'more') {
             if (page > 1) {
               // 删除临时数据
               oldList = oldList.filter(function (o) {
@@ -307,7 +309,7 @@ var App = function (_Component) {
               });
               newList = oldList.concat(newList);
             }
-          } else if (pageType === "pagination") {
+          } else if (pageType === 'pagination') {
             // TODO 滚动到顶部
             window.scrollTo(0, 0);
           }
@@ -319,13 +321,13 @@ var App = function (_Component) {
           });
           _this4.props.onCountChange(total);
         } else {
-          _message3.default.info(_reactIntlUniversal2.default.get("message.noMoreComment"));
+          _message3.default.info(_reactIntlUniversal2.default.get('message.noMoreComment'));
           _this4.setState({
             isNoMoreComment: true
           });
         }
       }).catch(this.errorHandler).finally(function () {
-        _this4.handleChangeLoading("sGetComment", false);
+        _this4.handleChangeLoading('sGetComment', false);
       });
     }
 
@@ -334,7 +336,7 @@ var App = function (_Component) {
      */
 
   }, {
-    key: "sGetReply",
+    key: 'sGetReply',
     value: function sGetReply() {
       var _this5 = this;
 
@@ -343,14 +345,14 @@ var App = function (_Component) {
           _ref3$page = _ref3.page,
           page = _ref3$page === undefined ? 1 : _ref3$page;
 
-      this.handleChangeLoading("sGetReply", true);
+      this.handleChangeLoading('sGetReply', true);
       var _props2 = this.props,
           API = _props2.API,
           limit = _props2.limit;
 
-      this.axios.get(API + "/replies?comment_id=" + commentId + "&page=" + page + "&limit=" + limit).then(function (response) {
+      this.axios.get(API + '/replies?comment_id=' + commentId + '&page=' + page + '&limit=' + limit).then(function (response) {
         if (!response.data.list) {
-          _message3.default.info(_reactIntlUniversal2.default.get("message.noMoreData"));
+          _message3.default.info(_reactIntlUniversal2.default.get('message.noMoreData'));
         }
         var list = _this5.state.list.map(function (item) {
           if (item.id === commentId) {
@@ -376,7 +378,7 @@ var App = function (_Component) {
         });
         _this5.setState({ list: list });
       }).catch(this.errorHandler).finally(function () {
-        _this5.handleChangeLoading("sGetReply", false);
+        _this5.handleChangeLoading('sGetReply', false);
       });
     }
 
@@ -386,7 +388,7 @@ var App = function (_Component) {
      */
 
   }, {
-    key: "sCreateComment",
+    key: 'sCreateComment',
     value: function sCreateComment() {
       var _this6 = this;
 
@@ -395,16 +397,16 @@ var App = function (_Component) {
 
       var cb = arguments[1];
 
-      if (!content) return this.error(_reactIntlUniversal2.default.get("message.notNull"));
-      this.handleChangeLoading("sCreateComment", true);
+      if (!content) return this.error(_reactIntlUniversal2.default.get('message.notNull'));
+      this.handleChangeLoading('sCreateComment', true);
       var _props3 = this.props,
           API = _props3.API,
           type = _props3.type,
           businessId = _props3.businessId,
           businessUserId = _props3.businessUserId;
 
-      this.axios(API + "/comments", {
-        method: "post",
+      this.axios(API + '/comments', {
+        method: 'post',
         data: {
           type: type,
           business_id: businessId,
@@ -414,7 +416,7 @@ var App = function (_Component) {
         withCredentials: true
       }).then(function (response) {
         if (_this6.props.showAlertComment) {
-          _message3.default.success(_reactIntlUniversal2.default.get("message.success"));
+          _message3.default.success(_reactIntlUniversal2.default.get('message.success'));
         }
         if ((0, _helper.isFunction)(cb)) cb(response.data);
         // 将数据写入到 list 中
@@ -434,7 +436,7 @@ var App = function (_Component) {
         _this6.props.onCommentFail(error.response.status);
         _this6.errorHandler(error);
       }).finally(function () {
-        _this6.handleChangeLoading("sCreateComment", false);
+        _this6.handleChangeLoading('sCreateComment', false);
       });
     }
 
@@ -443,15 +445,15 @@ var App = function (_Component) {
      */
 
   }, {
-    key: "sDeleteComment",
+    key: 'sDeleteComment',
     value: function sDeleteComment(commentId) {
       var _this7 = this;
 
-      this.handleChangeLoading("sDeleteComment", true);
+      this.handleChangeLoading('sDeleteComment', true);
       var API = this.props.API;
 
-      this.axios(API + "/comments/" + commentId, {
-        method: "delete",
+      this.axios(API + '/comments/' + commentId, {
+        method: 'delete',
         withCredentials: true
       }).then(function () {
         var _state2 = _this7.state,
@@ -468,7 +470,7 @@ var App = function (_Component) {
         _this7.props.onDelete(_constant.COMMENT_TYPE.COMMENT, deletedItem);
         _this7.props.onCountChange(total - 1);
       }).catch(this.errorHandler).finally(function () {
-        _this7.handleChangeLoading("sDeleteComment", false);
+        _this7.handleChangeLoading('sDeleteComment', false);
       });
     }
     /**
@@ -477,18 +479,18 @@ var App = function (_Component) {
      */
 
   }, {
-    key: "sUpdateComment",
+    key: 'sUpdateComment',
     value: function sUpdateComment(_ref5) {
       var _this8 = this;
 
       var commentId = _ref5.commentId,
           content = _ref5.content;
 
-      this.handleChangeLoading("sUpdateComment", true);
+      this.handleChangeLoading('sUpdateComment', true);
       var API = this.props.API;
 
-      this.axios(API + "/comments/" + commentId, {
-        method: "post",
+      this.axios(API + '/comments/' + commentId, {
+        method: 'post',
         data: {
           content: content
         },
@@ -504,10 +506,10 @@ var App = function (_Component) {
           }
           return it;
         });
-        _this8.props.onUpdateComment("comment");
+        _this8.props.onUpdateComment('comment');
         _this8.setState({ list: list });
       }).catch(this.errorHandler).finally(function () {
-        _this8.handleChangeLoading("sUpdateComment", false);
+        _this8.handleChangeLoading('sUpdateComment', false);
       });
     }
     /**
@@ -517,21 +519,21 @@ var App = function (_Component) {
      */
 
   }, {
-    key: "sCreateReply",
+    key: 'sCreateReply',
     value: function sCreateReply(data, cb) {
       var _this9 = this;
 
-      if (!data.content) return this.error(_reactIntlUniversal2.default.get("message.replyNoNull"));
-      this.handleChangeLoading("sCreateReply", true);
+      if (!data.content) return this.error(_reactIntlUniversal2.default.get('message.replyNoNull'));
+      this.handleChangeLoading('sCreateReply', true);
       var API = this.props.API;
 
-      this.axios(API + "/replies", {
-        method: "post",
+      this.axios(API + '/replies', {
+        method: 'post',
         data: data,
         withCredentials: true
       }).then(function (response) {
         if (_this9.props.showAlertReply) {
-          _message3.default.success(_reactIntlUniversal2.default.get("message.replySuccess"));
+          _message3.default.success(_reactIntlUniversal2.default.get('message.replySuccess'));
         }
         if ((0, _helper.isFunction)(cb)) cb(response.data);
         // 将数据写入到 list 中
@@ -552,7 +554,7 @@ var App = function (_Component) {
         _this9.props.onCommentFail(error.response.status);
         _this9.errorHandler(error);
       }).finally(function () {
-        _this9.handleChangeLoading("sCreateReply", false);
+        _this9.handleChangeLoading('sCreateReply', false);
       });
     }
 
@@ -563,15 +565,15 @@ var App = function (_Component) {
      */
 
   }, {
-    key: "sDeleteReply",
+    key: 'sDeleteReply',
     value: function sDeleteReply(replyId, commentId) {
       var _this10 = this;
 
-      this.handleChangeLoading("sDeleteReply", true);
+      this.handleChangeLoading('sDeleteReply', true);
       var API = this.props.API;
 
-      this.axios(API + "/replies/" + replyId + "?CommentID=" + commentId, {
-        method: "delete",
+      this.axios(API + '/replies/' + replyId + '?CommentID=' + commentId, {
+        method: 'delete',
         withCredentials: true
       }).then(function () {
         var deletedItem = null;
@@ -591,7 +593,7 @@ var App = function (_Component) {
         _this10.setState({ list: list });
         _this10.props.onDelete(_constant.COMMENT_TYPE.REPLY, deletedItem);
       }).catch(this.errorHandler).finally(function () {
-        _this10.handleChangeLoading("sDeleteReply", false);
+        _this10.handleChangeLoading('sDeleteReply', false);
       });
     }
     /**
@@ -601,7 +603,7 @@ var App = function (_Component) {
      */
 
   }, {
-    key: "sUpdateReply",
+    key: 'sUpdateReply',
     value: function sUpdateReply(_ref6) {
       var _this11 = this;
 
@@ -610,11 +612,11 @@ var App = function (_Component) {
           replyId = _ref6.replyId,
           replyPage = _ref6.replyPage;
 
-      this.handleChangeLoading("sUpdateReply", true);
+      this.handleChangeLoading('sUpdateReply', true);
       var API = this.props.API;
 
-      this.axios(API + "/replies/" + replyId, {
-        method: "post",
+      this.axios(API + '/replies/' + replyId, {
+        method: 'post',
         data: {
           comment_id: commentId,
           content: content
@@ -624,9 +626,9 @@ var App = function (_Component) {
         for (var i = 1; i <= replyPage; i++) {
           _this11.sGetReply({ commentId: commentId, page: i });
         }
-        _this11.props.onUpdateComment("reply");
+        _this11.props.onUpdateComment('reply');
       }).catch(this.errorHandler).finally(function () {
-        _this11.handleChangeLoading("sUpdateReply", false);
+        _this11.handleChangeLoading('sUpdateReply', false);
       });
     }
     /**
@@ -636,19 +638,19 @@ var App = function (_Component) {
      */
 
   }, {
-    key: "sCommentFavor",
+    key: 'sCommentFavor',
     value: function sCommentFavor(commentId, favored) {
       var _this12 = this;
 
-      this.handleChangeLoading("sCommentFavor", true);
+      this.handleChangeLoading('sCommentFavor', true);
       var API = this.props.API;
 
-      this.axios(API + "/comments/" + commentId + "/favor", {
-        method: favored ? "delete" : "put",
+      this.axios(API + '/comments/' + commentId + '/favor', {
+        method: favored ? 'delete' : 'put',
         withCredentials: true
       }).then(function (response) {
         if (_this12.props.showAlertFavor) {
-          _message3.default.success(favored ? _reactIntlUniversal2.default.get("message.cancelLickSuccess") : _reactIntlUniversal2.default.get("message.likeSuccess"));
+          _message3.default.success(favored ? _reactIntlUniversal2.default.get('message.cancelLickSuccess') : _reactIntlUniversal2.default.get('message.likeSuccess'));
         }
         // 更新 list 中的该项数据的 favored
         var list = _this12.state.list.map(function (item) {
@@ -660,7 +662,7 @@ var App = function (_Component) {
         });
         _this12.setState({ list: list });
       }).catch(this.errorHandler).finally(function () {
-        _this12.handleChangeLoading("sCommentFavor", false);
+        _this12.handleChangeLoading('sCommentFavor', false);
       });
     }
 
@@ -672,21 +674,21 @@ var App = function (_Component) {
      */
 
   }, {
-    key: "sReplyFavor",
+    key: 'sReplyFavor',
     value: function sReplyFavor(replyId, commentId, favored) {
       var _this13 = this;
 
-      this.handleChangeLoading("sReplyFavor", true);
+      this.handleChangeLoading('sReplyFavor', true);
       var API = this.props.API;
 
-      this.axios(API + "/replies/" + replyId + "/favor", {
-        method: favored ? "delete" : "put",
+      this.axios(API + '/replies/' + replyId + '/favor', {
+        method: favored ? 'delete' : 'put',
         data: {
           comment_id: commentId
         },
         withCredentials: true
       }).then(function (response) {
-        _message3.default.success(favored ? _reactIntlUniversal2.default.get("message.cancelLickSuccess") : _reactIntlUniversal2.default.get("message.likeSuccess"));
+        _message3.default.success(favored ? _reactIntlUniversal2.default.get('message.cancelLickSuccess') : _reactIntlUniversal2.default.get('message.likeSuccess'));
         // 更新 list 中的该项数据的 favored
         var list = _this13.state.list.map(function (item) {
           if (item.id === commentId) {
@@ -705,7 +707,7 @@ var App = function (_Component) {
         });
         _this13.setState({ list: list });
       }).catch(this.errorHandler).finally(function () {
-        _this13.handleChangeLoading("sReplyFavor", false);
+        _this13.handleChangeLoading('sReplyFavor', false);
       });
     }
 
@@ -714,21 +716,21 @@ var App = function (_Component) {
      */
 
   }, {
-    key: "sOssSts",
+    key: 'sOssSts',
     value: function sOssSts() {
       var _this14 = this;
 
-      this.handleChangeLoading("sOssSts", true);
+      this.handleChangeLoading('sOssSts', true);
       var API = this.props.API;
 
-      this.axios.get(API + "/oss/sts").then(function (response) {
+      this.axios.get(API + '/oss/sts').then(function (response) {
         _this14.setState({ oss: _extends({}, response.data) });
       }).catch(this.errorHandler).finally(function () {
-        _this14.handleChangeLoading("sOssSts", false);
+        _this14.handleChangeLoading('sOssSts', false);
       });
     }
   }, {
-    key: "render",
+    key: 'render',
     value: function render() {
       // 添加到 Context 的数据
       var value = _extends({}, this.state, this.props, {
@@ -750,11 +752,11 @@ var App = function (_Component) {
         _Comment.CommentContext.Provider,
         { value: value },
         _react2.default.createElement(
-          "div",
-          { className: "comment" },
+          'div',
+          { className: 'comment' },
           this.props.showEditor && _react2.default.createElement(_CommentInput2.default, { content: this.props.children }),
           this.props.showList && _react2.default.createElement(
-            "div",
+            'div',
             { style: { marginTop: 20 } },
             _react2.default.createElement(_CommentList2.default, null)
           )
@@ -805,9 +807,9 @@ App.propTypes = {
 
 App.defaultProps = {
   businessUserId: 0,
-  API: "//api.links123.net/comment/v1",
-  emojiAPI: "//api.links123.net/link/v1",
-  LOGINLINK: process.env.RUN_MOD === "production" ? "https://passport.links123.com/login" : "http://test.links123.net:5050/login",
+  API: '//api.links123.net/comment/v1',
+  emojiAPI: '//api.links123.net/link/v1',
+  LOGINLINK: process.env.RUN_MOD === 'production' ? 'https://passport.links123.com/login' : 'http://test.links123.net:5050/login',
   showList: true,
   showEditor: true,
   showAlertComment: false,
@@ -815,7 +817,7 @@ App.defaultProps = {
   showAlertFavor: false,
   showError: true,
   showEdit: false,
-  pageType: "more",
+  pageType: 'more',
   limit: _constant.LIMIT,
   onGetMoreBtnClick: function onGetMoreBtnClick() {},
   onPageChange: function onPageChange(page) {},

lib/components/AudioPlayer/index.js

@@ -0,0 +1,172 @@
+'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: '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() {
+              return _this4.player && (isPlaying ? _this4.player.pause() : _this4.player.play());
+            }
+          },
+          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

@@ -0,0 +1,60 @@
+.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/CommentList/index.css

@@ -17,3 +17,15 @@
 .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

@@ -8,6 +8,10 @@ var _spin = require("antd/es/spin");
 
 var _spin2 = _interopRequireDefault(_spin);
 
+var _checkbox = require("antd/es/checkbox");
+
+var _checkbox2 = _interopRequireDefault(_checkbox);
+
 var _pagination = require("antd/es/pagination");
 
 var _pagination2 = _interopRequireDefault(_pagination);
@@ -16,6 +20,8 @@ var _createClass = function () { function defineProperties(target, props) { for
 
 require("antd/es/spin/style");
 
+require("antd/es/checkbox/style");
+
 require("antd/es/pagination/style");
 
 var _react = require("react");
@@ -52,7 +58,9 @@ var CommentList = function (_Component) {
 
     var _this = _possibleConstructorReturn(this, (CommentList.__proto__ || Object.getPrototypeOf(CommentList)).call(this, props));
 
-    _this.state = {};
+    _this.state = {
+      filterSpeak: 0
+    };
     return _this;
   }
 
@@ -74,6 +82,7 @@ var CommentList = function (_Component) {
           sGetComment = _props$app.sGetComment,
           onPageChange = _props$app.onPageChange,
           onGetMoreBtnClick = _props$app.onGetMoreBtnClick;
+      var filterSpeak = this.state.filterSpeak;
 
       if (pageType === "slice") {
         // 截断多余评论，通过点击查看更多跳转
@@ -93,7 +102,7 @@ var CommentList = function (_Component) {
             {
               className: "comment-list-show-more",
               onClick: function onClick() {
-                sGetComment({ page: page + 1 });
+                sGetComment({ page: page + 1, filterSpeak: filterSpeak });
                 onPageChange(page + 1);
               }
             },
@@ -115,7 +124,7 @@ var CommentList = function (_Component) {
             current: page,
             total: total,
             onChange: function onChange(p) {
-              sGetComment({ page: p });
+              sGetComment({ page: p, filterSpeak: filterSpeak });
               onPageChange(p);
             }
           })
@@ -125,10 +134,15 @@ var CommentList = function (_Component) {
   }, {
     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);
@@ -141,7 +155,24 @@ var CommentList = function (_Component) {
           _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

@@ -33,6 +33,21 @@
   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;
@@ -124,7 +139,7 @@
   height: 0;
   padding-bottom: 100%;
   border-radius: 5px;
-  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined"),
+  cursor: url('//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined'),
     auto;
 }
 
@@ -156,6 +171,10 @@
     width: 85%;
     margin-left: 10px;
   }
+
+  .comment-item-speak-audio-wrapper {
+    width: 350px;
+  }
 }
 
 @media screen and (max-width: 449px) and (min-width: 365px) {
@@ -164,6 +183,10 @@
     width: 80%;
     margin-left: 10px;
   }
+
+  .comment-item-speak-audio-wrapper {
+    width: 266px;
+  }
 }
 
 @media screen and (max-width: 365px) {
@@ -172,6 +195,10 @@
     width: 75%;
     margin-left: 10px;
   }
+
+  .comment-item-speak-audio-wrapper {
+    width: 218px;
+  }
 }
 
 @media (max-width: 575px) {

lib/components/ContentItem/index.js

@@ -80,6 +80,10 @@ var _ImagePreviewer = require("../ImagePreviewer/ImagePreviewer");
 
 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); } }
@@ -197,6 +201,8 @@ var CommentItem = function (_Component) {
           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,
@@ -295,6 +301,20 @@ var CommentItem = function (_Component) {
               __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" },
+              "[\u8DDF\u8BFB\u6D88\u606F]"
+            ),
+            _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",
@@ -351,7 +371,7 @@ var CommentItem = function (_Component) {
                 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/lang/en-US.js

@@ -16,6 +16,7 @@ var USdata = {
   "comment.totalComment": "Total {total, plural, =1 {one comment} other {# comments}}",
   "comment.reply": "Reply",
   "comment.moreComment": "More comments",
+  "comment.filterSpeak": "Show imitations only",
 
   "reply.totalReply": "Total {total, plural, =1 {one reply} other {# replies}}",
   "reply.moreReply": "More replies",

lib/lang/en-US.js.map

@@ -1 +1 @@
-{"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;;AAgBb,sBAAoB,yDAhBP;AAiBb,qBAAmB,cAjBN;AAkBb,oBAAkB,cAlBL;;AAoBb,sBAAoB,MApBP;AAqBb,0BAAwB,kBArBX;;AAuBb,sBAAoB,SAvBP;AAwBb,mBAAiB,SAxBJ;AAyBb,uBAAqB,QAzBR;AA0Bb,uBAAqB,QA1BR;;AA4Bb,2BAAyB,kBA5BZ;AA6Bb,wBAAsB,cA7BT;AA8Bb,qBAAmB,kBA9BN;AA+Bb,qBAAmB,eA/BN;AAgCb,yBAAuB,kBAhCV;AAiCb,0BAAwB,YAjCX;AAkCb,+BAA6B,SAlChB;AAmCb,yBAAuB;AAnCV,CAAf;;kBAsCeA,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\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

@@ -16,6 +16,7 @@ var CNdata = {
   "comment.totalComment": "共{total}条评论",
   "comment.reply": "回复",
   "comment.moreComment": "更多评论",
+  "comment.filterSpeak": "只显示跟读",
 
   "reply.totalReply": "共{total}条回复",
   "reply.moreReply": "更多回复",

lib/lang/zh-CN.js.map

@@ -1 +1 @@
-{"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;;AAeb,sBAAoB,aAfP;AAgBb,qBAAmB,MAhBN;AAiBb,oBAAkB,MAjBL;;AAmBb,sBAAoB,IAnBP;AAoBb,0BAAwB,MApBX;;AAsBb,sBAAoB,QAtBP;AAuBb,mBAAiB,IAvBJ;AAwBb,uBAAqB,IAxBR;AAyBb,uBAAqB,IAzBR;;AA2Bb,2BAAyB,SA3BZ;AA4Bb,wBAAsB,UA5BT;AA6Bb,qBAAmB,OA7BN;AA8Bb,qBAAmB,QA9BN;AA+Bb,yBAAuB,OA/BV;AAgCb,0BAAwB,QAhCX;AAiCb,+BAA6B,QAjChB;AAkCb,yBAAuB;AAlCV,CAAf;;kBAqCeA,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\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

@@ -1,8 +1,8 @@
 {
     "name":       "comment",
-    "buildDate":  1582467062540,
+    "buildDate":  1585374331505,
     "version":    "1.0.4",
-    "numCommits": 204,
-    "hash":       "016964f",
-    "dirty":      true
+    "numCommits": 209,
+    "hash":       "daff054",
+    "dirty":      false
 }

src/App.js

@@ -190,13 +190,13 @@ class App extends Component {
   /**
    * 获取评论列表
    */
-  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

@@ -0,0 +1,100 @@
+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;
+    }
+  }
+
+  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.player &&
+            (isPlaying ? this.player.pause() : this.player.play())
+          }
+        >
+          {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

@@ -0,0 +1,60 @@
+.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

@@ -17,3 +17,15 @@
 .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

@@ -1,5 +1,5 @@
 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";
@@ -8,7 +8,9 @@ import "./index.css";
 class CommentList extends Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = {
+      filterSpeak: 0
+    };
   }
 
   componentWillMount() {
@@ -27,6 +29,7 @@ class CommentList extends Component {
       onPageChange,
       onGetMoreBtnClick
     } = this.props.app;
+    const { filterSpeak } = this.state;
     if (pageType === "slice") {
       // 截断多余评论，通过点击查看更多跳转
       return (
@@ -40,7 +43,7 @@ class CommentList extends Component {
           <div
             className="comment-list-show-more"
             onClick={() => {
-              sGetComment({ page: page + 1 });
+              sGetComment({ page: page + 1, filterSpeak });
               onPageChange(page + 1);
             }}
           >
@@ -58,7 +61,7 @@ class CommentList extends Component {
             current={page}
             total={total}
             onChange={p => {
-              sGetComment({ page: p });
+              sGetComment({ page: p, filterSpeak });
               onPageChange(p);
             }}
           />
@@ -68,7 +71,14 @@ class CommentList extends Component {
   }
 
   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
@@ -77,7 +87,26 @@ class CommentList extends Component {
       <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

@@ -33,6 +33,21 @@
   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;
@@ -156,6 +171,10 @@
     width: 85%;
     margin-left: 10px;
   }
+
+  .comment-item-speak-audio-wrapper {
+    width: 350px;
+  }
 }
 
 @media screen and (max-width: 449px) and (min-width: 365px) {
@@ -164,6 +183,10 @@
     width: 80%;
     margin-left: 10px;
   }
+
+  .comment-item-speak-audio-wrapper {
+    width: 266px;
+  }
 }
 
 @media screen and (max-width: 365px) {
@@ -172,6 +195,10 @@
     width: 75%;
     margin-left: 10px;
   }
+
+  .comment-item-speak-audio-wrapper {
+    width: 218px;
+  }
 }
 
 @media (max-width: 575px) {

src/components/ContentItem/index.js

@@ -14,6 +14,7 @@ import { renderContent } from "../../helper";
 import { IMAGE_SPLIT } from "../../constant";
 import "./index.css";
 import ImagePreviewer from "../ImagePreviewer/ImagePreviewer";
+import AudioPlayer from "../AudioPlayer";
 
 // dayjs.locale("zh-cn");
 dayjs.extend(relativeTime);
@@ -103,6 +104,7 @@ class CommentItem extends Component {
       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;
@@ -206,6 +208,15 @@ class CommentItem extends Component {
               )
             }}
           />
+
+          {isSpeak && (
+            <div className="comment-item-speak">
+              <span className="comment-item-speak-message">[跟读消息]</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">
@@ -264,7 +275,7 @@ class CommentItem extends Component {
                 </a>
               </div>
             ) : null}
-            {showEdit && app.userId === content.user_id && (
+            {showEdit && !isSpeak && app.userId === content.user_id && (
               <i
                 className="comment-item-edit"
                 onClick={() =>

src/lang/en-US.js

@@ -12,6 +12,7 @@ const USdata = {
     "Total {total, plural, =1 {one comment} other {# comments}}",
   "comment.reply": "Reply",
   "comment.moreComment": "More comments",
+  "comment.filterSpeak": "Show imitations only",
 
   "reply.totalReply": "Total {total, plural, =1 {one reply} other {# replies}}",
   "reply.moreReply": "More replies",

src/lang/zh-CN.js

@@ -11,6 +11,7 @@ const CNdata = {
   "comment.totalComment": "共{total}条评论",
   "comment.reply": "回复",
   "comment.moreComment": "更多评论",
+  "comment.filterSpeak": "只显示跟读",
 
   "reply.totalReply": "共{total}条回复",
   "reply.moreReply": "更多回复",