Add a timer that handles the time before stopping the video (#39)

* Update to react native 0.73.2 * Update dependencies * Add image * Add timer before stopping the video * Prettified Code! * Useless commit --------- Co-authored-by: JohanCDev <[email protected]>
NoLoSay · Jan 9, 2024 · 6fe1c7d · 6fe1c7d
1 parent 709bb48
commit 6fe1c7d
Show file tree

Hide file tree

Showing 14 changed files with 623 additions and 323 deletions.
diff --git a/README.md b/README.md
@@ -1,12 +1,12 @@
 # Welcome to NoLoSay 👋
 
 <p>
-  <img alt="Version" src="https://img.shields.io/badge/version-0.0.1-blue.svg?cacheSeconds=2592000" />
+  <img alt="Version" src="https://img.shields.io/badge/version-0.0.1-blue.svg?cacheSeconds=2592000"/>
   <a href="https://nolosay.github.io/documentation" target="_blank">
-    <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" />
+    <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg"/>
   </a>
   <a href="https://github.com/NoLoSay/NoLoApp/blob/main/LICENSE.md" target="_blank">
-    <img alt="License: Private" src="https://img.shields.io/badge/License-Private-yellow.svg" />
+    <img alt="License: Private" src="https://img.shields.io/badge/License-Private-yellow.svg"/>
   </a>
   <a href="https://github.com/NoLoSay/NoLoApp/actions/workflows/main_push.yml">
     <img alt="CI status" src="https://github.com/NoLoSay/NoLoApp/actions/workflows/main_push.yml/badge.svg">

diff --git a/android/app/src/main/java/com/nolosay/MainApplication.kt b/android/app/src/main/java/com/nolosay/MainApplication.kt
@@ -16,11 +16,11 @@ class MainApplication : Application(), ReactApplication {
 
   override val reactNativeHost: ReactNativeHost =
       object : DefaultReactNativeHost(this) {
-        override fun getPackages(): List<ReactPackage> {
-          // Packages that cannot be autolinked yet can be added manually here, for example:
-          // packages.add(new MyReactNativePackage());
-          return PackageList(this).packages
-        }
+        override fun getPackages(): List<ReactPackage> =
+            PackageList(this).packages.apply {
+              // Packages that cannot be autolinked yet can be added manually here, for example:
+              // add(MyReactNativePackage())
+            }
 
         override fun getJSMainModuleName(): String = "index"
 

diff --git a/assets/icons/outline/hourglass.png b/assets/icons/outline/hourglass.png
diff --git a/bin/optimization b/bin/optimization
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -68,9 +68,9 @@ PODS:
     - FlipperKit/FlipperKitNetworkPlugin
   - fmt (6.2.1)
   - glog (0.3.5)
-  - hermes-engine (0.73.0):
-    - hermes-engine/Pre-built (= 0.73.0)
-  - hermes-engine/Pre-built (0.73.0)
+  - hermes-engine (0.73.1):
+    - hermes-engine/Pre-built (= 0.73.1)
+  - hermes-engine/Pre-built (0.73.1)
   - libevent (2.1.12)
   - libwebp (1.3.2):
     - libwebp/demux (= 1.3.2)
@@ -962,7 +962,7 @@ PODS:
     - React-Core
   - react-native-maps (1.8.4):
     - React-Core
-  - react-native-safe-area-context (4.8.1):
+  - react-native-safe-area-context (4.8.2):
     - React-Core
   - react-native-slider (4.5.0):
     - glog
@@ -1137,7 +1137,7 @@ PODS:
     - React-jsi (= 0.73.1)
     - React-logger (= 0.73.1)
     - React-perflogger (= 0.73.1)
-  - RNCClipboard (1.13.0):
+  - RNCClipboard (1.13.2):
     - React-Core
   - RNCPicker (2.6.1):
     - React-Core
@@ -1414,7 +1414,7 @@ SPEC CHECKSUMS:
   FlipperKit: 37525a5d056ef9b93d1578e04bc3ea1de940094f
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
   glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
-  hermes-engine: 34304f8c6e8fa68f63a5fe29af82f227d817d7a7
+  hermes-engine: 34df9d5034e90bd9bf1505e1ca198760373935af
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   libwebp: 1786c9f4ff8a279e4dac1e8f385004d5fc253009
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
@@ -1442,7 +1442,7 @@ SPEC CHECKSUMS:
   react-native-cameraroll: 8acc1cf2c31d38992222fd08c7041691fc98dce3
   react-native-geolocation: ef66fb798d96284c6043f0b16c15d9d1d4955db4
   react-native-maps: e2b78affd8e90c807a87bd042dc6b1af2decbcf1
-  react-native-safe-area-context: cd1169d797a2ef722a00bfc5af10748d5b6c94f9
+  react-native-safe-area-context: 0ee144a6170530ccc37a0fd9388e28d06f516a89
   react-native-slider: 7d387c7e8dd0b4c12bf49c975c8666435f082a33
   react-native-webview: 88293a0f23eca8465c0433c023ec632930e644d0
   React-nativeconfig: 37aecd26d64b79327c3f10e43b2e9a6c425e0a60
@@ -1465,7 +1465,7 @@ SPEC CHECKSUMS:
   React-runtimescheduler: 93a4c84e46a85c3fc9678abd4f6923b785226ea7
   React-utils: debda2c206770ee2785bdebb7f16d8db9f18838a
   ReactCommon: ddb128564dcbfa0287d3d1a2d10f8c7457c971f6
-  RNCClipboard: 204b94473a99932e314b730a81363e0bf795a60d
+  RNCClipboard: 60fed4b71560d7bfe40e9d35dea9762b024da86d
   RNCPicker: b18aaf30df596e9b1738e7c1f9ee55402a229dca
   RNDeviceInfo: db5c64a060e66e5db3102d041ebe3ef307a85120
   RNFastImage: 5c9c9fed9c076e521b3f509fe79e790418a544e8

diff --git a/package.json b/package.json
@@ -56,9 +56,9 @@
     "@babel/runtime": "^7.20.0",
     "@mxssfd/typedoc-theme": "^1.1.2",
     "@react-native-community/eslint-config": "^2.0.0",
-    "@react-native/babel-preset": "^0.73.18",
-    "@react-native/eslint-config": "^0.73.1",
-    "@react-native/metro-config": "^0.73.2",
+    "@react-native/babel-preset": "^0.73.19",
+    "@react-native/eslint-config": "^0.73.2",
+    "@react-native/metro-config": "^0.73.3",
     "@react-native/typescript-config": "^0.73.1",
     "@testing-library/jest-native": "^5.4.2",
     "@testing-library/react-native": "^12.1.2",
@@ -84,7 +84,7 @@
     "prettier": "2.8.8",
     "react": "18.2.0",
     "react-dom": "18.1.0",
-    "react-native": "0.73.1",
+    "react-native": "0.73.2",
     "react-native-safe-area-context": "^4.7.1",
     "react-native-svg": "^13.10.0",
     "react-test-renderer": "18.2.0",

diff --git a/src/global/images.ts b/src/global/images.ts
@@ -33,6 +33,7 @@ export const images = {
       deaf: () => require('../../assets/icons/outline/deaf.png'),
       disabled: () => require('../../assets/icons/outline/disabled.png'),
       home: () => require('../../assets/icons/outline/home.png'),
+      hourglass: () => require('../../assets/icons/outline/hourglass.png'),
       library: () => require('../../assets/icons/outline/library.png'),
       magnifier: () => require('../../assets/icons/outline/magnifier.png'),
       mapArrow: () => require('../../assets/icons/outline/map_arrow.png'),

diff --git a/src/screens/addSection/VideoScreen/OverlayModule/OverlayModule.tsx b/src/screens/addSection/VideoScreen/OverlayModule/OverlayModule.tsx
@@ -26,6 +26,12 @@ type Props = {
   setTimerValue: React.Dispatch<React.SetStateAction<number>>
   defaultTimerValue: number
   setDefaultTimerValue: React.Dispatch<React.SetStateAction<number>>
+  endTimerValue: number
+  setEndTimerValue: React.Dispatch<React.SetStateAction<number>>
+  defaultEndTimerValue: number
+  isTimerModalVisible: boolean
+  setIsTimerModalVisible: React.Dispatch<React.SetStateAction<boolean>>
+  setDefaultEndTimerValue: React.Dispatch<React.SetStateAction<number>>
   translatedText: string
 }
 
@@ -45,26 +51,55 @@ export default function OverlayModule({
   setTimerValue,
   defaultTimerValue,
   setDefaultTimerValue,
+  endTimerValue,
+  setEndTimerValue,
+  defaultEndTimerValue,
+  setDefaultEndTimerValue,
+  isTimerModalVisible,
+  setIsTimerModalVisible,
   translatedText,
 }: Props): JSX.Element {
-  const { isAssistantVisible, onTimerPress, isTimerModalVisible, OVERLAY_OPTIONS, isPrompterVisible } =
-    useOverlayModuleController({
-      defaultTimerValue,
-    })
+  const {
+    isAssistantVisible,
+    onTimerPress,
+    onEndTimerPress,
+    OVERLAY_OPTIONS,
+    isPrompterVisible,
+    isEndTimerModalVisible,
+  } = useOverlayModuleController({
+    defaultTimerValue,
+    defaultEndTimerValue,
+    isTimerModalVisible,
+    setIsTimerModalVisible,
+  })
 
   return (
     <View style={styles.container}>
       {isAssistantVisible && <AssistantView />}
-      <TimerCountdownView timerValue={timerValue} />
+      <TimerCountdownView
+        timerValue={timerValue}
+        endTimerValue={endTimerValue}
+        isRecording={isRecording}
+      />
       {isTimerModalVisible && (
         <TimerSliderView
           toggleVisibility={onTimerPress}
           setTimerValue={setTimerValue}
           defaultTimerValue={defaultTimerValue}
           setDefaultTimerValue={setDefaultTimerValue}
+          type='START'
         />
       )}
-      {isPrompterVisible && !isTimerModalVisible && (
+      {isEndTimerModalVisible && !isTimerModalVisible && (
+        <TimerSliderView
+          toggleVisibility={onEndTimerPress}
+          setTimerValue={setEndTimerValue}
+          defaultTimerValue={defaultEndTimerValue}
+          setDefaultTimerValue={setDefaultEndTimerValue}
+          type='STOP'
+        />
+      )}
+      {isPrompterVisible && !isTimerModalVisible && !isEndTimerModalVisible && (
         <PrompterModule
           text={translatedText}
           isRecording={isRecording}

diff --git a/src/screens/addSection/VideoScreen/OverlayModule/Views/TimerCountdownView.tsx b/src/screens/addSection/VideoScreen/OverlayModule/Views/TimerCountdownView.tsx
@@ -10,19 +10,39 @@ import { View, Text, StyleSheet } from 'react-native'
 /**
  * @typedef Props
  * @property {number} timerValue The current timer value
+ * @property {number} endTimerValue The end timer value
  */
 type Props = {
   timerValue: number
+  endTimerValue: number
+  isRecording: boolean
 }
 
 /**
  * @function TimerCountdownView
  * @description Component that renders the Timer countdown view.
  * @param {number} timerValue The current timer value
+ * @param {number} endTimerValue The end timer value
+ * @param {boolean} isRecording Wether the user is recording a video or not
  * @returns {JSX.Element} TimerCountdownView component
  */
-export default function TimerCountdownView({ timerValue }: Props): JSX.Element {
-  return <View style={styles.container}>{timerValue > 0 && <Text style={styles.textStyle}>{timerValue}</Text>}</View>
+export default function TimerCountdownView({ timerValue, endTimerValue, isRecording }: Props): JSX.Element {
+  if (timerValue > 0) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.textStyle}>{timerValue}</Text>
+      </View>
+    )
+  }
+  if (endTimerValue > 0 && isRecording) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.textStyle}>{endTimerValue}</Text>
+      </View>
+    )
+  }
+
+  return <View />
 }
 
 const styles = StyleSheet.create({

diff --git a/src/screens/addSection/VideoScreen/OverlayModule/Views/TimerSliderView.tsx b/src/screens/addSection/VideoScreen/OverlayModule/Views/TimerSliderView.tsx
@@ -23,6 +23,7 @@ type Props = {
   setTimerValue: React.Dispatch<React.SetStateAction<number>>
   defaultTimerValue: number
   setDefaultTimerValue: (timer: number) => void
+  type: 'START' | 'STOP'
 }
 
 /**
@@ -32,9 +33,10 @@ type Props = {
  * @param {React.Dispatch<React.SetStateAction<number>>} setTimerValue Function that sets the timer value
  * @param {number} defaultTimerValue The default timer value
  * @param {(timer: number) => void} setDefaultTimerValue Function that sets the default timer value
+ * @param {string} type The type of timer (start or stop)
  * @returns
  */
-function TimerSliderView({ toggleVisibility, setTimerValue, defaultTimerValue, setDefaultTimerValue }: Props) {
+function TimerSliderView({ toggleVisibility, setTimerValue, defaultTimerValue, setDefaultTimerValue, type }: Props) {
   const [selectedValue, setSelectedValue] = useState(defaultTimerValue)
 
   /**
@@ -88,23 +90,67 @@ function TimerSliderView({ toggleVisibility, setTimerValue, defaultTimerValue, s
     },
   ]
 
+  const TIMER_STOP_OPTIONS = [
+    {
+      label: 'Désactivé',
+      value: 0,
+      color: 'red',
+    },
+    {
+      label: '10s',
+      value: 10,
+    },
+    {
+      label: '20s',
+      value: 20,
+    },
+    {
+      label: '30s',
+      value: 30,
+    },
+    {
+      label: '45s',
+      value: 45,
+    },
+    {
+      label: '1mn',
+      value: 60,
+    },
+    {
+      label: '1mn30',
+      value: 90,
+    },
+  ]
+
   return (
     <View style={styles.container}>
-      <Text style={styles.text}>Choisissez une durée avant que la vidéo commence</Text>
+      <Text style={styles.text}>
+        Choisissez une durée avant que la vidéo ne {type === 'START' ? 'commence' : "s'arrête"}.
+      </Text>
       <Picker
         selectedValue={selectedValue}
         onValueChange={handleSliderChange}
         style={styles.picker}
         prompt='Select Timer Value'
       >
-        {TIMER_OPTIONS.map(option => (
-          <Picker.Item
-            key={option.value}
-            label={option.label}
-            value={option.value}
-            color={option.color}
-          />
-        ))}
+        {type === 'START' &&
+          TIMER_OPTIONS.map(option => (
+            <Picker.Item
+              key={option.value}
+              label={option.label}
+              value={option.value}
+              color={option.color}
+            />
+          ))}
+        {type === 'STOP' &&
+          TIMER_STOP_OPTIONS.map(option => (
+            <Picker.Item
+              key={option.value}
+              label={option.label}
+              value={option.value}
+              color={option.color}
+            />
+          ))}
       </Picker>
       <View style={styles.buttonContainer}>
         <Button