Merge pull request #270 from take0ffmedia/feature/scalingMode

bitmovin · Oct 17, 2023 · cc9b11a · cc9b11a
2 parents 5d6e0f5 + efa4217
commit cc9b11a
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 0 deletions.
diff --git a/android/src/main/java/com/bitmovin/player/reactnative/RNPlayerViewManager.kt b/android/src/main/java/com/bitmovin/player/reactnative/RNPlayerViewManager.kt
@@ -5,6 +5,7 @@ import android.os.Looper
 import android.util.Log
 import android.view.ViewGroup.LayoutParams
 import com.bitmovin.player.PlayerView
+import com.bitmovin.player.api.ui.ScalingMode
 import com.bitmovin.player.reactnative.converter.JsonConverter
 import com.bitmovin.player.reactnative.extensions.getBooleanOrNull
 import com.bitmovin.player.reactnative.extensions.getModule
@@ -31,6 +32,7 @@ class RNPlayerViewManager(private val context: ReactApplicationContext) : Simple
         ATTACH_FULLSCREEN_BRIDGE("attachFullscreenBridge"),
         SET_CUSTOM_MESSAGE_HANDLER_BRIDGE_ID("setCustomMessageHandlerBridgeId"),
         SET_FULLSCREEN("setFullscreen"),
+        SET_SCALING_MODE("setScalingMode"),
     }
 
     /**
@@ -166,6 +168,11 @@ class RNPlayerViewManager(private val context: ReactApplicationContext) : Simple
                     setFullscreen(view, isFullscreen)
                 }
             }
+            Commands.SET_SCALING_MODE -> {
+                args?.getString(1)?.let { scalingMode ->
+                    setScalingMode(view, scalingMode)
+                }
+            }
         }
     }
 
@@ -196,6 +203,12 @@ class RNPlayerViewManager(private val context: ReactApplicationContext) : Simple
         }
     }
 
+    private fun setScalingMode(view: RNPlayerView, scalingMode: String) {
+        Handler(Looper.getMainLooper()).post {
+            view.playerView?.scalingMode = ScalingMode.valueOf(scalingMode)
+        }
+    }
+
     private fun setCustomMessageHandlerBridgeId(view: RNPlayerView, customMessageHandlerBridgeId: NativeId) {
         this.customMessageHandlerBridgeId = customMessageHandlerBridgeId
         attachCustomMessageHandlerBridge(view)

diff --git a/ios/RNPlayerViewManager.m b/ios/RNPlayerViewManager.m
@@ -68,5 +68,6 @@ @interface RCT_EXTERN_REMAP_MODULE(NativePlayerView, RNPlayerViewManager, RCTVie
 RCT_EXTERN_METHOD(attachFullscreenBridge:(nonnull NSNumber *)viewId fullscreenBridgeId:(NSString *)fullscreenBridgeId)
 RCT_EXTERN_METHOD(setCustomMessageHandlerBridgeId:(nonnull NSNumber *)viewId customMessageHandlerBridgeId:(NSString *)fullscreenBridgeId)
 RCT_EXTERN_METHOD(setFullscreen:(nonnull NSNumber *)viewId isFullscreen:(BOOL)isFullscreen)
+RCT_EXTERN_METHOD(setScalingMode:(nonnull NSNumber *)viewId scalingMode:(NSString *)scalingMode)
 
 @end
diff --git a/ios/RNPlayerViewManager.swift b/ios/RNPlayerViewManager.swift
@@ -105,6 +105,30 @@ class RNPlayerViewManager: RCTViewManager {
         }
     }
 
+     @objc func setScalingMode(_ viewId: NSNumber, scalingMode: String) {
+         bridge.uiManager.addUIBlock { [weak self] _, views in
+             guard
+                 let self,
+                 let view = views?[viewId] as? RNPlayerView
+             else {
+                 return
+             }
+             guard let playerView = view.playerView else {
+                 return
+             }
+             switch scalingMode {
+             case "Zoom":
+                 playerView.scalingMode = .zoom
+             case "Stretch":
+                 playerView.scalingMode = .stretch
+             case "Fit":
+                 playerView.scalingMode = .fit
+             default:
+                 break
+             }
+         }
+     }
+
     /// Fetches the initialized `PlayerModule` instance on RN's bridge object.
     private func getPlayerModule() -> PlayerModule? {
         bridge.module(for: PlayerModule.self) as? PlayerModule

diff --git a/src/components/PlayerView/index.tsx b/src/components/PlayerView/index.tsx
@@ -14,6 +14,7 @@ import { useProxy } from '../../hooks/useProxy';
 import { FullscreenHandler, CustomMessageHandler } from '../../ui';
 import { FullscreenHandlerBridge } from '../../ui/fullscreenhandlerbridge';
 import { CustomMessageHandlerBridge } from '../../ui/custommessagehandlerbridge';
+import { ScalingMode } from '../../styleConfig';
 import { PictureInPictureConfig } from './pictureInPictureConfig';
 
 /**
@@ -62,6 +63,11 @@ export interface PlayerViewProps extends BasePlayerViewProps, PlayerViewEvents {
    * To use this property, a `FullscreenHandler` must be set.
    */
   isFullscreenRequested?: Boolean;
+  /**
+   * A value defining how the video is displayed within the parent container's bounds.
+   * Possible values are defined in `ScalingMode`.
+   */
+  scalingMode?: ScalingMode;
 }
 
 /**
@@ -100,6 +106,7 @@ export function PlayerView({
   fullscreenHandler,
   customMessageHandler,
   isFullscreenRequested = false,
+  scalingMode,
   pictureInPictureConfig,
   ...props
 }: PlayerViewProps) {
@@ -179,6 +186,13 @@ export function PlayerView({
       dispatch('setFullscreen', node, isFullscreenRequested);
     }
   }, [isFullscreenRequested, nativeView]);
+
+  useEffect(() => {
+    const node = findNodeHandle(nativeView.current);
+    if (node) {
+      dispatch('setScalingMode', node, scalingMode);
+    }
+  }, [scalingMode, nativeView]);
   return (
     <NativePlayerView
       ref={nativeView}