@zezosoft/zezo-ott-react-native-video-player 1.0.0

package/src/VideoPlayer/model/Episodes.tsx

@@ -0,0 +1,294 @@
+/* eslint-disable react/no-unstable-nested-components */
+import {
+  FlatList,
+  TouchableOpacity,
+  View,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import React from 'react';
+import FastImage from 'react-native-fast-image';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import {
+  MenuProvider,
+  Menu,
+  MenuOptions,
+  MenuOption,
+  MenuTrigger,
+} from 'react-native-popup-menu';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { formatDuration, getEpisodeIndex } from '../utils';
+import { useVideoPlayerStore } from '../store/videoPlayerStore';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import globalStyles from '../Styles/globalStyles';
+import type { MediaEpisode } from '../store';
+import { useVideoPlayerConfig } from '../context';
+import type { ExtendedWatchProgress } from '../utils/useWatchReporter';
+
+type EpisodesProps = {
+  onPressEpisode: ({ episode }: { episode: MediaEpisode }) => Promise<boolean>;
+  reportProgress: (event: ExtendedWatchProgress['event']) => void;
+};
+
+const Episodes: React.FC<EpisodesProps> = ({
+  onPressEpisode,
+  reportProgress,
+}) => {
+  const {
+    activeSeason,
+    activeTrack,
+    setCurrentTrackIndex,
+    setActiveTrack,
+    playList,
+    setSettingsModal,
+    setIsPaused,
+    contentSeasons,
+    setActiveSeason,
+    setSelectedSubtitleTrack,
+    setPlayBackRate,
+    setActiveSubtitle,
+    setSelectedVideoTrack,
+    setMaxBitRate,
+    setDuration,
+  } = useVideoPlayerStore();
+  const { colors } = useVideoPlayerConfig();
+  const { left } = useSafeAreaInsets();
+
+  if (!activeSeason?.seasonNumber || !activeSeason?.episodes) {
+    return (
+      <View style={globalStyles.flexOneJustifyContentCenterAndAlignItemsCenter}>
+        <Text style={{ color: colors.text }}>
+          Something went wrong. Please try again.
+        </Text>
+      </View>
+    );
+  }
+
+  const handleEpisodePress = async (episode: MediaEpisode) => {
+    const isSuccess = await onPressEpisode({ episode });
+    if (!isSuccess) return;
+    if (episode.id === activeTrack?.episodeId) {
+      setSettingsModal({ isVisible: false, action: 'none' });
+      setIsPaused(false);
+      return;
+    }
+    const index = getEpisodeIndex(playList, episode.id);
+    setCurrentTrackIndex(index);
+    setDuration(0);
+
+    setActiveTrack({
+      type: 'series',
+      episodeId: episode.id,
+      contentId: episode.contentId,
+      episodeName: episode.title,
+      episodeNumber: episode.episodeNumber,
+      seasonNumber: activeSeason.seasonNumber ?? 0,
+      skipIntro: episode.skipIntro ?? undefined,
+      nextEpisodeAt: episode.nextEpisodeAt ?? undefined,
+      sourceLink: episode.sourceLink || '',
+      thumbnail: episode.thumbnail,
+      subtitles: episode.subtitles || null,
+      id: episode.id,
+      title: episode.title,
+      description: episode.description || '',
+      duration: episode.duration || 0,
+      sourceType: episode.sourceType || 'HLS',
+    });
+    setSelectedSubtitleTrack(null);
+    setActiveSubtitle(null);
+    setSelectedVideoTrack(null);
+    setMaxBitRate(null);
+    setSettingsModal({ isVisible: false, action: 'none' });
+    setIsPaused(false);
+    setPlayBackRate(1, 'Normal');
+  };
+
+  return (
+    <MenuProvider>
+      <View>
+        <Menu>
+          <MenuTrigger
+            style={[
+              styles.menuTrigger,
+              { marginLeft: left + moderateScale(8) },
+            ]}
+            customStyles={{
+              triggerText: {
+                ...menuTriggerCustomStyles.triggerText,
+                color: colors.text,
+              },
+            }}
+            text={`Season ${activeSeason?.seasonNumber}`}
+          />
+          <MenuOptions optionsContainerStyle={styles.menuOptionsContainer}>
+            {contentSeasons?.map((season, index) => (
+              <MenuOption
+                style={styles.menuOption}
+                customStyles={menuOptionCustomStyles}
+                key={index}
+                onSelect={() => setActiveSeason(season)}
+                text={`Season ${season.seasonNumber}`}
+              />
+            ))}
+          </MenuOptions>
+        </Menu>
+
+        <View style={styles.episodesContainer}>
+          <FlatList
+            data={activeSeason?.episodes}
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            ItemSeparatorComponent={() => (
+              <View style={{ width: moderateScale(12) }} />
+            )}
+            ListHeaderComponent={() => (
+              <View style={{ width: left + moderateScale(8) }} />
+            )}
+            ListFooterComponent={() => (
+              <View style={{ width: moderateScale(16) }} />
+            )}
+            renderItem={({ item }) => (
+              <TouchableOpacity
+                onPress={() => {
+                  reportProgress('EPISODE_CHANGE');
+                  handleEpisodePress(item);
+                }}
+                style={styles.episodeItem}
+                activeOpacity={0.8}
+              >
+                <FastImage
+                  source={{ uri: item?.thumbnail }}
+                  style={styles.episodeThumbnail}
+                  resizeMode={FastImage.resizeMode.cover}
+                />
+                {item.id === activeTrack?.episodeId && (
+                  <Text
+                    style={[
+                      styles.nowPlayingBadge,
+                      { color: colors.text, backgroundColor: colors.primary },
+                    ]}
+                  >
+                    Now Playing
+                  </Text>
+                )}
+
+                {/* Episode title */}
+                <Text
+                  numberOfLines={1}
+                  style={[styles.episodeTitle, { color: colors.text }]}
+                >
+                  {item?.title}
+                </Text>
+
+                {/* Season & Episode Number + Duration in one row */}
+                <View style={styles.episodeInfoRow}>
+                  <Text style={styles.episodeInfoText}>
+                    {[
+                      item.episodeNumber &&
+                        `S${String(activeSeason?.seasonNumber).padStart(2, '0')} E${String(item.episodeNumber).padStart(2, '0')}`,
+                      item.publishDate && `(${item.publishDate})`,
+                      item?.duration && formatDuration(item?.duration, true),
+                    ]
+                      .filter(Boolean)
+                      .join(' | ')}
+                  </Text>
+                </View>
+                {/* Description */}
+                {item.description && (
+                  <Text style={styles.episodeDescription} numberOfLines={3}>
+                    {item?.description}
+                  </Text>
+                )}
+              </TouchableOpacity>
+            )}
+            keyExtractor={(item) => item?.id}
+          />
+        </View>
+      </View>
+    </MenuProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  menuTrigger: {
+    alignSelf: 'flex-start',
+    backgroundColor: 'gray',
+    paddingHorizontal: moderateScale(16),
+    paddingVertical: moderateScale(8),
+    marginTop: verticalScale(20),
+    borderRadius: moderateScale(8),
+  },
+  menuOptionsContainer: {
+    marginTop: verticalScale(60),
+    width: moderateScale(150),
+  },
+  menuOption: {
+    paddingHorizontal: moderateScale(16),
+    paddingVertical: moderateScale(12),
+  },
+  episodesContainer: {
+    marginTop: verticalScale(20),
+    paddingBottom: verticalScale(20),
+  },
+  episodeItem: {
+    width: moderateScale(240),
+    backgroundColor: '#373737ff',
+    borderRadius: moderateScale(12),
+    overflow: 'hidden',
+  },
+  episodeThumbnail: {
+    width: '100%',
+    height: undefined,
+    aspectRatio: 16 / 9,
+    backgroundColor: '#444', // slightly lighter fallback
+  },
+  nowPlayingBadge: {
+    position: 'absolute',
+    top: moderateScale(6),
+    left: moderateScale(6),
+    paddingHorizontal: moderateScale(8),
+    paddingVertical: moderateScale(4), // slightly bigger
+    borderRadius: moderateScale(4),
+    fontSize: RFValue(12),
+    fontWeight: '600',
+    overflow: 'hidden',
+  },
+  episodeTitle: {
+    fontSize: RFValue(14), // bigger
+    fontWeight: '600', // bolder
+    marginHorizontal: moderateScale(8),
+    marginTop: verticalScale(3),
+  },
+  episodeInfoRow: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start', // better alignment
+    marginHorizontal: moderateScale(8),
+    marginTop: verticalScale(2),
+    alignItems: 'center',
+  },
+  episodeInfoText: {
+    color: '#f1f1f1ff',
+    fontSize: RFValue(10.5),
+  },
+  episodeDescription: {
+    marginHorizontal: moderateScale(8),
+    marginVertical: verticalScale(5),
+    color: '#f1f1f1ff',
+    fontSize: RFValue(10),
+    lineHeight: RFValue(10),
+  },
+});
+
+const menuTriggerCustomStyles = {
+  triggerText: {
+    fontSize: RFValue(16),
+  },
+};
+
+const menuOptionCustomStyles = {
+  optionText: {
+    fontSize: RFValue(16),
+  },
+};
+
+export default Episodes;

package/src/VideoPlayer/model/SettingModal.tsx

@@ -0,0 +1,128 @@
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import React from 'react';
+import { moderateScale } from 'react-native-size-matters';
+import { X } from 'lucide-react-native';
+import { useVideoPlayerStore } from '../store/videoPlayerStore';
+
+import Episodes from './Episodes';
+import SpeedControls from './SpeedControls';
+import VideoPlayerSettings from './VideoPlayerSettings';
+import AudioAndSubtitles from './AudioAndSubtitles';
+import {
+  useVideoResolutions,
+  type Resolution,
+} from '../utils/hooks/useVideoResolutions';
+import type { MediaEpisode, SettingsAction } from '../store/videoPlayer.type';
+import { useVideoPlayerConfig } from '../context';
+import type { ExtendedWatchProgress } from '../utils/useWatchReporter';
+
+const VisibleAction: React.FC<{
+  settingModalAction: SettingsAction;
+  onPressEpisode: ({ episode }: { episode: MediaEpisode }) => Promise<boolean>;
+  reportProgress: (event: ExtendedWatchProgress['event']) => void;
+  resolutions?: Resolution[];
+}> = ({ settingModalAction, onPressEpisode, reportProgress, resolutions }) => {
+  switch (settingModalAction) {
+    case 'speed':
+      return <SpeedControls />;
+    case 'audioOrSubtitle':
+      return <AudioAndSubtitles />;
+    case 'settings':
+      return <VideoPlayerSettings resolutions={resolutions || []} />;
+    case 'episodes':
+      return (
+        <Episodes
+          onPressEpisode={onPressEpisode}
+          reportProgress={reportProgress}
+        />
+      );
+    default:
+      return null;
+  }
+};
+
+type SettingModalProps = {
+  onPressEpisode: ({ episode }: { episode: MediaEpisode }) => Promise<boolean>;
+  reportProgress: (event: ExtendedWatchProgress['event']) => void;
+};
+
+const SettingModal: React.FC<SettingModalProps> = ({
+  onPressEpisode,
+  reportProgress,
+}) => {
+  const {
+    settingsModal,
+    setSettingsModal,
+    setIsPaused,
+    setControlsVisible,
+    activeTrack,
+  } = useVideoPlayerStore();
+  const { colors } = useVideoPlayerConfig();
+  // Fetch available resolutions for current track
+  const resolutions = useVideoResolutions(activeTrack);
+
+  const onClose = () => {
+    setSettingsModal({ isVisible: false, action: 'none' });
+    setIsPaused(false);
+    setControlsVisible(true);
+  };
+
+  if (!settingsModal.isVisible) return null;
+
+  const containerStyle =
+    settingsModal.action === 'audioOrSubtitle'
+      ? [styles.contentContainer, styles.audioOrSubtitlePadding]
+      : styles.contentContainer;
+
+  return (
+    <View style={StyleSheet.absoluteFill}>
+      {/* Dark overlay */}
+      <View style={styles.overlay} />
+
+      {/* Close button */}
+      <TouchableOpacity onPress={onClose} style={styles.closeButton}>
+        <X color={colors.text} size={moderateScale(25)} />
+      </TouchableOpacity>
+
+      {/* Modal content */}
+      <View style={containerStyle}>
+        <VisibleAction
+          settingModalAction={settingsModal.action}
+          resolutions={resolutions}
+          onPressEpisode={onPressEpisode}
+          reportProgress={reportProgress}
+        />
+      </View>
+    </View>
+  );
+};
+
+export default SettingModal;
+
+const styles = StyleSheet.create({
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.9)',
+    pointerEvents: 'none',
+  },
+  closeButton: {
+    position: 'absolute',
+    top: moderateScale(20),
+    right: moderateScale(60),
+    width: moderateScale(50),
+    height: moderateScale(50),
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: moderateScale(50),
+    zIndex: 10000,
+  },
+  contentContainer: {
+    flex: 1,
+    zIndex: 1000,
+  },
+  audioOrSubtitlePadding: {
+    paddingLeft: moderateScale(16),
+    paddingRight: moderateScale(16),
+    paddingTop: moderateScale(8),
+  },
+});

package/src/VideoPlayer/model/SpeedControls.tsx

@@ -0,0 +1,134 @@
+import React, { useMemo } from 'react';
+import {
+  FlatList,
+  TouchableOpacity,
+  View,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import { verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+import { useVideoPlayerStore } from '../store/videoPlayerStore';
+import globalStyles from '../Styles/globalStyles';
+import { useVideoPlayerConfig } from '../context';
+
+// --- Constants ---
+const SPEED_OPTIONS = [
+  { name: '0.25x', value: 0.25 },
+  { name: '0.5x', value: 0.5 },
+  { name: '0.75x', value: 0.75 },
+  { name: 'Normal', value: 1 },
+  { name: '1.25x', value: 1.25 },
+  { name: '1.5x', value: 1.5 },
+  { name: '1.75x', value: 1.75 },
+  { name: '2x', value: 2 },
+];
+
+// --- UI Components ---
+const ListHeader = () => <View style={styles.listHeader} />;
+const ListFooter = () => <View style={styles.listFooter} />;
+
+interface SpeedItemProps {
+  name: string;
+  value: number;
+  isSelected: boolean;
+  onPress: ({ value, name }: { value: number; name: string }) => void;
+  colors: {
+    text: string;
+    background: string;
+  };
+}
+
+const SpeedItem: React.FC<SpeedItemProps> = ({
+  name,
+  value,
+  isSelected,
+  onPress,
+  colors,
+}) => (
+  <TouchableOpacity
+    onPress={() => onPress({ value, name })}
+    style={styles.itemTouchable}
+    activeOpacity={0.7}
+  >
+    <Text
+      style={[
+        styles.itemText,
+        { color: colors.text },
+        isSelected ? styles.itemTextSelected : styles.itemTextUnselected,
+      ]}
+    >
+      {name}
+    </Text>
+  </TouchableOpacity>
+);
+
+// --- Main Component ---
+const SpeedControls: React.FC = () => {
+  const {
+    setIsPaused,
+    playBackRate,
+    setPlayBackRate,
+    setControlsVisible,
+    setSettingsModal,
+  } = useVideoPlayerStore();
+  const { colors } = useVideoPlayerConfig();
+  const speeds = useMemo(() => SPEED_OPTIONS, []);
+
+  const handleSelectSpeed = (value: number, name: string) => {
+    setPlayBackRate(value, name);
+    setSettingsModal({ action: 'none', isVisible: false });
+    setControlsVisible(true);
+    setIsPaused(false);
+  };
+
+  return (
+    <View style={globalStyles.flexOneJustifyContentCenterAndAlignItemsCenter}>
+      <FlatList
+        data={speeds}
+        showsVerticalScrollIndicator={false}
+        keyExtractor={(item) => item.name}
+        ListHeaderComponent={ListHeader}
+        ListFooterComponent={ListFooter}
+        renderItem={({ item }) => (
+          <SpeedItem
+            name={item.name}
+            value={item.value}
+            isSelected={playBackRate === item.value}
+            onPress={({ value, name }) => handleSelectSpeed(value, name)}
+            colors={colors}
+          />
+        )}
+      />
+    </View>
+  );
+};
+
+export default SpeedControls;
+
+// --- Styles ---
+const styles = StyleSheet.create({
+  listHeader: {
+    height: verticalScale(20),
+  },
+  listFooter: {
+    height: verticalScale(50),
+  },
+  itemTouchable: {
+    paddingVertical: verticalScale(12),
+    paddingHorizontal: verticalScale(30),
+    alignItems: 'center',
+  },
+  itemText: {
+    textAlign: 'center',
+    fontSize: RFValue(17), // better readability
+    fontWeight: '600', // semi-bold for better emphasis
+  },
+  itemTextSelected: {
+    opacity: 1,
+  },
+  itemTextUnselected: {
+    opacity: 0.6,
+  },
+});

package/src/VideoPlayer/model/VideoPlayerSettings.tsx

@@ -0,0 +1,141 @@
+/* eslint-disable react/no-unstable-nested-components */
+import { useCallback } from 'react';
+import {
+  FlatList,
+  TouchableOpacity,
+  View,
+  StyleSheet,
+  Text,
+} from 'react-native';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { SelectedVideoTrackType } from 'react-native-video';
+import globalStyles from '../Styles/globalStyles';
+import type { Resolution } from '../utils';
+import { useVideoPlayerStore } from '../store';
+import { useVideoPlayerConfig } from '../context';
+
+interface VideoPlayerSettingsProps {
+  resolutions: Resolution[];
+}
+
+const VideoPlayerSettings = ({ resolutions }: VideoPlayerSettingsProps) => {
+  const {
+    setMaxBitRate,
+    setSelectedVideoTrack,
+    setIsPaused,
+    setSettingsModal,
+    setControlsVisible,
+    maxBitRate,
+  } = useVideoPlayerStore();
+  const { colors } = useVideoPlayerConfig();
+  const handleSelect = useCallback(
+    (item: Resolution) => {
+      if (item.height === 'auto') {
+        setSelectedVideoTrack(null);
+        setMaxBitRate(null);
+      } else {
+        setSelectedVideoTrack({
+          type: SelectedVideoTrackType.RESOLUTION,
+          value: Number(item.height),
+        });
+        setMaxBitRate(item.bandwidth ?? null);
+      }
+      setIsPaused(false);
+      setSettingsModal({ isVisible: false, action: 'none' });
+      setControlsVisible(false);
+    },
+    [
+      setMaxBitRate,
+      setSelectedVideoTrack,
+      setIsPaused,
+      setSettingsModal,
+      setControlsVisible,
+    ]
+  );
+
+  const keyExtractor = useCallback(
+    (item: Resolution, index: number) => `${item.height}-${index}`,
+    []
+  );
+
+  const renderItem = useCallback(
+    ({ item }: { item: Resolution }) => {
+      const isSelected = maxBitRate === item.bandwidth;
+      return (
+        <TouchableOpacity
+          onPress={() => handleSelect(item)}
+          activeOpacity={0.7}
+        >
+          <Text
+            style={[
+              styles.optionText,
+              { color: colors.text },
+              isSelected
+                ? styles.optionTextSelected
+                : styles.optionTextUnselected,
+            ]}
+          >
+            {item.height === 'auto' ? 'Auto' : `${item.height}p`}
+          </Text>
+        </TouchableOpacity>
+      );
+    },
+    [colors.text, handleSelect, maxBitRate]
+  );
+
+  return (
+    <View style={[globalStyles.flexOne, styles.container]}>
+      <Text
+        style={[
+          styles.headerText,
+          { color: colors.text },
+          styles.marginTopBottom,
+        ]}
+      >
+        Video Quality
+      </Text>
+      <FlatList
+        data={resolutions}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{ paddingBottom: verticalScale(50) }}
+        ItemSeparatorComponent={() => (
+          <View style={{ height: verticalScale(12) }} />
+        )}
+      />
+    </View>
+  );
+};
+
+export default VideoPlayerSettings;
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    paddingHorizontal: 20,
+  },
+  headerText: {
+    fontSize: RFValue(20),
+    fontWeight: '700',
+    textAlign: 'center',
+  },
+  marginTopBottom: {
+    marginBottom: verticalScale(16),
+    paddingTop: verticalScale(24),
+  },
+  optionText: {
+    fontSize: RFValue(17),
+    paddingVertical: verticalScale(4),
+    paddingHorizontal: scale(12),
+    textAlign: 'center',
+  },
+  optionTextSelected: {
+    fontWeight: '700',
+    textDecorationLine: 'underline', // selected highlight
+  },
+  optionTextUnselected: {
+    opacity: 0.8,
+  },
+});

package/src/VideoPlayer/store/index.ts

@@ -0,0 +1,2 @@
+export * from './videoPlayerStore';
+export * from './videoPlayer.type';