@zezosoft/zezo-ott-react-native-ui-kit 1.1.3 → 1.1.6

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

@@ -1,92 +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';
-
-type SplashImageProps = {
-  source: string;
-  width: number;
-  height: number;
-  fullscreen: boolean;
-  resizeMode?: 'cover' | 'contain' | 'stretch' | 'center';
-  backgroundColor?: string;
-};
-
-const SplashImage: React.FC<SplashImageProps> = ({
-  fullscreen,
-  height,
-  resizeMode = 'contain',
-  source,
-  width,
-}) => {
-  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} />}
-      <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/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/SplashScreen/components/SplashVideo/SplashVideo.tsx

@@ -1,164 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Sat 25 Oct 2025
- */
-
-import React, { useMemo, useCallback, useRef, useEffect } from 'react';
-import { StyleSheet, Animated } 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 = false,
-  width = Display.fullWidth,
-  height = Display.fullHeight,
-  source,
-  resizeMode = 'cover',
-  onEnd,
-  onLoadStart,
-  onLoaded,
-  onError,
-}) => {
-  const fadeAnim = useRef(new Animated.Value(0)).current;
-
-  /** 🎨 Compute video dimensions */
-  const videoStyle = useMemo(
-    () => ({
-      width: fullscreen ? Display.fullWidth : width,
-      height: fullscreen ? Display.fullHeight : height,
-    }),
-    [fullscreen, width, height]
-  );
-
-  /** 🌀 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,
-    }),
-    []
-  );
-
-  // Memoize animated view style
-  const animatedViewStyle = useMemo(
-    () => [videoStyle, { opacity: fadeAnim, position: 'absolute' as const }],
-    [videoStyle, fadeAnim]
-  );
-
-  /** 🧱 Render */
-  return (
-    <View style={styles.container}>
-      {/* Video Layer */}
-      <Animated.View style={animatedViewStyle}>
-        <Video
-          source={videoSource}
-          style={videoStyle}
-          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,
-    position: 'relative',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default React.memo(SplashVideo);

package/src/components/Auth/index.ts

@@ -1,26 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Fri 13 Jun 2025 at 11:11 AM
- */
-
-import AuthProvider from './AuthProvider/AuthProvider';
-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 Auth = {
-  AuthProvider,
-  LoginWithEmail,
-  LoginWithPhone,
-  SignUp,
-  OTP,
-  ForgotPassword,
-  SplashScreen,
-  QrLogin,
-};
-
-export { Auth };

package/src/components/BackgroundLayout/BackgroundLayout.tsx

@@ -1,172 +0,0 @@
-import React, { useMemo, useCallback, memo } from 'react';
-import {
-  View,
-  StyleSheet,
-  ImageBackground,
-  type ViewStyle,
-  type ImageStyle,
-} from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import type { ThemeOverride } from '../../theme/themes';
-import { useSplashCache } from '../../hooks/useSplashCache';
-import { useInternalTheme } from '../../theme/hook';
-
-interface BackgroundLayoutProps {
-  children: React.ReactNode;
-  backgroundImage?: string | null;
-  backgroundColor?: string | null;
-  gradientSplitBackground?: number;
-  resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
-  innerContainerStyle?: ViewStyle;
-  theme?: ThemeOverride;
-  onImageError?: (error: Error) => void;
-}
-
-const BackgroundLayoutComponent: React.FC<BackgroundLayoutProps> = (props) => {
-  const {
-    children,
-    backgroundImage: backgroundImageUri,
-    backgroundColor: bgColor,
-    gradientSplitBackground = 0.4,
-    resizeMode = 'cover',
-    innerContainerStyle,
-    onImageError,
-    theme: themeOverride,
-  } = props;
-
-  const { theme } = useInternalTheme(themeOverride);
-  const {
-    data: { backgroundPath: localPathBackground },
-  } = useSplashCache({
-    backgroundUrl: backgroundImageUri || undefined,
-  });
-
-  const resolvedImageUri = useMemo(() => {
-    if (!backgroundImageUri) return undefined;
-    const rawPath = localPathBackground || backgroundImageUri;
-    const isRemoteUrl =
-      rawPath.startsWith('http://') || rawPath.startsWith('https://');
-    return isRemoteUrl ? rawPath : `file://${rawPath}`;
-  }, [backgroundImageUri, localPathBackground]);
-
-  const backgroundColor = useMemo(
-    () => bgColor ?? theme.colors.background,
-    [bgColor, theme.colors.background]
-  );
-
-  const containerStyle = useMemo(
-    () => [styles.container, { backgroundColor }],
-    [backgroundColor]
-  );
-
-  const handleImageLoadError = useCallback(
-    (e: any) => {
-      console.warn(
-        '[BackgroundLayout] Image load failed:',
-        e?.nativeEvent?.error
-      );
-      onImageError?.(new Error('Background image failed to load'));
-    },
-    [onImageError]
-  );
-
-  const gradientLocations = useMemo(() => {
-    const gradientColors = theme.colors.backgroundLayoutGradient;
-    const count = gradientColors?.length ?? 0;
-    const baseSteps = [0, 0.3, 0.4, 1, 1];
-    const locations = [
-      0,
-      ...baseSteps.map((step) => Math.min(1, gradientSplitBackground + step)),
-    ];
-
-    if (locations.length > count) {
-      return locations.slice(0, count);
-    }
-    if (locations.length < count) {
-      const last = locations[locations.length - 1] ?? 1;
-      return [...locations, ...Array(count - locations.length).fill(last)];
-    }
-
-    return locations;
-  }, [theme.colors.backgroundLayoutGradient, gradientSplitBackground]);
-
-  const imageContainerStyle = useMemo(
-    () => [styles.imageContainer, { backgroundColor: theme.colors.background }],
-    [theme.colors.background]
-  );
-
-  const imageStyle = useMemo(
-    () => [styles.imageStyle, { backgroundColor: theme.colors.background }],
-    [theme.colors.background]
-  );
-
-  const innerContainerStyleMemo = useMemo(
-    () => [
-      styles.innerContainer,
-      innerContainerStyle,
-      bgColor ? { backgroundColor: bgColor } : null,
-    ],
-    [innerContainerStyle, bgColor]
-  );
-
-  const showBackground = Boolean(backgroundImageUri && resolvedImageUri);
-
-  if (showBackground) {
-    return (
-      <View style={containerStyle}>
-        <ImageBackground
-          source={{ uri: resolvedImageUri }}
-          resizeMode={resizeMode}
-          style={imageContainerStyle}
-          imageStyle={imageStyle}
-          onError={handleImageLoadError}
-        >
-          <LinearGradient
-            colors={theme.colors.backgroundLayoutGradient}
-            locations={gradientLocations}
-            start={{ x: 0.5, y: 0 }}
-            end={{ x: 0.5, y: 1 }}
-            style={styles.gradientOverlay}
-          />
-          <View style={innerContainerStyleMemo}>{children}</View>
-        </ImageBackground>
-      </View>
-    );
-  }
-
-  return (
-    <View style={containerStyle}>
-      <View style={innerContainerStyleMemo}>{children}</View>
-    </View>
-  );
-};
-
-export const BackgroundLayout = memo(BackgroundLayoutComponent);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: '100%',
-    height: '100%',
-  },
-  imageContainer: {
-    flex: 1,
-    width: '100%',
-    height: '100%',
-  },
-  imageStyle: {
-    height: '60%',
-    width: '100%',
-    alignSelf: 'flex-start',
-  } as ImageStyle,
-  gradientOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    pointerEvents: 'none',
-  },
-  innerContainer: {
-    flex: 1,
-    width: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});