mirror of
https://github.com/zimplexing/OrionTV.git
synced 2026-06-11 16:33:12 +08:00
feat(mobile): optimize mobile experience by hiding non-essential features
- Hide live streaming tab in mobile navigation components - Hide remote input and live stream configurations in settings - Hide API configuration description text on mobile - Disable HTTP server startup on mobile devices to save resources This streamlines the mobile interface while preserving full functionality on tablet and TV platforms.
This commit is contained in:
@@ -65,12 +65,13 @@ export default function RootLayout() {
|
|||||||
}, [loaded, lastCheckTime, checkForUpdate]);
|
}, [loaded, lastCheckTime, checkForUpdate]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (remoteInputEnabled) {
|
// 只有在非手机端才启动远程控制服务器
|
||||||
|
if (remoteInputEnabled && responsiveConfig.deviceType !== "mobile") {
|
||||||
startServer();
|
startServer();
|
||||||
} else {
|
} else {
|
||||||
stopServer();
|
stopServer();
|
||||||
}
|
}
|
||||||
}, [remoteInputEnabled, startServer, stopServer]);
|
}, [remoteInputEnabled, startServer, stopServer, responsiveConfig.deviceType]);
|
||||||
|
|
||||||
if (!loaded && !error) {
|
if (!loaded && !error) {
|
||||||
return null;
|
return null;
|
||||||
|
|||||||
@@ -86,7 +86,8 @@ export default function SettingsScreen() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const sections = [
|
const sections = [
|
||||||
{
|
// 远程输入配置 - 仅在非手机端显示
|
||||||
|
deviceType !== "mobile" && {
|
||||||
component: (
|
component: (
|
||||||
<RemoteInputSection
|
<RemoteInputSection
|
||||||
onChanged={markAsChanged}
|
onChanged={markAsChanged}
|
||||||
@@ -103,6 +104,7 @@ export default function SettingsScreen() {
|
|||||||
<APIConfigSection
|
<APIConfigSection
|
||||||
ref={apiSectionRef}
|
ref={apiSectionRef}
|
||||||
onChanged={markAsChanged}
|
onChanged={markAsChanged}
|
||||||
|
hideDescription={deviceType === "mobile"}
|
||||||
onFocus={() => {
|
onFocus={() => {
|
||||||
setCurrentFocusIndex(1);
|
setCurrentFocusIndex(1);
|
||||||
setCurrentSection("api");
|
setCurrentSection("api");
|
||||||
@@ -111,7 +113,8 @@ export default function SettingsScreen() {
|
|||||||
),
|
),
|
||||||
key: "api",
|
key: "api",
|
||||||
},
|
},
|
||||||
{
|
// 直播源配置 - 仅在非手机端显示
|
||||||
|
deviceType !== "mobile" && {
|
||||||
component: (
|
component: (
|
||||||
<LiveStreamSection
|
<LiveStreamSection
|
||||||
ref={liveStreamSectionRef}
|
ref={liveStreamSectionRef}
|
||||||
|
|||||||
@@ -62,6 +62,11 @@ export const MobileBottomNavigation: React.FC<MobileBottomNavigationProps> = ({
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 在手机端过滤掉直播 tab
|
||||||
|
const filteredNavigationItems = navigationItems.filter(item =>
|
||||||
|
responsiveConfig.deviceType !== 'mobile' || item.name !== 'live'
|
||||||
|
);
|
||||||
|
|
||||||
const handleNavigation = (route: string) => {
|
const handleNavigation = (route: string) => {
|
||||||
if (route === '/') {
|
if (route === '/') {
|
||||||
router.push('/');
|
router.push('/');
|
||||||
@@ -90,7 +95,7 @@ export const MobileBottomNavigation: React.FC<MobileBottomNavigationProps> = ({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={[styles.container, dynamicStyles.container]}>
|
<View style={[styles.container, dynamicStyles.container]}>
|
||||||
{navigationItems.map((item) => {
|
{filteredNavigationItems.map((item) => {
|
||||||
const isActive = isActiveRoute(item.route);
|
const isActive = isActiveRoute(item.route);
|
||||||
const IconComponent = item.icon;
|
const IconComponent = item.icon;
|
||||||
|
|
||||||
|
|||||||
@@ -24,7 +24,12 @@ const tabs: TabItem[] = [
|
|||||||
const MobileBottomTabNavigator: React.FC = () => {
|
const MobileBottomTabNavigator: React.FC = () => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const { spacing } = useResponsiveLayout();
|
const { spacing, deviceType } = useResponsiveLayout();
|
||||||
|
|
||||||
|
// 在手机端过滤掉直播 tab
|
||||||
|
const filteredTabs = tabs.filter(tab =>
|
||||||
|
deviceType !== 'mobile' || tab.key !== 'live'
|
||||||
|
);
|
||||||
|
|
||||||
const handleTabPress = (route: string) => {
|
const handleTabPress = (route: string) => {
|
||||||
if (route === '/') {
|
if (route === '/') {
|
||||||
@@ -44,7 +49,7 @@ const MobileBottomTabNavigator: React.FC = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={dynamicStyles.container}>
|
<View style={dynamicStyles.container}>
|
||||||
{tabs.map((tab) => {
|
{filteredTabs.map((tab) => {
|
||||||
const isActive = isTabActive(tab.route);
|
const isActive = isTabActive(tab.route);
|
||||||
const IconComponent = tab.icon;
|
const IconComponent = tab.icon;
|
||||||
|
|
||||||
|
|||||||
@@ -28,7 +28,12 @@ interface MobileTabContainerProps {
|
|||||||
const MobileTabContainer: React.FC<MobileTabContainerProps> = ({ children }) => {
|
const MobileTabContainer: React.FC<MobileTabContainerProps> = ({ children }) => {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const { spacing } = useResponsiveLayout();
|
const { spacing, deviceType } = useResponsiveLayout();
|
||||||
|
|
||||||
|
// 在手机端过滤掉直播 tab
|
||||||
|
const filteredTabs = tabs.filter(tab =>
|
||||||
|
deviceType !== 'mobile' || tab.key !== 'live'
|
||||||
|
);
|
||||||
|
|
||||||
const handleTabPress = (route: string) => {
|
const handleTabPress = (route: string) => {
|
||||||
if (route === '/') {
|
if (route === '/') {
|
||||||
@@ -55,7 +60,7 @@ const MobileTabContainer: React.FC<MobileTabContainerProps> = ({ children }) =>
|
|||||||
|
|
||||||
{/* 底部导航栏 */}
|
{/* 底部导航栏 */}
|
||||||
<View style={dynamicStyles.tabBar}>
|
<View style={dynamicStyles.tabBar}>
|
||||||
{tabs.map((tab) => {
|
{filteredTabs.map((tab) => {
|
||||||
const isActive = isTabActive(tab.route);
|
const isActive = isTabActive(tab.route);
|
||||||
const IconComponent = tab.icon;
|
const IconComponent = tab.icon;
|
||||||
|
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ interface APIConfigSectionProps {
|
|||||||
onChanged: () => void;
|
onChanged: () => void;
|
||||||
onFocus?: () => void;
|
onFocus?: () => void;
|
||||||
onBlur?: () => void;
|
onBlur?: () => void;
|
||||||
|
hideDescription?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface APIConfigSectionRef {
|
export interface APIConfigSectionRef {
|
||||||
@@ -19,7 +20,7 @@ export interface APIConfigSectionRef {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const APIConfigSection = forwardRef<APIConfigSectionRef, APIConfigSectionProps>(
|
export const APIConfigSection = forwardRef<APIConfigSectionRef, APIConfigSectionProps>(
|
||||||
({ onChanged, onFocus, onBlur }, ref) => {
|
({ onChanged, onFocus, onBlur, hideDescription = false }, ref) => {
|
||||||
const { apiBaseUrl, setApiBaseUrl, remoteInputEnabled } = useSettingsStore();
|
const { apiBaseUrl, setApiBaseUrl, remoteInputEnabled } = useSettingsStore();
|
||||||
const { serverUrl } = useRemoteControlStore();
|
const { serverUrl } = useRemoteControlStore();
|
||||||
const [isInputFocused, setIsInputFocused] = useState(false);
|
const [isInputFocused, setIsInputFocused] = useState(false);
|
||||||
@@ -66,7 +67,7 @@ export const APIConfigSection = forwardRef<APIConfigSectionRef, APIConfigSection
|
|||||||
<View style={styles.inputContainer}>
|
<View style={styles.inputContainer}>
|
||||||
<View style={styles.titleContainer}>
|
<View style={styles.titleContainer}>
|
||||||
<ThemedText style={styles.sectionTitle}>API 地址</ThemedText>
|
<ThemedText style={styles.sectionTitle}>API 地址</ThemedText>
|
||||||
{remoteInputEnabled && serverUrl && (
|
{!hideDescription && remoteInputEnabled && serverUrl && (
|
||||||
<ThemedText style={styles.subtitle}>用手机访问 {serverUrl},可远程输入</ThemedText>
|
<ThemedText style={styles.subtitle}>用手机访问 {serverUrl},可远程输入</ThemedText>
|
||||||
)}
|
)}
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
Reference in New Issue
Block a user