From 4a90c552b20f804443cdf9924167910190117358 Mon Sep 17 00:00:00 2001 From: Ovidiu Cristescu <55203625+LunatiqueCoder@users.noreply.github.com> Date: Fri, 9 Aug 2024 18:55:10 +0300 Subject: [PATCH 1/5] 107-ui-controls --- .prettierrc.js | 2 +- README.md | 1 + .../src/components/Back/Back.tsx | 2 +- .../media-console/src/components/Control.tsx | 56 ++++++++++--------- .../src/components/Fullscreen.tsx | 5 +- .../src/components/PlayPause/PlayPause.tsx | 18 +++--- .../src/components/Timer/Timer.tsx | 5 +- 7 files changed, 49 insertions(+), 40 deletions(-) diff --git a/.prettierrc.js b/.prettierrc.js index cde2f12..404b11b 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,6 +1,6 @@ module.exports = { bracketSpacing: false, - bracketSameLine: true, + bracketSameLine: false, singleQuote: true, trailingComma: 'all', }; diff --git a/README.md b/README.md index 98e837e..d55ed7f 100644 --- a/README.md +++ b/README.md @@ -35,6 +35,7 @@ This monorepo contains the `react-native-media-console` modules (`./packages/*`) Issues, pull request, and discussion are all welcome. See the [Contribution Guidelines](CONTRIBUTING.md) for details, and please reach out to [the author](https://github.com/LunatiqueCoder) if you would like to participate more significantly. +Active contributors are eligible to receive a license for all JetBrains Products that can be used for open source development.
## 🏆 Sponsors diff --git a/packages/media-console/src/components/Back/Back.tsx b/packages/media-console/src/components/Back/Back.tsx index ef51f8d..e08c0d1 100644 --- a/packages/media-console/src/components/Back/Back.tsx +++ b/packages/media-console/src/components/Back/Back.tsx @@ -10,7 +10,7 @@ interface BackProps { export const Back = ({onBack, showControls}: BackProps) => { return ( - + ); diff --git a/packages/media-console/src/components/Control.tsx b/packages/media-console/src/components/Control.tsx index 4b40ebe..2e6752c 100644 --- a/packages/media-console/src/components/Control.tsx +++ b/packages/media-console/src/components/Control.tsx @@ -1,45 +1,47 @@ -import React, {ReactNode, RefObject, useState} from 'react'; -import {TouchableHighlight, ViewProps} from 'react-native'; +import React, {ReactNode, RefObject} from 'react'; +import { + TouchableHighlight, + Pressable, + PressableProps, + ViewStyle, + StyleProp, +} from 'react-native'; import {styles} from './styles'; -interface ControlProps extends ViewProps { +const focusedStyle = {opacity: 1}; +const pressedStyle = {opacity: 0.25}; + +interface ControlProps extends PressableProps { children: ReactNode; - callback?: () => void; controlRef?: RefObject; - disabled?: boolean; - style?: any; resetControlTimeout?: () => void; + style?: StyleProp; } export const Control = ({ children, - callback, controlRef, - disabled, - style = {}, + onPress, + resetControlTimeout, + style, ...props }: ControlProps) => { - const [focused, setFocused] = useState(false); - - const setFocusedState = () => setFocused(true); - const cancelFocusedState = () => setFocused(false); - - const focusedStyle = focused ? {opacity: 1} : {}; - return ( - { - callback && callback(); + onPress={(evt) => { + onPress?.(evt); + resetControlTimeout?.(); }} - style={[styles.control, style, focused && focusedStyle]} - {...props}> + style={({focused, pressed}) => [ + styles.control, + style, + focused && focusedStyle, + pressed && pressedStyle, + ]} + {...props} + > {children} - + ); }; diff --git a/packages/media-console/src/components/Fullscreen.tsx b/packages/media-console/src/components/Fullscreen.tsx index ea7b88c..e6171d7 100644 --- a/packages/media-console/src/components/Fullscreen.tsx +++ b/packages/media-console/src/components/Fullscreen.tsx @@ -20,10 +20,11 @@ export const Fullscreen = ({ : require('../assets/img/expand.png'); return ( + disabled={!showControls} + > ); diff --git a/packages/media-console/src/components/PlayPause/PlayPause.tsx b/packages/media-console/src/components/PlayPause/PlayPause.tsx index 4b15477..2acb46c 100644 --- a/packages/media-console/src/components/PlayPause/PlayPause.tsx +++ b/packages/media-console/src/components/PlayPause/PlayPause.tsx @@ -48,29 +48,33 @@ export const PlayPause = ({ return ( + style={[styles.container, animatedStyles, animations.controlsOpacity]} + > {!disableSeekButtons ? ( + onPress={onPressRewind} + resetControlTimeout={resetControlTimeout} + > ) : null} + {...(Platform.isTV ? {hasTVPreferredFocus: showControls} : {})} + > {!disableSeekButtons ? ( + onPress={onPressForward} + resetControlTimeout={resetControlTimeout} + > { return ( + disabled={!showControls} + > {children} ); From 4c8552b2cb39271a46f12c804f9acef8f23604cb Mon Sep 17 00:00:00 2001 From: Ovidiu Cristescu <55203625+LunatiqueCoder@users.noreply.github.com> Date: Fri, 9 Aug 2024 19:19:54 +0300 Subject: [PATCH 2/5] 107-ui-controls - fix prettier issues --- packages/media-console/src/OSSupport/PlatformSupport.tsx | 3 ++- packages/media-console/src/VideoPlayer.tsx | 3 ++- packages/media-console/src/components/BottomControls.tsx | 9 ++++++--- .../media-console/src/components/Seekbar/Seekbar.tsx | 6 ++++-- packages/media-console/src/components/TopControls.tsx | 3 ++- packages/media-console/src/components/Volume/Volume.tsx | 3 ++- 6 files changed, 18 insertions(+), 9 deletions(-) diff --git a/packages/media-console/src/OSSupport/PlatformSupport.tsx b/packages/media-console/src/OSSupport/PlatformSupport.tsx index 443d83f..18bb8b2 100644 --- a/packages/media-console/src/OSSupport/PlatformSupport.tsx +++ b/packages/media-console/src/OSSupport/PlatformSupport.tsx @@ -39,7 +39,8 @@ export const PlatformSupport = ({ + style={[_styles.player.container, containerStyles]} + > {children} ); diff --git a/packages/media-console/src/VideoPlayer.tsx b/packages/media-console/src/VideoPlayer.tsx index e6e8f6b..9ee82de 100644 --- a/packages/media-console/src/VideoPlayer.tsx +++ b/packages/media-console/src/VideoPlayer.tsx @@ -400,7 +400,8 @@ const AnimatedVideoPlayer = ( showControls={showControls} containerStyles={styles.containerStyle} onScreenTouch={events.onScreenTouch} - testID={testID}> + testID={testID} + >