7 次代码提交

作者 SHA1 备注 提交日期
  Allen 48149d4ee5 feat: AudioPlayer 添加 loading 过程 4 年前
  Allen 66a30f487a build 4 年前
  Allen 94cdf5abe9 fix 4 年前
  Allen e836b9dc37 fix: 修复 audio 初始状态 4 年前
  Allen 8152c74ae6 style: 优化 audio 样式 4 年前
  Allen 7d03c9b939 fix: AudioPlayer 初始状态问题 4 年前
  Allen acdea44406 feat: AudioPlayer 添加 loading 状态 4 年前
共有 3 个文件被更改,包括 31 次插入67 次删除
  1. 16
    29
      lib/components/AudioPlayer/index.js
  2. 1
    1
      lib/components/AudioPlayer/index.js.map
  3. 14
    37
      src/components/AudioPlayer/index.js

+ 16
- 29
lib/components/AudioPlayer/index.js 查看文件

@@ -77,24 +77,19 @@ var AudioPlayer = function (_React$Component) {
77 77
         var src = this.props.src;
78 78
 
79 79
         this.player.oncanplay = function (event) {
80
-          console.log(event, 1111);
81
-          _this2.setState({ duration: event.target.duration });
80
+          return _this2.setState({ duration: event.target.duration });
82 81
         };
83
-        this.player.onended = function (event) {
84
-          console.log(event, 2222);
85
-          _this2.setState({ isPlaying: false, currentDuration: 0 });
82
+        this.player.onended = function () {
83
+          return _this2.setState({ isPlaying: false, currentDuration: 0 });
86 84
         };
87
-        this.player.onpause = function (event) {
88
-          console.log(event, 333);
89
-          _this2.setState({ isPlaying: false });
85
+        this.player.onpause = function () {
86
+          return _this2.setState({ isPlaying: false, isLoading: false });
90 87
         };
91 88
         this.player.onplay = function () {
92
-          console.log(event, 5555);
93
-          _this2.setState({ isPlaying: true, isLoading: false });
89
+          return _this2.setState({ isPlaying: false, isLoading: true });
94 90
         };
95
-        this.player.onplaying = function (event) {
96
-          console.log(event, 4444);
97
-          _this2.setState({ isPlaying: true, isLoading: false });
91
+        this.player.onplaying = function () {
92
+          return _this2.setState({ isPlaying: true, isLoading: false });
98 93
         };
99 94
         this.player.ontimeupdate = function (event) {
100 95
           return _this2.setState({ currentDuration: event.target.currentTime });
@@ -109,24 +104,19 @@ var AudioPlayer = function (_React$Component) {
109 104
 
110 105
       if (this.props.src !== prevProps.src) {
111 106
         this.player.oncanplay = function (event) {
112
-          console.log(event, 1111);
113
-          _this3.setState({ duration: event.target.duration });
107
+          return _this3.setState({ duration: event.target.duration });
114 108
         };
115
-        this.player.onended = function (event) {
116
-          console.log(event, 2222);
117
-          _this3.setState({ isPlaying: false, currentDuration: 0 });
109
+        this.player.onended = function () {
110
+          return _this3.setState({ isPlaying: false, currentDuration: 0 });
118 111
         };
119
-        this.player.onpause = function (event) {
120
-          console.log(event, 333);
121
-          _this3.setState({ isPlaying: false });
112
+        this.player.onpause = function () {
113
+          return _this3.setState({ isPlaying: false, isLoading: false });
122 114
         };
123 115
         this.player.onplay = function () {
124
-          console.log(event, 5555);
125
-          _this3.setState({ isPlaying: true, isLoading: false });
116
+          return _this3.setState({ isPlaying: false, isLoading: true });
126 117
         };
127
-        this.player.onplaying = function (event) {
128
-          console.log(event, 4444);
129
-          _this3.setState({ isPlaying: true, isLoading: false });
118
+        this.player.onplaying = function () {
119
+          return _this3.setState({ isPlaying: true, isLoading: false });
130 120
         };
131 121
         this.player.ontimeupdate = function (event) {
132 122
           return _this3.setState({ currentDuration: event.target.currentTime });
@@ -153,9 +143,6 @@ var AudioPlayer = function (_React$Component) {
153 143
           });
154 144
         }
155 145
         this.player.play();
156
-        this.setState({
157
-          isLoading: true
158
-        });
159 146
       }
160 147
     }
161 148
   }, {

+ 1
- 1
lib/components/AudioPlayer/index.js.map
文件差异内容过多而无法显示
查看文件


+ 14
- 37
src/components/AudioPlayer/index.js 查看文件

@@ -23,26 +23,16 @@ class AudioPlayer extends React.Component {
23 23
   componentDidMount() {
24 24
     if (this.player) {
25 25
       const { src } = this.props;
26
-      this.player.oncanplay = event => {
27
-        console.log(event, 1111);
26
+      this.player.oncanplay = event =>
28 27
         this.setState({ duration: event.target.duration });
29
-      };
30
-      this.player.onended = event => {
31
-        console.log(event, 2222);
28
+      this.player.onended = () =>
32 29
         this.setState({ isPlaying: false, currentDuration: 0 });
33
-      };
34
-      this.player.onpause = event => {
35
-        console.log(event, 333);
36
-        this.setState({ isPlaying: false });
37
-      };
38
-      this.player.onplay = () => {
39
-        console.log(event, 5555);
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 = () =>
40 35
         this.setState({ isPlaying: true, isLoading: false });
41
-      };
42
-      this.player.onplaying = event => {
43
-        console.log(event, 4444);
44
-        this.setState({ isPlaying: true, isLoading: false });
45
-      };
46 36
       this.player.ontimeupdate = event =>
47 37
         this.setState({ currentDuration: event.target.currentTime });
48 38
       this.player.src = src;
@@ -51,26 +41,16 @@ class AudioPlayer extends React.Component {
51 41
 
52 42
   componentDidUpdate(prevProps) {
53 43
     if (this.props.src !== prevProps.src) {
54
-      this.player.oncanplay = event => {
55
-        console.log(event, 1111);
44
+      this.player.oncanplay = event =>
56 45
         this.setState({ duration: event.target.duration });
57
-      };
58
-      this.player.onended = event => {
59
-        console.log(event, 2222);
46
+      this.player.onended = () =>
60 47
         this.setState({ isPlaying: false, currentDuration: 0 });
61
-      };
62
-      this.player.onpause = event => {
63
-        console.log(event, 333);
64
-        this.setState({ isPlaying: false });
65
-      };
66
-      this.player.onplay = () => {
67
-        console.log(event, 5555);
68
-        this.setState({ isPlaying: true, isLoading: false });
69
-      };
70
-      this.player.onplaying = event => {
71
-        console.log(event, 4444);
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 = () =>
72 53
         this.setState({ isPlaying: true, isLoading: false });
73
-      };
74 54
       this.player.ontimeupdate = event =>
75 55
         this.setState({ currentDuration: event.target.currentTime });
76 56
       this.player.src = this.props.src;
@@ -94,9 +74,6 @@ class AudioPlayer extends React.Component {
94 74
         });
95 75
       }
96 76
       this.player.play();
97
-      this.setState({
98
-        isLoading: true
99
-      });
100 77
     }
101 78
   }
102 79