From addacf28389d429eb544202a506eec98b6741c7a Mon Sep 17 00:00:00 2001 From: Jonathan Machado Date: Tue, 26 Sep 2023 11:36:14 -0300 Subject: [PATCH 1/8] chore: initial implementation android --- .../player/reactnative/PlayerModule.kt | 23 +++++++++++++++++++ src/player.ts | 9 +++++++- 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/android/src/main/java/com/bitmovin/player/reactnative/PlayerModule.kt b/android/src/main/java/com/bitmovin/player/reactnative/PlayerModule.kt index b144b34b..13437ab5 100644 --- a/android/src/main/java/com/bitmovin/player/reactnative/PlayerModule.kt +++ b/android/src/main/java/com/bitmovin/player/reactnative/PlayerModule.kt @@ -3,6 +3,7 @@ package com.bitmovin.player.reactnative import android.util.Log import com.bitmovin.analytics.api.DefaultMetadata import com.bitmovin.player.api.Player +import com.bitmovin.player.api.ui.ScalingMode import com.bitmovin.player.api.analytics.create import com.bitmovin.player.api.event.PlayerEvent import com.bitmovin.player.reactnative.converter.JsonConverter @@ -412,6 +413,28 @@ class PlayerModule(private val context: ReactApplicationContext) : ReactContextB } } + /** + * Set `nativeId`'s player. + * @param nativeId Target player Id. + * @param scaling Mode to change scale. + * @param promise JS promise object. + */ + @ReactMethod + fun setScalingMode(nativeId: NativeId, scalingMode: String, promise: Promise) { + uiManager()?.addUIBlock { + if (scalingMode == "Zoom") { + players[nativeId]?.config?.styleConfig?.scalingMode = ScalingMode.Zoom + } + if (scalingMode == "Fit") { + players[nativeId]?.config?.styleConfig?.scalingMode = ScalingMode.Fit + } + if (scalingMode == "Stretch") { + players[nativeId]?.config?.styleConfig?.scalingMode = ScalingMode.Stretch + } + promise.resolve(null) + } + } + /** * Schedules an `AdItem` in the `nativeId`'s associated player. * @param nativeId Target player id. diff --git a/src/player.ts b/src/player.ts index 0411a47b..2a9f615e 100644 --- a/src/player.ts +++ b/src/player.ts @@ -5,7 +5,7 @@ import NativeInstance, { NativeInstanceConfig } from './nativeInstance'; import { Source, SourceConfig } from './source'; import { AudioTrack } from './audioTrack'; import { SubtitleTrack } from './subtitleTrack'; -import { StyleConfig } from './styleConfig'; +import { ScalingMode, StyleConfig } from './styleConfig'; import { TweaksConfig } from './tweaksConfig'; import { AdaptationConfig } from './adaptationConfig'; import { OfflineContentManager, OfflineSourceOptions } from './offline'; @@ -429,6 +429,13 @@ export class Player extends NativeInstance { return PlayerModule.setSubtitleTrack(this.nativeId, trackIdentifier); }; + /** + * Sets the scaling Mode. + */ + setScalingMode = async (scalingMode: ScalingMode): Promise => { + return PlayerModule.setScalingMode(this.nativeId, scalingMode); + }; + /** * Dynamically schedules the `adItem` for playback. * Has no effect if there is no active playback session. From 79778924973a1b5a3e745b3d75b610656af94fa6 Mon Sep 17 00:00:00 2001 From: Jonathan Machado Date: Thu, 12 Oct 2023 11:50:10 -0300 Subject: [PATCH 2/8] feat: implementation ios and android --- .../player/reactnative/PlayerModule.kt | 23 ----------------- .../player/reactnative/RNPlayerViewManager.kt | 25 ++++++++++++++++++- ios/RNPlayerViewManager.m | 1 + ios/RNPlayerViewManager.swift | 21 ++++++++++++++++ src/components/PlayerView/index.tsx | 13 ++++++++++ src/player.ts | 9 +------ 6 files changed, 60 insertions(+), 32 deletions(-) diff --git a/android/src/main/java/com/bitmovin/player/reactnative/PlayerModule.kt b/android/src/main/java/com/bitmovin/player/reactnative/PlayerModule.kt index 13437ab5..b144b34b 100644 --- a/android/src/main/java/com/bitmovin/player/reactnative/PlayerModule.kt +++ b/android/src/main/java/com/bitmovin/player/reactnative/PlayerModule.kt @@ -3,7 +3,6 @@ package com.bitmovin.player.reactnative import android.util.Log import com.bitmovin.analytics.api.DefaultMetadata import com.bitmovin.player.api.Player -import com.bitmovin.player.api.ui.ScalingMode import com.bitmovin.player.api.analytics.create import com.bitmovin.player.api.event.PlayerEvent import com.bitmovin.player.reactnative.converter.JsonConverter @@ -413,28 +412,6 @@ class PlayerModule(private val context: ReactApplicationContext) : ReactContextB } } - /** - * Set `nativeId`'s player. - * @param nativeId Target player Id. - * @param scaling Mode to change scale. - * @param promise JS promise object. - */ - @ReactMethod - fun setScalingMode(nativeId: NativeId, scalingMode: String, promise: Promise) { - uiManager()?.addUIBlock { - if (scalingMode == "Zoom") { - players[nativeId]?.config?.styleConfig?.scalingMode = ScalingMode.Zoom - } - if (scalingMode == "Fit") { - players[nativeId]?.config?.styleConfig?.scalingMode = ScalingMode.Fit - } - if (scalingMode == "Stretch") { - players[nativeId]?.config?.styleConfig?.scalingMode = ScalingMode.Stretch - } - promise.resolve(null) - } - } - /** * Schedules an `AdItem` in the `nativeId`'s associated player. * @param nativeId Target player id. diff --git a/android/src/main/java/com/bitmovin/player/reactnative/RNPlayerViewManager.kt b/android/src/main/java/com/bitmovin/player/reactnative/RNPlayerViewManager.kt index 6df0d82b..2f11fc05 100644 --- 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.extensions.getBooleanOrNull import com.bitmovin.player.reactnative.extensions.getModule import com.bitmovin.player.reactnative.ui.CustomMessageHandlerModule @@ -28,7 +29,8 @@ class RNPlayerViewManager(private val context: ReactApplicationContext) : Simple ATTACH_PLAYER("attachPlayer"), ATTACH_FULLSCREEN_BRIDGE("attachFullscreenBridge"), SET_CUSTOM_MESSAGE_HANDLER_BRIDGE_ID("setCustomMessageHandlerBridgeId"), - SET_FULLSCREEN("setFullscreen"); + SET_FULLSCREEN("setFullscreen"), + SET_SCALING_MODE("setScalingMode"); } /** @@ -171,6 +173,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,22 @@ class RNPlayerViewManager(private val context: ReactApplicationContext) : Simple } } + private fun setScalingMode(view: RNPlayerView, scalingMode: String) { + Handler(Looper.getMainLooper()).post { + when (scalingMode) { + "Zoom" -> { + view.playerView?.scalingMode = ScalingMode.Zoom + } + "Stretch" -> { + view.playerView?.scalingMode = ScalingMode.Stretch + } + else -> { + view.playerView?.scalingMode = ScalingMode.Fit + } + } + } + } + private fun setCustomMessageHandlerBridgeId(view: RNPlayerView, customMessageHandlerBridgeId: NativeId) { this.customMessageHandlerBridgeId = customMessageHandlerBridgeId attachCustomMessageHandlerBridge(view) diff --git a/ios/RNPlayerViewManager.m b/ios/RNPlayerViewManager.m index 3fec7f83..8a32040a 100644 --- a/ios/RNPlayerViewManager.m +++ b/ios/RNPlayerViewManager.m @@ -66,5 +66,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 index 3014a145..65a1d773 100644 --- a/ios/RNPlayerViewManager.swift +++ b/ios/RNPlayerViewManager.swift @@ -93,6 +93,27 @@ 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 + } + if scalingMode == "Zoom" { + playerView.scalingMode = ScalingMode.zoom + } else if scalingMode == "Stretch" { + playerView.scalingMode = ScalingMode.stretch + } else { + playerView.scalingMode = ScalingMode.fit + } + } + } + /// 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 index f6519daf..5820b16b 100644 --- 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'; /** * Base `PlayerView` component props. Used to stablish common @@ -54,6 +55,10 @@ export interface PlayerViewProps extends BasePlayerViewProps, PlayerViewEvents { * To use this property, a `FullscreenHandler` must be set. */ isFullscreenRequested?: Boolean; + /** + * The `Scaling Mode` that is used by the `PlayerView` to control the scaling mode. + */ + scalingMode?: ScalingMode; } /** @@ -90,6 +95,7 @@ export function PlayerView({ fullscreenHandler, customMessageHandler, isFullscreenRequested = false, + scalingMode = ScalingMode.Fit, ...props }: PlayerViewProps) { // Workaround React Native UIManager commands not sent until UI refresh @@ -168,6 +174,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 ( { return PlayerModule.setSubtitleTrack(this.nativeId, trackIdentifier); }; - /** - * Sets the scaling Mode. - */ - setScalingMode = async (scalingMode: ScalingMode): Promise => { - return PlayerModule.setScalingMode(this.nativeId, scalingMode); - }; - /** * Dynamically schedules the `adItem` for playback. * Has no effect if there is no active playback session. From a4789b03c55e182d8022c61dd69ea7e89429ed25 Mon Sep 17 00:00:00 2001 From: Jonathan Machado Date: Thu, 12 Oct 2023 12:15:03 -0300 Subject: [PATCH 3/8] feat: fix android ktlint --- .../java/com/bitmovin/player/reactnative/RNPlayerViewManager.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/android/src/main/java/com/bitmovin/player/reactnative/RNPlayerViewManager.kt b/android/src/main/java/com/bitmovin/player/reactnative/RNPlayerViewManager.kt index dfa2bf5d..3c69e875 100644 --- a/android/src/main/java/com/bitmovin/player/reactnative/RNPlayerViewManager.kt +++ b/android/src/main/java/com/bitmovin/player/reactnative/RNPlayerViewManager.kt @@ -32,7 +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"); + SET_SCALING_MODE("setScalingMode"), } /** From 7bd19c2564732c92072517cca54c48cf3fb9e120 Mon Sep 17 00:00:00 2001 From: Jonathan Machado <67608970+jonathanm-tkf@users.noreply.github.com> Date: Thu, 12 Oct 2023 14:44:30 -0300 Subject: [PATCH 4/8] Update android/src/main/java/com/bitmovin/player/reactnative/RNPlayerViewManager.kt Co-authored-by: Kevin Rocard --- .../player/reactnative/RNPlayerViewManager.kt | 11 +---------- 1 file changed, 1 insertion(+), 10 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 index 3c69e875..a096c5d6 100644 --- a/android/src/main/java/com/bitmovin/player/reactnative/RNPlayerViewManager.kt +++ b/android/src/main/java/com/bitmovin/player/reactnative/RNPlayerViewManager.kt @@ -205,16 +205,7 @@ class RNPlayerViewManager(private val context: ReactApplicationContext) : Simple private fun setScalingMode(view: RNPlayerView, scalingMode: String) { Handler(Looper.getMainLooper()).post { - when (scalingMode) { - "Zoom" -> { - view.playerView?.scalingMode = ScalingMode.Zoom - } - "Stretch" -> { - view.playerView?.scalingMode = ScalingMode.Stretch - } - else -> { - view.playerView?.scalingMode = ScalingMode.Fit - } + view.playerView?.scalingMode = ScalingMode.valueOf(scalingMode) } } } From aa9ecbaaff5476554363c76a015bedc501a56a91 Mon Sep 17 00:00:00 2001 From: Jonathan Machado Date: Thu, 12 Oct 2023 14:47:20 -0300 Subject: [PATCH 5/8] feat: fix android ktlint --- .../java/com/bitmovin/player/reactnative/RNPlayerViewManager.kt | 1 - 1 file changed, 1 deletion(-) diff --git a/android/src/main/java/com/bitmovin/player/reactnative/RNPlayerViewManager.kt b/android/src/main/java/com/bitmovin/player/reactnative/RNPlayerViewManager.kt index a096c5d6..c4fdbf02 100644 --- a/android/src/main/java/com/bitmovin/player/reactnative/RNPlayerViewManager.kt +++ b/android/src/main/java/com/bitmovin/player/reactnative/RNPlayerViewManager.kt @@ -206,7 +206,6 @@ class RNPlayerViewManager(private val context: ReactApplicationContext) : Simple private fun setScalingMode(view: RNPlayerView, scalingMode: String) { Handler(Looper.getMainLooper()).post { view.playerView?.scalingMode = ScalingMode.valueOf(scalingMode) - } } } From ae73e5c8a4c6333c456bdb318701b0df6781b760 Mon Sep 17 00:00:00 2001 From: Jonathan Machado <67608970+jonathanm-tkf@users.noreply.github.com> Date: Fri, 13 Oct 2023 08:20:39 -0300 Subject: [PATCH 6/8] Update src/components/PlayerView/index.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Roland Kákonyi --- src/components/PlayerView/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/PlayerView/index.tsx b/src/components/PlayerView/index.tsx index 95881a06..30bb8fd0 100644 --- a/src/components/PlayerView/index.tsx +++ b/src/components/PlayerView/index.tsx @@ -64,7 +64,8 @@ export interface PlayerViewProps extends BasePlayerViewProps, PlayerViewEvents { */ isFullscreenRequested?: Boolean; /** - * The `Scaling Mode` that is used by the `PlayerView` to control the scaling mode. + * A value defining how the video is displayed within the parent container's bounds. + * Possible values are defined in `ScalingMode`. */ scalingMode?: ScalingMode; } From 93ff4af0bd21a2c9ec9ec73408c17dbafbd37b0e Mon Sep 17 00:00:00 2001 From: Jonathan Machado <67608970+jonathanm-tkf@users.noreply.github.com> Date: Fri, 13 Oct 2023 08:21:06 -0300 Subject: [PATCH 7/8] Update src/components/PlayerView/index.tsx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Roland Kákonyi --- src/components/PlayerView/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PlayerView/index.tsx b/src/components/PlayerView/index.tsx index 30bb8fd0..6445a70c 100644 --- a/src/components/PlayerView/index.tsx +++ b/src/components/PlayerView/index.tsx @@ -106,7 +106,7 @@ export function PlayerView({ fullscreenHandler, customMessageHandler, isFullscreenRequested = false, - scalingMode = ScalingMode.Fit, + scalingMode, pictureInPictureConfig, ...props }: PlayerViewProps) { From efa4217abc95ef97a407dcbc3c96f292184345e8 Mon Sep 17 00:00:00 2001 From: Jonathan Machado <67608970+jonathanm-tkf@users.noreply.github.com> Date: Fri, 13 Oct 2023 08:21:21 -0300 Subject: [PATCH 8/8] Update ios/RNPlayerViewManager.swift MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Roland Kákonyi --- ios/RNPlayerViewManager.swift | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/ios/RNPlayerViewManager.swift b/ios/RNPlayerViewManager.swift index ecb82214..ee5888f7 100644 --- a/ios/RNPlayerViewManager.swift +++ b/ios/RNPlayerViewManager.swift @@ -111,12 +111,15 @@ class RNPlayerViewManager: RCTViewManager { guard let playerView = view.playerView else { return } - if scalingMode == "Zoom" { - playerView.scalingMode = ScalingMode.zoom - } else if scalingMode == "Stretch" { - playerView.scalingMode = ScalingMode.stretch - } else { - playerView.scalingMode = ScalingMode.fit + switch scalingMode { + case "Zoom": + playerView.scalingMode = .zoom + case "Stretch": + playerView.scalingMode = .stretch + case "Fit": + playerView.scalingMode = .fit + default: + break } } }