chore: Merge pull request #45 from alist-org/dev

package.json

@@ -31,7 +31,7 @@
     "@emotion/styled": "^11.8.1",
     "@monaco-editor/react": "^4.4.4",
     "@xhofe/react-viewer": "^3.2.3",
-    "artplayer": "^4.3.1",
+    "artplayer": "^4.4.3",
     "axios": "^0.26.0",
     "flv.js": "^1.6.2",
     "framer-motion": "^5.5.6",

src/pages/list/layout/files/menus/refresh.tsx

@@ -10,7 +10,7 @@ import bus from "../../../../../utils/event-bus";
 import { IContext } from "../../../context";
 
 const Refresh = () => {
-  const { loggedIn } = useContext(IContext);
+  const { loggedIn, setPage, page } = useContext(IContext);
   const { t } = useTranslation();
   const { refresh } = useApi();
   const toast = useToast();
@@ -28,6 +28,7 @@ const Refresh = () => {
               isClosable: true,
             });
             if (res.code === 200) {
+              setPage({ ...page, page_num: 1 });
               bus.emit("refresh");
             }
           });
@@ -42,4 +43,4 @@ const Refresh = () => {
   );
 };
 
-export default Refresh;
+export default Refresh;

src/pages/list/preview/codeeditor.tsx

@@ -1,46 +1,14 @@
 // Integrating the ESM version of the Monaco Editor
 // https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md#using-vite
 
-// import * as monaco from 'monaco-editor';
-// self.MonacoEnvironment = {
-// 	getWorker: function (workerId, label) {
-// 		const getWorkerModule = (moduleUrl, label) => {
-// 			return new Worker(self.MonacoEnvironment.getWorkerUrl(moduleUrl), {
-// 				name: label,
-// 				type: 'module'
-// 			});
-// 		};
-
-// 		switch (label) {
-// 			case 'json':
-// 				return getWorkerModule('/monaco-editor/esm/vs/language/json/json.worker?worker', label);
-// 			case 'css':
-// 			case 'scss':
-// 			case 'less':
-// 				return getWorkerModule('/monaco-editor/esm/vs/language/css/css.worker?worker', label);
-// 			case 'html':
-// 			case 'handlebars':
-// 			case 'razor':
-// 				return getWorkerModule('/monaco-editor/esm/vs/language/html/html.worker?worker', label);
-// 			case 'typescript':
-// 			case 'javascript':
-// 				return getWorkerModule('/monaco-editor/esm/vs/language/typescript/ts.worker?worker', label);
-// 			default:
-// 				return getWorkerModule('/monaco-editor/esm/vs/editor/editor.worker?worker', label);
-// 		}
-// 	}
-// };
-
 import Editor from "@monaco-editor/react";
 import {
   Box,
-  Select,
   Button,
   Flex,
   Spacer,
   useColorModeValue,
   useToast,
-  Heading,
 } from "@chakra-ui/react";
 import React from "react";
 import axios from "axios";
@@ -49,29 +17,27 @@ import { useTranslation } from "react-i18next";
 import useFileUrl from "../../../hooks/useFileUrl";
 import { FileProps } from "../context";
 import request from "../../../utils/public";
+import { File } from "../context";
 
 export const type = -1;
 export const exts = [];
 
-const CodeEditor = ({ file }: FileProps) => {
+export interface CodeEditorProps {
+  file: File;
+  content: string;
+  setContent: (content: string) => void;
+}
+
+const CodeEditor = ({ file, content, setContent }: CodeEditorProps) => {
   const theme = useColorModeValue("light", "dark");
   const { t } = useTranslation();
   const toast = useToast();
   const { pathname } = useLocation();
 
-  const [content, setContent] = React.useState<string | undefined>("");
-
-  let link = useFileUrl(true)(file);
-  const getContent = () => {
-    axios.get(link).then(async (resp) => {
-      setContent(resp.data);
-    });
-  };
-
   const handleSaveButton: React.MouseEventHandler = async () => {
     const folder = pathname.substring(0, pathname.lastIndexOf("/") || 1);
     const form = new FormData();
-    form.append("files", new Blob([content as string]), file.name);
+    form.append("files", new Blob([content]), file.name);
     form.append("path", folder);
     request
       .post("upload", form, {
@@ -89,9 +55,6 @@ const CodeEditor = ({ file }: FileProps) => {
         });
       });
   };
-  React.useEffect(() => {
-    getContent();
-  }, []);
 
   return (
     <Box>
@@ -100,7 +63,7 @@ const CodeEditor = ({ file }: FileProps) => {
         value={content}
         path={file.name}
         theme={theme === "light" ? "light" : "vs-dark"}
-        onChange={(value) => setContent(value)}
+        onChange={(value) => setContent(value ?? "")}
       />
       <Flex m="2">
         <Spacer />

src/pages/list/preview/markdown.tsx

@@ -14,8 +14,7 @@ export const exts = [];
 
 const MarkdownPreview = ({ file, readme }: FileProps) => {
   const [content, setContent] = React.useState("");
-  const [srcDoc, setSrcDoc] = React.useState("");
-  const { getSetting,loggedIn } = useContext(IContext);
+  const { getSetting, loggedIn } = useContext(IContext);
   let link = useFileUrl(true)(file);
   const html = file.name.endsWith(".html");
   const [show, setShow] = React.useState("preview");
@@ -36,16 +35,7 @@ const MarkdownPreview = ({ file, readme }: FileProps) => {
           const decoder = new TextDecoder("gbk");
           res = decoder.decode(await blob.arrayBuffer());
         }
-        if (html) {
-          setSrcDoc(res);
-        }
-        if (file.name.endsWith(".md")) {
-          setContent(res);
-        } else {
-          setContent(
-            "```" + file.name.split(".").pop() + "\n" + res + "\n" + "```"
-          );
-        }
+        setContent(res);
       });
   };
   useEffect(() => {
@@ -89,7 +79,7 @@ const MarkdownPreview = ({ file, readme }: FileProps) => {
         </HStack>
         {show === "render" ? (
           <iframe
-            srcDoc={srcDoc}
+            srcDoc={content}
             style={{
               width: "100%",
               borderRadius: "0.75rem",
@@ -98,10 +88,19 @@ const MarkdownPreview = ({ file, readme }: FileProps) => {
             }}
           ></iframe>
         ) : show === "edit" ? (
-          <CodeEditor file={file} />
+          <CodeEditor content={content} setContent={setContent} file={file} />
         ) : (
           <Box className="markdown-body">
-            <Markdown>{content}</Markdown>
+            <Markdown>
+              {file.name.endsWith(".md")
+                ? content
+                : "```" +
+                  file.name.split(".").pop() +
+                  "\n" +
+                  content +
+                  "\n" +
+                  "```"}
+            </Markdown>
           </Box>
         )}
       </Box>

src/pages/list/preview/pdf.tsx

@@ -1,17 +1,20 @@
 import { Center } from "@chakra-ui/react";
-import React from "react";
+import React, { useContext } from "react";
+import { IContext } from "../context";
 
 export const type = -1;
 export const exts = [];
 
 const Pdf = ({ url, unfold }: { url: string; unfold: boolean }) => {
+  const { getSetting } = useContext(IContext)
+  const pdfPreviewUrl = getSetting("pdf viewer url") || "https://alist-org.github.io/pdf.js/web/viewer.html?file=$url";
   return (
     <Center w="full" h="full" className="pdf-preview-box">
       <iframe
         title="pdf-viewer"
         width="100%"
         height="100%"
-        src={`https://alist-org.github.io/pdf.js/web/viewer.html?file=${url}`}
+        src={pdfPreviewUrl.replace("$url", url)}
       />
     </Center>
   );

yarn.lock

@@ -1214,13 +1214,12 @@ aria-hidden@^1.1.1:
   dependencies:
     tslib "^1.0.0"
 
-artplayer@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/artplayer/-/artplayer-4.3.1.tgz#8e1203129a17f19b6fe5de216d04f1bd139d6bb7"
-  integrity sha512-X0yD+PR4n07W9KMZpqX3R9kWzDF6QNaBDoeXzZU8kcFEgAwiueC4nkLR4NIVEuX02GWEEWfQgZ7Q2rNn6tLIrA==
+artplayer@^4.4.3:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/artplayer/-/artplayer-4.4.3.tgz#9387d30ecac836f4918d6c083a6cb66d97932ed3"
+  integrity sha512-RdIWInmYJquUfSuM2h/dh4MjH9SR0fcQoFWL38GgT55RuvjbiVnH/lWZASeEBveCnA1jntVDpiCZYf54wGOENQ==
   dependencies:
     option-validator "^2.0.6"
-    screenfull "^6.0.1"
 
 axios@^0.26.0:
   version "0.26.0"
@@ -3083,11 +3082,6 @@ scheduler@^0.20.2:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-screenfull@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-6.0.1.tgz#3b71e6f06b72d817a8d3be73c45ebe71fa8da1ce"
-  integrity sha512-yzQW+j4zMUBQC51xxWaoDYjxOtl8Kn+xvue3p6v/fv2pIi1jH4AldgVLU8TBfFVgH2x3VXlf3+YiA/AYIPlaew==
-
 semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"