mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-01-11 20:10:25 +00:00
icon updates
This commit is contained in:
parent
ab8f870e73
commit
edfbc2d937
12 changed files with 163 additions and 88 deletions
|
|
@ -1 +0,0 @@
|
|||
Subproject commit e2db539be40ab3caeef8de3725d5017474f71679
|
||||
|
|
@ -3,7 +3,7 @@ import { Toast } from 'toastify-react-native';
|
|||
import { DeviceEventEmitter } from 'react-native';
|
||||
import { View, TouchableOpacity, ActivityIndicator, StyleSheet, Dimensions, Platform, Text, Animated, Share } from 'react-native';
|
||||
import FastImage from '@d11/react-native-fast-image';
|
||||
import { MaterialIcons } from '@expo/vector-icons';
|
||||
import { MaterialIcons, Feather } from '@expo/vector-icons';
|
||||
import { useTheme } from '../../contexts/ThemeContext';
|
||||
import { useSettings } from '../../hooks/useSettings';
|
||||
import { catalogService, StreamingContent } from '../../services/catalogService';
|
||||
|
|
@ -279,7 +279,7 @@ const ContentItem = ({ item, onPress, shouldLoadImage: shouldLoadImageProp, defe
|
|||
)}
|
||||
{inLibrary && (
|
||||
<View style={styles.libraryBadge}>
|
||||
<MaterialIcons name="bookmark" size={16} color={currentTheme.colors.white} />
|
||||
<Feather name="bookmark" size={16} color={currentTheme.colors.white} />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import { NavigationProp, useNavigation } from '@react-navigation/native';
|
|||
import { RootStackParamList } from '../../navigation/AppNavigator';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import FastImage from '@d11/react-native-fast-image';
|
||||
import { MaterialIcons } from '@expo/vector-icons';
|
||||
import { MaterialIcons, Feather } from '@expo/vector-icons';
|
||||
import Animated, {
|
||||
FadeIn,
|
||||
useAnimatedStyle,
|
||||
|
|
@ -518,11 +518,7 @@ const FeaturedContent = ({ featuredContent, isSaved, handleSaveToLibrary, loadin
|
|||
onPress={handleSaveToLibrary}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<MaterialIcons
|
||||
name={isSaved ? "bookmark" : "bookmark-border"}
|
||||
size={20}
|
||||
color={currentTheme.colors.white}
|
||||
/>
|
||||
<Feather name="bookmark" size={20} color={currentTheme.colors.white} />
|
||||
<Text style={[styles.tabletSecondaryButtonText as TextStyle, { color: currentTheme.colors.white }]}>
|
||||
{isSaved ? "Saved" : "My List"}
|
||||
</Text>
|
||||
|
|
@ -628,11 +624,7 @@ const FeaturedContent = ({ featuredContent, isSaved, handleSaveToLibrary, loadin
|
|||
onPress={handleSaveToLibrary}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<MaterialIcons
|
||||
name={isSaved ? "bookmark" : "bookmark-border"}
|
||||
size={24}
|
||||
color={currentTheme.colors.white}
|
||||
/>
|
||||
<Feather name="bookmark" size={24} color={currentTheme.colors.white} />
|
||||
<Text style={[styles.myListButtonText as TextStyle, { color: currentTheme.colors.white }]}>
|
||||
{isSaved ? "Saved" : "Save"}
|
||||
</Text>
|
||||
|
|
|
|||
36
src/components/icons/MDBListIcon.tsx
Normal file
36
src/components/icons/MDBListIcon.tsx
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
import React from 'react';
|
||||
import Svg, { Path } from 'react-native-svg';
|
||||
|
||||
interface MDBListIconProps {
|
||||
size?: number;
|
||||
colorPrimary?: string; // main brand color
|
||||
colorSecondary?: string; // inner glyph color
|
||||
}
|
||||
|
||||
// MDBList logo built from provided SVG paths. Colors are kept as in the source.
|
||||
const MDBListIcon: React.FC<MDBListIconProps> = ({ size = 24, colorPrimary = '#4284CA', colorSecondary = '#FBFCFE' }) => {
|
||||
// Original SVG is 200x200; maintain square aspect.
|
||||
return (
|
||||
<Svg width={size} height={size} viewBox="0 0 200 200">
|
||||
<Path
|
||||
d="M0 0 C1.66792978 -0.00322218 3.33585625 -0.00904376 5.00376892 -0.01725769 C9.51621827 -0.03175056 14.02777213 -0.00890605 18.54011321 0.02160144 C23.26764201 0.04802245 27.99514496 0.04266913 32.72273254 0.04151917 C40.65742921 0.04432501 48.59178078 0.07032484 56.52636719 0.11132812 C65.69805194 0.15854934 74.86935941 0.17432053 84.04115695 0.17212147 C93.81318821 0.17009499 103.5850742 0.19091365 113.35706162 0.21846128 C116.17079296 0.22485272 118.98450083 0.22698443 121.79823875 0.22817802 C126.21837851 0.23119244 130.6382018 0.24951519 135.05823708 0.27967644 C136.67996915 0.28843466 138.30173764 0.29213092 139.92349243 0.29039383 C142.13745638 0.28891982 144.3505362 0.30590371 146.56437683 0.32762146 C147.80301578 0.33264899 149.04165472 0.33767653 150.31782818 0.34285641 C155.24261765 0.92801131 158.59115892 3.20576497 161.83262634 6.88911438 C166.27302108 13.16935275 165.37692865 20.80659707 165.29443359 28.16308594 C165.29765577 29.83101572 165.30347735 31.49894219 165.31169128 33.16685486 C165.32618415 37.67930421 165.30333964 42.19085806 165.27283216 46.70319915 C165.24641114 51.43072795 165.25176446 56.15823089 165.25291443 60.88581848 C165.25010859 68.82051515 165.22410875 76.75486672 165.18310547 84.68945312 C165.13588425 93.86113788 165.12011306 103.03244534 165.12231213 112.20424289 C165.1243386 121.97627415 165.10351995 131.74816014 165.07597232 141.52014756 C165.06958087 144.33387889 165.06744916 147.14758676 165.06625557 149.96132469 C165.06324115 154.38146445 165.0449184 158.80128774 165.01475716 163.22132301 C165.00599893 164.84305508 165.00230268 166.46482358 165.00403976 168.08657837 C165.00551377 170.30054231 164.98852989 172.51362214 164.96681213 174.72746277 C164.9617846 175.96610171 164.95675707 177.20474066 164.95157719 178.48091412 C164.36642229 183.40570359 162.08866863 186.75424486 158.40531921 189.99571228 C152.12508085 194.43610701 144.48783652 193.54001459 137.13134766 193.45751953 C135.46341787 193.46074171 133.7954914 193.46656329 132.12757874 193.47477722 C127.61512939 193.48927009 123.10357553 193.46642558 118.59123445 193.43591809 C113.86370564 193.40949708 109.1362027 193.4148504 104.40861511 193.41600037 C96.47391844 193.41319452 88.53956688 193.38719469 80.60498047 193.34619141 C71.43329571 193.29897019 62.26198825 193.283199 53.09019071 193.28539807 C43.31815945 193.28742454 33.54627346 193.26660588 23.77428603 193.23905826 C20.9605547 193.23266681 18.14684683 193.2305351 15.3331089 193.22934151 C10.91296915 193.22632709 6.49314586 193.20800434 2.07311058 193.17784309 C0.45137851 193.16908487 -1.17038999 193.16538861 -2.79214478 193.1671257 C-5.00610872 193.16859971 -7.21918854 193.15161582 -9.43302917 193.12989807 C-10.67166812 193.12487054 -11.91030706 193.11984301 -13.18648052 193.11466312 C-18.11127 192.52950822 -21.45981126 190.25175456 -24.70127869 186.56840515 C-29.14167342 180.28816678 -28.24558099 172.65092246 -28.16308594 165.29443359 C-28.16630812 163.62650381 -28.17212969 161.95857734 -28.18034363 160.29066467 C-28.1948365 155.77821532 -28.17199199 151.26666147 -28.1414845 146.75432038 C-28.11506349 142.02679158 -28.12041681 137.29928864 -28.12156677 132.57170105 C-28.11876093 124.63700438 -28.0927611 116.70265282 -28.05175781 108.76806641 C-28.00453659 99.59638165 -27.9887654 90.42507419 -27.99096447 81.25327665 C-27.99299095 71.48124539 -27.97217229 61.70935939 -27.94462466 51.93737197 C-27.93823322 49.12364064 -27.9361015 46.30993277 -27.93490791 43.49619484 C-27.9318935 39.07605508 -27.91357074 34.65623179 -27.8834095 30.23619652 C-27.87465127 28.61446445 -27.87095502 26.99269595 -27.87269211 25.37094116 C-27.87416611 23.15697722 -27.85718223 20.94389739 -27.83546448 18.73005676 C-27.82792318 16.87209835 -27.82792318 16.87209835 -27.82022953 14.97660542 C-27.23507463 10.05181594 -24.95732097 6.70327467 -21.27397156 3.46180725 C-14.99373319 -0.97858748 -7.35648886 -0.08249505 0 0 Z "
|
||||
fill={colorPrimary}
|
||||
transform="translate(31.434326171875,3.271240234375)"
|
||||
/>
|
||||
<Path
|
||||
d="M0 0 C6.6 0 13.2 0 20 0 C20 31.35 20 62.7 20 95 C13.07 95 6.14 95 -1 95 C-1.495 61.835 -1.495 61.835 -2 28 C-4.31 30.31 -6.62 32.62 -9 35 C-10.27529263 36.14352808 -11.56342383 37.27327602 -12.875 38.375 C-16.6813875 41.64392853 -20.16510113 45.16156149 -23.62890625 48.7890625 C-26.5115847 51.47702956 -29.79271291 53.70908065 -33 56 C-33 47.75 -33 39.5 -33 31 C-32.01 30.67 -31.02 30.34 -30 30 C-30 29.34 -30 28.68 -30 28 C-28.53125 26.5546875 -28.53125 26.5546875 -26.5 24.875 C-23.53322639 22.35742098 -20.72425751 19.77831024 -18 17 C-14.81903568 13.7691382 -11.51632264 10.76272773 -8.0546875 7.8359375 C-5.26148833 5.34011315 -2.64868843 2.64868843 0 0 Z "
|
||||
fill={colorSecondary}
|
||||
transform="translate(137,53)"
|
||||
/>
|
||||
<Path
|
||||
d="M0 0 C20 0 20 0 25.25 4.0625 C26.52181342 5.69153591 27.77330211 7.33672622 29 9 C30.25775906 10.16278542 31.5496412 11.28989548 32.875 12.375 C37.29289637 16.15544439 41.32611611 20.29459348 45.38671875 24.44921875 C47.84792716 27.08141814 47.84792716 27.08141814 50.8125 28.53515625 C54.61867348 32.82389815 53.51112253 38.25579538 53.3125 43.75 C53.28994141 44.92433594 53.26738281 46.09867188 53.24414062 47.30859375 C53.1852296 50.20701637 53.10301631 53.10286427 53 56 C45.07251219 49.23433606 37.23028913 42.42428166 29.984375 34.921875 C27.45416984 32.47136135 24.70594485 30.25495404 22 28 C21.67 50.11 21.34 72.22 21 95 C14.07 95 7.14 95 0 95 C0 63.65 0 32.3 0 0 Z "
|
||||
fill={colorSecondary}
|
||||
transform="translate(43,53)"
|
||||
/>
|
||||
</Svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default MDBListIcon;
|
||||
|
||||
|
||||
34
src/components/icons/TMDBIcon.tsx
Normal file
34
src/components/icons/TMDBIcon.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import React from 'react';
|
||||
import Svg, { Defs, LinearGradient, Stop, Path } from 'react-native-svg';
|
||||
|
||||
interface TMDBIconProps {
|
||||
size?: number;
|
||||
color?: string; // primary theme color to tint the logo
|
||||
}
|
||||
|
||||
// TMDB logo rendered via react-native-svg. The gradient is themed using the provided color.
|
||||
const TMDBIcon: React.FC<TMDBIconProps> = ({ size = 24, color = '#00b3e5' }) => {
|
||||
// Maintain aspect ratio from original viewBox 185.04 x 133.4
|
||||
const width = size * (185.04 / 133.4);
|
||||
const height = size;
|
||||
|
||||
return (
|
||||
<Svg width={width} height={height} viewBox="0 0 185.04 133.4">
|
||||
<Defs>
|
||||
<LinearGradient id="tmdb-gradient" x1={0} y1={66.7} x2={185.04} y2={66.7} gradientUnits="userSpaceOnUse">
|
||||
<Stop offset={0} stopColor={color} />
|
||||
<Stop offset={0.56} stopColor={color} />
|
||||
<Stop offset={1} stopColor={color} />
|
||||
</LinearGradient>
|
||||
</Defs>
|
||||
<Path
|
||||
fill="url(#tmdb-gradient)"
|
||||
d="M51.06,66.7h0A17.67,17.67,0,0,1,68.73,49h-.1A17.67,17.67,0,0,1,86.3,66.7h0A17.67,17.67,0,0,1,68.63,84.37h.1A17.67,17.67,0,0,1,51.06,66.7Zm82.67-31.33h32.9A17.67,17.67,0,0,0,184.3,17.7h0A17.67,17.67,0,0,0,166.63,0h-32.9A17.67,17.67,0,0,0,116.06,17.7h0A17.67,17.67,0,0,0,133.73,35.37Zm-113,98h63.9A17.67,17.67,0,0,0,102.3,115.7h0A17.67,17.67,0,0,0,84.63,98H20.73A17.67,17.67,0,0,0,3.06,115.7h0A17.67,17.67,0,0,0,20.73,133.37Zm83.92-49h6.25L125.5,49h-8.35l-8.9,23.2h-.1L99.4,49H90.5Zm32.45,0h7.8V49h-7.8Zm22.2,0h24.95V77.2H167.1V70h15.35V62.8H167.1V56.2h16.25V49h-24ZM10.1,35.4h7.8V6.9H28V0H0V6.9H10.1ZM39,35.4h7.8V20.1H61.9V35.4h7.8V0H61.9V13.2H46.75V0H39Zm41.25,0h25V28.2H88V21h15.35V13.8H88V7.2h16.25V0h-24Zm-79,49H9V57.25h.1l9,27.15H24l9.3-27.15h.1V84.4h7.8V49H29.45l-8.2,23.1h-.1L13,49H1.2Zm112.09,49H126a24.59,24.59,0,0,0,7.56-1.15,19.52,19.52,0,0,0,6.35-3.37,16.37,16.37,0,0,0,4.37-5.5A16.91,16.91,0,0,0,146,115.8a18.5,18.5,0,0,0-1.68-8.25,15.1,15.1,0,0,0-4.52-5.53A18.55,18.55,0,0,0,133.07,99,33.54,33.54,0,0,0,125,98H113.29Zm7.81-28.2h4.6a17.43,17.43,0,0,1,4.67.62,11.68,11.68,0,0,1,3.88,1.88,9,9,0,0,1,2.62,3.18,9.87,9.87,0,0,1,1,4.52,11.92,11.92,0,0,1-1,5.08,8.69,8.69,0,0,1-2.67,3.34,10.87,10.87,0,0,1-4,1.83,21.57,21.57,0,0,1-5,.55H121.1Zm36.14,28.2h14.5a23.11,23.11,0,0,0,4.73-.5,13.38,13.38,0,0,0,4.27-1.65,9.42,9.42,0,0,0,3.1-3,8.52,8.52,0,0,0,1.2-4.68,9.16,9.16,0,0,0-.55-3.2,7.79,7.79,0,0,0-1.57-2.62,8.38,8.38,0,0,0-2.45-1.85,10,10,0,0,0-3.18-1v-.1a9.28,9.28,0,0,0,4.43-2.82,7.42,7.42,0,0,0,1.67-5,8.34,8.34,0,0,0-1.15-4.65,7.88,7.88,0,0,0-3-2.73,12.9,12.9,0,0,0-4.17-1.3,34.42,34.42,0,0,0-4.63-.32h-13.2Zm7.8-28.8h5.3a10.79,10.79,0,0,1,1.85.17,5.77,5.77,0,0,1,1.7.58,3.33,3.33,0,0,1,1.23,1.13,3.22,3.22,0,0,1,.47,1.82,3.63,3.63,0,0,1-.42,1.8,3.34,3.34,0,0,1-1.13,1.2,4.78,4.78,0,0,1-1.57.65,8.16,8.16,0,0,1-1.78.2H165Zm0,14.15h5.9a15.12,15.12,0,0,1,2.05.15,7.83,7.83,0,0,1,2,.55,4,4,0,0,1,1.58,1.17,3.13,3.13,0,0,1,.62,2,3.71,3.71,0,0,1-.47,1.95,4,4,0,0,1-1.23,1.3,4.78,4.78,0,0,1-1.67.7,8.91,8.91,0,0,1-1.83.2h-7Z"
|
||||
/>
|
||||
</Svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default TMDBIcon;
|
||||
|
||||
|
||||
|
|
@ -8,7 +8,7 @@ import {
|
|||
Dimensions,
|
||||
} from 'react-native';
|
||||
import { BlurView as ExpoBlurView } from 'expo-blur';
|
||||
import { MaterialIcons } from '@expo/vector-icons';
|
||||
import { MaterialIcons, Feather } from '@expo/vector-icons';
|
||||
import FastImage from '@d11/react-native-fast-image';
|
||||
import Animated, {
|
||||
useAnimatedStyle,
|
||||
|
|
@ -115,11 +115,7 @@ const FloatingHeader: React.FC<FloatingHeaderProps> = ({
|
|||
onPress={handleToggleLibrary}
|
||||
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
||||
>
|
||||
<MaterialIcons
|
||||
name={inLibrary ? 'bookmark' : 'bookmark-border'}
|
||||
size={22}
|
||||
color={currentTheme.colors.highEmphasis}
|
||||
/>
|
||||
<Feather name="bookmark" size={22} color={currentTheme.colors.highEmphasis} />
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
</ExpoBlurView>
|
||||
|
|
@ -164,11 +160,7 @@ const FloatingHeader: React.FC<FloatingHeaderProps> = ({
|
|||
onPress={handleToggleLibrary}
|
||||
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
||||
>
|
||||
<MaterialIcons
|
||||
name={inLibrary ? 'bookmark' : 'bookmark-border'}
|
||||
size={22}
|
||||
color={currentTheme.colors.highEmphasis}
|
||||
/>
|
||||
<Feather name="bookmark" size={22} color={currentTheme.colors.highEmphasis} />
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
</View>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import {
|
|||
} from 'react-native';
|
||||
import { useFocusEffect, useIsFocused } from '@react-navigation/native';
|
||||
|
||||
import { MaterialIcons } from '@expo/vector-icons';
|
||||
import { MaterialIcons, Entypo, Feather } from '@expo/vector-icons';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
// Replaced FastImage with standard Image for logos
|
||||
import { BlurView as ExpoBlurView } from 'expo-blur';
|
||||
|
|
@ -285,8 +285,8 @@ const ActionButtons = memo(({
|
|||
) : (
|
||||
<View style={styles.androidFallbackBlur} />
|
||||
)}
|
||||
<MaterialIcons
|
||||
name={inLibrary ? 'bookmark' : 'bookmark-border'}
|
||||
<Feather
|
||||
name="bookmark"
|
||||
size={isTablet ? 28 : 24}
|
||||
color={currentTheme.colors.white}
|
||||
/>
|
||||
|
|
@ -1451,8 +1451,8 @@ const HeroSection: React.FC<HeroSectionProps> = memo(({
|
|||
borderRadius: 20,
|
||||
}}
|
||||
>
|
||||
<MaterialIcons
|
||||
name={trailerMuted ? 'volume-off' : 'volume-up'}
|
||||
<Entypo
|
||||
name={trailerMuted ? 'sound-mute' : 'sound'}
|
||||
size={24}
|
||||
color="white"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
|
|||
import { PaperProvider, MD3DarkTheme, MD3LightTheme, adaptNavigationTheme } from 'react-native-paper';
|
||||
import type { MD3Theme } from 'react-native-paper';
|
||||
import type { BottomTabBarProps } from '@react-navigation/bottom-tabs';
|
||||
import { MaterialCommunityIcons } from '@expo/vector-icons';
|
||||
import { MaterialCommunityIcons, Feather, Ionicons } from '@expo/vector-icons';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { BlurView } from 'expo-blur';
|
||||
import { colors } from '../styles/colors';
|
||||
|
|
@ -352,17 +352,14 @@ export const CustomNavigationDarkTheme: Theme = {
|
|||
fonts,
|
||||
};
|
||||
|
||||
type IconNameType = 'home' | 'home-outline' | 'compass' | 'compass-outline' |
|
||||
'play-box-multiple' | 'play-box-multiple-outline' |
|
||||
'puzzle' | 'puzzle-outline' |
|
||||
'cog' | 'cog-outline' | 'feature-search' | 'feature-search-outline' |
|
||||
'magnify' | 'heart' | 'heart-outline' | 'download' | 'download-outline';
|
||||
type IconNameType = string;
|
||||
|
||||
// Add TabIcon component
|
||||
const TabIcon = React.memo(({ focused, color, iconName }: {
|
||||
const TabIcon = React.memo(({ focused, color, iconName, iconLibrary = 'material' }: {
|
||||
focused: boolean;
|
||||
color: string;
|
||||
iconName: IconNameType;
|
||||
iconLibrary?: 'material' | 'feather' | 'ionicons';
|
||||
}) => {
|
||||
const scaleAnim = useRef(new Animated.Value(1)).current;
|
||||
|
||||
|
|
@ -375,8 +372,11 @@ const TabIcon = React.memo(({ focused, color, iconName }: {
|
|||
}).start();
|
||||
}, [focused]);
|
||||
|
||||
// Use outline variant when available, but keep single-form icons (like 'magnify') the same
|
||||
// Use outline variant when available for Material icons; Feather has single-form icons
|
||||
const finalIconName = (() => {
|
||||
if (iconLibrary === 'feather') {
|
||||
return iconName;
|
||||
}
|
||||
if (iconName === 'magnify') return 'magnify';
|
||||
return focused ? iconName : `${iconName}-outline` as IconNameType;
|
||||
})();
|
||||
|
|
@ -387,11 +387,25 @@ const TabIcon = React.memo(({ focused, color, iconName }: {
|
|||
justifyContent: 'center',
|
||||
transform: [{ scale: scaleAnim }]
|
||||
}}>
|
||||
<MaterialCommunityIcons
|
||||
name={finalIconName}
|
||||
size={24}
|
||||
color={color}
|
||||
/>
|
||||
{iconLibrary === 'feather' ? (
|
||||
<Feather
|
||||
name={finalIconName as any}
|
||||
size={24}
|
||||
color={color}
|
||||
/>
|
||||
) : iconLibrary === 'ionicons' ? (
|
||||
<Ionicons
|
||||
name={finalIconName as any}
|
||||
size={24}
|
||||
color={color}
|
||||
/>
|
||||
) : (
|
||||
<MaterialCommunityIcons
|
||||
name={finalIconName as any}
|
||||
size={24}
|
||||
color={color}
|
||||
/>
|
||||
)}
|
||||
</Animated.View>
|
||||
);
|
||||
});
|
||||
|
|
@ -698,21 +712,27 @@ const MainTabs = () => {
|
|||
};
|
||||
|
||||
let iconName: IconNameType = 'home';
|
||||
let iconLibrary: 'material' | 'feather' | 'ionicons' = 'material';
|
||||
switch (route.name) {
|
||||
case 'Home':
|
||||
iconName = 'home';
|
||||
iconLibrary = 'feather';
|
||||
break;
|
||||
case 'Library':
|
||||
iconName = 'heart';
|
||||
iconName = 'library';
|
||||
iconLibrary = 'ionicons';
|
||||
break;
|
||||
case 'Search':
|
||||
iconName = 'magnify';
|
||||
iconName = 'search';
|
||||
iconLibrary = 'feather';
|
||||
break;
|
||||
case 'Downloads':
|
||||
iconName = 'download';
|
||||
iconLibrary = 'feather';
|
||||
break;
|
||||
case 'Settings':
|
||||
iconName = 'cog';
|
||||
iconName = 'settings';
|
||||
iconLibrary = 'feather';
|
||||
break;
|
||||
}
|
||||
|
||||
|
|
@ -732,6 +752,7 @@ const MainTabs = () => {
|
|||
focused={isFocused}
|
||||
color={isFocused ? currentTheme.colors.primary : currentTheme.colors.white}
|
||||
iconName={iconName}
|
||||
iconLibrary={iconLibrary}
|
||||
/>
|
||||
<Text
|
||||
style={{
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ import {
|
|||
import { FlashList } from '@shopify/flash-list';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import { NavigationProp } from '@react-navigation/native';
|
||||
import { MaterialIcons } from '@expo/vector-icons';
|
||||
import { MaterialIcons, Feather } from '@expo/vector-icons';
|
||||
import FastImage from '@d11/react-native-fast-image';
|
||||
import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
|
|
@ -961,8 +961,8 @@ const LibraryScreen = () => {
|
|||
onPress={() => navigation.navigate('Calendar')}
|
||||
activeOpacity={0.7}
|
||||
>
|
||||
<MaterialIcons
|
||||
name="event"
|
||||
<Feather
|
||||
name="calendar"
|
||||
size={24}
|
||||
color={currentTheme.colors.white}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import {
|
|||
} from 'react-native';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import { NavigationProp } from '@react-navigation/native';
|
||||
import { MaterialIcons } from '@expo/vector-icons';
|
||||
import { MaterialIcons, Feather } from '@expo/vector-icons';
|
||||
import { catalogService, StreamingContent, GroupedSearchResults, AddonSearchResults } from '../services/catalogService';
|
||||
import FastImage from '@d11/react-native-fast-image';
|
||||
import debounce from 'lodash/debounce';
|
||||
|
|
@ -579,7 +579,7 @@ const SearchScreen = () => {
|
|||
{/* Bookmark and watched icons top right, bookmark to the left of watched */}
|
||||
{inLibrary && (
|
||||
<View style={[styles.libraryBadge, { position: 'absolute', top: 8, right: 36, backgroundColor: 'transparent', zIndex: 2 }] }>
|
||||
<MaterialIcons name="bookmark" size={16} color={currentTheme.colors.white} />
|
||||
<Feather name="bookmark" size={16} color={currentTheme.colors.white} />
|
||||
</View>
|
||||
)}
|
||||
{watched && (
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
|
|||
import { useNavigation } from '@react-navigation/native';
|
||||
import { NavigationProp } from '@react-navigation/native';
|
||||
import FastImage from '@d11/react-native-fast-image';
|
||||
import { MaterialIcons } from '@expo/vector-icons';
|
||||
import { Feather } from '@expo/vector-icons';
|
||||
import { Picker } from '@react-native-picker/picker';
|
||||
import { useSettings, DEFAULT_SETTINGS } from '../hooks/useSettings';
|
||||
import { RootStackParamList } from '../navigation/AppNavigator';
|
||||
|
|
@ -33,6 +33,8 @@ import { getDisplayedAppVersion } from '../utils/version';
|
|||
import CustomAlert from '../components/CustomAlert';
|
||||
import PluginIcon from '../components/icons/PluginIcon';
|
||||
import TraktIcon from '../components/icons/TraktIcon';
|
||||
import TMDBIcon from '../components/icons/TMDBIcon';
|
||||
import MDBListIcon from '../components/icons/MDBListIcon';
|
||||
|
||||
const { width, height } = Dimensions.get('window');
|
||||
const isTablet = width >= 768;
|
||||
|
|
@ -41,17 +43,17 @@ const ANDROID_STATUSBAR_HEIGHT = StatusBar.currentHeight || 0;
|
|||
|
||||
// Settings categories for tablet sidebar
|
||||
const SETTINGS_CATEGORIES = [
|
||||
{ id: 'account', title: 'Account', icon: 'account-circle' as keyof typeof MaterialIcons.glyphMap },
|
||||
{ id: 'content', title: 'Content & Discovery', icon: 'explore' as keyof typeof MaterialIcons.glyphMap },
|
||||
{ id: 'appearance', title: 'Appearance', icon: 'palette' as keyof typeof MaterialIcons.glyphMap },
|
||||
{ id: 'integrations', title: 'Integrations', icon: 'extension' as keyof typeof MaterialIcons.glyphMap },
|
||||
{ id: 'ai', title: 'AI Assistant', icon: 'smart-toy' as keyof typeof MaterialIcons.glyphMap },
|
||||
{ id: 'playback', title: 'Playback', icon: 'play-circle-outline' as keyof typeof MaterialIcons.glyphMap },
|
||||
{ id: 'backup', title: 'Backup & Restore', icon: 'save' as keyof typeof MaterialIcons.glyphMap },
|
||||
{ id: 'updates', title: 'Updates', icon: 'system-update' as keyof typeof MaterialIcons.glyphMap },
|
||||
{ id: 'about', title: 'About', icon: 'info-outline' as keyof typeof MaterialIcons.glyphMap },
|
||||
{ id: 'developer', title: 'Developer', icon: 'code' as keyof typeof MaterialIcons.glyphMap },
|
||||
{ id: 'cache', title: 'Cache', icon: 'cached' as keyof typeof MaterialIcons.glyphMap },
|
||||
{ id: 'account', title: 'Account', icon: 'user' as string },
|
||||
{ id: 'content', title: 'Content & Discovery', icon: 'compass' as string },
|
||||
{ id: 'appearance', title: 'Appearance', icon: 'sliders' as string },
|
||||
{ id: 'integrations', title: 'Integrations', icon: 'layers' as string },
|
||||
{ id: 'ai', title: 'AI Assistant', icon: 'cpu' as string },
|
||||
{ id: 'playback', title: 'Playback', icon: 'play-circle' as string },
|
||||
{ id: 'backup', title: 'Backup & Restore', icon: 'archive' as string },
|
||||
{ id: 'updates', title: 'Updates', icon: 'refresh-ccw' as string },
|
||||
{ id: 'about', title: 'About', icon: 'info' as string },
|
||||
{ id: 'developer', title: 'Developer', icon: 'code' as string },
|
||||
{ id: 'cache', title: 'Cache', icon: 'database' as string },
|
||||
];
|
||||
|
||||
// Card component with minimalistic style
|
||||
|
|
@ -94,7 +96,7 @@ const SettingsCard: React.FC<SettingsCardProps> = ({ children, title, isTablet =
|
|||
interface SettingItemProps {
|
||||
title: string;
|
||||
description?: string;
|
||||
icon?: keyof typeof MaterialIcons.glyphMap;
|
||||
icon?: string;
|
||||
customIcon?: React.ReactNode;
|
||||
renderControl?: () => React.ReactNode;
|
||||
isLast?: boolean;
|
||||
|
|
@ -139,8 +141,8 @@ const SettingItem: React.FC<SettingItemProps> = ({
|
|||
{customIcon ? (
|
||||
customIcon
|
||||
) : (
|
||||
<MaterialIcons
|
||||
name={icon!}
|
||||
<Feather
|
||||
name={icon! as any}
|
||||
size={isTablet ? 24 : 20}
|
||||
color={currentTheme.colors.primary}
|
||||
/>
|
||||
|
|
@ -216,8 +218,8 @@ const Sidebar: React.FC<SidebarProps> = ({ selectedCategory, onCategorySelect, c
|
|||
]}
|
||||
onPress={() => onCategorySelect(category.id)}
|
||||
>
|
||||
<MaterialIcons
|
||||
name={category.icon}
|
||||
<Feather
|
||||
name={category.icon as any}
|
||||
size={22}
|
||||
color={
|
||||
selectedCategory === category.id
|
||||
|
|
@ -415,7 +417,7 @@ const SettingsScreen: React.FC = () => {
|
|||
);
|
||||
|
||||
const ChevronRight = () => (
|
||||
<MaterialIcons
|
||||
<Feather
|
||||
name="chevron-right"
|
||||
size={isTablet ? 24 : 20}
|
||||
color={currentTheme.colors.mediumEmphasis}
|
||||
|
|
@ -454,7 +456,7 @@ const SettingsScreen: React.FC = () => {
|
|||
<SettingItem
|
||||
title="Addons"
|
||||
description={`${addonCount} installed`}
|
||||
icon="extension"
|
||||
icon="layers"
|
||||
renderControl={ChevronRight}
|
||||
onPress={() => navigation.navigate('Addons')}
|
||||
isTablet={isTablet}
|
||||
|
|
@ -470,7 +472,7 @@ const SettingsScreen: React.FC = () => {
|
|||
<SettingItem
|
||||
title="Catalogs"
|
||||
description={`${catalogCount} active`}
|
||||
icon="view-list"
|
||||
icon="list"
|
||||
renderControl={ChevronRight}
|
||||
onPress={() => navigation.navigate('CatalogSettings')}
|
||||
isTablet={isTablet}
|
||||
|
|
@ -493,7 +495,7 @@ const SettingsScreen: React.FC = () => {
|
|||
<SettingItem
|
||||
title="Theme"
|
||||
description={currentTheme.name}
|
||||
icon="palette"
|
||||
icon="sliders"
|
||||
renderControl={ChevronRight}
|
||||
onPress={() => navigation.navigate('ThemeSettings')}
|
||||
isTablet={isTablet}
|
||||
|
|
@ -501,7 +503,7 @@ const SettingsScreen: React.FC = () => {
|
|||
<SettingItem
|
||||
title="Episode Layout"
|
||||
description={settings?.episodeLayoutStyle === 'horizontal' ? 'Horizontal' : 'Vertical'}
|
||||
icon="view-module"
|
||||
icon="grid"
|
||||
renderControl={() => (
|
||||
<CustomSwitch
|
||||
value={settings?.episodeLayoutStyle === 'horizontal'}
|
||||
|
|
@ -520,7 +522,7 @@ const SettingsScreen: React.FC = () => {
|
|||
<SettingItem
|
||||
title="MDBList"
|
||||
description={mdblistKeySet ? "Connected" : "Enable to add ratings & reviews"}
|
||||
icon="star"
|
||||
customIcon={<MDBListIcon size={isTablet ? 24 : 20} colorPrimary={currentTheme.colors.primary} colorSecondary={currentTheme.colors.white} />}
|
||||
renderControl={ChevronRight}
|
||||
onPress={() => navigation.navigate('MDBListSettings')}
|
||||
isTablet={isTablet}
|
||||
|
|
@ -528,7 +530,7 @@ const SettingsScreen: React.FC = () => {
|
|||
<SettingItem
|
||||
title="TMDB"
|
||||
description="Metadata & logo source provider"
|
||||
icon="movie"
|
||||
customIcon={<TMDBIcon size={isTablet ? 24 : 20} color={currentTheme.colors.primary} />}
|
||||
renderControl={ChevronRight}
|
||||
onPress={() => navigation.navigate('TMDBSettings')}
|
||||
isLast={true}
|
||||
|
|
@ -543,7 +545,7 @@ const SettingsScreen: React.FC = () => {
|
|||
<SettingItem
|
||||
title="OpenRouter API"
|
||||
description={openRouterKeySet ? "Connected" : "Add your API key to enable AI chat"}
|
||||
icon="smart-toy"
|
||||
icon="cpu"
|
||||
renderControl={ChevronRight}
|
||||
onPress={() => navigation.navigate('AISettings')}
|
||||
isLast={true}
|
||||
|
|
@ -561,7 +563,7 @@ const SettingsScreen: React.FC = () => {
|
|||
? (settings?.preferredPlayer === 'internal' ? 'Built-in' : settings?.preferredPlayer?.toUpperCase() || 'Built-in')
|
||||
: (settings?.useExternalPlayer ? 'External' : 'Built-in')
|
||||
}
|
||||
icon="play-circle-outline"
|
||||
icon="play-circle"
|
||||
renderControl={ChevronRight}
|
||||
onPress={() => navigation.navigate('PlayerSettings')}
|
||||
isTablet={isTablet}
|
||||
|
|
@ -569,7 +571,7 @@ const SettingsScreen: React.FC = () => {
|
|||
<SettingItem
|
||||
title="Show Trailers"
|
||||
description="Display trailers in hero section"
|
||||
icon="movie"
|
||||
icon="film"
|
||||
renderControl={() => (
|
||||
<Switch
|
||||
value={settings?.showTrailers ?? true}
|
||||
|
|
@ -597,7 +599,7 @@ const SettingsScreen: React.FC = () => {
|
|||
<SettingItem
|
||||
title="Notifications"
|
||||
description="Episode reminders"
|
||||
icon="notifications-none"
|
||||
icon="bell"
|
||||
renderControl={ChevronRight}
|
||||
onPress={() => navigation.navigate('NotificationSettings')}
|
||||
isLast={true}
|
||||
|
|
@ -618,7 +620,7 @@ const SettingsScreen: React.FC = () => {
|
|||
/>
|
||||
<SettingItem
|
||||
title="Report Issue"
|
||||
icon="bug-report"
|
||||
icon="alert-triangle"
|
||||
onPress={() => Sentry.showFeedbackWidget()}
|
||||
renderControl={ChevronRight}
|
||||
isTablet={isTablet}
|
||||
|
|
@ -626,7 +628,7 @@ const SettingsScreen: React.FC = () => {
|
|||
<SettingItem
|
||||
title="Version"
|
||||
description={getDisplayedAppVersion()}
|
||||
icon="info-outline"
|
||||
icon="info"
|
||||
isLast={true}
|
||||
isTablet={isTablet}
|
||||
/>
|
||||
|
|
@ -638,14 +640,14 @@ const SettingsScreen: React.FC = () => {
|
|||
<SettingsCard title="DEVELOPER" isTablet={isTablet}>
|
||||
<SettingItem
|
||||
title="Test Onboarding"
|
||||
icon="play-circle-outline"
|
||||
icon="play-circle"
|
||||
onPress={() => navigation.navigate('Onboarding')}
|
||||
renderControl={ChevronRight}
|
||||
isTablet={isTablet}
|
||||
/>
|
||||
<SettingItem
|
||||
title="Reset Onboarding"
|
||||
icon="refresh"
|
||||
icon="refresh-ccw"
|
||||
onPress={async () => {
|
||||
try {
|
||||
await AsyncStorage.removeItem('hasCompletedOnboarding');
|
||||
|
|
@ -659,7 +661,7 @@ const SettingsScreen: React.FC = () => {
|
|||
/>
|
||||
<SettingItem
|
||||
title="Clear All Data"
|
||||
icon="delete-forever"
|
||||
icon="trash-2"
|
||||
onPress={() => {
|
||||
openAlert(
|
||||
'Clear All Data',
|
||||
|
|
@ -691,7 +693,7 @@ const SettingsScreen: React.FC = () => {
|
|||
<SettingsCard title="CACHE MANAGEMENT" isTablet={isTablet}>
|
||||
<SettingItem
|
||||
title="Clear MDBList Cache"
|
||||
icon="cached"
|
||||
icon="database"
|
||||
onPress={handleClearMDBListCache}
|
||||
isLast={true}
|
||||
isTablet={isTablet}
|
||||
|
|
@ -705,7 +707,7 @@ const SettingsScreen: React.FC = () => {
|
|||
<SettingItem
|
||||
title="Backup & Restore"
|
||||
description="Create and restore app backups"
|
||||
icon="backup"
|
||||
icon="archive"
|
||||
renderControl={ChevronRight}
|
||||
onPress={() => navigation.navigate('Backup')}
|
||||
isLast={true}
|
||||
|
|
@ -720,7 +722,7 @@ const SettingsScreen: React.FC = () => {
|
|||
<SettingItem
|
||||
title="App Updates"
|
||||
description="Check for updates and manage app version"
|
||||
icon="system-update"
|
||||
icon="refresh-ccw"
|
||||
renderControl={ChevronRight}
|
||||
badge={Platform.OS === 'android' && hasUpdateBadge ? 1 : undefined}
|
||||
onPress={async () => {
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
Subproject commit 17a44eb5d18612611cc9b0eca269101ddbf0311b
|
||||
Loading…
Reference in a new issue