@zezosoft/zezo-ott-react-native-ui-kit 1.0.9 → 1.1.1

package/src/components/ContentView/MoreContentList.tsx

@@ -13,7 +13,6 @@ import {
 } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import Display from '../../utils/Display';
-import type { IContentData } from '../../types';
 import { Text } from '../Text';
 import { View } from '../View';
 import AppHeader, { type AppHeaderProps } from '../Headers/AppHeader';
@@ -23,6 +22,7 @@ import type { ThemeOverride } from '../../theme/themes';
 import { useInternalTheme } from '../../theme/hook';
 import Animated from 'react-native-reanimated';
 import { Search } from 'lucide-react-native';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 interface Props {
   headerProps?: AppHeaderProps;

package/src/components/ContentView/components/AboutSection.tsx

@@ -18,7 +18,7 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale, verticalScale } from 'react-native-size-matters';
 import type { ITheme } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
-import type { IContentData } from '../../../types';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 type Props = {
   theme: ITheme;

package/src/components/ContentView/components/CastCard.tsx

@@ -18,8 +18,8 @@ import FastImage, { type ImageStyle } from 'react-native-fast-image';
 import { scale } from 'react-native-size-matters';
 import { Text } from '../../Text';
 import type { ITheme } from '../../../theme/themes';
-import type { IContentCast } from '../../../types';
 import { RFValue } from 'react-native-responsive-fontsize';
+import type { IContentCast } from '@zezosoft/zezo-ott-api-client';
 
 type StyleProps = {
   container?: StyleProp<ViewStyle>;
@@ -61,6 +61,7 @@ export const CastCard = ({
     name: '',
     avatar: '',
     castType: '',
+    type: 'actor',
   }));
 
   const listData = isLoading ? placeholderData : (data ?? []);

package/src/components/ContentView/components/EpisodeCard.tsx

@@ -10,12 +10,15 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
 import { Text } from '../../Text';
 import Display from '../../../utils/Display';
-import type { IContentEpisodes, IContentSeasons } from '../../../types';
 import type { ITheme, ThemeOverride } from '../../../theme/themes';
 import { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
 import { RFValue } from 'react-native-responsive-fontsize';
 import RentOrBuyIcon from '../../Content/Card/components/RentOrBuyIcon';
 import { useInternalTheme } from '../../../theme/hook';
+import type {
+  IContentEpisodes,
+  IContentSeasons,
+} from '@zezosoft/zezo-ott-api-client';
 
 // Constants
 const SKELETON_COUNT = 3;
@@ -367,6 +370,7 @@ export const EpisodeCard = ({
           source_type: 'HLS',
           content_offering_type: 'FREE',
           status: true,
+          data: '',
         }}
         onPress={onPress}
         style={{ width: cardWidth }}

package/src/components/ContentView/components/GenreTags.tsx

@@ -14,9 +14,9 @@ import {
 import { Text } from '../../Text';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale, verticalScale } from 'react-native-size-matters';
-import type { IContentData } from '../../../types';
 import type { ITheme } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 type Props = {
   genres?: IContentData['genres'];

package/src/components/ContentView/components/MiniInfo.tsx

@@ -14,10 +14,10 @@ import {
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale } from 'react-native-size-matters';
 import { Text } from '../../Text';
-import type { IContentData } from '../../../types';
 import type { ThemeOverride } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 import { useInternalTheme } from '../../../theme/hook';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 type Props = {
   content?: IContentData;

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

@@ -14,9 +14,9 @@ import {
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale } from 'react-native-size-matters';
 import { Text } from '../../Text';
-import type { IContentData } from '../../../types';
 import type { ITheme } from '../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 type Props = {
   title: IContentData['name'];

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

@@ -0,0 +1,156 @@
+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

@@ -0,0 +1,234 @@
+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,
+  },
+});

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

@@ -0,0 +1,196 @@
+import React from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import { Pause, Play, AlertCircle } from 'lucide-react-native';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import RotatingLoader from '../../ReelsSeries/components/RotatingLoader';
+import { Button } from '../../../Button';
+import type { ITheme } from '../../../../theme';
+
+interface MiddleControlsProps {
+  isVisible: boolean;
+  isPaused: boolean;
+  isBuffering: boolean;
+  isLocked: boolean;
+  hasError: boolean;
+  onUnLock?: () => void;
+  theme: ITheme;
+}
+
+const MiddleControls: React.FC<MiddleControlsProps> = ({
+  isVisible,
+  isPaused,
+  isBuffering,
+  isLocked,
+  hasError,
+  onUnLock,
+  theme,
+}) => {
+  if (!isVisible) return null;
+
+  return (
+    <View style={styles.container} pointerEvents="box-none">
+      {/* ERROR MESSAGE */}
+      {hasError && !isBuffering && (
+        <View style={styles.errorWrapper}>
+          <View style={styles.errorContainer}>
+            <View style={styles.errorIconContainer}>
+              <AlertCircle
+                color={styles.errorIconColor.color}
+                size={moderateScale(28)}
+                strokeWidth={2.5}
+              />
+            </View>
+            <Text style={styles.errorText}>Unable to play video</Text>
+            <Text style={styles.errorSubtext}>Please try again later</Text>
+          </View>
+        </View>
+      )}
+
+      {/* BUFFERING LOADER */}
+      {isBuffering && !hasError && (
+        <View style={styles.loaderWrapper}>
+          <RotatingLoader
+            color={theme.colors.buttonText}
+            containerStyle={[
+              styles.loadingContainer,
+              { backgroundColor: theme.colors.button },
+            ]}
+            autoRotate={isBuffering}
+          />
+        </View>
+      )}
+
+      {/* PLAY / PAUSE ICON */}
+      {!isBuffering && !isLocked && !hasError && (
+        <View style={styles.iconWrapper}>
+          <View
+            style={[
+              styles.iconBackground,
+              { backgroundColor: theme.colors.button },
+            ]}
+            pointerEvents="none"
+          >
+            {isPaused ? (
+              <Play color={theme.colors.buttonText} size={moderateScale(26)} />
+            ) : (
+              <Pause color={theme.colors.buttonText} size={moderateScale(26)} />
+            )}
+          </View>
+        </View>
+      )}
+
+      {/* LOCKED → SHOW UNLOCK BUTTON */}
+      {!isBuffering && isLocked && !hasError && (
+        <View style={styles.unlockWrapper}>
+          <Button.Primary
+            title="Unlock Episode"
+            onPress={onUnLock}
+            theme={{
+              dark: theme.colors,
+              light: theme.colors,
+            }}
+            containerStyle={styles.unlockButton}
+          />
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default MiddleControls;
+
+/* ---------------------- STYLES ---------------------- */
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    height: '100%',
+    width: '100%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 5,
+  },
+
+  /* BUFFERING */
+  loaderWrapper: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingContainer: {
+    // backgroundColor: 'rgba(0,0,0,0.5)',
+    padding: moderateScale(8),
+    borderRadius: 50,
+  },
+
+  /* PLAY/PAUSE */
+  iconWrapper: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconBackground: {
+    // backgroundColor: 'rgba(0,0,0,0.55)',
+    padding: moderateScale(12),
+    borderRadius: 50,
+  },
+
+  /* UNLOCK */
+  unlockWrapper: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  unlockButton: {
+    paddingVertical: moderateScale(12),
+    paddingHorizontal: moderateScale(20),
+    borderRadius: moderateScale(30),
+  },
+
+  /* ERROR */
+  errorWrapper: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  errorContainer: {
+    backgroundColor: 'rgba(21, 21, 21, 0.95)',
+    padding: moderateScale(20),
+    borderRadius: moderateScale(16),
+    alignItems: 'center',
+    minWidth: moderateScale(220),
+    borderWidth: 2,
+    borderColor: '#FF4444',
+    shadowColor: '#FF4444',
+    shadowOffset: {
+      width: 0,
+      height: 4,
+    },
+    shadowOpacity: 0.5,
+    shadowRadius: 12,
+    elevation: 10,
+  },
+  errorIconContainer: {
+    width: moderateScale(56),
+    height: moderateScale(56),
+    borderRadius: moderateScale(28),
+    backgroundColor: 'rgba(255, 68, 68, 0.15)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: verticalScale(8),
+  },
+  errorIconColor: {
+    color: '#FF4444',
+  },
+  errorText: {
+    fontSize: RFValue(16),
+    fontWeight: '700',
+    marginTop: verticalScale(8),
+    textAlign: 'center',
+    letterSpacing: 0.3,
+    color: '#FFFFFF',
+  },
+  errorSubtext: {
+    fontSize: RFValue(13),
+    marginTop: verticalScale(6),
+    textAlign: 'center',
+    color: 'rgba(255, 255, 255, 0.75)',
+  },
+});