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

Refactor play button styles in HeroSection to differentiate between watched movies and other content. Remove unused progress percentage badge styles for cleaner code.

Browse source
This commit is contained in:
tapframe 2025-07-07 18:17:18 +05:30
parent 90a09ac5a2
commit 93e80d9720
1 changed files with 9 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/components/metadata/HeroSection.tsx
View file

@ -129,18 +129,22 @@ const ActionButtons = React.memo(({
// Determine play button style and text based on watched status // Determine play button style and text based on watched status
const playButtonStyle = useMemo(() => { const playButtonStyle = useMemo(() => {
if (isWatched) { if (isWatched && type === 'movie') {
// Only movies get the dark watched style for "Watch Again"
return [styles.actionButton, styles.playButton, styles.watchedPlayButton]; return [styles.actionButton, styles.playButton, styles.watchedPlayButton];
} }
// All other buttons (Resume, Play SxxEyy, regular Play) get white background
return [styles.actionButton, styles.playButton]; return [styles.actionButton, styles.playButton];
}, [isWatched]); }, [isWatched, type]);
const playButtonTextStyle = useMemo(() => { const playButtonTextStyle = useMemo(() => {
if (isWatched) { if (isWatched && type === 'movie') {
// Only movies get white text for "Watch Again"
return [styles.playButtonText, styles.watchedPlayButtonText]; return [styles.playButtonText, styles.watchedPlayButtonText];
} }
// All other buttons get black text
return styles.playButtonText; return styles.playButtonText;
}, [isWatched]); }, [isWatched, type]);
const finalPlayButtonText = useMemo(() => { const finalPlayButtonText = useMemo(() => {
if (!isWatched) { if (!isWatched) {
@ -207,7 +211,7 @@ const ActionButtons = React.memo(({
return playButtonText === 'Resume' ? 'play-circle-outline' : 'play-arrow'; return playButtonText === 'Resume' ? 'play-circle-outline' : 'play-arrow';
})()} })()}
size={24} size={24}
color={isWatched ? "#fff" : "#000"} color={isWatched && type === 'movie' ? "#fff" : "#000"}
/> />
<Text style={playButtonTextStyle}>{finalPlayButtonText}</Text> <Text style={playButtonTextStyle}>{finalPlayButtonText}</Text>
</TouchableOpacity> </TouchableOpacity>
@ -541,14 +545,6 @@ const WatchProgressDisplay = React.memo(({
{progressData.displayText} {progressData.displayText}
</Text> </Text>
{/* Progress percentage badge */}
{!isCompleted && (
<View style={styles.percentageBadge}>
<Text style={styles.percentageText}>
{Math.round(progressData.progressPercent)}%
</Text>
</View>
)}
</View> </View>
<Text style={[styles.watchProgressSubText, { <Text style={[styles.watchProgressSubText, {
@ -1223,18 +1219,6 @@ const styles = StyleSheet.create({
fontWeight: '600', fontWeight: '600',
textAlign: 'center', textAlign: 'center',
}, },
percentageBadge: {
backgroundColor: 'rgba(255,255,255,0.2)',
borderRadius: 8,
paddingHorizontal: 6,
paddingVertical: 2,
marginLeft: 8,
},
percentageText: {
fontSize: 10,
fontWeight: '600',
color: '#fff',
},
watchProgressSubText: { watchProgressSubText: {
fontSize: 9, fontSize: 9,
textAlign: 'center', textAlign: 'center',