fix：跟读播放的时候，暂停其他的播放中的音频

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,7 +272,7 @@ var App = function (_Component) {
      */
 
   }, {
-    key: 'sGetComment',
+    key: "sGetComment",
     value: function sGetComment() {
       var _this4 = this;
 
@@ -284,14 +284,14 @@ var App = function (_Component) {
 
       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 + '&is_speak=' + filterSpeak + '&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,
@@ -301,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) {
@@ -309,7 +309,7 @@ var App = function (_Component) {
               });
               newList = oldList.concat(newList);
             }
-          } else if (pageType === 'pagination') {
+          } else if (pageType === "pagination") {
             // TODO 滚动到顶部
             window.scrollTo(0, 0);
           }
@@ -321,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);
       });
     }
 
@@ -336,7 +336,7 @@ var App = function (_Component) {
      */
 
   }, {
-    key: 'sGetReply',
+    key: "sGetReply",
     value: function sGetReply() {
       var _this5 = this;
 
@@ -345,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) {
@@ -378,7 +378,7 @@ var App = function (_Component) {
         });
         _this5.setState({ list: list });
       }).catch(this.errorHandler).finally(function () {
-        _this5.handleChangeLoading('sGetReply', false);
+        _this5.handleChangeLoading("sGetReply", false);
       });
     }
 
@@ -388,7 +388,7 @@ var App = function (_Component) {
      */
 
   }, {
-    key: 'sCreateComment',
+    key: "sCreateComment",
     value: function sCreateComment() {
       var _this6 = this;
 
@@ -397,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,
@@ -416,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 中
@@ -436,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);
       });
     }
 
@@ -445,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,
@@ -470,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);
       });
     }
     /**
@@ -479,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
         },
@@ -506,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);
       });
     }
     /**
@@ -519,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 中
@@ -554,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);
       });
     }
 
@@ -565,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;
@@ -593,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);
       });
     }
     /**
@@ -603,7 +603,7 @@ var App = function (_Component) {
      */
 
   }, {
-    key: 'sUpdateReply',
+    key: "sUpdateReply",
     value: function sUpdateReply(_ref6) {
       var _this11 = this;
 
@@ -612,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
@@ -626,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);
       });
     }
     /**
@@ -638,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) {
@@ -662,7 +662,7 @@ var App = function (_Component) {
         });
         _this12.setState({ list: list });
       }).catch(this.errorHandler).finally(function () {
-        _this12.handleChangeLoading('sCommentFavor', false);
+        _this12.handleChangeLoading("sCommentFavor", false);
       });
     }
 
@@ -674,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) {
@@ -707,7 +707,7 @@ var App = function (_Component) {
         });
         _this13.setState({ list: list });
       }).catch(this.errorHandler).finally(function () {
-        _this13.handleChangeLoading('sReplyFavor', false);
+        _this13.handleChangeLoading("sReplyFavor", false);
       });
     }
 
@@ -716,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, {
@@ -752,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)
           )
@@ -807,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,
@@ -817,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/App.module.css

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

@@ -1 +1 @@
-{"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

@@ -1 +1 @@
-{"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

@@ -1,40 +1,40 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _slider = require('antd/es/slider');
+var _slider = require("antd/es/slider");
 
 var _slider2 = _interopRequireDefault(_slider);
 
-var _icon = require('antd/es/icon');
+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/slider/style");
 
-require('antd/es/icon/style');
+require("antd/es/icon/style");
 
-var _react = require('react');
+var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
-var _dayjs = require('dayjs');
+var _dayjs = require("dayjs");
 
 var _dayjs2 = _interopRequireDefault(_dayjs);
 
-var _duration = require('dayjs/plugin/duration');
+var _duration = require("dayjs/plugin/duration");
 
 var _duration2 = _interopRequireDefault(_duration);
 
-var _utc = require('dayjs/plugin/utc');
+var _utc = require("dayjs/plugin/utc");
 
 var _utc2 = _interopRequireDefault(_utc);
 
-require('./index.less');
+require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -64,7 +64,7 @@ var AudioPlayer = function (_React$Component) {
   }
 
   _createClass(AudioPlayer, [{
-    key: 'componentDidMount',
+    key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
 
@@ -90,7 +90,7 @@ var AudioPlayer = function (_React$Component) {
       }
     }
   }, {
-    key: 'componentDidUpdate',
+    key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var _this3 = this;
 
@@ -114,7 +114,28 @@ var AudioPlayer = function (_React$Component) {
       }
     }
   }, {
-    key: 'render',
+    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;
 
@@ -124,27 +145,27 @@ var AudioPlayer = function (_React$Component) {
           duration = _state.duration;
 
       return _react2.default.createElement(
-        'div',
-        { className: 'comment-item-speak-audio-container' },
-        _react2.default.createElement('audio', {
+        "div",
+        { className: "comment-item-speak-audio-container" },
+        _react2.default.createElement("audio", {
           ref: function ref(_ref) {
             _this4.player = _ref;
           },
-          style: { display: 'none' }
+          style: { display: "none" }
         }),
         _react2.default.createElement(
-          'span',
+          "span",
           {
-            className: 'icon',
+            className: "icon",
             onClick: function onClick() {
-              return _this4.player && (isPlaying ? _this4.player.pause() : _this4.player.play());
+              _this4.clickPlayOrPause(isPlaying);
             }
           },
-          isPlaying ? _react2.default.createElement(_icon2.default, { className: 'pause', type: 'pause' }) : _react2.default.createElement('i', { className: 'schedule schedule-icon_image_audio' })
+          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',
+          className: "slider",
           tooltipVisible: false,
           value: currentDuration,
           max: duration,
@@ -155,11 +176,11 @@ var AudioPlayer = function (_React$Component) {
           }
         }),
         _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')
+          "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")
         )
       );
     }

lib/components/AudioPlayer/index.less

@@ -57,4 +57,4 @@
       width: 60px;
     }
   }
-}
+}

lib/components/CommentBox/index.css

@@ -1,49 +1,49 @@
-.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/ContentItem/index.css

@@ -139,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;
 }
 

lib/components/Editor/Emoji.css

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

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

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

@@ -1,4 +1,4 @@
-+ 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

@@ -1 +1 @@
-{"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

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

lib/version.json

@@ -1,8 +1,8 @@
 {
     "name":       "comment",
-    "buildDate":  1585374331505,
+    "buildDate":  1588147494452,
     "version":    "1.0.4",
-    "numCommits": 209,
-    "hash":       "daff054",
-    "dirty":      false
+    "numCommits": 210,
+    "hash":       "7da2eb9",
+    "dirty":      true
 }

package.json

@@ -16,7 +16,7 @@
   "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/components/AudioPlayer/index.js

@@ -47,6 +47,26 @@ class AudioPlayer extends React.Component {
     }
   }
 
+  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 (
@@ -60,10 +80,9 @@ class AudioPlayer extends React.Component {
         />
         <span
           className="icon"
-          onClick={() =>
-            this.player &&
-            (isPlaying ? this.player.pause() : this.player.play())
-          }
+          onClick={() => {
+            this.clickPlayOrPause(isPlaying);
+          }}
         >
           {isPlaying ? (
             <Icon className="pause" type="pause" />

src/index.js

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