From 40b71e09a994ab7aa7914b4af7545e5079bd80c7 Mon Sep 17 00:00:00 2001 From: mostafahasani Date: Thu, 3 Oct 2024 20:43:06 +0330 Subject: [PATCH 1/6] feat(android): add setting button --- .../brentvatne/common/api/ControlsConfig.kt | 3 +- .../exoplayer/ReactExoplayerView.java | 34 ++++++++++++++++++- .../layout/exo_legacy_player_control_view.xml | 7 ++++ src/specs/VideoNativeComponent.ts | 1 + src/types/video.ts | 1 + 5 files changed, 44 insertions(+), 2 deletions(-) diff --git a/android/src/main/java/com/brentvatne/common/api/ControlsConfig.kt b/android/src/main/java/com/brentvatne/common/api/ControlsConfig.kt index ed231076d1..d922ba48f2 100644 --- a/android/src/main/java/com/brentvatne/common/api/ControlsConfig.kt +++ b/android/src/main/java/com/brentvatne/common/api/ControlsConfig.kt @@ -6,7 +6,6 @@ import com.facebook.react.bridge.ReadableMap class ControlsConfig { var hideSeekBar: Boolean = false var hideDuration: Boolean = false - var hidePosition: Boolean = false var hidePlayPause: Boolean = false var hideForward: Boolean = false @@ -16,6 +15,7 @@ class ControlsConfig { var hideFullscreen: Boolean = false var hideNavigationBarOnFullScreenMode: Boolean = true var hideNotificationBarOnFullScreenMode: Boolean = true + var hideSettingButton: Boolean = false var seekIncrementMS: Int = 10000 @@ -37,6 +37,7 @@ class ControlsConfig { config.seekIncrementMS = ReactBridgeUtils.safeGetInt(src, "seekIncrementMS", 10000) config.hideNavigationBarOnFullScreenMode = ReactBridgeUtils.safeGetBool(src, "hideNavigationBarOnFullScreenMode", true) config.hideNotificationBarOnFullScreenMode = ReactBridgeUtils.safeGetBool(src, "hideNotificationBarOnFullScreenMode", true) + config.hideSettingButton = ReactBridgeUtils.safeGetBool(src, "hideSettingButton", false) } return config } diff --git a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java index 46ec5ed252..2e1fbf2f9a 100644 --- a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java +++ b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java @@ -10,6 +10,7 @@ import android.annotation.SuppressLint; import android.app.Activity; import android.app.ActivityManager; +import android.app.AlertDialog; import android.content.ComponentName; import android.content.Context; import android.content.Intent; @@ -26,7 +27,6 @@ import android.view.accessibility.CaptioningManager; import android.widget.FrameLayout; import android.widget.ImageButton; -import android.widget.LinearLayout; import android.widget.TextView; import androidx.activity.OnBackPressedCallback; @@ -463,6 +463,10 @@ public void onVisibilityChange(int visibility) { setPausedModifier(true) ); + //Handling the settingButton click event + final ImageButton settingButton = playerControlView.findViewById(R.id.exo_settings); + settingButton.setOnClickListener(v -> openSettings()); + //Handling the fullScreenButton click event final ImageButton fullScreenButton = playerControlView.findViewById(R.id.exo_fullscreen); fullScreenButton.setOnClickListener(v -> setFullscreen(!isFullscreen)); @@ -496,6 +500,34 @@ public void onPlayWhenReadyChanged(boolean playWhenReady, int reason) { }; player.addListener(eventListener); } + private void openSettings() { + AlertDialog.Builder builder = new AlertDialog.Builder(themedReactContext); + builder.setTitle("Settings"); + String[] settingsOptions = {"Playback Speed"}; + builder.setItems(settingsOptions, (dialog, which) -> { + if (which == 0) { + showPlaybackSpeedOptions(); + } + }); + builder.show(); + } + + private void showPlaybackSpeedOptions() { + String[] speedOptions = {"0.5x", "1.0x", "1.5x", "2.0x"}; + AlertDialog.Builder builder = new AlertDialog.Builder(themedReactContext); + builder.setTitle("Select Playback Speed"); + + builder.setItems(speedOptions, (dialog, which) -> { + float speed = switch (which) { + case 0 -> 0.5f; + case 2 -> 1.5f; + case 3 -> 2.0f; + default -> 1.0f; + }; + player.setPlaybackParameters(new PlaybackParameters(speed)); + }); + builder.show(); + } /** * Adding Player control to the frame layout diff --git a/android/src/main/res/layout/exo_legacy_player_control_view.xml b/android/src/main/res/layout/exo_legacy_player_control_view.xml index 50ef45b269..e43a2a2600 100644 --- a/android/src/main/res/layout/exo_legacy_player_control_view.xml +++ b/android/src/main/res/layout/exo_legacy_player_control_view.xml @@ -70,6 +70,13 @@ android:includeFontPadding="false" android:textColor="@color/silver_gray"/> + + ; hideNavigationBarOnFullScreenMode?: WithDefault; hideNotificationBarOnFullScreenMode?: WithDefault; + hideSettingButton?: WithDefault; seekIncrementMS?: Int32; }>; diff --git a/src/types/video.ts b/src/types/video.ts index e9fe31913a..e6447c8bbc 100644 --- a/src/types/video.ts +++ b/src/types/video.ts @@ -260,6 +260,7 @@ export type ControlsStyles = { hideFullscreen?: boolean; hideNavigationBarOnFullScreenMode?: boolean; hideNotificationBarOnFullScreenMode?: boolean; + hideSettingButton?: boolean; seekIncrementMS?: number; }; From c35eb5408e7250588c96d4dc28fe37aadd3e5b2c Mon Sep 17 00:00:00 2001 From: mostafahasani Date: Thu, 3 Oct 2024 20:47:34 +0330 Subject: [PATCH 2/6] chore: handle visibility setting button --- .../main/java/com/brentvatne/exoplayer/ReactExoplayerView.java | 2 ++ android/src/main/res/layout/exo_legacy_player_control_view.xml | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java index abe7375af5..9293a1e073 100644 --- a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java +++ b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java @@ -27,6 +27,7 @@ import android.view.accessibility.CaptioningManager; import android.widget.FrameLayout; import android.widget.ImageButton; +import android.widget.LinearLayout; import android.widget.TextView; import androidx.activity.OnBackPressedCallback; @@ -567,6 +568,7 @@ private void refreshControlsStyles() { updateButtonVisibility(controlsConfig.getHideRewind(), R.id.exo_rew); updateButtonVisibility(controlsConfig.getHideNext(), R.id.exo_next); updateButtonVisibility(controlsConfig.getHidePrevious(), R.id.exo_prev); + updateButtonVisibility(controlsConfig.getHideSettingButton(), R.id.exo_settings); updateViewVisibility(playerControlView.findViewById(R.id.exo_fullscreen), controlsConfig.getHideFullscreen(), GONE); updateViewVisibility(playerControlView.findViewById(R.id.exo_position), controlsConfig.getHidePosition(), GONE); updateViewVisibility(playerControlView.findViewById(R.id.exo_progress), controlsConfig.getHideSeekBar(), INVISIBLE); diff --git a/android/src/main/res/layout/exo_legacy_player_control_view.xml b/android/src/main/res/layout/exo_legacy_player_control_view.xml index d9a75c7507..61b8473341 100644 --- a/android/src/main/res/layout/exo_legacy_player_control_view.xml +++ b/android/src/main/res/layout/exo_legacy_player_control_view.xml @@ -102,9 +102,9 @@ android:textColor="@color/silver_gray"/> From b126f3f26e00de6cb8c960279780b94500ec113b Mon Sep 17 00:00:00 2001 From: mostafahasani Date: Thu, 3 Oct 2024 21:36:52 +0330 Subject: [PATCH 3/6] chore: update the document --- docs/pages/component/props.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/pages/component/props.mdx b/docs/pages/component/props.mdx index ebd862f2ed..227544adcc 100644 --- a/docs/pages/component/props.mdx +++ b/docs/pages/component/props.mdx @@ -157,6 +157,7 @@ Adjust the control styles. This prop is need only if `controls={true}` and is an | hideDuration | boolean | The default value is `false`, allowing you to hide the duration. | | hideNavigationBarOnFullScreenMode | boolean | The default value is `true`, allowing you to hide the navigation bar on full-screen mode. | | hideNotificationBarOnFullScreenMode | boolean | The default value is `true`, allowing you to hide the notification bar on full-screen mode. | +| hideSettingButton | boolean | The default value is `false`, allowing you to hide the setting button. | | seekIncrementMS | number | The default value is `10000`. You can change the value to increment forward and rewind. | | liveLabel | string | Allowing you to set a label for live video. | From 3ff15f68673e5f492abcb0fa6e9e51b1f8906b8e Mon Sep 17 00:00:00 2001 From: mostafahasani Date: Fri, 4 Oct 2024 13:24:06 +0330 Subject: [PATCH 4/6] chore: display the selected item for speed --- .../java/com/brentvatne/exoplayer/ReactExoplayerView.java | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java index 9293a1e073..c7a66872d6 100644 --- a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java +++ b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java @@ -100,7 +100,6 @@ import androidx.media3.extractor.metadata.id3.Id3Frame; import androidx.media3.extractor.metadata.id3.TextInformationFrame; import androidx.media3.session.MediaSessionService; -import androidx.media3.ui.DefaultTimeBar; import androidx.media3.ui.LegacyPlayerControlView; import com.brentvatne.common.api.BufferConfig; @@ -259,6 +258,7 @@ public class ReactExoplayerView extends FrameLayout implements private long lastDuration = -1; private boolean viewHasDropped = false; + private int selectedSpeedIndex = 1; // Default is 1.0x private final String instanceId = String.valueOf(UUID.randomUUID()); @@ -518,7 +518,8 @@ private void showPlaybackSpeedOptions() { AlertDialog.Builder builder = new AlertDialog.Builder(themedReactContext); builder.setTitle("Select Playback Speed"); - builder.setItems(speedOptions, (dialog, which) -> { + builder.setSingleChoiceItems(speedOptions, selectedSpeedIndex, (dialog, which) -> { + selectedSpeedIndex = which; float speed = switch (which) { case 0 -> 0.5f; case 2 -> 1.5f; From 9976010d32b65297cad958861e89aa38962e136f Mon Sep 17 00:00:00 2001 From: mostafahasani Date: Fri, 4 Oct 2024 18:27:52 +0330 Subject: [PATCH 5/6] chore: update hidden logic for the setting button --- .../main/java/com/brentvatne/exoplayer/ReactExoplayerView.java | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java index c7a66872d6..b054a242b7 100644 --- a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java +++ b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java @@ -569,11 +569,11 @@ private void refreshControlsStyles() { updateButtonVisibility(controlsConfig.getHideRewind(), R.id.exo_rew); updateButtonVisibility(controlsConfig.getHideNext(), R.id.exo_next); updateButtonVisibility(controlsConfig.getHidePrevious(), R.id.exo_prev); - updateButtonVisibility(controlsConfig.getHideSettingButton(), R.id.exo_settings); updateViewVisibility(playerControlView.findViewById(R.id.exo_fullscreen), controlsConfig.getHideFullscreen(), GONE); updateViewVisibility(playerControlView.findViewById(R.id.exo_position), controlsConfig.getHidePosition(), GONE); updateViewVisibility(playerControlView.findViewById(R.id.exo_progress), controlsConfig.getHideSeekBar(), INVISIBLE); updateViewVisibility(playerControlView.findViewById(R.id.exo_duration), controlsConfig.getHideDuration(), GONE); + updateViewVisibility(playerControlView.findViewById(R.id.exo_settings), controlsConfig.getHideSettingButton(), GONE ); } private void updateLiveContent() { From 7568cb941f6953ea5d783c69e6677bdc197d15a0 Mon Sep 17 00:00:00 2001 From: mostafahasani Date: Sat, 5 Oct 2024 19:46:26 +0330 Subject: [PATCH 6/6] fix: PR feedback --- .../main/java/com/brentvatne/common/api/ControlsConfig.kt | 4 ++-- .../java/com/brentvatne/exoplayer/ReactExoplayerView.java | 8 ++++---- android/src/main/res/values/strings.xml | 6 ++++++ docs/pages/component/props.mdx | 3 ++- src/specs/VideoNativeComponent.ts | 2 +- 5 files changed, 15 insertions(+), 8 deletions(-) diff --git a/android/src/main/java/com/brentvatne/common/api/ControlsConfig.kt b/android/src/main/java/com/brentvatne/common/api/ControlsConfig.kt index 2e84de6672..8ea700141f 100644 --- a/android/src/main/java/com/brentvatne/common/api/ControlsConfig.kt +++ b/android/src/main/java/com/brentvatne/common/api/ControlsConfig.kt @@ -16,7 +16,7 @@ class ControlsConfig { var hideNavigationBarOnFullScreenMode: Boolean = true var hideNotificationBarOnFullScreenMode: Boolean = true var liveLabel: String? = null - var hideSettingButton: Boolean = false + var hideSettingButton: Boolean = true var seekIncrementMS: Int = 10000 @@ -39,7 +39,7 @@ class ControlsConfig { config.hideNavigationBarOnFullScreenMode = ReactBridgeUtils.safeGetBool(controlsConfig, "hideNavigationBarOnFullScreenMode", true) config.hideNotificationBarOnFullScreenMode = ReactBridgeUtils.safeGetBool(controlsConfig, "hideNotificationBarOnFullScreenMode", true) config.liveLabel = ReactBridgeUtils.safeGetString(controlsConfig, "liveLabel", null) - config.hideSettingButton = ReactBridgeUtils.safeGetBool(controlsConfig, "hideSettingButton", false) + config.hideSettingButton = ReactBridgeUtils.safeGetBool(controlsConfig, "hideSettingButton", true) } return config } diff --git a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java index b054a242b7..aec2d692a6 100644 --- a/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java +++ b/android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java @@ -503,8 +503,8 @@ public void onPlayWhenReadyChanged(boolean playWhenReady, int reason) { } private void openSettings() { AlertDialog.Builder builder = new AlertDialog.Builder(themedReactContext); - builder.setTitle("Settings"); - String[] settingsOptions = {"Playback Speed"}; + builder.setTitle(R.string.settings); + String[] settingsOptions = {themedReactContext.getString(R.string.playback_speed)}; builder.setItems(settingsOptions, (dialog, which) -> { if (which == 0) { showPlaybackSpeedOptions(); @@ -516,7 +516,7 @@ private void openSettings() { private void showPlaybackSpeedOptions() { String[] speedOptions = {"0.5x", "1.0x", "1.5x", "2.0x"}; AlertDialog.Builder builder = new AlertDialog.Builder(themedReactContext); - builder.setTitle("Select Playback Speed"); + builder.setTitle(R.string.select_playback_speed); builder.setSingleChoiceItems(speedOptions, selectedSpeedIndex, (dialog, which) -> { selectedSpeedIndex = which; @@ -526,7 +526,7 @@ private void showPlaybackSpeedOptions() { case 3 -> 2.0f; default -> 1.0f; }; - player.setPlaybackParameters(new PlaybackParameters(speed)); + setRateModifier(speed); }); builder.show(); } diff --git a/android/src/main/res/values/strings.xml b/android/src/main/res/values/strings.xml index 1f037779dd..a4c134f088 100644 --- a/android/src/main/res/values/strings.xml +++ b/android/src/main/res/values/strings.xml @@ -16,4 +16,10 @@ This device does not support the required DRM scheme An unknown DRM error occurred + + Settings + + Playback Speed + + Select Playback Speed diff --git a/docs/pages/component/props.mdx b/docs/pages/component/props.mdx index 227544adcc..ec721a5899 100644 --- a/docs/pages/component/props.mdx +++ b/docs/pages/component/props.mdx @@ -157,7 +157,7 @@ Adjust the control styles. This prop is need only if `controls={true}` and is an | hideDuration | boolean | The default value is `false`, allowing you to hide the duration. | | hideNavigationBarOnFullScreenMode | boolean | The default value is `true`, allowing you to hide the navigation bar on full-screen mode. | | hideNotificationBarOnFullScreenMode | boolean | The default value is `true`, allowing you to hide the notification bar on full-screen mode. | -| hideSettingButton | boolean | The default value is `false`, allowing you to hide the setting button. | +| hideSettingButton | boolean | The default value is `true`, allowing you to hide the setting button. | | seekIncrementMS | number | The default value is `10000`. You can change the value to increment forward and rewind. | | liveLabel | string | Allowing you to set a label for live video. | @@ -176,6 +176,7 @@ controlsStyles={{ hideDuration: false, hideNavigationBarOnFullScreenMode: true, hideNotificationBarOnFullScreenMode: true, + hideSettingButton: true, seekIncrementMS: 10000, liveLabel: "LIVE" }} diff --git a/src/specs/VideoNativeComponent.ts b/src/specs/VideoNativeComponent.ts index e2e1589a7a..800f05d2eb 100644 --- a/src/specs/VideoNativeComponent.ts +++ b/src/specs/VideoNativeComponent.ts @@ -308,7 +308,7 @@ type ControlsStyles = Readonly<{ hideDuration?: WithDefault; hideNavigationBarOnFullScreenMode?: WithDefault; hideNotificationBarOnFullScreenMode?: WithDefault; - hideSettingButton?: WithDefault; + hideSettingButton?: WithDefault; seekIncrementMS?: Int32; liveLabel?: string; }>;