@zezosoft/zezo-ott-react-native-video-player 1.0.4 → 1.0.6

package/src/VideoPlayer/Settings/AudioAndSubtitles.tsx

@@ -1,295 +0,0 @@
-import React, { useMemo } from 'react';
-import {
-  FlatList,
-  Platform,
-  TouchableOpacity,
-  View,
-  Text,
-  StyleSheet,
-} from 'react-native';
-import { scale, verticalScale } from 'react-native-size-matters';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { OnLoadData } from 'react-native-video';
-import {
-  useVideoPlayerStore,
-  type SubtitleTrack,
-  type TrackSelection,
-} from '../store';
-import { useVideoPlayerConfig } from '../context';
-
-const ALLOWED_SUBTITLE_TYPES = [
-  'application/x-subrip',
-  'text/vtt',
-  'application/ttml+xml',
-];
-
-const mapSubtitleType = (mimeType: string): 'srt' | 'ttml' | 'vtt' => {
-  switch (mimeType) {
-    case 'application/x-subrip':
-      return 'srt';
-    case 'application/ttml+xml':
-      return 'ttml';
-    case 'text/vtt':
-      return 'vtt';
-    default:
-      return 'srt';
-  }
-};
-
-const Separator = () => <View style={styles.separator} />;
-
-interface AudioItemProps {
-  item: OnLoadData['audioTracks'][0];
-  isSelected: boolean;
-  onPress: () => void;
-  colors: { text: string };
-}
-const AudioItem: React.FC<AudioItemProps> = ({
-  item,
-  isSelected,
-  onPress,
-  colors,
-}) => (
-  <TouchableOpacity onPress={onPress}>
-    <Text
-      style={[
-        styles.listItem,
-        { color: colors.text },
-        isSelected && styles.selected,
-      ]}
-    >
-      {item.title}
-    </Text>
-  </TouchableOpacity>
-);
-
-interface SubtitleItemProps {
-  item: TrackSelection;
-  isSelected: boolean;
-  onPress: () => void;
-  colors: { text: string };
-}
-const SubtitleItem: React.FC<SubtitleItemProps> = ({
-  item,
-  isSelected,
-  onPress,
-  colors,
-}) => (
-  <TouchableOpacity onPress={onPress}>
-    <Text
-      style={[
-        styles.listItem,
-        { color: colors.text },
-        isSelected && styles.selected,
-      ]}
-    >
-      {item.title || 'Unknown'}
-    </Text>
-  </TouchableOpacity>
-);
-
-const AudioAndSubtitles: React.FC = () => {
-  const {
-    setSettingsModal,
-    onLoad,
-    setSelectedAudioTrack,
-    setSelectedSubtitleTrack,
-    selectedAudioTrack,
-    selectedSubtitleTrack,
-    setActiveSubtitle,
-    activeTrack,
-    activeSubtitle,
-    setIsPaused,
-  } = useVideoPlayerStore();
-  const { colors } = useVideoPlayerConfig();
-
-  const audioTracks = useMemo(() => {
-    return (
-      onLoad?.audioTracks?.filter(
-        (item: OnLoadData['audioTracks'][0]) =>
-          item.title !== null && item.title !== ''
-      ) || []
-    );
-  }, [onLoad?.audioTracks]);
-
-  const subtitleTracks = useMemo(() => {
-    const internal =
-      onLoad?.textTracks
-        ?.filter((track) => {
-          const type = String(track.type);
-          const isCEA608 =
-            Platform.OS === 'android' && type === 'application/cea-608';
-          return (
-            !isCEA608 &&
-            ALLOWED_SUBTITLE_TYPES.includes(type) &&
-            track.title?.trim()
-          );
-        })
-        .map((track, idx) => ({
-          index: idx,
-          title: track.title,
-          language: track.language,
-          type: track.type ? mapSubtitleType(String(track.type)) : 'srt',
-          value: idx,
-          isExternal: false,
-        })) || [];
-
-    const external =
-      activeTrack?.subtitles?.map((item, idx) => ({
-        index: internal.length + idx,
-        type: mapSubtitleType(item.type),
-        value: internal.length + idx,
-        language: item.language,
-        title: item.title || item.language || `Subtitle ${idx + 1}`,
-        uri: item.url,
-        isExternal: true,
-      })) || [];
-
-    return [...internal, ...external];
-  }, [activeTrack?.subtitles, onLoad?.textTracks]);
-
-  const handleSelectAudio = (item: OnLoadData['audioTracks'][0]) => {
-    setSelectedAudioTrack({
-      type: 'index',
-      value: item.index,
-      isExternal: false,
-    });
-    setSettingsModal({ isVisible: false, action: 'none' });
-  };
-
-  const handleSelectSubtitle = (item: TrackSelection) => {
-    if (item.isExternal) {
-      setActiveSubtitle({
-        type: item.type as SubtitleTrack['type'],
-        url: item.uri!,
-        language: item.language,
-        title: item.title,
-      });
-      setSelectedSubtitleTrack({
-        type: 'index',
-        value: 'Off',
-        isExternal: false,
-      });
-    } else {
-      setSelectedSubtitleTrack({
-        type: 'index',
-        value: Number(item.value),
-        isExternal: false,
-      });
-      setActiveSubtitle(null);
-    }
-    setIsPaused(false);
-    setSettingsModal({ isVisible: false, action: 'none' });
-  };
-
-  const handleDisableSubtitles = () => {
-    setSelectedSubtitleTrack({
-      type: 'index',
-      value: 'Off',
-      isExternal: false,
-    });
-    setActiveSubtitle(null);
-    setIsPaused(false);
-    setSettingsModal({ isVisible: false, action: 'none' });
-  };
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.section}>
-        {audioTracks.length > 0 && (
-          <>
-            <Text style={[styles.sectionTitle, { color: colors.text }]}>
-              Audio
-            </Text>
-            <FlatList
-              data={audioTracks}
-              keyExtractor={({ index }) => `audio-${index}`}
-              ItemSeparatorComponent={Separator}
-              renderItem={({ item }) => (
-                <AudioItem
-                  item={item}
-                  isSelected={selectedAudioTrack?.value === item.index}
-                  onPress={() => handleSelectAudio(item)}
-                  colors={colors}
-                />
-              )}
-            />
-          </>
-        )}
-      </View>
-
-      <View style={styles.section}>
-        <Text style={[styles.sectionTitle, { color: colors.text }]}>
-          Subtitles
-        </Text>
-        <TouchableOpacity onPress={handleDisableSubtitles}>
-          <Text
-            style={[
-              styles.listItem,
-              { color: colors.text },
-              (!activeSubtitle && selectedSubtitleTrack?.value === 'Off') ||
-              selectedSubtitleTrack === null
-                ? styles.selected
-                : null,
-            ]}
-          >
-            Off
-          </Text>
-        </TouchableOpacity>
-        <Separator />
-        <FlatList
-          data={subtitleTracks}
-          keyExtractor={({ index }) => `sub-${index}`}
-          ItemSeparatorComponent={Separator}
-          renderItem={({ item }) => (
-            <SubtitleItem
-              item={item}
-              isSelected={
-                selectedSubtitleTrack?.value === item.index ||
-                activeSubtitle?.language === item.language
-              }
-              onPress={() => handleSelectSubtitle(item)}
-              colors={{ text: colors.text }}
-            />
-          )}
-        />
-      </View>
-    </View>
-  );
-};
-
-export default AudioAndSubtitles;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'row',
-    padding: scale(8),
-    gap: scale(12),
-  },
-  section: {
-    flex: 1,
-    borderRadius: scale(12),
-    padding: scale(8),
-  },
-  sectionTitle: {
-    fontSize: RFValue(20),
-    fontWeight: '600',
-    marginBottom: verticalScale(8),
-    letterSpacing: 0.6,
-  },
-  listItem: {
-    fontSize: RFValue(17),
-    paddingVertical: verticalScale(4),
-    paddingHorizontal: scale(12),
-    borderRadius: scale(8),
-    opacity: 0.7,
-  },
-  selected: {
-    opacity: 1,
-    fontWeight: '700',
-  },
-  separator: {
-    height: verticalScale(8),
-  },
-});

package/src/VideoPlayer/Settings/Episodes.tsx

@@ -1,297 +0,0 @@
-/* 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';
-
-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/Settings/SettingModal.tsx

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