Ma/OrionTV
1
0
Fork 0
mirror of https://github.com/zimplexing/OrionTV.git synced 2026-02-04 03:36:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add text selection handling in APIConfigSection and LiveStreamSection components, settings remote input can save

Browse Source
This commit is contained in:
James Chen
2025-09-02 09:54:58 +08:00
parent 0d9f552ede
commit 7af9bf2b4c
3 changed files with 58 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/settings.tsx
View File

@@ -51,6 +51,7 @@ export default function SettingsScreen() {
const realMessage = lastMessage.split("_")[0];
handleRemoteInput(realMessage);
clearMessage(); // Clear the message after processing
markAsChanged();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [lastMessage, targetPage]);

31
components/settings/APIConfigSection.tsx
View File

@@ -70,10 +70,21 @@ export const APIConfigSection = forwardRef<APIConfigSectionRef, APIConfigSection
useTVEventHandler(handleTVEvent);
const [selection, setSelection] = useState<{ start: number; end: number }>({
start: 0,
end: 0,
});
// 当用户手动移动光标或选中文本时，同步到 state（可选）
const onSelectionChange = ({
nativeEvent: { selection },
}: any) => {
setSelection(selection);
};
return (
<SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}
{...Platform.isTV||deviceType !=='tv'? undefined :{ onPress: handlePress}}
>
{...Platform.isTV || deviceType !== 'tv' ? undefined : { onPress: handlePress }}
>
<View style={styles.inputContainer}>
<View style={styles.titleContainer}>
<ThemedText style={styles.sectionTitle}>API 地址</ThemedText>
@@ -91,7 +102,21 @@ export const APIConfigSection = forwardRef<APIConfigSectionRef, APIConfigSection
placeholderTextColor="#888"
autoCapitalize="none"
autoCorrect={false}
onFocus={() => setIsInputFocused(true)}
onFocus={() => {
setIsInputFocused(true);
// 将光标移动到文本末尾
const end = apiBaseUrl.length;
setSelection({ start: end, end: end });
// 有时需要延迟一下，让系统先完成 focus 再设置 selection
//（在 Android 上更可靠）
setTimeout(() => {
// 对于受控的 selection 已经生效，这里仅作保险
inputRef.current?.setNativeProps({ selection: { start: end, end: end } });
}, 0);
}}
selection={selection}
onSelectionChange={onSelectionChange} // 可选
onBlur={() => setIsInputFocused(false)}
/>
</Animated.View>

32
components/settings/LiveStreamSection.tsx
View File

@@ -68,9 +68,21 @@ export const LiveStreamSection = forwardRef<LiveStreamSectionRef, LiveStreamSect
useTVEventHandler(handleTVEvent);
const [selection, setSelection] = useState<{ start: number; end: number }>({
start: 0,
end: 0,
});
// 当用户手动移动光标或选中文本时，同步到 state（可选）
const onSelectionChange = ({
nativeEvent: { selection },
}: any) => {
setSelection(selection);
};
return (
<SettingsSection focusable onFocus={handleSectionFocus} onBlur={handleSectionBlur}
onPress={Platform.isTV||deviceType !=='tv' ? undefined : handlePress}
onPress={Platform.isTV || deviceType !== 'tv' ? undefined : handlePress}
>
<View style={styles.inputContainer}>
<View style={styles.titleContainer}>
@@ -89,9 +101,23 @@ export const LiveStreamSection = forwardRef<LiveStreamSectionRef, LiveStreamSect
placeholderTextColor="#888"
autoCapitalize="none"
autoCorrect={false}
onFocus={() => setIsInputFocused(true)}
onFocus={() => {
setIsInputFocused(true);
// 将光标移动到文本末尾
const end = m3uUrl.length;
setSelection({ start: end, end: end });
// 有时需要延迟一下，让系统先完成 focus 再设置 selection
//（在 Android 上更可靠）
setTimeout(() => {
// 对于受控的 selection 已经生效，这里仅作保险
inputRef.current?.setNativeProps({ selection: { start: end, end: end } });
}, 0);
}}
selection={selection}
onSelectionChange={onSelectionChange} // 可选
onBlur={() => setIsInputFocused(false)}
// onPress={handlePress}
// onPress={handlePress}
/>
</Animated.View>
</View>