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

fixed scrollview comment modal

Browse source
This commit is contained in:
tapframe 2025-10-05 20:23:21 +05:30
parent b15b569fce
commit 90ab5e6577
1 changed files with 38 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
src/components/metadata/CommentsSection.tsx
View file

@ -17,7 +17,7 @@ import { TraktContentComment } from '../../services/traktService';
import { logger } from '../../utils/logger'; import { logger } from '../../utils/logger';
import { useTraktComments } from '../../hooks/useTraktComments'; import { useTraktComments } from '../../hooks/useTraktComments';
import { useSettings } from '../../hooks/useSettings'; import { useSettings } from '../../hooks/useSettings';
import BottomSheet, { BottomSheetView } from '@gorhom/bottom-sheet'; import BottomSheet, { BottomSheetView, BottomSheetScrollView } from '@gorhom/bottom-sheet';
const { width } = Dimensions.get('window'); const { width } = Dimensions.get('window');
@ -287,6 +287,9 @@ const ExpandedCommentBottomSheet: React.FC<{
}} }}
index={-1} index={-1}
snapPoints={[200, '50%', '90%']} snapPoints={[200, '50%', '90%']}
enableDynamicSizing={false}
keyboardBehavior="interactive"
android_keyboardInputMode="adjustResize"
enablePanDownToClose={true} enablePanDownToClose={true}
animateOnMount={true} animateOnMount={true}
backgroundStyle={{ backgroundStyle={{
@ -298,9 +301,13 @@ const ExpandedCommentBottomSheet: React.FC<{
backgroundColor: theme.colors.mediumEmphasis || '#CCCCCC', backgroundColor: theme.colors.mediumEmphasis || '#CCCCCC',
}} }}
> >
<BottomSheetView style={[styles.bottomSheetContent, { <BottomSheetScrollView
backgroundColor: theme.colors.darkGray || '#0A0C0C', style={[styles.bottomSheetContent, { backgroundColor: theme.colors.darkGray || '#0A0C0C' }]}
}]}> contentContainerStyle={styles.modalCommentContent}
showsVerticalScrollIndicator
nestedScrollEnabled
keyboardShouldPersistTaps="handled"
>
{/* Close Button */} {/* Close Button */}
<TouchableOpacity style={styles.closeButton} onPress={onClose}> <TouchableOpacity style={styles.closeButton} onPress={onClose}>
<MaterialIcons name="close" size={24} color={theme.colors.highEmphasis} /> <MaterialIcons name="close" size={24} color={theme.colors.highEmphasis} />
@ -361,15 +368,9 @@ const ExpandedCommentBottomSheet: React.FC<{
</TouchableOpacity> </TouchableOpacity>
</View> </View>
) : ( ) : (
<ScrollView <Text style={[styles.modalComment, { color: theme.colors.highEmphasis }]}>
style={styles.modalCommentScroll} {comment.comment}
showsVerticalScrollIndicator={true} </Text>
nestedScrollEnabled
>
<Text style={[styles.modalComment, { color: theme.colors.highEmphasis }]}>
{comment.comment}
</Text>
</ScrollView>
)} )}
{/* Comment Meta */} {/* Comment Meta */}
@ -396,7 +397,7 @@ const ExpandedCommentBottomSheet: React.FC<{
)} )}
</View> </View>
</View> </View>
</BottomSheetView> </BottomSheetScrollView>
</BottomSheet> </BottomSheet>
); );
}; };
@ -659,7 +660,10 @@ export const CommentBottomSheet: React.FC<{
} }
}} }}
index={sheetIndex} index={sheetIndex}
snapPoints={[200, '50%']} snapPoints={[200, '50%', '90%']}
enableDynamicSizing={false}
keyboardBehavior="interactive"
android_keyboardInputMode="adjustResize"
enablePanDownToClose={true} enablePanDownToClose={true}
animateOnMount={true} animateOnMount={true}
backgroundStyle={{ backgroundStyle={{
@ -671,9 +675,13 @@ export const CommentBottomSheet: React.FC<{
backgroundColor: theme.colors.mediumEmphasis || '#CCCCCC', backgroundColor: theme.colors.mediumEmphasis || '#CCCCCC',
}} }}
> >
<BottomSheetView style={[styles.bottomSheetContent, { <BottomSheetScrollView
backgroundColor: theme.colors.darkGray || '#0A0C0C', style={[styles.bottomSheetContent, { backgroundColor: theme.colors.darkGray || '#0A0C0C' }]}
}]}> contentContainerStyle={styles.modalCommentContent}
showsVerticalScrollIndicator
nestedScrollEnabled
keyboardShouldPersistTaps="handled"
>
{/* User Info */} {/* User Info */}
<View style={styles.modalHeader}> <View style={styles.modalHeader}>
<View style={styles.userInfo}> <View style={styles.userInfo}>
@ -729,15 +737,9 @@ export const CommentBottomSheet: React.FC<{
</TouchableOpacity> </TouchableOpacity>
</View> </View>
) : ( ) : (
<ScrollView <Text style={[styles.modalComment, { color: theme.colors.highEmphasis }]}>
style={styles.modalCommentScroll} {comment.comment}
showsVerticalScrollIndicator={true} </Text>
nestedScrollEnabled
>
<Text style={[styles.modalComment, { color: theme.colors.highEmphasis }]}>
{comment.comment}
</Text>
</ScrollView>
)} )}
{/* Comment Meta */} {/* Comment Meta */}
@ -764,7 +766,7 @@ export const CommentBottomSheet: React.FC<{
)} )}
</View> </View>
</View> </View>
</BottomSheetView> </BottomSheetScrollView>
</BottomSheet> </BottomSheet>
); );
}; };
@ -1093,10 +1095,15 @@ const styles = StyleSheet.create({
marginBottom: 16, marginBottom: 16,
}, },
modalCommentScroll: { modalCommentScroll: {
// Constrain height so only text area scrolls, not the entire modal // Let the scroll view expand to use available space inside the sheet
maxHeight: 400, flex: 1,
marginBottom: 16, flexGrow: 1,
flexShrink: 1, flexShrink: 1,
minHeight: 0,
marginBottom: 16,
},
modalCommentContent: {
paddingBottom: 16,
}, },
spoilerContainer: { spoilerContainer: {
alignItems: 'center', alignItems: 'center',