@amityco/react-native-social-uikit 4.0.0-93c391d.0 → 4.0.0-9b57f0b0.0

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

@@ -10,6 +10,8 @@ import { closeIcon, toastIcon } from '../../../svg/svg-xml-list';
 import { useStyles } from './styles';
 import { useTheme } from 'react-native-paper';
 import type { MyMD3Theme } from '../../../providers/amity-ui-kit-provider';
+import uiSlice from '../../../redux/slices/uiSlice';
+import { useUIKitDispatch } from '../../../redux/store';
 
 interface OverlayImageProps {
   source: string;
@@ -21,7 +23,6 @@ interface OverlayImageProps {
     index: number,
     originalPath: string
   ) => void;
-  onUploadError?: (hasError: boolean, source: string) => void;
   index?: number;
   isUploaded: boolean;
   fileId?: string;
@@ -35,7 +36,6 @@ const LoadingImage = ({
   onClose,
   index,
   onLoadFinish,
-  onUploadError,
   isUploaded = false,
   fileId = '',
   isEditMode = false,
@@ -44,6 +44,8 @@ const LoadingImage = ({
   setIsUploading,
 }: OverlayImageProps) => {
   const theme = useTheme() as MyMD3Theme;
+  const dispatch = useUIKitDispatch();
+  const { showToastMessage } = uiSlice.actions;
   const [loading, setLoading] = useState(true);
   const [progress, setProgress] = useState(0);
   const [isProcess, setIsProcess] = useState<boolean>(false);
@@ -82,39 +84,33 @@ const LoadingImage = ({
             source
           );
       } else {
-        setIsUploading(false);
         handleLoadEnd();
-        setIsProcess(false);
+        dispatch(showToastMessage({ toastMessage: 'Failed to upload file' }));
         setIsUploadError(true);
-        onUploadError?.(true, source);
       }
     } catch (error) {
       handleLoadEnd();
-      setIsProcess(false);
-      setIsUploading(false);
+      dispatch(showToastMessage({ toastMessage: 'Failed to upload file' }));
       setIsUploadError(true);
-      onUploadError?.(true, source);
     }
   }, [
+    dispatch,
     handleLoadEnd,
     index,
     onLoadFinish,
-    onUploadError,
     setIsUploading,
+    showToastMessage,
     source,
   ]);
 
   const handleDelete = async () => {
-    if (fileId && !isEditMode) {
+    if (!fileId) return null;
+    if (!isEditMode) {
       await deleteAmityFile(fileId);
     }
     onClose && onClose(source, fileId, postId);
   };
   useEffect(() => {
-    setIsUploadError(false);
-    onUploadError?.(false, source);
-    setProgress(0);
-    setIsProcess(false);
     if (isUploaded) {
       setLoading(false);
     } else {
@@ -155,21 +151,19 @@ const LoadingImage = ({
           )}
         </View>
       )}
-      {!loading && isUploadError && (
-        <View style={styles.failedOverlay}>
-          <TouchableOpacity style={styles.errorOverlay} onPress={onRetryUpload}>
-            <SvgXml xml={toastIcon()} width="28" height="28" />
-          </TouchableOpacity>
-        </View>
+      {!loading && isUploadError ? (
+        <TouchableOpacity style={styles.overlay} onPress={onRetryUpload}>
+          <SvgXml xml={toastIcon()} width="24" height="24" />
+        </TouchableOpacity>
+      ) : (
+        <TouchableOpacity
+          style={styles.closeButton}
+          disabled={loading || isProcess}
+          onPress={handleDelete}
+        >
+          <SvgXml xml={closeIcon(theme.colors.base)} width="12" height="12" />
+        </TouchableOpacity>
       )}
-
-      <TouchableOpacity
-        style={styles.closeButton}
-        disabled={(loading || isProcess) && !isUploadError}
-        onPress={handleDelete}
-      >
-        <SvgXml xml={closeIcon(theme.colors.base)} width="12" height="12" />
-      </TouchableOpacity>
     </View>
   );
 };

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

@@ -18,28 +18,12 @@ export const useStyles = () => {
       height: '100%',
       resizeMode: 'cover',
       borderRadius: 5,
-      position: 'relative',
     },
     overlay: {
       ...StyleSheet.absoluteFillObject,
       justifyContent: 'center',
       alignItems: 'center',
     },
-    failedOverlay: {
-      ...StyleSheet.absoluteFillObject,
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: 'rgba(0, 0, 0, 0.4)',
-      borderRadius: 5,
-    },
-    errorOverlay: {
-      position: 'absolute',
-      top: '50%',
-      left: 0,
-      right: 0,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
     progressBar: {
       marginVertical: 10,
     },
@@ -56,7 +40,6 @@ export const useStyles = () => {
       padding: 7,
       backgroundColor: 'rgba(0, 0, 0, 0.4)',
       borderRadius: 72,
-      zIndex: 10,
     },
   });
 };

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

@@ -35,7 +35,6 @@ interface OverlayImageProps {
     originalPath: string,
     thumbNail: string
   ) => void;
-  onUploadError?: (hasError: boolean, source: string) => void;
   index?: number;
   isUploaded: boolean;
   fileId?: string;
@@ -51,7 +50,6 @@ const LoadingVideo = ({
   onClose,
   index,
   onLoadFinish,
-  onUploadError,
   isUploaded = false,
   thumbNail,
   onPlay,
@@ -131,30 +129,23 @@ const LoadingVideo = ({
       } else {
         handleLoadEnd();
         dispatch(showToastMessage({ toastMessage: 'Failed to upload file' }));
-        setIsProcess(false);
         setIsUploadError(true);
-        onUploadError?.(true, source);
       }
     } catch (error) {
       handleLoadEnd();
       dispatch(showToastMessage({ toastMessage: 'Failed to upload file' }));
-      setIsProcess(false);
       setIsUploadError(true);
-      onUploadError?.(true, source);
     }
   }, [source]);
 
   const handleDelete = async () => {
-    if (fileId && !isEditMode) {
+    if (!fileId) return null;
+    if (!isEditMode) {
       await deleteAmityFile(fileId);
     }
     onClose && onClose(source, fileId, postId);
   };
   useEffect(() => {
-    setIsUploadError(false);
-    onUploadError?.(false, source);
-    setProgress(0);
-    setIsProcess(false);
     if (isUploaded) {
       setLoading(false);
     } else {
@@ -225,7 +216,7 @@ const LoadingVideo = ({
       ) : (
         <TouchableOpacity
           style={styles.closeButton}
-          disabled={(loading || isProcess) && !isUploadError}
+          disabled={loading || isProcess}
           onPress={handleDelete}
         >
           <SvgXml xml={closeIcon(theme.colors.base)} width="12" height="12" />

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

@@ -2,13 +2,12 @@ import { Image, Text, TouchableOpacity, View } from 'react-native';
 import React, { FC, useEffect, useState } from 'react';
 import { SvgXml } from 'react-native-svg';
 import {
-  errorIcon,
   officialIcon,
   privateIcon,
   storyRing,
 } from '../../../svg/svg-xml-list';
 import { ComponentID, ElementID, ImageSizeState, PageID } from '../../enum';
-import { useFile, useStoryPermission } from '../../hook';
+import { useFile } from '../../hook';
 import useConfig from '../../hook/useConfig';
 import { useStyles } from './styles';
 import { CommunityRepository } from '@amityco/ts-sdk-react-native';
@@ -27,20 +26,18 @@ const StoryCircleItem: FC<IStoryCircleItem> = ({
   const theme = useTheme() as MyMD3Theme;
   const [avatarUrl, setAvatarUrl] = useState(null);
   const [communityData, setCommunityData] = useState<Amity.Community>(null);
-  const hasStoryPermission = useStoryPermission(storyTarget.targetId);
   const { getImage } = useFile();
   const { getUiKitConfig } = useConfig();
   const styles = useStyles();
-  const storyRingColor: string[] =
-    hasStoryPermission && storyTarget?.failedStoriesCount > 0
-      ? ['#DE1029', '#DE1029']
-      : storyTarget?.hasUnseen
-      ? (getUiKitConfig({
-          page: PageID.StoryPage,
-          component: ComponentID.StoryTab,
-          element: ElementID.StoryRing,
-        })?.progress_color as string[]) ?? ['#e2e2e2', '#e2e2e2']
-      : ['#e2e2e2', '#e2e2e2'];
+  const storyRingColor: string[] = storyTarget?.hasUnseen
+    ? (getUiKitConfig({
+        page: PageID.StoryPage,
+        component: ComponentID.StoryTab,
+        element: ElementID.StoryRing,
+      })?.progress_color as string[]) ?? ['#e2e2e2', '#e2e2e2']
+    : storyTarget?.failedStoriesCount > 0
+    ? ['#DE1029', '#DE1029']
+    : ['#e2e2e2', '#e2e2e2'];
 
   useEffect(() => {
     if (storyTarget.targetType !== 'community') return;
@@ -83,16 +80,12 @@ const StoryCircleItem: FC<IStoryCircleItem> = ({
         height={68}
         xml={storyRing(storyRingColor[0], storyRingColor[1])}
       />
-      {hasStoryPermission && storyTarget?.failedStoriesCount > 0 ? (
-        <View style={styles.errorIcon}>
-          <SvgXml width={16} height={16} xml={errorIcon()} />
-        </View>
-      ) : communityData?.isOfficial ? (
+      {communityData?.isOfficial && (
         <SvgXml
           style={styles.officialIcon}
           xml={officialIcon(theme.colors.primary)}
         />
-      ) : null}
+      )}
       <View style={styles.textRow}>
         {!communityData?.isPublic && (
           <SvgXml width={17} height={17} xml={privateIcon(theme.colors.base)} />

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

@@ -82,11 +82,6 @@ export const useStyles = () => {
       left: 45,
       top: 42,
     },
-    errorIcon: {
-      position: 'absolute',
-      left: 45,
-      bottom: 24,
-    },
     scrollContainer: {
       paddingVertical: 4,
     },

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/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/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: 'waitingReconnect' as Amity.RoomStatus,
+};

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/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/routes/RouteParamList.tsx

@@ -72,7 +72,7 @@ export type RootStackParamList = {
     targetType: string;
   };
   LivestreamPlayer: {
-    streamId: string;
+    roomId: string;
     post: Amity.Post;
   };
   LivestreamTerminated: {

package/src/v4/stores/slices/toast.ts

@@ -10,12 +10,14 @@ type ToastState = {
   message: string;
   type: 'failed' | 'success' | 'informative' | 'loading';
   duration?: number;
+  bottomPosition?: number;
 };
 const initialState: ToastState = {
   visible: false,
   message: '',
   type: 'loading',
   duration: 2500,
+  bottomPosition: 16,
 };
 
 const toastSlice = createSlice({
@@ -27,12 +29,15 @@ const toastSlice = createSlice({
       state.message = action.payload.message;
       state.type = action.payload.type;
       state.duration = action.payload.duration ?? initialState.duration;
+      state.bottomPosition =
+        action.payload.bottomPosition ?? initialState.bottomPosition;
     },
     hideToast: (state) => {
       state.visible = false;
       state.message = '';
       state.type = 'loading';
       state.duration = 2500;
+      state.bottomPosition = 16;
     },
   },
 });

package/uikit.config.json

@@ -287,7 +287,7 @@
       "image": "create_poll_button"
     },
     "social_home_page/create_post_menu/create_livestream_button": {
-      "text": "Livestream",
+      "text": "Live stream",
       "image": "create_livestream_button"
     },
     "select_post_target_page/*/close_button": {

package/lib/commonjs/v4/enum/livestreamStatus.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LivestreamStatus = void 0;
-const LivestreamStatus = exports.LivestreamStatus = {
-  idle: 'idle',
-  live: 'live',
-  recorded: 'recorded',
-  ended: 'ended'
-};
-//# sourceMappingURL=livestreamStatus.js.map

package/lib/commonjs/v4/enum/livestreamStatus.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["LivestreamStatus","exports","idle","live","recorded","ended"],"sourceRoot":"../../../../src","sources":["v4/enum/livestreamStatus.ts"],"mappings":";;;;;;AAAO,MAAMA,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,GAAG;EAC9BE,IAAI,EAAE,MAA4B;EAClCC,IAAI,EAAE,MAA4B;EAClCC,QAAQ,EAAE,UAAgC;EAC1CC,KAAK,EAAE;AACT,CAAC","ignoreList":[]}

package/lib/module/v4/enum/livestreamStatus.js

@@ -1,7 +0,0 @@
-export const LivestreamStatus = {
-  idle: 'idle',
-  live: 'live',
-  recorded: 'recorded',
-  ended: 'ended'
-};
-//# sourceMappingURL=livestreamStatus.js.map

package/lib/module/v4/enum/livestreamStatus.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["LivestreamStatus","idle","live","recorded","ended"],"sourceRoot":"../../../../src","sources":["v4/enum/livestreamStatus.ts"],"mappings":"AAAA,OAAO,MAAMA,gBAAgB,GAAG;EAC9BC,IAAI,EAAE,MAA4B;EAClCC,IAAI,EAAE,MAA4B;EAClCC,QAAQ,EAAE,UAAgC;EAC1CC,KAAK,EAAE;AACT,CAAC","ignoreList":[]}

package/lib/typescript/src/v4/enum/livestreamStatus.d.ts

@@ -1,7 +0,0 @@
-export declare const LivestreamStatus: {
-    idle: Amity.StreamStatus;
-    live: Amity.StreamStatus;
-    recorded: Amity.StreamStatus;
-    ended: Amity.StreamStatus;
-};
-//# sourceMappingURL=livestreamStatus.d.ts.map

package/lib/typescript/src/v4/enum/livestreamStatus.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"livestreamStatus.d.ts","sourceRoot":"","sources":["../../../../../src/v4/enum/livestreamStatus.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB;UACX,KAAK,CAAC,YAAY;UAClB,KAAK,CAAC,YAAY;cACV,KAAK,CAAC,YAAY;WACxB,KAAK,CAAC,YAAY;CACrC,CAAC"}

package/src/v4/enum/livestreamStatus.ts

@@ -1,6 +0,0 @@
-export const LivestreamStatus = {
-  idle: 'idle' as Amity.StreamStatus,
-  live: 'live' as Amity.StreamStatus,
-  recorded: 'recorded' as Amity.StreamStatus,
-  ended: 'ended' as Amity.StreamStatus,
-};