@amityco/react-native-social-uikit 4.0.0-03e2bf8.0

package/src/screens/UserProfileSetting/UserProfileSetting.tsx

@@ -0,0 +1,167 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { View, Text, TouchableOpacity, SectionList } from 'react-native';
+import { UserRepository, createReport } from '@amityco/ts-sdk-react-native';
+import CloseButton from '../../components/BackButton';
+import { useStyles } from './styles';
+import {
+  arrowOutlined,
+  blockOrUnblock,
+  editIcon,
+  report,
+  unfollow,
+} from '../../svg/svg-xml-list';
+import { SvgXml } from 'react-native-svg';
+import { LoadingOverlay } from '../../components/LoadingOverlay';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { RouteProp } from '@react-navigation/native';
+import { RootStackParamList } from 'src/routes/RouteParamList';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+export default function UserProfileSetting({
+  navigation,
+  route,
+}: {
+  navigation: NativeStackNavigationProp<RootStackParamList>;
+  route: RouteProp<RootStackParamList, 'UserProfileSetting'>;
+}) {
+  const { user, follow } = route.params;
+  const { userId, displayName } = user;
+  const styles = useStyles();
+  const [showLoadingIndicator, setShowLoadingIndicator] = useState(false);
+  const [followStatus, setFollowStatus] = useState(follow);
+  const isMyProfile = !followStatus;
+  const isBlocked = followStatus === 'blocked';
+  const isFollowed = followStatus === 'accepted';
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      headerLeft: () => <CloseButton />,
+      title: displayName,
+      headerTitleAlign: 'center',
+    });
+  }, [displayName, navigation]);
+
+  const handleReportUserPress = useCallback(async () => {
+    setShowLoadingIndicator(true);
+    await createReport('user', userId);
+    setShowLoadingIndicator(false);
+  }, [userId]);
+
+  const handleUnfollowPress = useCallback(async () => {
+    setShowLoadingIndicator(true);
+    await UserRepository.Relationship.unfollow(userId);
+    setShowLoadingIndicator(false);
+    setFollowStatus('none');
+  }, [userId]);
+
+  const handleBlockUser = useCallback(async () => {
+    setShowLoadingIndicator(true);
+    await UserRepository.Relationship.blockUser(userId);
+    setShowLoadingIndicator(false);
+    setFollowStatus('blocked');
+  }, [userId]);
+
+  const handleUnblockUser = useCallback(async () => {
+    setShowLoadingIndicator(true);
+    await UserRepository.Relationship.unBlockUser(userId);
+    setShowLoadingIndicator(false);
+    setFollowStatus('none');
+  }, [userId]);
+
+  const onProfileEditPress = useCallback(() => {
+    navigation.navigate('EditProfile', { user });
+  }, [navigation, user]);
+
+  const settingData = useMemo(() => {
+    const userSettingData = [];
+    if (!isMyProfile) {
+      userSettingData.push({
+        title: 'Manage',
+        data: [
+          {
+            type: 'manage',
+            leftIcon: report,
+            label: 'Report user',
+            callBack: handleReportUserPress,
+          },
+          {
+            type: 'manage',
+            leftIcon: blockOrUnblock,
+            label: isBlocked ? 'Unblock user' : 'Block user',
+            callBack: isBlocked ? handleUnblockUser : handleBlockUser,
+          },
+        ],
+      });
+      if (isFollowed) {
+        userSettingData.map((setting) => {
+          setting.data.unshift({
+            type: 'manage',
+            leftIcon: unfollow,
+            label: 'Unfollow',
+            callBack: handleUnfollowPress,
+          });
+          return setting;
+        });
+      }
+
+      return userSettingData;
+    }
+    userSettingData.push({
+      title: 'Basic info',
+      data: [
+        {
+          label: 'Edit Profile',
+          leftIcon: editIcon,
+          rightIcon: arrowOutlined,
+          callBack: onProfileEditPress,
+        },
+      ],
+    });
+    return userSettingData;
+  }, [
+    handleBlockUser,
+    handleReportUserPress,
+    handleUnblockUser,
+    handleUnfollowPress,
+    isBlocked,
+    isFollowed,
+    isMyProfile,
+    onProfileEditPress,
+  ]);
+
+  const renderSectionItem = useCallback(
+    ({ item }) => {
+      return (
+        <TouchableOpacity
+          key={item.label}
+          style={styles.rowContainer}
+          onPress={item.callBack}
+        >
+          <View style={styles.iconContainer}>
+            <SvgXml xml={item.leftIcon()} width="20" height="20" />
+          </View>
+          <Text style={styles.rowText}>{item.label}</Text>
+          {item.rightIcon && (
+            <SvgXml xml={item.rightIcon()} width="20" height="20" />
+          )}
+        </TouchableOpacity>
+      );
+    },
+    [styles]
+  );
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.container}>
+        <LoadingOverlay isLoading={showLoadingIndicator} loadingText={null} />
+        <SectionList
+          sections={settingData}
+          renderItem={renderSectionItem}
+          keyExtractor={(_, index) => index.toString()}
+          renderSectionHeader={({ section: { title } }) => {
+            return <Text style={styles.sectionHeader}>{title}</Text>;
+          }}
+        />
+      </View>
+    </SafeAreaView>
+  );
+}

package/src/screens/UserProfileSetting/styles.ts

@@ -0,0 +1,105 @@
+import { StyleSheet } from 'react-native';
+import { useTheme } from 'react-native-paper';
+import type { MyMD3Theme } from 'src/providers/amity-ui-kit-provider';
+
+export const useStyles = () => {
+  const theme = useTheme() as MyMD3Theme;
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: theme.colors.background,
+    },
+    navBar: {
+      height: 60,
+      backgroundColor: '#F5F5F5',
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: 15,
+      borderBottomWidth: 1,
+      borderBottomColor: '#DDDDDD',
+    },
+    backIcon: {
+      width: 25,
+      height: 25,
+    },
+    navBarTitle: {
+      fontSize: 18,
+      fontWeight: 'bold',
+      marginLeft: 10,
+    },
+    placeholder: {
+      width: 25,
+      height: 25,
+    },
+    rowContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: 15,
+      paddingHorizontal: 16,
+      borderBottomWidth: 1,
+      borderBottomColor: '#DDDDDD',
+    },
+    iconContainer: {
+      width: 28,
+      height: 28,
+      borderRadius: 4,
+      backgroundColor: '#EFEFEF',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: 15,
+    },
+    icon: {
+      width: 18,
+      height: 16,
+    },
+    unfollowIcon: {
+      width: 18,
+      height: 14,
+    },
+    loadingIndicator: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      zIndex: 9999,
+    },
+    groupIcon: {
+      width: 16,
+      height: 16,
+    },
+    arrowIcon: {
+      width: 10,
+      height: 17,
+    },
+    rowText: {
+      flex: 1,
+      fontSize: 16,
+      color: theme.colors.base,
+    },
+    leaveChatContainer: {
+      alignItems: 'center',
+      // paddingVertical: 15,
+    },
+    leaveChatText: {
+      fontSize: 16,
+      fontWeight: '600',
+      color: '#FF0000',
+    },
+    leaveChatLabel: {
+      fontSize: 16,
+      fontWeight: '600',
+      color: 'red',
+    },
+    sectionHeader: {
+      marginLeft: 16,
+      fontSize: 17,
+      fontWeight: '600',
+      color: theme.colors.base,
+    },
+  });
+  return styles;
+};

package/src/screens/VideoPlayerFullScreen/index.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  Alert,
+  Dimensions,
+  TouchableOpacity,
+} from 'react-native';
+
+import { View } from 'react-native';
+import Video from 'react-native-video';
+import type { RootStackParamList } from '../../routes/RouteParamList';
+import {
+  useRoute,
+  type RouteProp,
+  useNavigation,
+} from '@react-navigation/native';
+import { SvgXml } from 'react-native-svg';
+import { closeIcon } from '../../svg/svg-xml-list';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import styles from './styles';
+import { useTheme } from 'react-native-paper';
+import type { MyMD3Theme } from '../../providers/amity-ui-kit-provider';
+
+const VideoPlayerFull = () => {
+  const theme = useTheme() as MyMD3Theme;
+  const route = useRoute<RouteProp<RootStackParamList, 'VideoPlayer'>>();
+  const { source } = route.params;
+  const videoRef = useRef(null);
+  const navigation = useNavigation<NativeStackNavigationProp<any>>();
+  const [loading, setLoading] = useState(false);
+  const [orientation, setOrientation] = useState('LANDSCAPE');
+
+  const determineAndSetOrientation = () => {
+    let width = Dimensions.get('window').width;
+    let height = Dimensions.get('window').height;
+
+    if (width < height) {
+      setOrientation('PORTRAIT');
+    } else {
+      setOrientation('LANDSCAPE');
+    }
+  };
+
+  useEffect(() => {
+    determineAndSetOrientation();
+    Dimensions.addEventListener('change', determineAndSetOrientation);
+  }, []);
+
+  const onClose = () => {
+    navigation.goBack();
+  };
+  return (
+    <View style={styles.container}>
+      <Video
+        fullscreen
+        ref={videoRef}
+        source={{ uri: source }}
+        style={
+          orientation === 'LANDSCAPE' ? styles.videoLandscape : styles.video
+        }
+        resizeMode="contain"
+        controls={true}
+        bufferConfig={{
+          minBufferMs: 1500,
+          maxBufferMs: 1500,
+          bufferForPlaybackMs: 1500,
+          bufferForPlaybackAfterRebufferMs: 1500,
+        }}
+        onLoadStart={() => {
+          setLoading(true);
+        }}
+        onLoad={() => {
+          setLoading(false);
+        }}
+        onError={() => {
+          Alert.alert('Error while playing video');
+        }}
+        // onVideoError={() => {
+        //   Alert.alert('Error while playing video');
+        // }}
+      />
+      <TouchableOpacity style={styles.closeButton} onPress={onClose}>
+        <SvgXml xml={closeIcon(theme.colors.backdrop)} width="16" height="16" />
+      </TouchableOpacity>
+      <View style={styles.loadingOverlay}>
+        <ActivityIndicator animating={loading} color="#fff" size="large" />
+      </View>
+    </View>
+  );
+};
+
+export default VideoPlayerFull;

package/src/screens/VideoPlayerFullScreen/styles.ts

@@ -0,0 +1,59 @@
+import { Dimensions, StyleSheet, StatusBar } from 'react-native';
+
+const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000',
+  },
+  video: {
+    width: screenWidth,
+    height: screenHeight,
+  },
+  videoLandscape: {
+    width: screenHeight,
+    height: screenWidth,
+  },
+  controls: {
+    position: 'absolute',
+    bottom: 20,
+    left: 0,
+    right: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+  },
+  controlButton: {
+    color: '#FFFFFF',
+    fontSize: 20,
+  },
+  timeLabel: {
+    color: '#FFFFFF',
+    fontSize: 16,
+  },
+  slider: {
+    flex: 1,
+    marginLeft: 10,
+    marginRight: 10,
+  },
+  closeButton: {
+    width: 30,
+    height: 30,
+    padding: 7,
+    top: StatusBar.currentHeight + 12,
+    right: 12,
+    backgroundColor: 'rgba(255, 255, 255, 0.4)',
+    borderRadius: 72,
+    position: 'absolute',
+  },
+  loadingOverlay: {
+    width: '100%',
+    height: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+  },
+});
+
+export default styles;

package/src/snippet/AmityCommunitySearchResultComponent.tsx

@@ -0,0 +1,28 @@
+/* begin_sample_code
+ gist_id: 1c885a98ffdc94f5f3336e477ffce9d6
+ filename: AmityCommunitySearchResultComponent.tsx
+ asc_page: https://docs.amity.co/amity-uikit/uikit-v4-beta
+ description: AmityCommunitySearchResultComponent
+ */
+import {
+  AmityCommunitySearchResultComponent,
+  AmityUiKitProvider,
+} from 'amity-react-native-social-ui-kit';
+import React from 'react';
+import config from '../../uikit.config.json';
+import { TabName } from '../v4/enum';
+<AmityUiKitProvider
+  configs={config} //put your customized config json object
+  apiKey="API_KEY"
+  apiRegion="API_REGION"
+  userId="userId"
+  displayName="displayName"
+  apiEndpoint="https://api.{API_REGION}.amity.co"
+>
+  <AmityCommunitySearchResultComponent
+    searchResult={[{}] as (Amity.Community & Amity.User)[]}
+    onNextPage={() => {}}
+    searchType={TabName.Communities}
+  />
+</AmityUiKitProvider>;
+/* end_sample_code */

package/src/snippet/AmityCreatePostMenuComponent.tsx

@@ -0,0 +1,30 @@
+/* begin_sample_code
+ gist_id: a5976a141516a6fe6e561344a8656286
+ filename: AmityCreatePostMenuComponent.tsx
+ asc_page: https://docs.amity.co/amity-uikit/uikit-v4-beta
+ description: AmityCreatePostMenuComponent
+ */
+import {
+  AmityCreatePostMenuComponent,
+  AmityUiKitProvider,
+} from 'amity-react-native-social-ui-kit';
+import React from 'react';
+import config from '../../uikit.config.json';
+<AmityUiKitProvider
+  configs={config} //put your customized config json object
+  apiKey="API_KEY"
+  apiRegion="API_REGION"
+  userId="userId"
+  displayName="displayName"
+  apiEndpoint="https://api.{API_REGION}.amity.co"
+  behaviour={{
+    AmityCreatePostMenuComponentBehavior: {
+      goToSelectStoryTargetPage: () => {},
+      goToSelectPostTargetPage: ({ postType }) => console.log(postType),
+      goToSelectLivestreamPostTargetPage: () => {},
+    },
+  }}
+>
+  <AmityCreatePostMenuComponent />
+</AmityUiKitProvider>;
+/* end_sample_code */

package/src/snippet/AmityDetailedMediaAttachmentComponent.tsx

@@ -0,0 +1,29 @@
+/* begin_sample_code
+ gist_id: 193a12ef8f7aea1032e8884898ed2193
+ filename: AmityDetailedMediaAttachmentComponent.tsx
+ asc_page: https://docs.amity.co/amity-uikit/uikit-v4-beta
+ description: AmityDetailedMediaAttachmentComponent
+ */
+import {
+  AmityDetailedMediaAttachmentComponent,
+  AmityUiKitProvider,
+  mediaAttachment,
+} from 'amity-react-native-social-ui-kit';
+import React from 'react';
+import config from '../../uikit.config.json';
+<AmityUiKitProvider
+  configs={config} //put your customized config json object
+  apiKey="API_KEY"
+  apiRegion="API_REGION"
+  userId="userId"
+  displayName="displayName"
+  apiEndpoint="https://api.{API_REGION}.amity.co"
+>
+  <AmityDetailedMediaAttachmentComponent
+    onPressCamera={() => {}}
+    onPressImage={() => {}}
+    onPressVideo={() => {}}
+    chosenMediaType={mediaAttachment.image}
+  />
+</AmityUiKitProvider>;
+/* end_sample_code */

package/src/snippet/AmityEmptyNewsFeedComponent.tsx

@@ -0,0 +1,23 @@
+/* begin_sample_code
+ gist_id: 176852a181d7574c61a8d5260e7e8810
+ filename: AmityEmptyNewsFeedComponent.tsx
+ asc_page: https://docs.amity.co/amity-uikit/uikit-v4-beta
+ description: AmityEmptyNewsFeedComponent
+ */
+import {
+  AmityEmptyNewsFeedComponent,
+  AmityUiKitProvider,
+} from 'amity-react-native-social-ui-kit';
+import React from 'react';
+import config from '../../uikit.config.json';
+<AmityUiKitProvider
+  configs={config} //put your customized config json object
+  apiKey="API_KEY"
+  apiRegion="API_REGION"
+  userId="userId"
+  displayName="displayName"
+  apiEndpoint="https://api.{API_REGION}.amity.co"
+>
+  <AmityEmptyNewsFeedComponent />
+</AmityUiKitProvider>;
+/* end_sample_code */

package/src/snippet/AmityGlobalFeedComponent.tsx

@@ -0,0 +1,30 @@
+/* begin_sample_code
+ gist_id: 3ec04da66a931c826f471ef50a90c7b9
+ filename: AmityGlobalFeedComponent.tsx
+ asc_page: https://docs.amity.co/amity-uikit/uikit-v4-beta
+ description: AmityGlobalFeedComponent
+ */
+import {
+  AmityGlobalFeedComponent,
+  AmityUiKitProvider,
+} from 'amity-react-native-social-ui-kit';
+import React from 'react';
+import config from '../../uikit.config.json';
+<AmityUiKitProvider
+  configs={config} //put your customized config json object
+  apiKey="API_KEY"
+  apiRegion="API_REGION"
+  userId="userId"
+  displayName="displayName"
+  apiEndpoint="https://api.{API_REGION}.amity.co"
+  behaviour={{
+    AmityGlobalFeedComponentBehavior: {
+      goToPostDetailPage: (postId: string) => {
+        console.log(postId);
+      },
+    },
+  }}
+>
+  <AmityGlobalFeedComponent />
+</AmityUiKitProvider>;
+/* end_sample_code */

package/src/snippet/AmityMediaAttachmentComponent.tsx

@@ -0,0 +1,29 @@
+/* begin_sample_code
+ gist_id: 60de42520b795efd3bd1ec26672e27c4
+ filename: AmityMediaAttachmentComponent.tsx
+ asc_page: https://docs.amity.co/amity-uikit/uikit-v4-beta
+ description: AmityMediaAttachmentComponent
+ */
+import {
+  AmityMediaAttachmentComponent,
+  AmityUiKitProvider,
+  mediaAttachment,
+} from 'amity-react-native-social-ui-kit';
+import React from 'react';
+import config from '../../uikit.config.json';
+<AmityUiKitProvider
+  configs={config} //put your customized config json object
+  apiKey="API_KEY"
+  apiRegion="API_REGION"
+  userId="userId"
+  displayName="displayName"
+  apiEndpoint="https://api.{API_REGION}.amity.co"
+>
+  <AmityMediaAttachmentComponent
+    onPressCamera={() => {}}
+    onPressImage={() => {}}
+    onPressVideo={() => {}}
+    chosenMediaType={mediaAttachment.image}
+  />
+</AmityUiKitProvider>;
+/* end_sample_code */

package/src/snippet/AmityMyCommunitiesComponent.tsx

@@ -0,0 +1,30 @@
+/* begin_sample_code
+ gist_id: 106d5ba6c2ce0a1125a4d7fd9019489f
+ filename: AmityMyCommunitiesComponent.tsx
+ asc_page: https://docs.amity.co/amity-uikit/uikit-v4-beta
+ description: AmityMyCommunitiesComponent
+ */
+import {
+  AmityMyCommunitiesComponent,
+  AmityUiKitProvider,
+} from 'amity-react-native-social-ui-kit';
+import React from 'react';
+import config from '../../uikit.config.json';
+<AmityUiKitProvider
+  configs={config} //put your customized config json object
+  apiKey="API_KEY"
+  apiRegion="API_REGION"
+  userId="userId"
+  displayName="displayName"
+  apiEndpoint="https://api.{API_REGION}.amity.co"
+  behaviour={{
+    AmityMyCommunitiesComponentBehaviour: {
+      onPressCommunity: ({ communityId, communityName }) => {
+        console.log(communityId, communityName);
+      },
+    },
+  }}
+>
+  <AmityMyCommunitiesComponent />
+</AmityUiKitProvider>;
+/* end_sample_code */

package/src/snippet/AmityMyCommunitiesSearchPage.tsx

@@ -0,0 +1,23 @@
+/* begin_sample_code
+ gist_id: 7b92ee13b126821328f7a5a626741aa4
+ filename: AmityMyCommunitiesSearchPage.tsx
+ asc_page: https://docs.amity.co/amity-uikit/uikit-v4-beta
+ description: AmityMyCommunitiesSearchPage
+ */
+import {
+  AmityMyCommunitiesSearchPage,
+  AmityUiKitProvider,
+} from 'amity-react-native-social-ui-kit';
+import React from 'react';
+import config from '../../uikit.config.json';
+<AmityUiKitProvider
+  configs={config} //put your customized config json object
+  apiKey="API_KEY"
+  apiRegion="API_REGION"
+  userId="userId"
+  displayName="displayName"
+  apiEndpoint="https://api.{API_REGION}.amity.co"
+>
+  <AmityMyCommunitiesSearchPage />
+</AmityUiKitProvider>;
+/* end_sample_code */

package/src/snippet/AmityNewsFeedComponent.tsx

@@ -0,0 +1,23 @@
+/* begin_sample_code
+ gist_id: 2ee628161f12279813340cb3348b593a
+ filename: AmityNewsFeedComponent.tsx
+ asc_page: https://docs.amity.co/amity-uikit/uikit-v4-beta
+ description: AmityNewsFeedComponent
+ */
+import {
+  AmityNewsFeedComponent,
+  AmityUiKitProvider,
+} from 'amity-react-native-social-ui-kit';
+import React from 'react';
+import config from '../../uikit.config.json';
+<AmityUiKitProvider
+  configs={config} //put your customized config json object
+  apiKey="API_KEY"
+  apiRegion="API_REGION"
+  userId="userId"
+  displayName="displayName"
+  apiEndpoint="https://api.{API_REGION}.amity.co"
+>
+  <AmityNewsFeedComponent />
+</AmityUiKitProvider>;
+/* end_sample_code */