Merge pull request #1058 from react-native-community/feature/use-texture-view

ExoPlayer TextureView support

README.md

@@ -232,6 +232,7 @@ var styles = StyleSheet.create({
 * [resizeMode](#resizemode)
 * [selectedTextTrack](#selectedtexttrack)
 * [stereoPan](#stereopan)
+* [useTextureView](#usetextureview)
 * [volume](#volume)
 
 #### ignoreSilentSwitch
@@ -346,6 +347,16 @@ Adjust the balance of the left and right audio channels.  Any value between –1
 
 Platforms: Android MediaPlayer
 
+#### useTextureView
+Output to a TextureView instead of the default SurfaceView. In general you will want to use SurfaceView because it provides better performance. However, SurfaceViews can't be animated, transformed or scaled. You also can't overlay multiple SurfaceViews.
+
+useTextureView can only be set at same time you're setting the source.
+
+* **false (default)** - Use a SurfaceView
+* **true** - Use a TextureView
+
+Platforms: Android ExoPlayer
+
 #### volume
 Adjust the volume.
 * **1.0 (default)** - Play at full volume

Video.js

@@ -293,6 +293,7 @@ Video.propTypes = {
   controls: PropTypes.bool,
   currentTime: PropTypes.number,
   progressUpdateInterval: PropTypes.number,
+  useTextureView: PropTypes.bool,
   onLoadStart: PropTypes.func,
   onLoad: PropTypes.func,
   onBuffer: PropTypes.func,

android-exoplayer/src/main/java/com/brentvatne/exoplayer/ExoPlayerView.java

@@ -25,17 +25,20 @@ import com.google.android.exoplayer2.trackselection.TrackSelectionArray;
 import com.google.android.exoplayer2.ui.SubtitleView;
 
 import java.util.List;
-import java.lang.Object;
 
 @TargetApi(16)
 public final class ExoPlayerView extends FrameLayout {
 
-    private final View surfaceView;
+    private View surfaceView;
     private final View shutterView;
     private final SubtitleView subtitleLayout;
     private final AspectRatioFrameLayout layout;
     private final ComponentListener componentListener;
     private SimpleExoPlayer player;
+    private Context context;
+    private ViewGroup.LayoutParams layoutParams;
+
+    private boolean useTextureView = false;
 
     public ExoPlayerView(Context context) {
         this(context, null);
@@ -48,9 +51,9 @@ public final class ExoPlayerView extends FrameLayout {
     public ExoPlayerView(Context context, AttributeSet attrs, int defStyleAttr) {
         super(context, attrs, defStyleAttr);
 
-        boolean useTextureView = false;
+        this.context = context;
 
-        ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(
+        layoutParams = new ViewGroup.LayoutParams(
                 ViewGroup.LayoutParams.MATCH_PARENT,
                 ViewGroup.LayoutParams.MATCH_PARENT);
 
@@ -64,25 +67,45 @@ public final class ExoPlayerView extends FrameLayout {
         layout.setLayoutParams(aspectRatioParams);
 
         shutterView = new View(getContext());
-        shutterView.setLayoutParams(params);
+        shutterView.setLayoutParams(layoutParams);
         shutterView.setBackgroundColor(ContextCompat.getColor(context, android.R.color.black));
 
         subtitleLayout = new SubtitleView(context);
-        subtitleLayout.setLayoutParams(params);
+        subtitleLayout.setLayoutParams(layoutParams);
         subtitleLayout.setUserDefaultStyle();
         subtitleLayout.setUserDefaultTextSize();
 
-        View view = useTextureView ? new TextureView(context) : new SurfaceView(context);
-        view.setLayoutParams(params);
-        surfaceView = view;
+        updateSurfaceView();
 
-        layout.addView(surfaceView, 0, params);
-        layout.addView(shutterView, 1, params);
-        layout.addView(subtitleLayout, 2, params);
+        layout.addView(shutterView, 1, layoutParams);
+        layout.addView(subtitleLayout, 2, layoutParams);
 
         addViewInLayout(layout, 0, aspectRatioParams);
     }
 
+    private void setVideoView() {
+        if (surfaceView instanceof TextureView) {
+            player.setVideoTextureView((TextureView) surfaceView);
+        } else if (surfaceView instanceof SurfaceView) {
+            player.setVideoSurfaceView((SurfaceView) surfaceView);
+        }
+    }
+
+    private void updateSurfaceView() {
+        View view = useTextureView ? new TextureView(context) : new SurfaceView(context);
+        view.setLayoutParams(layoutParams);
+
+        surfaceView = view;
+        if (layout.getChildAt(0) != null) {
+            layout.removeViewAt(0);
+        }
+        layout.addView(surfaceView, 0, layoutParams);
+
+        if (this.player != null) {
+            setVideoView();
+        }
+    }
+
     /**
      * Set the {@link SimpleExoPlayer} to use. The {@link SimpleExoPlayer#setTextOutput} and
      * {@link SimpleExoPlayer#setVideoListener} method of the player will be called and previous
@@ -103,11 +126,7 @@ public final class ExoPlayerView extends FrameLayout {
         this.player = player;
         shutterView.setVisibility(VISIBLE);
         if (player != null) {
-            if (surfaceView instanceof TextureView) {
-                player.setVideoTextureView((TextureView) surfaceView);
-            } else if (surfaceView instanceof SurfaceView) {
-                player.setVideoSurfaceView((SurfaceView) surfaceView);
-            }
+            setVideoView();
             player.setVideoListener(componentListener);
             player.addListener(componentListener);
             player.setTextOutput(componentListener);
@@ -137,6 +156,11 @@ public final class ExoPlayerView extends FrameLayout {
         return surfaceView;
     }
 
+    public void setUseTextureView(boolean useTextureView) {
+        this.useTextureView = useTextureView;
+        updateSurfaceView();
+    }
+
     private final Runnable measureAndLayout = new Runnable() {
         @Override
         public void run() {

android-exoplayer/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java

@@ -5,14 +5,12 @@ import android.app.Activity;
 import android.content.Context;
 import android.media.AudioManager;
 import android.net.Uri;
-import android.os.Build;
 import android.os.Handler;
 import android.os.Message;
 import android.text.TextUtils;
 import android.util.Log;
 import android.view.View;
 import android.view.Window;
-import android.view.accessibility.CaptioningManager;
 import android.widget.FrameLayout;
 
 import com.brentvatne.react.R;
@@ -61,7 +59,6 @@ import java.net.CookieManager;
 import java.net.CookiePolicy;
 import java.lang.Math;
 import java.lang.Object;
-import java.util.Locale;
 
 @SuppressLint("ViewConstructor")
 class ReactExoplayerView extends FrameLayout implements
@@ -109,6 +106,7 @@ class ReactExoplayerView extends FrameLayout implements
     private boolean disableFocus;
     private float mProgressUpdateInterval = 250.0f;
     private boolean playInBackground = false;
+    private boolean useTextureView = false;
     // \ End props
 
     // React
@@ -780,4 +778,8 @@ class ReactExoplayerView extends FrameLayout implements
             eventEmitter.fullscreenDidDismiss();
         }
     }
+
+    public void setUseTextureView(boolean useTextureView) {
+        exoPlayerView.setUseTextureView(useTextureView);
+    }
 }

android-exoplayer/src/main/java/com/brentvatne/exoplayer/ReactExoplayerViewManager.java

@@ -37,6 +37,7 @@ public class ReactExoplayerViewManager extends ViewGroupManager<ReactExoplayerVi
     private static final String PROP_PLAY_IN_BACKGROUND = "playInBackground";
     private static final String PROP_DISABLE_FOCUS = "disableFocus";
     private static final String PROP_FULLSCREEN = "fullscreen";
+    private static final String PROP_USE_TEXTURE_VIEW = "useTextureView";
 
     @Override
     public String getName() {
@@ -175,6 +176,11 @@ public class ReactExoplayerViewManager extends ViewGroupManager<ReactExoplayerVi
         videoView.setFullscreen(fullscreen);
     }
 
+    @ReactProp(name = PROP_USE_TEXTURE_VIEW, defaultBoolean = false)
+    public void setUseTextureView(final ReactExoplayerView videoView, final boolean useTextureView) {
+        videoView.setUseTextureView(useTextureView);
+    }
+
     private boolean startsWithValidScheme(String uriString) {
         return uriString.startsWith("http://")
                 || uriString.startsWith("https://")