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

UI changes

Browse source
This commit is contained in:
tapframe 2025-10-05 20:28:04 +05:30
parent 90ab5e6577
commit ce292ce9d3
1 changed files with 56 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -169,7 +169,7 @@ const CompactCommentCard: React.FC<{
<View style={[styles.commentContainer, shouldBlurContent ? styles.blurredContent : undefined]}> <View style={[styles.commentContainer, shouldBlurContent ? styles.blurredContent : undefined]}>
<Text <Text
style={[styles.compactComment, { color: theme.colors.highEmphasis }]} style={[styles.compactComment, { color: theme.colors.highEmphasis }]}
numberOfLines={shouldBlurContent ? 3 : undefined} numberOfLines={3}
ellipsizeMode="tail" ellipsizeMode="tail"
> >
{shouldBlurContent ? '⚠️ This comment contains spoilers. Tap to reveal.' : truncatedComment} {shouldBlurContent ? '⚠️ This comment contains spoilers. Tap to reveal.' : truncatedComment}
@ -286,7 +286,7 @@ const ExpandedCommentBottomSheet: React.FC<{
} }
}} }}
index={-1} index={-1}
snapPoints={[200, '50%', '90%']} snapPoints={[200, '50%', '70%']}
enableDynamicSizing={false} enableDynamicSizing={false}
keyboardBehavior="interactive" keyboardBehavior="interactive"
android_keyboardInputMode="adjustResize" android_keyboardInputMode="adjustResize"
@ -316,7 +316,11 @@ const ExpandedCommentBottomSheet: React.FC<{
{/* User Info */} {/* User Info */}
<View style={styles.modalHeader}> <View style={styles.modalHeader}>
<View style={styles.userInfo}> <View style={styles.userInfo}>
<Text style={[styles.modalUsername, { color: theme.colors.highEmphasis }]}> <Text
style={[styles.modalUsername, { color: theme.colors.highEmphasis }]}
numberOfLines={1}
ellipsizeMode="tail"
>
{username} {username}
</Text> </Text>
{user.vip && ( {user.vip && (
@ -355,16 +359,17 @@ const ExpandedCommentBottomSheet: React.FC<{
{/* Full Comment */} {/* Full Comment */}
{shouldBlurModalContent ? ( {shouldBlurModalContent ? (
<View style={styles.spoilerContainer}> <View style={styles.spoilerContainer}>
<Text style={[styles.spoilerWarning, { color: theme.colors.error }]}> <View style={[styles.spoilerIcon, { backgroundColor: theme.colors.card }]}>
⚠️ This comment contains spoilers <MaterialIcons name="visibility-off" size={20} color={theme.colors.mediumEmphasis} />
</Text> </View>
<Text style={[styles.spoilerTitle, { color: theme.colors.highEmphasis }]}>Contains spoilers</Text>
<TouchableOpacity <TouchableOpacity
style={[styles.revealButton, { backgroundColor: theme.colors.primary }]} style={[styles.revealButton, { borderColor: theme.colors.primary }]}
onPress={onSpoilerPress} onPress={onSpoilerPress}
activeOpacity={0.9}
> >
<Text style={[styles.revealButtonText, { color: theme.colors.white }]}> <MaterialIcons name="visibility" size={18} color={theme.colors.primary} />
Reveal Spoilers <Text style={[styles.revealButtonText, { color: theme.colors.primary }]}>Reveal</Text>
</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
) : ( ) : (
@ -660,7 +665,7 @@ export const CommentBottomSheet: React.FC<{
} }
}} }}
index={sheetIndex} index={sheetIndex}
snapPoints={[200, '50%', '90%']} snapPoints={[200, '50%', '70%']}
enableDynamicSizing={false} enableDynamicSizing={false}
keyboardBehavior="interactive" keyboardBehavior="interactive"
android_keyboardInputMode="adjustResize" android_keyboardInputMode="adjustResize"
@ -685,7 +690,11 @@ export const CommentBottomSheet: React.FC<{
{/* User Info */} {/* User Info */}
<View style={styles.modalHeader}> <View style={styles.modalHeader}>
<View style={styles.userInfo}> <View style={styles.userInfo}>
<Text style={[styles.modalUsername, { color: theme.colors.highEmphasis }]}> <Text
style={[styles.modalUsername, { color: theme.colors.highEmphasis }]}
numberOfLines={1}
ellipsizeMode="tail"
>
{username} {username}
</Text> </Text>
{user.vip && ( {user.vip && (
@ -724,16 +733,17 @@ export const CommentBottomSheet: React.FC<{
{/* Full Comment */} {/* Full Comment */}
{shouldBlurModalContent ? ( {shouldBlurModalContent ? (
<View style={styles.spoilerContainer}> <View style={styles.spoilerContainer}>
<Text style={[styles.spoilerWarning, { color: theme.colors.error }]}> <View style={[styles.spoilerIcon, { backgroundColor: theme.colors.card }]}>
⚠️ This comment contains spoilers <MaterialIcons name="visibility-off" size={20} color={theme.colors.mediumEmphasis} />
</Text> </View>
<Text style={[styles.spoilerTitle, { color: theme.colors.highEmphasis }]}>Contains spoilers</Text>
<TouchableOpacity <TouchableOpacity
style={[styles.revealButton, { backgroundColor: theme.colors.primary }]} style={[styles.revealButton, { borderColor: theme.colors.primary }]}
onPress={onSpoilerPress} onPress={onSpoilerPress}
activeOpacity={0.9}
> >
<Text style={[styles.revealButtonText, { color: theme.colors.white }]}> <MaterialIcons name="visibility" size={18} color={theme.colors.primary} />
Reveal Spoilers <Text style={[styles.revealButtonText, { color: theme.colors.primary }]}>Reveal</Text>
</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
) : ( ) : (
@ -791,8 +801,9 @@ const styles = StyleSheet.create({
}, },
compactCard: { compactCard: {
width: 280, width: 280,
height: 160, height: 170,
padding: 12, padding: 12,
paddingBottom: 16,
marginRight: 12, marginRight: 12,
borderRadius: 12, borderRadius: 12,
borderWidth: 1, borderWidth: 1,
@ -854,7 +865,7 @@ const styles = StyleSheet.create({
}, },
compactComment: { compactComment: {
fontSize: 14, fontSize: 14,
lineHeight: 20, lineHeight: 18,
}, },
blurredContent: { blurredContent: {
opacity: 0.3, opacity: 0.3,
@ -866,6 +877,8 @@ const styles = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
justifyContent: 'space-between', justifyContent: 'space-between',
marginTop: 'auto',
paddingTop: 6,
}, },
compactBadges: { compactBadges: {
flexDirection: 'row', flexDirection: 'row',
@ -1066,7 +1079,8 @@ const styles = StyleSheet.create({
modalUsername: { modalUsername: {
fontSize: 18, fontSize: 18,
fontWeight: '600', fontWeight: '600',
flex: 1, flexShrink: 1,
marginRight: 8,
}, },
modalDate: { modalDate: {
fontSize: 12, fontSize: 12,
@ -1107,21 +1121,33 @@ const styles = StyleSheet.create({
}, },
spoilerContainer: { spoilerContainer: {
alignItems: 'center', alignItems: 'center',
paddingVertical: 20, paddingVertical: 16,
}, },
spoilerWarning: { spoilerIcon: {
fontSize: 16, width: 40,
height: 40,
borderRadius: 20,
alignItems: 'center',
justifyContent: 'center',
marginBottom: 10,
},
spoilerTitle: {
fontSize: 14,
fontWeight: '600', fontWeight: '600',
textAlign: 'center', textAlign: 'center',
marginBottom: 16, marginBottom: 12,
}, },
revealButton: { revealButton: {
paddingHorizontal: 20, flexDirection: 'row',
paddingVertical: 12, alignItems: 'center',
borderRadius: 8, gap: 8,
paddingHorizontal: 14,
paddingVertical: 8,
borderRadius: 999,
borderWidth: 1,
}, },
revealButtonText: { revealButtonText: {
fontSize: 16, fontSize: 14,
fontWeight: '600', fontWeight: '600',
}, },
modalMeta: { modalMeta: {