Przeglądaj źródła

Merge branch 'master' of allen6/comment into master

AdamFu 4 lat temu
rodzic
commit
a5c4a7f2dd

+ 30
- 30
lib/App.module.css Wyświetl plik

@@ -1,30 +1,30 @@
1
-.comment {
2
-  width: 100%;
3
-  padding: 10px;
4
-  margin-bottom: 100px;
5
-}
6
-
7
-.comment .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
8
-  position: fixed;
9
-  top: 45%;
10
-}
11
-
12
-.comment-header-tag {
13
-  border: 1px solid #cecece;
14
-  border-radius: 0;
15
-  color: #666;
16
-}
17
-
18
-.comment-header-tip {
19
-  color: #5198eb;
20
-  margin-right: 15px;
21
-  margin-left: 5px;
22
-}
23
-
24
-.comment-header-text {
25
-  color: #666;
26
-}
27
-
28
-.comment-img {
29
-  max-width: 100%;
30
-}
1
+.comment {
2
+  width: 100%;
3
+  padding: 10px;
4
+  margin-bottom: 100px;
5
+}
6
+
7
+.comment .ant-spin-nested-loading > div > .ant-spin .ant-spin-dot {
8
+  position: fixed;
9
+  top: 45%;
10
+}
11
+
12
+.comment-header-tag {
13
+  border: 1px solid #cecece;
14
+  border-radius: 0;
15
+  color: #666;
16
+}
17
+
18
+.comment-header-tip {
19
+  color: #5198eb;
20
+  margin-right: 15px;
21
+  margin-left: 5px;
22
+}
23
+
24
+.comment-header-text {
25
+  color: #666;
26
+}
27
+
28
+.comment-img {
29
+  max-width: 100%;
30
+}

+ 1
- 1
lib/Comment.js.map Wyświetl plik

@@ -1 +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\";\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"]}
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"]}

BIN
lib/assert/btn_audio_play.png Wyświetl plik


BIN
lib/assert/loading.gif Wyświetl plik


+ 1
- 1
lib/avatar.js.map
Plik diff jest za duży
Wyświetl plik


+ 1
- 1
lib/axios.js.map Wyświetl plik

@@ -1 +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\";\r\n\r\naxios.defaults.withCredentials = true;\r\naxios.defaults.headers.common[\"Authorization\"] = \"Bearer \";\r\n\r\nexport default axios;\r\n"]}
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"]}

+ 43
- 10
lib/components/AudioPlayer/index.js Wyświetl plik

@@ -36,6 +36,14 @@ var _utc2 = _interopRequireDefault(_utc);
36 36
 
37 37
 require("./index.less");
38 38
 
39
+var _loading = require("../../assert/loading.gif");
40
+
41
+var _loading2 = _interopRequireDefault(_loading);
42
+
43
+var _btn_audio_play = require("../../assert/btn_audio_play.png");
44
+
45
+var _btn_audio_play2 = _interopRequireDefault(_btn_audio_play);
46
+
39 47
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
40 48
 
41 49
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -58,7 +66,8 @@ var AudioPlayer = function (_React$Component) {
58 66
     _this.state = {
59 67
       duration: 0,
60 68
       currentDuration: 0,
61
-      isPlaying: false
69
+      isPlaying: false,
70
+      isLoading: false
62 71
     };
63 72
     return _this;
64 73
   }
@@ -78,10 +87,13 @@ var AudioPlayer = function (_React$Component) {
78 87
           return _this2.setState({ isPlaying: false, currentDuration: 0 });
79 88
         };
80 89
         this.player.onpause = function () {
81
-          return _this2.setState({ isPlaying: false });
90
+          return _this2.setState({ isPlaying: false, isLoading: false });
82 91
         };
83 92
         this.player.onplay = function () {
84
-          return _this2.setState({ isPlaying: true });
93
+          return _this2.setState({ isPlaying: false, isLoading: true });
94
+        };
95
+        this.player.onplaying = function () {
96
+          return _this2.setState({ isPlaying: true, isLoading: false });
85 97
         };
86 98
         this.player.ontimeupdate = function (event) {
87 99
           return _this2.setState({ currentDuration: event.target.currentTime });
@@ -102,10 +114,13 @@ var AudioPlayer = function (_React$Component) {
102 114
           return _this3.setState({ isPlaying: false, currentDuration: 0 });
103 115
         };
104 116
         this.player.onpause = function () {
105
-          return _this3.setState({ isPlaying: false });
117
+          return _this3.setState({ isPlaying: false, isLoading: false });
106 118
         };
107 119
         this.player.onplay = function () {
108
-          return _this3.setState({ isPlaying: true });
120
+          return _this3.setState({ isPlaying: false, isLoading: true });
121
+        };
122
+        this.player.onplaying = function () {
123
+          return _this3.setState({ isPlaying: true, isLoading: false });
109 124
         };
110 125
         this.player.ontimeupdate = function (event) {
111 126
           return _this3.setState({ currentDuration: event.target.currentTime });
@@ -134,15 +149,33 @@ var AudioPlayer = function (_React$Component) {
134 149
         this.player.play();
135 150
       }
136 151
     }
152
+  }, {
153
+    key: "getPlayIcon",
154
+    value: function getPlayIcon() {
155
+      var _state = this.state,
156
+          isPlaying = _state.isPlaying,
157
+          isLoading = _state.isLoading;
158
+
159
+      var playIconElem = void 0;
160
+
161
+      if (isLoading) {
162
+        playIconElem = _react2.default.createElement("img", { className: "icon-loading", src: _loading2.default, alt: "iconLoading" });
163
+      } else if (isPlaying) {
164
+        playIconElem = _react2.default.createElement(_icon2.default, { className: "pause", type: "pause" });
165
+      } else {
166
+        playIconElem = _react2.default.createElement("img", { className: "icon-loading", src: _btn_audio_play2.default, alt: "iconPlaying" });
167
+      }
168
+      return playIconElem;
169
+    }
137 170
   }, {
138 171
     key: "render",
139 172
     value: function render() {
140 173
       var _this4 = this;
141 174
 
142
-      var _state = this.state,
143
-          currentDuration = _state.currentDuration,
144
-          isPlaying = _state.isPlaying,
145
-          duration = _state.duration;
175
+      var _state2 = this.state,
176
+          currentDuration = _state2.currentDuration,
177
+          isPlaying = _state2.isPlaying,
178
+          duration = _state2.duration;
146 179
 
147 180
       return _react2.default.createElement(
148 181
         "div",
@@ -161,7 +194,7 @@ var AudioPlayer = function (_React$Component) {
161 194
               _this4.clickPlayOrPause(isPlaying);
162 195
             }
163 196
           },
164
-          isPlaying ? _react2.default.createElement(_icon2.default, { className: "pause", type: "pause" }) : _react2.default.createElement("i", { className: "schedule schedule-icon_image_audio" })
197
+          this.getPlayIcon()
165 198
         ),
166 199
         _react2.default.createElement(_slider2.default, {
167 200
           step: 0.001,

+ 1
- 1
lib/components/AudioPlayer/index.js.map
Plik diff jest za duży
Wyświetl plik


+ 5
- 0
lib/components/AudioPlayer/index.less Wyświetl plik

@@ -19,6 +19,11 @@
19 19
     font-size: 14px;
20 20
   }
21 21
 
22
+  .icon-loading {
23
+    width: 100%;
24
+    height: 100%;
25
+  }
26
+
22 27
   .slider {
23 28
     margin: 0 0 0 16px;
24 29
     width: 195px;

+ 49
- 49
lib/components/CommentBox/index.css Wyświetl plik

@@ -1,49 +1,49 @@
1
-.comment-show-more {
2
-  color: #4a90e2;
3
-  text-align: center;
4
-  width: 100px;
5
-  background-color: #f8f8f8;
6
-  cursor: pointer;
7
-  padding: 10px;
8
-  margin: 0 auto;
9
-  transition: all 0.3s;
10
-}
11
-.comment-show-more:hover {
12
-  background-color: #f5f5f5;
13
-  color: #1890ff;
14
-}
15
-.comment-more-box {
16
-  text-align: center;
17
-  width: 90%;
18
-  margin-left: 50px;
19
-  margin-top: 10px;
20
-  height: 40px;
21
-  display: inline-block;
22
-}
23
-@media screen and (max-width: 616px) and (min-width: 449px) {
24
-  .comment-more-box {
25
-    text-align: center;
26
-    width: 85%;
27
-    margin-left: 50px;
28
-    height: 40px;
29
-    display: inline-block;
30
-  }
31
-}
32
-@media screen and (max-width: 449px) and (min-width: 365px) {
33
-  .comment-more-box {
34
-    text-align: center;
35
-    width: 80%;
36
-    margin-left: 50px;
37
-    height: 40px;
38
-    display: inline-block;
39
-  }
40
-}
41
-@media screen and (max-width: 365px) {
42
-  .comment-more-box {
43
-    text-align: center;
44
-    width: 75%;
45
-    margin-left: 50px;
46
-    height: 40px;
47
-    display: inline-block;
48
-  }
49
-}
1
+.comment-show-more {
2
+  color: #4a90e2;
3
+  text-align: center;
4
+  width: 100px;
5
+  background-color: #f8f8f8;
6
+  cursor: pointer;
7
+  padding: 10px;
8
+  margin: 0 auto;
9
+  transition: all 0.3s;
10
+}
11
+.comment-show-more:hover {
12
+  background-color: #f5f5f5;
13
+  color: #1890ff;
14
+}
15
+.comment-more-box {
16
+  text-align: center;
17
+  width: 90%;
18
+  margin-left: 50px;
19
+  margin-top: 10px;
20
+  height: 40px;
21
+  display: inline-block;
22
+}
23
+@media screen and (max-width: 616px) and (min-width: 449px) {
24
+  .comment-more-box {
25
+    text-align: center;
26
+    width: 85%;
27
+    margin-left: 50px;
28
+    height: 40px;
29
+    display: inline-block;
30
+  }
31
+}
32
+@media screen and (max-width: 449px) and (min-width: 365px) {
33
+  .comment-more-box {
34
+    text-align: center;
35
+    width: 80%;
36
+    margin-left: 50px;
37
+    height: 40px;
38
+    display: inline-block;
39
+  }
40
+}
41
+@media screen and (max-width: 365px) {
42
+  .comment-more-box {
43
+    text-align: center;
44
+    width: 75%;
45
+    margin-left: 50px;
46
+    height: 40px;
47
+    display: inline-block;
48
+  }
49
+}

+ 1
- 1
lib/components/ContentItem/index.js.map
Plik diff jest za duży
Wyświetl plik


+ 39
- 39
lib/components/Editor/Emoji.css Wyświetl plik

@@ -1,39 +1,39 @@
1
-.emoji .item {
2
-  float: left;
3
-  width: 40px;
4
-  height: 40px;
5
-  cursor: pointer;
6
-  white-space: nowrap;
7
-  /* this is required unless you put the helper span closely near the img */
8
-  text-align: center;
9
-  margin: 0;
10
-}
11
-
12
-.emoji .item .helper {
13
-  display: inline-block;
14
-  height: 100%;
15
-  vertical-align: middle;
16
-}
17
-
18
-.emoji .item img {
19
-  margin: 0 auto;
20
-  vertical-align: middle;
21
-  padding: 3px;
22
-}
23
-
24
-.emoji .item img:hover {
25
-  border: 1px solid #40a9ff;
26
-}
27
-
28
-.ant-carousel .slick-dots {
29
-  height: 5px;
30
-}
31
-
32
-.ant-carousel .slick-dots li button {
33
-  height: 5px;
34
-  width: 25px;
35
-}
36
-
37
-.ant-carousel .slick-dots li.slick-active button {
38
-  width: 32px;
39
-}
1
+.emoji .item {
2
+  float: left;
3
+  width: 40px;
4
+  height: 40px;
5
+  cursor: pointer;
6
+  white-space: nowrap;
7
+  /* this is required unless you put the helper span closely near the img */
8
+  text-align: center;
9
+  margin: 0;
10
+}
11
+
12
+.emoji .item .helper {
13
+  display: inline-block;
14
+  height: 100%;
15
+  vertical-align: middle;
16
+}
17
+
18
+.emoji .item img {
19
+  margin: 0 auto;
20
+  vertical-align: middle;
21
+  padding: 3px;
22
+}
23
+
24
+.emoji .item img:hover {
25
+  border: 1px solid #40a9ff;
26
+}
27
+
28
+.ant-carousel .slick-dots {
29
+  height: 5px;
30
+}
31
+
32
+.ant-carousel .slick-dots li button {
33
+  height: 5px;
34
+  width: 25px;
35
+}
36
+
37
+.ant-carousel .slick-dots li.slick-active button {
38
+  width: 32px;
39
+}

+ 112
- 112
lib/components/ImagePreviewer/ImagePreviewer.css Wyświetl plik

@@ -1,112 +1,112 @@
1
-.container .toolbar {
2
-  border-bottom: 1px solid #f2f2f2;
3
-  margin: 0 5px;
4
-  padding-bottom: 10px;
5
-}
6
-.container .toolbar .button {
7
-  padding: 5px 10px;
8
-  cursor: pointer;
9
-}
10
-.container .toolbar .button.reversal i {
11
-  transform: rotate3d(0, 1, 0, 180deg);
12
-}
13
-.container .pictureWrapper {
14
-  position: relative;
15
-  text-align: center;
16
-  margin-top: 15px;
17
-  padding: 0 5px;
18
-}
19
-.container .pictureWrapper .tools {
20
-  position: absolute;
21
-  left: 0;
22
-  top: 0;
23
-  bottom: 0;
24
-  right: 0;
25
-}
26
-.container .pictureWrapper .tools .item {
27
-  width: 33%;
28
-  display: inline-block;
29
-  height: 100%;
30
-}
31
-.container .pictureWrapper .tools .item.left {
32
-  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined"),
33
-    auto;
34
-}
35
-.container .pictureWrapper .tools .item.shrink {
36
-  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined"),
37
-    auto;
38
-}
39
-.container .pictureWrapper .tools .item.right {
40
-  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined"),
41
-    auto;
42
-}
43
-.container .pictureWrapper .picture {
44
-  max-width: 100%;
45
-  max-height: 400px;
46
-}
47
-.container .pictureWrapper .prev {
48
-  position: absolute;
49
-  width: 50px;
50
-  background-color: transparent;
51
-  z-index: 100;
52
-  opacity: 0.5;
53
-  font-size: 50px;
54
-  text-align: left;
55
-  cursor: pointer;
56
-  left: 5px;
57
-  top: 0;
58
-  bottom: 0;
59
-}
60
-.container .pictureWrapper .prev:hover {
61
-  background-color: #fff;
62
-}
63
-.container .pictureWrapper .next {
64
-  position: absolute;
65
-  width: 50px;
66
-  background-color: transparent;
67
-  z-index: 100;
68
-  opacity: 0.5;
69
-  font-size: 50px;
70
-  text-align: left;
71
-  cursor: pointer;
72
-  right: 5px;
73
-  top: 0;
74
-  bottom: 0;
75
-}
76
-.container .pictureWrapper .next:hover {
77
-  background-color: #fff;
78
-}
79
-.container .pictureWrapper .middle {
80
-  position: absolute;
81
-  top: 50%;
82
-  transform: translateY(-50%);
83
-}
84
-.container .list {
85
-  font-size: 0;
86
-  margin-top: 25px;
87
-}
88
-.container .list .wrapper {
89
-  width: 11.1%;
90
-  height: 0;
91
-  padding-bottom: 11.1%;
92
-  position: relative;
93
-  display: inline-block;
94
-  border-radius: 5px;
95
-  border: 1px solid transparent;
96
-  opacity: 0.5;
97
-}
98
-.container .list .wrapper.active {
99
-  border: 1px solid #fc4747;
100
-  opacity: 1;
101
-}
102
-.container .list .wrapper .thumbnail {
103
-  position: absolute;
104
-  top: 5px;
105
-  bottom: 5px;
106
-  left: 5px;
107
-  right: 5px;
108
-  background-size: cover;
109
-  background-position: center;
110
-  border-radius: 5px;
111
-  cursor: pointer;
112
-}
1
+.container .toolbar {
2
+  border-bottom: 1px solid #f2f2f2;
3
+  margin: 0 5px;
4
+  padding-bottom: 10px;
5
+}
6
+.container .toolbar .button {
7
+  padding: 5px 10px;
8
+  cursor: pointer;
9
+}
10
+.container .toolbar .button.reversal i {
11
+  transform: rotate3d(0, 1, 0, 180deg);
12
+}
13
+.container .pictureWrapper {
14
+  position: relative;
15
+  text-align: center;
16
+  margin-top: 15px;
17
+  padding: 0 5px;
18
+}
19
+.container .pictureWrapper .tools {
20
+  position: absolute;
21
+  left: 0;
22
+  top: 0;
23
+  bottom: 0;
24
+  right: 0;
25
+}
26
+.container .pictureWrapper .tools .item {
27
+  width: 33%;
28
+  display: inline-block;
29
+  height: 100%;
30
+}
31
+.container .pictureWrapper .tools .item.left {
32
+  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined"),
33
+    auto;
34
+}
35
+.container .pictureWrapper .tools .item.shrink {
36
+  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined"),
37
+    auto;
38
+}
39
+.container .pictureWrapper .tools .item.right {
40
+  cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined"),
41
+    auto;
42
+}
43
+.container .pictureWrapper .picture {
44
+  max-width: 100%;
45
+  max-height: 400px;
46
+}
47
+.container .pictureWrapper .prev {
48
+  position: absolute;
49
+  width: 50px;
50
+  background-color: transparent;
51
+  z-index: 100;
52
+  opacity: 0.5;
53
+  font-size: 50px;
54
+  text-align: left;
55
+  cursor: pointer;
56
+  left: 5px;
57
+  top: 0;
58
+  bottom: 0;
59
+}
60
+.container .pictureWrapper .prev:hover {
61
+  background-color: #fff;
62
+}
63
+.container .pictureWrapper .next {
64
+  position: absolute;
65
+  width: 50px;
66
+  background-color: transparent;
67
+  z-index: 100;
68
+  opacity: 0.5;
69
+  font-size: 50px;
70
+  text-align: left;
71
+  cursor: pointer;
72
+  right: 5px;
73
+  top: 0;
74
+  bottom: 0;
75
+}
76
+.container .pictureWrapper .next:hover {
77
+  background-color: #fff;
78
+}
79
+.container .pictureWrapper .middle {
80
+  position: absolute;
81
+  top: 50%;
82
+  transform: translateY(-50%);
83
+}
84
+.container .list {
85
+  font-size: 0;
86
+  margin-top: 25px;
87
+}
88
+.container .list .wrapper {
89
+  width: 11.1%;
90
+  height: 0;
91
+  padding-bottom: 11.1%;
92
+  position: relative;
93
+  display: inline-block;
94
+  border-radius: 5px;
95
+  border: 1px solid transparent;
96
+  opacity: 0.5;
97
+}
98
+.container .list .wrapper.active {
99
+  border: 1px solid #fc4747;
100
+  opacity: 1;
101
+}
102
+.container .list .wrapper .thumbnail {
103
+  position: absolute;
104
+  top: 5px;
105
+  bottom: 5px;
106
+  left: 5px;
107
+  right: 5px;
108
+  background-size: cover;
109
+  background-position: center;
110
+  border-radius: 5px;
111
+  cursor: pointer;
112
+}

+ 117
- 117
lib/components/ImagePreviewer/ImagePreviewer.less Wyświetl plik

@@ -1,117 +1,117 @@
1
-.comment-image-preview-container {
2
-  .toolbar {
3
-    border-bottom: 1px solid #f2f2f2;
4
-    margin: 0 5px;
5
-    padding-bottom: 10px;
6
-    .button {
7
-      padding: 5px 10px;
8
-      cursor: pointer;
9
-      &.reversal i {
10
-        transform: rotate3d(0, 1, 0, 180deg);
11
-      }
12
-    }
13
-  }
14
-  .pictureWrapper {
15
-    position: relative; // width: 100%;
16
-    // padding-bottom: 68%;
17
-    // height: 0;
18
-    text-align: center;
19
-    margin-top: 15px;
20
-    padding: 0 5px;
21
-    .tools {
22
-      position: absolute;
23
-      left: 0;
24
-      top: 0;
25
-      bottom: 0;
26
-      right: 0;
27
-      .item {
28
-        width: 33%;
29
-        display: inline-block;
30
-        height: 100%;
31
-        &.left {
32
-          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined"),
33
-            auto;
34
-        }
35
-        &.shrink {
36
-          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined"),
37
-            auto;
38
-        }
39
-        &.right {
40
-          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined"),
41
-            auto;
42
-        }
43
-      }
44
-    }
45
-    .picture {
46
-      max-width: 100%;
47
-      max-height: 400px;
48
-    }
49
-    .tool() {
50
-      position: absolute;
51
-      width: 50px;
52
-      background-color: transparent;
53
-      z-index: 100;
54
-      opacity: 0.5;
55
-      font-size: 50px;
56
-      text-align: left;
57
-      cursor: pointer;
58
-      &:hover {
59
-        background-color: #fff;
60
-      }
61
-    }
62
-    .prev {
63
-      .tool();
64
-      left: 5px;
65
-      top: 0;
66
-      bottom: 0;
67
-    }
68
-    .next {
69
-      .tool();
70
-      right: 5px;
71
-      top: 0;
72
-      bottom: 0;
73
-    }
74
-    .middle {
75
-      position: absolute;
76
-      top: 50%;
77
-      transform: translateY(-50%);
78
-    } // .picture {
79
-    //     position: absolute;
80
-    //     bottom: 0;
81
-    //     top: 0;
82
-    //     left: 5px;
83
-    //     right: 5px;
84
-    //     background-size: contain;
85
-    //     background-position: center;
86
-    // }
87
-  }
88
-  .list {
89
-    font-size: 0;
90
-    margin-top: 25px;
91
-    .wrapper {
92
-      width: 11.1%;
93
-      height: 0;
94
-      padding-bottom: 11.1%;
95
-      position: relative;
96
-      display: inline-block;
97
-      border-radius: 5px;
98
-      border: 1px solid transparent;
99
-      opacity: 0.5;
100
-      &.active {
101
-        border: 1px solid #fc4747;
102
-        opacity: 1;
103
-      }
104
-      .thumbnail {
105
-        position: absolute;
106
-        top: 5px;
107
-        bottom: 5px;
108
-        left: 5px;
109
-        right: 5px;
110
-        background-size: cover;
111
-        background-position: center;
112
-        border-radius: 5px;
113
-        cursor: pointer;
114
-      }
115
-    }
116
-  }
117
-}
1
+.comment-image-preview-container {
2
+  .toolbar {
3
+    border-bottom: 1px solid #f2f2f2;
4
+    margin: 0 5px;
5
+    padding-bottom: 10px;
6
+    .button {
7
+      padding: 5px 10px;
8
+      cursor: pointer;
9
+      &.reversal i {
10
+        transform: rotate3d(0, 1, 0, 180deg);
11
+      }
12
+    }
13
+  }
14
+  .pictureWrapper {
15
+    position: relative; // width: 100%;
16
+    // padding-bottom: 68%;
17
+    // height: 0;
18
+    text-align: center;
19
+    margin-top: 15px;
20
+    padding: 0 5px;
21
+    .tools {
22
+      position: absolute;
23
+      left: 0;
24
+      top: 0;
25
+      bottom: 0;
26
+      right: 0;
27
+      .item {
28
+        width: 33%;
29
+        display: inline-block;
30
+        height: 100%;
31
+        &.left {
32
+          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined"),
33
+            auto;
34
+        }
35
+        &.shrink {
36
+          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined"),
37
+            auto;
38
+        }
39
+        &.right {
40
+          cursor: url("//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined"),
41
+            auto;
42
+        }
43
+      }
44
+    }
45
+    .picture {
46
+      max-width: 100%;
47
+      max-height: 400px;
48
+    }
49
+    .tool() {
50
+      position: absolute;
51
+      width: 50px;
52
+      background-color: transparent;
53
+      z-index: 100;
54
+      opacity: 0.5;
55
+      font-size: 50px;
56
+      text-align: left;
57
+      cursor: pointer;
58
+      &:hover {
59
+        background-color: #fff;
60
+      }
61
+    }
62
+    .prev {
63
+      .tool();
64
+      left: 5px;
65
+      top: 0;
66
+      bottom: 0;
67
+    }
68
+    .next {
69
+      .tool();
70
+      right: 5px;
71
+      top: 0;
72
+      bottom: 0;
73
+    }
74
+    .middle {
75
+      position: absolute;
76
+      top: 50%;
77
+      transform: translateY(-50%);
78
+    } // .picture {
79
+    //     position: absolute;
80
+    //     bottom: 0;
81
+    //     top: 0;
82
+    //     left: 5px;
83
+    //     right: 5px;
84
+    //     background-size: contain;
85
+    //     background-position: center;
86
+    // }
87
+  }
88
+  .list {
89
+    font-size: 0;
90
+    margin-top: 25px;
91
+    .wrapper {
92
+      width: 11.1%;
93
+      height: 0;
94
+      padding-bottom: 11.1%;
95
+      position: relative;
96
+      display: inline-block;
97
+      border-radius: 5px;
98
+      border: 1px solid transparent;
99
+      opacity: 0.5;
100
+      &.active {
101
+        border: 1px solid #fc4747;
102
+        opacity: 1;
103
+      }
104
+      .thumbnail {
105
+        position: absolute;
106
+        top: 5px;
107
+        bottom: 5px;
108
+        left: 5px;
109
+        right: 5px;
110
+        background-size: cover;
111
+        background-position: center;
112
+        border-radius: 5px;
113
+        cursor: pointer;
114
+      }
115
+    }
116
+  }
117
+}

+ 3
- 3
lib/components/ImagePreviewer/README.md Wyświetl plik

@@ -1,4 +1,4 @@
1
-+ big //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined
2
-+ small //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined
3
-+ prev //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined
1
++ big //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/QPI84fxmD.undefined
2
++ small //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/oGPpbJ7Rk.undefined
3
++ prev //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/73_yM_fx-.undefined
4 4
 + next //links-comment.oss-cn-beijing.aliyuncs.com/comment/20180928/S8obecP1d.undefined

+ 1
- 1
lib/components/RenderText/index.js.map Wyświetl plik

@@ -1 +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\";\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"]}
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"]}

+ 1
- 1
lib/registerServiceWorker.js.map
Plik diff jest za duży
Wyświetl plik


+ 3
- 3
lib/version.json Wyświetl plik

@@ -1,8 +1,8 @@
1 1
 {
2 2
     "name":       "comment",
3
-    "buildDate":  1588149501351,
3
+    "buildDate":  1588435719936,
4 4
     "version":    "1.0.4",
5
-    "numCommits": 211,
6
-    "hash":       "7a67067",
5
+    "numCommits": 215,
6
+    "hash":       "7d03c9b",
7 7
     "dirty":      true
8 8
 }

BIN
src/assert/btn_audio_play.png Wyświetl plik


BIN
src/assert/loading.gif Wyświetl plik


+ 35
- 10
src/components/AudioPlayer/index.js Wyświetl plik

@@ -4,6 +4,8 @@ import dayjs from "dayjs";
4 4
 import durationPlugin from "dayjs/plugin/duration";
5 5
 import utcPlugin from "dayjs/plugin/utc";
6 6
 import "./index.less";
7
+import iconLoading from "../../assert/loading.gif";
8
+import btnAudioPlay from "../../assert/btn_audio_play.png";
7 9
 
8 10
 dayjs.extend(durationPlugin);
9 11
 dayjs.extend(utcPlugin);
@@ -14,7 +16,8 @@ class AudioPlayer extends React.Component {
14 16
     this.state = {
15 17
       duration: 0,
16 18
       currentDuration: 0,
17
-      isPlaying: false
19
+      isPlaying: false,
20
+      isLoading: false
18 21
     };
19 22
   }
20 23
 
@@ -25,8 +28,12 @@ class AudioPlayer extends React.Component {
25 28
         this.setState({ duration: event.target.duration });
26 29
       this.player.onended = () =>
27 30
         this.setState({ isPlaying: false, currentDuration: 0 });
28
-      this.player.onpause = () => this.setState({ isPlaying: false });
29
-      this.player.onplay = () => this.setState({ isPlaying: true });
31
+      this.player.onpause = () =>
32
+        this.setState({ isPlaying: false, isLoading: false });
33
+      this.player.onplay = () =>
34
+        this.setState({ isPlaying: false, isLoading: true });
35
+      this.player.onplaying = () =>
36
+        this.setState({ isPlaying: true, isLoading: false });
30 37
       this.player.ontimeupdate = event =>
31 38
         this.setState({ currentDuration: event.target.currentTime });
32 39
       this.player.src = src;
@@ -39,8 +46,12 @@ class AudioPlayer extends React.Component {
39 46
         this.setState({ duration: event.target.duration });
40 47
       this.player.onended = () =>
41 48
         this.setState({ isPlaying: false, currentDuration: 0 });
42
-      this.player.onpause = () => this.setState({ isPlaying: false });
43
-      this.player.onplay = () => this.setState({ isPlaying: true });
49
+      this.player.onpause = () =>
50
+        this.setState({ isPlaying: false, isLoading: false });
51
+      this.player.onplay = () =>
52
+        this.setState({ isPlaying: false, isLoading: true });
53
+      this.player.onplaying = () =>
54
+        this.setState({ isPlaying: true, isLoading: false });
44 55
       this.player.ontimeupdate = event =>
45 56
         this.setState({ currentDuration: event.target.currentTime });
46 57
       this.player.src = this.props.src;
@@ -67,6 +78,24 @@ class AudioPlayer extends React.Component {
67 78
     }
68 79
   }
69 80
 
81
+  getPlayIcon() {
82
+    const { isPlaying, isLoading } = this.state;
83
+    let playIconElem;
84
+
85
+    if (isLoading) {
86
+      playIconElem = (
87
+        <img className="icon-loading" src={iconLoading} alt="iconLoading" />
88
+      );
89
+    } else if (isPlaying) {
90
+      playIconElem = <Icon className="pause" type="pause" />;
91
+    } else {
92
+      playIconElem = (
93
+        <img className="icon-loading" src={btnAudioPlay} alt="iconPlaying" />
94
+      );
95
+    }
96
+    return playIconElem;
97
+  }
98
+
70 99
   render() {
71 100
     const { currentDuration, isPlaying, duration } = this.state;
72 101
     return (
@@ -84,11 +113,7 @@ class AudioPlayer extends React.Component {
84 113
             this.clickPlayOrPause(isPlaying);
85 114
           }}
86 115
         >
87
-          {isPlaying ? (
88
-            <Icon className="pause" type="pause" />
89
-          ) : (
90
-            <i className="schedule schedule-icon_image_audio" />
91
-          )}
116
+          {this.getPlayIcon()}
92 117
         </span>
93 118
         <Slider
94 119
           step={0.001}

+ 5
- 0
src/components/AudioPlayer/index.less Wyświetl plik

@@ -19,6 +19,11 @@
19 19
     font-size: 14px;
20 20
   }
21 21
 
22
+  .icon-loading {
23
+    width: 100%;
24
+    height: 100%;
25
+  }
26
+
22 27
   .slider {
23 28
     margin: 0 0 0 16px;
24 29
     width: 195px;