@amityco/react-native-social-uikit 4.0.0-df1703f8.0 → 4.0.0-e0eb8745.0

package/src/social/features/story/Draft/components/HyperLinkConfig.tsx

@@ -66,6 +66,38 @@ const HyperlinkConfig: FC<IHyperLinkConfig> = ({
     setIsVisibleModal(false);
   }, [setIsVisibleModal]);
 
+  const handleCancel = useCallback(() => {
+    const hasChanges =
+      url !== (hyperlinkItem?.url ?? '') ||
+      customizedText !== (hyperlinkItem?.customText ?? '');
+    if (hasChanges) {
+      Alert.alert(
+        'Unsaved changes',
+        "Are you sure you want to cancel? Your changes won't be saved.",
+        [
+          { text: 'No', style: 'cancel' },
+          {
+            text: 'Yes',
+            style: 'destructive',
+            onPress: () => {
+              if (hyperlinkItem) {
+                setUrl(hyperlinkItem.url);
+                setCustomizedText(hyperlinkItem.customText);
+              } else {
+                reset();
+              }
+              setUrlErrorMessage(null);
+              setCustomTextErrorMessage(null);
+              onClosed();
+            },
+          },
+        ]
+      );
+    } else {
+      onClosed();
+    }
+  }, [url, customizedText, hyperlinkItem, onClosed, reset]);
+
   const handleUrl = useCallback((text: string) => {
     setUrlErrorMessage(null);
     setUrl(text);
@@ -149,7 +181,11 @@ const HyperlinkConfig: FC<IHyperLinkConfig> = ({
       >
         <View style={styles.handleBar} />
         <View style={styles.titleContainer}>
-          <View style={styles.flexContainer} />
+          <View style={styles.flexContainer}>
+            <Text onPress={handleCancel} style={styles.cancel}>
+              Cancel
+            </Text>
+          </View>
           <View style={styles.flexContainer}>
             <Text style={styles.title}>Add link</Text>
           </View>
@@ -177,68 +213,76 @@ const HyperlinkConfig: FC<IHyperLinkConfig> = ({
             color={theme.colors.base}
           />
         )}
-        <View
-          style={[
-            styles.inputContainer,
-            url.length > 0 && urlErrorMessage && styles.alertBorderColor,
-          ]}
-        >
-          <Text style={styles.label}>
-            URL <Text style={styles.requiredSign}>*</Text>
-          </Text>
-          <TextInput
-            defaultValue={url}
-            onChangeText={handleUrl}
-            style={styles.input}
-            placeholder="https://www.example.com"
-            placeholderTextColor={theme.colors.baseShade2}
-            onFocus={validateHyperlinkText}
-          />
-        </View>
-        {urlErrorMessage && (
-          <Text style={styles.inValidUrl}>{urlErrorMessage}</Text>
-        )}
+        <View style={styles.contentContainer}>
+          <View
+            style={[
+              styles.inputContainer,
+              url.length > 0 && urlErrorMessage && styles.alertBorderColor,
+            ]}
+          >
+            <Text style={styles.label}>
+              URL <Text style={styles.requiredSign}>*</Text>
+            </Text>
+            <TextInput
+              defaultValue={url}
+              onChangeText={handleUrl}
+              style={styles.input}
+              placeholder="https://www.example.com"
+              placeholderTextColor={theme.colors.baseShade2}
+              onFocus={validateHyperlinkText}
+            />
+          </View>
+          {urlErrorMessage && (
+            <Text style={styles.inValidUrl}>{urlErrorMessage}</Text>
+          )}
 
-        <View
-          style={[
-            styles.inputContainer,
-            customizedText.length > 0 &&
-              customTextErrorMessage &&
-              styles.alertBorderColor,
-          ]}
-        >
-          <View style={styles.rowContainer}>
-            <Text style={styles.label}>Customize Link Text</Text>
-            <Text style={styles.textCount}>{customizedText.length}/30</Text>
+          <View
+            style={[
+              styles.inputContainer,
+              customizedText.length > 0 &&
+                customTextErrorMessage &&
+                styles.alertBorderColor,
+            ]}
+          >
+            <View style={styles.rowContainer}>
+              <Text style={styles.label}>Customize Link Text</Text>
+              <Text style={styles.textCount}>{customizedText.length}/30</Text>
+            </View>
+            <TextInput
+              defaultValue={customizedText}
+              onChangeText={handleCustomText}
+              style={styles.input}
+              placeholder="Name your link"
+              placeholderTextColor={theme.colors.baseShade2}
+              maxLength={30}
+              onFocus={validateHyperlinkUrl}
+            />
           </View>
-          <TextInput
-            defaultValue={customizedText}
-            onChangeText={handleCustomText}
-            style={styles.input}
-            placeholder="Name your link"
-            placeholderTextColor={theme.colors.baseShade2}
-            maxLength={30}
-            onFocus={validateHyperlinkUrl}
-          />
+          {customTextErrorMessage ? (
+            <Text style={styles.inValidUrl}>{customTextErrorMessage}</Text>
+          ) : (
+            <Text style={styles.note}>
+              This Text will show on the link instead of URL.
+            </Text>
+          )}
+          {hyperlinkItem && (
+            <View>
+              <View style={styles.removeLinkContainer} />
+              <TouchableOpacity
+                style={styles.deleteHyperlinkContainer}
+                onPress={onPressDeleteHyperlink}
+              >
+                <SvgXml
+                  xml={storyDraftDeletHyperLink()}
+                  width="20"
+                  height="20"
+                />
+                <Text style={styles.removeLink}>Remove link</Text>
+              </TouchableOpacity>
+              <View style={styles.removeLinkDivider} />
+            </View>
+          )}
         </View>
-        {customTextErrorMessage ? (
-          <Text style={styles.inValidUrl}>{customTextErrorMessage}</Text>
-        ) : (
-          <Text style={styles.note}>
-            This Text will show on the link instead of URL.
-          </Text>
-        )}
-        {hyperlinkItem && (
-          <View style={styles.inputContainer}>
-            <TouchableOpacity
-              style={styles.deleteHyperlinkContainer}
-              onPress={onPressDeleteHyperlink}
-            >
-              <SvgXml xml={storyDraftDeletHyperLink()} width="24" height="24" />
-              <Text style={styles.removeLink}>Remove link</Text>
-            </TouchableOpacity>
-          </View>
-        )}
       </KeyboardAvoidingView>
     </Modal>
   );

package/src/social/features/story/Draft/styles.ts

@@ -9,7 +9,8 @@ export const useStyles = () => {
     container: {
       flex: 1,
       width: '100%',
-      backgroundColor: theme.colors.base,
+      height: '100%',
+      backgroundColor: '#000',
     },
     backBtn: {
       position: 'absolute',
@@ -31,21 +32,17 @@ export const useStyles = () => {
       borderRadius: 50,
     },
     imageContainer: {
-      maxHeight: height * 0.8,
-      height: width * (16 / 9),
+      maxHeight: height * 0.9,
+      height: '85%',
       width: width,
       borderRadius: 20,
       backgroundColor: theme.colors.baseShade4,
       justifyContent: 'center',
       overflow: 'hidden',
     },
-    aspect_ratio: {
-      width: '100%',
-      height: '100%',
-    },
     image: {
       width: '100%',
-      height: '60%',
+      height: '100%',
     },
     shareStoryBtn: {
       marginTop: 16,
@@ -79,31 +76,36 @@ export const useStyles = () => {
       right: 24,
     },
     hyperlinkContainer: {
-      backgroundColor: theme.colors.baseShade3,
-      borderRadius: 50,
-      paddingHorizontal: 24,
-      paddingVertical: 8,
+      backgroundColor: 'rgba(255,255,255,0.8)',
+      borderRadius: 24,
+      borderWidth: 1,
+      borderColor: theme.colors.baseShade4,
+      paddingLeft: 12,
+      paddingRight: 16,
+      paddingVertical: 10,
       flexDirection: 'row',
       alignItems: 'center',
       alignSelf: 'center',
+      gap: 8,
       position: 'absolute',
       bottom: '20%',
     },
     hyperlinkText: {
-      marginLeft: 8,
-      fontSize: 14,
+      fontSize: 15,
       color: theme.colors.base,
     },
     hyperLinkIcon: {
       width: 32,
       height: 32,
+      color: theme.colors.primary,
     },
     handleBar: {
-      width: 0.15 * width,
-      backgroundColor: theme.colors.baseShade4,
-      height: 5,
+      width: 36,
+      backgroundColor: theme.colors.baseShade3,
+      height: 4,
       marginVertical: 10,
       borderRadius: 10,
+      alignSelf: 'center',
     },
     titleContainer: {
       flexDirection: 'row',
@@ -116,50 +118,58 @@ export const useStyles = () => {
       flex: 1,
     },
     title: {
-      fontSize: 16,
+      fontSize: 17,
       fontWeight: 'bold',
       color: theme.colors.base,
       textAlign: 'center',
     },
     done: {
-      fontSize: 16,
-      fontWeight: 'bold',
-      color: theme.colors.baseShade2,
+      fontSize: 15,
+      color: theme.colors.primaryShade2,
       textAlign: 'right',
     },
+    cancel: {
+      fontSize: 15,
+      color: theme.colors.base,
+    },
     activeDone: {
       color: theme.colors.primary,
     },
     horizontalSperator: {
       width: '100%',
       backgroundColor: theme.colors.baseShade4,
-      height: 2,
+      height: 1,
       marginVertical: 10,
     },
+    contentContainer: {
+      paddingHorizontal: 16,
+    },
+
     commentBottomSheet: {
-      alignItems: 'center',
       height: '100%',
     },
     inputContainer: {
-      width: '85%',
+      alignSelf: 'stretch',
       borderBottomWidth: 1,
-      borderBottomColor: theme.colors.base,
-      paddingVertical: 12,
+      borderBottomColor: theme.colors.baseShade4,
+      paddingTop: 24,
+      paddingBottom: 16,
     },
     rowContainer: {
       width: '100%',
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
+      marginBottom: 16,
     },
     textCount: {
-      marginVertical: 24,
-      color: theme.colors.baseShade1,
+      fontSize: 13,
+      color: theme.colors.baseShade3,
     },
     label: {
-      fontSize: 16,
+      fontSize: 17,
       color: theme.colors.base,
-      marginVertical: 24,
+      marginBottom: 16,
       alignSelf: 'flex-start',
       fontWeight: 'bold',
     },
@@ -169,33 +179,52 @@ export const useStyles = () => {
     input: {
       padding: 0,
       width: '100%',
-      fontSize: 14,
+      fontSize: 15,
       color: theme.colors.base,
     },
     note: {
-      color: theme.colors.baseShade1,
-      alignSelf: 'flex-start',
-      marginLeft: 28,
+      color: theme.colors.baseShade3,
       marginTop: 8,
     },
     inValidUrl: {
       color: theme.colors.alert,
-      alignSelf: 'flex-start',
-      marginLeft: 28,
       marginTop: 8,
     },
     removeLink: {
       color: theme.colors.alert,
-      fontSize: 14,
-      marginLeft: 8,
+      fontSize: 15,
+    },
+    removeLinkContainer: {
+      marginTop: 32,
     },
     deleteHyperlinkContainer: {
       flexDirection: 'row',
-      marginTop: 28,
       alignItems: 'center',
+      gap: 8,
+      paddingTop: 8,
+      paddingBottom: 12,
+    },
+    removeLinkDivider: {
+      height: 1,
+      backgroundColor: theme.colors.baseShade4,
+      marginHorizontal: 16,
     },
     alertBorderColor: {
-      borderBlockColor: theme.colors.alert,
+      borderBottomColor: theme.colors.alert,
+    },
+    storyGradient: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+    },
+    blurredBackground: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
     },
   });
 

package/src/social/features/story/View/View.tsx

@@ -8,6 +8,7 @@ import { ImageSizeState } from '../../../enums';
 import { CommunityRepository } from '@amityco/ts-sdk-react-native';
 import { NextOrPrevious } from '../../../components/StoryKit';
 import AmityViewStoryItem from './components/AmityViewStoryItem';
+import { defaultCommunityAvatarUri } from '../../../../core/assets';
 
 interface IAmityViewStoryPage {
   targetType: Amity.StoryTargetType;
@@ -17,6 +18,7 @@ interface IAmityViewStoryPage {
   onFinish?: (state?: NextOrPrevious, targetId?: string) => void;
   onPressCommunityName?: () => void;
   onPressAvatar?: () => void;
+  onNavigateToUser?: (userId: string) => void;
 }
 
 interface IStoryData extends Amity.Story {
@@ -31,10 +33,11 @@ const AmityViewStoryPage: FC<IAmityViewStoryPage> = ({
   onPressAvatar,
   currentPage,
   index,
+  onNavigateToUser,
 }) => {
   const { client } = useAuth();
   const userId = (client as Amity.Client).userId;
-  const hasStoryPermission = useStoryPermission(targetId);
+  const { hasStoryPermission } = useStoryPermission(targetId);
   const styles = useStyles();
   const { getStories, stories, loading } = useStory();
   const { getImage } = useFile();
@@ -93,8 +96,9 @@ const AmityViewStoryPage: FC<IAmityViewStoryPage> = ({
           const avatarUrl = await getImage({
             fileId: data.avatarFileId,
             imageSize: ImageSizeState.small,
+            type: 'community',
           });
-          setCommunityAvatar(avatarUrl);
+          setCommunityAvatar(avatarUrl ?? defaultCommunityAvatarUri);
         }
       }
     );
@@ -140,6 +144,7 @@ const AmityViewStoryPage: FC<IAmityViewStoryPage> = ({
         hasStoryPermission={hasStoryPermission}
         onPressAvatar={onPressAvatar}
         onPressCommunityName={onPressCommunityName}
+        onNavigateToUser={onNavigateToUser}
       />
     );
   }

package/src/social/features/story/View/components/AmityViewStoryItem.tsx

@@ -11,6 +11,7 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
 import { FC, memo, useCallback, useRef, useState } from 'react';
 import { useConfigImageUri, useStory } from '../../../../hooks';
 import { useStyles } from '../styles';
@@ -24,6 +25,7 @@ import {
   storyLikedIcon,
   storyThreedotsMenu,
 } from '../../../../../core/assets/icons/xml';
+import { trash } from '../../../../../core/assets/icons';
 import { SvgXml } from 'react-native-svg';
 import Modal from 'react-native-modalbox';
 import { ComponentID, ElementID, PageID } from '../../../../enums';
@@ -58,6 +60,7 @@ interface IAmityViewStoryItem {
   hasStoryPermission: boolean;
   onPressAvatar?: () => void;
   onPressCommunityName?: () => void;
+  onNavigateToUser?: (userId: string) => void;
 }
 
 interface IStoryData extends Amity.Story {
@@ -76,6 +79,7 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
   hasStoryPermission,
   onPressAvatar,
   onPressCommunityName,
+  onNavigateToUser,
 }) => {
   const styles = useStyles();
   const theme = useTheme<MyMD3Theme>();
@@ -240,6 +244,14 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
     setPressed(false);
   }, [startAnimation]);
 
+  const onNavigateFromComment = useCallback(
+    (userId: string) => {
+      onClosedCommentSheet();
+      onNavigateToUser && onNavigateToUser(userId);
+    },
+    [onClosedCommentSheet, onNavigateToUser]
+  );
+
   const deleteStory = useCallback(async () => {
     setLoading(true);
     try {
@@ -323,8 +335,23 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
       currentStory?.syncState === 'syncing' ||
       !currentStory?.videoData?.fileUrl);
 
+  const imageUri =
+    currentStory?.imageData?.fileUrl ||
+    (typeof currentStory?.data?.fileData === 'string'
+      ? currentStory?.data?.fileData
+      : '');
+
   return (
     <View style={[styles.container]}>
+      {currentStory?.dataType === 'image' &&
+        currentStory?.data?.imageDisplayMode !== 'fill' && (
+          <Image
+            source={{ uri: imageUri }}
+            style={styles.blurredBackground}
+            resizeMode="cover"
+            blurRadius={20}
+          />
+        )}
       <SafeAreaView>
         <View style={styles.backgroundContainer}>
           {currentStory?.dataType === 'video' ? (
@@ -347,25 +374,37 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
               muted={muted}
             />
           ) : currentStory?.dataType === 'image' ? (
-            <Image
-              onLoadStart={() => setLoad(true)}
-              onLoadEnd={() => start()}
-              source={{
-                uri:
-                  currentStory?.imageData?.fileUrl ||
-                  (typeof currentStory?.data?.fileData === 'string'
-                    ? currentStory?.data?.fileData
-                    : ''),
-              }}
-              style={[
-                styles.image,
-                // eslint-disable-next-line react-native/no-inline-styles
-                isFailedImageUpload && {
-                  opacity: 0.6,
-                },
-              ]}
-              resizeMode="contain"
-            />
+            <>
+              <Image
+                onLoadStart={() => setLoad(true)}
+                onLoadEnd={() => start()}
+                source={{ uri: imageUri }}
+                style={[
+                  styles.image,
+                  // eslint-disable-next-line react-native/no-inline-styles
+                  isFailedImageUpload && {
+                    opacity: 0.6,
+                  },
+                ]}
+                resizeMode={
+                  currentStory?.data?.imageDisplayMode === 'fill'
+                    ? 'cover'
+                    : 'contain'
+                }
+              />
+              {currentStory?.data?.imageDisplayMode === 'fill' && (
+                <LinearGradient
+                  colors={[
+                    'rgba(0, 0, 0, 0.4)',
+                    'transparent',
+                    'rgba(0, 0, 0, 0.4)',
+                  ]}
+                  start={{ x: 0, y: 0 }}
+                  end={{ x: 0, y: 1 }}
+                  style={styles.storyGradient}
+                />
+              )}
+            </>
           ) : null}
           {load && (
             <View style={styles.spinnerContainer}>
@@ -609,7 +648,8 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
               postType="story"
               disabledComment={!communityData?.allowCommentInStory}
               disabledInteraction={!communityData?.isJoined}
-              onNavigate={onClose}
+              onNavigate={onNavigateFromComment}
+              withAvatar={true}
             />
           </KeyboardAvoidingView>
         </Modal>
@@ -623,6 +663,12 @@ const AmityViewStoryItem: FC<IAmityViewStoryItem> = ({
       >
         <View style={styles.deleteBottomSheet}>
           <TouchableOpacity style={styles.deleteBtn} onPress={onPressDelete}>
+            <SvgXml
+              xml={trash()}
+              width={24}
+              height={24}
+              color={theme.colors.base}
+            />
             <Text style={styles.deleteStoryTxt}>Delete story</Text>
           </TouchableOpacity>
         </View>

package/src/social/features/story/View/styles.ts

@@ -1,9 +1,11 @@
 import { StyleSheet, useWindowDimensions, Platform } from 'react-native';
 import { useTheme } from 'react-native-paper';
 import type { MyMD3Theme } from '../../../../core/providers/AmityUIKitProvider';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export const useStyles = () => {
   const theme = useTheme() as MyMD3Theme;
+  const { bottom } = useSafeAreaInsets();
   const { width, height } = useWindowDimensions();
   const styles = StyleSheet.create({
     video: {
@@ -63,8 +65,8 @@ export const useStyles = () => {
       paddingHorizontal: 15,
     },
     avatarImage: {
-      height: 35,
-      width: 35,
+      height: 40,
+      width: 40,
       borderRadius: 100,
     },
     avatarText: {
@@ -113,8 +115,11 @@ export const useStyles = () => {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
-      marginBottom: 50,
       paddingHorizontal: 20,
+      paddingTop: 16,
+      paddingBottom:
+        Platform.OS === 'android' ? Math.max(bottom, 34) + 16 : bottom + 16,
+      backgroundColor: '#000',
     },
     muteBtn: {
       width: 30,
@@ -173,8 +178,8 @@ export const useStyles = () => {
     },
     storyCreateIcon: {
       position: 'absolute',
-      left: 25,
-      top: 25,
+      left: 28,
+      top: 28,
     },
     bottomSheet: {
       borderTopLeftRadius: 20,
@@ -190,6 +195,8 @@ export const useStyles = () => {
     },
     deleteBtn: {
       flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
       backgroundColor: theme.colors.background,
     },
     commentBottomSheet: {
@@ -199,7 +206,7 @@ export const useStyles = () => {
       height: '100%',
     },
     handleBar: {
-      width: 0.25 * width,
+      width: 36,
       backgroundColor: theme.colors.baseShade4,
       height: 5,
       marginVertical: 10,
@@ -218,7 +225,8 @@ export const useStyles = () => {
     },
     deleteStoryTxt: {
       color: theme.colors.base,
-      fontSize: 14,
+      fontSize: 15,
+      fontWeight: '600',
     },
     errorContainer: {
       width: '100%',
@@ -241,6 +249,20 @@ export const useStyles = () => {
     errorText: {
       color: 'white',
     },
+    storyGradient: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+    },
+    blurredBackground: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+    },
   });
 
   return styles;