소스 검색

feat: AudioPlayer 添加 loading 过程

Allen 4 년 전
부모
커밋
48149d4ee5

+ 30
- 30
lib/App.module.css 파일 보기

@@ -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 파일 보기

@@ -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/loading.gif 파일 보기


+ 1
- 1
lib/avatar.js.map
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
파일 보기


+ 1
- 1
lib/axios.js.map 파일 보기

@@ -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"]}

+ 39
- 10
lib/components/AudioPlayer/index.js 파일 보기

@@ -36,6 +36,10 @@ 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
+
39 43
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
40 44
 
41 45
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -58,7 +62,8 @@ var AudioPlayer = function (_React$Component) {
58 62
     _this.state = {
59 63
       duration: 0,
60 64
       currentDuration: 0,
61
-      isPlaying: false
65
+      isPlaying: false,
66
+      isLoading: false
62 67
     };
63 68
     return _this;
64 69
   }
@@ -78,10 +83,13 @@ var AudioPlayer = function (_React$Component) {
78 83
           return _this2.setState({ isPlaying: false, currentDuration: 0 });
79 84
         };
80 85
         this.player.onpause = function () {
81
-          return _this2.setState({ isPlaying: false });
86
+          return _this2.setState({ isPlaying: false, isLoading: false });
82 87
         };
83 88
         this.player.onplay = function () {
84
-          return _this2.setState({ isPlaying: true });
89
+          return _this2.setState({ isPlaying: false, isLoading: true });
90
+        };
91
+        this.player.onplaying = function () {
92
+          return _this2.setState({ isPlaying: true, isLoading: false });
85 93
         };
86 94
         this.player.ontimeupdate = function (event) {
87 95
           return _this2.setState({ currentDuration: event.target.currentTime });
@@ -102,10 +110,13 @@ var AudioPlayer = function (_React$Component) {
102 110
           return _this3.setState({ isPlaying: false, currentDuration: 0 });
103 111
         };
104 112
         this.player.onpause = function () {
105
-          return _this3.setState({ isPlaying: false });
113
+          return _this3.setState({ isPlaying: false, isLoading: false });
106 114
         };
107 115
         this.player.onplay = function () {
108
-          return _this3.setState({ isPlaying: true });
116
+          return _this3.setState({ isPlaying: false, isLoading: true });
117
+        };
118
+        this.player.onplaying = function () {
119
+          return _this3.setState({ isPlaying: true, isLoading: false });
109 120
         };
110 121
         this.player.ontimeupdate = function (event) {
111 122
           return _this3.setState({ currentDuration: event.target.currentTime });
@@ -134,15 +145,33 @@ var AudioPlayer = function (_React$Component) {
134 145
         this.player.play();
135 146
       }
136 147
     }
148
+  }, {
149
+    key: "getPlayIcon",
150
+    value: function getPlayIcon() {
151
+      var _state = this.state,
152
+          isPlaying = _state.isPlaying,
153
+          isLoading = _state.isLoading;
154
+
155
+      var playIconElem = void 0;
156
+
157
+      if (isLoading) {
158
+        playIconElem = _react2.default.createElement("img", { className: "icon-loading", src: _loading2.default, alt: "iconLoading" });
159
+      } else if (isPlaying) {
160
+        playIconElem = _react2.default.createElement(_icon2.default, { className: "pause", type: "pause" });
161
+      } else {
162
+        playIconElem = _react2.default.createElement("i", { className: "schedule schedule-icon_image_audio" });
163
+      }
164
+      return playIconElem;
165
+    }
137 166
   }, {
138 167
     key: "render",
139 168
     value: function render() {
140 169
       var _this4 = this;
141 170
 
142
-      var _state = this.state,
143
-          currentDuration = _state.currentDuration,
144
-          isPlaying = _state.isPlaying,
145
-          duration = _state.duration;
171
+      var _state2 = this.state,
172
+          currentDuration = _state2.currentDuration,
173
+          isPlaying = _state2.isPlaying,
174
+          duration = _state2.duration;
146 175
 
147 176
       return _react2.default.createElement(
148 177
         "div",
@@ -161,7 +190,7 @@ var AudioPlayer = function (_React$Component) {
161 190
               _this4.clickPlayOrPause(isPlaying);
162 191
             }
163 192
           },
164
-          isPlaying ? _react2.default.createElement(_icon2.default, { className: "pause", type: "pause" }) : _react2.default.createElement("i", { className: "schedule schedule-icon_image_audio" })
193
+          this.getPlayIcon()
165 194
         ),
166 195
         _react2.default.createElement(_slider2.default, {
167 196
           step: 0.001,

+ 1
- 1
lib/components/AudioPlayer/index.js.map
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
파일 보기


+ 5
- 0
lib/components/AudioPlayer/index.less 파일 보기

@@ -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 파일 보기

@@ -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
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
파일 보기


+ 39
- 39
lib/components/Editor/Emoji.css 파일 보기

@@ -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 파일 보기

@@ -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 파일 보기

@@ -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 파일 보기

@@ -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 파일 보기

@@ -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
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
파일 보기


+ 3
- 3
lib/version.json 파일 보기

@@ -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/loading.gif 파일 보기


+ 32
- 10
src/components/AudioPlayer/index.js 파일 보기

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

+ 5
- 0
src/components/AudioPlayer/index.less 파일 보기

@@ -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;