@zezosoft/zezo-ott-react-native-ui-kit 1.1.5 → 1.1.7

package/src/components/Auth/One/SplashScreen/SplashScreen.tsx

@@ -1,249 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Fri 17 Oct 2025 at 09:51 PM
- */
-
-import React, { useEffect, useMemo, useCallback } from 'react';
-import { type ViewStyle } from 'react-native';
-import SplashImage from './components/SplashImage/SplashImage';
-import SplashVideo from './components/SplashVideo/SplashVideo';
-import SplashLottie from './components/SplashLottie/SplashLottie';
-
-import type { ThemeOverride } from '../../../../theme/themes';
-import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
-
-import { BackgroundLayout } from '../../../BackgroundLayout/BackgroundLayout';
-import { useSplashCache } from '../../../../hooks/useSplashCache';
-import { AppStatusBar } from '../../../common/AppStatusBar';
-
-type SplashType = 'image' | 'video' | 'lottie-animation';
-
-type SplashScreenConfig = {
-  source: string;
-  type?: SplashType;
-  width: number;
-  height: number;
-  isStatic?: boolean;
-  screenTime?: number;
-  fullscreen?: boolean;
-  resizeMode?: 'contain' | 'cover' | 'stretch' | 'repeat' | 'center';
-  backgroundColor?: string;
-};
-
-type SplashScreenProps = {
-  logoUrl: string;
-  splashScreenConfig: SplashScreenConfig;
-  innerContainerStyle?: ViewStyle;
-  onRedirect: () => void;
-  theme?: ThemeOverride;
-  backgroundImage?: {
-    source?: string | null;
-    onImageError?: (error: Error) => void;
-    gradientSplitBackground?: number;
-    resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat';
-  };
-};
-
-const DEFAULT_IMAGE_TIMEOUT = 5;
-const FALLBACK_TIMEOUT = 0.5;
-
-// Move extension arrays outside component to prevent recreation
-const VIDEO_EXTENSIONS = ['.mp4', '.mov', '.mkv', '.webm', '.avi', '.3gp'];
-const LOTTIE_EXTENSIONS = ['.json', '.lottie'];
-
-export const SplashScreen: React.FC<SplashScreenProps> = React.memo(
-  ({
-    splashScreenConfig,
-    innerContainerStyle,
-    backgroundImage = {
-      gradientSplitBackground: 0.4,
-      resizeMode: 'cover',
-    },
-    onRedirect,
-    theme: overrideTheme,
-  }) => {
-    useInternalTheme(overrideTheme);
-
-    const {
-      source: splashSource,
-      type: splashType = 'image',
-      width,
-      height,
-      isStatic = false,
-      screenTime,
-      fullscreen = false,
-      resizeMode = 'contain',
-      backgroundColor: splashBgColor,
-    } = splashScreenConfig;
-
-    // Memoize computed values
-    const isRemote = useMemo(
-      () => splashSource.startsWith('http'),
-      [splashSource]
-    );
-
-    const isImageSplash = useMemo(() => splashType === 'image', [splashType]);
-
-    const backgroundImageUrl = useMemo(
-      () =>
-        isImageSplash && backgroundImage.source?.startsWith('http')
-          ? backgroundImage.source
-          : undefined,
-      [isImageSplash, backgroundImage.source]
-    );
-
-    const { data } = useSplashCache({
-      logoUrl: isRemote ? splashSource : undefined,
-      backgroundUrl: backgroundImageUrl,
-    });
-
-    const resolvedSplashUri = useMemo(
-      () => (isRemote && data.logoPath ? data.logoPath : splashSource),
-      [isRemote, data.logoPath, splashSource]
-    );
-
-    const displayTimeout = useMemo(() => {
-      if (typeof screenTime === 'number' && screenTime > 0) return screenTime;
-      if (isImageSplash || isStatic) return DEFAULT_IMAGE_TIMEOUT;
-      return 0;
-    }, [screenTime, isImageSplash, isStatic]);
-
-    const handleRedirect = useCallback(() => {
-      try {
-        onRedirect();
-      } catch (err) {
-        console.error('[SplashScreen] Redirect error:', err);
-      }
-    }, [onRedirect]);
-
-    useEffect(() => {
-      const timeoutSec = displayTimeout > 0 ? displayTimeout : FALLBACK_TIMEOUT;
-      const timer = setTimeout(handleRedirect, timeoutSec * 1000);
-      return () => clearTimeout(timer);
-    }, [displayTimeout, handleRedirect]);
-
-    const splashProps = useMemo(
-      () => ({
-        source: resolvedSplashUri,
-        width,
-        height,
-        fullscreen,
-        resizeMode: resizeMode as any,
-      }),
-      [resolvedSplashUri, width, height, fullscreen, resizeMode]
-    );
-
-    // Memoize file type checks
-    const isVideoFile = useMemo(
-      () =>
-        VIDEO_EXTENSIONS.some((ext) =>
-          resolvedSplashUri.toLowerCase().endsWith(ext)
-        ),
-      [resolvedSplashUri]
-    );
-
-    const isLottieFile = useMemo(
-      () =>
-        LOTTIE_EXTENSIONS.some((ext) =>
-          resolvedSplashUri.toLowerCase().endsWith(ext)
-        ),
-      [resolvedSplashUri]
-    );
-
-    // Memoize video onEnd handler
-    const videoOnEnd = useMemo(
-      () => (displayTimeout ? undefined : handleRedirect),
-      [displayTimeout, handleRedirect]
-    );
-
-    // Memoize lottie onAnimationFinish handler
-    const lottieOnAnimationFinish = useMemo(
-      () => (displayTimeout ? undefined : handleRedirect),
-      [displayTimeout, handleRedirect]
-    );
-
-    // Memoize BackgroundLayout props
-    const backgroundLayoutProps = useMemo(
-      () => ({
-        backgroundImage: isImageSplash ? backgroundImage.source : undefined,
-        backgroundColor: splashBgColor,
-        resizeMode: (backgroundImage.resizeMode ?? 'cover') as
-          | 'cover'
-          | 'contain'
-          | 'stretch'
-          | 'repeat',
-        innerContainerStyle,
-        onImageError: backgroundImage.onImageError,
-        theme: overrideTheme,
-        gradientSplitBackground: backgroundImage.gradientSplitBackground ?? 0.4,
-      }),
-      [
-        isImageSplash,
-        backgroundImage.source,
-        backgroundImage.resizeMode,
-        backgroundImage.onImageError,
-        backgroundImage.gradientSplitBackground,
-        splashBgColor,
-        innerContainerStyle,
-        overrideTheme,
-      ]
-    );
-
-    // Memoize AppStatusBar theme
-    const appStatusBarTheme = useMemo(
-      () => ({
-        ...overrideTheme,
-        dark: {
-          ...overrideTheme?.dark,
-          background: splashBgColor,
-        },
-        light: {
-          ...overrideTheme?.light,
-          background: splashBgColor,
-        },
-      }),
-      [overrideTheme, splashBgColor]
-    );
-
-    const renderSplashContent = useCallback(() => {
-      switch (splashType) {
-        case 'video':
-          return isVideoFile ? (
-            <SplashVideo {...splashProps} onEnd={videoOnEnd} />
-          ) : null;
-
-        case 'lottie-animation':
-          return isLottieFile ? (
-            <SplashLottie
-              {...splashProps}
-              onAnimationFinish={lottieOnAnimationFinish}
-            />
-          ) : null;
-
-        case 'image':
-        default:
-          return <SplashImage {...splashProps} theme={overrideTheme} />;
-      }
-    }, [
-      splashType,
-      isVideoFile,
-      splashProps,
-      videoOnEnd,
-      isLottieFile,
-      lottieOnAnimationFinish,
-      overrideTheme,
-    ]);
-
-    return (
-      <BackgroundLayout {...backgroundLayoutProps}>
-        <AppStatusBar theme={appStatusBarTheme} />
-        {renderSplashContent()}
-      </BackgroundLayout>
-    );
-  }
-);
-
-namespace SplashScreen {
-  export type Config = SplashScreenConfig;
-  export type Props = SplashScreenProps;
-}

package/src/components/Auth/One/SplashScreen/components/SplashImage/SplashImage.tsx

@@ -1,103 +0,0 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
-import FastImage from 'react-native-fast-image';
-import { ActivityIndicator, View, StyleSheet } from 'react-native';
-import Display from '../../../../../../utils/Display';
-import { useInternalTheme } from '../../../../../../theme/hook/useInternalTheme';
-import type { ThemeOverride } from '../../../../../../theme/themes';
-
-type SplashImageProps = {
-  source: string;
-  width: number;
-  height: number;
-  fullscreen: boolean;
-  resizeMode?: 'cover' | 'contain' | 'stretch' | 'center';
-  backgroundColor?: string;
-  theme?: ThemeOverride;
-};
-
-const SplashImage: React.FC<SplashImageProps> = ({
-  fullscreen,
-  height,
-  resizeMode = 'contain',
-  source,
-  width,
-  theme: themeOverride,
-}) => {
-  const { theme } = useInternalTheme(themeOverride);
-  const [isLoading, setIsLoading] = useState(!!source);
-
-  // Reset loading state when source changes
-  useEffect(() => {
-    if (source) {
-      setIsLoading(true);
-    }
-  }, [source]);
-
-  const imageStyles = useMemo(
-    () => ({
-      width: fullscreen ? Display.fullWidth : width,
-      height: fullscreen ? Display.fullHeight : height,
-      flex: 1,
-    }),
-    [fullscreen, width, height]
-  );
-
-  const handleLoadEnd = useCallback(() => {
-    setIsLoading(false);
-  }, []);
-
-  const handleError = useCallback(() => {
-    setIsLoading(false);
-  }, []);
-
-  // Memoize URI resolution
-  const resolvedUri = useMemo(() => {
-    if (!source) return '';
-    if (
-      source.startsWith('http') ||
-      source.startsWith('https') ||
-      source.startsWith('file://')
-    )
-      return source;
-    return `file://${source}`;
-  }, [source]);
-
-  // Memoize image source
-  const imageSource = useMemo(() => ({ uri: resolvedUri }), [resolvedUri]);
-
-  if (!source) return null;
-
-  return (
-    <View style={styles.container}>
-      {isLoading && (
-        <ActivityIndicator
-          size="large"
-          style={styles.loader}
-          color={theme.colors.primary}
-        />
-      )}
-      <FastImage
-        source={imageSource}
-        onLoadEnd={handleLoadEnd}
-        style={imageStyles}
-        resizeMode={resizeMode}
-        onError={handleError}
-      />
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: Display.fullWidth,
-    height: Display.fullHeight,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  loader: {
-    position: 'absolute',
-  },
-});
-
-export default React.memo(SplashImage);

package/src/components/Auth/One/SplashScreen/components/SplashLottie/SplashLottie.tsx

@@ -1,77 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Thu 12 Jun 2025 at 09:22 AM
- */
-import React, { useMemo, useCallback } from 'react';
-import LottieView from 'lottie-react-native';
-import { StyleSheet } from 'react-native';
-import Display from '../../../../../../utils/Display';
-
-type ResizeMode = 'cover' | 'contain' | 'center';
-
-interface IProps {
-  source: string;
-  width: number;
-  height: number;
-  fullscreen: boolean;
-  resizeMode?: ResizeMode;
-  onAnimationFinish?: () => void;
-}
-
-const SplashLottie: React.FC<IProps> = ({
-  fullscreen,
-  height,
-  source,
-  resizeMode = 'contain',
-  width,
-  onAnimationFinish,
-}) => {
-  // Memoize the style object
-  const lottieStyle = useMemo(
-    () => ({
-      ...styles.base,
-      width: fullscreen ? Display.fullWidth : width,
-      height: fullscreen ? Display.fullHeight : height,
-      ...(fullscreen ? styles.fullscreen : {}),
-    }),
-    [fullscreen, width, height]
-  );
-
-  // Memoize Lottie source
-  const lottieSource = useMemo(() => ({ uri: source }), [source]);
-
-  // Memoize error handler
-  const handleAnimationFailure = useCallback((error: any) => {
-    console.error('Lottie animation failed to load:', error);
-  }, []);
-
-  // Early return if invalid source
-  if (!source) {
-    return null;
-  }
-
-  return (
-    <LottieView
-      source={lottieSource}
-      autoPlay
-      loop={false}
-      onAnimationFinish={onAnimationFinish}
-      style={lottieStyle}
-      resizeMode={resizeMode}
-      onAnimationFailure={handleAnimationFailure}
-      hardwareAccelerationAndroid
-      cacheComposition
-    />
-  );
-};
-
-const styles = StyleSheet.create({
-  base: {
-    alignSelf: 'center',
-  },
-  fullscreen: {
-    flex: 1,
-  },
-});
-
-export default React.memo(SplashLottie);

package/src/components/Auth/One/SplashScreen/components/SplashVideo/SplashVideo.tsx

@@ -1,174 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Sat 25 Oct 2025
- */
-
-import React, { useMemo, useCallback, useRef, useEffect } from 'react';
-import { StyleSheet, Animated, useWindowDimensions } from 'react-native';
-import Video, {
-  type OnLoadData,
-  type OnVideoErrorData,
-} from 'react-native-video';
-import Display from '../../../../../../utils/Display';
-import { View } from '../../../../../View';
-
-interface IProps {
-  width?: number;
-  height?: number;
-  source: string;
-  fullscreen?: boolean;
-  resizeMode?: 'cover' | 'contain' | 'stretch' | 'none';
-  onEnd?: () => void;
-  onLoadStart?: () => void;
-  onLoaded?: (data: OnLoadData) => void;
-  onError?: (error: string) => void;
-}
-
-const SplashVideo: React.FC<IProps> = ({
-  fullscreen = true,
-  width,
-  height,
-  source,
-  resizeMode = 'cover',
-  onEnd,
-  onLoadStart,
-  onLoaded,
-  onError,
-}) => {
-  const fadeAnim = useRef(new Animated.Value(0)).current;
-  const { width: windowWidth, height: windowHeight } = useWindowDimensions();
-
-  /** 🎨 Compute video dimensions – fullscreen uses 100% for all devices; otherwise use window dimensions */
-  const videoStyle = useMemo(() => {
-    if (fullscreen) {
-      return { width: '100%' as const, height: '100%' as const };
-    }
-    const w = width ?? windowWidth ?? Display.fullWidth;
-    const h = height ?? windowHeight ?? Display.fullHeight;
-    return { width: w, height: h };
-  }, [fullscreen, width, height, windowWidth, windowHeight]);
-
-  /** 🎨 Fullscreen wrapper fills container so video covers entire screen on any device */
-  const wrapperStyle = useMemo(
-    () =>
-      fullscreen
-        ? [StyleSheet.absoluteFillObject, { opacity: fadeAnim }]
-        : [videoStyle, { opacity: fadeAnim, position: 'absolute' as const }],
-    [fullscreen, videoStyle, fadeAnim]
-  );
-
-  /** 🌀 Fade-in animation */
-  const animateIn = useCallback(() => {
-    Animated.timing(fadeAnim, {
-      toValue: 1,
-      duration: 400,
-      useNativeDriver: true,
-    }).start();
-  }, [fadeAnim]);
-
-  /** 📦 Resolve video URI */
-  const resolveUri = useCallback((src: string): string => {
-    if (!src) return '';
-    if (/^(https?|file):\/\//.test(src)) return src;
-    return `file://${src}`;
-  }, []);
-
-  /** 🔄 Video lifecycle handlers */
-  const handleLoadStart = useCallback(() => {
-    fadeAnim.setValue(0);
-    onLoadStart?.();
-  }, [fadeAnim, onLoadStart]);
-
-  const handleLoad = useCallback(
-    (data: OnLoadData) => {
-      animateIn();
-      onLoaded?.(data);
-    },
-    [animateIn, onLoaded]
-  );
-
-  const handleError = useCallback(
-    (err: OnVideoErrorData | any) => {
-      const errorMsg =
-        err?.error?.message ||
-        err?.message ||
-        JSON.stringify(err) ||
-        'Unknown video error';
-      onError?.(errorMsg);
-    },
-    [onError]
-  );
-
-  /** 🧹 Cleanup animation */
-  useEffect(() => {
-    return () => fadeAnim.stopAnimation();
-  }, [fadeAnim]);
-
-  // Memoize resolved URI
-  const resolvedUri = useMemo(() => resolveUri(source), [source, resolveUri]);
-
-  // Memoize video source
-  const videoSource = useMemo(() => ({ uri: resolvedUri }), [resolvedUri]);
-
-  // Memoize controls styles
-  const controlsStyles = useMemo(
-    () => ({
-      hideForward: true,
-      hideDuration: true,
-      hideFullscreen: true,
-      hidePlayPause: true,
-      hideNavigationBarOnFullScreenMode: true,
-      hideNotificationBarOnFullScreenMode: true,
-      hideNext: true,
-      hidePosition: true,
-      hidePrevious: true,
-      hideRewind: true,
-      hideSeekBar: true,
-      hideSettingButton: true,
-    }),
-    []
-  );
-
-  /** 🧱 Render */
-  return (
-    <View style={styles.container}>
-      {/* Video Layer – fills container for fullscreen on all devices */}
-      <Animated.View style={wrapperStyle}>
-        <Video
-          source={videoSource}
-          style={styles.video}
-          resizeMode={resizeMode}
-          paused={false}
-          onLoadStart={handleLoadStart}
-          onLoad={handleLoad}
-          onError={handleError}
-          onEnd={onEnd}
-          controlsStyles={controlsStyles}
-          ignoreSilentSwitch="obey"
-          playInBackground={false}
-          playWhenInactive={false}
-          allowsExternalPlayback={false}
-          automaticallyWaitsToMinimizeStalling
-          controls={false}
-          repeat={false}
-        />
-      </Animated.View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: '100%',
-    height: '100%',
-    position: 'relative',
-    alignSelf: 'stretch',
-  },
-  video: {
-    width: '100%',
-    height: '100%',
-  },
-});
-
-export default React.memo(SplashVideo);

package/src/components/Auth/One/index.ts

@@ -1,24 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Fri 13 Jun 2025 at 11:11 AM
- */
-
-import ForgotPassword from './ForgotPassword/ForgotPassword';
-import LoginWithEmail from './Login/LoginWithEmail';
-import LoginWithPhone from './Login/LoginWithPhone';
-import OTP from './OTP/OTP';
-import QrLogin from './QrLogin/QrLogin';
-import SignUp from './SignUp/SignUp';
-import { SplashScreen } from './SplashScreen/SplashScreen';
-
-const AuthOne = {
-  LoginWithEmail,
-  LoginWithPhone,
-  SignUp,
-  OTP,
-  ForgotPassword,
-  SplashScreen,
-  QrLogin,
-};
-
-export default AuthOne;