feat: prev / next button and persistent full_screen stat (#125)

* feat: prev / next button and persistent full_screen stat

* chore: fix codefactor

src/pages/home/previews/video.tsx

@@ -3,7 +3,7 @@ import { createSignal, onCleanup, onMount } from "solid-js"
 import { useRouter, useLink } from "~/hooks"
 import { getSettingBool, objStore } from "~/store"
 import { ObjType } from "~/types"
-import { ext } from "~/utils"
+import { ext, pathDir, pathJoin } from "~/utils"
 import Artplayer from "artplayer"
 import { type Option } from "artplayer/types/option"
 import { type Setting } from "artplayer/types/setting"
@@ -15,14 +15,36 @@ import Hls from "hls.js"
 import { currentLang } from "~/app/i18n"
 import { VideoBox } from "./video_box"
 import { ArtPlayerIconsSubtitle } from "~/components/icons"
+import { useNavigate } from "@solidjs/router"
 
 const Preview = () => {
-  const { replace, pathname } = useRouter()
+  const { pathname, searchParams } = useRouter()
   const { proxyLink } = useLink()
+  const navigate = useNavigate()
   let videos = objStore.objs.filter((obj) => obj.type === ObjType.VIDEO)
   if (videos.length === 0) {
     videos = [objStore.obj]
   }
+  const next_video = () => {
+    const index = videos.findIndex((f) => f.name === objStore.obj.name)
+    if (index < videos.length - 1) {
+      navigate(
+        pathJoin(pathDir(location.pathname), videos[index + 1].name) +
+          "?auto_fullscreen=" +
+          player.fullscreen,
+      )
+    }
+  }
+  const previous_video = () => {
+    const index = videos.findIndex((f) => f.name === objStore.obj.name)
+    if (index > 0) {
+      navigate(
+        pathJoin(pathDir(location.pathname), videos[index - 1].name) +
+          "?auto_fullscreen=" +
+          player.fullscreen,
+      )
+    }
+  }
   let player: Artplayer
   let option: Option = {
     id: pathname(),
@@ -49,7 +71,28 @@ const Preview = () => {
     // layers: [],
     // settings: [],
     // contextmenu: [],
-    // controls: [],
+    controls: [
+      {
+        name: "previous-button",
+        index: 10,
+        position: "left",
+        html: '<svg fill="none" stroke-width="2" xmlns="http://www.w3.org/2000/svg" height="22" width="22" class="icon icon-tabler icon-tabler-player-track-prev-filled" width="1em" height="1em" viewBox="0 0 24 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; color: currentcolor;"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M20.341 4.247l-8 7a1 1 0 0 0 0 1.506l8 7c.647 .565 1.659 .106 1.659 -.753v-14c0 -.86 -1.012 -1.318 -1.659 -.753z" stroke-width="0" fill="currentColor"></path><path d="M9.341 4.247l-8 7a1 1 0 0 0 0 1.506l8 7c.647 .565 1.659 .106 1.659 -.753v-14c0 -.86 -1.012 -1.318 -1.659 -.753z" stroke-width="0" fill="currentColor"></path></svg>',
+        tooltip: "Previous",
+        click: function () {
+          previous_video()
+        },
+      },
+      {
+        name: "next-button",
+        index: 11,
+        position: "left",
+        html: '<svg fill="none" stroke-width="2" xmlns="http://www.w3.org/2000/svg" height="22" width="22" class="icon icon-tabler icon-tabler-player-track-next-filled" width="1em" height="1em" viewBox="0 0 24 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="overflow: visible; color: currentcolor;"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M2 5v14c0 .86 1.012 1.318 1.659 .753l8 -7a1 1 0 0 0 0 -1.506l-8 -7c-.647 -.565 -1.659 -.106 -1.659 .753z" stroke-width="0" fill="currentColor"></path><path d="M13 5v14c0 .86 1.012 1.318 1.659 .753l8 -7a1 1 0 0 0 0 -1.506l-8 -7c-.647 -.565 -1.659 -.106 -1.659 .753z" stroke-width="0" fill="currentColor"></path></svg>',
+        tooltip: "Next",
+        click: function () {
+          next_video()
+        },
+      },
+    ],
     quality: [],
     // highlight: [],
     plugins: [],
@@ -243,12 +286,22 @@ const Preview = () => {
   }
   onMount(() => {
     player = new Artplayer(option)
+    let auto_fullscreen: boolean
+    switch (searchParams["auto_fullscreen"]) {
+      case "true":
+        auto_fullscreen = true
+      case "false":
+        auto_fullscreen = false
+      default:
+        auto_fullscreen = false
+    }
+    console.log(auto_fullscreen)
+    player.on("ready", () => {
+      player.fullscreen = auto_fullscreen
+    })
     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)
-      }
+      next_video()
     })
   })
   onCleanup(() => {