@amityco/react-native-social-uikit 4.0.0-1fa7ca8.0 → 4.0.0-3473a9ea.0

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>

package/src/v4/component/MyAvatar/MyAvatar.tsx

@@ -15,13 +15,19 @@ const MyAvatar: FC<MyAvatarProp> = (props) => {
 
   useEffect(() => {
     UserRepository.getUser(myId, async ({ data, loading, error }) => {
-      if (!loading && !error) {
-        const avatar = await getImage({
-          fileId: data?.avatarFileId,
-          imageSize: ImageSizeState.small,
-        });
-        setAvatarUrl(avatar ?? defaultAvatarUri);
+      if (loading || error || !data) return;
+
+      if (data.avatarCustomUrl) {
+        setAvatarUrl(data.avatarCustomUrl);
+        return;
       }
+
+      const avatar = await getImage({
+        fileId: data.avatarFileId,
+        imageSize: ImageSizeState.small,
+      });
+
+      setAvatarUrl(avatar ?? defaultAvatarUri);
     });
   }, [getImage, myId]);
 

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

@@ -2,12 +2,13 @@ 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 } from '../../hook';
+import { useFile, useStoryPermission } from '../../hook';
 import useConfig from '../../hook/useConfig';
 import { useStyles } from './styles';
 import { CommunityRepository } from '@amityco/ts-sdk-react-native';
@@ -26,27 +27,34 @@ const StoryCircleItem: FC<IStoryCircleItem> = ({
   const theme = useTheme() as MyMD3Theme;
   const [avatarUrl, setAvatarUrl] = useState(null);
   const [communityData, setCommunityData] = useState<Amity.Community>(null);
+  const [communityLoading, setCommunityLoading] = useState(true);
+  const { hasStoryPermission } = useStoryPermission(storyTarget.targetId);
   const { getImage } = useFile();
   const { getUiKitConfig } = useConfig();
   const styles = useStyles();
-  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'];
+  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'];
 
   useEffect(() => {
-    if (storyTarget.targetType !== 'community') return;
-    CommunityRepository.getCommunity(
+    if (storyTarget.targetType !== 'community') return null;
+    const unsubscribe = CommunityRepository.getCommunity(
       storyTarget.targetId,
       async ({ error, loading, data }) => {
-        if (error) return;
+        if (error) {
+          setCommunityLoading(false);
+          return;
+        }
         if (!loading) {
           setCommunityData(data);
+          setCommunityLoading(false);
           const avatarImage = await getImage({
             fileId: data.avatarFileId,
             imageSize: ImageSizeState.small,
@@ -55,9 +63,17 @@ const StoryCircleItem: FC<IStoryCircleItem> = ({
         }
       }
     );
+    return () => unsubscribe();
   }, [getImage, storyTarget.targetId, storyTarget.targetType]);
 
   if (storyTarget.targetType !== 'community') return null;
+
+  // Global story feed: only show stories from communities the user has joined.
+  // Public community stories are visible on the community profile page,
+  // but must NOT appear in the global story feed for non-members.
+  // Private community stories are never returned by the SDK for non-members,
+  // but we guard here as an extra safety net.
+  if (!communityLoading && !communityData?.isJoined) return null;
   return (
     <TouchableOpacity
       key={storyTarget.targetId}
@@ -80,12 +96,16 @@ const StoryCircleItem: FC<IStoryCircleItem> = ({
         height={68}
         xml={storyRing(storyRingColor[0], storyRingColor[1])}
       />
-      {communityData?.isOfficial && (
+      {hasStoryPermission && storyTarget?.failedStoriesCount > 0 ? (
+        <View style={styles.errorIcon}>
+          <SvgXml width={16} height={16} xml={errorIcon()} />
+        </View>
+      ) : 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/StoryTargetView.tsx

@@ -24,9 +24,11 @@ const StoryTargetView: FC<IStorytargetView> = ({
   setViewStory,
   onClose,
 }) => {
-  const cube = useRef<CubeNavigationHorizontal | AndroidCubeEffect>();
+  const cube = useRef<CubeNavigationHorizontal | AndroidCubeEffect | null>(
+    null
+  );
   const communityId = globalStoryTargets[currentCommunityIndex].targetId;
-  const hasStoryPermission = useStoryPermission(communityId);
+  const { hasStoryPermission } = useStoryPermission(communityId);
 
   const navigation =
     useNavigation() as NativeStackNavigationProp<RootStackParamList>;

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

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

package/src/v4/component/PollContent/PollResults.tsx

@@ -26,18 +26,23 @@ export function PollResults({ options, totalVotes }: PollResultsProps) {
       100
     ).toFixed(2);
 
-  const voteBy = (option: Amity.PollAnswer) => {
-    if (option.voteCount === 1 && option.isVotedByUser) return 'Voted by you';
-    if (option.voteCount > 1) {
-      const voteCount = option.isVotedByUser
-        ? option.voteCount - 1
-        : option.voteCount;
-      const formattedCount = formatVoteCount(voteCount);
-      return `Voted by ${formattedCount} participant${
-        voteCount > 1 ? 's' : ''
-      }${option.isVotedByUser ? ' and you' : ''}`;
+  const voteBy = (option: Amity.PollAnswer): string => {
+    const { voteCount, isVotedByUser } = option;
+
+    if (voteCount === 0) return 'No votes';
+
+    if (isVotedByUser) {
+      const otherVotes = voteCount - 1;
+      if (otherVotes === 0) return 'Voted by you';
+
+      const formattedCount = formatVoteCount(otherVotes);
+      const plural = otherVotes > 1 ? 's' : '';
+      return `Voted by ${formattedCount} participant${plural} and you`;
     }
-    return 'No votes';
+
+    const formattedCount = formatVoteCount(voteCount);
+    const plural = voteCount > 1 ? 's' : '';
+    return `Voted by ${formattedCount} participant${plural}`;
   };
 
   return (
@@ -75,6 +80,7 @@ export function PollResults({ options, totalVotes }: PollResultsProps) {
                   targetType="user"
                   style={styles.optionAvatar}
                   avatarId={user?.avatarFileId}
+                  avatarCustomUrl={user?.avatarCustomUrl}
                   elementID={ElementID.WildCardElement}
                 />
               )}