@amityco/react-native-social-uikit 4.0.0-c2327e7.0 → 4.0.0-d2b8337.0

package/src/v4/PublicApi/Pages/AmityViewStoryPage/Components/AmityViewStoryItem.tsx

@@ -43,6 +43,8 @@ import { Typography } from '../../../../component/Typography/Typography';
 import { useTheme } from 'react-native-paper';
 import { MyMD3Theme } from '../../../../../providers/amity-ui-kit-provider';
 import { useUIKitDispatch } from '../../../../../redux/store';
+import { informative } from '~/v4/assets/icons/toast';
+import { close as closeIcon } from '../../../../assets/icons';
 
 interface IAmityViewStoryItem {
   communityData: Amity.Community;
@@ -96,7 +98,6 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
   const [isLiked, setIsLiked] = useState<boolean>(myReactions?.length > 0);
   const [openCommentSheet, setOpenCommentSheet] = useState(false);
   const [load, setLoad] = useState(true);
-  const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
   const dispatch = useUIKitDispatch();
   const { showToastMessage } = uiSlice.actions;
@@ -248,10 +249,20 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
       );
       if (deleted) {
         current === 0 && previous();
-        dispatch(showToastMessage({ toastMessage: 'Story deleted' }));
+        dispatch(
+          showToastMessage({
+            toastMessage: 'Story deleted',
+            isSuccessToast: true,
+          })
+        );
       }
     } catch (err) {
-      dispatch(showToastMessage({ toastMessage: 'Delete Story Error!' }));
+      dispatch(
+        showToastMessage({
+          toastMessage: 'Failed to delete story. Please try again.',
+          isSuccessToast: false,
+        })
+      );
     } finally {
       setLoading(false);
       sheetRef?.current?.close();
@@ -288,6 +299,30 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
     sheetRef.current?.open();
   }, [progress]);
 
+  const onPressMenuButtonFailed = useCallback(() => {
+    progress.stopAnimation(() => setPressed(true));
+    Alert.alert(
+      'Failed to upload story',
+      'Would you like to discard uploading?',
+      [
+        { text: 'Cancel', onPress: () => sheetRef?.current?.close() },
+        { text: 'Delete', style: 'destructive', onPress: deleteStory },
+      ]
+    );
+  }, [deleteStory, progress]);
+
+  const isFailedImageUpload =
+    currentStory?.dataType === 'image' &&
+    (currentStory?.syncState === 'error' ||
+      currentStory?.syncState === 'syncing' ||
+      !currentStory?.imageData?.fileUrl);
+
+  const isFailedVideoUpload =
+    currentStory?.dataType === 'video' &&
+    (currentStory?.syncState === 'error' ||
+      currentStory?.syncState === 'syncing' ||
+      !currentStory?.videoData?.fileUrl);
+
   return (
     <View style={[styles.container]}>
       <SafeAreaView>
@@ -296,7 +331,13 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
             <Video
               onLoadStart={() => setLoad(true)}
               onProgress={({ currentTime }) => setCurrentSeek(currentTime)}
-              source={{ uri: currentStory?.videoData.fileUrl }}
+              source={{
+                uri:
+                  currentStory?.videoData?.fileUrl ||
+                  (typeof currentStory?.data?.fileData === 'string'
+                    ? currentStory?.data?.fileData
+                    : ''),
+              }}
               style={styles.video}
               resizeMode="contain"
               controls={false}
@@ -308,12 +349,15 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
           ) : currentStory?.dataType === 'image' ? (
             <Image
               onLoadStart={() => setLoad(true)}
-              onError={({ nativeEvent: { error: err } }) =>
-                err && setError(true)
-              }
               onLoadEnd={() => start()}
-              source={{ uri: currentStory?.imageData.fileUrl }}
-              style={[styles.image]}
+              source={{
+                uri:
+                  currentStory?.imageData?.fileUrl ||
+                  (typeof currentStory?.data?.fileData === 'string'
+                    ? currentStory?.data?.fileData
+                    : ''),
+              }}
+              style={[styles.image, isFailedImageUpload && { opacity: 0.6 }]}
               resizeMode="contain"
             />
           ) : null}
@@ -322,11 +366,6 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
               <ActivityIndicator size="large" color={'white'} />
             </View>
           )}
-          {error && (
-            <View style={styles.spinnerContainer}>
-              <Text style={styles.error}>Story load error</Text>
-            </View>
-          )}
         </View>
       </SafeAreaView>
       <GestureRecognizer onSwipeUp={onPressComment} style={styles.flexCol}>
@@ -399,7 +438,12 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
                 </TouchableOpacity>
               )}
               <TouchableOpacity hitSlop={5} onPress={() => onClose()}>
-                <Text style={styles.whiteText}>X</Text>
+                <SvgXml
+                  xml={closeIcon()}
+                  width="28"
+                  height="28"
+                  color="white"
+                />
               </TouchableOpacity>
             </View>
           </View>
@@ -465,49 +509,70 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
           </TouchableOpacity>
         )}
       </GestureRecognizer>
-      <View style={styles.footer}>
-        {hasStoryImpressionPermission ? (
-          <TouchableOpacity
-            style={[
-              styles.seenContainer,
-              { backgroundColor: storyViewerBgColor },
-            ]}
-          >
-            <SvgXml xml={seenIcon()} width="25" height="25" />
-            <Text style={styles.seen}>{reachCount}</Text>
-          </TouchableOpacity>
-        ) : (
-          <View style={styles.seenContainer} />
-        )}
-        <View style={styles.seenContainer}>
-          <TouchableOpacity
-            style={[
-              styles.iconContainer,
-              { backgroundColor: storyCommentBgColor },
-            ]}
-            onPress={onPressComment}
-          >
-            <SvgXml xml={storyCommentIcon()} width="25" height="25" />
-            <Text style={styles.seen}>{commentsCounts}</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={[
-              styles.iconContainer,
-              {
-                backgroundColor: storyReactionBgColor,
-              },
-            ]}
-            onPress={onPressReaction}
-          >
-            <SvgXml
-              xml={isLiked ? storyLikedIcon : storyLikeIcon}
-              width="25"
-              height="25"
-            />
-            <Text style={styles.seen}>{totalReaction}</Text>
-          </TouchableOpacity>
+      {(isFailedImageUpload || isFailedVideoUpload) && hasStoryPermission ? (
+        <View style={styles.errorContainer}>
+          <View style={styles.errorContainerLeft}>
+            <SvgXml xml={informative('white')} width="20" height="20" />
+            <Typography.Body style={styles.errorText}>
+              Failed to upload story
+            </Typography.Body>
+          </View>
+          {
+            <TouchableOpacity
+              hitSlop={5}
+              style={styles.threeDotsMenu}
+              onPress={onPressMenuButtonFailed}
+            >
+              <SvgXml xml={storyThreedotsMenu()} width="20" height="20" />
+            </TouchableOpacity>
+          }
         </View>
-      </View>
+      ) : (
+        <View style={styles.footer}>
+          {hasStoryImpressionPermission ? (
+            <TouchableOpacity
+              style={[
+                styles.seenContainer,
+                { backgroundColor: storyViewerBgColor },
+              ]}
+            >
+              <SvgXml xml={seenIcon()} width="25" height="25" />
+              <Text style={styles.seen}>{reachCount}</Text>
+            </TouchableOpacity>
+          ) : (
+            <View style={styles.seenContainer} />
+          )}
+          <View style={styles.seenContainer}>
+            <TouchableOpacity
+              style={[
+                styles.iconContainer,
+                { backgroundColor: storyCommentBgColor },
+              ]}
+              onPress={onPressComment}
+            >
+              <SvgXml xml={storyCommentIcon()} width="25" height="25" />
+              <Text style={styles.seen}>{commentsCounts}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[
+                styles.iconContainer,
+                {
+                  backgroundColor: storyReactionBgColor,
+                },
+              ]}
+              onPress={onPressReaction}
+            >
+              <SvgXml
+                xml={isLiked ? storyLikedIcon : storyLikeIcon}
+                width="25"
+                height="25"
+              />
+              <Text style={styles.seen}>{totalReaction}</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      )}
+
       {openCommentSheet && (
         <Modal
           style={styles.bottomSheet}

package/src/v4/PublicApi/Pages/AmityViewStoryPage/styles.ts

@@ -14,6 +14,7 @@ export const useStyles = () => {
       flex: 1,
       width: width,
       backgroundColor: '#000',
+      position: 'relative',
     },
     flex: {
       flex: 1,
@@ -73,7 +74,7 @@ export const useStyles = () => {
       fontSize: 14,
     },
     avatarSubText: {
-      color: theme.colors.background,
+      color: 'white',
       fontSize: 12,
     },
     closeIconContainer: {
@@ -219,6 +220,27 @@ export const useStyles = () => {
       color: theme.colors.base,
       fontSize: 14,
     },
+    errorContainer: {
+      width: '100%',
+      position: 'absolute',
+      bottom: 120,
+      left: 0,
+      backgroundColor: theme.colors.alert,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+    },
+    errorContainerLeft: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+    },
+    errorText: {
+      color: 'white',
+    },
   });
 
   return styles;

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/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';
@@ -34,17 +35,18 @@ const CommunityStories = ({ communityId, community }: ICommunityStories) => {
   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>
         </>

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, RoomRepository } from '@amityco/ts-sdk-react-native';
+import { FileRepository, StreamRepository } 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 { RoomStatus } from '../../enum/roomStatus';
+import { LivestreamStatus } from '../../enum/livestreamStatus';
 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 {
-  roomId: Amity.Room['roomId'];
+  streamId: Amity.Stream['streamId'];
   onPressPost: () => void;
   post: Amity.Post;
 }
 
 const LivestreamContent: React.FC<ILivestreamContent> = ({
   post,
-  roomId,
+  streamId,
   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.Room>();
+  const [livestream, setLivestream] = useState<Amity.Stream>();
   const [thumbnailUrl, setThumbnailUrl] = useState<ImageSourcePropType>();
   const [isUpcoming, setIsUpcoming] = useState<boolean>(false);
 
   const onPlayLivestream = useCallback(() => {
     navigation.navigate('LivestreamPlayer', {
       post,
-      roomId: livestream.roomId,
+      streamId: livestream.streamId,
     });
   }, [livestream, navigation, post]);
 
-  const getLivestreamThumbnail = async (currentStream: Amity.Room) => {
+  const getLivestreamThumbnail = async (currentStream: Amity.Stream) => {
     const defaultThumbnail = require('../../assets/images/livestream.png');
 
     if (currentStream.thumbnailFileId) {
@@ -71,8 +71,8 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
 
   useEffect(() => {
     setIsUpcoming(true);
-    const unsubscribe = RoomRepository.getRoom(
-      roomId,
+    const unsubscribe = StreamRepository.getStreamById(
+      streamId,
       ({ data, loading, error: streamError }) => {
         if (streamError) setError(!!streamError);
         if (!loading && data) {
@@ -86,13 +86,13 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
     return () => {
       unsubscribe();
     };
-  }, [roomId]);
+  }, [streamId]);
 
   if (!livestream) return null;
 
   if (error || livestream?.isDeleted) {
     return (
-      <View key={livestream.roomId} style={styles.container}>
+      <View key={livestream.streamId} 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 === RoomStatus.live ||
-    livestream?.status === RoomStatus.ended;
+    livestream?.status === LivestreamStatus.live ||
+    livestream?.status === LivestreamStatus.ended;
 
   if (isTerminated && isLiveOrEnded) {
     return (
-      <View key={livestream.roomId} style={styles.container}>
+      <View key={livestream.streamId} style={styles.container}>
         <LiveStreamTerminatedThumbnail />
       </View>
     );
@@ -129,7 +129,7 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
         )}
       </Pressable>
       <View style={styles.container}>
-        {(livestream.status === RoomStatus.idle || isUpcoming) &&
+        {(livestream.status === LivestreamStatus.idle || isUpcoming) &&
           thumbnailUrl && (
             <View style={styles.content}>
               <Image
@@ -144,10 +144,12 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
             </View>
           )}
 
-        {livestream.status === RoomStatus.ended && <LiveStreamEndThumbnail />}
+        {livestream.status === LivestreamStatus.ended && (
+          <LiveStreamEndThumbnail />
+        )}
 
-        {(livestream.status === RoomStatus.live ||
-          livestream.status === RoomStatus.recorded) &&
+        {(livestream.status === LivestreamStatus.live ||
+          livestream.status === LivestreamStatus.recorded) &&
           thumbnailUrl &&
           !isUpcoming && (
             <View style={styles.content}>
@@ -155,15 +157,14 @@ const LivestreamContent: React.FC<ILivestreamContent> = ({
                 source={thumbnailUrl}
                 style={styles.streamImageCover as ImageStyle}
               />
-              {(livestream.status === RoomStatus.live ||
-                livestream.status === RoomStatus.waiting_reconnect) && (
+              {livestream.status === LivestreamStatus.live && (
                 <View style={styles.streamStatusLive}>
                   <Typography.CaptionBold style={styles.streamStatusText}>
                     LIVE
                   </Typography.CaptionBold>
                 </View>
               )}
-              {livestream.status === RoomStatus.recorded && (
+              {livestream.status === LivestreamStatus.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>
   );
 };