diff --git a/src/components/metadata/HeroSection.tsx b/src/components/metadata/HeroSection.tsx
index a6195380..45a84b69 100644
--- a/src/components/metadata/HeroSection.tsx
+++ b/src/components/metadata/HeroSection.tsx
@@ -335,31 +335,192 @@ const ActionButtons = memo(({
return isWatched ? 'Play' : playButtonText;
}, [isWatched, playButtonText, type, watchProgress, groupedEpisodes]);
+ // Determine if we should show buttons in a single row (Play, Save, and one other button = 3 total)
+ const hasAiChat = aiChatEnabled;
+ const hasTraktCollection = isAuthenticated;
+ const hasRatings = type === 'series';
+
+ // Count additional buttons (excluding Play and Save)
+ const additionalButtonCount = (hasAiChat ? 1 : 0) + (hasTraktCollection ? 1 : 0) + (hasRatings ? 1 : 0);
+
+ // Show single row when there's exactly 1 additional button (3 total buttons)
+ const shouldShowSingleRow = additionalButtonCount === 1;
+
return (
- {/* Play Button Row - Only Play button */}
-
-
- {
- if (isWatched) {
- return type === 'movie' ? 'replay' : 'play-arrow';
- }
- return playButtonText === 'Resume' ? 'play-circle-outline' : 'play-arrow';
- })()}
- size={isTablet ? 28 : 24}
- color={isWatched && type === 'movie' ? "#fff" : "#000"}
- />
- {finalPlayButtonText}
-
-
+ {shouldShowSingleRow ? (
+ /* Single Row Layout - Play, Save, and one other button (3 total) */
+
+
+ {
+ if (isWatched) {
+ return type === 'movie' ? 'replay' : 'play-arrow';
+ }
+ return playButtonText === 'Resume' ? 'play-circle-outline' : 'play-arrow';
+ })()}
+ size={isTablet ? 28 : 24}
+ color={isWatched && type === 'movie' ? "#fff" : "#000"}
+ />
+ {finalPlayButtonText}
+
- {/* Secondary Action Row - All other buttons */}
-
+
+ {Platform.OS === 'ios' ? (
+ GlassViewComp && liquidGlassAvailable ? (
+
+ ) : (
+
+ )
+ ) : (
+
+ )}
+
+
+ {inLibrary ? 'Saved' : 'Save'}
+
+
+
+ {/* Third Button - AI Chat, Trakt Collection, or Ratings */}
+ {hasAiChat && (
+ {
+ // Extract episode info if it's a series
+ let episodeData = null;
+ if (type === 'series' && watchProgress?.episodeId) {
+ const parts = watchProgress.episodeId.split(':');
+ if (parts.length >= 3) {
+ episodeData = {
+ seasonNumber: parseInt(parts[1], 10),
+ episodeNumber: parseInt(parts[2], 10)
+ };
+ }
+ }
+
+ navigation.navigate('AIChat', {
+ contentId: id,
+ contentType: type,
+ episodeId: episodeData ? watchProgress.episodeId : undefined,
+ seasonNumber: episodeData?.seasonNumber,
+ episodeNumber: episodeData?.episodeNumber,
+ title: metadata?.name || metadata?.title || 'Unknown'
+ });
+ }}
+ activeOpacity={0.85}
+ >
+ {Platform.OS === 'ios' ? (
+ GlassViewComp && liquidGlassAvailable ? (
+
+ ) : (
+
+ )
+ ) : (
+
+ )}
+
+
+ )}
+
+ {hasTraktCollection && !hasAiChat && (
+
+ {Platform.OS === 'ios' ? (
+ GlassViewComp && liquidGlassAvailable ? (
+
+ ) : (
+
+ )
+ ) : (
+
+ )}
+
+
+ )}
+
+ {hasRatings && !hasAiChat && !hasTraktCollection && (
+
+ {Platform.OS === 'ios' ? (
+ GlassViewComp && liquidGlassAvailable ? (
+
+ ) : (
+
+ )
+ ) : (
+
+ )}
+
+
+ )}
+
+ ) : (
+ <>
+ {/* Play Button Row - Only Play button */}
+
+
+ {
+ if (isWatched) {
+ return type === 'movie' ? 'replay' : 'play-arrow';
+ }
+ return playButtonText === 'Resume' ? 'play-circle-outline' : 'play-arrow';
+ })()}
+ size={isTablet ? 28 : 24}
+ color={isWatched && type === 'movie' ? "#fff" : "#000"}
+ />
+ {finalPlayButtonText}
+
+
+
+ {/* Secondary Action Row - All other buttons */}
+
{/* Save Button */}
)}
+ >
+ )}
);
});
@@ -1679,7 +1842,7 @@ const HeroSection: React.FC = memo(({
// When unmuting, hide action buttons, genre, title card, and watch progress
actionButtonsOpacity.value = withTiming(0, { duration: 300 });
genreOpacity.value = withTiming(0, { duration: 300 });
- titleCardTranslateY.value = withTiming(60, { duration: 300 });
+ titleCardTranslateY.value = withTiming(100, { duration: 300 }); // Increased from 60 to 120 for further down movement
watchProgressOpacity.value = withTiming(0, { duration: 300 });
} else {
// When muting, show action buttons, genre, title card, and watch progress
@@ -1966,6 +2129,29 @@ const styles = StyleSheet.create({
maxWidth: isTablet ? 600 : '100%',
alignSelf: 'center',
},
+ singleRowLayout: {
+ flexDirection: 'row',
+ gap: 8,
+ alignItems: 'center',
+ justifyContent: 'center',
+ width: '100%',
+ maxWidth: isTablet ? 600 : '100%',
+ alignSelf: 'center',
+ },
+ singleRowPlayButton: {
+ flex: 2,
+ maxWidth: isTablet ? 200 : 150,
+ },
+ singleRowSaveButton: {
+ flex: 2,
+ maxWidth: isTablet ? 200 : 150,
+ },
+ singleRowIconButton: {
+ width: isTablet ? 50 : 44,
+ height: isTablet ? 50 : 44,
+ borderRadius: isTablet ? 25 : 22,
+ flex: 0,
+ },
primaryActionRow: {
flexDirection: 'row',
gap: 12,