alteropen/streamyfin
1
0
Fork 0
mirror of https://github.com/streamyfin/streamyfin.git synced 2026-03-07 02:06:18 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

style(search): remove redundant search label on TV search page

Browse Source
This commit is contained in:
Fredrik Burmester
2026-01-16 19:04:13 +01:00
parent cc154f0c16
commit 38cb7068ef
5 changed files with 96 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
components/ItemContent.tv.tsx
View File

@@ -467,6 +467,88 @@ const TVOptionCard: React.FC<{
);
};
// Glass-style back button for TV (Apple TV design)
const TVBackButton: React.FC<{
onPress: () => void;
}> = ({ onPress }) => {
const [focused, setFocused] = useState(false);
const scale = useRef(new Animated.Value(1)).current;
const animateTo = (v: number) =>
Animated.timing(scale, {
toValue: v,
duration: 150,
easing: Easing.out(Easing.quad),
useNativeDriver: true,
}).start();
return (
<Pressable
onPress={onPress}
onFocus={() => {
setFocused(true);
animateTo(1.08);
}}
onBlur={() => {
setFocused(false);
animateTo(1);
}}
style={{ alignSelf: "flex-start", marginBottom: 20 }}
>
<Animated.View
style={{
transform: [{ scale }],
shadowColor: "#fff",
shadowOffset: { width: 0, height: 0 },
shadowOpacity: focused ? 0.5 : 0,
shadowRadius: focused ? 15 : 0,
}}
>
<BlurView
intensity={focused ? 100 : 60}
tint='dark'
style={{
borderRadius: 16,
overflow: "hidden",
borderWidth: 1,
borderColor: focused
? "rgba(255, 255, 255, 0.4)"
: "rgba(255, 255, 255, 0.15)",
}}
>
<View
style={{
flexDirection: "row",
alignItems: "center",
paddingVertical: 12,
paddingHorizontal: 18,
backgroundColor: focused
? "rgba(255, 255, 255, 0.2)"
: "rgba(255, 255, 255, 0.08)",
}}
>
<Ionicons
name='chevron-back'
size={22}
color={focused ? "#fff" : "rgba(255, 255, 255, 0.8)"}
/>
<Text
style={{
fontSize: 16,
fontWeight: "500",
color: focused ? "#fff" : "rgba(255, 255, 255, 0.8)",
marginLeft: 6,
}}
>
Back
</Text>
</View>
</BlurView>
</Animated.View>
</Pressable>
);
};
// Button to open option selector
const TVOptionButton: React.FC<{
label: string;
@@ -735,7 +817,9 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
const track = subtitleTracks.find(
(t) => t.Index === selectedOptions?.subtitleIndex,
);
return track?.DisplayTitle || track?.Language || t("item_card.subtitles");
return (
track?.DisplayTitle || track?.Language || t("item_card.subtitles.label")
);
}, [subtitleTracks, selectedOptions?.subtitleIndex, t]);
const selectedMediaSourceLabel = useMemo(() => {
@@ -838,13 +922,17 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
minHeight: SCREEN_HEIGHT * 0.45,
}}
>
{/* Left side - Poster */}
{/* Left side - Back button + Poster */}
<View
style={{
width: SCREEN_WIDTH * 0.22,
marginRight: 50,
}}
>
{/* Glass back button */}
<TVBackButton onPress={() => router.back()} />
{/* Poster */}
<View
style={{
aspectRatio: 2 / 3,
@@ -1043,7 +1131,7 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
{(subtitleTracks.length > 0 ||
selectedOptions?.subtitleIndex !== undefined) && (
<TVOptionButton
label={t("item_card.subtitles")}
label={t("item_card.subtitles.label")}
value={selectedSubtitleLabel}
onPress={() => setOpenModal("subtitle")}
/>
@@ -1233,7 +1321,7 @@ export const ItemContentTV: React.FC<ItemContentTVProps> = React.memo(
<TVOptionSelector
visible={openModal === "subtitle"}
title={t("item_card.subtitles")}
title={t("item_card.subtitles.label")}
options={subtitleOptions}
onSelect={handleSubtitleChange}
onClose={() => setOpenModal(null)}

2
components/ItemTechnicalDetails.tsx
View File

@@ -77,7 +77,7 @@ export const ItemTechnicalDetails: React.FC<Props> = ({ source }) => {
<View>
<Text className='text-lg font-bold mb-2'>
{t("item_card.subtitles")}
{t("item_card.subtitles.label")}
</Text>
<SubtitleStreamInfo
subtitleStreams={

2
components/MediaSourceButton.tsx
View File

@@ -142,7 +142,7 @@ export const MediaSourceButton: React.FC<Props> = ({
}));
groups.push({
title: t("item_card.subtitles"),
title: t("item_card.subtitles.label"),
options: [noneOption, ...subtitleOptions],
});
}

4
components/SubtitleTrackSelector.tsx
View File

@@ -76,7 +76,7 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
const trigger = (
<View className='flex flex-col' {...props}>
<Text numberOfLines={1} className='opacity-50 mb-1 text-xs'>
{t("item_card.subtitles")}
{t("item_card.subtitles.label")}
</Text>
<TouchableOpacity
className='bg-neutral-900 h-10 rounded-xl border-neutral-800 border px-3 py-2 flex flex-row items-center justify-between'
@@ -97,7 +97,7 @@ export const SubtitleTrackSelector: React.FC<Props> = ({
<PlatformDropdown
groups={optionGroups}
trigger={trigger}
title={t("item_card.subtitles")}
title={t("item_card.subtitles.label")}
open={open}
onOpenChange={setOpen}
onOptionSelect={handleOptionSelect}

9
components/search/TVSearchPage.tsx
View File

@@ -258,15 +258,6 @@ export const TVSearchPage: React.FC<TVSearchPageProps> = ({
{/* Example Searches (when no search query) */}
{!loading && debouncedSearch.length === 0 && (
<View style={{ alignItems: "center", paddingTop: 40, gap: 16 }}>
<Text
style={{
fontSize: 18,
color: "#9CA3AF",
marginBottom: 8,
}}
>
{t("search.search")}
</Text>
<View
style={{
flexDirection: "row",