feat: ASC-00000 - create livestream

README.md

@@ -70,7 +70,7 @@ Then, inside another project, Copy tgz file to your application folder where you
 
 ```sh
 1. yarn add ./amity-react-native-social-ui-kit-x.x.x.tgz
-2. yarn add react-native-safe-area-context \react-native-image-picker \@react-native-async-storage/async-storage \react-native-svg \react-native-screens \react-native-video@^6.0.0-beta.5 \react-native-create-thumbnail \@react-native-community/netinfo \@@react-navigation/native \@react-navigation/native-stack \@react-navigation/stack
+2. yarn add react-native-safe-area-context \react-native-image-picker \@react-native-async-storage/async-storage \react-native-svg \react-native-gesture-handler \react-native-screens \"react-native-video@^6.0.0-beta.5" \react-native-create-thumbnail \@react-native-community/netinfo \@react-navigation/native \@react-navigation/native-stack \@react-navigation/stack \react-native-vision-camera
 ```
 
 ### iOS Configuration
@@ -104,7 +104,7 @@ In android/build.gradle, 
add kotlinVersion above 1.7.0 in buildscript > ext
 
 <img width="545" alt="add kotlinVersion above 1.7.0" src="https://github.com/AmityCo/Amity-Social-UIKit-React-Native-CLI-OpenSource/assets/155952277/1a8618fa-6da3-4a37-8bb8-442119e0b536">
 
-### Add Camera permission (only iOS)
+### Add Camera permission (iOS)
 
 Add following permissions to `info.plist` file (ios/{YourAppName}/Info.plist)
 
@@ -119,6 +119,12 @@ Add following permissions to `info.plist` file (ios/{YourAppName}/Info.plist)
  <string>App needs access to the gallery to select photos.</string>
 ```
 
+### Add Camera permission (Android)
+
+Add following permissions to `AndroidManifest.xml` file (android/app/src/main/AndroidManifest.xml)
+ <uses-permission android:name="android.permission.CAMERA" /> 
+ <uses-permission android:name="android.permission.RECORD_AUDIO" />
+
 ### Usage
 
 ```js

example/android/app/build.gradle

@@ -99,8 +99,10 @@ android {
             signingConfig signingConfigs.debug
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+
         }
     }
+
 }
 
 dependencies {

example/android/app/src/main/AndroidManifest.xml

@@ -2,6 +2,14 @@
 
     <uses-permission android:name="android.permission.INTERNET" />
 
+    <uses-feature android:name="android.hardware.camera"/>
+    <uses-feature android:name="android.hardware.camera.autofocus"/>
+
+    <uses-permission android:name="android.permission.CAMERA"/>
+    <uses-permission android:name="android.permission.RECORD_AUDIO"/>
+    <uses-permission android:name="android.permission.FLASHLIGHT"/>
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+
     <application
       android:name=".MainApplication"
       android:label="@string/app_name"

example/android/build.gradle

@@ -4,7 +4,7 @@ buildscript {
     ext {
         buildToolsVersion = "33.0.0"
         minSdkVersion = 21
-        compileSdkVersion = 33
+        compileSdkVersion = 34
         targetSdkVersion = 33
         kotlinVersion = '1.8.0'
         // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.

example/ios/Podfile.lock

@@ -78,6 +78,7 @@ PODS:
     - hermes-engine/Pre-built (= 0.72.4)
   - hermes-engine/Pre-built (0.72.4)
   - libevent (2.1.12)
+  - NodeMediaClient (3.2.7)
   - OpenSSL-Universal (1.1.1100)
   - PromisesObjC (2.3.1)
   - PromisesSwift (2.3.1):
@@ -387,6 +388,12 @@ PODS:
   - react-native-image-picker (7.1.0):
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
+  - react-native-netinfo (11.3.1):
+    - React-Core
+  - react-native-nodemediaclient (0.3.3):
+    - NodeMediaClient (= 3.2.7)
+    - RCT-Folly (= 2021.07.22.00)
+    - React-Core
   - react-native-safe-area-context (4.9.0):
     - React-Core
   - react-native-video (6.0.0-beta.5):
@@ -509,6 +516,9 @@ PODS:
     - React-perflogger (= 0.72.4)
   - RNCAsyncStorage (1.22.0):
     - React-Core
+  - RNGestureHandler (2.15.0):
+    - RCT-Folly (= 2021.07.22.00)
+    - React-Core
   - RNScreens (3.29.0):
     - RCT-Folly (= 2021.07.22.00)
     - React-Core
@@ -570,6 +580,8 @@ DEPENDENCIES:
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - react-native-create-thumbnail (from `../node_modules/react-native-create-thumbnail`)
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
+  - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
+  - react-native-nodemediaclient (from `../node_modules/react-native-nodemediaclient`)
   - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - react-native-video (from `../node_modules/react-native-video`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
@@ -590,6 +602,7 @@ DEPENDENCIES:
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
+  - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSVG (from `../node_modules/react-native-svg`)
   - SPTPersistentCache
@@ -609,6 +622,7 @@ SPEC REPOS:
     - FlipperKit
     - fmt
     - libevent
+    - NodeMediaClient
     - OpenSSL-Universal
     - PromisesObjC
     - PromisesSwift
@@ -666,6 +680,10 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-create-thumbnail"
   react-native-image-picker:
     :path: "../node_modules/react-native-image-picker"
+  react-native-netinfo:
+    :path: "../node_modules/@react-native-community/netinfo"
+  react-native-nodemediaclient:
+    :path: "../node_modules/react-native-nodemediaclient"
   react-native-safe-area-context:
     :path: "../node_modules/react-native-safe-area-context"
   react-native-video:
@@ -706,6 +724,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-async-storage/async-storage"
+  RNGestureHandler:
+    :path: "../node_modules/react-native-gesture-handler"
   RNScreens:
     :path: "../node_modules/react-native-screens"
   RNSVG:
@@ -733,6 +753,7 @@ SPEC CHECKSUMS:
   glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
   hermes-engine: 81191603c4eaa01f5e4ae5737a9efcf64756c7b2
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
+  NodeMediaClient: 2d4a5db55f079801318b769d5a9fbd01c93cd68f
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
   PromisesObjC: c50d2056b5253dadbd6c2bea79b0674bd5a52fa4
   PromisesSwift: 28dca69a9c40779916ac2d6985a0192a5cb4a265
@@ -753,6 +774,8 @@ SPEC CHECKSUMS:
   React-logger: da1ebe05ae06eb6db4b162202faeafac4b435e77
   react-native-create-thumbnail: ab55d24aea01723cf386f18b0b542aabb1982f27
   react-native-image-picker: 5e076db26cd81660cfb6db5bcf517cfa12054d45
+  react-native-netinfo: bdb108d340cdb41875c9ced535977cac6d2ff321
+  react-native-nodemediaclient: 0d08e4fa19a320091eca814024991cff611e6d05
   react-native-safe-area-context: b97eb6f9e3b7f437806c2ce5983f479f8eb5de4b
   react-native-video: 634ca004e7747638885f40797d5e5052042483e9
   React-NativeModulesApple: edb5ace14f73f4969df6e7b1f3e41bef0012740f
@@ -773,6 +796,7 @@ SPEC CHECKSUMS:
   React-utils: b79f2411931f9d3ea5781404dcbb2fa8a837e13a
   ReactCommon: 4b2bdcb50a3543e1c2b2849ad44533686610826d
   RNCAsyncStorage: c43e6d71e13bb4748503797784839e0fbbf89d56
+  RNGestureHandler: 7909c50383a18f0cb10ce1db7262b9a6da504c03
   RNScreens: 3c5b9f4a9dcde752466854b6109b79c0e205dad3
   RNSVG: ba3e7232f45e34b7b47e74472386cf4e1a676d0a
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
@@ -782,4 +806,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: d321e818eda51b9aa4bfc40877c81996a9677528
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.12.1

example/package.json

@@ -10,14 +10,17 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.19.3",
+    "@react-native-community/netinfo": "^11.3.1",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/native-stack": "^6.9.26",
     "@react-navigation/stack": "^6.3.29",
     "react": "18.2.0",
     "react-native": "0.72.4",
     "react-native-create-thumbnail": "^2.0.0",
+    "react-native-gesture-handler": "^2.15.0",
     "react-native-image-picker": "^7.0.0",
     "react-native-netinfo": "^1.1.0",
+    "react-native-nodemediaclient": "^0.3.3",
     "react-native-safe-area-context": "^4.7.2",
     "react-native-screens": "^3.25.0",
     "react-native-svg": "^14.1.0",

example/yarn.lock

@@ -1142,6 +1142,13 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
+"@egjs/hammerjs@^2.0.17":
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
+  integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==
+  dependencies:
+    "@types/hammerjs" "^2.0.36"
+
 "@eslint-community/eslint-utils@^4.2.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
@@ -1475,6 +1482,11 @@
     prompts "^2.4.0"
     semver "^7.5.2"
 
+"@react-native-community/netinfo@^11.3.1":
+  version "11.3.1"
+  resolved "https://registry.yarnpkg.com/@react-native-community/netinfo/-/netinfo-11.3.1.tgz#4539371a2f4bd402d932031be82c2449ed63a1a5"
+  integrity sha512-UBnJxyV0b7i9Moa97Av+HKho1ByzX0DtbJXzUQS5E3xhQs6P2D/Os0iw3ouy7joY1TVd6uIhplPbr7l1SJNaNQ==
+
 "@react-native/assets-registry@^0.72.0":
   version "0.72.0"
   resolved "https://registry.yarnpkg.com/@react-native/assets-registry/-/assets-registry-0.72.0.tgz#c82a76a1d86ec0c3907be76f7faf97a32bbed05d"
@@ -1642,6 +1654,11 @@
   dependencies:
     "@sinonjs/commons" "^3.0.0"
 
+"@types/hammerjs@^2.0.36":
+  version "2.0.45"
+  resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.45.tgz#ffa764bb68a66c08db6efb9c816eb7be850577b1"
+  integrity sha512-qkcUlZmX6c4J8q45taBKTL3p+LbITgyx7qhlPYOdOHZB7B31K0mXbP5YA7i7SgDeEGuI9MnumiKPEMrxg8j3KQ==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz#7739c232a1fee9b4d3ce8985f314c0c6d33549d7"
@@ -3230,6 +3247,13 @@ hermes-profile-transformer@^0.0.6:
   dependencies:
     source-map "^0.7.3"
 
+hoist-non-react-statics@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 [email protected]:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
@@ -4859,7 +4883,7 @@ prompts@^2.4.0:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@*, prop-types@^15.8.1:
+prop-types@*, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -4913,7 +4937,7 @@ react-freeze@^1.0.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-is@^16.13.0, react-is@^16.13.1:
+react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -4928,6 +4952,17 @@ react-native-create-thumbnail@^2.0.0:
   resolved "https://registry.yarnpkg.com/react-native-create-thumbnail/-/react-native-create-thumbnail-2.0.0.tgz#4eae9b4198cd484a1420608b53ce5872209b9a25"
   integrity sha512-1GA0PHGlhSirKUqbtlLLk++3Wkd/fo8H8YUi71Lp5Y2z+AxZMKmY1/IcB9ooDiMzI1Pxr006Kq99JWuXowoykg==
 
+react-native-gesture-handler@^2.15.0:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.15.0.tgz#f8e6c0451a7bdf065edb7b9be605480db402baa0"
+  integrity sha512-cmMGW8k86o/xgVTBZZOPohvR5re4Vh65PUxH4HbBBJAYTog4aN4wTVTUlnoky01HuSN8/X4h3tI/K3XLPoDnsg==
+  dependencies:
+    "@egjs/hammerjs" "^2.0.17"
+    hoist-non-react-statics "^3.3.0"
+    invariant "^2.2.4"
+    lodash "^4.17.21"
+    prop-types "^15.7.2"
+
 react-native-image-picker@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/react-native-image-picker/-/react-native-image-picker-7.1.0.tgz#1a41cc45ccdc177c2ebf7c7accee0ceadc36abd8"
@@ -4938,6 +4973,11 @@ react-native-netinfo@^1.1.0:
   resolved "https://registry.yarnpkg.com/react-native-netinfo/-/react-native-netinfo-1.1.0.tgz#343a4a9413006493f350bc7923688bb3315c3dce"
   integrity sha512-muGzEvfCm9i+MF1qgPF1LsUmRxaTUWQ9i2TTbBoE/DBfsprv4Ds27iYLQvAgX5QzAMJm+iYKCq+3QN/hvPxrsQ==
 
+react-native-nodemediaclient@^0.3.3:
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/react-native-nodemediaclient/-/react-native-nodemediaclient-0.3.3.tgz#99168049816c62736de8c4fc7e112ca40ea64ebe"
+  integrity sha512-xyy5G3ueCAVO563IYGVHCS8cX9P+GSdSWyrejAEPSzePeVfc6V/+zrfbkEiqMqUw4ru1vSvbG4cgapwhE8LtSw==
+
 react-native-safe-area-context@^4.7.2:
   version "4.9.0"
   resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.9.0.tgz#21a570ca3594cb4259ba65f93befaa60d91bcbd0"

package.json

@@ -82,6 +82,7 @@
     "react-native-builder-bob": "^0.20.0",
     "react-native-create-thumbnail": "^2.0.0",
     "react-native-image-picker": "^7.0.0",
+    "react-native-nodemediaclient": "^0.3.3",
     "react-native-safe-area-context": "^4.7.2",
     "react-native-svg": "^14.1.0",
     "release-it": "^15.0.0",
@@ -104,6 +105,7 @@
     "react-native": "*",
     "react-native-create-thumbnail": "*",
     "react-native-image-picker": "*",
+    "react-native-nodemediaclient": "*",
     "react-native-safe-area-context": "*",
     "react-native-screens": "*",
     "react-native-svg": "*",
@@ -115,7 +117,7 @@
   "engines": {
     "node": ">= 16.0.0"
   },
-  "packageManager": "^[email protected]",
+  "packageManager": "[email protected]",
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
@@ -191,6 +193,7 @@
   },
   "dependencies": {
     "@amityco/ts-sdk-react-native": "^6.17.0",
+    "@devvie/bottom-sheet": "^0.3.0",
     "@reduxjs/toolkit": "^1.9.7",
     "@types/react-dom": "^18.2.15",
     "@types/react-native-video": "^5.0.18",

src/components/CancelButton/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TouchableOpacity, View, Text } from 'react-native';
+import { styles } from './styles';
+import { useNavigation } from '@react-navigation/native';
+
+export default function CancelButton() {
+  const navigation = useNavigation();
+
+  return (
+    <TouchableOpacity onPress={() => navigation.goBack()}>
+      <View style={styles.icon}>
+        <Text style={styles.cancelText}>Cancel</Text>
+      </View>
+    </TouchableOpacity>
+  );
+}

src/components/CloseButton/index.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
-import { TouchableOpacity, View, Text } from 'react-native';
-import { styles } from './styles';
-export default function CloseButton({ navigation }: { navigation: any }) {
+
+import { TouchableOpacity } from 'react-native';
+import { SvgXml } from 'react-native-svg';
+import { closeIcon } from '../../../src/svg/svg-xml-list';
+import { useTheme } from 'react-native-paper';
+import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider';
+
+export default function CloseButton({ onPress }: { onPress: () => void }) {
+  const theme = useTheme() as MyMD3Theme;
   return (
-    <TouchableOpacity onPress={() => navigation.goBack()}>
-      <View style={styles.icon}>
-        <Text style={styles.cancelText}>Cancel</Text>
-      </View>
+    <TouchableOpacity onPress={onPress}>
+      <SvgXml xml={closeIcon(theme.colors.baseShade2)} width={24} />
     </TouchableOpacity>
   );
 }

src/components/CreatePostChooseTargetModal/CreatePostChooseTargetModal.tsx

@@ -126,6 +126,7 @@ const CreatePostChooseTargetModal = ({
     const targetscreen = () => {
       if (postType === 'post') return 'CreatePost';
       if (postType === 'poll') return 'CreatePoll';
+      if (postType === 'livestream') return 'CreateLivestream';
       return null;
     };
     navigation.navigate(targetscreen(), {

src/components/EditPostModal/index.tsx

@@ -165,13 +165,15 @@ const EditPostModal = ({
   }, [postDetail.postId, visible]);
 
   useEffect(() => {
-    if (postDetail?.mentionees.length > 0) {
+    if (postDetail?.mentionees?.length > 0) {
       const mentionPositions = getMentionPositions(
         postDetail?.data?.text ?? '',
         postDetail.mentionees ?? []
       );
       getMentionUsers(postDetail.mentionees ?? []);
       setMentionPosition(mentionPositions);
+    } else {
+      setInitialText(postDetail?.data?.text ?? '');
     }
   }, [postDetail]);