railbird/react-native-video
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(android): add settings button to control video playback speed (#4211)

Browse Source
This commit is contained in:
Seyed Mostafa Hasani 2024-10-05 20:04:25 +03:30 committed by GitHub
parent d81e6ea31e
commit d1883a7e00
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 55 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
android/src/main/java/com/brentvatne/common/api/ControlsConfig.kt
View File

@ -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
@ -17,6 +16,7 @@ class ControlsConfig {
var hideNavigationBarOnFullScreenMode: Boolean = true
var hideNotificationBarOnFullScreenMode: Boolean = true
var liveLabel: String? = null
var hideSettingButton: Boolean = true
var seekIncrementMS: Int = 10000
@ -39,6 +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", true)
}
return config
}

37
android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerView.java
View File

@ -10,6 +10,7 @@ import static androidx.media3.common.C.TIME_END_OF_SOURCE;
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;
@ -99,7 +100,6 @@ import androidx.media3.extractor.metadata.emsg.EventMessage;
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;
@ -258,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());
@ -463,6 +464,10 @@ public class ReactExoplayerView extends FrameLayout implements
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 +501,35 @@ public class ReactExoplayerView extends FrameLayout implements
};
player.addListener(eventListener);
}
private void openSettings() {
AlertDialog.Builder builder = new AlertDialog.Builder(themedReactContext);
builder.setTitle(R.string.settings);
String[] settingsOptions = {themedReactContext.getString(R.string.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(R.string.select_playback_speed);
builder.setSingleChoiceItems(speedOptions, selectedSpeedIndex, (dialog, which) -> {
selectedSpeedIndex = which;
float speed = switch (which) {
case 0 -> 0.5f;
case 2 -> 1.5f;
case 3 -> 2.0f;
default -> 1.0f;
};
setRateModifier(speed);
});
builder.show();
}
/**
* Adding Player control to the frame layout
@ -539,6 +573,7 @@ public class ReactExoplayerView extends FrameLayout implements
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() {

7
android/src/main/res/layout/exo_legacy_player_control_view.xml
View File

@ -101,6 +101,13 @@
android:includeFontPadding="false"
android:textColor="@color/silver_gray"/>
<ImageButton
android:id="@+id/exo_settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/ExoStyledControls.Button.Bottom.Settings"
/>
<ImageButton
android:id="@+id/exo_fullscreen"
style="@style/ExoMediaButton.FullScreen"

6
android/src/main/res/values/strings.xml
View File

@ -16,4 +16,10 @@
<string name="error_drm_unsupported_scheme">This device does not support the required DRM scheme</string>
<string name="error_drm_unknown">An unknown DRM error occurred</string>
<string name="settings">Settings</string>
<string name="playback_speed">Playback Speed</string>
<string name="select_playback_speed">Select Playback Speed</string>
</resources>

2
docs/pages/component/props.mdx
View File

@ -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 `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. |
@ -175,6 +176,7 @@ controlsStyles={{
hideDuration: false,
hideNavigationBarOnFullScreenMode: true,
hideNotificationBarOnFullScreenMode: true,
hideSettingButton: true,
seekIncrementMS: 10000,
liveLabel: "LIVE"
}}

1
src/specs/VideoNativeComponent.ts
View File

@ -308,6 +308,7 @@ type ControlsStyles = Readonly<{
hideDuration?: WithDefault<boolean, false>;
hideNavigationBarOnFullScreenMode?: WithDefault<boolean, true>;
hideNotificationBarOnFullScreenMode?: WithDefault<boolean, true>;
hideSettingButton?: WithDefault<boolean, true>;
seekIncrementMS?: Int32;
liveLabel?: string;
}>;

1
src/types/video.ts
View File

@ -260,6 +260,7 @@ export type ControlsStyles = {
hideFullscreen?: boolean;
hideNavigationBarOnFullScreenMode?: boolean;
hideNotificationBarOnFullScreenMode?: boolean;
hideSettingButton?: boolean;
seekIncrementMS?: number;
liveLabel?: string;
};