From e714637da256f47d9b9c4f75a8c4e0c772d2d13e Mon Sep 17 00:00:00 2001
From: tapframe <nayifveliya99@gmail.com>
Date: Tue, 8 Jul 2025 14:57:07 +0530
Subject: [PATCH] Enhance UI consistency in AudioTrackModal, SourcesModal, and
 SubtitleModals by updating border radii, padding, and background colors for
 improved aesthetics and user experience.

---
 .../player/modals/AudioTrackModal.tsx         | 10 ++--
 src/components/player/modals/SourcesModal.tsx | 12 +++--
 .../player/modals/SubtitleModals.tsx          | 47 ++++++++++++-------
 3 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/src/components/player/modals/AudioTrackModal.tsx b/src/components/player/modals/AudioTrackModal.tsx
index cfc50d6c..4a382813 100644
--- a/src/components/player/modals/AudioTrackModal.tsx
+++ b/src/components/player/modals/AudioTrackModal.tsx
@@ -73,6 +73,8 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
           shadowOffset: { width: -5, height: 0 },
           shadowOpacity: 0.3,
           shadowRadius: 10,
+          borderTopLeftRadius: 20,
+          borderBottomLeftRadius: 20,
         }}
       >
         {/* Header */}
@@ -81,10 +83,10 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
           alignItems: 'center',
           justifyContent: 'space-between',
           paddingHorizontal: 20,
-          paddingTop: 50,
+          paddingTop: 60,
           paddingBottom: 20,
           borderBottomWidth: 1,
-          borderBottomColor: 'rgba(255, 255, 255, 0.1)',
+          borderBottomColor: 'rgba(255, 255, 255, 0.08)',
         }}>
           <Text style={{
             color: '#FFFFFF',
@@ -135,7 +137,7 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
                     key={track.id}
                     style={{
                       backgroundColor: isSelected ? 'rgba(34, 197, 94, 0.15)' : 'rgba(255, 255, 255, 0.05)',
-                      borderRadius: 12,
+                      borderRadius: 16,
                       padding: 16,
                       borderWidth: 1,
                       borderColor: isSelected ? 'rgba(34, 197, 94, 0.3)' : 'rgba(255, 255, 255, 0.1)',
@@ -176,7 +178,7 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
             {vlcAudioTracks.length === 0 && (
               <View style={{
                 backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                borderRadius: 12,
+                borderRadius: 16,
                 padding: 20,
                 alignItems: 'center',
               }}>
diff --git a/src/components/player/modals/SourcesModal.tsx b/src/components/player/modals/SourcesModal.tsx
index f8aa33a0..ada3bf39 100644
--- a/src/components/player/modals/SourcesModal.tsx
+++ b/src/components/player/modals/SourcesModal.tsx
@@ -136,6 +136,8 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
           shadowOffset: { width: -5, height: 0 },
           shadowOpacity: 0.3,
           shadowRadius: 10,
+          borderTopLeftRadius: 20,
+          borderBottomLeftRadius: 20,
         }}
       >
         {/* Header */}
@@ -144,10 +146,10 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
           alignItems: 'center',
           justifyContent: 'space-between',
           paddingHorizontal: 20,
-          paddingTop: 50,
+          paddingTop: 60,
           paddingBottom: 20,
           borderBottomWidth: 1,
-          borderBottomColor: 'rgba(255, 255, 255, 0.1)',
+          borderBottomColor: 'rgba(255, 255, 255, 0.08)',
         }}>
           <Text style={{
             color: '#FFFFFF',
@@ -180,7 +182,7 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
           {isChangingSource && (
             <View style={{
               backgroundColor: 'rgba(34, 197, 94, 0.1)',
-              borderRadius: 12,
+              borderRadius: 16,
               padding: 16,
               marginBottom: 20,
               flexDirection: 'row',
@@ -222,7 +224,7 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
                         key={`${providerId}-${index}`}
                         style={{
                           backgroundColor: isSelected ? 'rgba(59, 130, 246, 0.15)' : 'rgba(255, 255, 255, 0.05)',
-                          borderRadius: 12,
+                          borderRadius: 16,
                           padding: 16,
                           borderWidth: 1,
                           borderColor: isSelected ? 'rgba(59, 130, 246, 0.3)' : 'rgba(255, 255, 255, 0.1)',
@@ -303,7 +305,7 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
           ) : (
             <View style={{
               backgroundColor: 'rgba(255, 255, 255, 0.05)',
-              borderRadius: 12,
+              borderRadius: 16,
               padding: 20,
               alignItems: 'center',
             }}>
diff --git a/src/components/player/modals/SubtitleModals.tsx b/src/components/player/modals/SubtitleModals.tsx
index ff3f0e8b..c0bb047a 100644
--- a/src/components/player/modals/SubtitleModals.tsx
+++ b/src/components/player/modals/SubtitleModals.tsx
@@ -6,10 +6,6 @@ import Animated, {
   FadeOut,
   SlideInRight,
   SlideOutRight,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-  runOnJS,
 } from 'react-native-reanimated';
 import { styles } from '../utils/playerStyles';
 import { WyzieSubtitle, SubtitleCue } from '../utils/playerTypes';
@@ -57,18 +53,29 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
   increaseSubtitleSize,
   decreaseSubtitleSize,
 }) => {
+  // Track which specific online subtitle is currently loaded
+  const [selectedOnlineSubtitleId, setSelectedOnlineSubtitleId] = React.useState<string | null>(null);
+
   React.useEffect(() => {
     if (showSubtitleModal && !isLoadingSubtitleList && availableSubtitles.length === 0) {
       fetchAvailableSubtitles();
     }
   }, [showSubtitleModal]);
 
+  // Reset selected online subtitle when switching to built-in tracks
+  React.useEffect(() => {
+    if (!useCustomSubtitles) {
+      setSelectedOnlineSubtitleId(null);
+    }
+  }, [useCustomSubtitles]);
+
   const handleClose = () => {
     setShowSubtitleModal(false);
   };
 
-  const handleLanguageClose = () => {
-    setShowSubtitleLanguageModal(false);
+  const handleLoadWyzieSubtitle = (subtitle: WyzieSubtitle) => {
+    setSelectedOnlineSubtitleId(subtitle.id);
+    loadWyzieSubtitle(subtitle);
   };
 
   // Main subtitle menu
@@ -115,6 +122,8 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
             shadowOffset: { width: -5, height: 0 },
             shadowOpacity: 0.3,
             shadowRadius: 10,
+            borderTopLeftRadius: 20,
+            borderBottomLeftRadius: 20,
           }}
         >
           {/* Header */}
@@ -123,10 +132,10 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
             alignItems: 'center',
             justifyContent: 'space-between',
             paddingHorizontal: 20,
-            paddingTop: 50,
+            paddingTop: 60,
             paddingBottom: 20,
             borderBottomWidth: 1,
-            borderBottomColor: 'rgba(255, 255, 255, 0.1)',
+            borderBottomColor: 'rgba(255, 255, 255, 0.08)',
           }}>
             <Text style={{
               color: '#FFFFFF',
@@ -174,7 +183,7 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                 alignItems: 'center',
                 justifyContent: 'space-between',
                 backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                borderRadius: 12,
+                borderRadius: 16,
                 padding: 16,
               }}>
                 <TouchableOpacity
@@ -231,19 +240,20 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                 
                 <View style={{ gap: 8 }}>
                   {vlcTextTracks.map((track) => {
-                    const isSelected = selectedTextTrack === track.id;
+                    const isSelected = selectedTextTrack === track.id && !useCustomSubtitles;
                     return (
                       <TouchableOpacity
                         key={track.id}
                         style={{
                           backgroundColor: isSelected ? 'rgba(59, 130, 246, 0.15)' : 'rgba(255, 255, 255, 0.05)',
-                          borderRadius: 12,
+                          borderRadius: 16,
                           padding: 16,
                           borderWidth: 1,
                           borderColor: isSelected ? 'rgba(59, 130, 246, 0.3)' : 'rgba(255, 255, 255, 0.1)',
                         }}
                         onPress={() => {
                           selectTextTrack(track.id);
+                          setSelectedOnlineSubtitleId(null);
                         }}
                         activeOpacity={0.7}
                       >
@@ -287,7 +297,7 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                 <TouchableOpacity
                   style={{
                     backgroundColor: 'rgba(34, 197, 94, 0.15)',
-                    borderRadius: 8,
+                    borderRadius: 12,
                     paddingHorizontal: 12,
                     paddingVertical: 6,
                     flexDirection: 'row',
@@ -315,19 +325,19 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
               {availableSubtitles.length > 0 ? (
                 <View style={{ gap: 8 }}>
                   {availableSubtitles.map((sub) => {
-                    const isSelected = useCustomSubtitles && customSubtitles.length > 0;
+                    const isSelected = useCustomSubtitles && selectedOnlineSubtitleId === sub.id;
                     return (
                       <TouchableOpacity
                         key={sub.id}
                         style={{
                           backgroundColor: isSelected ? 'rgba(34, 197, 94, 0.15)' : 'rgba(255, 255, 255, 0.05)',
-                          borderRadius: 12,
+                          borderRadius: 16,
                           padding: 16,
                           borderWidth: 1,
                           borderColor: isSelected ? 'rgba(34, 197, 94, 0.3)' : 'rgba(255, 255, 255, 0.1)',
                         }}
                         onPress={() => {
-                          loadWyzieSubtitle(sub);
+                          handleLoadWyzieSubtitle(sub);
                         }}
                         activeOpacity={0.7}
                         disabled={isLoadingSubtitles}
@@ -365,7 +375,7 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                 <TouchableOpacity
                   style={{
                     backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                    borderRadius: 12,
+                    borderRadius: 16,
                     padding: 20,
                     alignItems: 'center',
                     borderWidth: 1,
@@ -388,7 +398,7 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
               ) : (
                 <View style={{
                   backgroundColor: 'rgba(255, 255, 255, 0.05)',
-                  borderRadius: 12,
+                  borderRadius: 16,
                   padding: 20,
                   alignItems: 'center',
                 }}>
@@ -422,7 +432,7 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                   backgroundColor: selectedTextTrack === -1 && !useCustomSubtitles 
                     ? 'rgba(239, 68, 68, 0.15)' 
                     : 'rgba(255, 255, 255, 0.05)',
-                  borderRadius: 12,
+                  borderRadius: 16,
                   padding: 16,
                   borderWidth: 1,
                   borderColor: selectedTextTrack === -1 && !useCustomSubtitles 
@@ -431,6 +441,7 @@ export const SubtitleModals: React.FC<SubtitleModalsProps> = ({
                 }}
                 onPress={() => {
                   selectTextTrack(-1);
+                  setSelectedOnlineSubtitleId(null);
                 }}
                 activeOpacity={0.7}
               >