diff --git a/src/CONST/index.ts b/src/CONST/index.ts index 3f35c2c1e595b..9913ae01eb94f 100644 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -6209,6 +6209,7 @@ const CONST = { NORMAL: 8, }, DEFAULT_VIDEO_DIMENSIONS: {width: 1900, height: 1400}, + OFFLINE_THRESHOLD: 7000, }, INTRO_CHOICES: { diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx index 51574db17dd2e..01a169c211eab 100644 --- a/src/components/VideoPlayer/BaseVideoPlayer.tsx +++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx @@ -59,6 +59,7 @@ function BaseVideoPlayer({ const {isFullScreenRef} = useFullScreenState(); const isOffline = useNetwork().isOffline; + const [isVideoOffline, setIsVideoOffline] = useState(false); const session = useSession(); const encryptedAuthToken = session?.encryptedAuthToken ?? ''; const [duration, setDuration] = useState(videoDuration); @@ -109,11 +110,24 @@ function BaseVideoPlayer({ }); useEffect(() => { - if (!(isOffline && isLoading)) { + if (!isOffline) { + setIsVideoOffline(false); + return; + } + + const timer = setTimeout(() => { + setIsVideoOffline(true); + }, CONST.VIDEO_PLAYER.OFFLINE_THRESHOLD); + + return () => clearTimeout(timer); + }, [isOffline]); + + useEffect(() => { + if (!(isVideoOffline && isLoading && isOffline)) { return; } videoPlayerRef.current.replaceAsync(''); - }, [isLoading, isOffline]); + }, [isLoading, isVideoOffline, isOffline]); const videoViewRef = useRef(null); const videoPlayerElementParentRef = useRef(null); @@ -124,18 +138,18 @@ function BaseVideoPlayer({ const isCurrentlyURLSet = currentlyPlayingURL === url; const isUploading = CONST.ATTACHMENT_LOCAL_URL_PREFIX.some((prefix) => url.startsWith(prefix)); const shouldShowErrorIndicator = useMemo(() => { - // No need to set hasError while offline, since the offline indicator is already shown. + // No need to set hasError while confirmed offline, since the offline indicator is already shown. // Once the user reconnects, if the video is unsupported, the error will be triggered again. - return hasError && !isOffline; - }, [hasError, isOffline]); + return hasError && !isVideoOffline; + }, [hasError, isVideoOffline]); const shouldShowLoadingIndicator = useMemo(() => { // We want to show LoadingIndicator when video's loading and paused, except when it's loading - // for the first time, then playing/loading may vary. Video should be online and without errors. - return isLoading && (!isPlaying || currentTime <= 0) && !isOffline && !hasError; - }, [currentTime, hasError, isLoading, isOffline, isPlaying]); + // for the first time, then playing/loading may vary. Video should not be confirmed offline and without errors. + return isLoading && (!isPlaying || currentTime <= 0) && !isVideoOffline && !hasError; + }, [currentTime, hasError, isLoading, isVideoOffline, isPlaying]); const shouldShowOfflineIndicator = useMemo(() => { - return isOffline && currentTime + bufferedPosition <= 0; - }, [bufferedPosition, currentTime, isOffline]); + return isVideoOffline && currentTime + bufferedPosition <= 0; + }, [bufferedPosition, currentTime, isVideoOffline]); const {updateVolume} = useVolumeActions(); const {lastNonZeroVolume} = useVolumeState(); useHandleNativeVideoControls({