Skip to content

1104-flatlist-gesture-handling-enhancement #120

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LunatiqueCoder wants to merge 4 commits into
base: master
Choose a base branch
from
+74 −35
Open

1104-flatlist-gesture-handling-enhancement #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8d5a744
1104-flatlist-gesture-handling-enhancement
LunatiqueCoder Aug 10, 2024
c934f4c
1104-flatlist-gesture-handling-enhancement - small improvements
LunatiqueCoder Aug 12, 2024
75aafc8
1104-flatlist-gesture-handling-enhancement - small improvements
LunatiqueCoder Aug 13, 2024
8e10a77
update readme
LunatiqueCoder Nov 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 21 additions & 21 deletions packages/media-console/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,27 +93,27 @@ the `<VideoPlayer />` and it will pass them through to the `<Video />` component

In addition, the `<VideoPlayer />` also takes these props:

| Prop | Type | Default | Description |
|------------------------------|-----------------------------------------------|------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| alwaysShowControls | Boolean | false | Always show controls. |
| controlAnimationTiming | Integer | 500 | The amount of time (in milliseconds) to animate the controls in and out. |
| controlTimeoutDelay | Integer | 15000 | Hide controls after X amount of time in milliseconds | |
| doubleTapTime | Integer | 130 | Tapping twice within this amount of time in milliseconds is considered a double tap. Single taps will not be actioned until this time has expired. |
| isFullscreen | Boolean | false | The VideoPlayer fullscreen state |
| navigator | Navigator | null | When using the default React Native navigator and do not override the `onBack` function, you'll need to pass the navigator to the VideoPlayer for it to function |
| rewindTime | Integer | 15 | Number of seconds to rewind or forward. |
| seekColor | String(#HEX) | '#FFF' | Fill/handle colour of the seekbar |
| showDuration | Boolean | false | Show duration of the media. |
| showOnStart | Boolean | false | Show or hide the controls on first render |
| showOnEnd | Boolean | false | Show or hide the controls on end of video |
| showTimeRemaining | Boolean | false | If true, show the time remaing, else show the current time in the Player. |
| showHours | Boolean | false | If true, convert time to hours in the Player |
| tapAnywhereToPause | Boolean | false | If true, single tapping anywhere on the video (other than a control) toggles between playing and paused. |
| toggleResizeModeOnFullscreen | Boolean | false | If true, clicking the fullscreen button will toggle the `<Video />` component between cover/contain, set to false if you want to customize fullscreen behaviour |
| containerStyle | ViewStyle | | StyleSheet passed to the container of the <Video /> component |
| videoStyle | ViewStyle | | StyleSheet passed to the <Video /> component |
| videoRef | Video | undefined | Pass ref to the `<Video/>` component |
| pan | `{ horizontal: Boolean, inverted: Boolean } ` | `{ horizontal: true, inverted: false } ` | An object allowing fine grained control over the `PanResponder` controlling the volume and seek. Use this if you need to apply rotation transformations to the player. |
| Prop | Type | Default | Description |
|------------------------------|---------------------------------------------------------------|------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| alwaysShowControls | Boolean | false | Always show controls. |
| controlAnimationTiming | Integer | 500 | The amount of time (in milliseconds) to animate the controls in and out. |
| controlTimeoutDelay | Integer | 15000 | Hide controls after X amount of time in milliseconds | |
| doubleTapTime | Integer | 130 | Tapping twice within this amount of time in milliseconds is considered a double tap. Single taps will not be actioned until this time has expired. |
| isFullscreen | Boolean | false | The VideoPlayer fullscreen state |
| navigator | Navigator | null | When using the default React Native navigator and do not override the `onBack` function, you'll need to pass the navigator to the VideoPlayer for it to function |
| rewindTime | Integer | 15 | Number of seconds to rewind or forward. |
| seekColor | String(#HEX) | '#FFF' | Fill/handle colour of the seekbar |
| showDuration | Boolean | false | Show duration of the media. |
| showOnStart | Boolean | false | Show or hide the controls on first render |
| showOnEnd | Boolean | false | Show or hide the controls on end of video |
| showTimeRemaining | Boolean | false | If true, show the time remaing, else show the current time in the Player. |
| showHours | Boolean | false | If true, convert time to hours in the Player |
| tapAnywhereToPause | Boolean | false | If true, single tapping anywhere on the video (other than a control) toggles between playing and paused. |
| toggleResizeModeOnFullscreen | Boolean | false | If true, clicking the fullscreen button will toggle the `<Video />` component between cover/contain, set to false if you want to customize fullscreen behaviour |
| containerStyle | ViewStyle | | StyleSheet passed to the container of the <Video /> component |
| videoStyle | ViewStyle | | StyleSheet passed to the <Video /> component |
| videoRef | Video | undefined | Pass ref to the `<Video/>` component |
| pan | `{ horizontal: Boolean, inverted: Boolean, parentList: {} } ` | `{ horizontal: true, inverted: false } ` | An object allowing fine grained control over the `PanResponder` controlling the volume and seek. Use this if you need to apply rotation transformations, or to use the player inside a FlatList/ScrollView. |

### Events

Expand Down
5 changes: 2 additions & 3 deletions packages/media-console/src/VideoPlayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ const AnimatedVideoPlayer = (
disableOverlay,
navigator,
rewindTime = 15,
pan: {horizontal: horizontalPan, inverted: invertedPan} = {},
pan,
testID,
} = props;

Expand Down Expand Up @@ -291,8 +291,7 @@ const AnimatedVideoPlayer = (
setSeeking,
setControlTimeout,
onEnd: events.onEnd,
horizontal: horizontalPan,
inverted: invertedPan,
pan,
});

useEffect(() => {
Expand Down
33 changes: 25 additions & 8 deletions packages/media-console/src/hooks/usePanResponders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import {Dispatch, SetStateAction, useEffect} from 'react';
import {PanResponder} from 'react-native';
import {VideoPlayerProps} from '../types';

interface PanRespondersProps {
interface PanRespondersProps extends Pick<VideoPlayerProps, 'pan'> {
duration: number;
seekerOffset: number;
volumeOffset: number;
Expand All @@ -16,8 +17,6 @@ interface PanRespondersProps {
setSeeking: Dispatch<SetStateAction<boolean>>;
setControlTimeout: () => void;
onEnd: () => void;
horizontal?: boolean;
inverted?: boolean;
}

export const usePanResponders = ({
Expand All @@ -35,14 +34,31 @@ export const usePanResponders = ({
setSeeking,
setControlTimeout,
onEnd,
horizontal = true,
inverted = false,
pan: {horizontal = true, inverted = false, parentList} = {},
}: PanRespondersProps) => {
const {ref, scrollEnabled = true} = parentList || {};

const enableParentScroll = () =>
ref?.current?.setNativeProps({scrollEnabled});

const disableParentScroll = () =>
ref?.current?.setNativeProps({scrollEnabled: false});

/**
* Options to make the video player work seamlessly within FlatLists or ScrollViews.
* @link https://github.com/LunatiqueCoder/react-native-media-console/issues/104
*/
const parentScrollPanOptions = {
onPanResponderEnd: enableParentScroll,
onPanResponderTerminationRequest: () => false, // https://stackoverflow.com/a/76875305/14056591
};

const volumePanResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onMoveShouldSetPanResponder: () => true,
onPanResponderGrant: () => {
clearControlTimeout();
disableParentScroll();
},
onPanResponderMove: (_evt, gestureState) => {
const diff = horizontal ? gestureState.dx : gestureState.dy;
Expand All @@ -52,6 +68,7 @@ export const usePanResponders = ({
onPanResponderRelease: () => {
setControlTimeout();
},
...parentScrollPanOptions,
});

const seekPanResponder = PanResponder.create({
Expand All @@ -62,6 +79,7 @@ export const usePanResponders = ({
clearControlTimeout();
const position = evt.nativeEvent.locationX;
setSeekerPosition(position);
disableParentScroll();
},
onPanResponderMove: (_evt, gestureState) => {
const diff = horizontal ? gestureState.dx : gestureState.dy;
Expand All @@ -74,14 +92,13 @@ export const usePanResponders = ({
const time = duration * percent;

if (time >= duration && !loading) {
if (typeof onEnd === 'function') {
onEnd();
}
onEnd?.();
}

setSeeking(false);
seek && seek(time);
},
...parentScrollPanOptions,
});

useEffect(() => {
Expand Down
29 changes: 26 additions & 3 deletions packages/media-console/src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
import type {RefObject} from 'react';
import type {ViewStyle, StyleProp, Animated} from 'react-native';
import {
ViewStyle,
StyleProp,
Animated,
FlatList,
ScrollView,
} from 'react-native';
import type Reanimated from 'react-native-reanimated';
import type {StyleProps} from 'react-native-reanimated';
import type {VideoRef, ReactVideoProps} from 'react-native-video';
Expand Down Expand Up @@ -245,7 +251,7 @@ export interface VideoPlayerProps extends ReactVideoProps {
rewindTime?: number;

/**
* Object allowing fine grained control of the pan responder
* Object allowing fine-grained control of the pan responder
*
* @default { horizontal: true, inverted: false }
*/
Expand All @@ -256,13 +262,30 @@ export interface VideoPlayerProps extends ReactVideoProps {
* @default true
*/
horizontal?: boolean;

/**
* Boolean representing if the player controls pan gesture should be inverted
*
* @default false
*/
inverted?: boolean;
/**
* Options to make the video player work seamlessly within FlatLists or ScrollViews.
*
* @link https://github.com/LunatiqueCoder/react-native-media-console/issues/104
*/
parentList?: {
/**
* Internally, `ref?.current?.setNativeProps({scrollEnabled: boolean});` is used in order
* to make the video player work seamlessly within FlatLists or ScrollViews:
* @link https://github.com/LunatiqueCoder/react-native-media-console/issues/104
*/
ref: RefObject<FlatList | ScrollView>;
/**
* Used to keep the state consistency when using `ref?.current?.setNativeProps({scrollEnabled: boolean});`.
* @see ref
*/
scrollEnabled?: boolean;
};
};
/**
* testID selector for testing
Expand Down
Loading