107-ui-controls (#116)

* 107-ui-controls 
* prettier improvements

.prettierrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   bracketSpacing: false,
-  bracketSameLine: true,
+  bracketSameLine: false,
   singleQuote: true,
   trailingComma: 'all',
 };

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. 
 <br>
 
 ## 🏆 Sponsors

examples/MyTVProject/app/(tabs)/_layout.tsx

@@ -35,7 +35,8 @@ export default function TabLayout() {
           marginBottom: 0,
         },
         headerShown: false,
-      }}>
+      }}
+    >
       <Tabs.Screen
         name="index"
         options={{

examples/MyTVProject/app/(tabs)/explore.tsx

@@ -20,7 +20,8 @@ export default function ExploreScreen() {
           name="code-slash"
           style={styles.headerImage}
         />
-      }>
+      }
+    >
       <ThemedView style={styles.titleContainer}>
         <ThemedText type="title">Explore</ThemedText>
       </ThemedView>

examples/MyTVProject/app/(tabs)/index.tsx

@@ -17,7 +17,8 @@ export default function HomeScreen() {
           source={require('@/assets/images/partial-react-logo.png')}
           style={styles.reactLogo}
         />
-      }>
+      }
+    >
       <View style={{height: 300}}>
         <VideoPlayer source={{uri: 'https://vjs.zencdn.net/v/oceans.mp4'}} />
       </View>

examples/MyTVProject/app/(tabs)/tv_focus.tsx

@@ -20,7 +20,8 @@ export default function FocusDemoScreen() {
           name="tv-outline"
           style={styles.headerImage}
         />
-      }>
+      }
+    >
       <ThemedView style={styles.titleContainer}>
         <ThemedText type="title">TV event handling demo</ThemedText>
       </ThemedView>

examples/MyTVProject/components/Collapsible.tsx

@@ -18,7 +18,8 @@ export function Collapsible({
       <TouchableOpacity
         style={styles.heading}
         onPress={() => setIsOpen((value) => !value)}
-        activeOpacity={0.6}>
+        activeOpacity={0.6}
+      >
         <Ionicons
           name={isOpen ? 'chevron-down' : 'chevron-forward-outline'}
           size={18}

examples/MyTVProject/components/EventHandlingDemo.tsx

@@ -104,7 +104,8 @@ const PressableButton = (props: {
       }
       style={({pressed, focused}) =>
         pressed || focused ? styles.pressableFocused : styles.pressable
-      }>
+      }
+    >
       {({focused}) => {
         return (
           <ThemedText style={styles.pressableText}>
@@ -135,7 +136,8 @@ const TouchableOpacityButton = (props: {
             event.eventKeyAction === 0 ? 'start' : 'end'
           }`,
         )
-      }>
+      }
+    >
       <Text style={styles.pressableText}>{props.title}</Text>
     </TouchableOpacity>
   );
@@ -161,7 +163,8 @@ const TouchableHighlightButton = (props: {
             event.eventKeyAction === 0 ? 'start' : 'end'
           }`,
         )
-      }>
+      }
+    >
       <Text style={styles.pressableText}>{props.title}</Text>
     </TouchableHighlight>
   );
@@ -185,7 +188,8 @@ const TouchableNativeFeedbackButton = (props: {
             event.eventKeyAction === 0 ? 'start' : 'end'
           }`,
         )
-      }>
+      }
+    >
       <View style={styles.pressable}>
         <Text style={styles.pressableText}>{props.title}</Text>
       </View>

examples/MyTVProject/components/ExternalLink.tv.tsx

@@ -13,7 +13,8 @@ export function ExternalLink({href, ...rest}: Props) {
       }
       style={({pressed, focused}) => ({
         opacity: pressed || focused ? 0.6 : 1.0,
-      })}>
+      })}
+    >
       {rest.children}
     </Pressable>
   );

examples/MyTVProject/components/ParallaxScrollView.tsx

@@ -57,7 +57,8 @@ export default function ParallaxScrollView({
             styles.header,
             {backgroundColor: headerBackgroundColor[colorScheme]},
             headerAnimatedStyle,
-          ]}>
+          ]}
+        >
           {headerImage}
         </Animated.View>
         <ThemedView style={styles.content}>{children}</ThemedView>

packages/media-console/src/OSSupport/PlatformSupport.tsx

@@ -39,7 +39,8 @@ export const PlatformSupport = ({
     <TouchableWithoutFeedback
       testID={testID}
       onPress={onScreenTouch}
-      style={[_styles.player.container, containerStyles]}>
+      style={[_styles.player.container, containerStyles]}
+    >
       {children}
     </TouchableWithoutFeedback>
   );

packages/media-console/src/VideoPlayer.tsx

@@ -400,7 +400,8 @@ const AnimatedVideoPlayer = (
       showControls={showControls}
       containerStyles={styles.containerStyle}
       onScreenTouch={events.onScreenTouch}
-      testID={testID}>
+      testID={testID}
+    >
       <View style={[_styles.player.container, styles.containerStyle]}>
         <Video
           {...props}

packages/media-console/src/components/Back/Back.tsx

@@ -10,7 +10,7 @@ interface BackProps {
 
 export const Back = ({onBack, showControls}: BackProps) => {
   return (
-    <Control callback={onBack} disabled={!showControls}>
+    <Control onPress={onBack} disabled={!showControls}>
       <Image source={require('../../assets/img/back.png')} />
     </Control>
   );

packages/media-console/src/components/BottomControls.tsx

@@ -66,7 +66,8 @@ export const BottomControls = ({
     <Timer
       resetControlTimeout={resetControlTimeout}
       toggleTimer={toggleTimer}
-      showControls={showControls}>
+      showControls={showControls}
+    >
       {calculateTime({
         showDuration,
         showHours,
@@ -106,11 +107,13 @@ export const BottomControls = ({
         _styles.bottom,
         animations.controlsOpacity,
         animations.bottomControl,
-      ]}>
+      ]}
+    >
       <ImageBackground
         source={require('../assets/img/bottom-vignette.png')}
         style={[styles.column]}
-        imageStyle={[styles.vignette]}>
+        imageStyle={[styles.vignette]}
+      >
         <SafeAreaView style={[styles.row, _styles.bottomControlGroup]}>
           {timerControl}
           <Title title={title} />

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<TouchableHighlight>;
-  disabled?: boolean;
-  style?: any;
   resetControlTimeout?: () => void;
+  style?: StyleProp<ViewStyle>;
 }
 
 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 (
-    <TouchableHighlight
-      onFocus={setFocusedState}
-      onBlur={cancelFocusedState}
-      disabled={disabled}
+    <Pressable
       ref={controlRef}
-      underlayColor="transparent"
-      activeOpacity={1}
-      onPress={() => {
-        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}
-    </TouchableHighlight>
+    </Pressable>
   );
 };

packages/media-console/src/components/Fullscreen.tsx

@@ -20,10 +20,11 @@ export const Fullscreen = ({
     : require('../assets/img/expand.png');
   return (
     <Control
-      callback={toggleFullscreen}
+      onPress={toggleFullscreen}
       resetControlTimeout={resetControlTimeout}
       style={styles.fullscreen}
-      disabled={!showControls}>
+      disabled={!showControls}
+    >
       <Image source={source} />
     </Control>
   );

packages/media-console/src/components/PlayPause/PlayPause.tsx

@@ -1,5 +1,5 @@
 import React, {createRef} from 'react';
-import {Image, Platform, TouchableHighlight} from 'react-native';
+import {View, Image, Platform, TouchableHighlight} from 'react-native';
 import {Control} from '../Control';
 import {NullControl} from '../NullControl';
 import type {VideoAnimations} from '../../types';
@@ -48,34 +48,41 @@ export const PlayPause = ({
   return (
     <AnimatedView
       pointerEvents={'box-none'}
-      style={[styles.container, animatedStyles, animations.controlsOpacity]}>
+      style={[styles.container, animatedStyles, animations.controlsOpacity]}
+    >
       {!disableSeekButtons ? (
         <Control
           disabled={!showControls}
-          callback={onPressRewind}
-          resetControlTimeout={resetControlTimeout}>
-          <Image source={rewind} resizeMode={'contain'} style={styles.rewind} />
+          onPress={onPressRewind}
+          resetControlTimeout={resetControlTimeout}
+        >
+          <Image source={rewind} resizeMode={'contain'} />
         </Control>
       ) : null}
-      <Control
-        disabled={!showControls}
-        callback={togglePlayPause}
-        resetControlTimeout={resetControlTimeout}
-        style={styles.playContainer}
-        controlRef={playPauseRef}
-        {...(Platform.isTV ? {hasTVPreferredFocus: showControls} : {})}>
-        <Image source={source} resizeMode={'contain'} style={styles.play} />
-      </Control>
+
+      {/*
+       * Useless <View />, I know. But it fixes this bug:
+       * https://github.com/LunatiqueCoder/react-native-media-console/issues/107
+       */}
+      <View style={styles.playContainer}>
+        <Control
+          disabled={!showControls}
+          onPress={togglePlayPause}
+          resetControlTimeout={resetControlTimeout}
+          style={styles.play}
+          controlRef={playPauseRef}
+          {...(Platform.isTV ? {hasTVPreferredFocus: showControls} : {})}
+        >
+          <Image source={source} resizeMode={'contain'} />
+        </Control>
+      </View>
       {!disableSeekButtons ? (
         <Control
           disabled={!showControls}
-          callback={onPressForward}
-          resetControlTimeout={resetControlTimeout}>
-          <Image
-            source={forward}
-            resizeMode={'contain'}
-            style={styles.rewind}
-          />
+          onPress={onPressForward}
+          resetControlTimeout={resetControlTimeout}
+        >
+          <Image source={forward} resizeMode={'contain'} />
         </Control>
       ) : null}
     </AnimatedView>

packages/media-console/src/components/PlayPause/styles.ts

@@ -14,8 +14,8 @@ export const styles = StyleSheet.create({
   },
   playContainer: {
     width: '10%',
+  },
+  play: {
     alignItems: 'center',
   },
-  play: {},
-  rewind: {},
 });

packages/media-console/src/components/Seekbar/Seekbar.tsx

@@ -22,7 +22,8 @@ export const Seekbar = ({
       <View
         style={styles.track}
         onLayout={(event) => setSeekerWidth(event.nativeEvent.layout.width)}
-        pointerEvents={'none'}>
+        pointerEvents={'none'}
+      >
         <View
           style={[
             styles.fill,
@@ -36,7 +37,8 @@ export const Seekbar = ({
       </View>
       <View
         style={[styles.handle, {left: seekerPosition}]}
-        pointerEvents={'none'}>
+        pointerEvents={'none'}
+      >
         <View
           style={[styles.circle, {backgroundColor: seekColor || '#FFF'}]}
           pointerEvents={'none'}

packages/media-console/src/components/Timer/Timer.tsx

@@ -18,10 +18,11 @@ export const Timer = ({
 }: TimerProps) => {
   return (
     <Control
-      callback={toggleTimer}
+      onPress={toggleTimer}
       resetControlTimeout={resetControlTimeout}
       style={styles.timer}
-      disabled={!showControls}>
+      disabled={!showControls}
+    >
       <Text style={styles.timerText}>{children}</Text>
     </Control>
   );

packages/media-console/src/components/TopControls.tsx

@@ -64,7 +64,8 @@ export const TopControls = memo(
         <ImageBackground
           source={require('../assets/img/top-vignette.png')}
           style={[styles.column]}
-          imageStyle={[styles.vignette]}>
+          imageStyle={[styles.vignette]}
+        >
           <SafeAreaView style={_styles.topControlGroup}>
             {backControl}
             <View style={_styles.pullRight}>{volumeControl}</View>