mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-04-19 07:42:09 +00:00
UI Changes
This commit is contained in:
tapframe
parent
0290b9318e
commit
6162c86347
3 changed files with 44 additions and 1 deletions
|
|
@ -95,7 +95,8 @@ const ActionButtons = memo(({
|
|||
isWatched,
|
||||
watchProgress,
|
||||
groupedEpisodes,
|
||||
metadata
|
||||
metadata,
|
||||
aiChatEnabled
|
||||
}: {
|
||||
handleShowStreams: () => void;
|
||||
toggleLibrary: () => void;
|
||||
|
|
@ -109,6 +110,7 @@ const ActionButtons = memo(({
|
|||
watchProgress: any;
|
||||
groupedEpisodes?: { [seasonNumber: number]: any[] };
|
||||
metadata: any;
|
||||
aiChatEnabled?: boolean;
|
||||
}) => {
|
||||
const { currentTheme } = useTheme();
|
||||
|
||||
|
|
@ -290,6 +292,7 @@ const ActionButtons = memo(({
|
|||
</TouchableOpacity>
|
||||
|
||||
{/* AI Chat Button */}
|
||||
{aiChatEnabled && (
|
||||
<TouchableOpacity
|
||||
style={[styles.iconButton, isTablet && styles.tabletIconButton]}
|
||||
onPress={() => {
|
||||
|
|
@ -327,6 +330,7 @@ const ActionButtons = memo(({
|
|||
color={currentTheme.colors.white}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
|
||||
{type === 'series' && (
|
||||
<TouchableOpacity
|
||||
|
|
@ -1465,6 +1469,7 @@ const HeroSection: React.FC<HeroSectionProps> = memo(({
|
|||
watchProgress={watchProgress}
|
||||
groupedEpisodes={groupedEpisodes}
|
||||
metadata={metadata}
|
||||
aiChatEnabled={settings?.aiChatEnabled}
|
||||
/>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
|
|
|
|||
|
|
@ -72,6 +72,8 @@ export interface AppSettings {
|
|||
// Trailer settings
|
||||
showTrailers: boolean; // Enable/disable trailer playback in hero section
|
||||
trailerMuted: boolean; // Default to muted for better user experience
|
||||
// AI
|
||||
aiChatEnabled: boolean; // Enable/disable Ask AI and AI features
|
||||
}
|
||||
|
||||
export const DEFAULT_SETTINGS: AppSettings = {
|
||||
|
|
@ -116,6 +118,8 @@ export const DEFAULT_SETTINGS: AppSettings = {
|
|||
// Trailer settings
|
||||
showTrailers: true, // Enable trailers by default
|
||||
trailerMuted: true, // Default to muted for better user experience
|
||||
// AI
|
||||
aiChatEnabled: false,
|
||||
};
|
||||
|
||||
const SETTINGS_STORAGE_KEY = 'app_settings';
|
||||
|
|
|
|||
|
|
@ -12,12 +12,15 @@ import {
|
|||
Linking,
|
||||
Platform,
|
||||
Dimensions,
|
||||
Switch,
|
||||
} from 'react-native';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import { MaterialIcons } from '@expo/vector-icons';
|
||||
import { useTheme } from '../contexts/ThemeContext';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { useSettings } from '../hooks/useSettings';
|
||||
import { SvgXml } from 'react-native-svg';
|
||||
|
||||
const { width } = Dimensions.get('window');
|
||||
const isTablet = width >= 768;
|
||||
|
|
@ -26,6 +29,18 @@ const AISettingsScreen: React.FC = () => {
|
|||
const navigation = useNavigation();
|
||||
const { currentTheme } = useTheme();
|
||||
const insets = useSafeAreaInsets();
|
||||
const { settings, updateSetting } = useSettings();
|
||||
const OPENROUTER_SVG = `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="400" viewBox="0 0 1200 400">
|
||||
<title>OpenRouter</title>
|
||||
<path fill="CURRENTCOLOR" d="M431.4 196.2c0 11.2-2.1 20.8-6.2 28.8a45 45 0 0 1-41 25 44.8 44.8 0 0 1-41-25c-4.2-8-6.2-17.7-6.2-28.8 0-11.2 2-20.8 6.1-28.8a44.9 44.9 0 0 1 41.1-25 45 45 0 0 1 41 25c4.1 8 6.2 17.6 6.2 28.8m-15.7 0c0-8.5-1.4-15.7-4.1-21.6a30.6 30.6 0 0 0-11.3-13.3c-4.7-3-10.1-4.5-16.1-4.5a30 30 0 0 0-16.2 4.5c-4.7 3-8.4 7.5-11.2 13.3-2.7 5.9-4.1 13-4.1 21.6 0 8.5 1.4 15.7 4.1 21.5A30.7 30.7 0 0 0 368 231c4.8 3 10.2 4.6 16.2 4.6s11.4-1.5 16.1-4.6c4.8-3 8.5-7.4 11.3-13.3 2.7-5.8 4.1-13 4.1-21.5Zm34 81.8V170h15v12.7h1.3c.9-1.6 2.1-3.5 3.8-5.6a22 22 0 0 1 18.7-8.1 30.6 30.6 0 0 1 28.7 18.6c2.9 6 4.3 13.3 4.3 21.8s-1.4 15.8-4.2 21.8a33 33 0 0 1-11.7 14 30 30 0 0 1-17 4.9c-4.7 0-8.6-.8-11.6-2.4a22 22 0 0 1-7.1-5.6c-1.7-2.2-3-4.1-4-5.8h-.8V278h-15.3m15-68.7c0 5.5.7 10.3 2.3 14.5 1.6 4.2 4 7.4 7 9.7 3 2.4 6.7 3.5 11.1 3.5 4.6 0 8.4-1.2 11.5-3.6 3-2.5 5.4-5.8 7-10 1.6-4.2 2.4-8.9 2.4-14.1 0-5.2-.8-9.9-2.4-14a21.7 21.7 0 0 0-7-9.7 18 18 0 0 0-11.5-3.6c-4.4 0-8.1 1.1-11.2 3.4-3 2.3-5.3 5.5-7 9.6a40 40 0 0 0-2.3 14.3ZM572.4 250c-7.8 0-14.4-1.6-20-5-5.6-3.3-9.9-8-12.9-14s-4.5-13.2-4.5-21.3c0-8 1.5-15.1 4.5-21.3a35 35 0 0 1 12.7-14.4 38.5 38.5 0 0 1 32-3 31.3 31.3 0 0 1 19 19.2c2 5 2.9 11 2.9 18.2v5.4h-62.5v-11.5h47.5c0-4-.8-7.6-2.5-10.7a18.6 18.6 0 0 0-17.2-10c-4.3 0-8 1-11.2 3a22.3 22.3 0 0 0-10 19.2v9c0 5.2 1 9.6 2.8 13.3 1.9 3.7 4.5 6.5 7.8 8.4a23 23 0 0 0 11.7 2.9c3 0 5.6-.4 8-1.3a16.4 16.4 0 0 0 10.2-10l14.4 2.7c-1.1 4.3-3.2 8-6.2 11.2-3 3.2-6.7 5.6-11.2 7.4a41.7 41.7 0 0 1-15.3 2.6Zm66-48.2v46.7h-15.3V170H638v12.8h1c1.8-4.2 4.6-7.5 8.5-10 3.8-2.6 8.7-3.8 14.6-3.8 5.4 0 10 1.1 14 3.3 4.1 2.3 7.2 5.6 9.4 10a36 36 0 0 1 3.4 16.3v50h-15.3v-48.2a19 19 0 0 0-4.5-13.3c-3-3.3-7-4.9-12.2-4.9a19 19 0 0 0-9.4 2.3 16.4 16.4 0 0 0-6.5 6.8 21.8 21.8 0 0 0-2.4 10.6Zm72 46.7V143.8h37.3c8 0 14.8 1.4 20.2 4.2 5.4 2.8 9.4 6.7 12 11.6a35 35 0 0 1 4 17c0 6.5-1.3 12.1-4 17a27.3 27.3 0 0 1-12 11.3c-5.4 2.7-12.2 4-20.3 4h-28.2v-13.6h26.8c5.1 0 9.3-.7 12.5-2.2 3.2-1.4 5.6-3.6 7-6.4a21 21 0 0 0 2.3-10c0-4-.7-7.4-2.2-10.3a15.2 15.2 0 0 0-7.1-6.7 29.3 29.3 0 0 0-12.7-2.3h-19.9v91.2h-15.7m51.7-47.3 25.8 47.3h-18l-25.3-47.3h17.5Zm73 48.8a34.1 34.1 0 0 1-32-19.2 47 47 0 0 1-4.6-21.3c0-8.1 1.5-15.2 4.5-21.3a34.1 34.1 0 0 1 32-19.3 34.1 34.1 0 0 1 32 19.3 45 45 0 0 1 4.7 21.3 47 47 0 0 1-4.6 21.3 34.1 34.1 0 0 1-32 19.2m0-12.8c4.8 0 8.8-1.3 11.9-3.8 3.1-2.5 5.4-5.9 7-10a42 42 0 0 0 2.2-14c0-5-.7-9.5-2.2-13.8a22.8 22.8 0 0 0-7-10.1 18.2 18.2 0 0 0-11.9-3.8c-4.8 0-8.8 1.2-12 3.8-3 2.6-5.4 6-7 10.2a40.5 40.5 0 0 0-2.2 13.8c0 5 .8 9.6 2.3 13.8 1.5 4.2 3.8 7.6 7 10.1 3.1 2.5 7.1 3.8 12 3.8ZM938.6 216v-46h15.3v78.6h-15v-13.7h-.8a24.4 24.4 0 0 1-23.5 14.7 26 26 0 0 1-13.4-3.4 23 23 0 0 1-9-10 36.3 36.3 0 0 1-3.4-16.2v-50h15.3v48.1a18 18 0 0 0 4.4 12.8c3 3.2 6.9 4.8 11.6 4.8a19 19 0 0 0 15.7-8.7c1.9-2.9 2.8-6.6 2.8-11Zm72.5-46v12.3h-43V170h43m-31.4-18.8H995v74.3c0 3 .4 5.2 1.3 6.7.9 1.4 2 2.5 3.5 3 1.4.5 3 .8 4.6.8a176.6 176.6 0 0 0 5.4-.7l2.7 12.6a27.2 27.2 0 0 1-10 1.7c-4 0-7.7-.7-11.2-2.2a19.3 19.3 0 0 1-8.4-7c-2.1-3-3.2-7-3.2-11.7v-77.5Zm82.1 99c-7.7 0-14.4-1.7-20-5-5.5-3.4-9.8-8-12.8-14.1-3-6-4.6-13.2-4.6-21.3a47 47 0 0 1 4.6-21.3c3-6.1 7.2-11 12.6-14.4a38.5 38.5 0 0 1 32-3 31.3 31.3 0 0 1 19 19.2c2 5 3 11 3 18.2v5.4H1033v-11.5h47.4c0-4-.8-7.6-2.4-10.7a18.7 18.7 0 0 0-17.3-10c-4.3 0-8 1-11.2 3a22.9 22.9 0 0 0-9.9 19.2v9c0 5.2.9 9.6 2.8 13.3 1.8 3.7 4.4 6.5 7.8 8.4a23 23 0 0 0 11.7 2.9 24 24 0 0 0 7.9-1.3 16.7 16.7 0 0 0 10.2-9.9l14.4 2.6a26 26 0 0 1-6.2 11.2 30 30 0 0 1-11.2 7.4 41.6 41.6 0 0 1-15.3 2.6Zm50.7-1.6V170h14.8v12.5h.8c1.5-4.2 4-7.6 7.6-10 3.7-2.5 7.8-3.7 12.4-3.7a68 68 0 0 1 6.5.4v14.6a31.9 31.9 0 0 0-8-1 20 20 0 0 0-9.6 2.4 17.2 17.2 0 0 0-9.2 15.4v48h-15.3Z"/>
|
||||
<g fill="CURRENTCOLOR" stroke="CURRENTCOLOR">
|
||||
<path stroke-width="35.3" d="M46.2 200.5c5.9 0 28.6-5.1 40.3-11.8 11.8-6.6 11.8-6.6 36.1-23.9 30.8-21.8 52.5-14.5 88.2-14.5"/>
|
||||
<path stroke-width=".4" d="M245.3 150.5 185 185.3v-69.6l60.3 34.8Z"/>
|
||||
<path stroke-width="35.3" d="M45 200.5c5.9 0 28.6 5 40.4 11.7 11.7 6.7 11.7 6.7 36 24 30.8 21.8 52.5 14.5 88.2 14.5"/>
|
||||
<path stroke-width=".4" d="m244.1 250.4-60.3-34.7v69.5l60.3-34.8Z"/>
|
||||
</g>
|
||||
</svg>`;
|
||||
|
||||
const [apiKey, setApiKey] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
|
@ -275,6 +290,21 @@ const AISettingsScreen: React.FC = () => {
|
|||
</View>
|
||||
</View>
|
||||
|
||||
{/* Enable Toggle (top) */}
|
||||
<View style={[styles.card, { backgroundColor: currentTheme.colors.elevation1 }]}>
|
||||
<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Text style={[styles.label, { color: currentTheme.colors.highEmphasis }]}>Enable AI Chat</Text>
|
||||
<Switch
|
||||
value={!!settings.aiChatEnabled}
|
||||
onValueChange={(v) => updateSetting('aiChatEnabled', v)}
|
||||
trackColor={{ false: currentTheme.colors.elevation2, true: currentTheme.colors.primary }}
|
||||
thumbColor={settings.aiChatEnabled ? currentTheme.colors.white : currentTheme.colors.mediumEmphasis}
|
||||
ios_backgroundColor={currentTheme.colors.elevation2}
|
||||
/>
|
||||
</View>
|
||||
<Text style={[styles.description, { color: currentTheme.colors.mediumEmphasis, marginTop: 8 }]}>When enabled, the Ask AI button will appear on content pages.</Text>
|
||||
</View>
|
||||
|
||||
{/* Status Card */}
|
||||
{isKeySet && (
|
||||
<View style={[styles.statusCard, { backgroundColor: currentTheme.colors.elevation1 }]}>
|
||||
|
|
@ -307,6 +337,10 @@ const AISettingsScreen: React.FC = () => {
|
|||
• Get detailed analysis and explanations
|
||||
</Text>
|
||||
</View>
|
||||
{/* OpenRouter branding */}
|
||||
<View style={{ alignItems: 'center', marginTop: 16, marginBottom: 32 }}>
|
||||
<SvgXml xml={OPENROUTER_SVG.replace(/CURRENTCOLOR/g, currentTheme.colors.mediumEmphasis)} width={180} height={60} />
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue