@amityco/react-native-social-uikit 4.0.0-42bcb43.0 → 4.0.0-7db12756.0

package/src/v4/component/LivestreamContent/index.tsx

@@ -7,14 +7,14 @@ import {
   ImageStyle,
 } from 'react-native';
 import React, { useEffect, useState, useCallback, Fragment } from 'react';
-import { FileRepository, StreamRepository } from '@amityco/ts-sdk-react-native';
+import { FileRepository, RoomRepository } from '@amityco/ts-sdk-react-native';
 import { useStyles } from './styles';
 import { useNavigation } from '@react-navigation/native';
 import { SvgXml } from 'react-native-svg';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { play } from '../../assets/icons';
 import { Typography } from '../Typography/Typography';
-import { LivestreamStatus } from '../../enum/livestreamStatus';
+import { RoomStatus } from '../../enum/roomStatus';
 import LiveStreamEndThumbnail from './LivestreamEndedThumbnail';
 import LiveStreamIdleThumbnail from './LivestreamIdleThumbnail';
 import RenderTextWithMention from '../RenderTextWithMention/RenderTextWithMention';
@@ -22,14 +22,14 @@ import { RootStackParamList } from '../../routes/RouteParamList';
 import LiveStreamTerminatedThumbnail from './LivestreamTerminatedThumbnail';
 
 interface ILivestreamContent {
-  streamId: Amity.Stream['streamId'];
+  roomId: Amity.Room['roomId'];
   onPressPost: () => void;
   post: Amity.Post;
 }
 
 const LivestreamContent: React.FC<ILivestreamContent> = ({
   post,
-  streamId,
+  roomId,
   onPressPost,
 }) => {
   const { styles, theme } = useStyles();
@@ -39,18 +39,18 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
     >();
 
   const [error, setError] = useState<boolean>(false);
-  const [livestream, setLivestream] = useState<Amity.Stream>();
+  const [livestream, setLivestream] = useState<Amity.Room>();
   const [thumbnailUrl, setThumbnailUrl] = useState<ImageSourcePropType>();
   const [isUpcoming, setIsUpcoming] = useState<boolean>(false);
 
   const onPlayLivestream = useCallback(() => {
     navigation.navigate('LivestreamPlayer', {
       post,
-      streamId: livestream.streamId,
+      roomId: livestream.roomId,
     });
   }, [livestream, navigation, post]);
 
-  const getLivestreamThumbnail = async (currentStream: Amity.Stream) => {
+  const getLivestreamThumbnail = async (currentStream: Amity.Room) => {
     const defaultThumbnail = require('../../assets/images/livestream.png');
 
     if (currentStream.thumbnailFileId) {
@@ -71,8 +71,8 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
 
   useEffect(() => {
     setIsUpcoming(true);
-    const unsubscribe = StreamRepository.getStreamById(
-      streamId,
+    const unsubscribe = RoomRepository.getRoom(
+      roomId,
       ({ data, loading, error: streamError }) => {
         if (streamError) setError(!!streamError);
         if (!loading && data) {
@@ -86,13 +86,13 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
     return () => {
       unsubscribe();
     };
-  }, [streamId]);
+  }, [roomId]);
 
   if (!livestream) return null;
 
   if (error || livestream?.isDeleted) {
     return (
-      <View key={livestream.streamId} style={styles.container}>
+      <View key={livestream.roomId} style={styles.container}>
         <LiveStreamIdleThumbnail />
       </View>
     );
@@ -102,12 +102,12 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
     livestream?.moderation?.terminateLabels &&
     livestream?.moderation?.terminateLabels?.length > 0;
   const isLiveOrEnded =
-    livestream?.status === LivestreamStatus.live ||
-    livestream?.status === LivestreamStatus.ended;
+    livestream?.status === RoomStatus.live ||
+    livestream?.status === RoomStatus.ended;
 
   if (isTerminated && isLiveOrEnded) {
     return (
-      <View key={livestream.streamId} style={styles.container}>
+      <View key={livestream.roomId} style={styles.container}>
         <LiveStreamTerminatedThumbnail />
       </View>
     );
@@ -129,7 +129,7 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
         )}
       </Pressable>
       <View style={styles.container}>
-        {(livestream.status === LivestreamStatus.idle || isUpcoming) &&
+        {(livestream.status === RoomStatus.idle || isUpcoming) &&
           thumbnailUrl && (
             <View style={styles.content}>
               <Image
@@ -144,12 +144,10 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
             </View>
           )}
 
-        {livestream.status === LivestreamStatus.ended && (
-          <LiveStreamEndThumbnail />
-        )}
+        {livestream.status === RoomStatus.ended && <LiveStreamEndThumbnail />}
 
-        {(livestream.status === LivestreamStatus.live ||
-          livestream.status === LivestreamStatus.recorded) &&
+        {(livestream.status === RoomStatus.live ||
+          livestream.status === RoomStatus.recorded) &&
           thumbnailUrl &&
           !isUpcoming && (
             <View style={styles.content}>
@@ -157,14 +155,15 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
                 source={thumbnailUrl}
                 style={styles.streamImageCover as ImageStyle}
               />
-              {livestream.status === LivestreamStatus.live && (
+              {(livestream.status === RoomStatus.live ||
+                livestream.status === RoomStatus.waiting_reconnect) && (
                 <View style={styles.streamStatusLive}>
                   <Typography.CaptionBold style={styles.streamStatusText}>
                     LIVE
                   </Typography.CaptionBold>
                 </View>
               )}
-              {livestream.status === LivestreamStatus.recorded && (
+              {livestream.status === RoomStatus.recorded && (
                 <View style={styles.streamStatusRecorded}>
                   <Typography.CaptionBold style={styles.streamStatusText}>
                     RECORDED

package/src/v4/component/MyStories/StoryCircleItem.tsx

@@ -31,13 +31,13 @@ const StoryCircleItem: FC<IStoryCircleItem> = ({
   const styles = useStyles();
   const storyRingColor: string[] = storyTarget?.hasUnseen
     ? (getUiKitConfig({
-      page: PageID.StoryPage,
-      component: ComponentID.StoryTab,
-      element: ElementID.StoryRing,
-    })?.progress_color as string[]) ?? ['#e2e2e2', '#e2e2e2']
+        page: PageID.StoryPage,
+        component: ComponentID.StoryTab,
+        element: ElementID.StoryRing,
+      })?.progress_color as string[]) ?? ['#e2e2e2', '#e2e2e2']
     : storyTarget?.failedStoriesCount > 0
-      ? ['#DE1029', '#DE1029']
-      : ['#e2e2e2', '#e2e2e2'];
+    ? ['#DE1029', '#DE1029']
+    : ['#e2e2e2', '#e2e2e2'];
 
   useEffect(() => {
     if (storyTarget.targetType !== 'community') return;
@@ -68,8 +68,8 @@ const StoryCircleItem: FC<IStoryCircleItem> = ({
         source={
           avatarUrl
             ? {
-              uri: avatarUrl,
-            }
+                uri: avatarUrl,
+              }
             : require('../../assets/images/userAvatar.png')
         }
         style={styles.communityAvatar}

package/src/v4/component/PostContent/index.tsx

@@ -43,9 +43,7 @@ const PostContent: React.FC<IPostContent> = ({
   const [imagePosts, setImagePosts] = useState<string[]>([]);
   const [videoPosts, setVideoPosts] = useState<IVideoPost[]>([]);
   const [pollIds, setPollIds] = useState<{ pollId: string }[]>([]);
-  const [livestreamId, setLivestreamId] = useState<Amity.Stream['streamId'][]>(
-    []
-  );
+  const [livestreamId, setLivestreamId] = useState<Amity.Room['roomId'][]>([]);
 
   const [imagePostsFullSize, setImagePostsFullSize] = useState<MediaUri[]>([]);
   const [videoPostsFullSize, setVideoPostsFullSize] = useState<MediaUri[]>([]);
@@ -96,7 +94,7 @@ const PostContent: React.FC<IPostContent> = ({
       const images: string[] = [];
       const videos: IVideoPost[] = [];
       const polls: { pollId: string }[] = [];
-      const livestreams: Amity.Stream['streamId'][] = [];
+      const livestreams: Amity.Room['roomId'][] = [];
 
       response.forEach((item) => {
         if (item?.dataType === 'image' && item?.data?.fileId) {
@@ -119,9 +117,9 @@ const PostContent: React.FC<IPostContent> = ({
           if (!polls.some((poll) => poll.pollId === item.data.pollId)) {
             polls.push(item.data);
           }
-        } else if (item?.dataType === 'liveStream') {
-          if (!livestreams.includes(item.data.streamId)) {
-            livestreams.push(item.data.streamId);
+        } else if (item?.dataType === 'room') {
+          if (!livestreams.includes(item.data.roomId)) {
+            livestreams.push(item.data.roomId);
           }
         }
       });
@@ -344,7 +342,7 @@ const PostContent: React.FC<IPostContent> = ({
         <LivestreamContent
           post={post}
           onPressPost={onPressPost}
-          streamId={livestreamId[0]}
+          roomId={livestreamId[0]}
         />
       ) : (
         renderMediaPosts()

package/src/v4/component/PostMenu/index.tsx

@@ -255,7 +255,7 @@ export function PostMenu({ pageId, componentId, post }: PostMenuProps) {
                 ],
               },
               (post?.creator?.userId === myId || isIAmModerator) &&
-                ((childrenPost?.dataType !== 'liveStream' &&
+                ((childrenPost?.dataType !== 'room' &&
                   childrenPost?.dataType !== 'poll') ||
                   (childrenPost?.dataType === 'poll' &&
                     pollData?.status === 'open')) &&
@@ -280,7 +280,7 @@ export function PostMenu({ pageId, componentId, post }: PostMenuProps) {
               </TouchableOpacity>
             )}
             {post?.creator?.userId === myId &&
-              childrenPost?.dataType !== 'liveStream' &&
+              childrenPost?.dataType !== 'room' &&
               childrenPost?.dataType !== 'poll' && (
                 <TouchableOpacity
                   onPress={goToEditPost}

package/src/v4/component/PreviewLink/LinkPreview.tsx

@@ -21,7 +21,7 @@ export const LinkPreview = React.memo(
 
       const fetchData = async () => {
         setData(undefined);
-        const newData = await getPreviewData(text, 5000);
+        const newData = await getPreviewData(text);
         if (!isCancelled) {
           setData(newData);
         }
@@ -37,8 +37,8 @@ export const LinkPreview = React.memo(
 
     const renderImageNode = React.useCallback(
       (image: PreviewDataImage) => {
-        const imageUrl = image?.url
-          ? { uri: image.url }
+        const imageUrl = image
+          ? { uri: image }
           : require('../../assets/images/previewLinkDefaultBackground.png');
 
         return (

package/src/v4/component/PreviewLink/utils.ts

@@ -2,6 +2,7 @@ import { decode } from 'html-entities';
 import { Image } from 'react-native';
 
 import { PreviewData, PreviewDataImage, Size } from './types';
+import { Client } from '@amityco/ts-sdk-react-native';
 
 export const getActualImageUrl = (baseUrl: string, imageUrl?: string) => {
   let actualImageUrl = imageUrl?.trim();
@@ -54,7 +55,7 @@ export const getImageSize = (url: string) => {
 
 // Functions below use functions from the same file and mocks are not working
 /* istanbul ignore next */
-export const getPreviewData = async (text: string, requestTimeout = 5000) => {
+export const getPreviewData = async (text: string) => {
   const previewData: PreviewData = {
     description: undefined,
     image: undefined,
@@ -77,114 +78,14 @@ export const getPreviewData = async (text: string, requestTimeout = 5000) => {
       url = 'https://' + url;
     }
 
-    let abortControllerTimeout: number;
-    const abortController = new AbortController();
+    const request = await Client.fetchLinkPreview(url);
 
-    const request = fetch(url, {
-      headers: {
-        'User-Agent':
-          'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36',
-      },
-      signal: abortController.signal,
-    });
-
-    abortControllerTimeout = setTimeout(() => {
-      abortController.abort();
-    }, requestTimeout);
-
-    const response = await request;
-
-    clearTimeout(abortControllerTimeout);
-
-    previewData.link = url;
-
-    const contentType = response.headers.get('content-type') ?? '';
-
-    if (REGEX_IMAGE_CONTENT_TYPE.test(contentType)) {
-      const image = await getPreviewDataImage(url);
-      previewData.image = image;
-      return previewData;
-    }
-
-    const html = await response.text();
-
-    // Some pages return undefined
-    if (!html) return previewData;
-
-    const head = html.substring(0, html.indexOf('<body'));
-
-    // Get page title
-    const title = REGEX_TITLE.exec(head);
-    previewData.title = getHtmlEntitiesDecodedText(title?.[1]);
-
-    let matches: RegExpMatchArray | null;
-    const meta: RegExpMatchArray[] = [];
-    while ((matches = REGEX_META.exec(head)) !== null) {
-      // @ts-ignore
-      meta.push([...matches]);
-    }
-
-    const metaPreviewData = meta.reduce<{
-      description?: string;
-      imageUrl?: string;
-      title?: string;
-    }>(
-      (acc, curr) => {
-        // Verify that we have property/name and content
-        // Note that if a page will specify property, name and content in the same meta, regex will fail
-        if (!curr[2] || !curr[3]) return acc;
-
-        // Only take the first occurrence
-        // For description take the meta description tag into consideration
-        const description =
-          !acc.description &&
-          (getContent(curr[2], curr[3], 'og:description') ||
-            getContent(curr[2], curr[3], 'description'));
-        const ogImage =
-          !acc.imageUrl && getContent(curr[2], curr[3], 'og:image');
-        const ogTitle = !acc.title && getContent(curr[2], curr[3], 'og:title');
-
-        return {
-          description: description
-            ? getHtmlEntitiesDecodedText(description)
-            : acc.description,
-          imageUrl: ogImage ? getActualImageUrl(url, ogImage) : acc.imageUrl,
-          title: ogTitle ? getHtmlEntitiesDecodedText(ogTitle) : acc.title,
-        };
-      },
-      { title: previewData.title }
-    );
-
-    previewData.description = metaPreviewData.description;
-    previewData.image = await getPreviewDataImage(metaPreviewData.imageUrl);
-    previewData.title = metaPreviewData.title;
-
-    if (!previewData.image) {
-      let imageMatches: RegExpMatchArray | null;
-      const tags: RegExpMatchArray[] = [];
-      while ((imageMatches = REGEX_IMAGE_TAG.exec(html)) !== null) {
-        // @ts-ignore
-        tags.push([...imageMatches]);
-      }
-
-      let images: PreviewDataImage[] = [];
-
-      for (const tag of tags
-        .filter((t) => !t[1].startsWith('data'))
-        .slice(0, 5)) {
-        const image = await getPreviewDataImage(getActualImageUrl(url, tag[1]));
-
-        if (!image) continue;
-
-        images = [...images, image];
-      }
-
-      previewData.image = images.sort(
-        (a, b) => b.height * b.width - a.height * a.width
-      )[0];
-    }
-
-    return previewData;
+    return {
+      description: request.description || undefined,
+      image: request.image || undefined,
+      link: url,
+      title: request.title || undefined,
+    };
   } catch {
     return previewData;
   }

package/src/v4/component/TargetSelectionPage/TargetSelectionPage.tsx

@@ -13,11 +13,12 @@ import type { MyMD3Theme } from '../../../providers/amity-ui-kit-provider';
 import CloseButtonIconElement from '../../PublicApi/Elements/CloseButtonIconElement/CloseButtonIconElement';
 import { PageID, ComponentID, ElementID } from '../../enum';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useNavigation } from '@react-navigation/native';
 import TextKeyElement from '../../PublicApi/Elements/TextKeyElement/TextKeyElement';
 import { Typography } from '../Typography/Typography';
 import { useStyles } from './styles';
 import { Illustration } from '../../../v4/PublicApi/Components/AmityEmptyNewsFeedComponent/Elements';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 export type FeedParams = {
   targetId: string;
@@ -48,21 +49,23 @@ interface ITargetSelectionPage {
     postSetting,
     needApprovalOnPostCreation,
   }: FeedParams) => void;
+  onClickClose?: () => void;
 }
 
 const TargetSelectionPage = ({
   pageId,
   hideMyTimelineTarget = false,
   onSelectFeed,
+  onClickClose,
 }: ITargetSelectionPage) => {
   const { client } = useAuth();
-  const navigation = useNavigation();
+
   const defaultTheme = useTheme() as MyMD3Theme;
 
   const user = useUser((client as Amity.Client).userId);
   const { communities, onNextCommunityPage, loading } = useCommunities();
   const { themeStyles, accessibilityId } = useAmityPage({ pageId });
-
+  const navigation = useNavigation<NativeStackNavigationProp<any>>();
   const theme = themeStyles || defaultTheme;
   const styles = useStyles(theme);
 
@@ -102,7 +105,12 @@ const TargetSelectionPage = ({
       <View style={styles.header}>
         <TouchableOpacity
           style={styles.closeButton}
-          onPress={() => navigation.goBack()}
+          onPress={() => {
+            onClickClose?.();
+            if (navigation.canGoBack()) {
+              navigation.goBack();
+            }
+          }}
         >
           <CloseButtonIconElement style={styles.closeIcon} pageID={pageId} />
         </TouchableOpacity>

package/src/v4/component/Toast/index.tsx

@@ -8,8 +8,8 @@ import { informative, failed, success } from '../../assets/icons';
 import { CircularProgressIndicator } from '../CircularProgressIndicator';
 
 const Toast = () => {
-  const { styles, theme } = useStyles();
   const { hideToast, toast } = useToast();
+  const { styles, theme } = useStyles(toast.bottomPosition);
   const timeoutRef = useRef<number | null>(null);
   const fadeIn = useRef(new Animated.Value(0)).current;
 

package/src/v4/component/Toast/styles.ts

@@ -3,7 +3,7 @@ import { useTheme } from 'react-native-paper';
 import type { MyMD3Theme } from '../../../providers/amity-ui-kit-provider';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-export const useStyles = () => {
+export const useStyles = (bottomPosition: number = 16) => {
   const theme = useTheme<MyMD3Theme>();
   const { bottom } = useSafeAreaInsets();
 
@@ -13,7 +13,7 @@ export const useStyles = () => {
       zIndex: 999,
       width: '90%',
       borderRadius: 8,
-      bottom: bottom + 16,
+      bottom: bottom + bottomPosition,
       paddingVertical: 16,
       alignSelf: 'center',
       flexDirection: 'row',

package/src/v4/elements/ActionButton/ActionButton.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import { useAmityElement } from '../../../v4/hook';
 import { ComponentID, ElementID, PageID } from '../../../v4/enum';
-import Button, { BUTTON_SIZE, ButtonProps } from '../../../v4/component/Button/Button';
+import Button, {
+  BUTTON_SIZE,
+  ButtonProps,
+} from '../../../v4/component/Button/Button';
 import { useStyles } from './styles';
 
 type ActionButtonProps = ButtonProps & {

package/src/v4/elements/ImageViewer/ImageViewer.tsx

@@ -27,7 +27,7 @@ const ImageViewer: FC<ImageViewerProps> = ({
   images,
   onNextImage,
   onPreviousImage,
-  onClose = () => { },
+  onClose = () => {},
 }) => {
   const [active, setActive] = useState(currentImageIndex);
   const scrollViewRef = useRef<ScrollView>(null);

package/src/v4/elements/VideoViewer/VideoViewer.tsx

@@ -27,7 +27,7 @@ const VideoViewer: FC<VideoViewerProps> = ({
   images,
   onNextImage,
   onPreviousImage,
-  onClose = () => { },
+  onClose = () => {},
 }) => {
   const [active, setActive] = useState(currentImageIndex);
   const scrollViewRef = useRef<ScrollView>(null);

package/src/v4/enum/roomStatus.ts

@@ -0,0 +1,7 @@
+export const RoomStatus = {
+  idle: 'idle' as Amity.RoomStatus,
+  live: 'live' as Amity.RoomStatus,
+  recorded: 'recorded' as Amity.RoomStatus,
+  ended: 'ended' as Amity.RoomStatus,
+  waiting_reconnect: 'waiting_reconnect' as Amity.RoomStatus,
+};

package/src/v4/features/community/Membership/components/MemberItem/MemberItem.tsx

@@ -9,8 +9,17 @@ import { useBottomSheet } from '../../../../../../redux/slices/bottomSheetSlice'
 import MenuAction from '../../../../../../v4/elements/MenuAction';
 import { MemberRoles } from '../../../../../../v4/constants';
 import { useToast } from '../../../../../../v4/stores/slices/toast';
-import { demote, promote, report, trash, unreport } from '../../../../../../v4/assets/icons';
-import { checkEditRolePermission, isModerator } from '../../../../../../v4/utils/permissions';
+import {
+  demote,
+  promote,
+  report,
+  trash,
+  unreport,
+} from '../../../../../../v4/assets/icons';
+import {
+  checkEditRolePermission,
+  isModerator,
+} from '../../../../../../v4/utils/permissions';
 import {
   useRolesQuery,
   useMembersQuery,

package/src/v4/features/community/shared/components/Privacy/index.tsx

@@ -5,7 +5,10 @@ import { Radio } from '../../../../../../v4/component/core/Radio';
 import { ElementID, PageID } from '../../../../../../v4/enum';
 import FormLabel from '../../../../../../v4/elements/FormLabel';
 import { AmityCommunityPrivacyEnum } from '../../types';
-import { public as $public, private as $private } from '../../../../../../v4/assets/icons';
+import {
+  public as $public,
+  private as $private,
+} from '../../../../../../v4/assets/icons';
 import { Title } from '../../../../../../v4/elements';
 import FormDescription from '../../../../../../v4/elements/FormDescription';
 import CommunityPrivacyIcon from '../../../../../../v4/elements/CommunityPrivacyIcon';

package/src/v4/hook/index.ts

@@ -30,3 +30,5 @@ export * from './usePendingPostQuery';
 export * from './useMembersQuery';
 export * from './useRolesQuery';
 export * from './useFlagUserQuery';
+export * from './usePostSubscription';
+export * from './useRoomSubscription';

package/src/v4/hook/useCustomRankingGlobalFeed.ts

@@ -51,7 +51,7 @@ export const useCustomRankingGlobalFeed = () => {
                   if (
                     data?.dataType === 'image' ||
                     data?.dataType === 'video' ||
-                    // data?.dataType === 'liveStream' ||
+                    data?.dataType === 'room' ||
                     data?.dataType === 'poll'
                   ) {
                     resolve(post);

package/src/v4/hook/useImagePicker.ts

@@ -9,7 +9,10 @@ import {
 
 import { isValidImageType } from '../utils';
 import { useCameraPermission } from './usePermissions';
-import { deleteAmityFile, uploadImageFile } from '../../providers/file-provider';
+import {
+  deleteAmityFile,
+  uploadImageFile,
+} from '../../providers/file-provider';
 
 export type UseImagePickerResponse = {
   progress: number;

package/src/v4/hook/usePostSubscription.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import {
+  getPostTopic,
+  PostRepository,
+  subscribeTopic,
+} from '@amityco/ts-sdk-react-native';
+
+export const usePostSubscription = (postId: string) => {
+  const [subscribedPost, setSubscribedPost] = useState<Amity.Post>(null);
+
+  useEffect(() => {
+    let unsubscribe: () => void;
+    if (postId) {
+      unsubscribe = PostRepository.getPost(postId, ({ data }) => {
+        setSubscribedPost(data);
+      });
+    }
+    return () => {
+      unsubscribe && unsubscribe();
+    };
+  }, [postId]);
+
+  useEffect(() => {
+    let unsubscribe: () => void;
+    if (subscribedPost) {
+      unsubscribe = subscribeTopic(getPostTopic(subscribedPost));
+    }
+    return () => {
+      unsubscribe && unsubscribe();
+    };
+  }, [subscribedPost]);
+
+  return { subscribedPost };
+};

package/src/v4/hook/useRoomSubscription.ts

@@ -0,0 +1,19 @@
+import {
+  getRoomWatcherTopic,
+  subscribeTopic,
+} from '@amityco/ts-sdk-react-native';
+import { useEffect } from 'react';
+
+export const useRoomSubscription = ({ room }: { room?: Amity.Room | null }) => {
+  useEffect(() => {
+    const unsubscriber: Amity.Unsubscriber[] = [];
+
+    if (room?.roomId && room?.status !== 'recorded') {
+      unsubscriber.push(subscribeTopic(getRoomWatcherTopic(room)));
+    }
+
+    return () => unsubscriber.forEach((fn) => fn());
+  }, [room, room?.roomId]);
+
+  return null;
+};

package/src/v4/index.tsx

@@ -11,7 +11,7 @@ export { default as AmityMyCommunitiesSearchPage } from './PublicApi/Pages/Amity
 export { default as AmityAllCategoriesPage } from './PublicApi/Pages/AmityAllCategoriesPage/AmityAllCategoriesPage';
 export { default as AmityCommunitiesByCategoryPage } from './PublicApi/Pages/AmityCommunitiesByCategoryPage/AmityCommunitiesByCategoryPage';
 export { default as AmityCommunityProfilePage } from './PublicApi/Pages/AmityCommunityProfilePage/AmityCommunityProfilePage';
-// export { default as AmityCreateLivestreamPage } from './PublicApi/Pages/AmityCreateLivestreamPage';
+export { default as AmityCreateLivestreamPage } from './PublicApi/Pages/AmityCreateLivestreamPage';
 export { default as AmityLivestreamPostTargetSelectionPage } from './PublicApi/Pages/AmityLivestreamPostTargetSelectionPage';
 export { default as AmityLivestreamTerminatedPage } from './PublicApi/Pages/AmityLivestreamTerminatedPage';
 export { default as AmityLivestreamPlayerPage } from './PublicApi/Pages/AmityLivestreamPlayerPage';

package/src/v4/providers/BehaviourProvider.tsx

@@ -31,6 +31,7 @@ export const BehaviourProvider = ({
       AmityCommunitySettingPageBehavior: {},
       AmityCommunityMembershipPageBehavior: {},
       AmityCommunityNotificationSettingPageBehavior: {},
+      AmityPostComposerPageBehavior: {},
     }),
     []
   );