107-ui-controls

.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,14 +35,15 @@
           marginBottom: 0,
         },
         headerShown: false,
-      }}>
+      }}
+    >
       <Tabs.Screen
         name="index"
         options={{
           title: 'Home',
           tabBarButton,
           tabBarLabelStyle: textStyles.default,
           tabBarIcon: ({color, focused}) => (
             <TabBarIcon
               name={focused ? 'home' : 'home-outline'}
               color={color}
@@ -56,7 +57,7 @@
           title: 'Explore',
           tabBarButton,
           tabBarLabelStyle: textStyles.default,
           tabBarIcon: ({color, focused}) => (
             <TabBarIcon
               name={focused ? 'code-slash' : 'code-slash-outline'}
               color={color}
@@ -70,7 +71,7 @@
           title: 'TV event demo',
           tabBarButton,
           tabBarLabelStyle: textStyles.default,
           tabBarIcon: ({color, focused}) => (
             <TabBarIcon
               name={focused ? 'code-slash' : 'code-slash-outline'}
               color={color}

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

@@ -20,7 +20,8 @@
           name="code-slash"
           style={styles.headerImage}
         />
-      }>
+      }
+    >
       <ThemedView style={styles.titleContainer}>
         <ThemedText type="title">Explore</ThemedText>
       </ThemedView>
@@ -64,7 +65,7 @@
         </ThemedText>
         <Image
           source={require('@/assets/images/react-logo.png')}
           style={{alignSelf: 'center'}}
         />
         <ExternalLink href="https://reactnative.dev/docs/images">
           <ThemedText type="link">Learn more</ThemedText>
@@ -74,7 +75,7 @@
         <ThemedText>
           Open <ThemedText type="defaultSemiBold">app/_layout.tsx</ThemedText>{' '}
           to see how to load{' '}
           <ThemedText style={{fontFamily: 'SpaceMono'}}>
             custom fonts such as this one.
           </ThemedText>
         </ThemedText>

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

@@ -17,8 +17,9 @@
           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>
       <ThemedView style={styles.titleContainer}>

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

@@ -9,11 +9,12 @@
   return (
     <Pressable
       onPress={() =>
         Linking.openURL(href).catch((reason) => alert(`${reason}`))
       }
       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>