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

package/src/components/Keyboard/HideKeyboard.tsx

@@ -1,88 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Fri 08 Aug 2025 at 08:14 AM
- */
-import React, { useEffect, useRef } from 'react';
-import {
-  TouchableWithoutFeedback,
-  Keyboard,
-  KeyboardAvoidingView,
-  StyleSheet,
-  Animated,
-  Platform,
-  StatusBar,
-  type ViewStyle,
-} from 'react-native';
-import { scale } from 'react-native-size-matters';
-
-interface HideKeyboardProps {
-  children: React.ReactNode;
-  containerStyle?: ViewStyle;
-  behavior?: 'padding' | 'height' | 'position';
-  keyboardVerticalOffset?: number;
-}
-
-const HideKeyboard: React.FC<HideKeyboardProps> = ({
-  children,
-  containerStyle,
-  behavior = 'padding',
-  keyboardVerticalOffset = scale(-160),
-}) => {
-  const fadeAnim = useRef(new Animated.Value(1)).current;
-
-  // Platform-based offset
-  const offset =
-    keyboardVerticalOffset ??
-    (Platform.OS === 'ios' ? 0 : (StatusBar.currentHeight ?? 0));
-
-  useEffect(() => {
-    const showEvent =
-      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
-    const hideEvent =
-      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
-
-    const showSub = Keyboard.addListener(showEvent, () => {
-      Animated.timing(fadeAnim, {
-        toValue: 0.98,
-        duration: 250,
-        useNativeDriver: true,
-      }).start();
-    });
-
-    const hideSub = Keyboard.addListener(hideEvent, () => {
-      Animated.timing(fadeAnim, {
-        toValue: 1,
-        duration: 250,
-        useNativeDriver: true,
-      }).start();
-    });
-
-    return () => {
-      showSub.remove();
-      hideSub.remove();
-    };
-  }, [fadeAnim]);
-
-  return (
-    <KeyboardAvoidingView
-      style={[styles.keyboardAvoidingView, containerStyle]}
-      behavior={behavior}
-      keyboardVerticalOffset={offset}
-    >
-      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
-        <Animated.View style={{ flex: 1, transform: [{ scale: fadeAnim }] }}>
-          {children}
-        </Animated.View>
-      </TouchableWithoutFeedback>
-    </KeyboardAvoidingView>
-  );
-};
-
-const styles = StyleSheet.create({
-  keyboardAvoidingView: {
-    flex: 1,
-    width: '100%',
-  },
-});
-
-export default HideKeyboard;

package/src/components/Loader/Loader.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { StyleSheet, View, ActivityIndicator } from 'react-native';
-
-interface LoaderProps {
-  color?: string;
-}
-
-export const Loader: React.FC<LoaderProps> = React.memo(({ color }) => {
-  return (
-    <View style={styles.root}>
-      <ActivityIndicator size="large" color={color} />
-    </View>
-  );
-});
-
-const styles = StyleSheet.create({
-  root: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 999,
-    backgroundColor: 'rgba(255,255,255,0.4)', // optional semi-transparent backdrop
-  },
-});

package/src/components/Logo/Logo.tsx

@@ -1,126 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Sun 08 Jun 2025 at 03:23 PM
- */
-import React, { useMemo } from 'react';
-import {
-  Image,
-  View,
-  type StyleProp,
-  type ImageStyle,
-  type ViewStyle,
-} from 'react-native';
-import { moderateScale } from 'react-native-size-matters';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import { useSplashCache } from '../../hooks/useSplashCache';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
-import type { ThemeOverride } from '../../theme/themes';
-
-interface ILogoProps {
-  width?: number;
-  height?: number;
-  resizeMode?: 'contain' | 'cover' | 'stretch';
-  logoUri: string;
-  imageStyle?: StyleProp<ImageStyle>;
-  containerStyle?: StyleProp<ViewStyle>;
-  aspectRatio?: number;
-  fallbackUri?: string;
-  theme?: ThemeOverride;
-  isLoading?: boolean;
-}
-
-export const Logo: React.FC<ILogoProps> = ({
-  width = 200,
-  height = 50,
-  resizeMode = 'contain',
-  logoUri,
-  imageStyle,
-  containerStyle,
-  aspectRatio,
-  fallbackUri,
-  theme,
-  isLoading = false,
-}) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-
-  const {
-    data: { logoPath },
-    isLoading: isSplashLoading,
-  } = useSplashCache({
-    logoUrl: logoUri,
-  });
-  const finalSource = useMemo(
-    () =>
-      logoPath
-        ? {
-            uri: logoPath.startsWith('file://')
-              ? logoPath
-              : `file://${logoPath}`,
-          }
-        : logoUri
-          ? { uri: logoUri }
-          : fallbackUri
-            ? { uri: fallbackUri }
-            : undefined,
-    [logoPath, logoUri, fallbackUri]
-  );
-
-  const containerStyleMemo = useMemo(
-    () => [
-      {
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-      },
-      containerStyle,
-    ],
-    [containerStyle]
-  );
-
-  const imageStyleMemo = useMemo(
-    () => [
-      {
-        width: moderateScale(width),
-        height: moderateScale(height),
-        ...(aspectRatio ? { aspectRatio } : {}),
-      },
-      imageStyle,
-    ],
-    [width, height, aspectRatio, imageStyle]
-  );
-
-  if (!finalSource && !isLoading) {
-    return null;
-  }
-  return (
-    <View style={containerStyleMemo}>
-      {isLoading || isSplashLoading ? (
-        <SkeletonPlaceholder
-          backgroundColor={appliedTheme.colors.skeletonBaseColor}
-          highlightColor={appliedTheme.colors.skeletonHighlightColor}
-          speed={1000}
-          borderRadius={4}
-        >
-          <SkeletonPlaceholder.Item
-            alignSelf="center"
-            width={moderateScale(width)}
-            height={moderateScale(width / 2)}
-            borderRadius={4}
-          />
-        </SkeletonPlaceholder>
-      ) : (
-        finalSource && (
-          <Image
-            source={finalSource}
-            resizeMode={resizeMode}
-            style={imageStyleMemo}
-            onError={() => {
-              return null;
-            }}
-          />
-        )
-      )}
-    </View>
-  );
-};
-
-export default React.memo(Logo);

package/src/components/Reels/ReelsSeries/MediaControls/BottomControls.tsx

@@ -1,156 +0,0 @@
-import React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import { ChevronRight, ListVideo } from 'lucide-react-native';
-import { moderateScale, verticalScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { ISeriesItem } from '../types';
-import type { ITheme } from '../../../../theme';
-
-interface BottomControlsProps {
-  series: ISeriesItem;
-  episodeIndex: number;
-  videoCurrentTime: number;
-  videoDuration: number;
-  onEpisodesPress?: () => void;
-  theme: ITheme;
-}
-
-const BottomControls: React.FC<BottomControlsProps> = ({
-  series,
-  episodeIndex,
-  videoCurrentTime,
-  videoDuration,
-  onEpisodesPress,
-  theme,
-}) => {
-  const progressPercentage =
-    videoDuration > 0 ? (videoCurrentTime / videoDuration) * 100 : 0;
-
-  const truncatedTitle =
-    series.title.length <= 25
-      ? series.title
-      : series.title.slice(0, 25) + '...';
-
-  return (
-    <View style={styles.container}>
-      {/* Series Info Section */}
-      <View style={styles.seriesInfo}>
-        <Text style={styles.seriesTitle}>{truncatedTitle}</Text>
-        <Text numberOfLines={2} style={styles.seriesDescription}>
-          {series.description}
-        </Text>
-      </View>
-
-      {/* Episodes Selector Button */}
-      <TouchableOpacity
-        style={styles.episodesButton}
-        onPress={onEpisodesPress}
-        activeOpacity={0.7}
-      >
-        <View style={styles.episodesButtonContent}>
-          <ListVideo
-            color={'#fff'}
-            width={moderateScale(20)}
-            height={moderateScale(20)}
-          />
-          <Text style={styles.episodesText}>
-            {episodeIndex + 1} / {series.episodes.length} Episodes
-          </Text>
-        </View>
-        <ChevronRight color={'#fff'} size={moderateScale(22)} />
-      </TouchableOpacity>
-
-      {/* Video Progress Bar */}
-      <View style={styles.progressBarContainer}>
-        <View style={styles.progressBarWrapper}>
-          <View
-            style={[
-              styles.progressBarFill,
-              {
-                width: `${progressPercentage}%`,
-                backgroundColor: theme.colors.primary,
-              },
-            ]}
-          />
-          {videoDuration > 0 && (
-            <View
-              style={[
-                styles.progressBarKnob,
-                {
-                  left: `${progressPercentage}%`,
-                },
-              ]}
-            />
-          )}
-        </View>
-      </View>
-    </View>
-  );
-};
-
-export default BottomControls;
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    bottom: 0,
-    zIndex: 10,
-    marginHorizontal: moderateScale(8),
-  },
-  seriesInfo: {
-    marginBottom: verticalScale(10),
-  },
-  seriesTitle: {
-    fontSize: RFValue(13),
-    fontWeight: '500',
-    color: '#fff',
-  },
-  seriesDescription: {
-    fontSize: RFValue(10),
-    color: '#fff',
-    marginTop: 2.5,
-    opacity: 0.9,
-  },
-  episodesButton: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    backgroundColor: 'rgba(0,0,0,0.5)',
-    borderRadius: moderateScale(8),
-    paddingHorizontal: moderateScale(12),
-    paddingVertical: verticalScale(8),
-  },
-  episodesButtonContent: {
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  episodesText: {
-    fontSize: RFValue(13),
-    color: '#fff',
-    marginLeft: moderateScale(10),
-  },
-  progressBarContainer: {
-    marginVertical: verticalScale(10),
-    marginHorizontal: moderateScale(5),
-  },
-  progressBarWrapper: {
-    height: verticalScale(2),
-    backgroundColor: 'rgba(255, 255, 255, 0.3)',
-    borderRadius: moderateScale(1),
-    position: 'relative',
-  },
-  progressBarFill: {
-    height: '100%',
-    // backgroundColor: '#fff',
-    borderRadius: moderateScale(1),
-  },
-  progressBarKnob: {
-    position: 'absolute',
-    top: -verticalScale(2),
-    width: moderateScale(7),
-    height: moderateScale(7),
-    borderRadius: moderateScale(5),
-    backgroundColor: '#fff',
-    transform: [{ translateX: -moderateScale(3.5) }],
-  },
-});

package/src/components/Reels/ReelsSeries/MediaControls/MediaControlsProvider.tsx

@@ -1,234 +0,0 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
-
-import GradientOverlay from '../../ReelsSeries/components/GradientOverlay';
-import Like from '../../ReelsSeries/components/Like';
-
-import type {
-  ISeriesItem,
-  ISeriesEpisode,
-  ModalState,
-  ILikeMoreData,
-} from '../types';
-import type { ITheme } from '../../../../theme';
-
-import TopControls from './TopControls';
-import MiddleControls from './MiddleControls';
-import RightControls from './RightControls';
-import BottomControls from './BottomControls';
-import DetailsModal from '../Model/DetailsModal';
-import UnLockModal from '../Model/UnlockModal';
-import SettingModal from '../Model/SettingModal';
-
-export interface ContentProps {
-  series: ISeriesItem;
-  episode: ISeriesEpisode;
-  activeIndex: number;
-}
-export interface UnlockProps {
-  isVisible: boolean;
-  onClose: () => void;
-}
-
-export interface VideoProps {
-  currentTime: number;
-  duration: number;
-  paused: boolean;
-  buffering: boolean;
-  showCenterControls: boolean;
-  isLocked: boolean;
-  hasError: boolean;
-}
-
-export interface LikeProps {
-  liked: boolean;
-  count: number;
-  showAnimation: boolean;
-}
-
-export interface ActionsProps {
-  onLike?: (ep: ISeriesEpisode) => void;
-  onUnlockPress?: (ep: ISeriesEpisode) => void;
-  onEpisodeSelect?: (ep: ISeriesEpisode) => void;
-  onLikeMore?: (item: ILikeMoreData) => void;
-  onShare?: () => void;
-  onUnLock?: () => void;
-}
-
-export interface NavigationProps {
-  onBack?: () => void;
-  onSearch?: () => void;
-}
-
-export interface SettingsProps {
-  playbackRate: number;
-  quality: string;
-  onPlaybackRateChange: (rate: number) => void;
-  onQualityChange: (q: string) => void;
-}
-
-export interface MediaControlsProps {
-  children: React.ReactNode;
-  content: ContentProps;
-  video: VideoProps;
-  likes: LikeProps;
-  actions: ActionsProps;
-  navigation: NavigationProps;
-  settings: SettingsProps;
-  modal?: ModalState;
-  setModal?: (m: ModalState) => void;
-  unlock: UnlockProps;
-  theme: ITheme;
-}
-
-const MediaControlsProvider: React.FC<MediaControlsProps> = ({
-  children,
-  content,
-  video,
-  likes,
-  actions,
-  navigation,
-  settings,
-  modal,
-  unlock,
-  setModal,
-  theme,
-}) => {
-  const { series, episode, activeIndex } = content;
-  const isSeries = series?.episodes ? true : false;
-
-  const {
-    currentTime,
-    duration,
-    paused,
-    buffering,
-    showCenterControls,
-    isLocked,
-    hasError,
-  } = video;
-
-  const { liked, count, showAnimation } = likes;
-
-  const {
-    onLike,
-    onEpisodeSelect,
-    onLikeMore,
-    onUnlockPress,
-    onShare,
-    onUnLock,
-  } = actions;
-
-  const { onBack, onSearch } = navigation;
-
-  const { playbackRate, quality, onPlaybackRateChange, onQualityChange } =
-    settings;
-
-  const episodeLabel = React.useMemo(() => {
-    return series.episodes.length > 0
-      ? `Ep ${activeIndex + 1}/${series.episodes.length}`
-      : undefined;
-  }, [activeIndex, series.episodes.length]);
-
-  return (
-    <View style={styles.root}>
-      {/* ❤️ Like Animation */}
-      <Like visible={showAnimation} />
-
-      {/* Video behind controls */}
-      {children}
-
-      {/* Gradient overlay */}
-      <GradientOverlay />
-
-      {/* UI Controls */}
-      <View style={StyleSheet.absoluteFillObject}>
-        {/* TOP */}
-        <TopControls
-          theme={theme}
-          onBack={onBack}
-          episodeLabel={episodeLabel}
-          onSettings={() => setModal?.({ type: 'settings', isVisible: true })}
-          onSearch={onSearch}
-        />
-
-        {/* CENTER */}
-        <MiddleControls
-          isLocked={isLocked}
-          theme={theme}
-          onUnLock={onUnLock}
-          isVisible={showCenterControls}
-          isPaused={paused}
-          isBuffering={buffering}
-          hasError={hasError}
-        />
-
-        {/* RIGHT ACTIONS */}
-        <RightControls
-          episode={episode}
-          isLiked={liked}
-          likeCount={count}
-          onLike={onLike}
-          showEpisodesButton={isSeries}
-          onDetailsPress={() =>
-            setModal?.({ type: 'details', isVisible: true })
-          }
-          onShare={onShare}
-        />
-
-        <BottomControls
-          theme={theme}
-          series={series}
-          episodeIndex={activeIndex}
-          videoCurrentTime={currentTime}
-          videoDuration={duration}
-          onEpisodesPress={() =>
-            setModal?.({ type: 'details', isVisible: true })
-          }
-        />
-      </View>
-
-      {/* DETAILS MODAL */}
-      {isSeries && (
-        <DetailsModal
-          reel={episode}
-          data={series}
-          activeEpisodeIndex={activeIndex}
-          theme={theme}
-          isVisible={modal?.type === 'details' && modal.isVisible}
-          onClose={() => setModal?.({ type: 'none', isVisible: false })}
-          onEpisodeSelect={onEpisodeSelect}
-          onLikeMorePress={onLikeMore}
-        />
-      )}
-
-      {/* SETTINGS MODAL */}
-      <SettingModal
-        theme={theme}
-        speed={playbackRate}
-        quality={quality}
-        videoUrl={episode.videoUrl}
-        onSpeedChange={onPlaybackRateChange}
-        onQualityChange={onQualityChange}
-        isVisible={modal?.type === 'settings' && modal.isVisible}
-        onClose={() => setModal?.({ type: 'none', isVisible: false })}
-      />
-
-      <UnLockModal
-        isVisible={unlock.isVisible}
-        onClose={() => unlock.onClose()}
-        theme={theme}
-        episode={episode}
-        data={series}
-        onUnlockPress={onUnlockPress}
-      />
-    </View>
-  );
-};
-
-export default MediaControlsProvider;
-
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-  },
-});