alteropen/streamyfin
1
0
Fork 0
mirror of https://github.com/streamyfin/streamyfin.git synced 2026-06-09 23:48:41 +01:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

fix(tv): add keyboard focus to text inputs and polish poster styling

Browse Source
This commit is contained in:
Fredrik Burmester
2026-01-18 16:13:53 +01:00
parent a667723d93
commit 7af4b913d7
4 changed files with 8 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/(auth)/(tabs)/(home)/settings.tv.tsx
View File

@@ -1,7 +1,7 @@
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client"; import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client";
import { useAtom } from "jotai"; import { useAtom } from "jotai";
import React, { useMemo, useState } from "react"; import React, { useMemo, useRef, useState } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Animated, Pressable, ScrollView, TextInput, View } from "react-native"; import { Animated, Pressable, ScrollView, TextInput, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -319,6 +319,7 @@ const TVSettingsTextInput: React.FC<{
secureTextEntry, secureTextEntry,
disabled, disabled,
}) => { }) => {
const inputRef = useRef<TextInput>(null);
const { focused, handleFocus, handleBlur, animatedStyle } = const { focused, handleFocus, handleBlur, animatedStyle } =
useTVFocusAnimation({ scaleAmount: 1.02 }); useTVFocusAnimation({ scaleAmount: 1.02 });
@@ -329,6 +330,7 @@ const TVSettingsTextInput: React.FC<{
return ( return (
<Pressable <Pressable
onPress={() => inputRef.current?.focus()}
onFocus={handleFocus} onFocus={handleFocus}
onBlur={handleInputBlur} onBlur={handleInputBlur}
disabled={disabled} disabled={disabled}
@@ -352,6 +354,7 @@ const TVSettingsTextInput: React.FC<{
{label} {label}
</Text> </Text>
<TextInput <TextInput
ref={inputRef}
value={value} value={value}
placeholder={placeholder} placeholder={placeholder}
placeholderTextColor='#6B7280' placeholderTextColor='#6B7280'

8
components/ContinueWatchingPoster.tv.tsx
View File

@@ -66,9 +66,7 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
style={{ style={{
width: TV_LANDSCAPE_WIDTH, width: TV_LANDSCAPE_WIDTH,
aspectRatio: 16 / 9, aspectRatio: 16 / 9,
borderWidth: 1, borderRadius: 24,
borderColor: "#262626",
borderRadius: 12,
}} }}
/> />
); );
@@ -80,10 +78,8 @@ const ContinueWatchingPoster: React.FC<ContinueWatchingPosterProps> = ({
position: "relative", position: "relative",
width: TV_LANDSCAPE_WIDTH, width: TV_LANDSCAPE_WIDTH,
aspectRatio: 16 / 9, aspectRatio: 16 / 9,
borderRadius: 12, borderRadius: 24,
overflow: "hidden", overflow: "hidden",
borderWidth: 1,
borderColor: "#262626",
}} }}
> >
<View <View

4
components/posters/MoviePoster.tv.tsx
View File

@@ -39,10 +39,8 @@ const MoviePoster: React.FC<MoviePosterProps> = ({
<View <View
style={{ style={{
position: "relative", position: "relative",
borderRadius: 12, borderRadius: 24,
overflow: "hidden", overflow: "hidden",
borderWidth: 1,
borderColor: "#262626",
width: TV_POSTER_WIDTH, width: TV_POSTER_WIDTH,
aspectRatio: 10 / 15, aspectRatio: 10 / 15,
}} }}

4
components/posters/SeriesPoster.tv.tsx
View File

@@ -38,10 +38,8 @@ const SeriesPoster: React.FC<SeriesPosterProps> = ({ item }) => {
width: TV_POSTER_WIDTH, width: TV_POSTER_WIDTH,
aspectRatio: 10 / 15, aspectRatio: 10 / 15,
position: "relative", position: "relative",
borderRadius: 12, borderRadius: 24,
overflow: "hidden", overflow: "hidden",
borderWidth: 1,
borderColor: "#262626",
}} }}
> >
<Image <Image