fist commit

Author: NghiNV

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 Brent Vatne, Baris Sencan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

VLCPlayer.js

@@ -0,0 +1,206 @@
+import React, { PureComponent } from 'react';
+import {
+  StyleSheet, 
+  requireNativeComponent, 
+  NativeModules, 
+  View
+} from 'react-native';
+import PropTypes from 'prop-types';
+import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';
+
+export default class VLCPlayer extends PureComponent {
+  constructor(props, context) {
+    super(props, context);
+    this.seek = this.seek.bind(this);
+    this.resume = this.resume.bind(this);
+    this.snapshot = this.snapshot.bind(this);
+    this._assignRoot = this._assignRoot.bind(this);
+    this._onError = this._onError.bind(this);
+    this._onProgress = this._onProgress.bind(this);
+    this._onEnded = this._onEnded.bind(this);
+    this._onPlaying = this._onPlaying.bind(this);
+    this._onStopped = this._onStopped.bind(this);
+    this._onPaused = this._onPaused.bind(this);
+    this._onBuffering = this._onBuffering.bind(this);
+    this._onOpen = this._onOpen.bind(this);
+    this._onLoadStart = this._onLoadStart.bind(this);
+  }
+
+  setNativeProps(nativeProps) {
+    this._root.setNativeProps(nativeProps);
+  }
+
+  seek(pos) {
+    this.setNativeProps({ seek: pos });
+  }
+
+  resume(isResume) {
+    this.setNativeProps({ resume: isResume });
+  }
+
+  snapshot(path) {
+    this.setNativeProps({ snapshotPath: path });
+  }
+
+  _assignRoot(component) {
+    this._root = component;
+  }
+
+  _onBuffering(event) {
+    if (this.props.onBuffering) {
+      this.props.onBuffering(event.nativeEvent);
+    }
+  }
+
+  _onError(event) {
+    if (this.props.onError) {
+      this.props.onError(event.nativeEvent);
+    }
+  }
+
+  _onOpen(event) {
+    if (this.props.onOpen) {
+      this.props.onOpen(event.nativeEvent);
+    }
+  }
+
+  _onLoadStart(event) {
+    if (this.props.onLoadStart) {
+      this.props.onLoadStart(event.nativeEvent);
+    }
+  }
+
+  _onProgress(event) {
+    if (this.props.onProgress) {
+      this.props.onProgress(event.nativeEvent);
+    }
+  }
+
+  _onEnded(event) {
+    if (this.props.onEnd) {
+      this.props.onEnd(event.nativeEvent);
+    }
+  }
+
+  _onStopped(event) {
+    this.setNativeProps({ paused: true });
+    if (this.props.onStopped) {
+      this.props.onStopped(event.nativeEvent);
+    }
+  }
+
+  _onPaused(event) {
+    if (this.props.onPaused) {
+      this.props.onPaused(event.nativeEvent);
+    }
+  }
+
+  _onPlaying(event) {
+    if (this.props.onPlaying) {
+      this.props.onPlaying(event.nativeEvent);
+    }
+  }
+
+  render() {
+    /* const {
+     source
+     } = this.props;*/
+    const source = resolveAssetSource(this.props.source) || {};
+
+    let uri = source.uri || '';
+    if (uri && uri.match(/^\//)) {
+      uri = `file://${uri}`;
+    }
+
+    let isNetwork = !!(uri && uri.match(/^https?:/));
+    const isAsset = !!(uri && uri.match(/^(assets-library|file|content|ms-appx|ms-appdata):/));
+    if (!isAsset) {
+      isNetwork = true;
+    }
+    source.initOptions = source.initOptions || [];
+    //repeat the input media
+    source.initOptions.push('--input-repeat=1000');
+    const nativeProps = Object.assign({}, this.props);
+    Object.assign(nativeProps, {
+      style: [styles.base, nativeProps.style],
+      source: source,
+      src: {
+        uri,
+        isNetwork,
+        isAsset,
+        type: source.type || '',
+        mainVer: source.mainVer || 0,
+        patchVer: source.patchVer || 0,
+      },
+      onVideoLoadStart: this._onLoadStart,
+      onVideoOpen: this._onOpen,
+      onVideoError: this._onError,
+      onVideoProgress: this._onProgress,
+      onVideoEnded: this._onEnded,
+      onVideoEnd: this._onEnded,
+      onVideoPlaying: this._onPlaying,
+      onVideoPaused: this._onPaused,
+      onVideoStopped: this._onStopped,
+      onVideoBuffering: this._onBuffering,
+      progressUpdateInterval: 250,
+    });
+
+    return <RCTVLCPlayer ref={this._assignRoot} {...nativeProps} />;
+  }
+}
+
+VLCPlayer.propTypes = {
+  /* Native only */
+  rate: PropTypes.number,
+  seek: PropTypes.number,
+  resume: PropTypes.bool,
+  snapshotPath: PropTypes.string,
+  paused: PropTypes.bool,
+
+  videoAspectRatio: PropTypes.string,
+  volume: PropTypes.number,
+  disableFocus: PropTypes.bool,
+  src: PropTypes.string,
+  playInBackground: PropTypes.bool,
+  playWhenInactive: PropTypes.bool,
+  resizeMode: PropTypes.string,
+  poster: PropTypes.string,
+  repeat: PropTypes.bool,
+  muted: PropTypes.bool,
+
+
+  onVideoLoadStart: PropTypes.func,
+  onVideoError: PropTypes.func,
+  onVideoProgress: PropTypes.func,
+  onVideoEnded: PropTypes.func,
+  onVideoPlaying: PropTypes.func,
+  onVideoPaused: PropTypes.func,
+  onVideoStopped: PropTypes.func,
+  onVideoBuffering: PropTypes.func,
+  onVideoOpen: PropTypes.func,
+
+  /* Wrapper component */
+  source: PropTypes.object,
+
+  onError: PropTypes.func,
+  onProgress: PropTypes.func,
+  onEnded: PropTypes.func,
+  onStopped: PropTypes.func,
+  onPlaying: PropTypes.func,
+  onPaused: PropTypes.func,
+
+  /* Required by react-native */
+  scaleX: PropTypes.number,
+  scaleY: PropTypes.number,
+  translateX: PropTypes.number,
+  translateY: PropTypes.number,
+  rotation: PropTypes.number,
+  ...View.propTypes,
+};
+
+const styles = StyleSheet.create({
+  base: {
+    overflow: 'hidden',
+  },
+});
+const RCTVLCPlayer = requireNativeComponent('RCTVLCPlayer', VLCPlayer);

android/build.gradle

@@ -0,0 +1,28 @@
+apply plugin: 'com.android.library'
+
+android {
+    compileSdkVersion 25
+    buildToolsVersion '25.0.0'
+
+    defaultConfig {
+        minSdkVersion 16
+        targetSdkVersion 23
+        versionCode 1
+        versionName "1.0"
+        ndk {
+            abiFilters 'armeabi-v7a'//,'x86_64','arm64-v8a','x86'
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+dependencies {
+    provided fileTree(dir: 'libs', include: ['*.jar'])
+    compile "com.facebook.react:react-native:+"
+    compile 'com.yyl.vlc:vlc-android-sdk:3.0.10'
+}

android/proguard-rules.pro

@@ -0,0 +1,25 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /Users/aolc/Library/Android/sdk/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

android/src/androidTest/java/react/yuanzhou/com/vlcplayer/ExampleInstrumentedTest.java

@@ -0,0 +1,26 @@
+package react.yuanzhou.com.vlcplayer;
+
+import android.content.Context;
+import android.support.test.InstrumentationRegistry;
+import android.support.test.runner.AndroidJUnit4;
+
+import org.junit.Test;
+import org.junit.runner.RunWith;
+
+import static org.junit.Assert.*;
+
+/**
+ * Instrumentation test, which will execute on an Android device.
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+@RunWith(AndroidJUnit4.class)
+public class ExampleInstrumentedTest {
+    @Test
+    public void useAppContext() throws Exception {
+        // Context of the app under test.
+        Context appContext = InstrumentationRegistry.getTargetContext();
+
+        assertEquals("react.yuanzhou.com.vlcplayer.test", appContext.getPackageName());
+    }
+}

android/src/main/AndroidManifest.xml

@@ -0,0 +1,10 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+
+    package="com.yuanzhou.vlc">
+
+    <application  android:label="@string/app_name"
+        android:supportsRtl="true">
+
+    </application>
+
+</manifest>

android/src/main/java/com/yuanzhou/vlc/ReactVlcPlayerPackage.java

@@ -0,0 +1,31 @@
+package com.yuanzhou.vlc;
+
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.JavaScriptModule;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.Collections;
+import java.util.List;
+
+import com.yuanzhou.vlc.vlcplayer.ReactVlcPlayerViewManager;
+
+public class ReactVlcPlayerPackage implements ReactPackage {
+
+    @Override
+    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+
+    // Deprecated RN 0.47
+    public List<Class<? extends JavaScriptModule>> createJSModules() {
+        return Collections.emptyList();
+    }
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+        return Collections.<ViewManager>singletonList(new ReactVlcPlayerViewManager());
+    }
+}

android/src/main/java/com/yuanzhou/vlc/vlcplayer/ReactVlcPlayerView.java

@@ -0,0 +1,146 @@
+package com.yuanzhou.vlc.vlcplayer;
+
+import android.content.Context;
+import android.net.Uri;
+import android.text.TextUtils;
+
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.SimpleViewManager;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+
+import java.util.Map;
+
+import javax.annotation.Nullable;
+
+public class ReactVlcPlayerViewManager extends SimpleViewManager<ReactVlcPlayerView> {
+
+    private static final String REACT_CLASS = "RCTVLCPlayer";
+
+    private static final String PROP_SRC = "src";
+    private static final String PROP_SRC_URI = "uri";
+    private static final String PROP_SRC_TYPE = "type";
+    private static final String PROP_RESIZE_MODE = "resizeMode";
+    private static final String PROP_REPEAT = "repeat";
+    private static final String PROP_PAUSED = "paused";
+    private static final String PROP_MUTED = "muted";
+    private static final String PROP_VOLUME = "volume";
+    private static final String PROP_PROGRESS_UPDATE_INTERVAL = "progressUpdateInterval";
+    private static final String PROP_SEEK = "seek";
+    private static final String PROP_RESUME = "resume";
+    private static final String PROP_RATE = "rate";
+    private static final String PROP_PLAY_IN_BACKGROUND = "playInBackground";
+    private static final String PROP_DISABLE_FOCUS = "disableFocus";
+    private static final String PROP_VIDEO_ASPECT_RATIO = "videoAspectRatio";
+    public static final String PROP_SRC_IS_NETWORK = "isNetwork";
+    public static final String PROP_SRC_IS_ASSET = "isAsset";
+
+    @Override
+    public String getName() {
+        return REACT_CLASS;
+    }
+
+    @Override
+    protected ReactVlcPlayerView createViewInstance(ThemedReactContext themedReactContext) {
+        return new ReactVlcPlayerView(themedReactContext);
+    }
+
+    @Override
+    public void onDropViewInstance(ReactVlcPlayerView view) {
+        view.cleanUpResources();
+    }
+
+    @Override
+    public @Nullable Map<String, Object> getExportedCustomDirectEventTypeConstants() {
+        MapBuilder.Builder<String, Object> builder = MapBuilder.builder();
+        for (String event : VideoEventEmitter.Events) {
+            builder.put(event, MapBuilder.of("registrationName", event));
+        }
+        return builder.build();
+    }
+
+    @ReactProp(name = PROP_SRC)
+    public void setSrc(final ReactVlcPlayerView videoView, @Nullable ReadableMap src) {
+        Context context = videoView.getContext().getApplicationContext();
+        String uriString = src.hasKey(PROP_SRC_URI) ? src.getString(PROP_SRC_URI) : null;
+        String extension = src.hasKey(PROP_SRC_TYPE) ? src.getString(PROP_SRC_TYPE) : null;
+        boolean isNetStr = src.getBoolean(PROP_SRC_IS_NETWORK) ? src.getBoolean(PROP_SRC_IS_NETWORK) : false;
+
+        if (TextUtils.isEmpty(uriString)) {
+            return;
+        }
+        videoView.setSrc(uriString, isNetStr);
+
+    }
+
+    @ReactProp(name = PROP_RESIZE_MODE)
+    public void setResizeMode(final ReactVlcPlayerView videoView, final String resizeModeOrdinalString) {
+        //videoView.setResizeModeModifier(convertToIntDef(resizeModeOrdinalString));
+    }
+
+    @ReactProp(name = PROP_REPEAT, defaultBoolean = false)
+    public void setRepeat(final ReactVlcPlayerView videoView, final boolean repeat) {
+        videoView.setRepeatModifier(repeat);
+    }
+
+    @ReactProp(name = PROP_PAUSED, defaultBoolean = false)
+    public void setPaused(final ReactVlcPlayerView videoView, final boolean paused) {
+        videoView.setPausedModifier(paused);
+    }
+
+    @ReactProp(name = PROP_MUTED, defaultBoolean = false)
+    public void setMuted(final ReactVlcPlayerView videoView, final boolean muted) {
+        //videoView.setMutedModifier(muted);
+    }
+
+    @ReactProp(name = PROP_VOLUME, defaultFloat = 1.0f)
+    public void setVolume(final ReactVlcPlayerView videoView, final float volume) {
+        videoView.setVolumeModifier((int)volume);
+    }
+
+    /*@ReactProp(name = PROP_PROGRESS_UPDATE_INTERVAL, defaultFloat = 250.0f)
+    public void setProgressUpdateInterval(final ReactVlcPlayerView videoView, final float progressUpdateInterval) {
+        //videoView.setProgressUpdateInterval(progressUpdateInterval);
+    }*/
+
+    @ReactProp(name = PROP_SEEK)
+    public void setSeek(final ReactVlcPlayerView videoView, final float seek) {
+        videoView.seekTo(Math.round(seek * 1000f));
+        //videoView.seekTo(seek);
+    }
+
+    @ReactProp(name = PROP_RESUME, defaultBoolean = false)
+    public void setResume(final ReactVlcPlayerView videoView, final boolean autoPlay) {
+        videoView.doResume(autoPlay);
+    }
+
+    @ReactProp(name = PROP_RATE)
+    public void setRate(final ReactVlcPlayerView videoView, final float rate) {
+        videoView.setRateModifier(rate);
+    }
+
+    @ReactProp(name = PROP_PLAY_IN_BACKGROUND, defaultBoolean = false)
+    public void setPlayInBackground(final ReactVlcPlayerView videoView, final boolean playInBackground) {
+        videoView.setPlayInBackground(playInBackground);
+    }
+
+    @ReactProp(name = PROP_DISABLE_FOCUS, defaultBoolean = false)
+    public void setDisableFocus(final ReactVlcPlayerView videoView, final boolean disableFocus) {
+        videoView.setDisableFocus(disableFocus);
+    }
+
+    @ReactProp(name = PROP_VIDEO_ASPECT_RATIO)
+    public void setVideoAspectRatio(final ReactVlcPlayerView videoView, final String aspectRatio) {
+        videoView.setAspectRatio(aspectRatio);
+    }
+
+
+    private boolean startsWithValidScheme(String uriString) {
+        return uriString.startsWith("http://")
+                || uriString.startsWith("https://")
+                || uriString.startsWith("content://")
+                || uriString.startsWith("file://")
+                || uriString.startsWith("asset://");
+    }
+}

android/src/main/java/com/yuanzhou/vlc/vlcplayer/ReactVlcPlayerViewManager.java

@@ -0,0 +1,275 @@
+package com.yuanzhou.vlc.vlcplayer;
+
+import android.support.annotation.StringDef;
+import android.util.Log;
+import android.view.View;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.ReactContext;
+import com.facebook.react.bridge.WritableArray;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.uimanager.events.RCTEventEmitter;
+
+
+import java.lang.annotation.Retention;
+import java.lang.annotation.RetentionPolicy;
+
+class VideoEventEmitter {
+
+    private final RCTEventEmitter eventEmitter;
+
+    private int viewId = View.NO_ID;
+
+    VideoEventEmitter(ReactContext reactContext) {
+        this.eventEmitter = reactContext.getJSModule(RCTEventEmitter.class);
+    }
+
+    private static final String EVENT_LOAD_START = "onVideoLoadStart";
+    private static final String EVENT_LOAD = "onVideoLoad";
+    private static final String EVENT_ERROR = "onVideoError";
+    private static final String EVENT_PROGRESS = "onVideoProgress";
+    private static final String EVENT_SEEK = "onVideoSeek";
+    private static final String EVENT_END = "onVideoEnd";
+    private static final String EVENT_PLAYING = "onVideoPlaying";
+    private static final String EVENT_STOPPED = "onVideoStopped";
+    private static final String EVENT_STALLED = "onPlaybackStalled";
+    private static final String EVENT_RESUME = "onPlaybackResume";
+    private static final String EVENT_READY = "onReadyForDisplay";
+    private static final String EVENT_BUFFER = "onVideoBuffer";
+    private static final String EVENT_IDLE = "onVideoIdle";
+    private static final String EVENT_PAUSED = "onVideoPaused";
+    private static final String EVENT_OPEN = "onVideoOpen";
+    private static final String EVENT_TIMED_METADATA = "onTimedMetadata";
+    private static final String EVENT_AUDIO_BECOMING_NOISY = "onAudioBecomingNoisy";
+    private static final String EVENT_AUDIO_FOCUS_CHANGE = "onAudioFocusChanged";
+    private static final String EVENT_PLAYBACK_RATE_CHANGE = "onPlaybackRateChange";
+
+    static final String[] Events = {
+            EVENT_LOAD_START,
+            EVENT_LOAD,
+            EVENT_ERROR,
+            EVENT_PROGRESS,
+            EVENT_SEEK,
+            EVENT_END,
+            EVENT_STALLED,
+            EVENT_RESUME,
+            EVENT_READY,
+            EVENT_BUFFER,
+            EVENT_IDLE,
+            EVENT_TIMED_METADATA,
+            EVENT_AUDIO_BECOMING_NOISY,
+            EVENT_AUDIO_FOCUS_CHANGE,
+            EVENT_PLAYBACK_RATE_CHANGE,
+            EVENT_PAUSED,
+            EVENT_PLAYING,
+            EVENT_STOPPED,
+            EVENT_OPEN,
+
+    };
+
+    @Retention(RetentionPolicy.SOURCE)
+    @StringDef({
+            EVENT_LOAD_START,
+            EVENT_LOAD,
+            EVENT_ERROR,
+            EVENT_PROGRESS,
+            EVENT_SEEK,
+            EVENT_END,
+            EVENT_STALLED,
+            EVENT_RESUME,
+            EVENT_READY,
+            EVENT_BUFFER,
+            EVENT_IDLE,
+            EVENT_TIMED_METADATA,
+            EVENT_AUDIO_BECOMING_NOISY,
+            EVENT_AUDIO_FOCUS_CHANGE,
+            EVENT_PLAYBACK_RATE_CHANGE,
+            EVENT_PAUSED,
+            EVENT_PLAYING,
+            EVENT_STOPPED,
+            EVENT_OPEN,
+    })
+
+    @interface VideoEvents {
+    }
+
+    private static final String EVENT_PROP_FAST_FORWARD = "canPlayFastForward";
+    private static final String EVENT_PROP_SLOW_FORWARD = "canPlaySlowForward";
+    private static final String EVENT_PROP_SLOW_REVERSE = "canPlaySlowReverse";
+    private static final String EVENT_PROP_REVERSE = "canPlayReverse";
+    private static final String EVENT_PROP_STEP_FORWARD = "canStepForward";
+    private static final String EVENT_PROP_STEP_BACKWARD = "canStepBackward";
+
+    private static final String EVENT_PROP_DURATION = "duration";
+    private static final String EVENT_PROP_PLAYABLE_DURATION = "playableDuration";
+    private static final String EVENT_PROP_CURRENT_TIME = "currentTime";
+    private static final String EVENT_PROP_SEEK_TIME = "seekTime";
+    private static final String EVENT_PROP_NATURAL_SIZE = "naturalSize";
+    private static final String EVENT_PROP_WIDTH = "width";
+    private static final String EVENT_PROP_HEIGHT = "height";
+    private static final String EVENT_PROP_ORIENTATION = "orientation";
+    private static final String EVENT_PROP_HAS_AUDIO_FOCUS = "hasAudioFocus";
+    private static final String EVENT_PROP_IS_BUFFERING = "isBuffering";
+    private static final String EVENT_PROP_BUFFERING_RATE = "bufferRate";
+    private static final String EVENT_PROP_PLAYBACK_RATE = "playbackRate";
+
+    private static final String EVENT_PROP_ERROR = "error";
+    private static final String EVENT_PROP_ERROR_STRING = "errorString";
+    private static final String EVENT_PROP_ERROR_EXCEPTION = "";
+
+    private static final String EVENT_PROP_TIMED_METADATA = "metadata";
+
+
+    void setViewId(int viewId) {
+        this.viewId = viewId;
+    }
+
+    void loadStart() {
+        WritableMap event = Arguments.createMap();
+        receiveEvent(EVENT_LOAD_START, event);
+    }
+
+    void load(double duration, double currentPosition, int videoWidth, int videoHeight) {
+        WritableMap event = Arguments.createMap();
+        event.putDouble(EVENT_PROP_DURATION, duration / 1000D);
+        event.putDouble(EVENT_PROP_CURRENT_TIME, currentPosition / 1000D);
+
+        WritableMap naturalSize = Arguments.createMap();
+        naturalSize.putInt(EVENT_PROP_WIDTH, videoWidth);
+        naturalSize.putInt(EVENT_PROP_HEIGHT, videoHeight);
+        if (videoWidth > videoHeight) {
+            naturalSize.putString(EVENT_PROP_ORIENTATION, "landscape");
+        } else {
+            naturalSize.putString(EVENT_PROP_ORIENTATION, "portrait");
+        }
+        event.putMap(EVENT_PROP_NATURAL_SIZE, naturalSize);
+
+        // TODO: Actually check if you can.
+        event.putBoolean(EVENT_PROP_FAST_FORWARD, true);
+        event.putBoolean(EVENT_PROP_SLOW_FORWARD, true);
+        event.putBoolean(EVENT_PROP_SLOW_REVERSE, true);
+        event.putBoolean(EVENT_PROP_REVERSE, true);
+        event.putBoolean(EVENT_PROP_FAST_FORWARD, true);
+        event.putBoolean(EVENT_PROP_STEP_BACKWARD, true);
+        event.putBoolean(EVENT_PROP_STEP_FORWARD, true);
+
+        receiveEvent(EVENT_LOAD, event);
+    }
+
+    void progressChanged(double currentPosition, double bufferedDuration) {
+        WritableMap event = Arguments.createMap();
+       // event.putDouble(EVENT_PROP_CURRENT_TIME, currentPosition / 1000D);
+        //event.putDouble(EVENT_PROP_PLAYABLE_DURATION, bufferedDuration / 1000D);
+        event.putDouble("currentTime", currentPosition);
+        event.putDouble("duration", bufferedDuration);
+        receiveEvent(EVENT_PROGRESS, event);
+    }
+
+    void seek(long currentPosition, long seekTime) {
+        WritableMap event = Arguments.createMap();
+        event.putDouble(EVENT_PROP_CURRENT_TIME, currentPosition / 1000D);
+        event.putDouble(EVENT_PROP_SEEK_TIME, seekTime / 1000D);
+        receiveEvent(EVENT_SEEK, event);
+    }
+
+    void ready() {
+        receiveEvent(EVENT_READY, null);
+    }
+
+    void buffering(boolean isBuffering, float bufferRate) {
+        WritableMap map = Arguments.createMap();
+        map.putBoolean(EVENT_PROP_IS_BUFFERING, isBuffering);
+        map.putDouble(EVENT_PROP_BUFFERING_RATE, bufferRate);
+        receiveEvent(EVENT_BUFFER, map);
+    }
+
+    void idle() {
+        receiveEvent(EVENT_IDLE, null);
+    }
+
+    void end() {
+        receiveEvent(EVENT_END, null);
+    }
+
+    void error(String errorString, Exception exception) {
+        WritableMap error = Arguments.createMap();
+        error.putString(EVENT_PROP_ERROR_STRING, errorString);
+        error.putString(EVENT_PROP_ERROR_EXCEPTION, exception.getMessage());
+        WritableMap event = Arguments.createMap();
+        event.putMap(EVENT_PROP_ERROR, error);
+        receiveEvent(EVENT_ERROR, event);
+    }
+
+    void playbackRateChange(float rate) {
+        WritableMap map = Arguments.createMap();
+        map.putDouble(EVENT_PROP_PLAYBACK_RATE, (double)rate);
+        receiveEvent(EVENT_PLAYBACK_RATE_CHANGE, map);
+    }
+
+    /*void timedMetadata(Metadata metadata) {
+        WritableArray metadataArray = Arguments.createArray();
+
+        for (int i = 0; i < metadata.length(); i++) {
+
+
+            Id3Frame frame = (Id3Frame) metadata.get(i);
+
+            String value = "";
+
+            if (frame instanceof TextInformationFrame) {
+                TextInformationFrame txxxFrame = (TextInformationFrame) frame;
+                value = txxxFrame.value;
+            }
+
+            String identifier = frame.id;
+
+            WritableMap map = Arguments.createMap();
+            map.putString("identifier", identifier);
+            map.putString("value", value);
+
+            metadataArray.pushMap(map);
+
+        }
+
+        WritableMap event = Arguments.createMap();
+        event.putArray(EVENT_PROP_TIMED_METADATA, metadataArray);
+        receiveEvent(EVENT_TIMED_METADATA, event);
+    }
+*/
+    void audioFocusChanged(boolean hasFocus) {
+        WritableMap map = Arguments.createMap();
+        map.putBoolean(EVENT_PROP_HAS_AUDIO_FOCUS, hasFocus);
+        receiveEvent(EVENT_AUDIO_FOCUS_CHANGE, map);
+    }
+
+
+    void audioBecomingNoisy() {
+        receiveEvent(EVENT_AUDIO_BECOMING_NOISY, null);
+    }
+
+    void paused(boolean paused){
+        WritableMap map = Arguments.createMap();
+        map.putBoolean("paused", paused);
+        receiveEvent(EVENT_PAUSED, map);
+    }
+
+    void playing(){
+        WritableMap map = Arguments.createMap();
+        receiveEvent(EVENT_PLAYING, map);
+    }
+
+    void stopped(){
+        WritableMap map = Arguments.createMap();
+        receiveEvent(EVENT_STOPPED, map);
+    }
+
+    void onOpen(){
+        WritableMap map = Arguments.createMap();
+        receiveEvent(EVENT_OPEN, map);
+    }
+
+    private void receiveEvent(@VideoEvents String type, WritableMap event) {
+        eventEmitter.receiveEvent(viewId, type, event);
+    }
+
+}

android/src/main/java/com/yuanzhou/vlc/vlcplayer/VideoEventEmitter.java

@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">vlcplayer</string>
+</resources>

android/src/main/res/values/strings.xml

@@ -0,0 +1,17 @@
+package react.yuanzhou.com.vlcplayer;
+
+import org.junit.Test;
+
+import static org.junit.Assert.*;
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * @see <a href="http://d.android.com/tools/testing">Testing documentation</a>
+ */
+public class ExampleUnitTest {
+    @Test
+    public void addition_isCorrect() throws Exception {
+        assertEquals(4, 2 + 2);
+    }
+}

android/src/test/java/react/yuanzhou/com/vlcplayer/ExampleUnitTest.java

@@ -0,0 +1,7 @@
+
+const VLCPlayerControl = {
+  VLCPlayer: require('./VLCPlayer').default,
+  VlCPlayerView: require('./playerView/index').default,
+}
+
+module.exports = VLCPlayerControl;

images/1.png

@@ -0,0 +1,288 @@
+// !$*UTF8*$!
+{
+	archiveVersion = 1;
+	classes = {
+	};
+	objectVersion = 46;
+	objects = {
+
+/* Begin PBXBuildFile section */
+		0C1A0ECA1D07E18700441684 /* RCTVLCPlayerManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 0C1A0EC81D07E18700441684 /* RCTVLCPlayerManager.m */; };
+		0CA30C481D07E0DB003B09F9 /* RCTVLCPlayer.h in CopyFiles */ = {isa = PBXBuildFile; fileRef = 0CA30C471D07E0DB003B09F9 /* RCTVLCPlayer.h */; };
+		0CA30C4A1D07E0DB003B09F9 /* RCTVLCPlayer.m in Sources */ = {isa = PBXBuildFile; fileRef = 0CA30C491D07E0DB003B09F9 /* RCTVLCPlayer.m */; };
+/* End PBXBuildFile section */
+
+/* Begin PBXCopyFilesBuildPhase section */
+		0CA30C421D07E0DB003B09F9 /* CopyFiles */ = {
+			isa = PBXCopyFilesBuildPhase;
+			buildActionMask = 2147483647;
+			dstPath = "include/$(PRODUCT_NAME)";
+			dstSubfolderSpec = 16;
+			files = (
+				0CA30C481D07E0DB003B09F9 /* RCTVLCPlayer.h in CopyFiles */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXCopyFilesBuildPhase section */
+
+/* Begin PBXFileReference section */
+		0C1A0EC81D07E18700441684 /* RCTVLCPlayerManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTVLCPlayerManager.m; sourceTree = "<group>"; };
+		0C1A0EC91D07E18700441684 /* RCTVLCPlayerManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTVLCPlayerManager.h; sourceTree = "<group>"; };
+		0CA30C441D07E0DB003B09F9 /* libRCTVLCPlayer.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = libRCTVLCPlayer.a; sourceTree = BUILT_PRODUCTS_DIR; };
+		0CA30C471D07E0DB003B09F9 /* RCTVLCPlayer.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RCTVLCPlayer.h; sourceTree = "<group>"; };
+		0CA30C491D07E0DB003B09F9 /* RCTVLCPlayer.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RCTVLCPlayer.m; sourceTree = "<group>"; };
+/* End PBXFileReference section */
+
+/* Begin PBXFrameworksBuildPhase section */
+		0CA30C411D07E0DB003B09F9 /* Frameworks */ = {
+			isa = PBXFrameworksBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXFrameworksBuildPhase section */
+
+/* Begin PBXGroup section */
+		0CA30C3B1D07E0DB003B09F9 = {
+			isa = PBXGroup;
+			children = (
+				0CA30C461D07E0DB003B09F9 /* RCTVLCPlayer */,
+				0CA30C451D07E0DB003B09F9 /* Products */,
+			);
+			sourceTree = "<group>";
+		};
+		0CA30C451D07E0DB003B09F9 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				0CA30C441D07E0DB003B09F9 /* libRCTVLCPlayer.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		0CA30C461D07E0DB003B09F9 /* RCTVLCPlayer */ = {
+			isa = PBXGroup;
+			children = (
+				0C1A0EC81D07E18700441684 /* RCTVLCPlayerManager.m */,
+				0C1A0EC91D07E18700441684 /* RCTVLCPlayerManager.h */,
+				0CA30C471D07E0DB003B09F9 /* RCTVLCPlayer.h */,
+				0CA30C491D07E0DB003B09F9 /* RCTVLCPlayer.m */,
+			);
+			path = RCTVLCPlayer;
+			sourceTree = "<group>";
+		};
+/* End PBXGroup section */
+
+/* Begin PBXNativeTarget section */
+		0CA30C431D07E0DB003B09F9 /* RCTVLCPlayer */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = 0CA30C4D1D07E0DB003B09F9 /* Build configuration list for PBXNativeTarget "RCTVLCPlayer" */;
+			buildPhases = (
+				0CA30C401D07E0DB003B09F9 /* Sources */,
+				0CA30C411D07E0DB003B09F9 /* Frameworks */,
+				0CA30C421D07E0DB003B09F9 /* CopyFiles */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+			);
+			name = RCTVLCPlayer;
+			productName = RCTVLCPlayer;
+			productReference = 0CA30C441D07E0DB003B09F9 /* libRCTVLCPlayer.a */;
+			productType = "com.apple.product-type.library.static";
+		};
+/* End PBXNativeTarget section */
+
+/* Begin PBXProject section */
+		0CA30C3C1D07E0DB003B09F9 /* Project object */ = {
+			isa = PBXProject;
+			attributes = {
+				LastUpgradeCheck = 0730;
+				ORGANIZATIONNAME = "熊川";
+				TargetAttributes = {
+					0CA30C431D07E0DB003B09F9 = {
+						CreatedOnToolsVersion = 7.3.1;
+					};
+				};
+			};
+			buildConfigurationList = 0CA30C3F1D07E0DB003B09F9 /* Build configuration list for PBXProject "RCTVLCPlayer" */;
+			compatibilityVersion = "Xcode 3.2";
+			developmentRegion = English;
+			hasScannedForEncodings = 0;
+			knownRegions = (
+				en,
+			);
+			mainGroup = 0CA30C3B1D07E0DB003B09F9;
+			productRefGroup = 0CA30C451D07E0DB003B09F9 /* Products */;
+			projectDirPath = "";
+			projectRoot = "";
+			targets = (
+				0CA30C431D07E0DB003B09F9 /* RCTVLCPlayer */,
+			);
+		};
+/* End PBXProject section */
+
+/* Begin PBXSourcesBuildPhase section */
+		0CA30C401D07E0DB003B09F9 /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				0C1A0ECA1D07E18700441684 /* RCTVLCPlayerManager.m in Sources */,
+				0CA30C4A1D07E0DB003B09F9 /* RCTVLCPlayer.m in Sources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXSourcesBuildPhase section */
+
+/* Begin XCBuildConfiguration section */
+		0CA30C4B1D07E0DB003B09F9 /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = dwarf;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				ENABLE_TESTABILITY = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu99;
+				GCC_DYNAMIC_NO_PIC = NO;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_OPTIMIZATION_LEVEL = 0;
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				MTL_ENABLE_DEBUG_INFO = YES;
+				ONLY_ACTIVE_ARCH = YES;
+				SDKROOT = iphoneos;
+				VALID_ARCHS = "arm64 armv7 armv7s";
+			};
+			name = Debug;
+		};
+		0CA30C4C1D07E0DB003B09F9 /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
+				ENABLE_NS_ASSERTIONS = NO;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu99;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
+				MTL_ENABLE_DEBUG_INFO = NO;
+				SDKROOT = iphoneos;
+				VALIDATE_PRODUCT = YES;
+				VALID_ARCHS = "arm64 armv7 armv7s";
+			};
+			name = Release;
+		};
+		0CA30C4E1D07E0DB003B09F9 /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				FRAMEWORK_SEARCH_PATHS = (
+					"$(SRCROOT)/../../../vlcKit",
+					"\"$(SRCROOT)/../../../ios/Pods/MobileVLCKit-unstable/MobileVLCKit-binary\"",
+				);
+				HEADER_SEARCH_PATHS = (
+					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
+					"$(SRCROOT)/../../react-native/React/**",
+					"$(SRCROOT)/node_modules/react-native/React/**",
+					"$(inherited)",
+				);
+				ONLY_ACTIVE_ARCH = YES;
+				OTHER_LDFLAGS = "-ObjC";
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SKIP_INSTALL = YES;
+				VALID_ARCHS = "arm64 armv7 armv7s";
+			};
+			name = Debug;
+		};
+		0CA30C4F1D07E0DB003B09F9 /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				FRAMEWORK_SEARCH_PATHS = (
+					"$(SRCROOT)/../../../vlcKit",
+					"\"$(SRCROOT)/../../../ios/Pods/MobileVLCKit-unstable/MobileVLCKit-binary\"",
+				);
+				HEADER_SEARCH_PATHS = (
+					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
+					"$(SRCROOT)/../../react-native/React/**",
+					"$(SRCROOT)/node_modules/react-native/React/**",
+					"$(inherited)",
+				);
+				ONLY_ACTIVE_ARCH = NO;
+				OTHER_LDFLAGS = "-ObjC";
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SKIP_INSTALL = YES;
+				VALID_ARCHS = "arm64 armv7 armv7s";
+			};
+			name = Release;
+		};
+/* End XCBuildConfiguration section */
+
+/* Begin XCConfigurationList section */
+		0CA30C3F1D07E0DB003B09F9 /* Build configuration list for PBXProject "RCTVLCPlayer" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				0CA30C4B1D07E0DB003B09F9 /* Debug */,
+				0CA30C4C1D07E0DB003B09F9 /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+		0CA30C4D1D07E0DB003B09F9 /* Build configuration list for PBXNativeTarget "RCTVLCPlayer" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				0CA30C4E1D07E0DB003B09F9 /* Debug */,
+				0CA30C4F1D07E0DB003B09F9 /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+/* End XCConfigurationList section */
+	};
+	rootObject = 0CA30C3C1D07E0DB003B09F9 /* Project object */;
+}

images/2.png

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

images/3.png

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>SchemeUserState</key>
+	<dict>
+		<key>RCTVLCPlayer.xcscheme</key>
+		<dict>
+			<key>orderHint</key>
+			<integer>0</integer>
+		</dict>
+	</dict>
+</dict>
+</plist>

images/4.png

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>SchemeUserState</key>
+	<dict>
+		<key>RCTVLCPlayer.xcscheme</key>
+		<dict>
+			<key>orderHint</key>
+			<integer>52</integer>
+		</dict>
+	</dict>
+</dict>
+</plist>

index.js

@@ -0,0 +1,20 @@
+#import "React/RCTView.h"
+
+@class RCTEventDispatcher;
+
+@interface RCTVLCPlayer : UIView
+
+@property (nonatomic, copy) RCTBubblingEventBlock onVideoProgress;
+@property (nonatomic, copy) RCTBubblingEventBlock onVideoPaused;
+@property (nonatomic, copy) RCTBubblingEventBlock onVideoStopped;
+@property (nonatomic, copy) RCTBubblingEventBlock onVideoBuffering;
+@property (nonatomic, copy) RCTBubblingEventBlock onVideoPlaying;
+@property (nonatomic, copy) RCTBubblingEventBlock onVideoEnded;
+@property (nonatomic, copy) RCTBubblingEventBlock onVideoError;
+@property (nonatomic, copy) RCTBubblingEventBlock onVideoOpen;
+@property (nonatomic, copy) RCTBubblingEventBlock onVideoLoadStart;
+
+
+- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher NS_DESIGNATED_INITIALIZER;
+
+@end

ios/RCTVLCPlayer.xcodeproj/project.pbxproj

@@ -0,0 +1,311 @@
+#import "React/RCTConvert.h"
+#import "RCTVLCPlayer.h"
+#import "React/RCTBridgeModule.h"
+#import "React/RCTEventDispatcher.h"
+#import "React/UIView+React.h"
+#import <MobileVLCKit/MobileVLCKit.h>
+#import <AVFoundation/AVFoundation.h>
+static NSString *const statusKeyPath = @"status";
+static NSString *const playbackLikelyToKeepUpKeyPath = @"playbackLikelyToKeepUp";
+static NSString *const playbackBufferEmptyKeyPath = @"playbackBufferEmpty";
+static NSString *const readyForDisplayKeyPath = @"readyForDisplay";
+static NSString *const playbackRate = @"rate";
+
+@implementation RCTVLCPlayer
+{
+    
+    /* Required to publish events */
+    RCTEventDispatcher *_eventDispatcher;
+    VLCMediaPlayer *_player;
+    
+    NSDictionary * _source;
+    BOOL _paused;
+    BOOL _started;
+    
+}
+
+- (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher
+{
+    if ((self = [super init])) {
+        _eventDispatcher = eventDispatcher;
+        
+        [[NSNotificationCenter defaultCenter] addObserver:self
+                                                 selector:@selector(applicationWillResignActive:)
+                                                     name:UIApplicationWillResignActiveNotification
+                                                   object:nil];
+        
+        [[NSNotificationCenter defaultCenter] addObserver:self
+                                                 selector:@selector(applicationWillEnterForeground:)
+                                                     name:UIApplicationWillEnterForegroundNotification
+                                                   object:nil];
+        
+    }
+    
+    return self;
+}
+
+- (void)applicationWillResignActive:(NSNotification *)notification
+{
+    if (!_paused) {
+        [self setPaused:_paused];
+    }
+}
+
+- (void)applicationWillEnterForeground:(NSNotification *)notification
+{
+    [self applyModifiers];
+}
+
+- (void)applyModifiers
+{
+    if(!_paused)
+        [self play];
+}
+
+- (void)setPaused:(BOOL)paused
+{
+    if(_player){
+        if(!paused){
+            [self play];
+        }else {
+            [_player pause];
+            _paused =  YES;
+            _started = NO;
+        }
+    }
+}
+
+-(void)play
+{
+    if(_player){
+        [_player play];
+        _paused = NO;
+        _started = YES;
+    }
+}
+
+-(void)setResume:(BOOL)autoplay
+{
+    if(_player){
+        [self _release];
+    }
+    // [bavv edit start]
+    // NSArray* options = [_source objectForKey:@"initOptions"];
+    // NSArray* options = @[@"--rtsp-tcp", @"-vv", @"--network-caching=300"];
+    NSArray *options = [NSArray arrayWithObject:@"--rtsp-tcp"];
+    NSString* uri    = [_source objectForKey:@"uri"];
+    NSURL* _uri    = [NSURL URLWithString:uri];
+    
+    _player = [[VLCMediaPlayer alloc] initWithOptions:options];
+    // _player = [[VLCMediaPlayer alloc] init];
+	// [bavv edit end]
+
+    [_player setDrawable:self];
+    _player.delegate = self;
+    _player.scaleFactor = 0;
+    //[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(mediaPlayerStateChanged:) name:VLCMediaPlayerStateChanged object:nil];
+    //[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(mediaPlayerTimeChanged:) name:VLCMediaPlayerTimeChanged object:nil];
+    // NSMutableDictionary *mediaDictonary = [NSMutableDictionary new];
+    //设置缓存多少毫秒
+    // [mediaDictonary setObject:@"0" forKey:@"network-caching"];
+    VLCMedia *media = [VLCMedia mediaWithURL:_uri];
+    // [media addOptions:mediaDictonary];
+    _player.media = media;
+    [[AVAudioSession sharedInstance] setActive:NO withOptions:AVAudioSessionSetActiveOptionNotifyOthersOnDeactivation error:nil];
+    NSLog(@"autoplay: %i",autoplay);
+    self.onVideoLoadStart(@{
+                            @"target": self.reactTag
+                            });
+}
+
+-(void)setSource:(NSDictionary *)source
+{
+    if(_player){
+        [self _release];
+    }
+    _source = source;
+    // [bavv edit start]
+    // NSArray* options = [source objectForKey:@"initOptions"];
+    // NSArray* options = @[@"--rtsp-tcp", @"-vv", @"--network-caching=300"];
+    NSArray *options = [NSArray arrayWithObject:@"--rtsp-tcp"];
+    NSString* uri    = [source objectForKey:@"uri"];
+    BOOL    autoplay = [RCTConvert BOOL:[source objectForKey:@"autoplay"]];
+    NSURL* _uri    = [NSURL URLWithString:uri];
+    
+    //init player && play
+    _player = [[VLCMediaPlayer alloc] initWithOptions:options];
+    // _player = [[VLCMediaPlayer alloc] init];
+    // [bavv edit end]
+
+    [_player setDrawable:self];
+    _player.delegate = self;
+    _player.scaleFactor = 0;
+    //[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(mediaPlayerStateChanged:) name:VLCMediaPlayerStateChanged object:nil];
+    //[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(mediaPlayerTimeChanged:) name:VLCMediaPlayerTimeChanged object:nil];
+    // NSMutableDictionary *mediaDictonary = [NSMutableDictionary new];
+    //设置缓存多少毫秒
+    // [mediaDictonary setObject:@"0" forKey:@"network-caching"];
+    VLCMedia *media = [VLCMedia mediaWithURL:_uri];
+    // [media addOptions:mediaDictonary];
+    _player.media = media;
+    [[AVAudioSession sharedInstance] setActive:NO withOptions:AVAudioSessionSetActiveOptionNotifyOthersOnDeactivation error:nil];
+    NSLog(@"autoplay: %i",autoplay);
+    self.onVideoLoadStart(@{
+                           @"target": self.reactTag
+                           });
+//    if(autoplay)
+        [self play];
+}
+
+- (void)mediaPlayerTimeChanged:(NSNotification *)aNotification
+{
+    [self updateVideoProgress];
+}
+
+- (void)mediaPlayerStateChanged:(NSNotification *)aNotification
+{
+   
+     NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
+     NSLog(@"userInfo %@",[aNotification userInfo]);
+     NSLog(@"standardUserDefaults %@",defaults);
+    if(_player){
+        VLCMediaPlayerState state = _player.state;
+        switch (state) {
+            case VLCMediaPlayerStateOpening:
+                 NSLog(@"VLCMediaPlayerStateOpening %i",1);
+                self.onVideoOpen(@{
+                                     @"target": self.reactTag
+                                     });
+                break;
+            case VLCMediaPlayerStatePaused:
+                _paused = YES;
+                NSLog(@"VLCMediaPlayerStatePaused %i",1);
+                self.onVideoPaused(@{
+                                     @"target": self.reactTag
+                                     });
+                break;
+            case VLCMediaPlayerStateStopped:
+                NSLog(@"VLCMediaPlayerStateStopped %i",1);
+                self.onVideoStopped(@{
+                                      @"target": self.reactTag
+                                      });
+                break;
+            case VLCMediaPlayerStateBuffering:
+                NSLog(@"VLCMediaPlayerStateBuffering %i",1);
+                self.onVideoBuffering(@{
+                                        @"target": self.reactTag
+                                        });
+                break;
+            case VLCMediaPlayerStatePlaying:
+                _paused = NO;
+                NSLog(@"VLCMediaPlayerStatePlaying %i",1);
+                self.onVideoPlaying(@{
+                                      @"target": self.reactTag,
+                                      @"seekable": [NSNumber numberWithBool:[_player isSeekable]],
+                                      @"duration":[NSNumber numberWithInt:[_player.media.length intValue]]
+                                      });
+                break;
+            case VLCMediaPlayerStateEnded:
+                NSLog(@"VLCMediaPlayerStateEnded %i",1);
+                int currentTime   = [[_player time] intValue];
+                int remainingTime = [[_player remainingTime] intValue];
+                int duration      = [_player.media.length intValue];
+                
+                self.onVideoEnded(@{
+                                    @"target": self.reactTag,
+                                    @"currentTime": [NSNumber numberWithInt:currentTime],
+                                    @"remainingTime": [NSNumber numberWithInt:remainingTime],
+                                    @"duration":[NSNumber numberWithInt:duration],
+                                    @"position":[NSNumber numberWithFloat:_player.position]
+                                    });
+                break;
+            case VLCMediaPlayerStateError:
+                NSLog(@"VLCMediaPlayerStateError %i",1);
+                self.onVideoError(@{
+                                    @"target": self.reactTag
+                                    });
+                [self _release];
+                break;
+            default:
+                break;
+        }
+    }
+}
+
+-(void)updateVideoProgress
+{
+    if(_player){
+        int currentTime   = [[_player time] intValue];
+        int remainingTime = [[_player remainingTime] intValue];
+        int duration      = [_player.media.length intValue];
+        
+        if( currentTime >= 0 && currentTime < duration) {
+            self.onVideoProgress(@{
+                                   @"target": self.reactTag,
+                                   @"currentTime": [NSNumber numberWithInt:currentTime],
+                                   @"remainingTime": [NSNumber numberWithInt:remainingTime],
+                                   @"duration":[NSNumber numberWithInt:duration],
+                                   @"position":[NSNumber numberWithFloat:_player.position]
+                                   });
+        }
+    }
+}
+
+- (void)jumpBackward:(int)interval
+{
+    if(interval>=0 && interval <= [_player.media.length intValue])
+        [_player jumpBackward:interval];
+}
+
+- (void)jumpForward:(int)interval
+{
+    if(interval>=0 && interval <= [_player.media.length intValue])
+        [_player jumpForward:interval];
+}
+
+-(void)setSeek:(float)pos
+{
+    if([_player isSeekable]){
+        if(pos>=0 && pos <= 1){
+            [_player setPosition:pos];
+        }
+    }
+}
+
+-(void)setSnapshotPath:(NSString*)path
+{
+    if(_player)
+        [_player saveVideoSnapshotAt:path withWidth:0 andHeight:0];
+}
+
+-(void)setRate:(float)rate
+{
+    [_player setRate:rate];
+}
+
+-(void)setVideoAspectRatio:(NSString *)ratio{
+    char *char_content = [ratio cStringUsingEncoding:NSASCIIStringEncoding];
+    [_player setVideoAspectRatio:char_content];
+}
+
+- (void)_release
+{
+    if(_player){
+        [_player pause];
+        [_player stop];
+        _player = nil;
+        _eventDispatcher = nil;
+        [[NSNotificationCenter defaultCenter] removeObserver:self];
+    }
+}
+
+
+#pragma mark - Lifecycle
+- (void)removeFromSuperview
+{
+    NSLog(@"removeFromSuperview");
+    [self _release];
+    [super removeFromSuperview];
+}
+
+@end

ios/RCTVLCPlayer.xcodeproj/project.xcworkspace/contents.xcworkspacedata

@@ -0,0 +1,5 @@
+#import "React/RCTViewManager.h"
+
+@interface RCTVLCPlayerManager : RCTViewManager
+
+@end

ios/RCTVLCPlayer.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,40 @@
+#import "RCTVLCPlayerManager.h"
+#import "RCTVLCPlayer.h"
+#import "React/RCTBridge.h"
+
+@implementation RCTVLCPlayerManager
+
+RCT_EXPORT_MODULE();
+
+@synthesize bridge = _bridge;
+
+- (UIView *)view
+{
+    return [[RCTVLCPlayer alloc] initWithEventDispatcher:self.bridge.eventDispatcher];
+}
+
+/* Should support: onLoadStart, onLoad, and onError to stay consistent with Image */
+RCT_EXPORT_VIEW_PROPERTY(onVideoProgress, RCTBubblingEventBlock);
+RCT_EXPORT_VIEW_PROPERTY(onVideoPaused, RCTBubblingEventBlock);
+RCT_EXPORT_VIEW_PROPERTY(onVideoStopped, RCTBubblingEventBlock);
+RCT_EXPORT_VIEW_PROPERTY(onVideoBuffering, RCTBubblingEventBlock);
+RCT_EXPORT_VIEW_PROPERTY(onVideoPlaying, RCTBubblingEventBlock);
+RCT_EXPORT_VIEW_PROPERTY(onVideoEnded, RCTBubblingEventBlock);
+RCT_EXPORT_VIEW_PROPERTY(onVideoError, RCTBubblingEventBlock);
+RCT_EXPORT_VIEW_PROPERTY(onVideoOpen, RCTBubblingEventBlock);
+RCT_EXPORT_VIEW_PROPERTY(onVideoLoadStart, RCTBubblingEventBlock);
+
+- (dispatch_queue_t)methodQueue
+{
+    return dispatch_get_main_queue();
+}
+
+RCT_EXPORT_VIEW_PROPERTY(source, NSDictionary);
+RCT_EXPORT_VIEW_PROPERTY(paused, BOOL);
+RCT_EXPORT_VIEW_PROPERTY(seek, float);
+RCT_EXPORT_VIEW_PROPERTY(rate, float);
+RCT_EXPORT_VIEW_PROPERTY(resume, BOOL);
+RCT_EXPORT_VIEW_PROPERTY(videoAspectRatio, NSString);
+RCT_EXPORT_VIEW_PROPERTY(snapshotPath, NSString);
+
+@end

ios/RCTVLCPlayer.xcodeproj/project.xcworkspace/xcuserdata/admin.xcuserdatad/UserInterfaceState.xcuserstate

@@ -0,0 +1,23 @@
+{
+  "name": "react-native-vlcplayer",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "vlc",
+    "player",
+    "android",
+    "ios",
+    "react-native",
+    "mp4"
+  ],
+  "author": "",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "license": "MIT"
+}

ios/RCTVLCPlayer.xcodeproj/xcuserdata/admin.xcuserdatad/xcschemes/xcschememanagement.plist

@@ -0,0 +1,54 @@
+/**
+ * Created by aolc on 2018/5/22.
+ */
+
+let backFunctionKeys = [];
+let backFunctionsMap = new Map();
+
+function removeIndex(array, index) {
+  let newArray = [];
+  for (let i = 0; i < array.length; i++) {
+    if (i !== index) {
+      newArray.push(array[i]);
+    }
+  }
+  return newArray;
+}
+
+function removeKey(array, key) {
+  let newArray = [];
+  for (let i = 0; i < array.length; i++) {
+    if (array[i] !== key) {
+      newArray.push(array[i]);
+    }
+  }
+  return newArray;
+}
+
+const handleBack = () => {
+  if (backFunctionKeys.length > 0) {
+    let functionKey = backFunctionKeys[backFunctionKeys.length - 1];
+    backFunctionKeys = removeIndex(backFunctionKeys, backFunctionKeys.length - 1);
+    let functionA = backFunctionsMap.get(functionKey);
+    backFunctionsMap.delete(functionKey);
+    functionA && functionA();
+    return false;
+  }
+  return true;
+};
+
+const addBackFunction = (key, functionA) => {
+  backFunctionsMap.set(key, functionA);
+  backFunctionKeys.push(key);
+};
+
+const removeBackFunction = key => {
+  backFunctionKeys = removeKey(backFunctionKeys, key);
+  backFunctionsMap.delete(key);
+};
+
+export default {
+  handleBack,
+  addBackFunction,
+  removeBackFunction,
+};

ios/RCTVLCPlayer.xcodeproj/xcuserdata/aolc.xcuserdatad/xcschemes/xcschememanagement.plist

@@ -0,0 +1,249 @@
+/**
+ * Created by yuanzhou.xu on 2018/5/16.
+ */
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  Dimensions,
+  TouchableOpacity,
+  ActivityIndicator,
+  StatusBar,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import Slider from 'react-native-slider';
+import PropTypes from 'prop-types';
+import TimeLimt from './TimeLimit';
+
+export default class ControlBtn extends Component {
+  _getTime = (data = 0) => {
+    let hourCourse = Math.floor(data / 3600);
+    let diffCourse = data % 3600;
+    let minCourse = Math.floor(diffCourse / 60);
+    let secondCourse = Math.floor(diffCourse % 60);
+    let courseReal = '';
+    if (hourCourse) {
+      if (hourCourse < 10) {
+        courseReal += '0' + hourCourse + ':';
+      } else {
+        courseReal += hourCourse + ':';
+      }
+    }
+    if (minCourse < 10) {
+      courseReal += '0' + minCourse + ':';
+    } else {
+      courseReal += minCourse + ':';
+    }
+    if (secondCourse < 10) {
+      courseReal += '0' + secondCourse;
+    } else {
+      courseReal += secondCourse;
+    }
+    return courseReal;
+  };
+
+  render() {
+    let {
+      paused,
+      isFull,
+      showGG,
+      showSlider,
+      showGoLive,
+      onGoLivePress,
+      onReplayPress,
+      onPausedPress,
+      onFullPress,
+      onValueChange,
+      onSlidingComplete,
+      currentTime,
+      totalTime,
+      onLeftPress,
+      title,
+      onEnd,
+      style
+    } = this.props;
+    return (
+      <View style={[styles.controls, style]}>
+        <View style={styles.controlContainer}>
+          <TouchableOpacity style={styles.controlContent} activeOpacity={1}>
+            <View style={styles.controlContent2}>
+              <View style={styles.right}>
+                <TouchableOpacity
+                  activeOpacity={1}
+                  onPress={() => {
+                    onReplayPress && onReplayPress();
+                  }}
+                  style={{ width: 50, alignItems: 'center', justifyContent: 'center' }}>
+                  <Icon name={'replay'} size={30} color="#fff" />
+                </TouchableOpacity>
+                <Text
+                  style={{ fontSize: 11, color: '#fff' }}>       </Text>
+              </View>
+
+              <TouchableOpacity
+                activeOpacity={1}
+                onPress={() => {
+                  onPausedPress && onPausedPress(!paused);
+                }}
+                style={{ width: 50, alignItems: 'center', justifyContent: 'center' }}>
+                <Icon name={paused ? 'play' : 'pause'} size={30} color="#fff" />
+              </TouchableOpacity>
+
+              {/* {showSlider && totalTime > 0 &&(
+                <View
+                  style={{
+                    flex: 1,
+                    alignItems: 'center',
+                    flexDirection: 'row',
+                    //justifyContent: 'space-between',
+                  }}>
+                  <View style={{justifyContent:'center',alignItems:'center',height:50, minWidth: 50,}}>
+                    <Text style={{fontSize: 11,color: '#fff',}}>
+                      {this._getTime(currentTime) || 0}
+                    </Text>
+                  </View>
+                  <View style={styles.progress}>
+                    <Slider
+                      minimumTrackTintColor="#30a935"
+                      thumbStyle={styles.thumb}
+                      style={{ width: '100%' }}
+                      value={currentTime}
+                      maximumValue={totalTime}
+                      step={1}
+                      onValueChange={value => {
+                        onValueChange && onValueChange(value);
+                      }}
+                      onSlidingComplete={value => {
+                        onSlidingComplete && onSlidingComplete(value);
+                      }}
+                    />
+                  </View>
+                  <View style={{justifyContent:'center',alignItems:'center',height:50, minWidth: 50}}>
+                  <Text
+                    style={{fontSize: 11,color: '#fff'}}>
+                    {this._getTime(totalTime) || 0}
+                  </Text>
+                  </View>
+                </View>
+              )} */}
+
+              <View style={styles.right}>
+                <TouchableOpacity
+                  activeOpacity={1}
+                  onPress={() => {
+                    onGoLivePress && onGoLivePress();
+                  }}>
+                  <Text
+                    style={{ fontSize: 11, color: '#fff' }}>{showGoLive ? 'Go live' : '       '}</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  activeOpacity={1}
+                  onPress={() => {
+                    onFullPress && onFullPress(!isFull);
+                  }}
+                  style={{ width: 50, alignItems: 'center', justifyContent: 'center' }}>
+                  <Icon name={isFull ? 'fullscreen-exit' : 'fullscreen'} size={30} color="#fff" />
+                </TouchableOpacity>
+              </View>
+
+            </View>
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    //backgroundColor: '#000',
+  },
+  controls: {
+    width: '100%',
+    height: 50,
+  },
+  rateControl: {
+    flex: 0,
+    flexDirection: 'row',
+    marginTop: 10,
+    marginLeft: 10,
+    //backgroundColor: 'rgba(0,0,0,0.5)',
+    width: 120,
+    height: 30,
+    justifyContent: 'space-around',
+    alignItems: 'center',
+    borderRadius: 10,
+  },
+  controlOption: {
+    textAlign: 'center',
+    fontSize: 13,
+    color: '#fff',
+    width: 30,
+    //lineHeight: 12,
+  },
+  controlContainer: {
+    flex: 1,
+    //padding: 5,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+
+  controlContent: {
+    width: '100%',
+    height: 50,
+    //borderRadius: 10,
+    backgroundColor: 'rgba(255,255,255,0.1)',
+  },
+  controlContent2: {
+    flex: 1,
+    flexDirection: 'row',
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+
+  progress: {
+    flex: 1,
+    borderRadius: 3,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  left: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  right: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  thumb: {
+    width: 6,
+    height: 18,
+    backgroundColor: '#fff',
+    borderRadius: 4,
+  },
+  loading: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    zIndex: 0,
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+
+  GG: {
+    backgroundColor: 'rgba(255,255,255,1)',
+    height: 30,
+    paddingLeft: 10,
+    paddingRight: 10,
+    borderRadius: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

ios/RCTVLCPlayer/RCTVLCPlayer.h

@@ -0,0 +1,100 @@
+/**
+ * 高度定义
+ * Created by yuanzhou.xu on 17/2/18.
+ */
+import { PixelRatio, Dimensions, Platform, StatusBar } from 'react-native';
+let initialDeviceHeight = 667;
+let initialDeviceWidth = 375;
+let initialPixelRatio = 2;
+let deviceHeight = Dimensions.get('window').height;
+let deviceWidth = Dimensions.get('window').width;
+let pixelRatio = PixelRatio.get();
+let statusBarHeight = 20; //初始状态栏高度
+let topBarHeight = 44; //初始导航栏高度
+let tabBarHeight = 49; //初始标签栏高度
+let IS_IPHONEX = false;
+let changeRatio = Math.min(
+  deviceHeight / initialDeviceHeight,
+  deviceWidth / initialDeviceWidth,
+); //pixelRatio/initialPixelRatio;
+changeRatio = changeRatio.toFixed(2);
+if (deviceWidth > 375 && deviceWidth <= 1125 / 2) {
+  statusBarHeight = 27;
+  topBarHeight = 66;
+  tabBarHeight = 60;
+} else if (deviceWidth > 1125 / 2) {
+  statusBarHeight = 30;
+  topBarHeight = 66;
+  tabBarHeight = 60;
+}
+if (Platform.OS !== 'ios') {
+  statusBarHeight = 20;
+  if (deviceWidth > 375 && deviceWidth <= 1125 / 2) {
+    statusBarHeight = 25;
+  } else if (deviceWidth > 1125 / 2 && deviceWidth < 812) {
+    statusBarHeight = 25;
+  }
+  if (StatusBar.currentHeight) {
+    statusBarHeight = StatusBar.currentHeight;
+  }
+}
+
+if (deviceWidth >= 375 && deviceWidth < 768) {
+  topBarHeight = 44; //初始导航栏高度
+  tabBarHeight = 49;
+  changeRatio = 1;
+}
+if (deviceHeight >= 812) {
+  statusBarHeight = 44;
+  //topBarHeight = 60;
+  IS_IPHONEX = true;
+}
+/**
+ * 返回状态栏高度
+ */
+export function getStatusBarHeight() {
+  return statusBarHeight;
+}
+/**
+ * 返回导航栏高度
+ */
+export function getTopBarHeight() {
+  return topBarHeight;
+}
+/**
+ * 返回标签栏高度
+ */
+export function getTabBarHeight() {
+  return tabBarHeight;
+}
+/**
+ *
+ */
+export function getTopHeight() {
+  if (Platform.OS === 'ios') {
+    return topBarHeight + statusBarHeight;
+  } else {
+    return topBarHeight + statusBarHeight;
+  }
+}
+/**
+ * 返回变更比例
+ */
+export function getChangeRatio() {
+  return changeRatio;
+}
+/** 获取tabBar比例**/
+export function getTabBarRatio() {
+  return tabBarHeight / 49;
+}
+
+/**
+ * 获取TopBar比例
+ */
+export function getTopBarRatio() {
+  return changeRatio;
+}
+
+export function isIphoneX() {
+  return IS_IPHONEX;
+}

ios/RCTVLCPlayer/RCTVLCPlayer.m

@@ -0,0 +1,86 @@
+/**
+ * Created by yuanzhou.xu on 2018/5/16.
+ */
+import React, { Component } from 'react';
+import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
+
+export default class TimeLimt extends Component {
+  constructor(props) {
+    super(props);
+    this.timer = null;
+  }
+
+  static defaultProps = {
+    maxTime: 0,
+  };
+
+  state = {
+    timeNumber: 0,
+  };
+
+  componentDidMount() {
+    if(this.props.maxTime > 0){
+      this.timer = setInterval(this._updateTimer, 1000);
+    }
+  }
+
+  _updateTimer = () => {
+    let { timeNumber } = this.state;
+    let { maxTime } = this.props;
+    let newTimeNumber = timeNumber + 1;
+    this.setState({
+      timeNumber: newTimeNumber,
+    });
+    if (newTimeNumber >= maxTime) {
+      this._onEnd();
+    }
+  };
+
+  componentWillUnmount() {
+    clearInterval(this.timer);
+  }
+
+  _onEnd = () => {
+    let { onEnd } = this.props;
+    clearInterval(this.timer);
+    onEnd && onEnd();
+  };
+
+  render() {
+    let { timeNumber } = this.state;
+    let { maxTime } = this.props;
+    return (
+      <TouchableOpacity
+        style={{ flexDirection: 'row' }}
+        onPress={this._onEnd}
+        activeOpacity={1}>
+        {maxTime > 0 && (
+          <View style={styles.timeView}>
+            <Text style={{ color: 'green', fontSize: 13 }}>{maxTime - timeNumber}</Text>
+          </View>
+        )}
+        <View style={styles.nameView}>
+          <Text style={{ fontSize: 13 }}>跳过片头</Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    //backgroundColor: '#000',
+  },
+  timeView: {
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 5,
+  },
+  nameView: {
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

ios/RCTVLCPlayer/RCTVLCPlayerManager.h

@@ -0,0 +1,326 @@
+/**
+ * Created by yuanzhou.xu on 2018/5/15.
+ */
+
+import React, { Component } from 'react';
+import {
+  StatusBar,
+  View,
+  StyleSheet,
+  Platform,
+  TouchableOpacity,
+  Text,
+  Dimensions,
+  BackHandler,
+} from 'react-native';
+
+import VLCPlayerView from './VLCPlayerView';
+import PropTypes from 'prop-types';
+import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
+import { getStatusBarHeight } from './SizeController';
+const statusBarHeight = getStatusBarHeight();
+const _fullKey = 'commonVideo_android_fullKey';
+let deviceHeight = Dimensions.get('window').height;
+let deviceWidth = Dimensions.get('window').width;
+export default class CommonVideo extends Component {
+  constructor(props) {
+    super(props);
+    this.url = '';
+    this.initialHeight = 200;
+  }
+
+  static navigationOptions = {
+    header: null,
+  };
+
+  state = {
+    isEndGG: false,
+    isFull: false,
+    currentUrl: '',
+    storeUrl: '',
+  };
+
+  static defaultProps = {
+    height: 250,
+    showGG: false,
+    ggUrl: '',
+    url: '',
+    showBack: false,
+    showTitle: false,
+  };
+
+  static propTypes = {
+    /**
+     * 视频播放结束
+     */
+    onEnd: PropTypes.func,
+
+    /**
+     * 广告头播放结束
+     */
+    onGGEnd: PropTypes.func,
+    /**
+     * 开启全屏
+     */
+    startFullScreen: PropTypes.func,
+    /**
+     * 关闭全屏
+     */
+    closeFullScreen: PropTypes.func,
+    /**
+     * 返回按钮点击事件
+     */
+    onLeftPress: PropTypes.func,
+    /**
+     * 标题
+     */
+    title: PropTypes.string,
+    /**
+     * 是否显示返回按钮
+     */
+    showBack: PropTypes.bool,
+    /**
+     * 是否显示标题
+     */
+    showTitle: PropTypes.bool,
+
+    onGoLivePress: PropTypes.func,
+
+    onReplayPress: PropTypes.func,
+  };
+
+  static getDerivedStateFromProps(nextProps, preState) {
+    let { url } = nextProps;
+    let { currentUrl, storeUrl } = preState;
+    if (url && url !== storeUrl) {
+      if (storeUrl === "") {
+        return {
+          currentUrl: url,
+          storeUrl: url,
+          isEndGG: false,
+        };
+      } else {
+        return {
+          currentUrl: "",
+          storeUrl: url,
+          isEndGG: false,
+        };
+      }
+    }
+    return null;
+  }
+
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.props.url !== prevState.storeUrl) {
+      this.setState({
+        storeUrl: this.props.url,
+        currentUrl: this.props.url
+      })
+    }
+  }
+
+  componentDidMount() {
+    StatusBar.setBarStyle("light-content");
+    let { style, isGG } = this.props;
+
+    if (style && style.height && !isNaN(style.height)) {
+      this.initialHeight = style.height;
+    }
+    this.setState({
+      currentVideoAspectRatio: deviceWidth + ":" + this.initialHeight,
+    });
+
+    // [bav add start]
+    let { isFull } = this.props;
+    console.log(`isFull == ${isFull}`);
+    if (isFull) {
+      this._toFullScreen();
+    }
+    // [bav add end]
+  }
+
+  componentWillUnmount() {
+    let { isFull } = this.props;
+    if (isFull) {
+      this._closeFullScreen();
+    }
+  }
+
+  _closeFullScreen = () => {
+    let { closeFullScreen, BackHandle, Orientation } = this.props;
+    this.setState({ isFull: false, currentVideoAspectRatio: deviceWidth + ":" + this.initialHeight, });
+    BackHandle && BackHandle.removeBackFunction(_fullKey);
+    Orientation && Orientation.lockToPortrait();
+    StatusBar.setHidden(false);
+    //StatusBar.setTranslucent(false);
+    closeFullScreen && closeFullScreen();
+  };
+
+  _toFullScreen = () => {
+    let { startFullScreen, BackHandle, Orientation } = this.props;
+    //StatusBar.setTranslucent(true);
+    this.setState({ isFull: true, currentVideoAspectRatio: deviceHeight + ":" + deviceWidth, });
+    StatusBar.setHidden(true);
+    BackHandle && BackHandle.addBackFunction(_fullKey, this._closeFullScreen);
+    startFullScreen && startFullScreen();
+    Orientation && Orientation.lockToLandscape && Orientation.lockToLandscape();
+  };
+
+  _onLayout = (e) => {
+    let { width, height } = e.nativeEvent.layout;
+    console.log(e.nativeEvent.layout);
+    if (width * height > 0) {
+      this.width = width;
+      this.height = height;
+      if (!this.initialHeight) {
+        this.initialHeight = height;
+      }
+    }
+  }
+
+  render() {
+    let { url, ggUrl, showGG, onGGEnd, onEnd, style, height, title, onLeftPress, showBack, showTitle, closeFullScreen, videoAspectRatio, fullVideoAspectRatio } = this.props;
+    let { isEndGG, isFull, currentUrl } = this.state;
+    let currentVideoAspectRatio = '';
+    if (isFull) {
+      currentVideoAspectRatio = fullVideoAspectRatio;
+    } else {
+      currentVideoAspectRatio = videoAspectRatio;
+    }
+    if (!currentVideoAspectRatio) {
+      let { width, height } = this.state;
+      currentVideoAspectRatio = this.state.currentVideoAspectRatio;
+    }
+    let realShowGG = false;
+    let type = '';
+    let ggType = '';
+    let showVideo = false;
+    let showTop = false;
+    if (showGG && ggUrl && !isEndGG) {
+      realShowGG = true;
+    }
+    if (currentUrl) {
+      if (!showGG || (showGG && isEndGG)) {
+        showVideo = true;
+      }
+      if (currentUrl.split) {
+        let types = currentUrl.split('.');
+        if (types && types.length > 0) {
+          type = types[types.length - 1];
+        }
+      }
+    }
+    if (ggUrl && ggUrl.split) {
+      let types = ggUrl.split('.');
+      if (types && types.length > 0) {
+        ggType = types[types.length - 1];
+      }
+    }
+    if (!showVideo && !realShowGG) {
+      showTop = true;
+    }
+    return (
+      <View
+        //onLayout={this._onLayout}
+        style={[isFull ? styles.container : { height: 200, backgroundColor: '#000' }, style]}>
+        {showTop && <View style={styles.topView}>
+          <View style={styles.backBtn}>
+            {showBack && <TouchableOpacity
+              onPress={() => {
+                if (isFull) {
+                  closeFullScreen && closeFullScreen();
+                } else {
+                  onLeftPress && onLeftPress();
+                }
+              }}
+              style={styles.btn}
+              activeOpacity={0.8}>
+              <Icon name={'chevron-left'} size={30} color="#fff" />
+            </TouchableOpacity>
+            }
+            <View style={{ justifyContent: 'center', flex: 1, marginRight: 10 }}>
+              {showTitle &&
+                <Text style={{ color: '#fff', fontSize: 16 }} numberOfLines={1}>{title}</Text>
+              }
+            </View>
+          </View>
+        </View>
+        }
+        {realShowGG && (
+          <VLCPlayerView
+            {...this.props}
+            videoAspectRatio={currentVideoAspectRatio}
+            uri={ggUrl}
+            source={{ uri: ggUrl, type: ggType }}
+            type={ggType}
+            isGG={true}
+            showBack={showBack}
+            showTitle={showTitle}
+            isFull={isFull}
+            onEnd={() => {
+              onGGEnd && onGGEnd();
+              this.setState({ isEndGG: true });
+            }}
+            startFullScreen={this._toFullScreen}
+            closeFullScreen={this._closeFullScreen}
+          />
+        )}
+
+        {showVideo && (
+          <VLCPlayerView
+            {...this.props}
+            uri={currentUrl}
+            videoAspectRatio={currentVideoAspectRatio}
+            onLeftPress={onLeftPress}
+            title={title}
+            type={type}
+            isFull={isFull}
+            showBack={showBack}
+            showTitle={showTitle}
+            hadGG={true}
+            isEndGG={isEndGG}
+            //initPaused={this.state.paused}
+            style={showGG && !isEndGG ? { position: 'absolute', zIndex: -1 } : {}}
+            source={{ uri: currentUrl, type: type }}
+            startFullScreen={this._toFullScreen}
+            closeFullScreen={this._closeFullScreen}
+            onEnd={() => {
+              onEnd && onEnd();
+            }}
+          />
+        )}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
+  topView: {
+    top: Platform.OS === 'ios' ? statusBarHeight : 0,
+    left: 0,
+    height: 45,
+    position: 'absolute',
+    width: '100%'
+  },
+  backBtn: {
+    height: 45,
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  btn: {
+    marginLeft: 10,
+    marginRight: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.1)',
+    height: 40,
+    borderRadius: 20,
+    width: 40,
+  }
+});