Merge pull request #8 from sheeshcake/chore/code-cleanup

chore: code cleanup on details screen

Author: sheeshcake

builds/android/1.2.1/app-release.apk

@@ -1,6 +1,6 @@
 {
   "name": "Flickv4",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "private": true,
   "scripts": {
     "clean:android": "cd android && ./gradlew clean",

package.json

@@ -12,28 +12,25 @@ interface SubtitleOverlayProps {
   subtitleContent: string | null;
   currentTime: number;
   isVideoFullscreen: boolean;
-  delay?: number; // Delay in seconds (positive = subtitles later, negative = subtitles earlier)
-  style?: SubtitleStyle; // Custom subtitle style from settings
+  delay?: number;
+  style?: SubtitleStyle;
 }
 
 const parseSRT = (srtContent: string): SubtitleCue[] => {
   const cues: SubtitleCue[] = [];
 
-  // Split by double newline to get subtitle blocks
   const blocks = srtContent.trim().split(/\r?\n\r?\n/);
 
   for (const block of blocks) {
     const lines = block.trim().split(/\r?\n/);
     if (lines.length < 3) continue;
 
-    // Find the timestamp line (contains -->)
     const timestampIndex = lines.findIndex(line => line.includes('-->'));
     if (timestampIndex === -1) continue;
 
     const timestampLine = lines[timestampIndex];
     const textLines = lines.slice(timestampIndex + 1);
 
-    // Parse SRT timestamps: 00:00:01,000 --> 00:00:03,500
     const match = timestampLine.match(/(\d{2}):(\d{2}):(\d{2}),(\d{3})\s*-->\s*(\d{2}):(\d{2}):(\d{2}),(\d{3})/);
     if (!match) continue;
 
@@ -47,10 +44,9 @@ const parseSRT = (srtContent: string): SubtitleCue[] => {
     const start = startHours * 3600 + startMinutes * 60 + startSeconds;
     const end = endHours * 3600 + endMinutes * 60 + endSeconds;
 
-    // Clean text (remove tags and extra whitespace)
     const text = textLines
       .join('\n')
-      .replace(/<[^>]*>/g, '') // Remove HTML tags
+      .replace(/<[^>]*>/g, '')
       .trim();
 
     if (text) {
@@ -71,7 +67,6 @@ export const SubtitleOverlay: React.FC<SubtitleOverlayProps> = ({
   const [cues, setCues] = useState<SubtitleCue[]>([]);
   const [currentCue, setCurrentCue] = useState<string | null>(null);
 
-  // Compute font size based on style setting and fullscreen mode
   const computedFontSize = useMemo(() => {
     const baseSizes = {
       small: isVideoFullscreen ? 14 : 10,
@@ -82,7 +77,6 @@ export const SubtitleOverlay: React.FC<SubtitleOverlayProps> = ({
     return baseSizes[style.fontSize] || baseSizes.medium;
   }, [style.fontSize, isVideoFullscreen]);
 
-  // Compute background color with opacity
   const computedBackgroundColor = useMemo(() => {
     if (style.backgroundOpacity === 0) return 'transparent';
     const hex = style.backgroundColor.replace('#', '');
@@ -92,16 +86,13 @@ export const SubtitleOverlay: React.FC<SubtitleOverlayProps> = ({
     return `rgba(${r}, ${g}, ${b}, ${style.backgroundOpacity})`;
   }, [style.backgroundColor, style.backgroundOpacity]);
 
-  // Dynamic container style based on position
   const containerStyle: ViewStyle = useMemo(() => ({
     position: 'absolute',
     alignItems: 'center',
     paddingHorizontal: 20,
-    // backgroundColor: 'red', // For debugging
     ...(style.position === 'top' ? { top: 50 } : { bottom: isVideoFullscreen ? -70 : 20 }),
   }), [style.position, isVideoFullscreen]);
 
-  // Dynamic text style
   const textStyle: TextStyle = useMemo(() => ({
     color: style.fontColor,
     textAlign: 'center',
@@ -112,7 +103,6 @@ export const SubtitleOverlay: React.FC<SubtitleOverlayProps> = ({
     textShadowRadius: style.textShadow ? 2 : 0,
   }), [style.fontColor, style.fontWeight, style.textShadow, computedFontSize]);
 
-  // Dynamic text container style
   const textContainerStyle: ViewStyle = useMemo(() => ({
     backgroundColor: computedBackgroundColor,
     paddingVertical: 8,
@@ -126,9 +116,7 @@ export const SubtitleOverlay: React.FC<SubtitleOverlayProps> = ({
       try {
         const parsedCues = parseSRT(subtitleContent);
         setCues(parsedCues);
-        console.log('[SubtitleOverlay] Parsed SRT cues:', parsedCues.length);
-      } catch (error) {
-        console.error('[SubtitleOverlay] Failed to parse SRT:', error);
+      } catch {
       }
     } else {
       setCues([]);
@@ -142,8 +130,6 @@ export const SubtitleOverlay: React.FC<SubtitleOverlayProps> = ({
       return;
     }
 
-    // Apply delay: positive delay means subtitles appear later (subtract from currentTime)
-    // negative delay means subtitles appear earlier (add to currentTime)
     const adjustedTime = currentTime - delay + 0.5;
     const activeCue = cues.find(
       cue => adjustedTime >= cue.start && adjustedTime <= cue.end

src/components/MediaPlayer/SubtitleOverlay.tsx

@@ -24,13 +24,6 @@ import type { ControlsProps, VideoStatus } from './types';
 const loadingMessagesModule = require('../../../constants/loadingmessage.js');
 const loadingMessages: string[] = loadingMessagesModule?.default ?? [];
 
-/**
- * Optimized Controls Component
- * Features:
- * - Better memoization to prevent unnecessary re-renders
- * - Improved auto-hide logic with proper cleanup
- * - Cleaner state management
- */
 const ControlsComponent: React.FC<ControlsProps> = ({
   hide,
   title,
@@ -64,19 +57,16 @@ const ControlsComponent: React.FC<ControlsProps> = ({
 
   const messageTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  // Update time label when not seeking
   useEffect(() => {
     if (!isSeeking) {
       setTimeLabel(formatTime(currentPosition));
     }
   }, [currentPosition, isSeeking]);
 
-  // Update status
   useEffect(() => {
     setStatus(videoStatus as VideoStatus);
   }, [videoStatus]);
 
-  // Loading message rotation
   useEffect(() => {
     if (videoStatus === 'loading' && loadingMessages.length > 0) {
       if (messageTimeoutRef.current) {
@@ -96,37 +86,30 @@ const ControlsComponent: React.FC<ControlsProps> = ({
     }
   }, [videoStatus]);
 
-  // Handle seeking state changes
   const handleSeekingStateChange = useCallback((isCurrentlySeeking: boolean) => {
     setIsSeeking(isCurrentlySeeking);
     onSeekingStateChange?.(isCurrentlySeeking);
   }, [onSeekingStateChange]);
 
-  // Auto-hide is now handled by the useControlsVisibility hook in MediaPlayer
-  // This component no longer manages its own auto-hide timer
-
-  // Time preview handler for progress bar
   const handleTimePreview = useCallback((newTime: number) => {
     setTimeLabel(formatTime(newTime));
   }, []);
 
-  // Seek with offset
   const handleSeekOffset = useCallback((seconds: number) => {
     const newTime = Math.max(0, Math.min(currentPosition + seconds, duration));
     onSeek(newTime);
   }, [currentPosition, duration, onSeek]);
 
-  // Back button handler
   const handleBackPress = useCallback(() => {
-    Orientation.lockToPortrait();
     if (fullscreen) {
       onFullscreen();
     } else {
+      Orientation.lockToPortrait();
+      setTimeout(() => Orientation.unlockAllOrientations(), 300);
       navigation.goBack();
     }
   }, [fullscreen, navigation, onFullscreen]);
 
-  // Play/Pause toggle
   const handlePlayPause = useCallback(() => {
     if (playing) {
       onPause();
@@ -135,13 +118,11 @@ const ControlsComponent: React.FC<ControlsProps> = ({
     }
   }, [onPause, onPlay, playing]);
 
-  // Memoize container dimensions
   const containerDimensions = useMemo(() => ({
     width: fullscreen ? sizes.height : sizes.width,
     height: fullscreen ? sizes.width : sizes.height * 0.3,
   }), [fullscreen]);
 
-  // Memoize controls visibility
   const isControlsHidden = useMemo(() => hide && !isSeeking, [hide, isSeeking]);
 
   return (

src/components/MediaPlayer/controls/Controls.tsx

@@ -5,13 +5,6 @@ import { ProgressBarProps } from './types';
 
 const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(value, max));
 
-/**
- * Optimized ProgressBar Component
- * Features:
- * - Better performance with refs to avoid unnecessary renders
- * - Smoother dragging with optimized pan responder
- * - Accurate progress tracking
- */
 const ProgressBarComponent: React.FC<ProgressBarProps> = ({
   currentPosition,
   duration,
@@ -27,27 +20,23 @@ const ProgressBarComponent: React.FC<ProgressBarProps> = ({
   const dragPercentageRef = useRef(0);
   const trackRef = useRef<View>(null);
 
-  // Calculate progress percentage
   const progressPercentage = useMemo(() => {
     if (!duration || duration === 0) return 0;
     return clamp(currentPosition / duration, 0, 1);
   }, [currentPosition, duration]);
 
-  // Calculate buffered percentage
   const bufferedPercentage = useMemo(() => {
     if (!duration || duration === 0) return 0;
     return clamp(bufferedPosition / duration, 0, 1);
   }, [bufferedPosition, duration]);
 
-  // Sync drag percentage with actual progress when not dragging
   useEffect(() => {
     if (!isDragging) {
       dragPercentageRef.current = progressPercentage;
       setDragPercentage(progressPercentage);
     }
   }, [isDragging, progressPercentage]);
 
-  // Update position from touch location
   const updateFromLocation = useCallback((pageX: number) => {
     if (!trackWidth || !duration || !trackRef.current) return;
 
@@ -65,15 +54,13 @@ const ProgressBarComponent: React.FC<ProgressBarProps> = ({
     });
   }, [duration, onTimePreview, trackWidth]);
 
-  // Commit seek when drag ends
   const commitSeek = useCallback(() => {
     if (!duration) return;
 
     const newTime = dragPercentageRef.current * duration;
     onSeek(newTime);
   }, [duration, onSeek]);
 
-  // Pan responder for touch handling
   const panResponder = useMemo(() => PanResponder.create({
     onStartShouldSetPanResponder: () => true,
     onMoveShouldSetPanResponder: () => true,
@@ -97,15 +84,12 @@ const ProgressBarComponent: React.FC<ProgressBarProps> = ({
     },
   }), [commitSeek, onSeekingStateChange, updateFromLocation]);
 
-  // Track width measurement
   const handleLayout = useCallback((event: LayoutChangeEvent) => {
     setTrackWidth(event.nativeEvent.layout.width);
   }, []);
 
-  // Display percentage (use drag when dragging, otherwise use actual progress)
   const displayPercentage = isDragging ? dragPercentage : progressPercentage;
 
-  // Memoized styles for performance
   const bufferedStyle = useMemo(() => ({
     width: bufferedPercentage * trackWidth,
   }), [bufferedPercentage, trackWidth]);

src/components/MediaPlayer/controls/ProgressBar.tsx

@@ -1,10 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-const AUTO_HIDE_DELAY = 3000; // 3 seconds
+const AUTO_HIDE_DELAY = 3000;
 
-/**
- * Custom hook for managing controls visibility with auto-hide
- */
 export const useControlsVisibility = (isPlaying: boolean, isSeeking?: boolean) => {
   const [controlsVisible, setControlsVisible] = useState(true);
   const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

src/components/MediaPlayer/hooks/useControlsVisibility.ts

@@ -1,26 +1,18 @@
 import { useCallback, useEffect, useState } from 'react';
 import Orientation from 'react-native-orientation-locker';
-import { StatusBar } from 'react-native';
+import { StatusBar, InteractionManager } from 'react-native';
 
-/**
- * Custom hook for managing fullscreen mode
- * @param onFullscreenChange - Callback when fullscreen state changes
- * @param initialFullscreen - Initial fullscreen state (default: false)
- */
 export const useFullscreen = (
   onFullscreenChange?: (isFullscreen: boolean) => void,
   initialFullscreen: boolean = false
 ) => {
   const [isFullscreen, setIsFullscreen] = useState(initialFullscreen);
 
-  // Apply initial fullscreen state on mount
   useEffect(() => {
     if (initialFullscreen) {
       Orientation.lockToLandscape();
       StatusBar.setHidden(true, 'fade');
-      console.log('[useFullscreen] Initial fullscreen enabled');
     }
-    // Only run on mount
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -31,22 +23,27 @@ export const useFullscreen = (
       Orientation.lockToLandscape();
       StatusBar.setHidden(true, 'fade');
     } else {
-      Orientation.lockToPortrait();
       StatusBar.setHidden(false, 'fade');
+      InteractionManager.runAfterInteractions(() => {
+        Orientation.lockToPortrait();
+        setTimeout(() => {
+          Orientation.unlockAllOrientations();
+        }, 300);
+      });
     }
 
     setIsFullscreen(newState);
     onFullscreenChange?.(newState);
-    
-    console.log('[useFullscreen] Fullscreen:', newState);
   }, [isFullscreen, onFullscreenChange]);
 
-  // Cleanup on unmount
   useEffect(() => {
     return () => {
       if (isFullscreen) {
-        Orientation.lockToPortrait();
         StatusBar.setHidden(false, 'fade');
+        Orientation.lockToPortrait();
+        setTimeout(() => {
+          Orientation.unlockAllOrientations();
+        }, 300);
       }
     };
   }, [isFullscreen]);