open-lab/lnreader
2
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: Add cover placeholder color

Browse Source
This commit is contained in:
Rajarshee Chatterjee
2022-04-24 19:11:19 +05:30
parent 1c3ea20aaf
commit acfb73c424
11 changed files with 62 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ListView.js
+3 -6
View File
@@ -3,6 +3,7 @@ import { StyleSheet, View, Text, Pressable } from 'react-native';
import FastImage from 'react-native-fast-image';
import { defaultCoverUri } from '../sources/helpers/constants';
import { coverPlaceholderColor } from '../theme/colors';
const ListView = ({
item,
@@ -14,11 +15,6 @@ const ListView = ({
isSelected,
onLongPress,
}) => {
const uri =
item.novelCover && !item.novelCover.startsWith('/')
? item.novelCover
: defaultCoverUri;
return (
<Pressable
android_ripple={{ color: theme.rippleColor }}
@@ -31,7 +27,7 @@ const ListView = ({
>
<FastImage
source={{
uri,
uri: item.novelCover,
}}
style={[styles.extensionIcon, inLibraryBadge && { opacity: 0.5 }]}
/>
@@ -64,6 +60,7 @@ const styles = StyleSheet.create({
width: 40,
height: 40,
borderRadius: 4,
backgroundColor: coverPlaceholderColor,
},
novelName: {
flex: 1,
src/components/NovelCover.js
+7 -5
View File
@@ -15,6 +15,7 @@ import ListView from './ListView';
import { useDeviceOrientation } from '../services/utils/helpers';
import { useSettings } from '../hooks/reduxHooks';
import { defaultCoverUri } from '../sources/helpers/constants';
import { coverPlaceholderColor } from '../theme/colors';
const NovelCover = ({
item,
@@ -43,10 +44,7 @@ const NovelCover = ({
const selectNovel = () => onLongPress && onLongPress(item.novelId);
const uri =
item.novelCover && !item.novelCover.startsWith('/')
? item.novelCover
: defaultCoverUri;
const uri = item.novelCover;
return displayMode !== 2 ? (
<View
@@ -92,7 +90,11 @@ const NovelCover = ({
<FastImage
source={{ uri }}
style={[
{ height: getHeight(), borderRadius: 4 },
{
height: getHeight(),
borderRadius: 4,
backgroundColor: coverPlaceholderColor,
},
libraryStatus && { opacity: 0.5 },
]}
/>
src/screens/browse/components/SourceCard/SourceCard.tsx
+2
View File
@@ -5,6 +5,7 @@ import { Button, IconButtonV2 } from '../../../../components';
import { ButtonVariation } from '../../../../components/Button/Button';
import { Source } from '../../../../sources/types';
import { coverPlaceholderColor } from '../../../../theme/colors';
import { ThemeTypeV1 } from '../../../../theme/v1/theme/types';
interface Props {
@@ -72,6 +73,7 @@ const styles = StyleSheet.create({
height: 40,
width: 40,
borderRadius: 4,
backgroundColor: coverPlaceholderColor,
},
details: {
marginLeft: 16,
src/screens/browse/globalsearch/GlobalSearchNovelCover.js
+3 -2
View File
@@ -1,6 +1,7 @@
import React from 'react';
import { StyleSheet, View, Text, Image, Pressable } from 'react-native';
import { defaultCoverUri } from '../../../sources/helpers/constants';
import { coverPlaceholderColor } from '../../../theme/colors';
const GlobalSearchNovelCover = ({
novel,
@@ -11,8 +12,7 @@ const GlobalSearchNovelCover = ({
}) => {
const { novelName, novelCover } = novel;
const uri =
novelCover && !novelCover.startsWith('/') ? novelCover : defaultCoverUri;
const uri = novelCover;
return (
<View style={styles.container}>
@@ -56,6 +56,7 @@ const styles = StyleSheet.create({
height: 150,
width: 115,
borderRadius: 4,
backgroundColor: coverPlaceholderColor,
},
title: {
fontFamily: 'pt-sans-bold',
src/screens/history/components/HistoryCard/HistoryCard.tsx
+2
View File
@@ -10,6 +10,7 @@ import { parseChapterNumber } from '../../../../utils/parseChapterNumber';
import { History } from '../../../../database/types';
import { ThemeTypeV1 } from '../../../../theme/v1/theme/types';
import { coverPlaceholderColor } from '../../../../theme/colors';
interface HistoryCardProps {
history: History;
@@ -128,6 +129,7 @@ const styles = StyleSheet.create({
height: 80,
width: 56,
borderRadius: 4,
backgroundColor: coverPlaceholderColor,
},
detailsContainer: {
flex: 1,
src/screens/novel/components/Info/NovelInfoComponents.js
+14 -7
View File
@@ -15,6 +15,7 @@ import { easeGradient } from 'react-native-easing-gradient';
import FastImage from 'react-native-fast-image';
import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
import { Chip } from '../../../../components';
import { coverPlaceholderColor } from '../../../../theme/colors';
const NovelInfoContainer = ({ children }) => (
<View style={styles.novelInfoContainer}>{children}</View>
@@ -39,13 +40,17 @@ const CoverImage = ({ children, source, theme, hideBackdrop }) => {
backgroundColor: `${theme.colorPrimaryDark}B4`,
}}
>
<LinearGradient
colors={colors}
locations={locations}
style={styles.linearGradient}
>
{children}
</LinearGradient>
{source.uri ? (
<LinearGradient
colors={colors}
locations={locations}
style={styles.linearGradient}
>
{children}
</LinearGradient>
) : (
children
)}
</View>
</FastImage>
);
@@ -242,12 +247,14 @@ const styles = StyleSheet.create({
},
linearGradient: {
height: 271,
flex: 1,
},
novelThumbnail: {
height: 150,
width: 100,
marginHorizontal: 4,
borderRadius: 6,
backgroundColor: coverPlaceholderColor,
},
novelTitle: {
fontSize: 18,
src/screens/novel/components/Info/NovelInfoHeader.js
+2 -21
View File
@@ -42,25 +42,6 @@ const NovelInfoHeader = ({
const dispatch = useAppDispatch();
const getNovelCoverUrl = () => {
const defaultCover =
'https://github.com/LNReader/lnreader-sources/blob/main/src/coverNotAvailable.jpg?raw=true';
if (loading) {
if (item.novelCover && !item.novelCover.startsWith('/')) {
return item.novelCover;
} else {
return defaultCover;
}
} else {
if (novel.novelCover && !novel.novelCover.startsWith('/')) {
return novel.novelCover;
} else {
return defaultCover;
}
}
};
const getStatusIcon = useMemo(
() => ({
Ongoing: 'clock-outline',
@@ -73,13 +54,13 @@ const NovelInfoHeader = ({
return (
<>
<CoverImage
source={{ uri: getNovelCoverUrl() }}
source={{ uri: !loading ? novel.novelCover : item.novelCover }}
theme={theme}
hideBackdrop={hideBackdrop}
>
<NovelInfoContainer>
<NovelThumbnail
source={{ uri: getNovelCoverUrl() }}
source={{ uri: !loading ? novel.novelCover : item.novelCover }}
theme={theme}
setCustomNovelCover={setCustomNovelCover}
/>
src/screens/updates/UpdatesScreen.tsx
+8 -1
View File
@@ -118,12 +118,19 @@ const UpdatesScreen = () => {
} as never,
);
const navigateToNovel = (sourceId: number, novelUrl: string) =>
const navigateToNovel = (
sourceId: number,
novelUrl: string,
novelName: string,
novelCover: string,
) =>
navigate(
'Novel' as never,
{
sourceId,
novelUrl,
novelName,
novelCover,
} as never,
);
src/screens/updates/components/UpdateCard/UpdateCard.tsx
+16 -2
View File
@@ -13,6 +13,7 @@ import { IconButtonV2 } from '../../../../components';
import { useDownloadQueue } from '../../../../redux/hooks';
import { Menu } from 'react-native-paper';
import { ThemeTypeV1 } from '../../../../theme/v1/theme/types';
import { coverPlaceholderColor } from '../../../../theme/colors';
interface UpdateCardProps {
item: Update;
@@ -24,7 +25,12 @@ interface UpdateCardProps {
chapterUrl: string,
isBookmarked: number,
) => void;
navigateToNovel: (sourceId: number, novelUrl: string) => void;
navigateToNovel: (
sourceId: number,
novelUrl: string,
novelName: string,
novelCover: string,
) => void;
handleDownloadChapter: (
sourceId: number,
novelUrl: string,
@@ -74,7 +80,14 @@ const UpdateCard: React.FC<UpdateCardProps> = ({
>
<View style={styles.imageContainer}>
<Pressable
onPress={() => navigateToNovel(item.sourceId, item.novelUrl)}
onPress={() =>
navigateToNovel(
item.sourceId,
item.novelUrl,
item.novelName,
item.novelCover,
)
}
>
<FastImage source={{ uri: item.novelCover }} style={styles.cover} />
</Pressable>
@@ -150,6 +163,7 @@ const styles = StyleSheet.create({
height: 40,
width: 40,
borderRadius: 4,
backgroundColor: coverPlaceholderColor,
},
imageContainer: {
flex: 1,
src/screens/updates/components/UpdatesItem.js
+3 -6
View File
@@ -2,6 +2,7 @@ import React, { memo, useState } from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';
import FastImage from 'react-native-fast-image';
import { coverPlaceholderColor } from '../../../theme/colors';
import { DownloadButton } from './DownloadButton';
const UpdateCard = ({
@@ -26,12 +27,7 @@ const UpdateCard = ({
<>
<Pressable onPress={onPressCover}>
<FastImage
source={{
uri:
item.novelCover && !item.novelCover.startsWith('/')
? item.novelCover
: 'https://github.com/LNReader/lnreader-sources/blob/main/src/coverNotAvailable.jpg?raw=true',
}}
source={{ uri: item.novelCover }}
style={styles.updateIcon}
/>
</Pressable>
@@ -93,6 +89,7 @@ const styles = StyleSheet.create({
width: 42,
height: 42,
borderRadius: 4,
backgroundColor: coverPlaceholderColor,
},
chapterDetails: {
flex: 1,
src/theme/colors/index.ts
+2
View File
@@ -1,2 +1,4 @@
export { default as textColors } from './textColors';
export { default as errorColors } from './errorColors';
export const coverPlaceholderColor = '#8888881F';