@amityco/react-native-social-uikit 4.0.0-ca3519f.0 → 4.0.0-cfcb02e.0

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

@@ -8,7 +8,7 @@ export const useStyles = () => {
   const { height: screenHeight } = Dimensions.get('window');
   const insets = useSafeAreaInsets();
 
-  const availableHeight = screenHeight - 80 - 60 - 40 - 40 - 120;
+  const availableHeight = screenHeight - 80 - 60 - 40 - 40 - 120 - 50;
   const styles = StyleSheet.create({
     container: {
       flex: 1,
@@ -26,7 +26,6 @@ export const useStyles = () => {
     },
     overlay: {
       flex: 1,
-      height: '100%',
       top: 0,
       bottom: 0,
       left: 0,
@@ -158,12 +157,19 @@ export const useStyles = () => {
     text: {
       color: theme.colors.background,
     },
-    timer: {
+
+    closeButton: {
       left: 16,
       zIndex: 100,
       position: 'absolute',
       top: 20 + insets.top,
     },
+    timer: {
+      right: 16,
+      zIndex: 100,
+      position: 'absolute',
+      top: 20 + insets.top,
+    },
     permission: {
       flex: 1,
       top: 80 + insets.top,
@@ -191,6 +197,69 @@ export const useStyles = () => {
       color: theme.colors.background,
       textAlign: 'center',
     },
+    containerRoom: {
+      flex: 1,
+      alignItems: 'stretch',
+      justifyContent: 'center',
+      padding: 10,
+    },
+    participantView: {
+      flex: 1,
+      margin: 5,
+      height: 200,
+      backgroundColor: '#ccc',
+    },
+    roomContainer: {
+      flex: 1,
+      width: '100%',
+      height: '100%',
+    },
+    videoTrack: {
+      width: '100%',
+      height: '100%',
+    },
+    countdownOverlay: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 80,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: 'rgba(0, 0, 0, 0.7)',
+      zIndex: 150,
+    },
+    countdownContainer: {
+      alignItems: 'center',
+      gap: 24,
+    },
+    countdownCircle: {
+      position: 'relative',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 72,
+      height: 72,
+    },
+    countdownNumberContainer: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    countdownNumber: {
+      fontSize: 32,
+      fontWeight: '700',
+      color: theme.colors.background,
+    },
+    countdownText: {
+      fontSize: 24,
+      fontWeight: '500',
+      color: theme.colors.background,
+      textAlign: 'center',
+    },
   });
 
   return styles;

package/src/v4/PublicApi/Pages/AmityLivestreamPlayerPage/AmityLivestreamPlayerPage.tsx

@@ -1,131 +1,79 @@
-import React, { useEffect, useRef, useState } from 'react';
-import {
-  View,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
-  useAnimatedValue,
-} from 'react-native';
+import React, { useEffect, useState, useRef } from 'react';
+import { View, TouchableOpacity, Platform } from 'react-native';
 import { useStyles } from './styles';
-// @ts-ignore
-// import { AmityStreamPlayer } from '@amityco/video-player-react-native';
 import LiveStreamEndThumbnail from '../../../component/LivestreamContent/LivestreamEndedThumbnail';
-import { Animated } from 'react-native';
 import { SvgXml } from 'react-native-svg';
-import {
-  getPostTopic,
-  PostRepository,
-  StreamRepository,
-  subscribeTopic,
-} from '@amityco/ts-sdk-react-native';
-import { close, pause, resume } from '../../../assets/icons';
+import { close } from '../../../assets/icons';
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { RootStackParamList } from '../../../routes/RouteParamList';
-import { LivestreamStatus } from '../../../enum/livestreamStatus';
+import { RoomStatus } from '../../../enum/roomStatus';
 import LiveStreamIdleThumbnail from '../../../component/LivestreamContent/LivestreamIdleThumbnail';
 import { Typography } from '../../../component/Typography/Typography';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import NetInfo from '@react-native-community/netinfo';
 import { CircularProgressIndicator } from '../../../component/CircularProgressIndicator';
-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 };
-};
+import Video from 'react-native-video';
+import useAuth from '../../../../hooks/useAuth';
+import {
+  usePostSubscription,
+  useRoomSubscription,
+} from '../../../../v4/hook/index';
+import { RoomRepository } from '@amityco/ts-sdk-react-native';
 
 function AmityLiveStreamPlayerPage() {
-  const ref = useRef<any>(null);
   const { styles, theme } = useStyles();
-  const controlOpacity = useAnimatedValue(0);
   const navigation =
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const route = useRoute<RouteProp<RootStackParamList, 'LivestreamPlayer'>>();
 
-  const [error, setError] = useState<any>(null);
-  const [isPlaying, setIsPlaying] = useState(true);
   const [reconnecting, setReconnecting] = useState(false);
-  const [livestream, setLivestream] = useState<Amity.Stream>();
-
-  const { streamId, post } = route.params;
-
+  const [room, setRoom] = useState<Amity.Room | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+  const [isVideoLoading, setIsVideoLoading] = useState(true);
+  const [videoKey, setVideoKey] = useState(0);
+  const [isPaused, setIsPaused] = useState(false);
+  const [wasLive, setWasLive] = useState(false);
+
+  const { roomId, post } = route.params;
   const { subscribedPost } = usePostSubscription(post?.postId);
+  useRoomSubscription({ room });
 
-  const onStopPlayer = () => {
-    ref.current && ref.current.pause();
-    setIsPlaying(false);
-  };
-
-  const onStartPlayer = () => {
-    ref.current && ref.current.play();
-    setIsPlaying(true);
-  };
-
-  const onPressControlButton = () => {
-    isPlaying ? onStopPlayer() : onStartPlayer();
-  };
-
-  const onToggleControl = () => {
-    controlOpacity.stopAnimation((currentValue) => {
-      Animated.timing(controlOpacity, {
-        toValue: currentValue === 0 ? 1 : 0,
-        duration: 300,
-        useNativeDriver: false,
-      }).start();
-    });
-  };
+  const { client } = useAuth();
+  const videoRef = useRef<any>(null);
+  const isStreamEnding = useRef(false);
 
   useEffect(() => {
-    const unsubscribe = StreamRepository.getStreamById(
-      streamId,
+    const unsubscribe = RoomRepository.getRoom(
+      roomId,
       ({ data, loading, error: streamError }) => {
         if (streamError) setError(streamError);
-        if (!loading && data) setLivestream({ ...data });
+        if (!loading && data) setRoom({ ...data });
       }
     );
 
     return () => unsubscribe();
-  }, [streamId]);
+  }, [roomId]);
 
   useEffect(() => {
-    if (livestream?.isDeleted || subscribedPost?.isDeleted) {
-      navigation.replace('PostDetail', { postId: subscribedPost?.postId });
+    if (room?.status === RoomStatus.live) {
+      setWasLive(true);
     }
-  }, [livestream?.isDeleted, subscribedPost, navigation]);
+  }, [room?.status]);
 
   useEffect(() => {
-    const isTerminated =
-      livestream?.moderation?.terminateLabels &&
-      livestream?.moderation?.terminateLabels?.length > 0;
-    const isLiveOrEnded =
-      livestream?.status === LivestreamStatus.live ||
-      livestream?.status === LivestreamStatus.ended;
-
-    if (isLiveOrEnded && isTerminated) {
-      navigation.replace('LivestreamTerminated', { type: 'viewer' });
+    if (room?.isDeleted || subscribedPost?.isDeleted) {
+      navigation.replace('PostDetail', {
+        postId: subscribedPost?.postId,
+        isDeleted: subscribedPost?.isDeleted,
+      });
     }
-  }, [livestream?.moderation?.terminateLabels, livestream?.status, navigation]);
+  }, [
+    navigation,
+    room?.isDeleted,
+    subscribedPost?.postId,
+    subscribedPost?.isDeleted,
+  ]);
 
   useEffect(() => {
     const unsubscribe = NetInfo.addEventListener((state) => {
@@ -134,24 +82,68 @@ function AmityLiveStreamPlayerPage() {
     return () => unsubscribe();
   }, []);
 
-  if (!livestream || error)
+  useEffect(() => {
+    if (!room?.status) return;
+
+    const shouldEnd =
+      room.status === RoomStatus.ended ||
+      (room.status === RoomStatus.recorded && wasLive);
+
+    if (!shouldEnd || isStreamEnding.current) return;
+
+    isStreamEnding.current = true;
+    setIsPaused(true);
+
+    if (Platform.OS === 'ios') {
+      // iOS: ONLY dismiss fullscreen. DO NOT touch key. DO NOT unmount.
+      requestAnimationFrame(() => {
+        videoRef.current?.dismissFullscreenPlayer?.();
+      });
+    } else {
+      // Android: HARD destroy
+      setTimeout(() => {
+        setVideoKey((prev) => prev + 1);
+      }, 50);
+    }
+  }, [room?.status, wasLive]);
+
+  useEffect(() => {
+    if (room?.status === RoomStatus.terminated) {
+      navigation.replace('LivestreamTerminated', { type: 'viewer' });
+    }
+  }, [room?.status, navigation]);
+
+  const shouldShowEndThumbnail =
+    room?.status === RoomStatus.ended ||
+    (room?.status === RoomStatus.recorded && wasLive) ||
+    (room as any)?.user?.isGlobalBan;
+
+  if (!room || error) {
     return (
       <SafeAreaView style={styles.container}>
         <LiveStreamIdleThumbnail />
       </SafeAreaView>
     );
+  }
+
+  const closePlayer = () => {
+    navigation.goBack();
+  };
+
+  const videoUrl =
+    room.status === RoomStatus.recorded
+      ? room.recordedPlaybackInfos[0]?.url
+      : room.livePlaybackUrl;
 
   return (
     <SafeAreaView style={styles.container}>
-      {livestream.status === LivestreamStatus.ended ? (
+      {shouldShowEndThumbnail ? (
         <>
           <View style={styles.steamEndContainer}>
             <LiveStreamEndThumbnail />
           </View>
-          <TouchableOpacity
-            style={styles.closeButton}
-            onPress={navigation.goBack}
-          >
+
+          <TouchableOpacity style={styles.closeButton} onPress={closePlayer}>
             <SvgXml
               xml={close()}
               width="28"
@@ -160,14 +152,65 @@ function AmityLiveStreamPlayerPage() {
             />
           </TouchableOpacity>
         </>
-      ) : // <AmityStreamPlayer
-      //   ref={ref}
-      //   stream={livestream}
-      //   onBack={navigation.goBack}
-      //   status={livestream.status === 'live' ? 'live' : 'recorded'}
-      // />
-      null}
-      {livestream.status === LivestreamStatus.live && reconnecting && (
+      ) : (
+        <View style={styles.container}>
+          {(room.status === RoomStatus.live ||
+            room.status === RoomStatus.waitingReconnect) && (
+            <View style={styles.indicator}>
+              <View style={styles.status}>
+                <Typography.CaptionBold style={styles.live}>
+                  LIVE
+                </Typography.CaptionBold>
+              </View>
+            </View>
+          )}
+
+          {!shouldShowEndThumbnail && (
+            <Video
+              key={
+                Platform.OS === 'android' ? `${videoUrl}-${videoKey}` : videoUrl
+              }
+              ref={videoRef}
+              source={{
+                uri:
+                  room.status === RoomStatus.recorded
+                    ? room.recordedPlaybackInfos[0]?.url
+                    : room.livePlaybackUrl,
+                headers: {
+                  Authorization: `Bearer ${client?.token?.accessToken}`,
+                },
+                type: 'm3u8',
+              }}
+              style={styles.container}
+              resizeMode="cover"
+              controls={true}
+              fullscreenOrientation="landscape"
+              paused={isPaused}
+              muted={false}
+              volume={1.0}
+              audioOutput="speaker"
+              playInBackground={false}
+              playWhenInactive={false}
+              repeat={false}
+              onLoad={() => {
+                setIsVideoLoading(false);
+                if (room.status === RoomStatus.recorded) {
+                  setIsPaused(false);
+                }
+              }}
+            />
+          )}
+
+          {isVideoLoading && (
+            <View style={styles.connecting}>
+              <CircularProgressIndicator size={40} strokeWidth={2} />
+            </View>
+          )}
+        </View>
+      )}
+
+      {((room.status === RoomStatus.live && reconnecting) ||
+        room.status === RoomStatus.waitingReconnect) && (
         <View style={styles.connecting}>
           <CircularProgressIndicator size={40} strokeWidth={2} />
           <Typography.TitleBold style={styles.text}>
@@ -179,54 +222,6 @@ function AmityLiveStreamPlayerPage() {
           </Typography.Caption>
         </View>
       )}
-      {livestream.status === LivestreamStatus.live && (
-        <>
-          <View style={styles.indicator}>
-            <View style={styles.status}>
-              <Typography.CaptionBold style={styles.live}>
-                LIVE
-              </Typography.CaptionBold>
-            </View>
-          </View>
-          <TouchableWithoutFeedback onPress={onToggleControl}>
-            <Animated.View
-              style={[styles.control, { opacity: controlOpacity }]}
-            >
-              <TouchableOpacity
-                style={styles.closeButton}
-                onPress={navigation.goBack}
-              >
-                <SvgXml
-                  xml={close()}
-                  width="28"
-                  height="28"
-                  color={theme.colors.background}
-                />
-              </TouchableOpacity>
-
-              <View style={styles.controller}>
-                <TouchableOpacity onPress={onPressControlButton}>
-                  {isPlaying ? (
-                    <SvgXml
-                      width={32}
-                      height={32}
-                      xml={pause()}
-                      color={theme.colors.background}
-                    />
-                  ) : (
-                    <SvgXml
-                      width={32}
-                      height={32}
-                      xml={resume()}
-                      color={theme.colors.background}
-                    />
-                  )}
-                </TouchableOpacity>
-              </View>
-            </Animated.View>
-          </TouchableWithoutFeedback>
-        </>
-      )}
     </SafeAreaView>
   );
 }

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

@@ -13,14 +13,16 @@ export const useStyles = () => {
       position: 'relative',
       backgroundColor: '#000000',
     },
+
     steamEndContainer: {
       flex: 1,
       justifyContent: 'center',
+      backgroundColor: '#000000',
     },
     indicator: {
       left: 16,
       zIndex: 1,
-      top: insets.top + 20,
+      top: 20,
       position: 'absolute',
     },
     status: {

package/src/v4/PublicApi/Pages/AmityPostDetailPage/AmityPostDetailPage.tsx

@@ -40,6 +40,8 @@ import { closeIcon } from '../../../../svg/svg-xml-list';
 import { SvgXml } from 'react-native-svg';
 import { IMentionPosition } from '../../../../types';
 import uiSlice from '../../../../redux/slices/uiSlice';
+import NetInfo from '@react-native-community/netinfo';
+import { useToast } from '../../../../v4/stores/slices/toast';
 import MyAvatar from '../../../../v4/component/MyAvatar/MyAvatar';
 import {
   comment_contains_inapproproate_word,
@@ -64,6 +66,7 @@ type AmityPostDetailPageType = {
   isFromComponent?: boolean;
   showEndPopup?: boolean;
   category?: AmityPostCategory;
+  isDeleted?: boolean;
 };
 
 const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
@@ -71,6 +74,7 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
   isFromComponent,
   showEndPopup,
   category,
+  isDeleted,
 }) => {
   const pageId = PageID.post_detail_page;
   const dispatch = useUIKitDispatch();
@@ -80,6 +84,7 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
     useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const { isExcluded, themeStyles, accessibilityId } = useAmityPage({ pageId });
   const styles = useStyles(themeStyles);
+  const { showToast } = useToast();
   const [postData, setPostData] = useState<Amity.Post<any>>(null);
   const [loading, setLoading] = useState<boolean>(true);
 
@@ -108,6 +113,20 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
 
   const { showToastMessage } = uiSlice.actions;
 
+  useEffect(() => {
+    const unsubscribe = NetInfo.addEventListener((state) => {
+      if (!state.isConnected) {
+        showToast({
+          type: 'failed',
+          message: 'No internet connection.',
+          duration: 3000,
+          bottomPosition: 96,
+        });
+      }
+    });
+    return () => unsubscribe();
+  }, [showToast]);
+
   useLayoutEffect(() => {
     if (!postId) return () => {};
     setLoading(true);
@@ -304,7 +323,7 @@ const AmityPostDetailPage: FC<AmityPostDetailPageType> = ({
 
   if (isExcluded) return null;
 
-  if (postData?.isDeleted) {
+  if (isDeleted || postData?.isDeleted) {
     return (
       <ErrorComponent
         themeStyle={themeStyles}

package/src/v4/PublicApi/Pages/AmitySocialGlobalSearchPage/AmitySocialGlobalSearchPage.tsx

@@ -31,7 +31,6 @@ const AmitySocialGlobalSearchPage = () => {
       />
     </View>
   );
-
   const isCommunity = searchType === TabName.Communities;
   if (isExcluded) return null;
   return (

package/src/v4/PublicApi/Pages/AmityUserProfilePage/AmityUserProfilePage.tsx

@@ -152,7 +152,9 @@ function UserProfile({
         </TouchableOpacity>
       ),
       headerLeft: () => {
-        return isShowBackButton ? <BackButton onPress={handleGoBack} /> : null;
+        return isShowBackButton ? (
+          <BackButton goBack={false} onPress={handleGoBack} />
+        ) : null;
       },
     });
   }, [
@@ -174,17 +176,32 @@ function UserProfile({
   }, [client]);
 
   useEffect(() => {
-    if (!user?.avatarFileId) {
-      return setAvatar(defaultAvatarUri);
-    }
-    (async () => {
+    const loadAvatar = async () => {
+      if (!user) {
+        setAvatar(defaultAvatarUri);
+        return;
+      }
+
+      if (user.avatarCustomUrl) {
+        setAvatar(user.avatarCustomUrl);
+        return;
+      }
+
+      if (!user.avatarFileId) {
+        setAvatar(defaultAvatarUri);
+        return;
+      }
+
       const avatarUrl = await getImage({
         fileId: user.avatarFileId,
         imageSize: ImageSizeState.small,
       });
+
       setAvatar(avatarUrl ?? defaultAvatarUri);
-    })();
-  }, [getImage, user?.avatarFileId]);
+    };
+
+    loadAvatar();
+  }, [getImage, user]);
 
   useFocusEffect(
     useCallback(() => {

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

@@ -43,7 +43,7 @@ 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 { informative } from '../../../../../v4/assets/icons/toast';
 import { close as closeIcon } from '../../../../assets/icons';
 
 interface IAmityViewStoryItem {

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

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