@zezosoft/zezo-ott-react-native-ui-kit 1.0.3 → 1.0.4

package/src/components/Auth/QrLogin/QrLogin.tsx

@@ -0,0 +1,306 @@
+/**
+ * @author Ashok Desai
+ * @lastModified oct 02 Oct 2025 at 10:30 AM
+ */
+import React, { useState, useRef } from 'react';
+import {
+  View,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity,
+  ActivityIndicator,
+  StatusBar,
+} from 'react-native';
+import { scale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { Text } from '../../Text';
+import AppHeader from '../../Headers/AppHeader';
+import { useTheme } from '../../../theme/hook/useTheme';
+import type { AppTheme } from '../../../theme/themes';
+import { Camera as CameraIcon, QrCode } from 'lucide-react-native';
+import {
+  Camera,
+  useCameraDevice,
+  useCameraPermission,
+  useCodeScanner,
+  type Code as BaseCode,
+} from 'react-native-vision-camera';
+import QrViewArea from './components/QrViewArea';
+
+const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
+const HEADER_HEIGHT = 25;
+
+export interface Code extends BaseCode {
+  bounds?: {
+    origin: { x: number; y: number };
+    size: { width: number; height: number };
+  };
+}
+
+export type QrLoginProps = {
+  title?: string;
+  description?: string;
+  scanButtonText?: string;
+  onBackPress?: () => void;
+  onScanSuccess?: (value: string) => void;
+  theme?: AppTheme;
+  cameraType?: 'back' | 'front';
+  layout?: 'one' | 'two';
+};
+
+const DEFAULTS = {
+  title: 'QR Login',
+  description: 'Please move your camera over the QR Code',
+  scanButtonText: 'Scan QR Code',
+  cameraType: 'back' as const,
+};
+
+export const QrLogin: React.FC<QrLoginProps> = ({
+  title = DEFAULTS.title,
+  description = DEFAULTS.description,
+  scanButtonText = DEFAULTS.scanButtonText,
+  onBackPress,
+  onScanSuccess,
+  theme,
+  cameraType = DEFAULTS.cameraType,
+  layout = 'one',
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const { colors } = appliedTheme;
+
+  const [scanActive, setScanActive] = useState(false);
+  const [requesting, setRequesting] = useState(false);
+
+  const device = useCameraDevice(cameraType);
+  const { hasPermission, requestPermission } = useCameraPermission();
+
+  const scanTimer = useRef<NodeJS.Timeout | null>(null);
+  const lastValueRef = useRef<string | null>(null);
+  const isScanning = useRef(false);
+
+  // ---- Check if QR inside scan box ----
+  const isCodeInsideBox = (code: Code): boolean => {
+    if (!code.bounds) return true;
+    const { origin, size } = code.bounds;
+    if (!origin || !size) return true;
+
+    const defaultBoxW = Math.min(SCREEN_W * 0.7, 320);
+    const boxW = defaultBoxW * 0.9;
+    const boxH = boxW;
+    const availableHeight = SCREEN_H - HEADER_HEIGHT;
+    const boxTop = Math.floor(
+      HEADER_HEIGHT + (availableHeight - boxH) / 2 - scale(40)
+    );
+    const sideOverlayWidth = Math.floor((SCREEN_W - boxW) / 2);
+
+    return (
+      origin.x >= sideOverlayWidth &&
+      origin.y >= boxTop &&
+      origin.x + size.width <= sideOverlayWidth + boxW &&
+      origin.y + size.height <= boxTop + boxH
+    );
+  };
+
+  // ---- Code Scanner ----
+  const codeScanner = useCodeScanner({
+    codeTypes: ['qr'],
+    onCodeScanned: (codes) => {
+      if (isScanning.current) return;
+      for (const c of codes) {
+        const code = c as Code;
+        const value = code?.value;
+        if (!value || !isCodeInsideBox(code)) continue;
+
+        if (lastValueRef.current === value) return;
+        lastValueRef.current = value;
+
+        if (scanTimer.current) clearTimeout(scanTimer.current);
+
+        scanTimer.current = setTimeout(() => {
+          isScanning.current = true;
+          setScanActive(false);
+          onScanSuccess?.(value);
+
+          setTimeout(() => {
+            isScanning.current = false;
+            lastValueRef.current = null;
+          }, 1000);
+        }, 1000);
+
+        break;
+      }
+    },
+  });
+
+  const startScan = async () => {
+    if (!hasPermission) {
+      setRequesting(true);
+      const granted = await requestPermission();
+      setRequesting(false);
+      if (!granted) return;
+    }
+    setScanActive(true);
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <StatusBar
+        translucent
+        backgroundColor="transparent"
+        barStyle={appliedTheme.dark ? 'light-content' : 'dark-content'}
+      />
+
+      <View style={[styles.headerWrapper, { height: HEADER_HEIGHT }]}>
+        <AppHeader
+          title={title}
+          onBackPress={onBackPress}
+          theme={appliedTheme}
+          titleAlign="left"
+        />
+      </View>
+
+      <View style={styles.cameraWrapper}>
+        {scanActive ? (
+          device ? (
+            <>
+              <Camera
+                style={StyleSheet.absoluteFill}
+                device={device}
+                isActive={true}
+                codeScanner={codeScanner}
+              />
+              <QrViewArea
+                theme={appliedTheme}
+                layout={layout}
+                headerHeight={HEADER_HEIGHT}
+              />
+            </>
+          ) : (
+            <View
+              style={[styles.center, { backgroundColor: colors.background }]}
+            >
+              <Text
+                style={{ color: colors.textPrimary, fontSize: RFValue(16) }}
+              >
+                No camera available
+              </Text>
+            </View>
+          )
+        ) : (
+          <View style={styles.content}>
+            <View style={styles.card}>
+              <CameraIcon
+                size={scale(50)}
+                color={colors.button}
+                strokeWidth={1.6}
+                style={{ marginBottom: scale(12) }}
+              />
+
+              <Text style={[styles.descText, { color: colors.textPrimary }]}>
+                {description}
+              </Text>
+
+              <View
+                style={[
+                  styles.qrBox,
+                  {
+                    borderColor: colors.primary,
+                    backgroundColor: colors.skeletonBaseColor,
+                  },
+                ]}
+              >
+                <QrCode
+                  size={scale(180)}
+                  color={colors.button}
+                  strokeWidth={1.6}
+                />
+              </View>
+
+              <TouchableOpacity
+                style={[styles.scanBtn, { borderColor: colors.button }]}
+                onPress={startScan}
+                activeOpacity={0.85}
+              >
+                <CameraIcon
+                  size={scale(22)}
+                  color={colors.button}
+                  strokeWidth={2}
+                  style={{ marginRight: 10 }}
+                />
+                <Text style={[styles.scanText, { color: colors.button }]}>
+                  {scanButtonText}
+                </Text>
+              </TouchableOpacity>
+
+              {requesting && (
+                <ActivityIndicator
+                  style={{ marginTop: scale(12) }}
+                  color={colors.primary}
+                />
+              )}
+            </View>
+          </View>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  headerWrapper: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 20,
+    elevation: 20,
+  },
+  cameraWrapper: {
+    flex: 1,
+    top: HEADER_HEIGHT,
+  },
+  center: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: scale(14),
+    marginBottom: scale(50),
+  },
+  card: {
+    width: SCREEN_W - scale(40),
+    minHeight: SCREEN_H / 2.5,
+    alignItems: 'center',
+    padding: scale(20),
+  },
+  descText: {
+    fontSize: RFValue(15),
+    textAlign: 'center',
+    marginVertical: scale(12),
+  },
+  qrBox: {
+    marginVertical: scale(20),
+    padding: scale(20),
+    borderWidth: 2,
+    borderRadius: scale(12),
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  scanBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: scale(2),
+    borderRadius: scale(12),
+    paddingVertical: scale(10),
+    paddingHorizontal: scale(25),
+    marginTop: scale(20),
+  },
+  scanText: { fontWeight: '600', fontSize: RFValue(14) },
+});
+
+export default QrLogin;

package/src/components/Auth/QrLogin/components/QrViewArea.tsx

@@ -0,0 +1,213 @@
+/**
+ * @author Ashok Desai
+ * @lastModified oct 02 Oct 2025 at 10:30 AM
+ */
+import React, { useEffect, useRef } from 'react';
+import {
+  View,
+  StyleSheet,
+  Animated,
+  Easing,
+  Dimensions,
+  Platform,
+} from 'react-native';
+import { scale } from 'react-native-size-matters';
+import Svg, { Rect } from 'react-native-svg';
+import type { AppTheme } from '../../../../theme/themes';
+import { useTheme } from '../../../../theme/hook/useTheme';
+
+const { width: SCREEN_W, height: SCREEN_H } = Dimensions.get('window');
+
+type QrViewAreaProps = {
+  scanBoxWidth?: number;
+  layout?: 'one' | 'two';
+  headerHeight?: number;
+  theme?: AppTheme;
+};
+
+const QrViewArea: React.FC<QrViewAreaProps> = ({
+  scanBoxWidth,
+  layout = 'one',
+  headerHeight = 60,
+  theme,
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const { colors } = appliedTheme;
+
+  const anim = useRef(new Animated.Value(0)).current;
+
+  const defaultBoxW = scanBoxWidth || Math.min(SCREEN_W * 0.7, 320);
+  const boxW = defaultBoxW * 0.9;
+  const boxH = boxW;
+
+  const availableHeight = SCREEN_H - headerHeight;
+  const boxTop = Math.floor(
+    headerHeight + (availableHeight - boxH) / 2 - scale(40)
+  );
+
+  const topOverlayHeight = Math.floor(boxTop - headerHeight);
+  const bottomOverlayHeight = Math.floor(SCREEN_H - (boxTop + boxH));
+  const sideOverlayWidth = Math.floor((SCREEN_W - boxW) / 2);
+
+  const margin = scale(12);
+  const lineTravel = boxH - margin * 2 - scale(3);
+
+  const translateY = anim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, lineTravel],
+  });
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(anim, {
+          toValue: 1,
+          duration: 2000,
+          easing: Easing.linear,
+          useNativeDriver: true,
+        }),
+        Animated.timing(anim, {
+          toValue: 0,
+          duration: 2000,
+          easing: Easing.linear,
+          useNativeDriver: true,
+        }),
+      ])
+    );
+    animation.start();
+    return () => animation.stop();
+  }, [anim]);
+
+  return (
+    <>
+      <View
+        style={[
+          styles.overlayTB,
+          {
+            top: headerHeight,
+            height: topOverlayHeight,
+            backgroundColor: colors.overlay,
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.overlayTB,
+          {
+            top: boxTop + boxH,
+            height: bottomOverlayHeight,
+            backgroundColor: colors.overlay,
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.overlayLR,
+          {
+            top: boxTop,
+            height: boxH,
+            width: sideOverlayWidth,
+            backgroundColor: colors.overlay,
+          },
+        ]}
+      />
+      <View
+        style={[
+          styles.overlayLR,
+          {
+            top: boxTop,
+            right: 0,
+            height: boxH,
+            width: sideOverlayWidth,
+            backgroundColor: colors.overlay,
+          },
+        ]}
+      />
+
+      <View
+        style={[
+          styles.scanBox,
+          { top: boxTop, width: boxW, height: boxH, left: sideOverlayWidth },
+        ]}
+      >
+        {layout === 'two' ? (
+          <Svg width={boxW} height={boxH}>
+            <Rect
+              width={boxW}
+              height={boxH}
+              ry={scale(8)}
+              stroke={colors.button}
+              strokeWidth={scale(5)}
+              strokeDasharray={[scale(12), scale(6)]}
+              fill="none"
+            />
+          </Svg>
+        ) : (
+          ['tl', 'tr', 'bl', 'br'].map((c) => (
+            <View
+              key={c}
+              style={[
+                styles.corner,
+                styles[`corner_${c}` as keyof typeof styles],
+                {
+                  borderColor: colors.button,
+                  width: scale(18),
+                  height: scale(18),
+                  borderTopWidth: c.startsWith('t') ? scale(3) : 0,
+                  borderBottomWidth: c.startsWith('b') ? scale(3) : 0,
+                  borderLeftWidth: c.endsWith('l') ? scale(3) : 0,
+                  borderRightWidth: c.endsWith('r') ? scale(3) : 0,
+                },
+              ]}
+            />
+          ))
+        )}
+
+        <Animated.View
+          style={{
+            position: 'absolute',
+            top: margin,
+            left: margin,
+            right: margin,
+            height: scale(3),
+            borderRadius: scale(1.5),
+            backgroundColor: colors.button,
+            transform: [{ translateY }],
+            shadowColor: colors.shadow,
+            shadowOffset: { width: 0, height: 4 },
+            shadowOpacity: 0.3,
+            shadowRadius: 5,
+            elevation: Platform.OS === 'android' ? 4 : 0,
+          }}
+        />
+      </View>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlayTB: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+  },
+  overlayLR: {
+    position: 'absolute',
+  },
+  scanBox: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+    zIndex: 10,
+  },
+  corner: {
+    position: 'absolute',
+  },
+  corner_tl: { top: 0, left: 0 },
+  corner_tr: { top: 0, right: 0 },
+  corner_bl: { bottom: 0, left: 0 },
+  corner_br: { bottom: 0, right: 0 },
+});
+
+export default QrViewArea;

package/src/components/Auth/index.ts

@@ -7,6 +7,7 @@ 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';
 
@@ -17,6 +18,7 @@ const Auth = {
   OTP,
   ForgotPassword,
   SplashScreen,
+  QrLogin,
 };
 
 export { Auth };

package/src/components/Headers/AppHeader.tsx

@@ -81,7 +81,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
       </View>
 
       {/* Right icon */}
-      {rightIcon ? (
+      {rightIcon && onRightPress ? (
         <TouchableOpacity
           onPress={onRightPress}
           activeOpacity={0.7}

package/src/components/Headers/One.tsx

@@ -38,7 +38,7 @@ const HeaderOne: React.FC<HeaderOneProps> = ({
 
   const iconColor = appliedTheme.colors?.onSurface;
   const rippleColor = appliedTheme.colors.surfaceVariant + '33';
-  const pressedBackgroundColor = appliedTheme.colors.backdrop;
+  const pressedBackgroundColor = appliedTheme.colors.surfaceVariant;
 
   const MemoMenuIcon = useMemo(
     () => <MenuIcon width={scale(28)} height={scale(28)} color={iconColor} />,

package/src/components/Headers/Two.tsx

@@ -27,7 +27,7 @@ const HeaderTwo: React.FC<HeaderTwoProps> = ({
   const { theme: appliedTheme } = useTheme(theme);
 
   const rippleColor = appliedTheme.colors.surfaceVariant + '33';
-  const pressedBackgroundColor = appliedTheme.colors.backdrop;
+  const pressedBackgroundColor = appliedTheme.colors.surfaceVariant;
 
   return (
     <View style={styles.headerContainer}>

package/src/components/Reels/ReelsSeries/Model/Episodes.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  FlatList,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity,
+} from 'react-native';
+import { Lock, ChartNoAxesColumnIncreasing } from 'lucide-react-native';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import type { ISeriesEpisode, ISeriesItem } from '../types';
+
+const { height, width } = Dimensions.get('window');
+const NUM_COLUMNS = 6;
+
+interface EpisodesProps {
+  reel: ISeriesEpisode;
+  data: ISeriesItem;
+  currentReel: number;
+  onEpisodeSelect?: (index: number) => void;
+  totalReels?: number;
+}
+
+const Episodes: React.FC<EpisodesProps> = ({
+  data,
+  currentReel,
+  onEpisodeSelect,
+  totalReels = 0,
+}) => {
+  const totalBoxes = Math.max(data.episodes?.length || 0, totalReels);
+  const EpisodeData = Array.from({ length: totalBoxes }, (_, i) => i + 1);
+
+  const renderItem = ({ item }: { item: number }) => {
+    const isAvailable = item <= (data.episodes.length ?? 0);
+    const isActive = item === currentReel + 1;
+
+    return (
+      <TouchableOpacity
+        key={`episode-${item}`}
+        onPress={() => isAvailable && onEpisodeSelect?.(item - 1)}
+        activeOpacity={0.8}
+      >
+        <View
+          style={[
+            styles.box,
+            {
+              backgroundColor: isActive
+                ? 'rgba(60,60,60,1)'
+                : 'rgba(34,34,34,1)',
+            },
+          ]}
+        >
+          <Text style={[styles.number, { color: 'white' }]}>{item}</Text>
+
+          {!isAvailable && (
+            <View
+              style={[
+                styles.lockContainer,
+                { backgroundColor: 'rgba(76,76,76,1)' },
+              ]}
+            >
+              <Lock color={'white'} size={moderateScale(11)} />
+            </View>
+          )}
+
+          {isActive && (
+            <ChartNoAxesColumnIncreasing
+              color={'white'}
+              size={moderateScale(16)}
+              style={styles.activeIcon}
+            />
+          )}
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <FlatList
+      data={EpisodeData}
+      numColumns={NUM_COLUMNS}
+      keyExtractor={(item) => `episode-${item}`}
+      renderItem={renderItem}
+      contentContainerStyle={[{ paddingBottom: verticalScale(20) }]}
+      showsVerticalScrollIndicator={false}
+      scrollEnabled={true} // important for modal
+      removeClippedSubviews={true} // improves performance
+      windowSize={10} // virtualized window
+      initialNumToRender={NUM_COLUMNS * 2}
+      nestedScrollEnabled={true} // Allows scroll inside modal
+    />
+  );
+};
+
+export default Episodes;
+
+const styles = StyleSheet.create({
+  box: {
+    width:
+      (width - moderateScale(8) * 2 - moderateScale(6) * NUM_COLUMNS) /
+      NUM_COLUMNS,
+    height: (height * 0.52) / 8,
+    borderRadius: moderateScale(10),
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginVertical: moderateScale(2.5),
+    marginHorizontal: moderateScale(2.5),
+    position: 'relative',
+  },
+  number: {
+    fontSize: RFValue(15),
+    fontWeight: '600',
+  },
+  lockContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    width: moderateScale(18),
+    height: moderateScale(18),
+    borderRadius: moderateScale(7),
+    borderTopLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  activeIcon: {
+    position: 'absolute',
+    bottom: verticalScale(6),
+    left: moderateScale(6),
+  },
+});