@htyf-mp/taro-components-rn 0.0.1

package/dist/components/Video/controls.js

@@ -0,0 +1,166 @@
+// import React, { Component } from 'react'
+// import View from '../View'
+// import { ControlsProps } from './PropsType'
+// import { formatTime } from './utils'
+// import Styles from './style'
+// import Image from '../Image'
+// /**
+//  * @typedef {Object} ControlsProps
+//  * @property {Boolean} controls={controls}
+//  * @property {Number} currentTime={this.currentTime}
+//  * @property {Number} duration={this.state.duration}
+//  * @property {Boolean} isPlaying={this.state.isPlaying}
+//  * @property {Function} pauseFunc={this.pause}
+//  * @property {Function} playFunc={this.play}
+//  * @property {Function} seekFunc={this.seek}
+//  * @property {Boolean} showPlayBtn={showPlayBtn}
+//  * @property {Boolean} showProgress={showProgress}
+//  */
+// class Controls extends Component<ControlsProps, any> {
+//   visible = false
+//   isDraggingProgressBall = false
+//   /** @type {number} */
+//   hideControlsTimer
+//   progressDimentions = {
+//     left: 0,
+//     right: 0,
+//     width: 0
+//   }
+//   calcPercentage = pageX => {
+//     let pos = pageX - this.progressDimentions.left
+//     pos = Math.max(pos, 0)
+//     pos = Math.min(pos, this.progressDimentions.width)
+//     return pos / this.progressDimentions.width
+//   }
+//   getControlsRef = ref => {
+//     if (!ref) return
+//     this.controlsRef = ref
+//   }
+//   getCurrentTimeRef = ref => {
+//     if (!ref) return
+//     this.currentTimeRef = ref
+//   }
+//   getProgressBallRef = ref => {
+//     if (!ref) return
+//     this.progressBallRef = ref
+//   }
+//   setCurrentTime (time) {
+//     if (this.currentTimeRef) {
+//       this.currentTimeRef.innerHTML = formatTime(time)
+//     }
+//   }
+//   setProgressBall (percentage) {
+//     if (this.progressBallRef) {
+//       this.progressBallRef.style.left = `${percentage * 100}%`
+//     }
+//   }
+//   toggleVisibility (nextVisible) {
+//     const visible = nextVisible === undefined ? !this.visible : nextVisible
+//     if (visible) {
+//       this.hideControlsTimer && clearTimeout(this.hideControlsTimer)
+//       if (this.props.isPlaying) {
+//         this.hideControlsTimer = setTimeout(() => {
+//           this.toggleVisibility(false)
+//         }, 2000)
+//       }
+//       if (this.controlsRef) {
+//         this.controlsRef.style.visibility = 'visible'
+//       }
+//     } else {
+//       if (this.controlsRef) {
+//         this.controlsRef.style.visibility = 'hidden'
+//       }
+//     }
+//     this.visible = !!visible
+//   }
+//   onDragProgressBallStart = () => {
+//     this.isDraggingProgressBall = true
+//     this.hideControlsTimer && clearTimeout(this.hideControlsTimer)
+//   }
+//   onClickProgress = e => {
+//     e.stopPropagation()
+//     const seekFunc = this.props.seekFunc
+//     const percentage = this.calcPercentage(e.pageX)
+//     seekFunc(percentage * this.props.duration)
+//     this.toggleVisibility(true)
+//   }
+//   bindTouchEvents = () => {
+//     let percentage = 0
+//     const touchMove = e => {
+//       if (!this.isDraggingProgressBall) return
+//       const touchX = e.touches[0].pageX
+//       percentage = this.calcPercentage(touchX)
+//       this.setProgressBall(percentage)
+//     }
+//     const touchEnd = e => {
+//       if (!this.isDraggingProgressBall) return
+//       const seekFunc = this.props.seekFunc
+//       this.isDraggingProgressBall = false
+//       seekFunc(percentage * this.props.duration)
+//       this.toggleVisibility(true)
+//     }
+//     // document.body.addEventListener('touchmove', touchMove)
+//     // document.body.addEventListener('touchend', touchEnd)
+//     // document.body.addEventListener('touchcancel', touchEnd)
+//     // return () => {
+//     //   document.body.removeEventListener('touchmove', touchMove)
+//     //   document.body.removeEventListener('touchend', touchEnd)
+//     //   document.body.removeEventListener('touchcancel', touchEnd)
+//     // }
+//   }
+//   componentDidMount () {
+//     // this.unbindTouchEvents = this.bindTouchEvents()
+//   }
+//   componentWillUnmount () {
+//     // this.unbindTouchEvents()
+//   }
+//   render () {
+//     const { controls, currentTime, duration, isPlaying, pauseFunc, playFunc, showPlayBtn, showProgress } = this.props
+//     const formattedDuration = formatTime(duration as number)
+//     let playBtn
+//     if (!showPlayBtn) {
+//       return null
+//     } else if (isPlaying) {
+//       playBtn = <Image src={require('../../assets/video/play.png')} style={[Styles['taro-video-control-button'], Styles['taro-video-control-button-pause']]} onClick={pauseFunc} />;
+//     } else {
+//       playBtn = <Image src={require('../../assets/video/play.png')} style={[Styles['taro-video-control-button'], Styles['taro-video-control-button-pause']]} onClick={pauseFunc} />;
+//     }
+//     return (
+//       <View style={[Styles['taro-video-bar'], Styles['taro-video-bar-full']]} ref={this.getControlsRef}>
+//         {controls && (
+//           <View style={Styles['taro-video-controls']}>
+//             {playBtn}
+//             {showProgress && (
+//               <View style={Styles['taro-video-current-time']} ref={this.getCurrentTimeRef}>
+//                 {formatTime(currentTime as number)}
+//               </View>
+//             )}
+//             {showProgress && (
+//               <View style={Styles['taro-video-progress-container']} onClick={this.onClickProgress}>
+//                 <View
+//                   style={Styles['taro-video-progress']}
+//                   ref={ref => {
+//                     // if (ref !== null) {
+//                     //   const rect = ref.getBoundingClientRect()
+//                     //   this.progressDimentions.left = rect.left
+//                     //   this.progressDimentions.right = rect.right
+//                     //   this.progressDimentions.width = rect.width
+//                     // }
+//                   }}>
+//                   <View style={Styles['taro-video-progress-buffered']} style={{ width: '100%' }} />
+//                   <View style={Styles['taro-video-ball']} ref={this.getProgressBallRef} onTouchStart={this.onDragProgressBallStart} style={`left: ${formattedDuration ? (this.currentTime / duration) * 100 : 0}%`}>
+//                     <View style={Styles['taro-video-inner']} />
+//                   </View>
+//                 </View>
+//               </View>
+//             )}
+//             {showProgress && <View style={Styles['taro-video-duration']}>{formattedDuration}</View>}
+//           </View>
+//         )}
+//         {this.props.children}
+//       </View>
+//     )
+//   }
+// }
+// export default Controls
+//# sourceMappingURL=controls.js.map

package/dist/components/Video/controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"controls.js","sourceRoot":"","sources":["../../../src/components/Video/controls.tsx"],"names":[],"mappings":"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"}

package/dist/components/Video/danmu.js

@@ -0,0 +1,101 @@
+// /* eslint-disable react/react-in-jsx-scope */
+// /* eslint-disable no-undef */
+// /* eslint-disable @typescript-eslint/no-unused-vars */
+// import Nerv, { PureComponent } from 'nervjs'
+// class Danmu extends PureComponent<any, any> {
+//   state = {
+//     danmuList: []
+//   }
+//   danmuList = []
+//   danmuElList = []
+//   currentTime = 0
+//   ensureProperties (danmu) {
+//     const clonedDanmu = { ...danmu }
+//     if (!('time' in danmu)) {
+//       clonedDanmu.time = this.currentTime
+//     }
+//     clonedDanmu.key = Math.random()
+//     clonedDanmu.bottom = `${Math.random() * 90 + 5}%`
+//     return clonedDanmu
+//   }
+//   sendDanmu (danmuList) {
+//     if (Array.isArray(danmuList)) {
+//       this.danmuList = [
+//         ...this.danmuList,
+//         ...danmuList.map(danmu => {
+//           return this.ensureProperties(danmu)
+//         })
+//       ]
+//     } else {
+//       const danmu = danmuList
+//       this.danmuList = [
+//         ...this.danmuList,
+//         { ...this.ensureProperties(danmu) }
+//       ]
+//     }
+//   }
+//   tick (currentTime) {
+//     this.currentTime = currentTime
+//     if (!this.props.enable) return
+//     const danmuList = this.danmuList
+//     /**
+//      * @todo 这个判断对拖拽进度的处理不严谨
+//      */
+//     const newDanmuList = danmuList.filter(({ time }) => {
+//       return currentTime - time < 4 && currentTime > time
+//     })
+//     let shouldUpdate = false
+//     const oldDanmuList = this.state.danmuList
+//     if (newDanmuList.length !== oldDanmuList.length) {
+//       shouldUpdate = true
+//     } else {
+//       shouldUpdate = newDanmuList.some(({ key }) => {
+//         return oldDanmuList.every((danmu) => {
+//           return key !== danmu.key
+//         })
+//       })
+//     }
+//     if (shouldUpdate) {
+//       this.setState({
+//         danmuList: newDanmuList
+//       })
+//     }
+//   }
+//   componentDidUpdate () {
+//     requestAnimationFrame(() => {
+//       setTimeout(() => {
+//         const danmuElList = this.danmuElList.splice(0)
+//         danmuElList.forEach(danmu => {
+//           danmu.style.left = 0
+//           danmu.style.webkitTransform = 'translateX(-100%)'
+//           danmu.style.transform = 'translateX(-100%)'
+//         })
+//       })
+//     })
+//   }
+//   render () {
+//     if (!this.props.enable) return ''
+//     return <div className='taro-video-danmu'>
+//       {this.state.danmuList.map(({ text, color, bottom, key }) => {
+//         return (
+//           <p
+//             className='taro-video-danmu-item'
+//             key={key}
+//             style={{
+//               color,
+//               bottom
+//             }}
+//             ref={ref => {
+//               if (ref) {
+//                 this.danmuElList.push(ref)
+//               }
+//             }}>
+//             {text}
+//           </p>
+//         )
+//       })}
+//     </div>
+//   }
+// }
+// export default Danmu
+//# sourceMappingURL=danmu.js.map

package/dist/components/Video/danmu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"danmu.js","sourceRoot":"","sources":["../../../src/components/Video/danmu.tsx"],"names":[],"mappings":"AAAA,gDAAgD;AAChD,gCAAgC;AAChC,yDAAyD;AACzD,+CAA+C;AAE/C,gDAAgD;AAChD,cAAc;AACd,oBAAoB;AACpB,MAAM;AAEN,mBAAmB;AACnB,qBAAqB;AACrB,oBAAoB;AAEpB,+BAA+B;AAC/B,uCAAuC;AACvC,gCAAgC;AAChC,4CAA4C;AAC5C,QAAQ;AACR,sCAAsC;AACtC,wDAAwD;AACxD,yBAAyB;AACzB,MAAM;AAEN,4BAA4B;AAC5B,sCAAsC;AACtC,2BAA2B;AAC3B,6BAA6B;AAC7B,sCAAsC;AACtC,gDAAgD;AAChD,aAAa;AACb,UAAU;AACV,eAAe;AACf,gCAAgC;AAChC,2BAA2B;AAC3B,6BAA6B;AAC7B,8CAA8C;AAC9C,UAAU;AACV,QAAQ;AACR,MAAM;AAEN,yBAAyB;AACzB,qCAAqC;AACrC,qCAAqC;AAErC,uCAAuC;AACvC,UAAU;AACV,+BAA+B;AAC/B,UAAU;AACV,4DAA4D;AAC5D,4DAA4D;AAC5D,SAAS;AACT,+BAA+B;AAC/B,gDAAgD;AAEhD,yDAAyD;AACzD,4BAA4B;AAC5B,eAAe;AACf,wDAAwD;AACxD,iDAAiD;AACjD,qCAAqC;AACrC,aAAa;AACb,WAAW;AACX,QAAQ;AACR,0BAA0B;AAC1B,wBAAwB;AACxB,kCAAkC;AAClC,WAAW;AACX,QAAQ;AACR,MAAM;AAEN,4BAA4B;AAC5B,oCAAoC;AACpC,2BAA2B;AAC3B,yDAAyD;AACzD,yCAAyC;AACzC,iCAAiC;AACjC,8DAA8D;AAC9D,wDAAwD;AACxD,aAAa;AACb,WAAW;AACX,SAAS;AACT,MAAM;AAEN,gBAAgB;AAChB,wCAAwC;AACxC,gDAAgD;AAChD,sEAAsE;AACtE,mBAAmB;AACnB,eAAe;AACf,gDAAgD;AAChD,wBAAwB;AACxB,uBAAuB;AACvB,uBAAuB;AACvB,uBAAuB;AACvB,iBAAiB;AACjB,4BAA4B;AAC5B,2BAA2B;AAC3B,6CAA6C;AAC7C,kBAAkB;AAClB,kBAAkB;AAClB,qBAAqB;AACrB,iBAAiB;AACjB,YAAY;AACZ,YAAY;AACZ,aAAa;AACb,MAAM;AACN,IAAI;AAEJ,uBAAuB"}

package/dist/components/Video/index.js

@@ -0,0 +1,380 @@
+/**
+ * Video组件的样式参考了[uni-app](https://github.com/dcloudio/uni-app/tree/master/packages/uni-h5)的实现
+ */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { createVideoPlayer, VideoView, } from 'expo-video';
+import React, { Component, createRef } from 'react';
+import Image from '../Image';
+import Text from '../Text';
+import View from '../View';
+import Styles from './style';
+// import Danmu from './danmu'
+// import Controls from './controls'
+import { formatTime } from './utils';
+const ObjectFit = {
+    contain: 'contain',
+    fill: 'fill',
+    cover: 'cover',
+};
+global._taroVideoMap = global._taroVideoMap || {};
+class _Video extends Component {
+    constructor(props) {
+        super(props);
+        this.player = null;
+        this.taroVideoRef = null;
+        this.videoViewRef = createRef();
+        this.subscriptions = [];
+        /** @type {number} */
+        this.currentTime = 0;
+        this.progressDimentions = {
+            left: 0,
+            right: 0,
+            width: 0,
+        };
+        this.createPlayer = () => {
+            const { src, loop, muted, initialTime, id } = this.props;
+            const player = createVideoPlayer(src ? { uri: src } : null);
+            player.loop = !!loop;
+            player.muted = !!muted;
+            player.timeUpdateEventInterval = 0.25;
+            if (initialTime) {
+                player.currentTime = initialTime;
+            }
+            this.player = player;
+            this.taroVideoRef = this.createTaroVideoRef(player);
+            if (id) {
+                global._taroVideoMap[id] = this.taroVideoRef;
+            }
+        };
+        this.createTaroVideoRef = (player) => ({
+            playAsync: () => __awaiter(this, void 0, void 0, function* () {
+                player.play();
+            }),
+            pauseAsync: () => __awaiter(this, void 0, void 0, function* () {
+                player.pause();
+            }),
+            stopAsync: () => __awaiter(this, void 0, void 0, function* () {
+                player.pause();
+                player.currentTime = 0;
+            }),
+            setPositionAsync: (_a) => __awaiter(this, [_a], void 0, function* ({ positionMillis }) {
+                player.currentTime = positionMillis / 1000;
+            }),
+            setRateAsync: (rate) => __awaiter(this, void 0, void 0, function* () {
+                player.playbackRate = rate;
+            }),
+            setStatusAsync: (_a) => __awaiter(this, [_a], void 0, function* ({ positionMillis }) {
+                if (positionMillis != null) {
+                    player.currentTime = positionMillis / 1000;
+                }
+            }),
+            presentFullscreenPlayer: () => __awaiter(this, void 0, void 0, function* () {
+                var _a;
+                (_a = this.videoViewRef.current) === null || _a === void 0 ? void 0 : _a.enterFullscreen();
+            }),
+            dismissFullscreenPlayer: () => __awaiter(this, void 0, void 0, function* () {
+                var _a;
+                (_a = this.videoViewRef.current) === null || _a === void 0 ? void 0 : _a.exitFullscreen();
+            }),
+        });
+        this.buildPlaybackStatus = (player) => ({
+            isLoaded: player.status === 'readyToPlay' || player.status === 'loading',
+            isPlaying: player.playing,
+            durationMillis: (player.duration || 0) * 1000,
+            positionMillis: (player.currentTime || 0) * 1000,
+            didJustFinish: false,
+        });
+        this.onSourceLoad = () => {
+            const player = this.player;
+            if (!player)
+                return;
+            const status = this.buildPlaybackStatus(player);
+            this.setState({
+                duration: status.durationMillis,
+            });
+            this.props.onLoad && this.props.onLoad();
+            this.onLoadedMetaData(status);
+        };
+        this.onTimeUpdate = () => {
+            const player = this.player;
+            if (!player)
+                return;
+            this.onPlaybackStatusUpdate(this.buildPlaybackStatus(player));
+        };
+        this.onPlayingChange = () => {
+            const player = this.player;
+            if (!player)
+                return;
+            this.onPlaybackStatusUpdate(this.buildPlaybackStatus(player));
+        };
+        this.onPlayToEnd = () => {
+            const player = this.player;
+            if (!player)
+                return;
+            this.onPlaybackStatusUpdate(Object.assign(Object.assign({}, this.buildPlaybackStatus(player)), { didJustFinish: true }));
+        };
+        this.onStatusChange = ({ error }) => {
+            if (error) {
+                this.onError(String(error));
+            }
+        };
+        // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+        this.onEnded = (e) => {
+            this.setState({
+                // isFirst: true,
+                isEnded: true,
+            });
+            if (!this.props.loop)
+                this.pause();
+            this.props.onEnded && this.props.onEnded(e);
+        };
+        // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+        this.onPlay = (e) => {
+            this.props.onPlay && this.props.onPlay(e);
+            if (!this.state.isPlaying) {
+                this.play();
+            }
+        };
+        // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+        this.onPause = (e) => {
+            this.props.onPause && this.props.onPause(e);
+            if (this.state.isPlaying) {
+                this.setState({
+                    isPlaying: false,
+                });
+            }
+        };
+        // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+        this.onError = (e) => {
+            if (this.props.onError) {
+                const error = Object.defineProperty({}, 'detail', {
+                    enumerable: true,
+                    value: { errMsg: e },
+                });
+                this.props.onError(error);
+            }
+        };
+        this.clickPlayBtn = () => {
+            const { isEnded } = this.state;
+            isEnded && this.seek(0);
+            this.play();
+        };
+        this.play = () => {
+            var _a;
+            const { isEnded } = this.state;
+            isEnded && this.seek(0);
+            (_a = this.player) === null || _a === void 0 ? void 0 : _a.play();
+            this.setState({
+                shouldPlay: true,
+                isPlaying: true,
+                isFirst: false,
+            });
+        };
+        this.pause = () => {
+            var _a;
+            (_a = this.player) === null || _a === void 0 ? void 0 : _a.pause();
+            this.setState({
+                isPlaying: false,
+                shouldPlay: false,
+            });
+        };
+        this.stop = () => {
+            this.pause();
+            this.seek(0);
+            this.setState({
+                isPlaying: false,
+            });
+        };
+        this.seek = (position) => {
+            if (this.player) {
+                this.player.currentTime = position / 1000;
+            }
+        };
+        this.showStatusBar = () => {
+            console.error('暂不支持 videoContext.showStatusBar');
+        };
+        this.hideStatusBar = () => {
+            console.error('暂不支持 videoContext.hideStatusBar');
+        };
+        this.requestFullScreen = () => {
+            var _a;
+            (_a = this.videoViewRef.current) === null || _a === void 0 ? void 0 : _a.enterFullscreen();
+        };
+        this.exitFullScreen = () => {
+            var _a;
+            (_a = this.videoViewRef.current) === null || _a === void 0 ? void 0 : _a.exitFullscreen();
+        };
+        this.onLoadedMetaData = (status) => {
+            const player = this.player;
+            const videoTrack = player === null || player === void 0 ? void 0 : player.videoTrack;
+            const naturalSize = videoTrack
+                ? {
+                    width: videoTrack.size.width,
+                    height: videoTrack.size.height,
+                    orientation: videoTrack.size.width >= videoTrack.size.height ? 'landscape' : 'portrait',
+                }
+                : {};
+            // @ts-ignore
+            status.duration = status.durationMillis;
+            // @ts-ignore
+            this.props.onLoadedMetaData && this.props.onLoadedMetaData({ detail: Object.assign(Object.assign({}, naturalSize), status) });
+        };
+        this.onFullscreenChange = (fullScreen, fullscreenUpdate) => {
+            const player = this.player;
+            const status = player ? this.buildPlaybackStatus(player) : {};
+            const detail = Object.assign({ fullScreen,
+                fullscreenUpdate, direction: 'vertical' }, status);
+            if (this.state.isFullScreen !== fullScreen) {
+                this.setState({
+                    isFullScreen: fullScreen,
+                }, () => {
+                    // @ts-ignore
+                    this.props.onFullscreenChange && this.props.onFullscreenChange({ detail });
+                });
+            }
+        };
+        this.onPlaybackStatusUpdate = (event) => {
+            // @ts-ignore
+            this.props.onTimeUpdate && this.props.onTimeUpdate(event);
+            // @ts-ignore
+            const { didJustFinish, isPlaying } = event;
+            if (didJustFinish) {
+                this.onEnded(event);
+            }
+            if (isPlaying !== this.state.isPlaying) {
+                this.setState({
+                    isPlaying,
+                    isFirst: isPlaying ? false : this.state.isFirst
+                }, () => {
+                    isPlaying && this.onPlay(event);
+                    !isPlaying && !this.state.isFirst && this.onPause(event);
+                });
+            }
+        };
+        const stateObj = this.props;
+        this.state = Object.assign({
+            duration: null,
+            isPlaying: false,
+            isFirst: true,
+            enableDanmu: false,
+            isFullScreen: false,
+            isMute: false,
+        }, stateObj);
+        this.createPlayer();
+    }
+    componentDidMount() {
+        const player = this.player;
+        if (!player)
+            return;
+        this.subscriptions = [
+            player.addListener('sourceLoad', this.onSourceLoad),
+            player.addListener('timeUpdate', this.onTimeUpdate),
+            player.addListener('playingChange', this.onPlayingChange),
+            player.addListener('playToEnd', this.onPlayToEnd),
+            player.addListener('statusChange', this.onStatusChange),
+        ];
+        if (this.props.autoplay || this.state.shouldPlay) {
+            player.play();
+        }
+    }
+    componentDidUpdate(prevProps) {
+        const player = this.player;
+        if (!player)
+            return;
+        if (prevProps.src !== this.props.src && this.props.src) {
+            player.replace({ uri: this.props.src });
+        }
+        if (prevProps.loop !== this.props.loop) {
+            player.loop = !!this.props.loop;
+        }
+        if (prevProps.muted !== this.props.muted) {
+            player.muted = !!this.props.muted;
+        }
+        const shouldPlay = this.state.shouldPlay || this.props.autoplay;
+        if (shouldPlay && !player.playing) {
+            player.play();
+        }
+        else if (!shouldPlay && player.playing) {
+            player.pause();
+        }
+    }
+    componentWillUnmount() {
+        var _a;
+        const { id } = this.props;
+        if (id && global._taroVideoMap[id] === this.taroVideoRef) {
+            delete global._taroVideoMap[id];
+        }
+        this.subscriptions.forEach((subscription) => subscription.remove());
+        this.subscriptions = [];
+        (_a = this.player) === null || _a === void 0 ? void 0 : _a.release();
+        this.player = null;
+        this.taroVideoRef = null;
+    }
+    static getDerivedStateFromProps(nProps) {
+        return nProps;
+    }
+    render() {
+        const { style, objectFit = 'contain', poster, controls, showCenterPlayBtn, } = this.props;
+        const { isFullScreen } = this.state;
+        const duration = formatTime(this.props.duration || this.state.duration || null);
+        // 第一次不显示又无法自动播放
+        const showPlayBtn = this.state.isFirst ? true : showCenterPlayBtn;
+        const videoNode = (React.createElement(View, { style: [
+                Styles['taro-video-container'],
+                isFullScreen && Styles['taro-video-type-fullscreen'],
+            ] },
+            this.player ? (React.createElement(VideoView, { ref: this.videoViewRef, player: this.player, style: Object.assign({ width: '100%', height: '100%' }, style), contentFit: ObjectFit[objectFit] || 'contain', nativeControls: controls, fullscreenOptions: { enable: true }, onFullscreenEnter: () => this.onFullscreenChange(true, 1), onFullscreenExit: () => this.onFullscreenChange(false, 3) })) : null,
+            poster && controls && !this.state.isPlaying ? (React.createElement(Image, { src: poster, style: [
+                    {
+                        position: 'absolute',
+                        top: 0,
+                        right: 0,
+                        bottom: 0,
+                        left: 0,
+                    },
+                ] })) : null,
+            showPlayBtn && !this.state.isPlaying && (React.createElement(View, { style: Styles['taro-video-cover'] },
+                React.createElement(Image, { src: require('../../assets/video/play.png'), style: Styles['taro-video-cover-play-button'], onClick: this.clickPlayBtn }),
+                React.createElement(Text, { style: Styles['taro-video-cover-duration'] }, duration))),
+            this.props.children));
+        return (React.createElement(View, { style: [Styles['taro-video'], this.props.style] }, videoNode));
+    }
+}
+/** @type {VideoProps} */
+_Video.defaultProps = {
+    id: '',
+    src: '',
+    autoPauseIfNavigate: true,
+    autoPauseIfOpenNative: true,
+    autoplay: false,
+    controls: true,
+    danmuBtn: false,
+    danmuList: [],
+    enableDanmu: false,
+    enablePlayGesture: false,
+    enableProgressGesture: true,
+    initialTime: 0,
+    loop: false,
+    muted: false,
+    objectFit: 'contain',
+    playBtnPosition: 'bottom',
+    showCenterPlayBtn: true,
+    showFullscreenBtn: true,
+    showMuteBtn: false,
+    showPlayBtn: true,
+    showProgress: true,
+    vslideGesture: false,
+    vslideGestureInFullscreen: true,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onLoad: () => { },
+};
+export default _Video;
+//# sourceMappingURL=index.js.map