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

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

@@ -1,9 +1,8 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { View, TouchableOpacity } from 'react-native';
+import { View, TouchableOpacity, Platform } from 'react-native';
 import { useStyles } from './styles';
 import LiveStreamEndThumbnail from '../../../component/LivestreamContent/LivestreamEndedThumbnail';
 import { SvgXml } from 'react-native-svg';
-import { RoomRepository } from '@amityco/ts-sdk-react-native';
 import { close } from '../../../assets/icons';
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -20,6 +19,7 @@ import {
   usePostSubscription,
   useRoomSubscription,
 } from '../../../../v4/hook/index';
+import { RoomRepository } from '@amityco/ts-sdk-react-native';
 
 function AmityLiveStreamPlayerPage() {
   const { styles, theme } = useStyles();
@@ -29,18 +29,21 @@ function AmityLiveStreamPlayerPage() {
 
   const [reconnecting, setReconnecting] = useState(false);
   const [room, setRoom] = useState<Amity.Room | null>(null);
+  const [videoError, setVideoError] = useState(false);
   const [error, setError] = useState<Error | null>(null);
+  const [, setPlayerInitialized] = useState(false);
+  const [videoKey, setVideoKey] = useState(0);
+  const [isPaused, setIsPaused] = useState(false);
   const [wasLive, setWasLive] = useState(false);
-  const [showEndThumbnail, setShowEndThumbnail] = useState(false);
-  const { roomId, post } = route.params;
-  const { client } = useAuth();
-  const videoRef = useRef<any>(null);
-  const isProgrammaticDismiss = useRef(false);
 
+  const { roomId, post } = route.params;
   const { subscribedPost } = usePostSubscription(post?.postId);
-
   useRoomSubscription({ room });
 
+  const { client } = useAuth();
+  const videoRef = useRef<any>(null);
+  const isStreamEnding = useRef(false);
+
   useEffect(() => {
     const unsubscribe = RoomRepository.getRoom(
       roomId,
@@ -54,22 +57,21 @@ function AmityLiveStreamPlayerPage() {
   }, [roomId]);
 
   useEffect(() => {
-    if (room?.isDeleted || subscribedPost?.isDeleted) {
-      navigation.replace('PostDetail', { postId: subscribedPost?.postId });
+    if (room?.status === RoomStatus.live) {
+      setWasLive(true);
     }
-  }, [room?.isDeleted, subscribedPost, navigation]);
+  }, [room?.status]);
 
   useEffect(() => {
-    const isTerminated =
-      room?.moderation?.terminateLabels &&
-      room?.moderation?.terminateLabels?.length > 0;
-    const isLiveOrEnded =
-      room?.status === RoomStatus.live || room?.status === RoomStatus.ended;
-
-    if (isLiveOrEnded && isTerminated) {
-      navigation.replace('LivestreamTerminated', { type: 'viewer' });
+    if (room?.isDeleted || subscribedPost?.isDeleted) {
+      navigation.replace('PostDetail', { postId: subscribedPost?.postId });
     }
-  }, [room?.moderation?.terminateLabels, room?.status, navigation]);
+  }, [
+    navigation,
+    room?.isDeleted,
+    subscribedPost?.postId,
+    subscribedPost?.isDeleted,
+  ]);
 
   useEffect(() => {
     const unsubscribe = NetInfo.addEventListener((state) => {
@@ -78,44 +80,94 @@ function AmityLiveStreamPlayerPage() {
     return () => unsubscribe();
   }, []);
 
-  // Track if user was watching live
   useEffect(() => {
-    if (room?.status === RoomStatus.live) {
-      setWasLive(true);
-    }
-  }, [room?.status]);
+    if (!room?.status) return;
 
-  // Dismiss fullscreen player when stream ends
-  useEffect(() => {
-    const shouldShowEndThumbnail =
-      room?.status === RoomStatus.ended ||
-      (room?.status === RoomStatus.recorded && wasLive);
-
-    if (shouldShowEndThumbnail && videoRef.current) {
-      isProgrammaticDismiss.current = true;
-      videoRef.current?.dismissFullscreenPlayer();
-      // Delay showing end thumbnail to allow fullscreen dismiss to complete
+    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(() => {
-        setShowEndThumbnail(true);
-      }, 300);
-    } else if (shouldShowEndThumbnail && !videoRef.current) {
-      // If video ref is already null, show end thumbnail immediately
-      setShowEndThumbnail(true);
-    } else if (!shouldShowEndThumbnail) {
-      setShowEndThumbnail(false);
+        setVideoKey((prev) => prev + 1);
+      }, 50);
     }
   }, [room?.status, wasLive]);
 
-  // Start in fullscreen mode on iOS
   useEffect(() => {
-    if (videoRef.current && room && room.status !== RoomStatus.ended) {
-      const timer = setTimeout(() => {
-        videoRef.current?.presentFullscreenPlayer();
-      }, 100);
-      return () => clearTimeout(timer);
+    let timer: ReturnType<typeof setTimeout> | null = null;
+
+    if (
+      videoRef.current &&
+      room &&
+      room.status === RoomStatus.live &&
+      !videoError &&
+      Platform.OS === 'ios'
+    ) {
+      const isTerminated =
+        room?.moderation?.terminateLabels &&
+        room?.moderation?.terminateLabels?.length > 0;
+
+      if (!isTerminated) {
+        timer = setTimeout(() => {
+          videoRef.current?.presentFullscreenPlayer();
+        }, 100);
+      }
+    }
+
+    return () => {
+      if (timer !== null) {
+        clearTimeout(timer);
+      }
+    };
+  }, [room, videoError]);
+
+  const isTerminated =
+    room?.moderation?.terminateLabels &&
+    room?.moderation?.terminateLabels?.length > 0;
+
+  const shouldShowEndThumbnail =
+    room?.status === RoomStatus.ended ||
+    (room?.status === RoomStatus.recorded && wasLive) ||
+    isTerminated;
+
+  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: just dismiss fullscreen, DO NOT destroy immediately
+      if (videoRef.current) {
+        try {
+          videoRef.current.dismissFullscreenPlayer?.();
+        } catch {}
+      }
+    } else {
+      // Android: HARD destroy
+      setTimeout(() => {
+        setVideoKey((prev) => prev + 1);
+      }, 50);
     }
-    return undefined;
-  }, [room]);
+  }, [room?.status, wasLive]);
 
   if (!room || error) {
     return (
@@ -129,21 +181,19 @@ function AmityLiveStreamPlayerPage() {
     navigation.goBack();
   };
 
-  const handleFullscreenDismiss = () => {
-    // Only navigate back if user manually dismissed, not programmatically
-    if (!isProgrammaticDismiss.current) {
-      closePlayer();
-    }
-    isProgrammaticDismiss.current = false;
-  };
+  const videoUrl =
+    room.status === RoomStatus.recorded
+      ? room.recordedPlaybackInfos[0]?.url
+      : room.livePlaybackUrl;
 
   return (
     <SafeAreaView style={styles.container}>
-      {showEndThumbnail ? (
+      {shouldShowEndThumbnail ? (
         <>
           <View style={styles.steamEndContainer}>
             <LiveStreamEndThumbnail />
           </View>
+
           <TouchableOpacity style={styles.closeButton} onPress={closePlayer}>
             <SvgXml
               xml={close()}
@@ -165,35 +215,53 @@ function AmityLiveStreamPlayerPage() {
               </View>
             </View>
           )}
-          <Video
-            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="contain"
-            controls={room.status === RoomStatus.recorded}
-            fullscreen={true}
-            fullscreenOrientation="landscape"
-            paused={false}
-            muted={false}
-            volume={1.0}
-            audioOutput="speaker"
-            playInBackground={false}
-            playWhenInactive={false}
-            onError={(e) => {
-              console.log('Video Player Error: ', e);
-            }}
-            onFullscreenPlayerDidDismiss={handleFullscreenDismiss}
-          />
+
+          {!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}`,
+                },
+              }}
+              style={styles.container}
+              resizeMode="contain"
+              controls={room?.status === RoomStatus.recorded && !wasLive}
+              fullscreen={
+                Platform.OS === 'ios' && room.status !== RoomStatus.recorded
+              }
+              fullscreenOrientation="landscape"
+              paused={isPaused}
+              muted={false}
+              volume={1.0}
+              audioOutput="speaker"
+              playInBackground={false}
+              playWhenInactive={false}
+              repeat={false}
+              onLoad={() => {
+                setPlayerInitialized(true);
+                if (room.status === RoomStatus.recorded) {
+                  setIsPaused(false);
+                }
+              }}
+              onError={(e) => {
+                console.log('Video Error: ', e);
+                setVideoError(true);
+              }}
+              onFullscreenPlayerDidDismiss={() => {
+                if (Platform.OS === 'ios') {
+                  closePlayer();
+                }
+              }}
+            />
+          )}
         </View>
       )}
 

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

@@ -17,6 +17,7 @@ export const useStyles = () => {
     steamEndContainer: {
       flex: 1,
       justifyContent: 'center',
+      backgroundColor: '#000000',
     },
     indicator: {
       left: 16,

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/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

@@ -3,5 +3,5 @@ export const RoomStatus = {
   live: 'live' as Amity.RoomStatus,
   recorded: 'recorded' as Amity.RoomStatus,
   ended: 'ended' as Amity.RoomStatus,
-  waiting_reconnect: 'waiting_reconnect' as Amity.RoomStatus,
+  waiting_reconnect: 'waitingReconnect' as Amity.RoomStatus,
 };