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

package/src/VideoPlayer/components/SubtitleView.tsx

@@ -0,0 +1,53 @@
+import { StyleSheet, View } from 'react-native';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { scale } from 'react-native-size-matters';
+import Subtitles from 'react-native-subtitles';
+import { useVideoPlayerStore } from '../store/videoPlayerStore';
+import Display from '../utils/Display';
+import { useVideoPlayerConfig } from '../context';
+
+const SubtitleView = () => {
+  const { activeSubtitle, currentTime, controlsVisible, settingsModal } =
+    useVideoPlayerStore();
+  const { colors } = useVideoPlayerConfig();
+  if (
+    !activeSubtitle ||
+    !activeSubtitle.url ||
+    controlsVisible ||
+    settingsModal.isVisible
+  ) {
+    return null;
+  }
+  return (
+    <View style={styles.container}>
+      <Subtitles
+        containerStyle={styles.subtitleContainer}
+        textStyle={{ ...styles.text, color: colors.text }}
+        currentTime={currentTime}
+        selectedsubtitle={{
+          file: activeSubtitle.url,
+        }}
+      />
+    </View>
+  );
+};
+
+export default SubtitleView;
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    position: 'absolute',
+    bottom: Display.setHeight(3),
+    zIndex: 10,
+  },
+  subtitleContainer: {
+    padding: scale(10),
+  },
+  text: {
+    fontSize: RFValue(14),
+    paddingHorizontal: scale(10),
+    paddingVertical: scale(5),
+    borderRadius: scale(5),
+  },
+});

package/src/VideoPlayer/context/VideoPlayerConfig.tsx

@@ -0,0 +1,65 @@
+import { createContext, useContext, type ReactNode } from 'react';
+import { scale } from 'react-native-size-matters';
+
+export interface VideoPlayerTheme {
+  colors: {
+    primary: string;
+    secondary: string;
+    background: string;
+    onBackground: string;
+    text: string;
+    white: string;
+    black: string;
+    track: string;
+    buffer: string;
+  };
+  metrics: {
+    thumbSize: number;
+    sliderHeight: number;
+    controlSize: number;
+  };
+}
+
+const defaultTheme: VideoPlayerTheme = {
+  colors: {
+    primary: '#ff0000',
+    secondary: '#999999',
+    background: '#000000',
+    onBackground: '#E2E8F0',
+    text: '#ffffff',
+    white: '#ffffff',
+    black: '#000000',
+    track: '#868686f0',
+    buffer: '#ffffffd1',
+  },
+  metrics: {
+    thumbSize: scale(14),
+    sliderHeight: scale(4),
+    controlSize: scale(28),
+  },
+};
+
+const VideoPlayerConfigContext = createContext<VideoPlayerTheme>(defaultTheme);
+
+export const VideoPlayerConfigProvider = ({
+  children,
+  theme,
+}: {
+  children: ReactNode;
+  theme?: Partial<VideoPlayerTheme>;
+}) => {
+  const mergedTheme: VideoPlayerTheme = {
+    ...defaultTheme,
+    ...theme,
+    colors: { ...defaultTheme.colors, ...theme?.colors },
+    metrics: { ...defaultTheme.metrics, ...theme?.metrics },
+  };
+
+  return (
+    <VideoPlayerConfigContext.Provider value={mergedTheme}>
+      {children}
+    </VideoPlayerConfigContext.Provider>
+  );
+};
+
+export const useVideoPlayerConfig = () => useContext(VideoPlayerConfigContext);

package/src/VideoPlayer/context/index.ts

@@ -0,0 +1,5 @@
+export {
+  VideoPlayerConfigProvider,
+  useVideoPlayerConfig,
+} from './VideoPlayerConfig';
+export type { VideoPlayerTheme } from './VideoPlayerConfig';

package/src/VideoPlayer/index.ts

@@ -0,0 +1,4 @@
+export { default as VideoPlayer } from './VideoPlayer';
+export * from './store';
+export * from './utils';
+export * from './context';

package/src/VideoPlayer/model/AudioAndSubtitles.tsx

@@ -0,0 +1,302 @@
+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';
+
+// --- Constants ---
+const ALLOWED_SUBTITLE_TYPES = [
+  'application/x-subrip',
+  'text/vtt',
+  'application/ttml+xml',
+];
+
+// --- Helpers ---
+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';
+  }
+};
+
+// --- UI Components ---
+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>
+);
+
+// --- Main Component ---
+const AudioAndSubtitles: React.FC = () => {
+  const {
+    setSettingsModal,
+    onLoad,
+    setSelectedAudioTrack,
+    setSelectedSubtitleTrack,
+    selectedAudioTrack,
+    selectedSubtitleTrack,
+    setActiveSubtitle,
+    activeTrack,
+    activeSubtitle,
+    setIsPaused,
+  } = useVideoPlayerStore();
+  const { colors } = useVideoPlayerConfig();
+  // Filter audio tracks
+
+  const audioTracks = useMemo(() => {
+    return (
+      onLoad?.audioTracks?.filter(
+        (item: OnLoadData['audioTracks'][0]) =>
+          item.title !== null && item.title !== ''
+      ) || []
+    );
+  }, [onLoad?.audioTracks]);
+
+  // Merge internal & external subtitles
+  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]);
+
+  // Handlers
+  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),
+  },
+});