@amityco/react-native-social-uikit 4.0.0-RC9 → 4.0.0-b024948b.0

package/src/v4/component/PreviewLink/utils.ts

@@ -2,6 +2,7 @@ import { decode } from 'html-entities';
 import { Image } from 'react-native';
 
 import { PreviewData, PreviewDataImage, Size } from './types';
+import { Client } from '@amityco/ts-sdk-react-native';
 
 export const getActualImageUrl = (baseUrl: string, imageUrl?: string) => {
   let actualImageUrl = imageUrl?.trim();
@@ -54,7 +55,7 @@ export const getImageSize = (url: string) => {
 
 // Functions below use functions from the same file and mocks are not working
 /* istanbul ignore next */
-export const getPreviewData = async (text: string, requestTimeout = 5000) => {
+export const getPreviewData = async (text: string) => {
   const previewData: PreviewData = {
     description: undefined,
     image: undefined,
@@ -77,114 +78,14 @@ export const getPreviewData = async (text: string, requestTimeout = 5000) => {
       url = 'https://' + url;
     }
 
-    let abortControllerTimeout: number;
-    const abortController = new AbortController();
+    const request = await Client.fetchLinkPreview(url);
 
-    const request = fetch(url, {
-      headers: {
-        'User-Agent':
-          'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36',
-      },
-      signal: abortController.signal,
-    });
-
-    abortControllerTimeout = setTimeout(() => {
-      abortController.abort();
-    }, requestTimeout);
-
-    const response = await request;
-
-    clearTimeout(abortControllerTimeout);
-
-    previewData.link = url;
-
-    const contentType = response.headers.get('content-type') ?? '';
-
-    if (REGEX_IMAGE_CONTENT_TYPE.test(contentType)) {
-      const image = await getPreviewDataImage(url);
-      previewData.image = image;
-      return previewData;
-    }
-
-    const html = await response.text();
-
-    // Some pages return undefined
-    if (!html) return previewData;
-
-    const head = html.substring(0, html.indexOf('<body'));
-
-    // Get page title
-    const title = REGEX_TITLE.exec(head);
-    previewData.title = getHtmlEntitiesDecodedText(title?.[1]);
-
-    let matches: RegExpMatchArray | null;
-    const meta: RegExpMatchArray[] = [];
-    while ((matches = REGEX_META.exec(head)) !== null) {
-      // @ts-ignore
-      meta.push([...matches]);
-    }
-
-    const metaPreviewData = meta.reduce<{
-      description?: string;
-      imageUrl?: string;
-      title?: string;
-    }>(
-      (acc, curr) => {
-        // Verify that we have property/name and content
-        // Note that if a page will specify property, name and content in the same meta, regex will fail
-        if (!curr[2] || !curr[3]) return acc;
-
-        // Only take the first occurrence
-        // For description take the meta description tag into consideration
-        const description =
-          !acc.description &&
-          (getContent(curr[2], curr[3], 'og:description') ||
-            getContent(curr[2], curr[3], 'description'));
-        const ogImage =
-          !acc.imageUrl && getContent(curr[2], curr[3], 'og:image');
-        const ogTitle = !acc.title && getContent(curr[2], curr[3], 'og:title');
-
-        return {
-          description: description
-            ? getHtmlEntitiesDecodedText(description)
-            : acc.description,
-          imageUrl: ogImage ? getActualImageUrl(url, ogImage) : acc.imageUrl,
-          title: ogTitle ? getHtmlEntitiesDecodedText(ogTitle) : acc.title,
-        };
-      },
-      { title: previewData.title }
-    );
-
-    previewData.description = metaPreviewData.description;
-    previewData.image = await getPreviewDataImage(metaPreviewData.imageUrl);
-    previewData.title = metaPreviewData.title;
-
-    if (!previewData.image) {
-      let imageMatches: RegExpMatchArray | null;
-      const tags: RegExpMatchArray[] = [];
-      while ((imageMatches = REGEX_IMAGE_TAG.exec(html)) !== null) {
-        // @ts-ignore
-        tags.push([...imageMatches]);
-      }
-
-      let images: PreviewDataImage[] = [];
-
-      for (const tag of tags
-        .filter((t) => !t[1].startsWith('data'))
-        .slice(0, 5)) {
-        const image = await getPreviewDataImage(getActualImageUrl(url, tag[1]));
-
-        if (!image) continue;
-
-        images = [...images, image];
-      }
-
-      previewData.image = images.sort(
-        (a, b) => b.height * b.width - a.height * a.width
-      )[0];
-    }
-
-    return previewData;
+    return {
+      description: request.description || undefined,
+      image: request.image || undefined,
+      link: url,
+      title: request.title || undefined,
+    };
   } catch {
     return previewData;
   }

package/src/v4/component/RenderTextWithMention/RenderTextWithMention.tsx

@@ -1,4 +1,4 @@
-import { Text, Linking } from 'react-native';
+import { Text, Linking, TouchableOpacity } from 'react-native';
 import { useStyles } from './styles';
 import React, { memo, useCallback } from 'react';
 import { useNavigation } from '@react-navigation/native';
@@ -6,6 +6,7 @@ import { IMentionPosition } from '../../types/type';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../routes/RouteParamList';
 import ReadMore from '@fawazahmed/react-native-read-more';
+import { URL_REGEX } from '../../../v4/constants';
 
 interface IrenderTextWithMention {
   mentionPositionArr: IMentionPosition[];
@@ -28,10 +29,9 @@ const RenderTextWithMention: React.FC<IrenderTextWithMention> = ({
   const navigation =
     useNavigation() as NativeStackNavigationProp<RootStackParamList>;
   const linkArr = useCallback((text: string): LinkInfo[] => {
-    const urlRegex = /(https?:\/\/|www\.)[^\s]+/g;
     const links: LinkInfo[] = [];
     let match;
-    while ((match = urlRegex.exec(text)) !== null) {
+    while ((match = URL_REGEX.exec(text)) !== null) {
       links.push({
         link: match[0],
         index: match.index,
@@ -54,8 +54,14 @@ const RenderTextWithMention: React.FC<IrenderTextWithMention> = ({
     },
     [navigation]
   );
-  const handleLinkClick = useCallback((url: string) => {
-    Linking.openURL(url);
+  const handleLinkClick = useCallback(async (url: string) => {
+    try {
+      const hasProtocol = /^(https?|ftp|mailto):/.test(url);
+      const formattedUrl = hasProtocol ? url : `https://${url}`;
+      await Linking.openURL(formattedUrl);
+    } catch (error) {
+      console.warn('Failed to open URL:', error);
+    }
   }, []);
 
   const handleOnClick = useCallback(
@@ -88,14 +94,14 @@ const RenderTextWithMention: React.FC<IrenderTextWithMention> = ({
       const nonHighlightedText = textPost.slice(currentPosition, index);
       // Add highlighted text
       const highlightedText = (
-        <Text
-          selectable
+        <TouchableOpacity
           onPress={() => handleOnClick(link, userId)}
           key={`highlighted-${i}`}
-          style={styles.mentionText}
         >
-          {textPost.slice(index, index + length)}
-        </Text>
+          <Text style={styles.mentionText} selectable>
+            {textPost.slice(index, index + length)}
+          </Text>
+        </TouchableOpacity>
       );
 
       // Update currentPosition for the next iteration

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

@@ -8,8 +8,8 @@ import { informative, failed, success } from '../../assets/icons';
 import { CircularProgressIndicator } from '../CircularProgressIndicator';
 
 const Toast = () => {
-  const { styles, theme } = useStyles();
   const { hideToast, toast } = useToast();
+  const { styles, theme } = useStyles(toast.bottomPosition);
   const timeoutRef = useRef<number | null>(null);
   const fadeIn = useRef(new Animated.Value(0)).current;
 

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

@@ -3,7 +3,7 @@ import { useTheme } from 'react-native-paper';
 import type { MyMD3Theme } from '../../../providers/amity-ui-kit-provider';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-export const useStyles = () => {
+export const useStyles = (bottomPosition: number = 16) => {
   const theme = useTheme<MyMD3Theme>();
   const { bottom } = useSafeAreaInsets();
 
@@ -13,7 +13,7 @@ export const useStyles = () => {
       zIndex: 999,
       width: '90%',
       borderRadius: 8,
-      bottom: bottom + 16,
+      bottom: bottom + bottomPosition,
       paddingVertical: 16,
       alignSelf: 'center',
       flexDirection: 'row',

package/src/v4/constants/index.ts

@@ -105,3 +105,6 @@ export const QUERY_KEY = {
   POSTS_COLLECTION: 'posts-collections',
   PINNED_POSTS_COLLECTION: 'pinned-posts-collections',
 };
+
+export const URL_REGEX =
+  /(?:(?:https?|ftp):\/\/(?:[a-zA-Z0-9.-]+|[\d.]+)(?::\d{1,5})?(?:\/(?:[^\s<>|()]*(?:\([^\s<>|()]*\)[^\s<>|()]*)*)*)?|mailto:[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}|www\.(?:[a-zA-Z0-9.-]+)(?:\/(?:[^\s<>|()]*(?:\([^\s<>|()]*\)[^\s<>|()]*)*)*)?(?!\.))/g;

package/src/v4/enum/roomStatus.ts

@@ -0,0 +1,7 @@
+export const RoomStatus = {
+  idle: 'idle' as Amity.RoomStatus,
+  live: 'live' as Amity.RoomStatus,
+  recorded: 'recorded' as Amity.RoomStatus,
+  ended: 'ended' as Amity.RoomStatus,
+  waiting_reconnect: 'waitingReconnect' as Amity.RoomStatus,
+};

package/src/v4/hook/index.ts

@@ -30,3 +30,5 @@ export * from './usePendingPostQuery';
 export * from './useMembersQuery';
 export * from './useRolesQuery';
 export * from './useFlagUserQuery';
+export * from './usePostSubscription';
+export * from './useRoomSubscription';

package/src/v4/hook/useCustomRankingGlobalFeed.ts

@@ -51,7 +51,7 @@ export const useCustomRankingGlobalFeed = () => {
                   if (
                     data?.dataType === 'image' ||
                     data?.dataType === 'video' ||
-                    // data?.dataType === 'liveStream' ||
+                    data?.dataType === 'room' ||
                     data?.dataType === 'poll'
                   ) {
                     resolve(post);

package/src/v4/hook/usePostSubscription.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import {
+  getPostTopic,
+  PostRepository,
+  subscribeTopic,
+} from '@amityco/ts-sdk-react-native';
+
+export const usePostSubscription = (postId: string) => {
+  const [subscribedPost, setSubscribedPost] = useState<Amity.Post>(null);
+
+  useEffect(() => {
+    let unsubscribe: () => void;
+    if (postId) {
+      unsubscribe = PostRepository.getPost(postId, ({ data }) => {
+        setSubscribedPost(data);
+      });
+    }
+    return () => {
+      unsubscribe && unsubscribe();
+    };
+  }, [postId]);
+
+  useEffect(() => {
+    let unsubscribe: () => void;
+    if (subscribedPost) {
+      unsubscribe = subscribeTopic(getPostTopic(subscribedPost));
+    }
+    return () => {
+      unsubscribe && unsubscribe();
+    };
+  }, [subscribedPost]);
+
+  return { subscribedPost };
+};

package/src/v4/hook/useRoomSubscription.ts

@@ -0,0 +1,19 @@
+import {
+  getRoomWatcherTopic,
+  subscribeTopic,
+} from '@amityco/ts-sdk-react-native';
+import { useEffect } from 'react';
+
+export const useRoomSubscription = ({ room }: { room?: Amity.Room | null }) => {
+  useEffect(() => {
+    const unsubscriber: Amity.Unsubscriber[] = [];
+
+    if (room?.roomId && room?.status !== 'recorded') {
+      unsubscriber.push(subscribeTopic(getRoomWatcherTopic(room)));
+    }
+
+    return () => unsubscriber.forEach((fn) => fn());
+  }, [room, room?.roomId]);
+
+  return null;
+};

package/src/v4/index.tsx

@@ -11,7 +11,7 @@ export { default as AmityMyCommunitiesSearchPage } from './PublicApi/Pages/Amity
 export { default as AmityAllCategoriesPage } from './PublicApi/Pages/AmityAllCategoriesPage/AmityAllCategoriesPage';
 export { default as AmityCommunitiesByCategoryPage } from './PublicApi/Pages/AmityCommunitiesByCategoryPage/AmityCommunitiesByCategoryPage';
 export { default as AmityCommunityProfilePage } from './PublicApi/Pages/AmityCommunityProfilePage/AmityCommunityProfilePage';
-// export { default as AmityCreateLivestreamPage } from './PublicApi/Pages/AmityCreateLivestreamPage';
+export { default as AmityCreateLivestreamPage } from './PublicApi/Pages/AmityCreateLivestreamPage';
 export { default as AmityLivestreamPostTargetSelectionPage } from './PublicApi/Pages/AmityLivestreamPostTargetSelectionPage';
 export { default as AmityLivestreamTerminatedPage } from './PublicApi/Pages/AmityLivestreamTerminatedPage';
 export { default as AmityLivestreamPlayerPage } from './PublicApi/Pages/AmityLivestreamPlayerPage';

package/src/v4/routes/RouteParamList.tsx

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

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

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

package/uikit.config.json

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/v4/enum/livestreamStatus.ts

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