mirror of
https://github.com/streamyfin/streamyfin.git
synced 2026-01-26 13:08:23 +00:00
fix scaling
Attempt 2 at trying to make a uniform scale across apple and android tv Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>
This commit is contained in:
Lance Chant
@@ -144,11 +144,11 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
|
||||
className={`rounded-2xl items-center justify-center
|
||||
${colorClasses}
|
||||
${className}`}
|
||||
style={{ paddingVertical: size(20) }}
|
||||
style={{ paddingVertical: size(50) }}
|
||||
>
|
||||
<Text
|
||||
className={`${textColorClass} font-bold`}
|
||||
style={{ fontSize: fontSize(20) }}
|
||||
style={{ fontSize: fontSize(10) }}
|
||||
>
|
||||
{children}
|
||||
</Text>
|
||||
|
||||
@@ -601,10 +601,10 @@ export const TVLogin: React.FC = () => {
|
||||
}}
|
||||
>
|
||||
{/* Logo */}
|
||||
<View style={{ alignItems: "center", marginBottom: size(16) }}>
|
||||
<View style={{ alignItems: "center", marginBottom: size(5) }}>
|
||||
<Image
|
||||
source={require("@/assets/images/icon-tvos.png")}
|
||||
style={{ width: size(300), height: size(300) }}
|
||||
style={{ width: size(400), height: size(400) }}
|
||||
contentFit='contain'
|
||||
/>
|
||||
</View>
|
||||
@@ -623,7 +623,7 @@ export const TVLogin: React.FC = () => {
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: fontSize(20),
|
||||
fontSize: fontSize(10),
|
||||
color: "#9CA3AF",
|
||||
textAlign: "center",
|
||||
marginBottom: size(40),
|
||||
@@ -634,7 +634,7 @@ export const TVLogin: React.FC = () => {
|
||||
|
||||
{/* Server URL Input - extra padding for focus scale */}
|
||||
<View
|
||||
style={{ marginBottom: size(24), paddingHorizontal: size(8) }}
|
||||
style={{ marginBottom: size(50), paddingHorizontal: size(300) }}
|
||||
>
|
||||
<TVInput
|
||||
placeholder={t("server.server_url_placeholder")}
|
||||
@@ -650,7 +650,9 @@ export const TVLogin: React.FC = () => {
|
||||
</View>
|
||||
|
||||
{/* Connect Button */}
|
||||
<View style={{ marginBottom: size(12) }}>
|
||||
<View
|
||||
style={{ marginBottom: size(12), paddingHorizontal: size(270) }}
|
||||
>
|
||||
<Button
|
||||
onPress={() => handleConnect(serverURL)}
|
||||
loading={loadingServerCheck}
|
||||
@@ -661,7 +663,7 @@ export const TVLogin: React.FC = () => {
|
||||
</View>
|
||||
|
||||
{/* Previous Servers */}
|
||||
<View style={{ paddingHorizontal: size(8) }}>
|
||||
<View style={{ paddingHorizontal: size(300) }}>
|
||||
<TVPreviousServersList
|
||||
onServerSelect={(s) => handleConnect(s.address)}
|
||||
onQuickLogin={handleQuickLoginWithSavedCredential}
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
View,
|
||||
} from "react-native";
|
||||
import { useMMKVString } from "react-native-mmkv";
|
||||
import { fontSize, height, size, width } from "react-native-responsive-sizes";
|
||||
import { Button } from "@/components/Button";
|
||||
import { Text } from "@/components/common/Text";
|
||||
import {
|
||||
@@ -61,8 +62,8 @@ const TVServerActionCard: React.FC<{
|
||||
<Animated.View
|
||||
style={{
|
||||
transform: [{ scale }],
|
||||
width: 180,
|
||||
height: 90,
|
||||
width: width(25),
|
||||
height: height(15),
|
||||
backgroundColor: focused
|
||||
? isDestructive
|
||||
? "#ef4444"
|
||||
@@ -70,16 +71,16 @@ const TVServerActionCard: React.FC<{
|
||||
: isDestructive
|
||||
? "rgba(239, 68, 68, 0.2)"
|
||||
: "rgba(255,255,255,0.08)",
|
||||
borderRadius: 14,
|
||||
borderRadius: size(20),
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 12,
|
||||
gap: 8,
|
||||
paddingHorizontal: size(12),
|
||||
gap: size(8),
|
||||
}}
|
||||
>
|
||||
<Ionicons
|
||||
name={icon}
|
||||
size={28}
|
||||
size={size(56)}
|
||||
color={
|
||||
focused
|
||||
? isDestructive
|
||||
@@ -92,7 +93,7 @@ const TVServerActionCard: React.FC<{
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
fontSize: fontSize(12),
|
||||
color: focused
|
||||
? isDestructive
|
||||
? "#fff"
|
||||
@@ -142,26 +143,26 @@ const TVServerActionSheet: React.FC<{
|
||||
intensity={80}
|
||||
tint='dark'
|
||||
style={{
|
||||
borderTopLeftRadius: 24,
|
||||
borderTopRightRadius: 24,
|
||||
borderTopLeftRadius: size(24),
|
||||
borderTopRightRadius: size(24),
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
paddingTop: 24,
|
||||
paddingBottom: 50,
|
||||
paddingTop: size(24),
|
||||
paddingBottom: size(50),
|
||||
overflow: "visible",
|
||||
}}
|
||||
>
|
||||
{/* Title */}
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 18,
|
||||
fontSize: fontSize(12),
|
||||
fontWeight: "500",
|
||||
color: "rgba(255,255,255,0.6)",
|
||||
marginBottom: 8,
|
||||
paddingHorizontal: 48,
|
||||
marginBottom: size(12),
|
||||
paddingHorizontal: size(48),
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: 1,
|
||||
}}
|
||||
@@ -175,9 +176,9 @@ const TVServerActionSheet: React.FC<{
|
||||
showsHorizontalScrollIndicator={false}
|
||||
style={{ overflow: "visible" }}
|
||||
contentContainerStyle={{
|
||||
paddingHorizontal: 48,
|
||||
paddingVertical: 10,
|
||||
gap: 12,
|
||||
paddingHorizontal: size(48),
|
||||
paddingVertical: size(10),
|
||||
gap: size(12),
|
||||
}}
|
||||
>
|
||||
<TVServerActionCard
|
||||
@@ -398,19 +399,19 @@ export const TVPreviousServersList: React.FC<TVPreviousServersListProps> = ({
|
||||
if (!previousServers.length) return null;
|
||||
|
||||
return (
|
||||
<View style={{ marginTop: 32 }}>
|
||||
<View style={{ marginTop: size(100) }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 24,
|
||||
fontSize: fontSize(12),
|
||||
fontWeight: "600",
|
||||
color: "#FFFFFF",
|
||||
marginBottom: 16,
|
||||
marginBottom: size(20),
|
||||
}}
|
||||
>
|
||||
{t("server.previous_servers")}
|
||||
</Text>
|
||||
|
||||
<View style={{ gap: 12 }}>
|
||||
<View style={{ gap: size(12) }}>
|
||||
{previousServers.map((server) => (
|
||||
<TVServerCard
|
||||
key={server.address}
|
||||
@@ -437,39 +438,39 @@ export const TVPreviousServersList: React.FC<TVPreviousServersListProps> = ({
|
||||
backgroundColor: "rgba(0, 0, 0, 0.9)",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
padding: 80,
|
||||
padding: size(80),
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: "#1a1a1a",
|
||||
borderRadius: 24,
|
||||
padding: 40,
|
||||
borderRadius: size(24),
|
||||
padding: size(40),
|
||||
width: "100%",
|
||||
maxWidth: 700,
|
||||
maxWidth: width(70),
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 32,
|
||||
fontSize: fontSize(32),
|
||||
fontWeight: "bold",
|
||||
color: "#FFFFFF",
|
||||
marginBottom: 8,
|
||||
marginBottom: size(8),
|
||||
}}
|
||||
>
|
||||
{t("server.select_account")}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 18,
|
||||
fontSize: fontSize(18),
|
||||
color: "#9CA3AF",
|
||||
marginBottom: 32,
|
||||
marginBottom: size(32),
|
||||
}}
|
||||
>
|
||||
{selectedServer?.name || selectedServer?.address}
|
||||
</Text>
|
||||
|
||||
<View style={{ gap: 12, marginBottom: 24 }}>
|
||||
<View style={{ gap: size(12), marginBottom: size(24) }}>
|
||||
{selectedServer?.accounts.map((account, index) => (
|
||||
<TVAccountCard
|
||||
key={account.userId}
|
||||
@@ -484,7 +485,7 @@ export const TVPreviousServersList: React.FC<TVPreviousServersListProps> = ({
|
||||
))}
|
||||
</View>
|
||||
|
||||
<View style={{ gap: 12 }}>
|
||||
<View style={{ gap: size(12) }}>
|
||||
<Button
|
||||
onPress={() => {
|
||||
setShowAccountsModal(false);
|
||||
|
||||
@@ -7,6 +7,7 @@ import {
|
||||
Pressable,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { fontSize, size } from "react-native-responsive-sizes";
|
||||
import { Text } from "@/components/common/Text";
|
||||
import { Colors } from "@/constants/Colors";
|
||||
|
||||
@@ -86,11 +87,11 @@ export const TVServerCard: React.FC<TVServerCardProps> = ({
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: isFocused ? "#2a2a2a" : "#1a1a1a",
|
||||
borderWidth: 2,
|
||||
borderWidth: size(6),
|
||||
borderColor: isFocused ? "#FFFFFF" : "transparent",
|
||||
borderRadius: 16,
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 20,
|
||||
borderRadius: size(50),
|
||||
paddingHorizontal: size(50),
|
||||
paddingVertical: size(40),
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
@@ -99,7 +100,7 @@ export const TVServerCard: React.FC<TVServerCardProps> = ({
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 22,
|
||||
fontSize: fontSize(12),
|
||||
fontWeight: "600",
|
||||
color: "#FFFFFF",
|
||||
}}
|
||||
@@ -110,9 +111,9 @@ export const TVServerCard: React.FC<TVServerCardProps> = ({
|
||||
{subtitle && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 16,
|
||||
fontSize: fontSize(10),
|
||||
color: "#9CA3AF",
|
||||
marginTop: 4,
|
||||
marginTop: size(12),
|
||||
}}
|
||||
numberOfLines={1}
|
||||
>
|
||||
@@ -121,27 +122,27 @@ export const TVServerCard: React.FC<TVServerCardProps> = ({
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={{ marginLeft: 16 }}>
|
||||
<View style={{ marginLeft: size(16) }}>
|
||||
{isLoading ? (
|
||||
<ActivityIndicator size='small' color={Colors.primary} />
|
||||
) : securityIcon ? (
|
||||
<View style={{ flexDirection: "row", alignItems: "center" }}>
|
||||
<Ionicons
|
||||
name={securityIcon}
|
||||
size={20}
|
||||
size={size(60)}
|
||||
color={Colors.primary}
|
||||
style={{ marginRight: 8 }}
|
||||
style={{ marginRight: size(16) }}
|
||||
/>
|
||||
<Ionicons
|
||||
name='chevron-forward'
|
||||
size={24}
|
||||
size={size(48)}
|
||||
color={isFocused ? "#FFFFFF" : "#6B7280"}
|
||||
/>
|
||||
</View>
|
||||
) : (
|
||||
<Ionicons
|
||||
name='chevron-forward'
|
||||
size={24}
|
||||
size={size(48)}
|
||||
color={isFocused ? "#FFFFFF" : "#6B7280"}
|
||||
/>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user