feat: Added SubFolder configuration to support secondary subdirectory access under the domain name (#49)

Co-authored-by: YCKJ2082 <[email protected]>

Author: eaglexmw-gmail

index.html

@@ -34,6 +34,7 @@
     <script>
       window.ALIST = {
         cdn: "/CDN_URL/",
+        subfolder: "SUB_FOLDER",
         api: undefined,
       };
     </script>

src/App.tsx

@@ -7,10 +7,21 @@ import { ClimbingBoxLoader } from "react-spinners";
 import { Toaster } from 'react-hot-toast';
 
 function App() {
+  let subfolder = ""
+  if (window.ALIST.subfolder) {
+    subfolder = window.ALIST.subfolder;
+  }
+  if (subfolder.endsWith("/")) {
+    subfolder = subfolder.substring(0, subfolder.length - 1);
+  }
+  if (subfolder.startsWith("/")) {
+    subfolder = subfolder.substring(1);
+  }
+
   return (
     <div className="App">
       <div><Toaster/></div>
-      <Router>
+      <Router basename={"/" + subfolder} >
         <Suspense
           fallback={
             <Center h="100vh">

src/hooks/useEncrypt.ts

@@ -10,7 +10,7 @@ export const useEncrypt = () => {
       return link;
     }
     const name = url.split("/").pop();
-    const token = localStorage.getItem("admin-token");
+    const token = localStorage.getItem("alist_admin-token");
     if (loggedIn) {
       const sign = md5_16(`alist-${token}-${name}`);
       return link + (encode ? encodeURI(`?sign=${sign}`) : `?sign=${sign}`);

src/hooks/useFolderLink.ts

@@ -13,10 +13,20 @@ const useFolderLink = (proxy = false) => {
   if (type === "file") {
     path = path.substring(0, path.lastIndexOf("/"));
   }
+  let subfolder = ""
+  if (window.ALIST.subfolder) {
+    subfolder = window.ALIST.subfolder;
+  }
+  if (subfolder.endsWith("/")) {
+    subfolder = subfolder.substring(0, subfolder.length - 1);
+  }
+  if (subfolder.startsWith("/")) {
+    subfolder = subfolder.substring(1);
+  }
   if (proxy) {
-    return `${host}p${path}`;
+    return `${host}${subfolder}/p${path}`;
   }
-  return `${host}d${path}`;
+  return `${host}${subfolder}/d${path}`;
 };
 
 export default useFolderLink;

src/hooks/useLocalStorage.ts

@@ -7,7 +7,7 @@ function useLocalStorage<T>(key: string, initialValue: T) {
   const [storedValue, setStoredValue] = useState<T>(() => {
     try {
       // Get from local storage by key
-      const item = window.localStorage.getItem(key);
+      const item = window.localStorage.getItem("alist_" + key);
       // Parse stored json or if none return initialValue
       return item ? JSON.parse(item) : initialValue;
     } catch (error) {
@@ -26,7 +26,7 @@ function useLocalStorage<T>(key: string, initialValue: T) {
       // Save state
       setStoredValue(valueToStore);
       // Save to local storage
-      window.localStorage.setItem(key, JSON.stringify(valueToStore));
+      window.localStorage.setItem("alist_" + key, JSON.stringify(valueToStore));
     } catch (error) {
       // A more advanced implementation would handle the error case
       console.log(error);

src/pages/list/context.tsx

@@ -160,7 +160,7 @@ const IContextProvider = (props: any) => {
   const [msg, setMsg] = useState("");
   const [settingLoaded, setSettingLoaded] = React.useState<boolean>(false);
   const [password, setPassword] = React.useState<string>(
-    localStorage.getItem("password") || ""
+    localStorage.getItem("alist_password") || ""
   );
   const [sort, setSort] = useState<Sort>({
     orderBy: undefined,
@@ -170,7 +170,7 @@ const IContextProvider = (props: any) => {
   const [selectFiles, setSelectFiles] = useState<File[]>([]);
 
   const [show, setShow] = React.useState<string>(
-    localStorage.getItem("show") || "list"
+    localStorage.getItem("alist_show") || "list"
   );
 
   const [page, setPage] = React.useState<Page>({
@@ -257,7 +257,7 @@ const IContextProvider = (props: any) => {
       });
   }, []);
   const login = useCallback(() => {
-    if (!localStorage.getItem("admin-token")) {
+    if (!localStorage.getItem("alist_admin-token")) {
       return;
     }
     admin.get("login").then((resp) => {

src/pages/list/index.tsx

@@ -208,7 +208,7 @@ const Do = (props: any) => {
               }}
               onKeyUp={(e) => {
                 if (e.key === "Enter") {
-                  localStorage.setItem("password", password);
+                  localStorage.setItem("alist_password", password);
                   inputPass = true;
                   refresh();
                   onClose();
@@ -220,7 +220,7 @@ const Do = (props: any) => {
           <ModalFooter>
             <Button
               onClick={() => {
-                localStorage.setItem("password", password);
+                localStorage.setItem("alist_password", password);
                 inputPass = true;
                 refresh();
                 onClose();

src/pages/list/layout/header.tsx

@@ -167,7 +167,7 @@ const Header = () => {
                   onClick={() => {
                     setShow!(show === "list" ? "grid" : "list");
                     localStorage.setItem(
-                      "show",
+                      "alist_show",
                       show === "list" ? "grid" : "list"
                     );
                   }}

src/pages/list/preview/video.tsx

@@ -35,7 +35,7 @@ const Video = ({ file }: FileProps) => {
   let fileUrl = useFileUrl();
   let link = fileUrl();
   const proxyLink = useFolderLink(true);
-  const url = file.name.endsWith(".m3u8") ? link : file.url;
+  const url = link; //file.name.endsWith(".m3u8") ? link : file.url;
   const history = useHistory();
   let art: Artplayer;
   const subtitleSize = useBreakpointValue({

src/utils/admin.ts

@@ -7,12 +7,22 @@ if (window.ALIST.api) {
   api = window.ALIST.api;
 }
 
+let subfolder = ""
+if (window.ALIST.subfolder) {
+  subfolder = window.ALIST.subfolder;
+}
+if (!subfolder.endsWith("/")) {
+  subfolder = subfolder + "/";
+}
+if (subfolder.startsWith("/")) {
+  subfolder = subfolder.substring(1);
+}
 const instance = axios.create({
-  baseURL: api + "api/admin/",
+  baseURL: api + subfolder + "api/admin/",
   // timeout: 5000
   headers: {
     "Content-Type": "application/json;charset=utf-8",
-    // 'Authorization': localStorage.getItem("admin-token") || "",
+    // 'Authorization': localStorage.getItem("alist_admin-token") || "",
   },
   withCredentials: false,
 });
@@ -47,7 +57,7 @@ instance.interceptors.response.use(
 );
 
 instance.defaults.headers.common["Authorization"] =
-  localStorage.getItem("admin-token") || "";
+  localStorage.getItem("alist_admin-token") || "";
 
 export const changeToken = (password: string) => {
   let token = "";
@@ -56,7 +66,7 @@ export const changeToken = (password: string) => {
   }
   instance.defaults.headers.common["Authorization"] = token;
   publicR.defaults.headers.common["Authorization"] = token;
-  localStorage.setItem("admin-token", token);
+  localStorage.setItem("alist_admin-token", token);
 };
 
 export default instance;