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,