chore(sample): additionnal sample cleanup (#4122)

* chore: move MultiValueControl & toggleControl to component
* fix(sample): fix import / export to avoid circular deps
* chore(sample): fix warning

examples/basic/src/components/MultiValueControl.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+  TextStyle,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {ResizeMode} from 'react-native-video';
+
+/*
+ * MultiValueControl displays a list clickable text view
+ */
+
+interface MultiValueControlType<T> {
+  // a list a string or number to be displayed
+  values: Array<T>;
+  // The selected value in values
+  selected?: T;
+  // callback to press onPress
+  onPress: (arg: T) => void;
+}
+
+export const MultiValueControl = <T extends number | string | ResizeMode>({
+  values,
+  selected,
+  onPress,
+}: MultiValueControlType<T>) => {
+  const selectedStyle: TextStyle = StyleSheet.flatten([
+    styles.option,
+    {fontWeight: 'bold'},
+  ]);
+
+  const unselectedStyle: TextStyle = StyleSheet.flatten([
+    styles.option,
+    {fontWeight: 'normal'},
+  ]);
+
+  return (
+    <View style={styles.container}>
+      {values.map(value => {
+        const _style = value === selected ? selectedStyle : unselectedStyle;
+        return (
+          <TouchableOpacity
+            key={value}
+            onPress={() => {
+              onPress?.(value);
+            }}>
+            <Text style={_style}>{value}</Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  option: {
+    alignSelf: 'center',
+    fontSize: 11,
+    color: 'white',
+    paddingLeft: 2,
+    paddingRight: 2,
+    lineHeight: 12,
+  },
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default MultiValueControl;

examples/basic/src/components/Overlay.tsx

@@ -7,9 +7,7 @@ import React, {
 } from 'react';
 import {View} from 'react-native';
 import styles from '../styles.tsx';
-import ToggleControl from '../ToggleControl.tsx';
 import {isAndroid, isIos, textTracksSelectionBy} from '../constants';
-import MultiValueControl from '../MultiValueControl.tsx';
 import {
   ResizeMode,
   VideoRef,
@@ -23,14 +21,15 @@ import {
   type VideoTrack,
   type AudioTrack,
 } from 'react-native-video';
-import {
-  toast,
-  Seeker,
-  AudioTrackSelector,
-  TextTrackSelector,
-  VideoTrackSelector,
-  TopControl,
-} from '../components';
+
+import {toast} from './Toast';
+import {Seeker} from './Seeker';
+import {AudioTrackSelector} from './AudioTracksSelector';
+import {VideoTrackSelector} from './VideoTracksSelector';
+import {TextTrackSelector} from './TextTracksSelector';
+import {TopControl} from './TopControl';
+import {ToggleControl} from './ToggleControl';
+import {MultiValueControl} from './MultiValueControl';
 
 type Props = {
   channelDown: () => void;

examples/basic/src/components/ToggleControl.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import {
+  StyleSheet,
+  Text,
+  TextStyle,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+/*
+ * ToggleControl displays a 2 states clickable text
+ */
+
+interface ToggleControlType {
+  // boolean indicating if text is selected state
+  isSelected?: boolean;
+  // value of text when selected
+  selectedText?: string;
+  // value of text when NOT selected
+  unselectedText?: string;
+  // default text if no only one text field is needed
+  text?: string;
+  // callback called when pressing the component
+  onPress: () => void;
+}
+
+export const ToggleControl = ({
+  isSelected,
+  selectedText,
+  unselectedText,
+  text,
+  onPress,
+}: ToggleControlType) => {
+  const selectedStyle: TextStyle = StyleSheet.flatten([
+    styles.controlOption,
+    {fontWeight: 'bold'},
+  ]);
+
+  const unselectedStyle: TextStyle = StyleSheet.flatten([
+    styles.controlOption,
+    {fontWeight: 'normal'},
+  ]);
+
+  const style = isSelected ? selectedStyle : unselectedStyle;
+  const _text = text ? text : isSelected ? selectedText : unselectedText;
+  return (
+    <View style={styles.resizeModeControl}>
+      <TouchableOpacity onPress={onPress}>
+        <Text style={style}>{_text}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  controlOption: {
+    alignSelf: 'center',
+    fontSize: 11,
+    color: 'white',
+    paddingLeft: 2,
+    paddingRight: 2,
+    lineHeight: 12,
+  },
+  resizeModeControl: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default ToggleControl;

examples/basic/src/components/index.ts

@@ -7,3 +7,5 @@ export * from './TextTracksSelector';
 export * from './Overlay';
 export * from './TopControl';
 export * from './Toast';
+export * from './ToggleControl';
+export * from './MultiValueControl';