feat: add image adaptive control

IronKinoko · Nov 17, 2021 · 7dde851 · 7dde851
1 parent 641a6f2
commit 7dde851
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "e-hentai-view",
   "productName": "EhentaiView",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "main": "server/src/app.js",
   "license": "MIT",
   "homepage": "https://exhentai.appspot.com",
@@ -111,4 +111,4 @@
     "trailingComma": "es5",
     "arrowParens": "always"
   }
-}
+}
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -85,5 +85,6 @@
   "ShowTag.Watched": "Only Watched",
   "ShowTag.All": "All",
   "ShowTag.Hidden": "Hidden",
-  "Similar": "Similar"
+  "Similar": "Similar",
+  "imgFit":"Picture adaptive"
 }
diff --git a/public/locales/kr/common.json b/public/locales/kr/common.json
@@ -85,5 +85,6 @@
   "ShowTag.Watched": "Watched 만",
   "ShowTag.All": "모두",
   "ShowTag.Hidden": "숨김",
-  "Similar": "유사"
+  "Similar": "유사",
+  "imgFit":"픽처 어댑티브"
 }
diff --git a/public/locales/ms/common.json b/public/locales/ms/common.json
@@ -85,5 +85,6 @@
   "ShowTag.Watched": "Only Watched",
   "ShowTag.All": "All",
   "ShowTag.Hidden": "Hidden",
-  "Similar": "Similar"
+  "Similar": "Similar",
+  "imgFit":"Picture adaptive"
 }
diff --git a/public/locales/th/common.json b/public/locales/th/common.json
@@ -85,5 +85,6 @@
   "ShowTag.Watched": "เฉพาะที่ติดตาม",
   "ShowTag.All": "ทั้งหมด",
   "ShowTag.Hidden": "ซ่อน",
-  "Similar": "คล้ายกัน"
+  "Similar": "คล้ายกัน",
+  "imgFit":"การปรับภาพ"
 }
diff --git a/public/locales/zh-CN/common.json b/public/locales/zh-CN/common.json
@@ -85,5 +85,6 @@
   "ShowTag.Watched": "仅在订阅中显示",
   "ShowTag.All": "全部显示",
   "ShowTag.Hidden": "不显示",
-  "Similar": "相关画廊"
+  "Similar": "相关画廊",
+  "imgFit":"图片自适应"
 }
diff --git a/src/widgets/comic/ComicConfig.tsx b/src/widgets/comic/ComicConfig.tsx
@@ -3,11 +3,19 @@ import useEnhanceLocalStorageState from '@/hooks/useEnhanceLocalStorageState'
 import { LOCAL_COMIC_CONFIG } from '@/constant'
 
 export interface ComicConfigProps {
+  /**
+   * comic direction
+   */
   direction?: 'ltr' | 'rtl' | 'vertical'
+  /**
+   * horizontal mode image fit width/height
+   */
+  imgFit?: boolean
 }
 
 const defualtComicConfig: ComicConfigProps = {
   direction: 'vertical',
+  imgFit: true,
 }
 
 const ComicConfigContext = createContext<

diff --git a/src/widgets/comic/ComicHorizontalList.tsx b/src/widgets/comic/ComicHorizontalList.tsx
@@ -26,6 +26,11 @@ const useStyles = makeStyles((theme: Theme) =>
       userSelect: 'none',
     },
     imgContainer: {
+      display: 'flex',
+      alignItems: 'center',
+      minHeight: '100vh',
+    },
+    imgFitContainer: {
       display: 'flex',
       alignItems: 'center',
       height: '100vh',
@@ -108,13 +113,18 @@ const ComicHorizontalList: React.FC<{
         >
           {data.list.map((o, k) => (
             <SwiperSlide key={o?.url ?? k} data-hovindex={k}>
-              <div className={classes.imgContainer}>
+              <div
+                className={
+                  config.imgFit ? classes.imgFitContainer : classes.imgContainer
+                }
+              >
                 <ComicItem
                   key={o?.url || k}
                   index={k}
                   thumb={o?.thumb}
                   url={o?.url}
                   comicPagesKey={comicPagesKey}
+                  noMinHeight
                 />
               </div>
             </SwiperSlide>

diff --git a/src/widgets/comic/ComicItem.tsx b/src/widgets/comic/ComicItem.tsx
@@ -35,8 +35,19 @@ const useStyles = makeStyles((theme: Theme) =>
 )
 
 const ComicItem: React.FC<
-  Partial<DetailPageListItemProps> & { index: number; comicPagesKey: string }
-> = ({ index, thumb, url, aspectratio = 210 / 297, comicPagesKey }) => {
+  Partial<DetailPageListItemProps> & {
+    index: number
+    comicPagesKey: string
+    noMinHeight?: boolean
+  }
+> = ({
+  index,
+  thumb,
+  url,
+  aspectratio = 210 / 297,
+  comicPagesKey,
+  noMinHeight,
+}) => {
   const classes = useStyles()
   const ref = useRef<HTMLDivElement>(null)
   const [pageUrl, setPageUrl] = useState(url)
@@ -51,7 +62,7 @@ const ComicItem: React.FC<
   return (
     <div
       ref={ref}
-      style={{ minHeight }}
+      style={{ minHeight: noMinHeight ? '' : minHeight }}
       className={classes.root}
       data-index={index}
       // eslint-disable-next-line jsx-a11y/aria-role

diff --git a/src/widgets/comic/ComicSettings.tsx b/src/widgets/comic/ComicSettings.tsx
@@ -5,10 +5,12 @@ import {
   ListItemText,
   MenuItem,
   Select,
+  Switch,
 } from '@material-ui/core'
 import { useTranslation } from 'next-i18next'
 import React from 'react'
 import { ComicConfigProps, useComicConfigState } from './ComicConfig'
+
 /**
  * comic setting ui
  */
@@ -26,6 +28,9 @@ const ComicSettings: React.FC<{ onChange?: () => void }> = ({ onChange }) => {
     })
     onChange?.()
   }
+
+  const isVertical = config.direction === 'vertical'
+
   return (
     <div>
       <List>
@@ -43,6 +48,19 @@ const ComicSettings: React.FC<{ onChange?: () => void }> = ({ onChange }) => {
             </Select>
           </ListItemSecondaryAction>
         </ListItem>
+        {!isVertical && (
+          <ListItem>
+            <ListItemText>{t('imgFit')}</ListItemText>
+            <ListItemSecondaryAction>
+              <Switch
+                checked={config.imgFit}
+                onChange={(e) =>
+                  setConfig((t) => ({ ...t, imgFit: e.target.checked }))
+                }
+              />
+            </ListItemSecondaryAction>
+          </ListItem>
+        )}
       </List>
     </div>
   )