feat: ✨ 尽量在下载时保持原文件名

https://sleazyfork.org/scripts/374903/discussions/297125

Author: hymbz

src/components/DownloadButton.tsx

@@ -49,7 +49,7 @@ export const DownloadButton = () => {
       let fileName: string;
       try {
         data = await downloadImg(url);
-        fileName = `${index}.${getExtName(data.type)}`;
+        fileName = img.name || `${index}.${getExtName(data.type)}`;
       } catch {
         fileName = `${index} - ${t('alert.download_failed')}`;
         setState('errorNum', (num) => num + 1);

src/components/Manga/actions/image.ts

@@ -41,6 +41,11 @@ updatePageData.throttle = throttle(() => setState(updatePageData), 100);
  * 3. updatePageData
  */
 export const resetImgState = (state: State) => {
+  if (state.imgList.length === 0) {
+    state.fillEffect = { '-1': true };
+    return;
+  }
+
   // 如果用户没有手动修改过首页填充，才将其恢复初始
   if (typeof state.fillEffect['-1'] === 'boolean')
     state.fillEffect['-1'] =

src/components/Manga/actions/imageLoad.ts

@@ -40,7 +40,7 @@ export const handleImgLoaded = (url: string, e?: HTMLImageElement) => {
   updateImgSize(url, e.naturalWidth, e.naturalHeight);
 
   if (store.option.imgRecognition.enabled && e.src === img.blobUrl)
-    setTimeout(handleImgRecognition, 0, e, url);
+    setTimeout(handleImgRecognition, 0, url, e);
 
   translationAll();
 };

src/components/Manga/actions/imageSize.ts

@@ -16,9 +16,10 @@ import {
 } from './memo';
 
 /** 获取指定图片的显示尺寸 */
-export const getImgDisplaySize = (state: State, url: string) => {
-  const img = state.imgMap[url];
-
+export const getImgDisplaySize = (
+  state: State,
+  img: { width?: number; height?: number },
+) => {
   let height = img.height ?? placeholderSize().height;
   let width = img.width ?? placeholderSize().width;
 
@@ -48,7 +49,7 @@ export const updateImgSize = (url: string, width: number, height: number) =>
     if (img.width === width && img.height === height) return;
     img.width = width;
     img.height = height;
-    img.size = getImgDisplaySize(state, url);
+    img.size = getImgDisplaySize(state, img);
     updateImgType(state, img);
   });
 
@@ -66,7 +67,7 @@ createEffectOn(
     if (length === 0) return;
     setState((state) => {
       for (const url of state.imgList)
-        state.imgMap[url].size = getImgDisplaySize(state, url);
+        state.imgMap[url].size = getImgDisplaySize(state, state.imgMap[url]);
     });
   },
 );

src/components/Manga/actions/imageType.ts

@@ -17,7 +17,7 @@ const 横幅比例 = 1920 / 1080;
 const 条漫比例 = 1920 / 2 / 1080 / 2;
 
 /** 根据比例判断图片类型 */
-const getImgType = (img: { width: number; height: number }) => {
+export const getImgType = (img: { width: number; height: number }) => {
   const imgRatio = img.width / img.height;
   if (imgRatio <= 单页比例) return imgRatio < 条漫比例 ? 'vertical' : '';
   return imgRatio > 横幅比例 ? 'long' : 'wide';

src/components/Manga/hooks/useInit.ts

@@ -1,4 +1,7 @@
+import type { SetRequired } from 'type-fest';
+
 import { createEffect, on } from 'solid-js';
+import { unwrap } from 'solid-js/store';
 
 import {
   assign,
@@ -8,14 +11,16 @@ import {
   throttle,
 } from 'helper';
 
-import type { MangaProps } from '..';
+import type { ComicImgData, MangaProps } from '..';
 import type { State } from '../store';
 import type { ComicImg } from '../store/image';
 import type { Option } from '../store/option';
 
 import {
   defaultHotkeys,
   focus,
+  getImgDisplaySize,
+  getImgType,
   placeholderSize,
   resetImgState,
   resumeReadProgress,
@@ -30,13 +35,6 @@ import classes from '../index.module.css';
 import { refs, setState } from '../store';
 import { defaultOption } from '../store/option';
 
-const createComicImg = (src: string): ComicImg => ({
-  src,
-  loadType: 'wait',
-  size: placeholderSize(),
-  blobUrl: src.startsWith('blob:') ? src : undefined,
-});
-
 export const useInit = (props: MangaProps) => {
   watchDomSize('rootSize', refs.root);
 
@@ -134,8 +132,36 @@ export const useInit = (props: MangaProps) => {
 
   const handleImgList = () => {
     setState((state) => {
-      // 使用相对协议路径，防止 Mixed Content 报错
-      const imgList = props.imgList.map((url) => url?.replace(/^http:/, ''));
+      const newImgMap: State['imgMap'] = {};
+      const newImgList: string[] = []; // 因为会有相同 url 的图片，所以不能用 Set
+      for (const img of unwrap(props.imgList)) {
+        // 使用相对协议路径，防止 Mixed Content 报错
+        const url =
+          (typeof img === 'object' ? img.src : img)?.replace(/^http:/, '') ??
+          '';
+        newImgList.push(url);
+
+        if (Reflect.has(newImgMap, url)) continue;
+        if (Reflect.has(state.imgMap, url)) {
+          newImgMap[url] = state.imgMap[url];
+          continue;
+        }
+
+        const imgItem: ComicImgData =
+          typeof img === 'string' ? { src: url } : img;
+        imgItem.loadType ??= 'wait';
+        if (imgItem.width && imgItem.height) {
+          imgItem.size = getImgDisplaySize(state, imgItem);
+          imgItem.type = getImgType(
+            imgItem as SetRequired<ComicImg, 'width' | 'height'>,
+          );
+        }
+        imgItem.size ??= placeholderSize();
+        if (!imgItem.blobUrl && url.startsWith('blob:'))
+          imgItem.blobUrl = imgItem.src;
+
+        newImgMap[url] = imgItem as ComicImg;
+      }
 
       /** 修改前的当前显示图片 */
       const oldActiveImg =
@@ -147,21 +173,22 @@ export const useInit = (props: MangaProps) => {
       const fillEffectList = Object.keys(state.fillEffect).map(Number);
       for (const pageIndex of fillEffectList) {
         if (pageIndex === -1) continue;
-        if (state.imgList[pageIndex] === imgList[pageIndex]) continue;
+        if (state.imgList[pageIndex] === newImgList[pageIndex]) continue;
         needResetFillEffect = true;
         break;
       }
 
-      const newImgList = new Set(imgList);
       const oldImgList = new Set(state.imgList);
 
-      if (oldImgList.size === 0 && newImgList.size > 0) {
+      if (oldImgList.size === 0 && newImgList.length > 0) {
         resumeReadProgress(state);
         updateSelfhostedOptions(true);
       }
 
       /** 被删除的图片 */
-      const deleteList = [...oldImgList].filter((url) => !newImgList.has(url));
+      const deleteList = [...oldImgList].filter(
+        (url) => !newImgList.includes(url),
+      );
       for (const url of deleteList)
         if (state.imgMap[url].blobUrl && state.imgMap[url].blobUrl !== url)
           URL.revokeObjectURL(state.imgMap[url].blobUrl);
@@ -175,15 +202,11 @@ export const useInit = (props: MangaProps) => {
       /** 是否需要更新页面 */
       const needUpdatePageData =
         needResetFillEffect ||
-        state.imgList.length !== imgList.length ||
+        state.imgList.length !== newImgList.length ||
         deleteNum > 0;
 
-      const newImgMap: State['imgMap'] = {};
-      for (const url of imgList)
-        newImgMap[url] = state.imgMap[url] ?? createComicImg(url);
-
       state.imgMap = newImgMap;
-      state.imgList = imgList;
+      state.imgList = [...newImgList];
 
       state.prop.onLoading?.(state.imgList.map((url) => state.imgMap[url]));
 
@@ -211,7 +234,7 @@ export const useInit = (props: MangaProps) => {
       // 尽量使当前显示的图片在修改后依然不变
       oldActiveImg.some((url) => {
         // 跳过填充页和已被删除的图片
-        if (!url || imgList.includes(url)) return false;
+        if (!url || newImgList.includes(url)) return false;
 
         const newPageIndex = state.pageList.findIndex((page) =>
           page.some((index) => state.imgList?.[index] === url),

src/components/Manga/index.tsx

@@ -5,7 +5,7 @@ import { createEffect, enableScheduling, onMount } from 'solid-js';
 
 import { boolDataVal } from 'helper';
 
-import type { FillEffect } from './store/image';
+import type { ComicImg, FillEffect } from './store/image';
 import type { State } from './store/index';
 import type { Option } from './store/option';
 
@@ -31,12 +31,14 @@ import { store } from './store/index';
 
 enableScheduling();
 
+export type ComicImgData = Partial<ComicImg> & { src: string };
+
 export type MangaProps = {
   class?: string;
   classList?: ClassList;
 
   /** 图片url列表 */
-  imgList: string[];
+  imgList: (ComicImgData | string)[];
   /** 页面填充数据 */
   fillEffect?: FillEffect;
   /** 初始化配置 */

src/components/Manga/store/image.ts

@@ -4,6 +4,7 @@ export type ComicImg = {
   src: string;
   width?: number;
   height?: number;
+  name?: string;
 
   size: { height: number; width: number };
   blobUrl?: string;

src/helper/other.ts

@@ -34,6 +34,8 @@ export const clamp = (min: number, val: number, max: number) =>
 export const inRange = (min: number, val: number, max: number) =>
   val >= min && val <= max;
 
+export const getFileName = (url: string) => url.match(/.+\/([^?]+)/)?.[1];
+
 /** 判断两个数是否在指定误差范围内相等 */
 export const approx = (val: number, target: number, range: number) =>
   Math.abs(target - val) <= range;
@@ -281,8 +283,14 @@ export async function wait<T>(
 }
 
 /** 等到指定的 dom 出现 */
-export const waitDom = (selector: string, timeout?: number) =>
-  wait(() => querySelector(selector), timeout);
+export async function waitDom(selector: string): Promise<HTMLElement>;
+export async function waitDom(
+  selector: string,
+  timeout?: number,
+): Promise<HTMLElement | null>;
+export async function waitDom(selector: string, timeout?: number) {
+  return wait(() => querySelector(selector), timeout);
+}
 
 /** 等待指定的图片元素加载完成 */
 export const waitImgLoad = (

src/pwa/src/index.tsx

@@ -106,7 +106,7 @@ export const Root: Component = () => (
     <Manga
       class={classes.manga}
       show={store.show}
-      imgList={store.imgList.map(({ url }) => url)}
+      imgList={store.imgList}
       option={{ alwaysLoadAllImg: true, ...getSaveOption() }}
       onOptionChange={handleOptionChange}
       editButtonList={editButtonList}