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

package/src/v4/assets/icons/lock.tsx

@@ -1,9 +1,10 @@
-export const icon = (
-  color: string = '#292B32'
-) => `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 14.1562C9.625 14.1562 9.34375 13.875 9.34375 13.5V12C9.34375 11.6484 9.625 11.3438 10 11.3438C10.3516 11.3438 10.6562 11.6484 10.6562 12V13.5C10.6562 13.875 10.3516 14.1562 10 14.1562ZM15.25 10.125V15.375C15.25 16.0078 14.7344 16.5 14.125 16.5H5.875C5.24219 16.5 4.75 16.0078 4.75 15.375V10.125C4.75 9.51562 5.24219 9 5.875 9H6.625V7.875C6.625 6.02344 8.125 4.5 10 4.5C11.875 4.52344 13.375 6.04688 13.375 7.92188V9H14.125C14.7344 9 15.25 9.51562 15.25 10.125ZM7.75 9H12.25V7.875C12.25 6.65625 11.2188 5.625 10 5.625C8.75781 5.625 7.75 6.65625 7.75 7.875V9ZM14.125 10.125H5.875V15.375H14.125V10.125Z" fill="${color}"/>
-</svg>
-
+export const icon =
+  () => `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 20 20">
+      <path
+        fill="currentColor"
+        d="M15.5 8c.813 0 1.5.688 1.5 1.5v7a1.5 1.5 0 01-1.5 1.5h-11A1.48 1.48 0 013 16.5v-7A1.5 1.5 0 014.5 8h1V6.5C5.5 4.031 7.5 2 10 2c2.5.031 4.5 2.063 4.5 4.563V8h1zM7 6.5V8h6V6.5c0-1.625-1.375-3-3-3-1.656 0-3 1.375-3 3zm8.5 10v-7h-11v7h11z"
+      ></path>
+    </svg>
 `;
 
 export default icon;

package/src/v4/assets/icons/poll.tsx

@@ -1,6 +1,6 @@
 export const icon =
-  () => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.1875 4.375C19.1016 4.375 19.875 5.14844 19.875 6.0625V18.4375C19.875 19.3867 19.1016 20.125 18.1875 20.125H5.8125C4.86328 20.125 4.125 19.3867 4.125 18.4375V6.0625C4.125 5.14844 4.86328 4.375 5.8125 4.375H18.1875ZM18.1875 18.4375V6.0625H5.8125V18.4375H18.1875ZM8.34375 16.75C8.02734 16.75 7.78125 16.5039 7.78125 16.1875V11.6875C7.78125 11.4062 8.02734 11.125 8.34375 11.125H8.90625C9.1875 11.125 9.46875 11.4062 9.46875 11.6875V16.1875C9.46875 16.5039 9.1875 16.75 8.90625 16.75H8.34375ZM11.7188 16.75C11.4023 16.75 11.1562 16.5039 11.1562 16.1875V8.3125C11.1562 8.03125 11.4023 7.75 11.7188 7.75H12.2812C12.5625 7.75 12.8438 8.03125 12.8438 8.3125V16.1875C12.8438 16.5039 12.5625 16.75 12.2812 16.75H11.7188ZM15.0938 16.75C14.7773 16.75 14.5312 16.5039 14.5312 16.1875V13.9375C14.5312 13.6562 14.7773 13.375 15.0938 13.375H15.6562C15.9375 13.375 16.2188 13.6562 16.2188 13.9375V16.1875C16.2188 16.5039 15.9375 16.75 15.6562 16.75H15.0938Z" fill="currentColor"/>
+  () => `<svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.1875 2.375C17.1016 2.375 17.875 3.14844 17.875 4.0625V16.4375C17.875 17.3867 17.1016 18.125 16.1875 18.125H3.8125C2.86328 18.125 2.125 17.3867 2.125 16.4375V4.0625C2.125 3.14844 2.86328 2.375 3.8125 2.375H16.1875ZM16.1875 16.4375V4.0625H3.8125V16.4375H16.1875ZM6.34375 14.75C6.02734 14.75 5.78125 14.5039 5.78125 14.1875V9.6875C5.78125 9.40625 6.02734 9.125 6.34375 9.125H6.90625C7.1875 9.125 7.46875 9.40625 7.46875 9.6875V14.1875C7.46875 14.5039 7.1875 14.75 6.90625 14.75H6.34375ZM9.71875 14.75C9.40234 14.75 9.15625 14.5039 9.15625 14.1875V6.3125C9.15625 6.03125 9.40234 5.75 9.71875 5.75H10.2812C10.5625 5.75 10.8438 6.03125 10.8438 6.3125V14.1875C10.8438 14.5039 10.5625 14.75 10.2812 14.75H9.71875ZM13.0938 14.75C12.7773 14.75 12.5312 14.5039 12.5312 14.1875V11.9375C12.5312 11.6562 12.7773 11.375 13.0938 11.375H13.6562C13.9375 11.375 14.2188 11.6562 14.2188 11.9375V14.1875C14.2188 14.5039 13.9375 14.75 13.6562 14.75H13.0938Z" fill="currentColor" style="fill:currentColor;fill:color(display-p3 0.1624 0.1694 0.1976);fill-opacity:1;"/>
 </svg>
 `;
 

package/src/v4/assets/icons/toast.tsx

@@ -1,18 +1,21 @@
-export const failed =
-  () => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125ZM12 19.2812C15.8672 19.2812 19.0312 16.1523 19.0312 12.25C19.0312 8.38281 15.8672 5.21875 12 5.21875C8.09766 5.21875 4.96875 8.38281 4.96875 12.25C4.96875 16.1523 8.09766 19.2812 12 19.2812ZM13.4766 15.625C13.4766 16.4688 12.8086 17.1016 12 17.1016C11.1562 17.1016 10.5234 16.4688 10.5234 15.625C10.5234 14.8164 11.1562 14.1484 12 14.1484C12.8086 14.1484 13.4766 14.8164 13.4766 15.625ZM10.5938 8.20703C10.5938 7.96094 10.7695 7.75 11.0156 7.75H12.9492C13.1953 7.75 13.3711 7.96094 13.3711 8.20703L13.125 12.9883C13.125 13.1992 12.9141 13.375 12.7031 13.375H11.2617C11.0508 13.375 10.8398 13.1992 10.8398 12.9883L10.5938 8.20703Z" fill="white"/>
+export const failed = (
+  color: string = 'currentColor'
+) => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125ZM12 19.2812C15.8672 19.2812 19.0312 16.1523 19.0312 12.25C19.0312 8.38281 15.8672 5.21875 12 5.21875C8.09766 5.21875 4.96875 8.38281 4.96875 12.25C4.96875 16.1523 8.09766 19.2812 12 19.2812ZM13.4766 15.625C13.4766 16.4688 12.8086 17.1016 12 17.1016C11.1562 17.1016 10.5234 16.4688 10.5234 15.625C10.5234 14.8164 11.1562 14.1484 12 14.1484C12.8086 14.1484 13.4766 14.8164 13.4766 15.625ZM10.5938 8.20703C10.5938 7.96094 10.7695 7.75 11.0156 7.75H12.9492C13.1953 7.75 13.3711 7.96094 13.3711 8.20703L13.125 12.9883C13.125 13.1992 12.9141 13.375 12.7031 13.375H11.2617C11.0508 13.375 10.8398 13.1992 10.8398 12.9883L10.5938 8.20703Z" fill=${color}/>
 </svg>
 
 `;
 
-export const success =
-  () => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125ZM12 5.21875C8.09766 5.21875 4.96875 8.38281 4.96875 12.25C4.96875 16.1523 8.09766 19.2812 12 19.2812C15.8672 19.2812 19.0312 16.1523 19.0312 12.25C19.0312 8.38281 15.8672 5.21875 12 5.21875ZM16.9219 9.82422C17.0625 9.96484 17.0625 10.2461 16.9219 10.4219L10.8398 16.4336C10.6641 16.6094 10.418 16.6094 10.2422 16.4336L7.04297 13.1992C6.90234 13.0586 6.90234 12.7773 7.04297 12.6016L7.85156 11.8281C8.02734 11.6523 8.27344 11.6523 8.44922 11.8281L10.5586 13.9375L15.5156 9.01562C15.6914 8.83984 15.9727 8.83984 16.1133 9.01562L16.9219 9.82422Z" fill="currentColor"/>
+export const success = (
+  color: string = 'currentColor'
+) => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125ZM12 5.21875C8.09766 5.21875 4.96875 8.38281 4.96875 12.25C4.96875 16.1523 8.09766 19.2812 12 19.2812C15.8672 19.2812 19.0312 16.1523 19.0312 12.25C19.0312 8.38281 15.8672 5.21875 12 5.21875ZM16.9219 9.82422C17.0625 9.96484 17.0625 10.2461 16.9219 10.4219L10.8398 16.4336C10.6641 16.6094 10.418 16.6094 10.2422 16.4336L7.04297 13.1992C6.90234 13.0586 6.90234 12.7773 7.04297 12.6016L7.85156 11.8281C8.02734 11.6523 8.27344 11.6523 8.44922 11.8281L10.5586 13.9375L15.5156 9.01562C15.6914 8.83984 15.9727 8.83984 16.1133 9.01562L16.9219 9.82422Z" fill=${color}/>
 </svg>
 `;
 
-export const informative =
-  () => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125ZM12 19.2812C15.8672 19.2812 19.0312 16.1523 19.0312 12.25C19.0312 8.38281 15.8672 5.21875 12 5.21875C8.09766 5.21875 4.96875 8.38281 4.96875 12.25C4.96875 16.1523 8.09766 19.2812 12 19.2812ZM12 7.39844C12.8086 7.39844 13.4766 8.06641 13.4766 8.875C13.4766 9.71875 12.8086 10.3516 12 10.3516C11.1562 10.3516 10.5234 9.71875 10.5234 8.875C10.5234 8.06641 11.1562 7.39844 12 7.39844ZM13.9688 16.3281C13.9688 16.5742 13.7578 16.75 13.5469 16.75H10.4531C10.207 16.75 10.0312 16.5742 10.0312 16.3281V15.4844C10.0312 15.2734 10.207 15.0625 10.4531 15.0625H10.875V12.8125H10.4531C10.207 12.8125 10.0312 12.6367 10.0312 12.3906V11.5469C10.0312 11.3359 10.207 11.125 10.4531 11.125H12.7031C12.9141 11.125 13.125 11.3359 13.125 11.5469V15.0625H13.5469C13.7578 15.0625 13.9688 15.2734 13.9688 15.4844V16.3281Z" fill="white"/>
+export const informative = (
+  color: string = 'currentColor'
+) => `<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3.53125C16.7812 3.53125 20.7188 7.46875 20.7188 12.25C20.7188 17.0664 16.7812 20.9688 12 20.9688C7.18359 20.9688 3.28125 17.0664 3.28125 12.25C3.28125 7.46875 7.18359 3.53125 12 3.53125ZM12 19.2812C15.8672 19.2812 19.0312 16.1523 19.0312 12.25C19.0312 8.38281 15.8672 5.21875 12 5.21875C8.09766 5.21875 4.96875 8.38281 4.96875 12.25C4.96875 16.1523 8.09766 19.2812 12 19.2812ZM12 7.39844C12.8086 7.39844 13.4766 8.06641 13.4766 8.875C13.4766 9.71875 12.8086 10.3516 12 10.3516C11.1562 10.3516 10.5234 9.71875 10.5234 8.875C10.5234 8.06641 11.1562 7.39844 12 7.39844ZM13.9688 16.3281C13.9688 16.5742 13.7578 16.75 13.5469 16.75H10.4531C10.207 16.75 10.0312 16.5742 10.0312 16.3281V15.4844C10.0312 15.2734 10.207 15.0625 10.4531 15.0625H10.875V12.8125H10.4531C10.207 12.8125 10.0312 12.6367 10.0312 12.3906V11.5469C10.0312 11.3359 10.207 11.125 10.4531 11.125H12.7031C12.9141 11.125 13.125 11.3359 13.125 11.5469V15.0625H13.5469C13.7578 15.0625 13.9688 15.2734 13.9688 15.4844V16.3281Z" fill=${color}/>
 </svg>
 `;

package/src/v4/assets/icons/visitorLimit.tsx

@@ -0,0 +1,23 @@
+export const icon = () => `<svg
+  width="100%"
+  height="100%"
+  viewBox="0 0 61 42"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M58.3438 0.75C59.7148 0.75 60.875 1.91016 60.875 3.28125V38.7188C60.875 40.1953 59.7148 41.25 58.3438 41.25H5.1875C2.33984 41.25 0.125 39.0352 0.125 36.1875V6.65625C0.125 5.28516 1.17969 4.125 2.65625 4.125H6.875V3.28125C6.875 1.91016 7.92969 0.75 9.40625 0.75H58.3438ZM3.5 36.1875C3.5 37.1367 4.23828 37.875 5.1875 37.875C6.03125 37.875 6.875 37.1367 6.875 36.1875V7.5H3.5V36.1875ZM57.5 37.875V4.125H10.25V36.1875V36.293C10.25 36.7148 10.0391 37.4531 9.93359 37.875H57.5Z"
+    fill="currentColor"
+  />
+  <path
+    d="M34.5 13C34.5 12.4477 34.9477 12 35.5 12C36.0523 12 36.5 12.4477 36.5 13V23C36.5 23.5523 36.0523 24 35.5 24C34.9477 24 34.5 23.5523 34.5 23V13Z"
+    fill="currentColor"
+  />
+  <path
+    d="M35.5 25.75C36.4665 25.75 37.25 26.5335 37.25 27.5C37.25 28.4665 36.4665 29.25 35.5 29.25C34.5335 29.25 33.75 28.4665 33.75 27.5C33.75 26.5335 34.5335 25.75 35.5 25.75Z"
+    fill="currentColor"
+  />
+</svg>
+`;
+
+export default icon;

package/src/v4/component/Avatar/Avatar.tsx

@@ -54,12 +54,15 @@ function Avatar({ uri, imageProps, iconProps, userAvatarProps }: AvatarProps) {
         {...imageProps}
         onError={() => setImageError(true)}
       />
+      {userAvatarProps?.roles && isModerator(userAvatarProps?.roles) && (
+        <ModeratorBadge style={styles.moderatorBadge} />
+      )}
     </TouchableOpacity>
   ) : iconProps ? (
     <SvgXml {...iconProps} />
   ) : (
     <TouchableOpacity
-      style={[styles.defaultUserAvatar, userAvatarProps.style]}
+      style={[styles.defaultUserAvatar, userAvatarProps?.style]}
       activeOpacity={0.7}
       onPress={() => {
         if (userAvatarProps?.shouldRedirectToUserProfile) {
@@ -72,7 +75,7 @@ function Avatar({ uri, imageProps, iconProps, userAvatarProps }: AvatarProps) {
       <Typography.Body style={styles.firstChar}>
         {userAvatarProps.userName?.trim()?.charAt(0).toUpperCase()}
       </Typography.Body>
-      {userAvatarProps.roles && isModerator(userAvatarProps.roles) && (
+      {userAvatarProps?.roles && isModerator(userAvatarProps.roles) && (
         <ModeratorBadge style={styles.moderatorBadge} />
       )}
     </TouchableOpacity>

package/src/v4/component/CommunityRowItem/CommunityRowItem.tsx

@@ -6,11 +6,11 @@ import { View } from 'react-native';
 import CommunityJoinedButtonElement from '../../elements/CommunityJoinedButtonElement/CommunityJoinedButtonElement';
 import CommunityJoinButtonElement from '../../elements/CommunityJoinButtonElement/CommunityJoinButtonElement';
 import CommunityDisplayname from '../../elements/CommunityDisplayname/CommunityDisplayname';
-import CommunityCategory from '../../elements/CommunityCatetory/CommunityCategory';
 import CommunityMemeberCount from '../../elements/CommunityMemeberCount/CommunityMemeberCount';
 import { useStyles } from './styles';
 import CommunityPrivateBadge from '../../elements/CommunityPrivateBadge/CommunityPrivateBadge';
 import CommunityOfficialBadge from '../../elements/CommunityOfficialBadge/CommunityOfficialBadge';
+import { CommunityCategories } from '../../../v4/features/feed/components';
 
 type CommunityRowItemProps = {
   pageId?: PageID;
@@ -34,7 +34,7 @@ const CommunityRowItem: FC<CommunityRowItemProps> = ({
       <CommunityRowImage
         pageId={pageId}
         componentId={componentId}
-        fileId={community.avatarFileId}
+        fileUrl={community.avatar?.fileUrl}
         label={label}
       />
       <View style={styles.detailWrap}>
@@ -54,8 +54,8 @@ const CommunityRowItem: FC<CommunityRowItemProps> = ({
         </View>
         <View style={styles.detailBottomWrap}>
           <View style={styles.detailBottomWrapLeft}>
-            <CommunityCategory
-              categoryIds={community.categoryIds}
+            <CommunityCategories
+              categories={community.categories}
               pageId={pageId}
               componentId={componentId}
             />

package/src/v4/component/CommunitySearchResult/CommunitySearchResult.tsx

@@ -108,7 +108,9 @@ const CommunitySearchResult: FC<CommunitySearchResultProps> = ({
             />
           </Pressable>
         )}
-        keyExtractor={(item, index) => item.communityId + index}
+        keyExtractor={(item, index) =>
+          (item.communityId ?? index).toString() + '_' + index
+        }
         onEndReachedThreshold={0.5}
         style={styles.list}
         contentContainerStyle={styles.listContent}

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

@@ -5,6 +5,7 @@ import { useStory } from '../../hook/useStory';
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import { SvgXml } from 'react-native-svg';
 import {
+  errorIcon,
   storyCircleCreatePlusIcon,
   storyRing,
 } from '../../../svg/svg-xml-list';
@@ -29,22 +30,23 @@ const CommunityStories = ({ communityId, community }: ICommunityStories) => {
     useNavigation() as NativeStackNavigationProp<RootStackParamList>;
   const styles = useStyles();
   const { getUiKitConfig } = useConfig();
-  const hasStoryPermission = useStoryPermission(communityId);
+  const { hasStoryPermission } = useStoryPermission(communityId);
   const { getStoryTarget, storyTarget, stories, getStories } = useStory();
   const { getImage } = useFile();
   const [avatarUrl, setAvatarUrl] = useState(undefined);
   const [viewStory, setViewStory] = useState(false);
-  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']
-    : stories.length > 0
-    ? ['#e2e2e2', '#ffffff']
-    : ['#ffffff', '#ffffff'];
+  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']
+      : stories.length > 0
+      ? ['#e2e2e2', '#ffffff']
+      : ['#ffffff', '#ffffff'];
 
   useEffect(() => {
     (async () => {
@@ -86,6 +88,7 @@ const CommunityStories = ({ communityId, community }: ICommunityStories) => {
     setViewStory(false);
     onPressCreateStory();
   }, [onPressCreateStory]);
+
   const onPressCommunityName = useCallback(() => {
     setViewStory(false);
     navigation.navigate('CommunityProfilePage', {
@@ -121,12 +124,18 @@ const CommunityStories = ({ communityId, community }: ICommunityStories) => {
               height={48}
               xml={storyRing(storyRingColor[0], storyRingColor[1])}
             />
-            {hasStoryPermission && (
-              <SvgXml
-                style={styles.storyCreateIcon}
-                xml={storyCircleCreatePlusIcon()}
-              />
-            )}
+            {hasStoryPermission ? (
+              storyTarget?.failedStoriesCount > 0 ? (
+                <SvgXml style={styles.errorIcon} xml={errorIcon()} />
+              ) : (
+                <TouchableOpacity onPress={() => onPressCreateStory()}>
+                  <SvgXml
+                    style={styles.storyCreateIcon}
+                    xml={storyCircleCreatePlusIcon()}
+                  />
+                </TouchableOpacity>
+              )
+            ) : null}
           </TouchableOpacity>
           <Typography.Caption style={styles.base}>Story</Typography.Caption>
         </>
@@ -176,6 +185,8 @@ const CommunityStories = ({ communityId, community }: ICommunityStories) => {
     return null;
   }
 
+  if (!hasStoryPermission && stories.length === 0) return null;
+
   return (
     <View style={styles.container}>
       <View style={styles.storyItemWrap}>{renderCommunityStory()}</View>

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

@@ -91,10 +91,15 @@ export const useStyles = () => {
       alignItems: 'center',
       width: 68,
     },
+    errorIcon: {
+      position: 'absolute',
+      right: 8,
+      bottom: 0,
+    },
     storyCreateIcon: {
       position: 'absolute',
-      left: 42,
-      top: 30,
+      left: 8,
+      top: -16,
     },
     base: {
       color: theme.colors.base,

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,11 @@ 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 ||
+          livestream.status === RoomStatus.waitingReconnect) &&
           thumbnailUrl &&
           !isUpcoming && (
             <View style={styles.content}>
@@ -157,14 +156,15 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
                 source={thumbnailUrl}
                 style={styles.streamImageCover as ImageStyle}
               />
-              {livestream.status === LivestreamStatus.live && (
+              {(livestream.status === RoomStatus.live ||
+                livestream.status === RoomStatus.waitingReconnect) && (
                 <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/LoadingImage/index.tsx

@@ -8,10 +8,6 @@ import {
 } from '../../../providers/file-provider';
 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;
@@ -23,6 +19,7 @@ interface OverlayImageProps {
     index: number,
     originalPath: string
   ) => void;
+  onUploadError?: (hasError: boolean, source: string) => void;
   index?: number;
   isUploaded: boolean;
   fileId?: string;
@@ -36,6 +33,7 @@ const LoadingImage = ({
   onClose,
   index,
   onLoadFinish,
+  onUploadError,
   isUploaded = false,
   fileId = '',
   isEditMode = false,
@@ -43,9 +41,6 @@ const LoadingImage = ({
   postId,
   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);
@@ -84,33 +79,39 @@ const LoadingImage = ({
             source
           );
       } else {
+        setIsUploading(false);
         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);
+      setIsUploading(false);
       setIsUploadError(true);
+      onUploadError?.(true, source);
     }
   }, [
-    dispatch,
     handleLoadEnd,
     index,
     onLoadFinish,
+    onUploadError,
     setIsUploading,
-    showToastMessage,
     source,
   ]);
 
   const handleDelete = async () => {
-    if (!fileId) return null;
-    if (!isEditMode) {
+    if (fileId && !isEditMode) {
       await deleteAmityFile(fileId);
     }
     onClose && onClose(source, fileId, postId);
   };
   useEffect(() => {
+    setIsUploadError(false);
+    onUploadError?.(false, source);
+    setProgress(0);
+    setIsProcess(false);
     if (isUploaded) {
       setLoading(false);
     } else {
@@ -151,19 +152,21 @@ const LoadingImage = ({
           )}
         </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>
+      {!loading && isUploadError && (
+        <View style={styles.failedOverlay}>
+          <TouchableOpacity style={styles.errorOverlay} onPress={onRetryUpload}>
+            <SvgXml xml={toastIcon()} width="28" height="28" />
+          </TouchableOpacity>
+        </View>
       )}
+
+      <TouchableOpacity
+        style={styles.closeButton}
+        disabled={(loading || isProcess) && !isUploadError}
+        onPress={handleDelete}
+      >
+        <SvgXml xml={closeIcon('white')} width="12" height="12" />
+      </TouchableOpacity>
     </View>
   );
 };

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

@@ -18,12 +18,28 @@ 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,
     },
@@ -40,6 +56,7 @@ export const useStyles = () => {
       padding: 7,
       backgroundColor: 'rgba(0, 0, 0, 0.4)',
       borderRadius: 72,
+      zIndex: 10,
     },
   });
 };

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

@@ -18,8 +18,6 @@ import { useStyles } from './styles';
 import Video from 'react-native-video';
 import { useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { useTheme } from 'react-native-paper';
-import type { MyMD3Theme } from '../../../providers/amity-ui-kit-provider';
 import uiSlice from '../../../redux/slices/uiSlice';
 import { createVideoThumbnail } from 'react-native-compressor';
 import { useUIKitDispatch } from '../../../redux/store';
@@ -35,6 +33,7 @@ interface OverlayImageProps {
     originalPath: string,
     thumbNail: string
   ) => void;
+  onUploadError?: (hasError: boolean, source: string) => void;
   index?: number;
   isUploaded: boolean;
   fileId?: string;
@@ -50,6 +49,7 @@ const LoadingVideo = ({
   onClose,
   index,
   onLoadFinish,
+  onUploadError,
   isUploaded = false,
   thumbNail,
   onPlay,
@@ -59,7 +59,6 @@ const LoadingVideo = ({
   postId,
   setIsUploading,
 }: OverlayImageProps) => {
-  const theme = useTheme() as MyMD3Theme;
   const dispatch = useUIKitDispatch();
   const { showToastMessage } = uiSlice.actions;
   const [loading, setLoading] = useState(true);
@@ -129,23 +128,30 @@ 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) return null;
-    if (!isEditMode) {
+    if (fileId && !isEditMode) {
       await deleteAmityFile(fileId);
     }
     onClose && onClose(source, fileId, postId);
   };
   useEffect(() => {
+    setIsUploadError(false);
+    onUploadError?.(false, source);
+    setProgress(0);
+    setIsProcess(false);
     if (isUploaded) {
       setLoading(false);
     } else {
@@ -216,10 +222,10 @@ const LoadingVideo = ({
       ) : (
         <TouchableOpacity
           style={styles.closeButton}
-          disabled={loading || isProcess}
+          disabled={(loading || isProcess) && !isUploadError}
           onPress={handleDelete}
         >
-          <SvgXml xml={closeIcon(theme.colors.base)} width="12" height="12" />
+          <SvgXml xml={closeIcon('white')} width="12" height="12" />
         </TouchableOpacity>
       )}
     </View>