From 0969d4665bb7184955b3901c2e2401f7403f1dea Mon Sep 17 00:00:00 2001
From: itsHenry <2671230065@qq.com>
Date: Sun, 14 Jan 2024 12:26:34 +0800
Subject: [PATCH] feat(aliyun_video_previewer): prev / next button and
persistent full_screen stat (#135)
close alist-org/alist#5839
---
src/pages/home/previews/aliyun_video.tsx | 65 +++++++++++++++++++++---
src/pages/home/previews/video.tsx | 1 -
2 files changed, 59 insertions(+), 7 deletions(-)
diff --git a/src/pages/home/previews/aliyun_video.tsx b/src/pages/home/previews/aliyun_video.tsx
index 0f8e3220d7..ec905b5ddf 100644
--- a/src/pages/home/previews/aliyun_video.tsx
+++ b/src/pages/home/previews/aliyun_video.tsx
@@ -3,7 +3,7 @@ import { createSignal, onCleanup, onMount } from "solid-js"
import { useRouter, useLink, useFetch } from "~/hooks"
import { getSettingBool, objStore, password } from "~/store"
import { ObjType, PResp } from "~/types"
-import { ext, handleResp, notify, r } from "~/utils"
+import { ext, handleResp, notify, r, pathDir, pathJoin } from "~/utils"
import Artplayer from "artplayer"
import { type Option } from "artplayer/types/option"
import { type Setting } from "artplayer/types/setting"
@@ -14,6 +14,7 @@ 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"
export interface Data {
drive_id: string
@@ -44,12 +45,33 @@ export interface Meta {
}
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(),
@@ -59,6 +81,28 @@ const Preview = () => {
autoplay: getSettingBool("video_autoplay"),
autoSize: false,
autoMini: true,
+ controls: [
+ {
+ name: "previous-button",
+ index: 10,
+ position: "left",
+ html: '',
+ tooltip: "Previous",
+ click: function () {
+ previous_video()
+ },
+ },
+ {
+ name: "next-button",
+ index: 11,
+ position: "left",
+ html: '',
+ tooltip: "Next",
+ click: function () {
+ next_video()
+ },
+ },
+ ],
loop: false,
flip: true,
playbackRate: true,
@@ -279,12 +323,21 @@ const Preview = () => {
}
})
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
+ }
+ 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()
})
interval = window.setInterval(resetPlayUrl, 1000 * 60 * 14)
})
diff --git a/src/pages/home/previews/video.tsx b/src/pages/home/previews/video.tsx
index 254542ee8d..2aed9568b2 100644
--- a/src/pages/home/previews/video.tsx
+++ b/src/pages/home/previews/video.tsx
@@ -295,7 +295,6 @@ const Preview = () => {
default:
auto_fullscreen = false
}
- console.log(auto_fullscreen)
player.on("ready", () => {
player.fullscreen = auto_fullscreen
})