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

package/src/components/ContentView/Two/components/Title.tsx

@@ -1,226 +0,0 @@
-/**
- * @author Ashok Desai
- * @lastModified Tue 13 Jun 2026 at 02:28 PM
- */
-
-import React, { useMemo } from 'react';
-import {
-  View,
-  StyleSheet,
-  type StyleProp,
-  type ViewStyle,
-  type TextStyle,
-} from 'react-native';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import { scale } from 'react-native-size-matters';
-import { Text } from '../../../Text';
-import type { ITheme } from '../../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-import { LikeShareActions } from './LikeShareActions';
-import type { LikeShareEventArgs } from '../../../../types';
-
-type Props = {
-  contentId: IContentData['_id'];
-  subtitle: string;
-  rating: IContentData['rating'];
-  releaseYear?: string | number | null;
-  duration?: string | number | null;
-  language?: string | null;
-  theme: ITheme;
-  isLoading?: boolean;
-  isLiked?: boolean;
-  onPressLike?: (args: LikeShareEventArgs) => void;
-  onPressShare?: (args: LikeShareEventArgs) => void;
-  style?: {
-    container?: StyleProp<ViewStyle>;
-    title?: StyleProp<TextStyle>;
-    subTitle?: StyleProp<TextStyle>;
-    rating?: StyleProp<TextStyle>;
-    releaseYear?: StyleProp<TextStyle>;
-    duration?: StyleProp<TextStyle>;
-    language?: StyleProp<TextStyle>;
-  };
-};
-
-export const Title = React.memo(
-  ({
-    contentId,
-    subtitle,
-    rating,
-    releaseYear,
-    duration,
-    language,
-    theme,
-    isLoading = false,
-    isLiked,
-    onPressLike,
-    onPressShare,
-    style,
-  }: Props): React.ReactElement => {
-    const containerStyle = useMemo(
-      () => StyleSheet.flatten([styles.container, style?.container]),
-      [style?.container]
-    );
-
-    const subTitleStyle = useMemo(
-      () => StyleSheet.flatten([styles.subTitle, style?.subTitle]),
-      [style?.subTitle]
-    );
-
-    const ratingStyle = useMemo(
-      () => StyleSheet.flatten([styles.rating, style?.rating]),
-      [style?.rating]
-    );
-
-    const releaseYearStyle = useMemo(
-      () => StyleSheet.flatten([styles.metaText, style?.releaseYear]),
-      [style?.releaseYear]
-    );
-
-    const durationStyle = useMemo(
-      () => StyleSheet.flatten([styles.metaText, style?.duration]),
-      [style?.duration]
-    );
-
-    const languageStyle = useMemo(
-      () => StyleSheet.flatten([styles.metaText, style?.language]),
-      [style?.language]
-    );
-
-    if (isLoading) {
-      return (
-        <View style={containerStyle}>
-          <SkeletonPlaceholder
-            backgroundColor={theme.colors.skeletonBaseColor}
-            highlightColor={theme.colors.skeletonHighlightColor}
-          >
-            <SkeletonPlaceholder.Item>
-              <SkeletonPlaceholder.Item flexDirection="row" alignItems="center">
-                <SkeletonPlaceholder.Item
-                  width={scale(160)}
-                  height={scale(22)}
-                  borderRadius={scale(4)}
-                />
-                <SkeletonPlaceholder.Item
-                  width={scale(60)}
-                  height={scale(22)}
-                  borderRadius={scale(4)}
-                  marginLeft={scale(6)}
-                />
-              </SkeletonPlaceholder.Item>
-
-              <SkeletonPlaceholder.Item
-                width={scale(36)}
-                height={scale(16)}
-                borderRadius={scale(4)}
-                marginTop={scale(6)}
-              />
-            </SkeletonPlaceholder.Item>
-          </SkeletonPlaceholder>
-        </View>
-      );
-    }
-
-    return (
-      <View style={containerStyle}>
-        <View style={styles.metaRow}>
-          <View style={styles.leftMeta}>
-            {!!subtitle && (
-              <View
-                style={[
-                  styles.subTitleContainer,
-                  { backgroundColor: theme.colors.surfaceVariant },
-                ]}
-              >
-                <Text
-                  color={theme.colors.textPrimary}
-                  style={subTitleStyle}
-                  numberOfLines={1}
-                >
-                  {subtitle}
-                </Text>
-              </View>
-            )}
-
-            {!!releaseYear && (
-              <Text color={theme.colors.textPrimary} style={releaseYearStyle}>
-                • {releaseYear}
-              </Text>
-            )}
-
-            {!!duration && (
-              <Text color={theme.colors.textPrimary} style={durationStyle}>
-                • {duration}
-              </Text>
-            )}
-
-            {!!language && (
-              <Text color={theme.colors.textPrimary} style={languageStyle}>
-                • {language}
-              </Text>
-            )}
-          </View>
-
-          <LikeShareActions
-            theme={theme}
-            contentId={contentId}
-            isLiked={isLiked}
-            isLoading={isLoading}
-            onPressLike={onPressLike}
-            onPressShare={onPressShare}
-          />
-        </View>
-
-        {!!rating && (
-          <Text color={theme.colors.textSecondary} style={ratingStyle}>
-            ⭐ {rating}
-          </Text>
-        )}
-      </View>
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: scale(12),
-    marginTop: scale(5),
-  },
-
-  metaRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-
-  leftMeta: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flexWrap: 'wrap',
-    flex: 1,
-  },
-
-  subTitleContainer: {
-    alignSelf: 'center',
-    paddingHorizontal: scale(8),
-    paddingVertical: scale(2),
-    borderRadius: scale(6),
-    marginRight: scale(6),
-  },
-
-  subTitle: {
-    fontSize: RFValue(12),
-    fontWeight: '500',
-  },
-
-  metaText: {
-    fontSize: RFValue(14),
-    marginRight: scale(4),
-  },
-
-  rating: {
-    fontSize: RFValue(12),
-    marginTop: scale(4),
-  },
-});

package/src/components/ContentView/Two/components/index.ts

@@ -1,15 +0,0 @@
-/**
- * @author Ashok Desai
- * @lastModified Sat 17 Jan 2026 at 02:28 PM
- */
-
-export * from './PlayOrTrailer';
-export * from './Title';
-export * from './HeroBanner';
-export * from './GenreTags';
-export * from './AboutSection';
-export * from './LikeShareActions';
-export * from './SectionTabs';
-export * from './MoreLikeThisContentList ';
-export * from './Details';
-export * from './EpisodeCard';

package/src/components/ContentView/index.ts

@@ -1,13 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Tue 01 Jul 2025 at 02:28 PM
- */
-
-import { ContentViewOne } from './One/ContentViewOne';
-import { ContentViewTwo } from './Two/ContentViewTwo';
-
-export { default as MoreContentList } from './MoreContentList';
-export const ContentView = {
-  One: ContentViewOne,
-  Two: ContentViewTwo,
-};

package/src/components/Fallbacks/NoContentFallback.tsx

@@ -1,176 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Sat 25 Oct 2025 at 11:15 AM
- */
-
-import React, { useCallback, useMemo } from 'react';
-import {
-  TouchableOpacity,
-  StyleSheet,
-  ActivityIndicator,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withSpring,
-} from 'react-native-reanimated';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { Text } from '../Text';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import type { ThemeOverride } from '../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import { AlertCircle } from 'lucide-react-native';
-
-export type NoContentFallbackProps = {
-  message?: string;
-  retryText?: string;
-  onRetry?: () => void;
-  isLoading?: boolean;
-  theme?: ThemeOverride;
-  style?: StyleProp<ViewStyle>;
-};
-
-export const NoContentFallback = React.memo(
-  ({
-    message = 'No content available right now.\nPlease check back later.',
-    retryText = 'Try Again',
-    onRetry,
-    theme,
-    style,
-    isLoading = false,
-  }: NoContentFallbackProps) => {
-    const { theme: appliedTheme } = useInternalTheme(theme);
-    const scaleValue = useSharedValue(1);
-
-    const handlePressIn = useCallback(() => {
-      if (isLoading) return; // disable press animation during loading
-      scaleValue.value = withSpring(0.95, { damping: 15, stiffness: 200 });
-    }, [scaleValue, isLoading]);
-
-    const handlePressOut = useCallback(() => {
-      if (isLoading) return;
-      scaleValue.value = withSpring(1, { damping: 15, stiffness: 200 });
-    }, [scaleValue, isLoading]);
-
-    const animatedButtonStyle = useAnimatedStyle(() => ({
-      transform: [{ scale: scaleValue.value }],
-    }));
-
-    const iconColor = useMemo(
-      () => appliedTheme?.colors?.textSecondary ?? '#999',
-      [appliedTheme?.colors?.textSecondary]
-    );
-
-    const messageStyle = useMemo(
-      () => [styles.message, { color: appliedTheme.colors.textSecondary }],
-      [appliedTheme.colors.textSecondary]
-    );
-
-    const retryButtonStyle = useMemo(
-      () => [
-        styles.retryButton,
-        {
-          backgroundColor: isLoading
-            ? appliedTheme.colors.primary
-            : appliedTheme.colors.primary,
-          opacity: isLoading ? 0.8 : 1,
-        },
-      ],
-      [isLoading, appliedTheme.colors.primary]
-    );
-
-    const retryTextStyle = useMemo(
-      () => [styles.retryText, { color: appliedTheme.colors.onPrimary }],
-      [appliedTheme.colors.onPrimary]
-    );
-
-    const handleRetry = useCallback(() => {
-      if (!isLoading && onRetry) {
-        onRetry();
-      }
-    }, [isLoading, onRetry]);
-
-    return (
-      <Animated.View
-        style={[styles.container, style]}
-        accessibilityLabel="No content available"
-        accessibilityHint="Check back later or try again"
-      >
-        <AlertCircle
-          size={RFValue(63)}
-          color={iconColor}
-          style={{ marginBottom: scale(20) }}
-        />
-
-        <Text style={messageStyle}>{message}</Text>
-
-        {onRetry && (
-          <TouchableOpacity
-            onPress={handleRetry}
-            onPressIn={handlePressIn}
-            onPressOut={handlePressOut}
-            activeOpacity={0.7}
-            disabled={isLoading}
-            style={retryButtonStyle}
-            accessibilityLabel={retryText}
-            accessibilityRole="button"
-          >
-            <Animated.View
-              style={[
-                animatedButtonStyle,
-                {
-                  flexDirection: 'row',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                },
-              ]}
-            >
-              {isLoading ? (
-                <>
-                  <ActivityIndicator
-                    size="small"
-                    color={appliedTheme.colors.onPrimary}
-                    style={{ marginRight: scale(8) }}
-                  />
-                  <Text style={retryTextStyle}>Loading...</Text>
-                </>
-              ) : (
-                <Text style={retryTextStyle}>{retryText}</Text>
-              )}
-            </Animated.View>
-          </TouchableOpacity>
-        )}
-      </Animated.View>
-    );
-  }
-);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: scale(20),
-    paddingVertical: verticalScale(40),
-  },
-  message: {
-    fontSize: RFValue(15),
-    textAlign: 'center',
-    fontWeight: '500',
-    lineHeight: verticalScale(22),
-    marginBottom: verticalScale(20),
-  },
-  retryButton: {
-    paddingHorizontal: scale(18),
-    paddingVertical: verticalScale(10),
-    borderRadius: scale(8),
-    alignItems: 'center',
-  },
-  retryText: {
-    fontSize: RFValue(13),
-    fontWeight: '600',
-    textAlign: 'center',
-  },
-});

package/src/components/Fallbacks/NotFoundFallback.tsx

@@ -1,94 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Tue 01 Jul 2025 at 02:28 PM
- */
-
-import React, { useMemo } from 'react';
-import { StyleSheet } from 'react-native';
-import { scale } from 'react-native-size-matters';
-import { Button } from '../Button';
-import type { ThemeOverride } from '../../theme';
-import { View } from '../View';
-import { Text } from '../Text';
-import { AlertCircle } from 'lucide-react-native';
-import { useInternalTheme } from '../../theme/hook';
-
-interface NotFoundFallbackProps {
-  title?: string;
-  subtitle?: string;
-  content?: React.ReactNode;
-  onPressBack?: () => void;
-  backButtonText?: string;
-  theme?: ThemeOverride;
-  iconSize?: number;
-  iconColor?: string;
-}
-
-const NotFoundFallbackComponent: React.FC<NotFoundFallbackProps> = ({
-  title = 'Content Not Found',
-  subtitle = "We couldn't find anything to show here. Please check back later.",
-  content,
-  onPressBack,
-  backButtonText = 'Go Back',
-  theme,
-  iconSize = scale(60),
-  iconColor,
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  const finalIconColor = useMemo(
-    () => iconColor ?? appliedTheme?.colors?.textSecondary ?? '#999',
-    [iconColor, appliedTheme?.colors?.textSecondary]
-  );
-
-  if (content) return <>{content}</>;
-
-  return (
-    <View style={styles.container}>
-      <AlertCircle
-        size={iconSize}
-        color={finalIconColor}
-        style={{ marginBottom: scale(20) }}
-      />
-
-      <Text style={styles.title} type="title" theme={theme}>
-        {title}
-      </Text>
-      <Text style={styles.subtitle} type="subtitle" theme={theme}>
-        {subtitle}
-      </Text>
-
-      {onPressBack && (
-        <Button.Primary
-          theme={theme}
-          title={backButtonText}
-          onPress={onPressBack}
-        />
-      )}
-    </View>
-  );
-};
-
-export const NotFoundFallback = React.memo(NotFoundFallbackComponent);
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: scale(30),
-    paddingBottom: scale(30),
-    backgroundColor: 'transparent',
-  },
-  title: {
-    fontSize: scale(18),
-    fontWeight: '700',
-    marginBottom: scale(8),
-    textAlign: 'center',
-  },
-  subtitle: {
-    fontSize: scale(14),
-    textAlign: 'center',
-    marginBottom: scale(20),
-  },
-});

package/src/components/Fallbacks/index.ts

@@ -1,2 +0,0 @@
-export * from './NotFoundFallback';
-export * from './NoContentFallback';

package/src/components/Headers/AppHeader.tsx

@@ -1,150 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Sat 21 Jun 2025 at 02:52 PM
- */
-import React, { useMemo, useCallback } from 'react';
-import {
-  View,
-  StyleSheet,
-  TouchableOpacity,
-  type StyleProp,
-  type ViewStyle,
-  type TextStyle,
-} from 'react-native';
-import { ArrowLeft } from 'lucide-react-native';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { Text } from '../Text';
-import type { ThemeOverride } from '../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-
-export type AppHeaderProps = {
-  title: string;
-  onBackPress?: () => void;
-  onRightPress?: () => void;
-  rightIcon?: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-  titleStyle?: TextStyle;
-  titleAlign?: 'center' | 'left';
-  theme?: ThemeOverride;
-};
-
-const AppHeader: React.FC<AppHeaderProps> = ({
-  title,
-  onBackPress,
-  onRightPress,
-  rightIcon,
-  style,
-  titleStyle,
-  titleAlign = 'center',
-  theme,
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  const headerStyle = useMemo(
-    () => [
-      styles.header,
-      { backgroundColor: appliedTheme.colors.background },
-      style,
-    ],
-    [appliedTheme.colors.background, style]
-  );
-
-  const titleWrapperStyle = useMemo(
-    () => [
-      styles.titleWrapper,
-      titleAlign === 'center' ? styles.centered : styles.leftAligned,
-    ],
-    [titleAlign]
-  );
-
-  const titleTextStyle = useMemo(
-    () => [
-      { color: appliedTheme.colors.onBackground },
-      !onBackPress && { ...titleStyle },
-      titleStyle,
-      styles.title,
-    ],
-    [appliedTheme.colors.onBackground, onBackPress, titleStyle]
-  );
-
-  const handleBackPress = useCallback(() => {
-    onBackPress?.();
-  }, [onBackPress]);
-
-  const handleRightPress = useCallback(() => {
-    onRightPress?.();
-  }, [onRightPress]);
-
-  return (
-    <View style={headerStyle}>
-      {/* Left icon */}
-      {onBackPress && (
-        <TouchableOpacity
-          onPress={handleBackPress}
-          activeOpacity={0.7}
-          style={styles.iconButton}
-        >
-          <ArrowLeft size={scale(22)} color={appliedTheme.colors.textPrimary} />
-        </TouchableOpacity>
-      )}
-
-      {/* Title */}
-      <View style={titleWrapperStyle}>
-        <Text numberOfLines={1} style={titleTextStyle}>
-          {title}
-        </Text>
-      </View>
-
-      {/* Right icon */}
-      {rightIcon && onRightPress ? (
-        <TouchableOpacity
-          onPress={handleRightPress}
-          activeOpacity={0.7}
-          style={styles.iconButton}
-        >
-          {rightIcon}
-        </TouchableOpacity>
-      ) : (
-        <View style={styles.iconButton} />
-      )}
-    </View>
-  );
-};
-
-export default React.memo(AppHeader);
-
-const styles = StyleSheet.create({
-  header: {
-    height: verticalScale(40),
-    paddingHorizontal: scale(12),
-    paddingBottom: verticalScale(4),
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  iconButton: {
-    width: scale(42),
-    height: scale(42),
-    borderRadius: scale(21),
-    justifyContent: 'center',
-    alignItems: 'center',
-    overflow: 'hidden',
-    backgroundColor: 'transparent',
-  },
-  titleWrapper: {
-    flex: 1,
-    justifyContent: 'center',
-  },
-  centered: {
-    alignItems: 'center',
-  },
-  leftAligned: {
-    alignItems: 'flex-start',
-    paddingLeft: scale(2),
-  },
-  title: {
-    fontSize: RFValue(14),
-    textTransform: 'capitalize',
-    fontWeight: '500',
-  },
-});