@jwplayer/jwplayer-react-native 1.2.0 → 1.3.0

package/android/src/main/java/com/jwplayer/rnjwplayer/RNJWPlayerView.java

@@ -21,6 +21,7 @@ import android.os.Handler;
 import android.os.Looper;
 import android.util.Log;
 import android.view.View;
+import android.view.View.MeasureSpec;
 import android.view.ViewGroup;
 import android.view.Window;
 import android.view.WindowManager;
@@ -318,6 +319,17 @@ public class RNJWPlayerView extends RelativeLayout implements
         getReactContext().addLifecycleEventListener(this);
     }
 
+    @Override
+    protected void onLayout(boolean changed, int l, int t, int r, int b) {
+        super.onLayout(changed, l, t, r, b);
+        
+        // Standard React Native layout handling
+        // Since we're no longer constantly swapping views, this is simpler
+        if (mPlayerView != null) {
+            mPlayerView.layout(0, 0, r - l, b - t);
+        }
+    }
+
     private LifecycleObserver lifecycleObserver = new LifecycleEventObserver() {
         @Override
         public void onStateChanged(@NonNull LifecycleOwner source, @NonNull Lifecycle.Event event) {
@@ -445,7 +457,13 @@ public class RNJWPlayerView extends RelativeLayout implements
             );
 
             mPlayer = null;
-            mPlayerView = null;
+            
+            // Remove the old player view from the view hierarchy to prevent
+            // the old UI controls from receiving touch events (fixes GitHub issue #188 crash)
+            if (mPlayerView != null) {
+                removeView(mPlayerView);
+                mPlayerView = null;
+            }
 
             getReactContext().removeLifecycleEventListener(this);
 
@@ -896,55 +914,174 @@ public class RNJWPlayerView extends RelativeLayout implements
         }
     }
 
+    /**
+     * Main entry point for setting/updating player configuration.
+     * Uses a smart approach: only recreate the player view when absolutely necessary,
+     * otherwise reconfigure the existing player instance.
+     * 
+     * This follows JWPlayer SDK's intended usage pattern and significantly reduces overhead.
+     */
     public void setConfig(ReadableMap prop) {
         if (mConfig == null || !mConfig.equals(prop)) {
-            if (mConfig != null && isOnlyDiff(prop, "playlist") && mPlayer != null) { // still safe check, even with JW
-                // JSON change
-                PlayerConfig oldConfig = mPlayer.getConfig();
-                boolean wasFullscreen = mPlayer.getFullscreen();
-                UiConfig uiConfig = createUiConfigWithControlsContainer(mPlayer, oldConfig.getUiConfig());
-                PlayerConfig config = new PlayerConfig.Builder()
-                        .autostart(oldConfig.getAutostart())
-                        .nextUpOffset(oldConfig.getNextUpOffset())
-                        .repeat(oldConfig.getRepeat())
-                        .relatedConfig(oldConfig.getRelatedConfig())
-                        .displayDescription(oldConfig.getDisplayDescription())
-                        .displayTitle(oldConfig.getDisplayTitle())
-                        .advertisingConfig(oldConfig.getAdvertisingConfig())
-                        .stretching(oldConfig.getStretching())
-                        .uiConfig(uiConfig)
-                        .playlist(Util.createPlaylist(mPlaylistProp))
-                        .allowCrossProtocolRedirects(oldConfig.getAllowCrossProtocolRedirects())
-                        .preload(oldConfig.getPreload())
-                        .useTextureView(oldConfig.useTextureView())
-                        .thumbnailPreview(oldConfig.getThumbnailPreview())
-                        .mute(oldConfig.getMute())
-                        .build();
-
-                mPlayer.setup(config);
-                // if the player was fullscreen, set it to fullscreen again as the player is recreated
-                // The fullscreen view is still active but the internals don't know it is
-                if (wasFullscreen) {
-                    mPlayer.setFullscreen(true, true);
-                }
+            // Set license key if provided
+            if (prop.hasKey("license")) {
+                new LicenseUtil().setLicenseKey(getReactContext(), prop.getString("license"));
             } else {
-                if (prop.hasKey("license")) {
-                    new LicenseUtil().setLicenseKey(getReactContext(), prop.getString("license"));
-                } else {
-                    Log.e(TAG, "JW SDK license not set");
-                }
+                Log.e(TAG, "JW SDK license not set");
+            }
 
-                // The entire config is different (other than the "playlist" key)
-                this.setupPlayer(prop);
+            // First time setup - need to create player view
+            if (mPlayer == null) {
+                this.createPlayerView(prop);
+                mConfig = prop;
+                return;
+            }
+            
+            // Check if we need full player recreation (rare cases only)
+            if (requiresPlayerRecreation(prop)) {
+                Log.d(TAG, "Player recreation required - destroying and recreating player view");
+                this.destroyPlayer();
+                this.createPlayerView(prop);
+            } else {
+                // Normal case: reconfigure existing player without recreation
+                Log.d(TAG, "Reconfiguring existing player without recreation");
+                this.reconfigurePlayer(prop);
             }
-        } else {
-            // No change
         }
 
         mConfig = prop;
     }
 
+    /**
+     * Determines if a config change requires full player view recreation.
+     * Only return true for changes that genuinely cannot be handled by reconfiguration.
+     * 
+     * Currently, the JWPlayer SDK can handle almost all config changes via setup(),
+     * so we only recreate for critical changes like license updates.
+     */
+    private boolean requiresPlayerRecreation(ReadableMap prop) {
+        if (mConfig == null || mPlayer == null) {
+            return true;
+        }
+        
+        // License change requires recreation
+        if (prop.hasKey("license") && mConfig.hasKey("license")) {
+            String newLicense = prop.getString("license");
+            String oldLicense = mConfig.getString("license");
+            if (newLicense != null && !newLicense.equals(oldLicense)) {
+                return true;
+            }
+        }
+        
+        // Add other cases here if needed in the future
+        // For example: switching between playerView and playerViewController modes
+        
+        return false;
+    }
+
+    /**
+     * Reconfigures the existing player instance with new settings.
+     * This is the preferred path for config updates as it preserves the player instance
+     * and video surface, following JWPlayer SDK's design intent.
+     * 
+     * Based on the pattern used in loadPlaylist() and loadPlaylistWithUrl().
+     */
+    private void reconfigurePlayer(ReadableMap prop) {
+        if (mPlayer == null) {
+            Log.e(TAG, "Cannot reconfigure - player is null");
+            return;
+        }
+
+        PlayerConfig oldConfig = mPlayer.getConfig();
+        boolean wasFullscreen = mPlayer.getFullscreen();
+        boolean currentControlsState = mPlayer.getControls();
+        
+        // Stop playback before reconfiguration to avoid issues (Issue #188 fix)
+        mPlayer.stop();
+        
+        // Build new configuration
+        PlayerConfig newConfig = buildPlayerConfig(prop, oldConfig);
+        
+        // ALWAYS ensure PLAYER_CONTROLS_CONTAINER is shown in UiConfig after setup.
+        // This prevents issues where controls are off and JWPlayer SDK hides UI groups,
+        // leaving them in a state where setControls(true) won't work.
+        // We'll manage controls state via setControls() API after setup for clean state management.
+        UiConfig fixedUiConfig = new UiConfig.Builder(newConfig.getUiConfig())
+            .show(UiGroup.PLAYER_CONTROLS_CONTAINER)
+            .build();
+        newConfig = new PlayerConfig.Builder(newConfig)
+            .uiConfig(fixedUiConfig)
+            .build();
+        
+        // Apply new configuration to existing player
+        mPlayer.setup(newConfig);
+        
+        // Now manage controls state via API (after setup, when UI groups are in clean state)
+        if (prop.hasKey("controls")) {
+            // Developer explicitly set controls in props - use that value
+            mPlayer.setControls(prop.getBoolean("controls"));
+        } else if (!currentControlsState) {
+            // Controls were off before reconfigure and no explicit prop provided
+            // Restore the off state (after ensuring UI groups are visible)
+            mPlayer.setControls(false);
+        }
+        // Note: If controls were on and no prop provided, they'll stay on (default from configureUI)
+        
+        // Restore fullscreen state if needed
+        // The fullscreen view is still active but internals need to be notified
+        if (wasFullscreen) {
+            mPlayer.setFullscreen(true, true);
+        }
+    }
+
+    /**
+     * Builds a PlayerConfig from React Native props, preserving relevant old config values.
+     * This ensures smooth transitions when reconfiguring the player.
+     */
+    private PlayerConfig buildPlayerConfig(ReadableMap prop, PlayerConfig oldConfig) {
+        PlayerConfig.Builder configBuilder = new PlayerConfig.Builder();
+        
+        // Try to parse as JW config first
+        JSONObject obj;
+        PlayerConfig jwConfig = null;
+        Boolean forceLegacy = prop.hasKey("forceLegacyConfig") ? prop.getBoolean("forceLegacyConfig") : false;
+        Boolean isJwConfig = false;
+
+        if (!forceLegacy) {
+            try {
+                obj = MapUtil.toJSONObject(prop);
+                jwConfig = JsonHelper.parseConfigJson(obj);
+                isJwConfig = true;
+                return jwConfig;  // Return directly if valid JW config
+            } catch (Exception ex) {
+                Log.d(TAG, "Not a JW config format, using legacy builder");
+                isJwConfig = false;
+            }
+        }
+
+        // Legacy config building
+        configurePlaylist(configBuilder, prop);
+        configureBasicSettings(configBuilder, prop);
+        configureStyling(configBuilder, prop);
+        configureAdvertising(configBuilder, prop);
+        configureUI(configBuilder, prop);
+        
+        return configBuilder.build();
+    }
+
+    /**
+     * Utility method to check if only a specific key differs between configs.
+     * This is kept for potential future optimizations or debugging, but is no longer
+     * used in the main setConfig flow since we now reconfigure the player for all changes.
+     * 
+     * @deprecated Consider using reconfigurePlayer() for all config changes instead
+     */
+    @Deprecated
     public boolean isOnlyDiff(ReadableMap prop, String keyName) {
+        if (mConfig == null || prop == null) {
+            return false;
+        }
+        
         // Convert ReadableMap to HashMap
         Map<String, Object> mConfigMap = mConfig.toHashMap();
         Map<String, Object> propMap = prop.toHashMap();
@@ -1052,12 +1189,23 @@ public class RNJWPlayerView extends RelativeLayout implements
     }
 
     private void configureUI(PlayerConfig.Builder configBuilder, ReadableMap prop) {
+        // Handle controls property - default to true if not specified
+        boolean controls = true; // Default to showing controls
         if (prop.hasKey("controls")) {
-            boolean controls = prop.getBoolean("controls");
-            if (!controls) {
-                UiConfig uiConfig = new UiConfig.Builder().hideAllControls().build();
-                configBuilder.uiConfig(uiConfig);
-            }
+            controls = prop.getBoolean("controls");
+        }
+        
+        if (!controls) {
+            UiConfig uiConfig = new UiConfig.Builder().hideAllControls().build();
+            configBuilder.uiConfig(uiConfig);
+        } else {
+            // Explicitly show controls and ensure controls container is visible
+            // This ensures controls work even if setControls() is called later
+            UiConfig uiConfig = new UiConfig.Builder()
+                .displayAllControls()
+                .show(UiGroup.PLAYER_CONTROLS_CONTAINER)
+                .build();
+            configBuilder.uiConfig(uiConfig);
         }
 
         if (prop.hasKey("hideUIGroups")) {
@@ -1076,7 +1224,13 @@ public class RNJWPlayerView extends RelativeLayout implements
         }
     }
 
-    private void setupPlayer(ReadableMap prop) {
+    /**
+     * Creates a new player view and initializes it with the provided configuration.
+     * This should only be called for initial setup or when full recreation is required.
+     * 
+     * Note: This method calls destroyPlayer() first to ensure clean state.
+     */
+    private void createPlayerView(ReadableMap prop) {
         PlayerConfig.Builder configBuilder = new PlayerConfig.Builder();
 
         JSONObject obj;
@@ -1091,8 +1245,8 @@ public class RNJWPlayerView extends RelativeLayout implements
                 jwConfig = JsonHelper.parseConfigJson(obj);
                 isJwConfig = true;
             } catch (Exception ex) {
-                Log.e("RNJWPlayerView", ex.toString());
-                isJwConfig = false; // not a valid jw config. Try to setup in legacy
+                Log.e(TAG, "Not a valid JW config format, falling back to legacy: " + ex.toString());
+                isJwConfig = false;
             }
         }
 
@@ -1106,26 +1260,30 @@ public class RNJWPlayerView extends RelativeLayout implements
 
         Context simpleContext = getNonBuggyContext(getReactContext(), getAppContext());
 
+        // Ensure clean state before creating new player view
         this.destroyPlayer();
 
+        // Create new player view
         mPlayerView = new RNJWPlayer(simpleContext);
-
         mPlayerView.setFocusable(true);
         mPlayerView.setFocusableInTouchMode(true);
 
-        setLayoutParams(
-                new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
+        // Set layout parameters
+        setLayoutParams(new ViewGroup.LayoutParams(
+                ViewGroup.LayoutParams.MATCH_PARENT, 
+                ViewGroup.LayoutParams.MATCH_PARENT));
         mPlayerView.setLayoutParams(new LinearLayout.LayoutParams(
                 LinearLayout.LayoutParams.MATCH_PARENT,
                 LinearLayout.LayoutParams.MATCH_PARENT));
+        
+        // Add to view hierarchy - React Native will handle layout
         addView(mPlayerView);
 
-        // Ensure we have a valid state before applying to the player
-        registry.setCurrentState(registry.getCurrentState()); // This is a hack to ensure player and view know the lifecycle state
-
+        // Get player instance
         mPlayer = mPlayerView.getPlayer(this);
 
-        if (prop.hasKey("controls")) { // Hack for controls hiding not working right away
+        // Apply view-specific props
+        if (prop.hasKey("controls")) {
             mPlayerView.getPlayer().setControls(prop.getBoolean("controls"));
         }
 
@@ -1139,7 +1297,7 @@ public class RNJWPlayerView extends RelativeLayout implements
         }
 
         if (prop.hasKey("portraitOnExitFullScreen")) {
-            portraitOnExitFullScreen = prop.getBoolean("fullScreenOnLandscape");
+            portraitOnExitFullScreen = prop.getBoolean("portraitOnExitFullScreen");
         }
 
         if (prop.hasKey("playerInModal")) {
@@ -1151,6 +1309,7 @@ public class RNJWPlayerView extends RelativeLayout implements
             mPlayerView.exitFullScreenOnPortrait = exitFullScreenOnPortrait;
         }
 
+        // Setup player with config
         if (isJwConfig) {
             mPlayer.setup(jwConfig);
         } else {
@@ -1158,6 +1317,7 @@ public class RNJWPlayerView extends RelativeLayout implements
             mPlayer.setup(playerConfig);
         }
 
+        // Configure PiP if enabled
         if (mActivity != null && prop.hasKey("pipEnabled")) {
             boolean pipEnabled = prop.getBoolean("pipEnabled");
             if (pipEnabled) {
@@ -1169,56 +1329,12 @@ public class RNJWPlayerView extends RelativeLayout implements
             }
         }
 
-        // Legacy
-        // This isn't the ideal way to do this on Android. All drawables/colors/themes shoudld
-        // be targed using styling. See `https://docs.jwplayer.com/players/docs/android-styling-guide`
-        // for more information on how best to override the JWP styles using XML. If you are unsure of a
-        // color/drawable/theme, open an `Ask` issue.
-        if (mColors != null) {
-            if (mColors.hasKey("backgroundColor")) {
-                mPlayerView.setBackgroundColor(Color.parseColor("#" + mColors.getString("backgroundColor")));
-            }
-
-            if (mColors.hasKey("buttons")) {
-
-            }
-
-            if (mColors.hasKey("timeslider")) {
-                CueMarkerSeekbar seekBar = findViewById(com.longtailvideo.jwplayer.R.id.controlbar_seekbar);
-                ReadableMap timeslider = mColors.getMap("timeslider");
-                if (timeslider != null) {
-                    LayerDrawable progressDrawable = (LayerDrawable) seekBar.getProgressDrawable();
-
-                    if (timeslider.hasKey("progress")) {
-                        // seekBar.getProgressDrawable().setColorFilter(Color.parseColor("#" +
-                        // timeslider.getString("progress")), PorterDuff.Mode.SRC_IN);
-                        Drawable processDrawable = progressDrawable.findDrawableByLayerId(android.R.id.progress);
-                        processDrawable.setColorFilter(Color.parseColor("#" + timeslider.getString("progress")),
-                                PorterDuff.Mode.SRC_IN);
-                    }
+        // Legacy styling support
+        // NOTE: This isn't the ideal way to do this on Android. All drawables/colors/themes should
+        // be targeted using styling. See https://docs.jwplayer.com/players/docs/android-styling-guide
+        applyLegacyStyling();
 
-                    if (timeslider.hasKey("buffer")) {
-                        Drawable secondaryProgressDrawable = progressDrawable
-                                .findDrawableByLayerId(android.R.id.secondaryProgress);
-                        secondaryProgressDrawable.setColorFilter(Color.parseColor("#" + timeslider.getString("buffer")),
-                                PorterDuff.Mode.SRC_IN);
-                    }
-
-                    if (timeslider.hasKey("rail")) {
-                        Drawable backgroundDrawable = progressDrawable.findDrawableByLayerId(android.R.id.background);
-                        backgroundDrawable.setColorFilter(Color.parseColor("#" + timeslider.getString("rail")),
-                                PorterDuff.Mode.SRC_IN);
-                    }
-
-                    if (timeslider.hasKey("thumb")) {
-                        seekBar.getThumb().setColorFilter(Color.parseColor("#" + timeslider.getString("thumb")),
-                                PorterDuff.Mode.SRC_IN);
-                    }
-                }
-            }
-        }
-
-        // Needed to handle volume control
+        // Setup audio
         audioManager = (AudioManager) simpleContext.getSystemService(Context.AUDIO_SERVICE);
 
         if (prop.hasKey("backgroundAudioEnabled")) {
@@ -1228,12 +1344,61 @@ public class RNJWPlayerView extends RelativeLayout implements
         setupPlayerView(backgroundAudioEnabled, playlistItemCallbackEnabled);
 
         if (backgroundAudioEnabled) {
-            audioManager = (AudioManager) simpleContext.getSystemService(Context.AUDIO_SERVICE);
             mMediaServiceController = new MediaServiceController.Builder((AppCompatActivity) mActivity, mPlayer)
                     .build();
         }
     }
 
+    /**
+     * Applies legacy color/styling customizations.
+     * Extracted to separate method for clarity.
+     */
+    private void applyLegacyStyling() {
+        if (mColors == null) {
+            return;
+        }
+
+        if (mColors.hasKey("backgroundColor")) {
+            mPlayerView.setBackgroundColor(Color.parseColor("#" + mColors.getString("backgroundColor")));
+        }
+
+        if (mColors.hasKey("timeslider")) {
+            CueMarkerSeekbar seekBar = findViewById(com.longtailvideo.jwplayer.R.id.controlbar_seekbar);
+            ReadableMap timeslider = mColors.getMap("timeslider");
+            if (timeslider != null && seekBar != null) {
+                LayerDrawable progressDrawable = (LayerDrawable) seekBar.getProgressDrawable();
+
+                if (timeslider.hasKey("progress")) {
+                    Drawable processDrawable = progressDrawable.findDrawableByLayerId(android.R.id.progress);
+                    processDrawable.setColorFilter(
+                            Color.parseColor("#" + timeslider.getString("progress")),
+                            PorterDuff.Mode.SRC_IN);
+                }
+
+                if (timeslider.hasKey("buffer")) {
+                    Drawable secondaryProgressDrawable = progressDrawable
+                            .findDrawableByLayerId(android.R.id.secondaryProgress);
+                    secondaryProgressDrawable.setColorFilter(
+                            Color.parseColor("#" + timeslider.getString("buffer")),
+                            PorterDuff.Mode.SRC_IN);
+                }
+
+                if (timeslider.hasKey("rail")) {
+                    Drawable backgroundDrawable = progressDrawable.findDrawableByLayerId(android.R.id.background);
+                    backgroundDrawable.setColorFilter(
+                            Color.parseColor("#" + timeslider.getString("rail")),
+                            PorterDuff.Mode.SRC_IN);
+                }
+
+                if (timeslider.hasKey("thumb")) {
+                    seekBar.getThumb().setColorFilter(
+                            Color.parseColor("#" + timeslider.getString("thumb")),
+                            PorterDuff.Mode.SRC_IN);
+                }
+            }
+        }
+    }
+
     // Audio Focus
 
     public void requestAudioFocus() {

package/android/src/main/java/com/jwplayer/rnjwplayer/Util.java

@@ -55,6 +55,14 @@ public class Util {
                     out.close();
                 }
             }
+            
+            // Check response code before reading
+            int responseCode = urlConnection.getResponseCode();
+            
+            if (responseCode != HttpURLConnection.HTTP_OK) {
+                throw new IOException("HTTP POST failed with code " + responseCode);
+            }
+            
             // Read and return the response body.
             InputStream inputStream = urlConnection.getInputStream();
             try {
@@ -62,6 +70,9 @@ public class Util {
             } finally {
                 inputStream.close();
             }
+        } catch (IOException e) {
+            Log.e("Util", "❌ [HTTP POST] Exception: " + e.getMessage(), e);
+            throw e;
         } finally {
             if (urlConnection != null) {
                 urlConnection.disconnect();
@@ -194,7 +205,8 @@ public class Util {
         }
 
         if (playlistItem.hasKey("authUrl")) {
-            itemBuilder.mediaDrmCallback(new WidevineCallback(playlistItem.getString("authUrl")));
+            String authUrl = playlistItem.getString("authUrl");
+            itemBuilder.mediaDrmCallback(new WidevineCallback(authUrl));
         }
 
         if (playlistItem.hasKey("adSchedule")) {

package/badges/version.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="90" height="20" role="img" aria-label="version: 1.2.0"><title>version: 1.2.0</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="90" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="51" height="20" fill="#555"/><rect x="51" width="39" height="20" fill="#007ec6"/><rect width="90" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="265" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="410">version</text><text x="265" y="140" transform="scale(.1)" fill="#fff" textLength="410">version</text><text aria-hidden="true" x="695" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="290">1.2.0</text><text x="695" y="140" transform="scale(.1)" fill="#fff" textLength="290">1.2.0</text></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="90" height="20" role="img" aria-label="version: 1.3.0"><title>version: 1.3.0</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="90" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="51" height="20" fill="#555"/><rect x="51" width="39" height="20" fill="#007ec6"/><rect width="90" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="265" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="410">version</text><text x="265" y="140" transform="scale(.1)" fill="#fff" textLength="410">version</text><text aria-hidden="true" x="695" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="290">1.3.0</text><text x="695" y="140" transform="scale(.1)" fill="#fff" textLength="290">1.3.0</text></g></svg>