mirror of
https://github.com/jakejarvis/sofa.git
synced 2026-08-29 01:35:39 -04:00
fix(native): rename DetailStackHeader to ModalStackHeader and remove hero fade-in animation and continue-watching overlay
- Rename `DetailStackHeader` → `ModalStackHeader` in `modal-stack-header.tsx` and update all import sites (`title/[id].tsx`, `person/[id].tsx`) - Remove `FadeIn` animation wrapper around `HeroBanner` in the explore screen - Remove the dark overlay (`rgba(0,0,0,0.4)`) from `ContinueWatchingCard` thumbnail
This commit is contained in:
@@ -3,7 +3,7 @@ import { IconDeviceTv, IconFlame, IconMovie } from "@tabler/icons-react-native";
|
|||||||
import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
|
import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
|
||||||
import { useCallback, useMemo } from "react";
|
import { useCallback, useMemo } from "react";
|
||||||
import { RefreshControl, ScrollView, View } from "react-native";
|
import { RefreshControl, ScrollView, View } from "react-native";
|
||||||
import Animated, { FadeIn, FadeInDown } from "react-native-reanimated";
|
import Animated, { FadeInDown } from "react-native-reanimated";
|
||||||
|
|
||||||
import { FilterableTitleRow } from "@/components/explore/filterable-title-row";
|
import { FilterableTitleRow } from "@/components/explore/filterable-title-row";
|
||||||
import { HeroBanner } from "@/components/explore/hero-banner";
|
import { HeroBanner } from "@/components/explore/hero-banner";
|
||||||
@@ -70,11 +70,7 @@ export default function ExploreScreen() {
|
|||||||
refreshControl={<RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} />}
|
refreshControl={<RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} />}
|
||||||
>
|
>
|
||||||
<View className="gap-8">
|
<View className="gap-8">
|
||||||
{heroItem && (
|
{heroItem && <HeroBanner item={heroItem} />}
|
||||||
<Animated.View entering={FadeIn.duration(400).withInitialValues({ opacity: 0.01 })}>
|
|
||||||
<HeroBanner item={heroItem} />
|
|
||||||
</Animated.View>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Animated.View entering={FadeInDown.duration(300).delay(100)}>
|
<Animated.View entering={FadeInDown.duration(300).delay(100)}>
|
||||||
<FilterableTitleRow
|
<FilterableTitleRow
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ import Animated, { FadeIn, FadeInDown } from "react-native-reanimated";
|
|||||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||||
import { useCSSVariable } from "uniwind";
|
import { useCSSVariable } from "uniwind";
|
||||||
|
|
||||||
import { DetailStackHeader } from "@/components/navigation/modal-stack-header";
|
import { ModalStackHeader } from "@/components/navigation/modal-stack-header";
|
||||||
import { ExpandableText } from "@/components/ui/expandable-text";
|
import { ExpandableText } from "@/components/ui/expandable-text";
|
||||||
import { Image } from "@/components/ui/image";
|
import { Image } from "@/components/ui/image";
|
||||||
import { PosterCard } from "@/components/ui/poster-card";
|
import { PosterCard } from "@/components/ui/poster-card";
|
||||||
@@ -146,7 +146,7 @@ export default function PersonDetailScreen() {
|
|||||||
if (isPending) {
|
if (isPending) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DetailStackHeader />
|
<ModalStackHeader />
|
||||||
<View
|
<View
|
||||||
className="bg-background flex-1 items-center"
|
className="bg-background flex-1 items-center"
|
||||||
style={{ paddingTop: headerHeight + 24 }}
|
style={{ paddingTop: headerHeight + 24 }}
|
||||||
@@ -171,7 +171,7 @@ export default function PersonDetailScreen() {
|
|||||||
if (isError && !data) {
|
if (isError && !data) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DetailStackHeader />
|
<ModalStackHeader />
|
||||||
<View
|
<View
|
||||||
className="bg-background flex-1 items-center justify-center"
|
className="bg-background flex-1 items-center justify-center"
|
||||||
style={{ paddingTop: insets.top }}
|
style={{ paddingTop: insets.top }}
|
||||||
@@ -198,7 +198,7 @@ export default function PersonDetailScreen() {
|
|||||||
if (!person) {
|
if (!person) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DetailStackHeader />
|
<ModalStackHeader />
|
||||||
<View
|
<View
|
||||||
className="bg-background flex-1 items-center justify-center"
|
className="bg-background flex-1 items-center justify-center"
|
||||||
style={{ paddingTop: insets.top }}
|
style={{ paddingTop: insets.top }}
|
||||||
@@ -221,7 +221,7 @@ export default function PersonDetailScreen() {
|
|||||||
|
|
||||||
const listHeader = (
|
const listHeader = (
|
||||||
<>
|
<>
|
||||||
<DetailStackHeader />
|
<ModalStackHeader />
|
||||||
|
|
||||||
{/* Profile hero */}
|
{/* Profile hero */}
|
||||||
<Animated.View
|
<Animated.View
|
||||||
|
|||||||
@@ -27,7 +27,7 @@ import {
|
|||||||
HorizontalPosterRow,
|
HorizontalPosterRow,
|
||||||
type PosterRowItem,
|
type PosterRowItem,
|
||||||
} from "@/components/dashboard/horizontal-poster-row";
|
} from "@/components/dashboard/horizontal-poster-row";
|
||||||
import { DetailStackHeader } from "@/components/navigation/modal-stack-header";
|
import { ModalStackHeader } from "@/components/navigation/modal-stack-header";
|
||||||
import { CastCard } from "@/components/titles/cast-card";
|
import { CastCard } from "@/components/titles/cast-card";
|
||||||
import { ContinueWatchingBanner } from "@/components/titles/continue-watching-banner";
|
import { ContinueWatchingBanner } from "@/components/titles/continue-watching-banner";
|
||||||
import { SeasonAccordion } from "@/components/titles/season-accordion";
|
import { SeasonAccordion } from "@/components/titles/season-accordion";
|
||||||
@@ -198,7 +198,7 @@ export default function TitleDetailScreen() {
|
|||||||
if (detail.isPending) {
|
if (detail.isPending) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DetailStackHeader />
|
<ModalStackHeader />
|
||||||
<View className="bg-background flex-1">
|
<View className="bg-background flex-1">
|
||||||
{/* Hero skeleton */}
|
{/* Hero skeleton */}
|
||||||
<Skeleton width="100%" height={300} borderRadius={0} />
|
<Skeleton width="100%" height={300} borderRadius={0} />
|
||||||
@@ -228,7 +228,7 @@ export default function TitleDetailScreen() {
|
|||||||
if (!title) {
|
if (!title) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DetailStackHeader />
|
<ModalStackHeader />
|
||||||
<View className="bg-background flex-1 items-center justify-center px-6">
|
<View className="bg-background flex-1 items-center justify-center px-6">
|
||||||
<IconMovie size={48} color={mutedForeground} />
|
<IconMovie size={48} color={mutedForeground} />
|
||||||
<Text className="font-display text-foreground mt-3 text-xl">
|
<Text className="font-display text-foreground mt-3 text-xl">
|
||||||
@@ -252,7 +252,7 @@ export default function TitleDetailScreen() {
|
|||||||
contentInsetAdjustmentBehavior={useAutomaticInsets ? "automatic" : "never"}
|
contentInsetAdjustmentBehavior={useAutomaticInsets ? "automatic" : "never"}
|
||||||
contentContainerStyle={titleScrollContentStyle}
|
contentContainerStyle={titleScrollContentStyle}
|
||||||
>
|
>
|
||||||
<DetailStackHeader />
|
<ModalStackHeader />
|
||||||
|
|
||||||
{/* Hero */}
|
{/* Hero */}
|
||||||
<View className="h-[300px]" style={heroMarginStyle}>
|
<View className="h-[300px]" style={heroMarginStyle}>
|
||||||
|
|||||||
@@ -62,10 +62,6 @@ export function ContinueWatchingCard({ item }: { item: ContinueWatchingItem }) {
|
|||||||
contentFit="cover"
|
contentFit="cover"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<View
|
|
||||||
className="absolute inset-0"
|
|
||||||
style={{ backgroundColor: "rgba(0,0,0,0.4)" }}
|
|
||||||
/>
|
|
||||||
{item.nextEpisode && (
|
{item.nextEpisode && (
|
||||||
<View className="absolute right-2.5 bottom-3 left-2.5">
|
<View className="absolute right-2.5 bottom-3 left-2.5">
|
||||||
<Text
|
<Text
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import { useLingui } from "@lingui/react/macro";
|
|||||||
import { Stack, useRouter } from "expo-router";
|
import { Stack, useRouter } from "expo-router";
|
||||||
import { View } from "react-native";
|
import { View } from "react-native";
|
||||||
|
|
||||||
export function DetailStackHeader() {
|
export function ModalStackHeader() {
|
||||||
const { dismissAll } = useRouter();
|
const { dismissAll } = useRouter();
|
||||||
const { t } = useLingui();
|
const { t } = useLingui();
|
||||||
return (
|
return (
|
||||||
|
|||||||
Reference in New Issue
Block a user