react-native-omplayer/video.js

video player for react-native

/**
 * Created by lcg on 2017/1/20.
 */

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Platform, View, requireNativeComponent, StyleSheet } from 'react-native';
export default class OMVideo extends Component {

    constructor(props){
        super(props);

        this._onLoadStart = this._onLoadStart.bind(this);
        this._onLoad = this._onLoad.bind(this);
        this._onLoadStalled = this._onLoadStalled.bind(this);
        this._onLoadResume = this._onLoadResume.bind(this);
        this._onError = this._onError.bind(this);
        this._onProgress = this._onProgress.bind(this);
        this._onSeek = this._onSeek.bind(this);
        this._onEnd = this._onEnd.bind(this);
        this._onFullscreenPlayerWillPresent = this._onFullscreenPlayerWillPresent.bind(this);
        this._onFullscreenPlayerDidPresent = this._onFullscreenPlayerDidPresent.bind(this);
        this._onFullscreenPlayerWillDismiss = this._onFullscreenPlayerWillDismiss.bind(this);
        this._onFullscreenPlayerDidDismiss = this._onFullscreenPlayerDidDismiss.bind(this);
        this._onReadyForDisplay = this._onReadyForDisplay.bind(this);
        this._onPlaybackStalled = this._onPlaybackStalled.bind(this);
        this._onPlaybackResume = this._onPlaybackResume.bind(this);
        this._onPlaybackRateChange = this._onPlaybackRateChange.bind(this);
        this._onFullscreenOrientationChange = this._onFullscreenOrientationChange.bind(this);
    }

    _onLoadStart(event) {
        // console.log('onLoadStart',event.nativeEvent);

        if (this.props.onLoadStart) {
            this.props.onLoadStart(event.nativeEvent);
        }
    }

    _onLoad(event) {
        if (this.props.onLoad) {
            this.props.onLoad(event.nativeEvent);
        }
    }

    _onLoadStalled(event) {
        if (this.props.onLoadStalled) {
            this.props.onLoadStalled(event.nativeEvent);
        }
    }

    _onLoadResume(event) {
        if (this.props.onLoadResume) {
            this.props.onLoadResume(event.nativeEvent);
        }
    }

    _onError(event) {
        if (this.props.onError) {
            this.props.onError(event.nativeEvent);
        }
    }

    _onProgress(event) {
        if (this.props.onProgress) {
            this.props.onProgress(event.nativeEvent);
        }
    }

    _onSeek(event) {
        if (this.props.onSeek) {
            this.props.onSeek(event.nativeEvent);
        }
    }

    _onEnd(event) {
        if (this.props.onEnd) {
            this.props.onEnd(event.nativeEvent);
        }
    }

    _onFullscreenPlayerWillPresent(event) {
        if (this.props.onFullscreenPlayerWillPresent) {
            this.props.onFullscreenPlayerWillPresent(event.nativeEvent);
        }
    }

    _onFullscreenPlayerDidPresent(event) {
        if (this.props.onFullscreenPlayerDidPresent) {
            this.props.onFullscreenPlayerDidPresent(event.nativeEvent);
        }
    }

    _onFullscreenPlayerWillDismiss(event) {
        if (this.props.onFullscreenPlayerWillDismiss) {
            this.props.onFullscreenPlayerWillDismiss(event.nativeEvent);
        }
    }

    _onFullscreenPlayerDidDismiss(event) {
        if (this.props.onFullscreenPlayerDidDismiss) {
            this.props.onFullscreenPlayerDidDismiss(event.nativeEvent);
        }
    }

    _onFullscreenOrientationChange(event) {
        if (this.props.onFullscreenOrientationChange) {
            this.props.onFullscreenOrientationChange(event.nativeEvent);
        }
    }

    _onReadyForDisplay(event) {
        if (this.props.onReadyForDisplay) {
            this.props.onReadyForDisplay(event.nativeEvent);
        }
    }

    _onPlaybackStalled(event) {
        if (this.props.onPlaybackStalled) {
            this.props.onPlaybackStalled(event.nativeEvent);
        }
    }

    _onPlaybackResume(event) {
        if (this.props.onPlaybackResume) {
            this.props.onPlaybackResume(event.nativeEvent);
        }
    }

    _onPlaybackRateChange(event) {
        if (this.props.onPlaybackRateChange) {
            this.props.onPlaybackRateChange(event.nativeEvent);
        }
    }

    seek(seek){
        this._root && this._root.setNativeProps({ currentTime: seek });
    }

    play(){
        this._root && this._root.setNativeProps({ paused: false });
    }

    pause(){
        this._root && this._root.setNativeProps({ paused: true });
    }

    render(){
        let uri = this.props.source.uri;
        if (uri && uri.match(/^\//)) {
            uri = `file://${uri}`;
        }

        console.log(333, this.props.orientation || '');
        const nativeProps = Object.assign({}, this.props,{
            style: [styles.base,this.props.style],
            src: uri,
            orientation: this.props.orientation || '',
            cookie: this.props.cookie,
            rate: this.props.rate,
            displayText: this.props.displayText || '',
            displayTextSize: this.props.displayTextSize || 11,
            displayDelay: this.props.displayDelay || 3000,
            onOMVideoLoadStart: this._onLoadStart,
            onOMVideoLoad: this._onLoad,
            onOMVideoLoadStalled: this._onLoadStalled,
            onOMVideoLoadResume: this._onLoadResume,
            onOMVideoError: this._onError,
            onOMVideoProgress: this._onProgress,
            onOMVideoSeek: this._onSeek,
            onOMVideoEnd: this._onEnd,
            onOMVideoFullscreenPlayerWillPresent: this._onFullscreenPlayerWillPresent,
            onOMVideoFullscreenPlayerDidPresent: this._onFullscreenPlayerDidPresent,
            onOMVideoFullscreenPlayerWillDismiss: this._onFullscreenPlayerWillDismiss,
            onOMVideoFullscreenPlayerDidDismiss: this._onFullscreenPlayerDidDismiss,
            onOMVideoFullscreenOrientationChange: this._onFullscreenOrientationChange,
            onOMReadyForDisplay: this._onReadyForDisplay,
            onOMPlaybackStalled: this._onPlaybackStalled,
            onOMPlaybackResume: this._onPlaybackResume,
            onOMPlaybackRateChange: this._onPlaybackRateChange,
            ref: (nativePlayer) => { this._root = nativePlayer }
        });

        return <OMVideoView {...nativeProps}/>
    }
}

OMVideo.propTypes = {
    ...View.propTypes,
    source: PropTypes.object,
    resizeMode: PropTypes.string,
    repeat: PropTypes.bool,
    paused: PropTypes.bool,
    muted: PropTypes.bool,
    controls: PropTypes.bool,
    volume: PropTypes.number,
    rate: PropTypes.number,
    currentTime: PropTypes.number,
    fullscreen: PropTypes.bool,
    playInBackground: PropTypes.bool,
    src: PropTypes.string,
    cookie: PropTypes.string,
    displayText: PropTypes.string,
    orientation: PropTypes.string,
    displayTextSize: PropTypes.number,
    displayDelay: PropTypes.number,
    seek: PropTypes.number,
    onOMVideoLoadStart: PropTypes.func,
    onOMVideoLoad: PropTypes.func,
    onOMVideoLoadStalled: PropTypes.func,
    onOMVideoLoadResume: PropTypes.func,
    onOMVideoError: PropTypes.func,
    onOMVideoProgress: PropTypes.func,
    onOMVideoSeek: PropTypes.func,
    onOMVideoEnd: PropTypes.func,
    onOMVideoFullscreenPlayerWillPresent: PropTypes.func,
    onOMVideoFullscreenPlayerDidPresent: PropTypes.func,
    onOMVideoFullscreenPlayerWillDismiss: PropTypes.func,
    onOMVideoFullscreenPlayerDidDismiss: PropTypes.func,
    onOMReadyForDisplay: PropTypes.func,
    onOMPlaybackStalled: PropTypes.func,
    onOMPlaybackResume: PropTypes.func,
    onOMPlaybackRateChange: PropTypes.func,
    onOMVideoFullscreenOrientationChange: PropTypes.func
};

const OMVideoView = requireNativeComponent(Platform.OS === 'android' ? 'RCTOMVideoViewTc' : 'RCTOMVideoView', OMVideo,{
    nativeOnly: {
        src: true,
        seek: true,
        cookie: true,
        displayText: true,
        onOMVideoLoadStart: true,
        onOMVideoLoad: true,
        onOMVideoError: true,
        onOMVideoProgress: true,
        onOMVideoSeek: true,
        onOMVideoEnd: true,
        onOMVideoFullscreenPlayerWillPresent: true,
        onOMVideoFullscreenPlayerDidPresent: true,
        onOMVideoFullscreenPlayerWillDismiss: true,
        onOMVideoFullscreenPlayerDidDismiss: true,
        onOMReadyForDisplay: true,
        onOMPlaybackStalled: true,
        onOMPlaybackResume: true,
        onOMPlaybackRateChange: true,
        onOMVideoFullscreenOrientationChange: true
    }
});

const styles = StyleSheet.create({
    base: {
        backgroundColor: 'black',
        overflow: 'hidden'
    }
});