Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-04-27 03:22:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Enhance UI consistency in AudioTrackModal, SourcesModal, and SubtitleModals by updating border radii, padding, and background colors for improved aesthetics and user experience.

Browse source
This commit is contained in:
tapframe 2025-07-08 14:57:07 +05:30
parent e85a3c31d4
commit e714637da2
3 changed files with 42 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/player/modals/AudioTrackModal.tsx
View file

@ -73,6 +73,8 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
shadowOffset: { width: -5, height: 0 }, shadowOffset: { width: -5, height: 0 },
shadowOpacity: 0.3, shadowOpacity: 0.3,
shadowRadius: 10, shadowRadius: 10,
borderTopLeftRadius: 20,
borderBottomLeftRadius: 20,
}} }}
> >
{/* Header */} {/* Header */}
@ -81,10 +83,10 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
paddingHorizontal: 20, paddingHorizontal: 20,
paddingTop: 50, paddingTop: 60,
paddingBottom: 20, paddingBottom: 20,
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: 'rgba(255, 255, 255, 0.1)', borderBottomColor: 'rgba(255, 255, 255, 0.08)',
}}> }}>
<Text style={{ <Text style={{
color: '#FFFFFF', color: '#FFFFFF',
@ -135,7 +137,7 @@ export const AudioTrackModal: React.FC<AudioTrackModalProps> = ({
key={track.id} key={track.id}
style={{ style={{
backgroundColor: isSelected ? 'rgba(34, 197, 94, 0.15)' : 'rgba(255, 255, 255, 0.05)', backgroundColor: isSelected ? 'rgba(34, 197, 94, 0.15)' : 'rgba(255, 255, 255, 0.05)',
borderRadius: 12, borderRadius: 16,
padding: 16, padding: 16,
borderWidth: 1, borderWidth: 1,
borderColor: isSelected ? 'rgba(34, 197, 94, 0.3)' : 'rgba(255, 255, 255, 0.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 && ( {vlcAudioTracks.length === 0 && (
<View style={{ <View style={{
backgroundColor: 'rgba(255, 255, 255, 0.05)', backgroundColor: 'rgba(255, 255, 255, 0.05)',
borderRadius: 12, borderRadius: 16,
padding: 20, padding: 20,
alignItems: 'center', alignItems: 'center',
}}> }}>

12
src/components/player/modals/SourcesModal.tsx
View file

@ -136,6 +136,8 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
shadowOffset: { width: -5, height: 0 }, shadowOffset: { width: -5, height: 0 },
shadowOpacity: 0.3, shadowOpacity: 0.3,
shadowRadius: 10, shadowRadius: 10,
borderTopLeftRadius: 20,
borderBottomLeftRadius: 20,
}} }}
> >
{/* Header */} {/* Header */}
@ -144,10 +146,10 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
paddingHorizontal: 20, paddingHorizontal: 20,
paddingTop: 50, paddingTop: 60,
paddingBottom: 20, paddingBottom: 20,
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: 'rgba(255, 255, 255, 0.1)', borderBottomColor: 'rgba(255, 255, 255, 0.08)',
}}> }}>
<Text style={{ <Text style={{
color: '#FFFFFF', color: '#FFFFFF',
@ -180,7 +182,7 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
{isChangingSource && ( {isChangingSource && (
<View style={{ <View style={{
backgroundColor: 'rgba(34, 197, 94, 0.1)', backgroundColor: 'rgba(34, 197, 94, 0.1)',
borderRadius: 12, borderRadius: 16,
padding: 16, padding: 16,
marginBottom: 20, marginBottom: 20,
flexDirection: 'row', flexDirection: 'row',
@ -222,7 +224,7 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
key={`${providerId}-${index}`} key={`${providerId}-${index}`}
style={{ style={{
backgroundColor: isSelected ? 'rgba(59, 130, 246, 0.15)' : 'rgba(255, 255, 255, 0.05)', backgroundColor: isSelected ? 'rgba(59, 130, 246, 0.15)' : 'rgba(255, 255, 255, 0.05)',
borderRadius: 12, borderRadius: 16,
padding: 16, padding: 16,
borderWidth: 1, borderWidth: 1,
borderColor: isSelected ? 'rgba(59, 130, 246, 0.3)' : 'rgba(255, 255, 255, 0.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={{ <View style={{
backgroundColor: 'rgba(255, 255, 255, 0.05)', backgroundColor: 'rgba(255, 255, 255, 0.05)',
borderRadius: 12, borderRadius: 16,
padding: 20, padding: 20,
alignItems: 'center', alignItems: 'center',
}}> }}>

47
src/components/player/modals/SubtitleModals.tsx
View file

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