feat(video): optional auto play next (close alist-org/alist#4675)

src/lang/en/home.json

@@ -12,7 +12,8 @@
     "installing": "Installing",
     "tr-install": "TrollStore",
     "tr-installing": "TrollStore Installing",
-    "open_in_new_window": "Open in new window"
+    "open_in_new_window": "Open in new window",
+    "auto_next": "Auto next"
   },
   "layouts": {
     "list": "List View",

src/pages/home/previews/aliyun_video.tsx

@@ -1,5 +1,5 @@
 import { Box } from "@hope-ui/solid"
-import { onCleanup, onMount } from "solid-js"
+import { createSignal, onCleanup, onMount } from "solid-js"
 import { useRouter, useLink, useFetch } from "~/hooks"
 import { getSettingBool, objStore, password } from "~/store"
 import { ObjType, PResp } from "~/types"
@@ -168,6 +168,7 @@ const Preview = () => {
       })
       player = new Artplayer(option)
       player.on("video:ended", () => {
+        if (!autoNext()) return
         const index = videos.findIndex((f) => f.name === objStore.obj.name)
         if (index < videos.length - 1) {
           replace(videos[index + 1].name)
@@ -184,8 +185,9 @@ const Preview = () => {
   onCleanup(() => {
     player?.destroy()
   })
+  const [autoNext, setAutoNext] = createSignal()
   return (
-    <VideoBox>
+    <VideoBox onAutoNextChange={setAutoNext}>
       <Box w="$full" h="60vh" id="video-player" />
     </VideoBox>
   )

src/pages/home/previews/video.tsx

@@ -1,5 +1,5 @@
 import { Box } from "@hope-ui/solid"
-import { onCleanup, onMount } from "solid-js"
+import { createSignal, onCleanup, onMount } from "solid-js"
 import { useRouter, useLink } from "~/hooks"
 import { getSettingBool, objStore } from "~/store"
 import { ObjType } from "~/types"
@@ -133,6 +133,7 @@ const Preview = () => {
   onMount(() => {
     player = new Artplayer(option)
     player.on("video:ended", () => {
+      if (!autoNext()) return
       const index = videos.findIndex((f) => f.name === objStore.obj.name)
       if (index < videos.length - 1) {
         replace(videos[index + 1].name)
@@ -142,8 +143,9 @@ const Preview = () => {
   onCleanup(() => {
     player?.destroy()
   })
+  const [autoNext, setAutoNext] = createSignal()
   return (
-    <VideoBox>
+    <VideoBox onAutoNextChange={setAutoNext}>
       <Box w="$full" h="60vh" id="video-player" />
     </VideoBox>
   )

src/pages/home/previews/video_box.tsx

@@ -1,6 +1,14 @@
-import { Flex, VStack, Image, Anchor, Tooltip } from "@hope-ui/solid"
+import {
+  Flex,
+  VStack,
+  Image,
+  Anchor,
+  Tooltip,
+  HStack,
+  Switch,
+} from "@hope-ui/solid"
 import { For, JSXElement } from "solid-js"
-import { useRouter, useLink } from "~/hooks"
+import { useRouter, useLink, useT } from "~/hooks"
 import { objStore } from "~/store"
 import { ObjType } from "~/types"
 import { convertURL } from "~/utils"
@@ -33,24 +41,49 @@ const players: { icon: string; name: string; scheme: string }[] = [
   },
 ]
 
-export const VideoBox = (props: { children: JSXElement }) => {
+export const VideoBox = (props: {
+  children: JSXElement
+  onAutoNextChange: (v: boolean) => void
+}) => {
   const { replace } = useRouter()
   const { currentObjLink } = useLink()
   let videos = objStore.objs.filter((obj) => obj.type === ObjType.VIDEO)
   if (videos.length === 0) {
     videos = [objStore.obj]
   }
-
+  const t = useT()
+  let autoNext = localStorage.getItem("video_auto_next")
+  if (!autoNext) {
+    autoNext = "true"
+  }
+  props.onAutoNextChange(autoNext === "true")
   return (
     <VStack w="$full" spacing="$2">
       {props.children}
-      <SelectWrapper
-        onChange={(name: string) => {
-          replace(name)
-        }}
-        value={objStore.obj.name}
-        options={videos.map((obj) => ({ value: obj.name }))}
-      />
+      <HStack spacing="$2" w="$full">
+        <SelectWrapper
+          onChange={(name: string) => {
+            replace(name)
+          }}
+          value={objStore.obj.name}
+          options={videos.map((obj) => ({ value: obj.name }))}
+        />
+        <Switch
+          css={{
+            whiteSpace: "nowrap",
+          }}
+          defaultChecked={autoNext === "true"}
+          onChange={(e) => {
+            props.onAutoNextChange(e.currentTarget.checked)
+            localStorage.setItem(
+              "video_auto_next",
+              e.currentTarget.checked.toString()
+            )
+          }}
+        >
+          {t("home.preview.auto_next")}
+        </Switch>
+      </HStack>
       <Flex wrap="wrap" gap="$1" justifyContent="center">
         <For each={players}>
           {(item) => {