feat: video preview

package.json

@@ -27,8 +27,11 @@
     "@solid-primitives/i18n": "^1.1.0",
     "@solid-primitives/storage": "^1.3.1",
     "@stitches/core": "^1.2.8",
+    "artplayer": "^4.5.4",
     "axios": "^0.27.2",
     "copy-to-clipboard": "^3.3.2",
+    "flv.js": "^1.6.2",
+    "hls.js": "^1.2.1",
     "lightgallery": "^2.5.0",
     "mitt": "^3.0.0",
     "motion": "^10.13.3",

src/components/SwitchColorMode.tsx

@@ -1,6 +1,7 @@
 import { Icon, useColorMode, useColorModeValue } from "@hope-ui/solid";
-import { IoMoonOutline as Moon } from "solid-icons/io";
+// import { IoMoonOutline as Moon } from "solid-icons/io";
 import { FiSun as Sun } from "solid-icons/fi";
+import { FiMoon as Moon } from "solid-icons/fi";
 
 const SwitchColorMode = () => {
   const { toggleColorMode } = useColorMode();

src/hooks/usePath.ts

@@ -69,7 +69,7 @@ export const usePath = () => {
           handleFolder(path, 1);
         } else {
           ObjStore.setReadme(data.readme);
-          ObjStore.setRelated(data.related);
+          ObjStore.setRelated(data.related ?? []);
           ObjStore.setRawUrl(data.raw_url);
           ObjStore.setState(State.File);
         }

src/hooks/useRouter.ts

@@ -6,7 +6,14 @@ import {
   useSearchParams,
 } from "@solidjs/router";
 import { createMemo } from "solid-js";
-import { encodePath, joinBase, log, pathJoin, trimBase } from "~/utils";
+import {
+  encodePath,
+  joinBase,
+  log,
+  pathDir,
+  pathJoin,
+  trimBase,
+} from "~/utils";
 
 const useRouter = () => {
   const navigate = useNavigate();
@@ -25,6 +32,9 @@ const useRouter = () => {
       log("to:", path);
       navigate(path, options);
     },
+    replace: (to: string) => {
+      navigate(encodePath(pathJoin(pathDir(location.pathname), to), true));
+    },
     pushHref: (to: string): string => {
       return encodePath(pathJoin(location.pathname, to));
     },

src/lang/en/home.json

@@ -33,6 +33,7 @@
     "input_filename": "Input filename"
   },
   "footer": {
+    "powered_by": "Powered by AList",
     "manage": "Manage"
   }
 }

src/pages/home/Footer.tsx

@@ -9,7 +9,7 @@ export const Footer = () => {
     <VStack class="footer" w="$full" py="$4">
       <HStack spacing="$1">
         <Anchor href="https://github.com/Xhofe/alist" external>
-          Powered by AList
+          {t("home.footer.powered_by")}
         </Anchor>
         <span>|</span>
         <AnchorWithBase as={Link} href="/@manage">

src/pages/home/Password.tsx

@@ -46,7 +46,11 @@ const Password = () => {
           columnGap="$1"
         >
           <Text>{t("global.have_account")}</Text>
-          <Text color="$info9" as={LinkWithBase} href="/@login">
+          <Text
+            color="$info9"
+            as={LinkWithBase}
+            href={`/@login?redirect=${encodeURIComponent(location.pathname)}`}
+          >
             {t("global.go_login")}
           </Text>
         </Flex>

src/pages/home/Readme.tsx

@@ -1,5 +1,5 @@
 import { Box, useColorModeValue } from "@hope-ui/solid";
-import { createMemo, Show, createResource } from "solid-js";
+import { createMemo, Show, createResource, on } from "solid-js";
 import { Markdown, MaybeLoading } from "~/components";
 import { useUrl } from "~/hooks";
 import { objStore, State } from "~/store";
@@ -8,25 +8,32 @@ import { fetchText } from "~/utils";
 export const Readme = () => {
   const cardBg = useColorModeValue("white", "$neutral3");
   const { proxyUrl } = useUrl();
-  const readme = createMemo(() => {
-    if (
-      ![State.FetchingMore, State.Folder, State.File].includes(objStore.state)
-    ) {
-      return "";
-    }
-    if (objStore.readme) {
-      return objStore.readme;
-    }
-    if ([State.FetchingMore, State.Folder].includes(objStore.state)) {
-      const obj = objStore.objs.find(
-        (item) => item.name.toLowerCase() === "readme.md"
-      );
-      if (obj) {
-        return proxyUrl(obj, true);
+  const readme = createMemo(
+    on(
+      () => objStore.state,
+      () => {
+        if (
+          ![State.FetchingMore, State.Folder, State.File].includes(
+            objStore.state
+          )
+        ) {
+          return "";
+        }
+        if (objStore.readme) {
+          return objStore.readme;
+        }
+        if ([State.FetchingMore, State.Folder].includes(objStore.state)) {
+          const obj = objStore.objs.find(
+            (item) => item.name.toLowerCase() === "readme.md"
+          );
+          if (obj) {
+            return proxyUrl(obj, true);
+          }
+        }
+        return "";
       }
-    }
-    return "";
-  });
+    )
+  );
   const fetchContent = async (readme: string) => {
     if (/https?:\/\//g.test(readme)) {
       return await fetchText(readme);

src/pages/home/file/ExternalPreview.tsx

@@ -10,20 +10,7 @@ import { createMemo, For, Show } from "solid-js";
 import { useT } from "~/hooks";
 import { getPreviewsByName, objStore } from "~/store";
 import { FaSolidAngleDown } from "solid-icons/fa";
-
-export const getPreviewURL = (
-  placehoder: string,
-  url: string,
-  name: string
-) => {
-  let ans = placehoder;
-  ans = ans.replace("$name", name);
-  ans = ans.replace("$url", url);
-  ans = ans.replace("$e_url", encodeURIComponent(url));
-  ans = ans.replace("$b_url", window.btoa(url));
-  ans = ans.replace("$eb_url", encodeURIComponent(window.btoa(url)));
-  return ans;
-};
+import { convertURL } from "~/utils";
 
 export const ExternalPreview = () => {
   const t = useT();
@@ -45,7 +32,8 @@ export const ExternalPreview = () => {
             {(preview) => (
               <MenuItem
                 as="a"
-                href={getPreviewURL(
+                target="_blank"
+                href={convertURL(
                   preview.value,
                   objStore.raw_url,
                   objStore.obj.name