Add settings for illustration column count and detail screen image quality

src/common/actions/displaySettings.js

@@ -0,0 +1,20 @@
+import { DISPLAY_SETTINGS } from '../constants/actionTypes';
+
+export function setSettings({ illustListColumns, detailScreenImageQuality }) {
+  return {
+    type: DISPLAY_SETTINGS.SET,
+    payload: {
+      illustListColumns,
+      detailScreenImageQuality,
+    },
+  };
+}
+
+export function restoreSettings(state) {
+  return {
+    type: DISPLAY_SETTINGS.RESTORE,
+    payload: {
+      state,
+    },
+  };
+}

src/common/constants/actionTypes.js

@@ -468,6 +468,12 @@ export const READING_SETTINGS = defineAction(
   appNamespace,
 );
 
+export const DISPLAY_SETTINGS = defineAction(
+  'DISPLAY_SETTINGS',
+  [SET, RESTORE],
+  appNamespace,
+);
+
 export const TRENDING_SEARCH_SETTINGS = defineAction(
   'TRENDING_SEARCH_SETTINGS',
   [SET, RESTORE],

src/common/constants/index.js

@@ -24,6 +24,8 @@ export const MODAL_TYPES = {
   BOOKMARK_NOVEL: 'BOOKMARK_NOVEL',
   NOVEL_SETTINGS: 'NOVEL_SETTINGS',
   READING_DIRECTION_SETTINGS: 'READING_DIRECTION_SETTINGS',
+  ILLUST_LIST_COLUMNS_SETTINGS: 'ILLUST_LIST_COLUMNS_SETTINGS',
+  DETAIL_SCREEN_IMAGE_QUALITY_SETTINGS: 'DETAIL_SCREEN_IMAGE_QUALITY_SETTINGS',
   INITIAL_SCREEN_SETTINGS: 'INITIAL_SCREEN_SETTINGS',
   LANGUAGE_SETTINGS: 'LANGUAGE_SETTINGS',
   SAVE_IMAGE_FILE_NAME_FORMAT: 'SAVE_IMAGE_FILE_NAME_FORMAT',
@@ -171,6 +173,16 @@ export const READING_DIRECTION_TYPES = {
   RIGHT_TO_LEFT: 'RIGHT_TO_LEFT',
 };
 
+export const ILLUST_LIST_COLUMNS = {};
+for (let i = 1; i < 7; i += 1) {
+  ILLUST_LIST_COLUMNS[i.toString()] = i;
+}
+
+export const IMAGE_QUALITY_LEVELS = {
+  MEDIUM: 'medium',
+  HIGH: 'large',
+};
+
 export const SCREENS = {
   Main: 'Main',
   Auth: 'Auth',
@@ -220,6 +232,7 @@ export const SCREENS = {
   AccountSettings: 'AccountSettings',
   AdvanceAccountSettings: 'AdvanceAccountSettings',
   ReadingSettings: 'ReadingSettings',
+  DisplaySettings: 'DisplaySettings',
   SaveImageSettings: 'SaveImageSettings',
   InitialScreenSettings: 'InitialScreenSettings',
   LikeButtonSettings: 'LikeButtonSettings',

src/common/constants/strings/en.json

@@ -48,6 +48,11 @@
   "comments": "Comments",
   "connection": "Connection",
   "contactUs": "Contact us",
+  "displaySettings": "Display Settings",
+  "displaySettingsDetailScreenImageQuality": "Detail Screen Image Quality",
+  "displaySettingsDetailScreenImageQualityHigh": "High",
+  "displaySettingsDetailScreenImageQualityMedium": "Medium",
+  "displaySettingsIllustListColumns": "Illust List Columns",
   "donations": "Donations",
   "emailVerificationPostComment": "Email verification is required to add comment",
   "emailVerificationSend": "Send confirmation email",

src/common/constants/strings/ja.json

@@ -48,6 +48,11 @@
   "comments": "コメント",
   "connection": "つながり",
   "contactUs": "お問い合わせ",
+  "displaySettings": "Display Settings",
+  "displaySettingsDetailScreenImageQuality": "Detail Screen Image Quality",
+  "displaySettingsDetailScreenImageQualityHigh": "High",
+  "displaySettingsDetailScreenImageQualityMedium": "Medium",
+  "displaySettingsIllustListColumns": "Illust List Columns",
   "donations": "寄付",
   "emailVerificationPostComment": "コメントをするにはメール認証が必要です。",
   "emailVerificationSend": "認証メールを送信",
@@ -236,4 +241,4 @@
   "userNovels": "小説作品",
   "viewMore": "もっと見る",
   "worksCount": "件の作品"
-}
+}

src/common/constants/strings/zh-HK.json

@@ -48,6 +48,11 @@
   "comments": "評論",
   "connection": "連接",
   "contactUs": "聯繫我們",
+  "displaySettings": "Display Settings",
+  "displaySettingsDetailScreenImageQuality": "Detail Screen Image Quality",
+  "displaySettingsDetailScreenImageQualityHigh": "High",
+  "displaySettingsDetailScreenImageQualityMedium": "Medium",
+  "displaySettingsIllustListColumns": "Illust List Columns",
   "donations": "捐贈",
   "emailVerificationPostComment": "發布評論需要先進行郵件驗證",
   "emailVerificationSend": "發送驗證郵件",
@@ -236,4 +241,4 @@
   "userNovels": "小說",
   "viewMore": "查看更多",
   "worksCount": "件作品"
-}
+}

src/common/constants/strings/zh-MO.json

@@ -48,6 +48,11 @@
   "comments": "評論",
   "connection": "連接",
   "contactUs": "聯繫我們",
+  "displaySettings": "Display Settings",
+  "displaySettingsDetailScreenImageQuality": "Detail Screen Image Quality",
+  "displaySettingsDetailScreenImageQualityHigh": "High",
+  "displaySettingsDetailScreenImageQualityMedium": "Medium",
+  "displaySettingsIllustListColumns": "Illust List Columns",
   "donations": "捐贈",
   "emailVerificationPostComment": "發布評論需要先進行郵件驗證",
   "emailVerificationSend": "發送驗證郵件",
@@ -236,4 +241,4 @@
   "userNovels": "小說",
   "viewMore": "查看更多",
   "worksCount": "件作品"
-}
+}

src/common/constants/strings/zh-TW.json

@@ -48,6 +48,11 @@
   "comments": "評論",
   "connection": "連接",
   "contactUs": "聯繫我們",
+  "displaySettings": "Display Settings",
+  "displaySettingsDetailScreenImageQuality": "Detail Screen Image Quality",
+  "displaySettingsDetailScreenImageQualityHigh": "High",
+  "displaySettingsDetailScreenImageQualityMedium": "Medium",
+  "displaySettingsIllustListColumns": "Illust List Columns",
   "donations": "捐贈",
   "emailVerificationPostComment": "發布評論需要先進行郵件驗證",
   "emailVerificationSend": "發送驗證郵件",
@@ -236,4 +241,4 @@
   "userNovels": "小說",
   "viewMore": "查看更多",
   "worksCount": "件作品"
-}
+}

src/common/constants/strings/zh.json

@@ -48,6 +48,11 @@
   "comments": "评论",
   "connection": "连接",
   "contactUs": "联系我们",
+  "displaySettings": "Display Settings",
+  "displaySettingsDetailScreenImageQuality": "Detail Screen Image Quality",
+  "displaySettingsDetailScreenImageQualityHigh": "High",
+  "displaySettingsDetailScreenImageQualityMedium": "Medium",
+  "displaySettingsIllustListColumns": "Illust List Columns",
   "donations": "捐赠",
   "emailVerificationPostComment": "发布评论需要先进行邮件验证",
   "emailVerificationSend": "发送验证邮件",
@@ -236,4 +241,4 @@
   "userNovels": "小说",
   "viewMore": "查看更多",
   "worksCount": "件作品"
-}
+}

src/common/reducers/displaySettings.js

@@ -0,0 +1,32 @@
+import { DISPLAY_SETTINGS } from '../constants/actionTypes';
+import { ILLUST_LIST_COLUMNS, IMAGE_QUALITY_LEVELS } from '../constants';
+
+export default function displaySettings(
+  state = {
+    illustListColumns: ILLUST_LIST_COLUMNS['3'],
+    detailScreenImageQuality: IMAGE_QUALITY_LEVELS.MEDIUM,
+  },
+  action = {},
+) {
+  switch (action.type) {
+    case DISPLAY_SETTINGS.SET:
+      return {
+        ...state,
+        illustListColumns:
+          action.payload.illustListColumns !== undefined
+            ? action.payload.illustListColumns
+            : state.illustListColumns,
+        detailScreenImageQuality:
+          action.payload.detailScreenImageQuality !== undefined
+            ? action.payload.detailScreenImageQuality
+            : state.detailScreenImageQuality,
+      };
+    case DISPLAY_SETTINGS.RESTORE:
+      return {
+        ...state,
+        ...action.payload.state,
+      };
+    default:
+      return state;
+  }
+}

src/common/reducers/index.js

@@ -70,6 +70,7 @@ import initialScreenSettings from './initialScreenSettings';
 import novelSettings from './novelSettings';
 import likeButtonSettings from './likeButtonSettings';
 import readingSettings from './readingSettings';
+import displaySettings from './displaySettings';
 import trendingSearchSettings from './trendingSearchSettings';
 import i18n from './i18n';
 import theme from './theme';
@@ -147,6 +148,7 @@ const rootReducer = combineReducers({
   novelSettings,
   likeButtonSettings,
   readingSettings,
+  displaySettings,
   trendingSearchSettings,
   i18n,
   theme,

src/common/store/configureStore.js

@@ -277,6 +277,7 @@ export default function configureStore() {
       'novelSettings',
       'likeButtonSettings',
       'readingSettings',
+      'displaySettings',
       'trendingSearchSettings',
       'entities',
       'auth',

src/components/IllustDetailContent.js

@@ -242,6 +242,7 @@ class IllustDetailContent extends Component {
       theme,
       onPressImage,
       onLongPressImage,
+      imageQuality,
     } = this.props;
     const isMultiImages = illustItem.page_count > 1;
     const isMute = tags.some((t) => t.isMute) || isMuteUser;
@@ -262,8 +263,8 @@ class IllustDetailContent extends Component {
     }
     return (
       <PXCacheImageTouchable
-        key={item.image_urls.medium}
-        uri={item.image_urls.medium}
+        key={item.image_urls[imageQuality]}
+        uri={item.image_urls[imageQuality]}
         initWidth={globalStyleVariables.WINDOW_HEIGHT}
         initHeight={200}
         style={styles.multiImageContainer}
@@ -350,6 +351,7 @@ export default withTheme(
         (m) => m.id === props.item.user.id,
       ),
       tags: getTagsWithStatus(state, props),
+      imageQuality: state.displaySettings.detailScreenImageQuality,
     });
   }, searchHistoryActionCreators)(IllustDetailContent),
 );

src/components/IllustList.js

@@ -7,17 +7,14 @@ import {
   Platform,
   DeviceEventEmitter,
 } from 'react-native';
-import { useSelector } from 'react-redux';
+import { connect } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
-import { useTheme, Button } from 'react-native-paper';
+import { useTheme } from 'react-native-paper';
 import IllustItem from './IllustItem';
 import Loader from './Loader';
-import EmptyStateView from './EmptyStateView';
 import { globalStyles, globalStyleVariables } from '../styles';
 import { SCREENS } from '../common/constants';
 
-const ILLUST_COLUMNS = 3;
-
 const styles = StyleSheet.create({
   footer: {
     marginBottom: 20,
@@ -69,13 +66,13 @@ class IllustList extends Component {
   };
 
   renderItem = ({ item, index }) => {
-    const { hideBookmarkButton } = this.props;
+    const { hideBookmarkButton, illustColumns } = this.props;
     return (
       <IllustItem
         key={item.id}
         illustId={item.id}
         index={index}
-        numColumns={ILLUST_COLUMNS}
+        numColumns={illustColumns}
         hideBookmarkButton={hideBookmarkButton}
         onPressItem={() => this.handleOnPressItem(item, index)}
       />
@@ -151,7 +148,9 @@ class IllustList extends Component {
       maxItems,
       theme,
       innerRef,
+      illustColumns,
     } = this.props;
+
     return (
       <View
         style={[
@@ -175,14 +174,15 @@ class IllustList extends Component {
                 ? items.slice(0, maxItems)
                 : items
             }
-            numColumns={ILLUST_COLUMNS}
+            key={illustColumns.toString()}
+            numColumns={illustColumns}
             keyExtractor={(item) => item.id.toString()}
             listKey={listKey}
             renderItem={this.renderItem}
             getItemLayout={(data, index) => ({
-              length: globalStyleVariables.WINDOW_WIDTH / ILLUST_COLUMNS,
+              length: globalStyleVariables.WINDOW_WIDTH / illustColumns,
               offset:
-                (globalStyleVariables.WINDOW_WIDTH / ILLUST_COLUMNS) * index,
+                (globalStyleVariables.WINDOW_WIDTH / illustColumns) * index,
               index,
             })}
             removeClippedSubviews={Platform.OS === 'android'}
@@ -209,12 +209,21 @@ class IllustList extends Component {
   }
 }
 
+const ConnectedIllustList = connect(
+  (state) => {
+    return { illustColumns: state.displaySettings.illustListColumns };
+  },
+  null,
+  null,
+  { forwardRef: true },
+)(IllustList);
+
 export default forwardRef((props, ref) => {
   const theme = useTheme();
   const navigation = useNavigation();
   // const isConnected = useSelector((state) => state.network.isConnected);
   return (
-    <IllustList
+    <ConnectedIllustList
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}
       // isConnected={isConnected}

src/containers/DetailScreenImageQualitySettingsModal.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { useLocalization } from '../components/Localization';
+import SingleChoiceDialog from '../components/SingleChoiceDialog';
+import { closeModal } from '../common/actions/modal';
+import { setSettings } from '../common/actions/displaySettings';
+import { IMAGE_QUALITY_LEVELS } from '../common/constants';
+
+const DetailScreenImageQualitySettingsModal = ({
+  detailScreenImageQuality,
+}) => {
+  const dispatch = useDispatch();
+  const { i18n } = useLocalization();
+
+  const settingsList = [
+    {
+      value: IMAGE_QUALITY_LEVELS.MEDIUM,
+      label: i18n.displaySettingsDetailScreenImageQualityMedium,
+    },
+    {
+      value: IMAGE_QUALITY_LEVELS.HIGH,
+      label: i18n.displaySettingsDetailScreenImageQualityHigh,
+    },
+  ];
+
+  const handleOnCancelPickerDialog = () => {
+    dispatch(closeModal());
+  };
+
+  const handleOnOkPickerDialog = (value) => {
+    const payload = {
+      detailScreenImageQuality: value,
+    };
+    dispatch(setSettings(payload));
+    handleOnCancelPickerDialog();
+  };
+
+  return (
+    <SingleChoiceDialog
+      visible
+      title={i18n.displaySettingsDetailScreenImageQuality}
+      items={settingsList}
+      selectedItemValue={detailScreenImageQuality}
+      onPressOk={handleOnOkPickerDialog}
+      onPressCancel={handleOnCancelPickerDialog}
+    />
+  );
+};
+
+export default DetailScreenImageQualitySettingsModal;