feat: add onChange event to <Media>

src/Media/index.ts

@@ -29,6 +29,7 @@ export interface IMediaProps<M> extends React.AllHTMLAttributes<any> {
 
   onMount?: TMediaEvent<M>,
   onUnmount?: TMediaEvent<M>,
+  onChange?: TMediaEvent<M>,
   onAbort?: TMediaEvent<M>,
   onCanPlay?: TMediaEvent<M>,
   onCanPlayThrough?: TMediaEvent<M>,
@@ -166,16 +167,22 @@ export class Media<P extends IMediaProps<M>, S extends IMediaState, M extends IM
     }
   };
 
+  change (nextState) {
+    this.setState(nextState, () => {
+      this.event('onChange')(null);
+    });
+  }
+
   onPlay = (event) => {
-    this.setState({
+    this.change({
       isPlaying: true
     });
 
     this.event('onPlay')(event);
   };
 
   onPause = (event) => {
-    this.setState({
+    this.change({
       isPlaying: false
     });
 
@@ -185,7 +192,7 @@ export class Media<P extends IMediaProps<M>, S extends IMediaState, M extends IM
   onVolumeChange = (event) => {
     const {muted, volume} = this.el;
 
-    this.setState({
+    this.change({
       muted,
       volume
     });
@@ -196,7 +203,7 @@ export class Media<P extends IMediaProps<M>, S extends IMediaState, M extends IM
   onDurationChange = (event) => {
     const {duration, buffered} = this.el;
 
-    this.setState({
+    this.change({
       duration,
       buffered: parseTimeRanges(buffered)
     });
@@ -205,15 +212,15 @@ export class Media<P extends IMediaProps<M>, S extends IMediaState, M extends IM
   };
 
   onTimeUpdate = (event) => {
-    this.setState({
+    this.change({
       time: this.el.currentTime
     });
 
     this.event('onTimeUpdate')(event);
   };
 
   onProgress = (event) => {
-    this.setState({
+    this.change({
       buffered: parseTimeRanges(this.el.buffered)
     });
 
@@ -222,7 +229,7 @@ export class Media<P extends IMediaProps<M>, S extends IMediaState, M extends IM
 
   render () {
     const {props, event} = this;
-    const {tag = this.tag, children, render, noJs, ...rest} = props as any;
+    const {tag = this.tag, children, render, noJs, onMount, onUnmount, ...rest} = props as any;
 
     return h(tag, {
       ...rest,