yw1573/BiliDown
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: restructure project to standard Go layout

Browse Source 
- Reorganize code into cmd/bilidown and internal/ packages
- Rename client/ to web/ for frontend source
- Remove systray dependency for headless web service
- Embed static files into binary using go:embed
- Update import paths to use internal/ prefix
- Update .gitignore with common patterns

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
yw1573
2026-04-02 17:21:49 +08:00
parent 4facf82956
commit dd8eaef97d
61 changed files with 244 additions and 869 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/error/index.ts
+22
View File
@@ -0,0 +1,22 @@
import van from 'vanjs-core'
import { Route } from 'vanjs-router'
import { GLOBAL_ERROR_MESSAGE, GLOBAL_HIDE_PAGE } from '../mixin'
const { button, div } = van.tags
export default () => Route({
rule: 'error',
Loader() {
return div({ class: 'py-5 px-4 container' },
div({ class: 'py-5 px-3 border rounded-4 vstack align-items-center gap-4' },
div({ class: 'fs-2 fw-bold' }, '错误提示'),
div({ class: 'text-danger fs-4' }, () => GLOBAL_ERROR_MESSAGE.val || '请刷新页面重试'),
button({
class: 'btn btn-warning', onclick() {
location.href = location.pathname
}
}, '刷新页面')
)
)
},
})
web/src/header.ts
+27
View File
@@ -0,0 +1,27 @@
import van from 'vanjs-core'
import { now } from 'vanjs-router'
import { GLOBAL_HAS_LOGIN } from './mixin'
const { a, div } = van.tags
export default () => {
const classStr = (name: string) => van.derive(() => `text-nowrap nav-link ${now.val.split('/')[0] == name ? 'active' : ''}`)
return div({ class: 'hstack gap-4' },
div({ class: 'fs-4 fw-bold text-nowrap' }, 'Bilidown'),
div({ class: 'nav nav-underline flex-nowrap overflow-auto' },
div({ class: 'nav-item', hidden: () => !GLOBAL_HAS_LOGIN.val },
a({ class: classStr('work'), href: '#/work' }, '视频解析')
),
div({ class: 'nav-item', hidden: () => !GLOBAL_HAS_LOGIN.val },
a({ class: classStr('task'), href: '#/task' }, '任务列表')
),
div({ class: 'nav-item', hidden: () => !GLOBAL_HAS_LOGIN.val },
a({ class: classStr('setting'), href: '#/setting' }, '设置中心')
),
div({ class: 'nav-item', hidden: GLOBAL_HAS_LOGIN },
a({ class: classStr('login'), href: '#/login' }, '扫码登录')
),
)
)
}
web/src/index.ts
+28
View File
@@ -0,0 +1,28 @@
/// <reference types="vite/client" />
import van from 'vanjs-core'
import Header from './header'
import Work from './work'
import Task from './task'
import Login from './login'
import Setting from './setting'
import _Error from './error'
import { redirect } from 'vanjs-router'
import { GLOBAL_HIDE_PAGE } from './mixin'
import 'bootstrap/dist/css/bootstrap.min.css'
import './scss/index.scss'
import { PlayerModalComp } from './task/playerModal'
const { div } = van.tags
redirect('home', 'work')
van.add(document.body,
div({ class: 'container py-4 vstack gap-4', hidden: GLOBAL_HIDE_PAGE },
Header(),
Work(),
Task(),
Login(),
Setting(),
),
_Error()
)
web/src/login/data.ts
+13
View File
@@ -0,0 +1,13 @@
import { ResJSON } from '../mixin'
/** 获取新的二维码信息，包含二维码 Base64 数据和二维码 Key */
export const getQRInfo = async () => {
const res = await fetch('/api/getQRInfo').then(res => res.json()) as ResJSON<{ image: string, key: string }>
if (!res.success) throw new Error(res.message)
return res.data
}
/** 根据二维码 Key 获取二维码状态 */
export const getQRStatus = async (key: string) => {
return await fetch('/api/getQRStatus?key=' + key).then(res => res.json()) as ResJSON
}
web/src/login/index.ts
+111
View File
@@ -0,0 +1,111 @@
import van from 'vanjs-core'
import { Route, goto, nowHash } from 'vanjs-router'
import { checkLogin, GLOBAL_HAS_LOGIN } from '../mixin'
import { getQRInfo, getQRStatus } from './data'
const { div, img } = van.tags
export default () => {
const qrSrc = van.state('')
const errorMessage = van.state('')
const qrStatusMessage = van.state('')
return Route({
rule: 'login',
Loader() {
return div(
div({ class: 'card card-body rounded-4' },
div({ class: 'row' },
div({ class: 'col-xl-3 col-lg-4 col-md-5 col-sm-6' },
div({ class: 'ratio ratio-1x1' },
img({
src: qrSrc,
class: 'w-100',
hidden: true,
onload(this: HTMLImageElement) {
this.hidden = false
},
ondragstart: event => event.preventDefault(),
})
)
),
div({ class: 'col-xl-9 col-lg-8 col-md-7 col-sm-6' },
div({ class: 'vstack gap-3 h-100 px-3 justify-content-center align-items-center align-items-sm-start pb-4 pb-sm-0' },
div({ class: 'fs-1' }, '扫码登录'),
div({ class: 'fs-4' }, '使用哔哩哔哩 APP 扫码登录'),
div({ class: 'text-danger fw-bold', hidden: () => !errorMessage.val }, errorMessage),
div({ class: 'text-primary fw-bold', hidden: errorMessage },
() => qrStatusMessage.val.replace('未扫码', '').replace('二维码已扫码未确认', '已扫码，请点击确认')
)
)
)
)
)
)
},
async onFirst() {
if (await checkLogin()) return goto('work')
},
async onLoad() {
// 检查登录标识，如果已经登录过了，则重定向到工作页
if (GLOBAL_HAS_LOGIN.val) return goto('work')
// 当前活动的二维码标识
let qrKey = ''
/** 刷新二维码 */
const refreshQR = async () => {
try {
const qrInfo = await getQRInfo()
// 更新二维码组件内容
qrSrc.val = qrInfo.image
// 更新当前活动的二维码标识
qrKey = qrInfo.key
} catch (error) {
// 加载二维码时失败
errorMessage.val = `加载二维码失败，请刷新页面重试`
clearTimeout(timer)
clearTimeout(statusTimer)
}
}
/** 检查二维码状态 */
const checkQRStatus = async () => {
try {
const status = await getQRStatus(qrKey)
if (status.success) {
clearTimeout(statusTimer)
GLOBAL_HAS_LOGIN.val = true
const url = new URL(window.location.href)
url.hash = ''
window.location.href = url.toString()
} else {
qrStatusMessage.val = status.message
}
} catch (error) {
// 出错了，显示错误信息
errorMessage.val = `获取二维码状态失败，请刷新页面重试`
clearTimeout(statusTimer)
clearTimeout(timer)
}
}
// 载入初始二维码
refreshQR()
/** 用于定时刷新二维码的定时器 */
const timer = setInterval(async () => {
if (nowHash().split('/')[0] != 'login')
return clearInterval(timer)
refreshQR()
}, 120000)
/** 用于轮询检查二维码状态的定时器 */
const statusTimer = setInterval(async () => {
if (nowHash().split('/')[0] != 'login')
return clearInterval(statusTimer)
checkQRStatus()
}, 1000)
},
})
}
web/src/mixin.ts
+69
View File
@@ -0,0 +1,69 @@
import van from 'vanjs-core'
import { goto } from 'vanjs-router'
export type ResJSON<Data = null> = {
success: boolean
data: Data
message: string
}
/** 创建请求超时控制器 */
export const timeoutController = (ms = 15000): {
signal: AbortSignal
timer: number
} => {
const controller = new AbortController()
const timer = setTimeout(() => {
controller.abort(new Error('请求超时'))
}, ms)
return { signal: controller.signal, timer }
}
/** 全局登录状态 */
export const GLOBAL_HAS_LOGIN = van.state(false)
/** 设置页面整体隐藏，该状态值用于设置根 DOM 的 `hidden` 属性 */
export const GLOBAL_HIDE_PAGE = van.state(true)
/** 全局错误信息，用于在统一的错误提示页面中展示 */
export const GLOBAL_ERROR_MESSAGE = van.state('')
/** 跳转到统一的错误提示页面 */
export const showErrorPage = (message: string) => {
GLOBAL_HIDE_PAGE.val = true
GLOBAL_ERROR_MESSAGE.val = message
goto('error')
}
/** 检查后端是否登录，如果未登录，则跳转到登录页
*
* 登录成功或失败，都将更新 `GLOBAL_HAS_LOGIN` 的值，并返回 `boolean`，并将 `GLOBAL_HIDE_PAGE` 设置为 `false`
*
* 用法注意：每个路由 `onFirst` 和 `onLoad` 只能其中一个使用该函数，否则会导致执行两次请求
* 一般在 `onFirst` 中执行本方法，在 `onLoad` 中执行 `if (!GLOBAL_HAS_LOGIN.val) return goto('login')`
*/
export const checkLogin = async (): Promise<boolean> => {
if (GLOBAL_HAS_LOGIN.val) return GLOBAL_HIDE_PAGE.val = false, true
const res = await fetch('/api/checkLogin').then(res => res.json()) as ResJSON
GLOBAL_HAS_LOGIN.val = res.success
GLOBAL_HIDE_PAGE.val = false
if (!res.success) return goto('login'), false
return true
}
export interface VanComponent {
element: HTMLElement
}
export const formatSeconds = (seconds: number) => {
const hours = Math.floor(seconds / 3600)
const minutes = Math.floor((seconds % 3600) / 60)
const secs = seconds % 60
let str = ''
if (hours > 0) str += `${hours}时`
if (minutes > 0) str += `${minutes}分`
if (secs > 0) str += `${secs}秒`
return str
}
web/src/scss/index.scss
+51
View File
@@ -0,0 +1,51 @@
@media (max-width: 768px) {
.position-relative-sm-down {
position: relative !important;
}
}
.max-height-description {
max-height: 300px;
}
.video-item-btn {
cursor: pointer;
transition: all 0.2s;
border-color: transparent;
outline: none;
.text-muted {
transition: all 0.2s;
}
&:hover:not(.active),
&:focus-visible:not(.active) {
--bs-bg-opacity: 0.2;
border-width: 1px !important;
border-style: solid !important;
border-color: var(--bs-success) !important;
}
&.active {
--bs-bg-opacity: 0.8;
color: white !important;
.text-muted {
color: white !important;
}
}
}
.hover-btn svg {
cursor: pointer;
&:hover {
fill: red;
}
}
* {
word-wrap: break-word;
word-break: break-all;
}
web/src/setting/data.ts
+20
View File
@@ -0,0 +1,20 @@
import { Fields } from '.'
import { ResJSON } from '../mixin'
export const getFields = async (): Promise<Fields> => {
const res = await fetch('/api/getFields').then(res => res.json()) as ResJSON<Fields>
if (!res.success) throw new Error(res.message)
return res.data
}
export const saveFields = async (fields: [string, string][]) => {
const res = await fetch('/api/saveFields', {
method: 'POST',
body: JSON.stringify(fields),
headers: {
'Content-Type': 'application/json'
}
}).then(res => res.json()) as ResJSON
if (!res.success) throw new Error(res.message)
return res.message
}
web/src/setting/index.ts
+79
View File
@@ -0,0 +1,79 @@
import van from 'vanjs-core'
import { Route, goto } from 'vanjs-router'
import { checkLogin, GLOBAL_HAS_LOGIN, VanComponent } from '../mixin'
import { SaveFolderSetting } from './view'
import { getFields } from './data'
import { LoadingBox } from '../view'
const { button, div } = van.tags
export type Fields = Record<keyof SettingRoute['fields'], string>
export class SettingRoute implements VanComponent {
element: HTMLElement
loading = van.state(true)
fields = {
download_folder: van.state('')
}
constructor() {
this.element = this.Root()
}
Root() {
const _that = this
return Route({
rule: 'setting',
Loader() {
return div(
() => _that.loading.val ? LoadingBox() : '',
() => _that.loading.val ? '' : div({ class: 'vstack gap-4' },
SaveFolderSetting(_that),
div({ class: 'hstack gap-3' },
button({
class: 'btn btn-outline-secondary', onclick() {
if (!confirm('确定要关闭软件吗?')) return
fetch('/api/quit').then(res => res.json()).then(res => {
if (!res.success) alert(res.message)
else document.write(`<h2 style="text-align: center; padding: 30px 20px;">软件已关闭</h2>`)
})
}
}, '关闭软件'),
button({
class: 'btn btn-outline-danger', onclick() {
if (!confirm('确定要退出登录吗?')) return
fetch('/api/logout').then(res => res.json()).then(res => {
if (!res.success) alert(res.message)
else location.reload()
})
}
}, '退出登录'),
)
)
)
},
async onFirst() {
if (!await checkLogin()) return
_that.loading.val = true
getFields().then(fields => {
for (const key in fields) {
_that.fields[key as keyof Fields].val = fields[key as keyof Fields]
}
setTimeout(() => {
_that.loading.val = false
}, 200)
})
},
onLoad() {
if (!GLOBAL_HAS_LOGIN.val) return goto('login')
},
})
}
}
export default () => new SettingRoute().element
web/src/setting/view.ts
+34
View File
@@ -0,0 +1,34 @@
import van from 'vanjs-core'
import { SettingRoute } from '.'
import { saveFields } from './data'
const { a, button, div, input } = van.tags
export const SaveFolderSetting = (route: SettingRoute) => {
const saveFolder = route.fields.download_folder
const folderPickerDisabled = van.state(false)
const buttonText = '保存'
return div({ class: 'input-group' },
div({ class: 'input-group-text' }, '下载目录'),
input({
class: 'form-control',
value: saveFolder,
oninput: event => saveFolder.val = event.target.value,
}),
button({
class: 'btn btn-success', onclick() {
folderPickerDisabled.val = true
saveFields([
['download_folder', saveFolder.val]
]).then(message => {
alert(message)
}).catch(error => {
if (error instanceof Error) alert(error.message)
}).finally(() => {
folderPickerDisabled.val = false
})
}, disabled: folderPickerDisabled
}, buttonText)
)
}
web/src/task/data.ts
+74
View File
@@ -0,0 +1,74 @@
import { ResJSON } from "../mixin"
import { TaskInDB, TaskStatus, VideoFormat } from "../work/type"
let getActiveTaskController: AbortController | undefined
export const getActiveTask = async (): Promise<ActiveTask[] | null> => {
getActiveTaskController?.abort()
getActiveTaskController = new AbortController()
try {
const res = await fetch('/api/getActiveTask', {
signal: getActiveTaskController.signal
}).then(res => res.json()) as ResJSON<ActiveTask[]>
if (!res.success) throw new Error(res.message)
return res.data
} catch (error) {
if (error instanceof Error && error.name === 'AbortError') return null
throw error
}
}
let getTaskListController: AbortController | undefined
export const getTaskList = async (page: number, pageSize: number): Promise<TaskInDB[] | null> => {
getTaskListController?.abort()
getTaskListController = new AbortController()
try {
const res = await fetch(`/api/getTaskList?page=${page}&pageSize=${pageSize}`, {
signal: getTaskListController.signal
}).then(res => res.json()) as ResJSON<TaskInDB[]>
if (!res.success) throw new Error(res.message)
return res.data
} catch (error) {
if (error instanceof Error && error.name === 'AbortError') return null
throw error
}
}
export const showFile = async (path: string) => {
const res = await fetch(`/api/showFile?filePath=${encodeURIComponent(path)}`).then(res => res.json()) as ResJSON
if (!res.success) throw new Error(res.message)
}
/** 用于刷新任务实时进度 */
type ActiveTask = {
bvid: string
cid: number
/** 分辨率代码 */
format: VideoFormat
/** 视频标题 */
title: string
/** 视频发布者 */
owner: string
/** 视频封面 */
cover: string
/** 任务进度 */
status: TaskStatus
/** 文件保存到的目录 */
folder: string
/** 任务 ID */
id: number
/** 音频文件下载进度 */
audioProgress: number
/** 视频文件下载进度 */
videoProgress: number
/** 音视频合并进度 */
mergeProgress: number
/** 视频时长，秒 */
duration: number
}
export const deleteTask = async (id: number) => {
const res = await fetch(`/api/deleteTask?id=${id}`).then(res => res.json()) as ResJSON
if (!res.success) throw new Error(res.message)
}
web/src/task/index.ts
+236
View File
@@ -0,0 +1,236 @@
import van, { State } from 'vanjs-core'
import { Route, goto, now } from 'vanjs-router'
import { checkLogin, GLOBAL_HAS_LOGIN, GLOBAL_HIDE_PAGE, ResJSON, VanComponent } from '../mixin'
import { deleteTask, getActiveTask, getTaskList, showFile } from './data'
import { TaskInDB, TaskStatus } from '../work/type'
import { LoadingBox } from '../view'
import { PlayerModalComp } from './playerModal'
const { div, span } = van.tags
const { svg, path } = van.tags('http://www.w3.org/2000/svg')
export class TaskRoute implements VanComponent {
element: HTMLElement
/** 包含视频播放器的模态框 */
playerModalComp = new PlayerModalComp()
loading = van.state(false)
taskList: State<(TaskInDB & {
/** 音频下载进度百分比 */
audioProgress: State<number>
/** 视频下载进度百分比 */
videoProgress: State<number>
/** 合并进度百分比 */
mergeProgress: State<number>
/** 任务状态 */
statusState: State<TaskStatus>
/** 是否正在打开 */
opening: State<boolean>
/** 是否正在删除 */
deleting: State<boolean>
})[]> = van.state([])
constructor() {
this.element = this.Root()
}
Root() {
const _that = this
return Route({
rule: 'task',
Loader() {
return div(
() => _that.loading.val ? LoadingBox() : '',
() => div({ class: 'list-group', hidden: _that.loading.val },
_that.taskList.val.map(task => {
const ext = task.downloadType === 'audio' ? '.m4a' : '.mp4'
const filename = `${task.title} ${btoa(task.id.toString()).replace(/=/g, '')}${ext}`
return div({
class: () => `list-group-item p-0 hstack user-select-none ${task.statusState.val != 'done' && task.statusState.val != 'error' || task.opening.val ? 'disabled' : ''}`,
hidden: task.deleting,
},
div({
class: 'vstack gap-2 py-2 px-3',
style: `cursor: pointer;`,
onclick() {
const src = `/api/downloadVideo?path=${encodeURIComponent(
`${task.folder}\\${filename}`
)}`
if (task.statusState.val != 'done') return
_that.playerModalComp.open(src, task.title, task.downloadType === 'audio' ? 'audio' : 'video')
}
},
div({
class: () => `
${task.statusState.val == 'error' ? 'text-danger' : ''}
${task.statusState.val == 'waiting' || task.statusState.val == 'running'
? 'text-primary' : ''}`
},
() => {
if (task.opening.val) return '正在打开文件位置...'
return div(
span({
class: `me-2 badge ${task.downloadType === 'audio' ? 'bg-success' : 'bg-primary'}`,
title: task.downloadType === 'audio' ? '音频' : '视频'
}, task.downloadType === 'audio' ? 'A' : 'V'),
span({}, filename),
)
}),
div({ class: 'text-secondary small' },
() => {
if (task.statusState.val == 'waiting') return '等待下载'
if (task.statusState.val == 'error') return '下载失败'
if (task.statusState.val == 'done') return task.folder
if (task.videoProgress.val == 0) {
return `正在下载音频 (${(task.audioProgress.val * 100).toFixed(2)}%)`
} else if (task.mergeProgress.val == 0) {
return `正在下载视频 (${(task.videoProgress.val * 100).toFixed(2)}%)`
} else if (task.statusState.val == 'running') {
return `正在合并音视频 (${(task.mergeProgress.val * 100).toFixed(2)}%)`
} else {
return task.folder
}
}
),
div({
class: `progress`,
style: `height: 5px`,
hidden: () => task.statusState.val == 'done' || task.statusState.val == 'error'
},
div({
class: () => `progress-bar progress-bar-striped progress-bar-animated bg-${(() => {
if (task.videoProgress.val == 0) return 'primary'
if (task.mergeProgress.val == 0) return 'success'
else return 'info'
})()}`,
style: () => {
let width = 0
if (task.videoProgress.val == 0) width = task.audioProgress.val * 100
else if (task.mergeProgress.val == 0) width = task.videoProgress.val * 100
else width = task.mergeProgress.val * 100
return `width: ${width}%`
}
}),
)
),
div({
class: 'me-4',
hidden: task.statusState.val != 'done'
|| task.opening.val // 正在打开文件位置时，不应该显示删除按钮
|| task.deleting.val // 正在删除时，不应该显示删除按钮
},
div({
class: 'hover-btn', title: '打开文件位置',
onclick() {
showFile(`${task.folder}\\${filename}`)
task.opening.val = true
setTimeout(() => {
task.opening.val = false
}, 3000)
}
},
_that.FolderSVG()
)
),
div({
class: 'me-4',
hidden: task.statusState.val != 'done'
&& task.statusState.val != 'error'
|| task.opening.val // 正在打开文件位置时，不应该显示删除按钮
|| task.deleting.val // 正在删除时，不应该显示删除按钮
},
div({
class: 'hover-btn', title: '删除视频',
onclick() {
task.deleting.val = true
deleteTask(task.id).then(() => {
_that.taskList.val = _that.taskList.val.filter(taskInDB => taskInDB.id != task.id)
}).catch(error => {
alert(error.message)
})
}
},
_that.DeleteSVG()
)
),
)
})
)
)
},
async onFirst() {
if (!await checkLogin()) return
},
async onLoad() {
if (!GLOBAL_HAS_LOGIN.val) return goto('login')
_that.loading.val = true
getTaskList(0, 360).then(taskList => {
if (!taskList) return
_that.taskList.val = taskList.map(task => ({
...task,
audioProgress: van.state(1),
videoProgress: van.state(1),
mergeProgress: van.state(1),
statusState: van.state(task.status),
opening: van.state(false),
deleting: van.state(false)
}))
const refresh = async () => {
const activeTaskList = await getActiveTask()
if (!activeTaskList) return false
setTimeout(() => {
_that.loading.val = false
}, 200)
_that.taskList.val.forEach(taskInDB => {
activeTaskList.forEach(task => {
if (taskInDB.id == task.id) {
taskInDB.audioProgress.val = task.audioProgress
taskInDB.videoProgress.val = task.videoProgress
taskInDB.mergeProgress.val = task.mergeProgress
taskInDB.statusState.val = task.status
}
})
})
if (activeTaskList.filter(task => task.status == 'running').length == 0) {
clearInterval(timer)
clearInterval(helper)
}
return true
}
refresh()
let timer = setInterval(() => {
refresh()
}, 1000)
let helper = setInterval(() => {
if (now.val.split('/')[0] != 'task') {
clearInterval(helper)
clearInterval(timer)
}
})
})
},
})
}
DeleteSVG() {
return svg({ style: `width: 1em; height: 1em`, fill: "currentColor", class: "bi bi-trash3", viewBox: "0 0 16 16" },
path({ "d": "M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5" }),
)
}
FolderSVG() {
return svg({ style: `width: 1em; height: 1em`, fill: "currentColor", class: "bi bi-folder2", viewBox: "0 0 16 16" },
path({ "d": "M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 12.5zM2.5 3a.5.5 0 0 0-.5.5V6h12v-.5a.5.5 0 0 0-.5-.5H9c-.964 0-1.71-.629-2.174-1.154C6.374 3.334 5.82 3 5.264 3zM14 7H2v5.5a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5z" }),
)
}
}
export default () => new TaskRoute().element
web/src/task/playerModal.ts
+143
View File
@@ -0,0 +1,143 @@
import { VanComponent } from '../mixin'
import van from 'vanjs-core'
import { Modal } from 'bootstrap'
import Plyr from 'plyr'
import 'plyr/dist/plyr.css'
const { a, button, div, video, audio } = van.tags
export class PlayerComp implements VanComponent {
element: HTMLElement
/** 使用该对象前，请先将元素加入文档树后调用 `initPlayer` 方法 */
player!: Plyr
videoElement: HTMLVideoElement
audioElement: HTMLAudioElement
videoPlayer!: Plyr
audioPlayer!: Plyr
type = van.state<'video' | 'audio'>('video')
src = van.state('')
filename = van.state('')
constructor() {
this.videoElement = video()
this.audioElement = audio()
this.element = this.Root()
}
Root(): HTMLElement {
const that = this
return div({ class: 'player-container' },
div({ class: 'video-wrapper', hidden: () => that.type.val !== 'video' }, this.videoElement),
div({ class: 'audio-wrapper', hidden: () => that.type.val !== 'audio' }, this.audioElement)
)
}
initPlayer() {
if (!this.element.parentNode) throw new Error('请将播放器元素加入 DOM 树')
this.videoPlayer = new Plyr(this.videoElement, {})
this.audioPlayer = new Plyr(this.audioElement, {})
// 设置当前活动的player
this.updateActivePlayer()
}
private updateActivePlayer() {
this.player = this.type.val === 'video' ? this.videoPlayer : this.audioPlayer
}
setType(type: 'video' | 'audio') {
this.type.val = type
this.updateActivePlayer()
// 清除非活动元素的src
if (type === 'video') {
this.audioElement.src = ''
} else {
this.videoElement.src = ''
}
}
setSrc(src: string) {
this.src.val = src
if (this.type.val === 'video') {
this.videoElement.src = src
this.audioElement.src = ''
} else {
this.audioElement.src = src
this.videoElement.src = ''
}
}
}
export class PlayerModalComp implements VanComponent {
element: HTMLElement
playerComp: PlayerComp
modal: Modal
type = van.state<'video' | 'audio'>('video')
title = van.state('视频播放器')
fileExtension = van.state('.mp4')
constructor() {
this.playerComp = new PlayerComp()
this.element = this.Root()
this.initModalEvent()
van.add(document.body, this.element)
this.playerComp.initPlayer()
this.modal = new Modal(this.element)
}
initModalEvent() {
this.element.addEventListener('shown.bs.modal', () => {
this.playerComp.player.play()
})
this.element.addEventListener('hide.bs.modal', () => {
if (!this.playerComp.player.stopped) {
this.playerComp.player.stop()
this.playerComp.setSrc('')
}
})
}
open(src: string, filename: string, type: 'video' | 'audio') {
this.type.val = type
this.title.val = type === 'video' ? '视频播放器' : '音频播放器'
this.fileExtension.val = type === 'video' ? '.mp4' : '.m4a'
this.playerComp.setType(type)
this.playerComp.setSrc(src)
this.playerComp.filename.val = filename
this.modal.show()
}
Root() {
const that = this
return div({ class: `modal fade`, tabIndex: -1 },
div({ class: 'modal-dialog modal-xl modal-fullscreen-xl-down' },
div({ class: `modal-content` },
div({ class: `modal-header` },
div({ class: `h5 modal-title` }, () => this.title.val),
button({ class: `btn-close`, 'data-bs-dismiss': `modal` })
),
div({ class: 'modal-body p-0' },
div({ class: () => that.type.val === 'video' ? 'ratio ratio-16x9' : '' }, this.playerComp.element),
div({ class: 'vstack p-3 gap-3' },
div({}, that.playerComp.filename)
)
),
div({ class: 'modal-footer' },
button({ class: 'btn btn-secondary', 'data-bs-dismiss': `modal` }, '关闭'),
button({
class: 'btn btn-primary', onclick() {
const link = a({
download: () => that.playerComp.filename.val + that.fileExtension.val,
href: that.playerComp.src
})
that.modal.hide()
link.click()
}
}, '下载')
)
)
)
)
}
}
web/src/view.ts
+11
View File
@@ -0,0 +1,11 @@
import van from 'vanjs-core'
const { div } = van.tags
export const LoadingBox = (color = 'primary') => div({
class: 'py-4 hstack justify-content-center',
},
div({
class: `spinner-border text-${color}`,
}, div({ class: 'visually-hidden' }, 'Loading...'))
)
web/src/work/data.ts
+88
View File
@@ -0,0 +1,88 @@
import { ResJSON, timeoutController } from '../mixin'
import { FavList, PlayInfo, SeasonInfo, TaskInitData, VideoInfo } from './type'
/**
* 获取视频信息
*
* @throws {Error}
*/
export const getVideoInfo = async (bvid: string): Promise<VideoInfo> => {
const { signal, timer } = timeoutController()
const res = await fetch(`/api/getVideoInfo?bvid=${bvid}`, {
signal
}).then(res => res.json()) as ResJSON<VideoInfo>
if (!res.success) throw new Error(res.message)
clearTimeout(timer)
return res.data
}
/**
* 获取剧集信息
* @param epid EP 号
* @param ssid SS 号
* @throws {Error}
*/
export const getSeasonInfo = async (epid: number, ssid: number): Promise<SeasonInfo> => {
const { signal, timer } = timeoutController()
const res = await fetch(`/api/getSeasonInfo?epid=${epid}&ssid=${ssid}`, {
signal
}).then(res => res.json()) as ResJSON<SeasonInfo>
if (!res.success) throw new Error(res.message)
clearTimeout(timer)
return res.data
}
export const getPlayInfo = async (bvid: string, cid: number, controller: AbortController): Promise<PlayInfo> => {
const res = await fetch(`/api/getPlayInfo?bvid=${bvid}&cid=${cid}`, {
signal: controller.signal
}).then(res => res.json()) as ResJSON<PlayInfo>
if (!res.success) throw new Error(res.message)
return res.data
}
export const createTask = async (tasks: TaskInitData[]): Promise<ResJSON> => {
const { signal, timer } = timeoutController()
const res = await fetch('/api/createTask', {
method: 'POST',
signal,
body: JSON.stringify(tasks),
headers: {
'Content-Type': 'application/json'
}
}).then(res => res.json()) as ResJSON
clearTimeout(timer)
if (!res.success) throw new Error(res.message)
return res
}
export const getPopularVideoBvIds = async (): Promise<string[]> => {
const res = await fetch('/api/getPopularVideos').then(res => res.json()) as ResJSON<string[]>
if (!res.success) throw new Error(res.message)
return res.data
}
export const getRedirectedLocation = async (url: string): Promise<string> => {
return fetch(`/api/getRedirectedLocation?url=${encodeURIComponent(url)}`)
.then(res => res.json())
.then((data: ResJSON<string>) => {
if (!data.success) throw new Error(data.message)
return data.data
})
}
/** 获取收藏夹内视频列表 */
export const getFavList = async (mediaId: number): Promise<FavList> => {
return fetch(`/api/getFavList?mediaId=${mediaId}`)
.then(res => res.json())
.then((body: ResJSON<FavList>) => {
if (!body.success) throw new Error(body.message)
return body.data
})
}
web/src/work/index.ts
+126
View File
@@ -0,0 +1,126 @@
import van, { State } from 'vanjs-core'
import { Route, goto } from 'vanjs-router'
import VideoInfoCard from './view/videoInfoCard'
import { checkLogin, GLOBAL_HAS_LOGIN, showErrorPage } from '../mixin'
import { VideoParseResult, VideoInfoCardMode, SectionItem } from './type'
import { IDType, start } from './mixin'
import { ParseModalComp } from './view/parseModal'
import InputBox from './view/inputBox'
import { Modal } from 'bootstrap'
import { LoadingBox } from '../view'
import { getPopularVideoBvIds } from './data'
const { div } = van.tags
export class WorkRoute {
element: HTMLDivElement
/** 输入框内容是否标识为异常 */
urlInvalid = van.state(false)
/** 仅作为类名字符串 */
urlInvalidClass = van.derive(() => this.urlInvalid.val ? 'is-invalid' : '')
urlValue = van.state('')
videoInfoCardData = van.state<VideoParseResult>({
title: '', description: '', cover: '', publishData: '', duration: 0,
pages: [], owner: { face: '', mid: 0, name: '' },
dimension: { width: 0, height: 0, rotate: 0 },
staff: [], status: '', areas: [], styles: [], targetURL: '',
section: []
})
/** 标识视频信息卡片应该显示普通视频还是剧集，值为 `hide` 时隐藏卡片 */
videoInfoCardMode: VideoInfoCardMode = van.state('hide')
ownerFaceHide = van.derive(() => this.videoInfoCardData.val.owner.face == '')
/** 全部选项卡和列表数据 */
allSection
/** 当前选项卡的按钮列表 */
sectionPages
/** 当前选中的按钮列表 */
selectedPages
/** 视频列表批量解析模态框 */
parseModal: Modal
parseModalComp: ParseModalComp
/** 按钮是否处于 `loading` 状态，如果是则按钮设置为 `disabled` */
btnLoading = van.state(false)
/** 页面初始加载的 loading 状态 */
initLoading = van.state(true)
/** 是否是初始的热门推荐结果 */
isInitPopular = van.state(false)
sectionTabsActiveIndex = van.state(0)
constructor() {
const _that = this
this.allSection = van.derive(() => {
const list = (
this.videoInfoCardMode.val == 'season'
|| this.videoInfoCardMode.val == 'video' && this.videoInfoCardData.val.section.length == 0
? [{ title: '正片', pages: this.videoInfoCardData.val.pages }] : []
).concat(this.videoInfoCardData.val.section)
return list
})
this.sectionPages = van.derive(() => {
return this.allSection.val[this.sectionTabsActiveIndex.val]?.pages || []
})
this.selectedPages = van.derive(() => this.sectionPages.val.filter(page => page.selected.val))
this.parseModalComp = new ParseModalComp({ workRoute: this })
van.add(document.body, this.parseModalComp.element)
this.parseModal = new Modal(this.parseModalComp.element)
this.element = Route({
rule: 'work',
Loader() {
return div(
() => _that.initLoading.val ? LoadingBox() : '',
div({ class: 'vstack gap-3', hidden: _that.initLoading },
InputBox(_that),
div({ hidden: () => _that.videoInfoCardMode.val == 'hide' || _that.btnLoading.val },
VideoInfoCard(_that),
),
)
)
},
async onFirst() {
if (!await checkLogin()) return
let idType = this.args[0] as IDType
let value = this.args[1]
// if (!value) return goto('work'), _that.initLoading.val = false
if (!value) {
_that.isInitPopular.val = true
const popularBvidList = await getPopularVideoBvIds()
idType = 'bv'
value = popularBvidList[Math.floor(Math.random() * popularBvidList.length)]
}
if (idType == 'bv' && !value.match(/^BV1[a-zA-Z0-9]+$/)) return goto('work')
if ((idType == 'ep' || idType == 'ss' || idType == 'fav')
&& !value.match(/^\d+$/)) return goto('work')
if (idType == 'bv' && !_that.isInitPopular.val) _that.urlValue.val = value
else if (idType == 'ep' || idType == 'ss') _that.urlValue.val = `${idType}${value}`
start(_that, {
idType,
value,
from: 'onFirst'
}).catch(error => {
const errorMessage = `获取视频信息失败：${error.message}`
showErrorPage(errorMessage)
_that.videoInfoCardMode.val = 'hide'
}).finally(() => {
_that.btnLoading.val = false
_that.isInitPopular.val = false
setTimeout(() => {
_that.initLoading.val = false
}, 200)
})
},
async onLoad() {
if (!GLOBAL_HAS_LOGIN.val) return goto('login')
}
})
}
}
export default () => new WorkRoute().element
web/src/work/mixin.ts
+196
View File
@@ -0,0 +1,196 @@
import { getFavList, getRedirectedLocation, getSeasonInfo, getVideoInfo } from './data'
import { WorkRoute } from '.'
import van from 'vanjs-core'
import { Episode, PageInParseResult, VideoParseResult } from './type'
import { ResJSON } from '../mixin'
/** 点击按钮开始解析 */
export const start = async (
workRoute: WorkRoute,
option: {
/** 标识字段类型 */
idType: IDType
/** 标识字段值 */
value: string | number
/** 调用来源 */
from: 'click' | 'onFirst'
}) => {
// 如果初始载入路由时，路由参数不带有视频信息，则会随机选择一个热门视频
// 这种情况展示的解析结果，不应该同步修改路由参数，用户直接刷新网页，可以继续随机推荐不同的视频
// 而如果是单击按钮或者路由参数带有视频信息，那么实现的解析结果需要同步修改路由参数
if (!workRoute.isInitPopular.val)
history.replaceState(null, '', `#/work/${option.idType}/${option.value}`)
workRoute.sectionTabsActiveIndex.val = 0
if (option.idType === 'bv') {
const bvid = option.value as string
await getVideoInfo(bvid).then(info => {
workRoute.videoInfoCardData.val = {
section: (info.ugc_season.sections || []).map(i => {
let index = 0
return {
title: (info.ugc_season.sections || []).length == 1 ? info.ugc_season.title : i.title,
pages: i.episodes.flatMap(j => j.pages.map(k => {
index++
return {
bvid: j.bvid,
cid: k.cid,
dimension: k.dimension,
duration: k.duration,
page: index,
part: j.title,
badge: index.toString(),
selected: van.state(bvid == j.bvid)
}
}))
}
}),
targetURL: `https://www.bilibili.com/video/${bvid}`,
areas: [],
styles: [],
status: '',
cover: info.pic,
title: info.title,
description: info.desc,
publishData: new Date(info.pubdate * 1000).toLocaleString(),
duration: info.duration,
pages: info.pages.map((page, index) => ({
...page,
bvid,
badge: (index + 1).toString(),
selected: van.state(info.pages.length == 1)
})),
dimension: info.dimension,
owner: info.owner,
staff: info.staff?.map(i => `${i.name}[${i.title}]`) || []
}
workRoute.videoInfoCardMode.val = 'video'
})
} else if (option.idType === 'ep' || option.idType === 'ss') {
const epid = option.idType === 'ep' ? option.value as number : 0
const ssid = option.idType === 'ss' ? option.value as number : 0
await getSeasonInfo(epid, ssid).then(info => {
workRoute.videoInfoCardData.val = {
section: (info.section || []).map(i => ({
pages: i.episodes.map(episodeToPage),
title: i.title
})),
targetURL: `https://www.bilibili.com/bangumi/play/${option.idType}${option.value}`,
areas: info.areas.map(i => i.name),
styles: info.styles,
duration: 0,
cover: info.cover,
description: info.evaluate,
owner: { name: info.actors, face: '', mid: 0 },
pages: info.episodes.map(episodeToPage),
status: info.new_ep.desc,
publishData: new Date().toLocaleDateString(),
staff: info.actors.split('\n'),
dimension: { height: 0, rotate: 0, width: 0 },
title: info.title
}
workRoute.videoInfoCardMode.val = 'season'
})
} else if (option.idType == 'fav') {
const mediaId = option.value as number
await getFavList(mediaId).then(favList => {
workRoute.videoInfoCardData.val = {
areas: [],
cover: favList[0].cover,
description: favList[0].intro,
dimension: { height: 0, width: 0, rotate: 0 },
duration: favList[0].duration,
owner: favList[0].upper,
pages: favList.map((info, index) => ({
badge: (index + 1).toString(),
selected: van.state(index == 0),
bvid: info.bvid,
cid: info.ugc.first_cid,
dimension: { height: 0, width: 0, rotate: 0 },
duration: info.duration,
page: index,
part: info.title,
})),
publishData: new Date(favList[0].pubtime * 1000).toLocaleString(),
section: [],
staff: [],
status: '',
styles: [],
targetURL: `https://www.bilibili.com/video/${favList[0].bvid}`,
title: favList[0].title
}
workRoute.videoInfoCardMode.val = 'video'
})
}
}
const episodeToPage = (episode: Episode, index: number): PageInParseResult => {
return {
bvid: episode.bvid,
cid: episode.cid,
dimension: episode.dimension,
duration: episode.duration,
page: index + 1,
part: episode.long_title || (episode.title.match(/^\d+$/) ? `第 ${episode.title} 集` : episode.title),
badge: episode.title,
selected: van.state(false)
}
}
export type IDType = 'bv' | 'ep' | 'ss' | 'fav'
/**
* 校验用户输入的待解析的视频链接
* @param url 待解析的视频链接
* @returns 如果校验成功，则返回 BV 号，否则返回 `false`
*/
export const checkURL = (url: string): {
type: IDType
value: string | number
} => {
const matchBvid = url.match(/^(?:https?:\/\/www\.bilibili\.com\/video\/)?(BV1[a-zA-Z0-9]+)/)
if (matchBvid) return { type: 'bv', value: matchBvid[1] }
const matchSeason = url.match(/^(?:https?:\/\/www\.bilibili\.com\/bangumi\/play\/)?(ep|ss)(\d+)/)
if (matchSeason) return { type: matchSeason[1] as 'ep' | 'ss', value: parseInt(matchSeason[2]) }
try {
const _url = new URL(url)
const mediaId = parseInt(_url.searchParams.get('fid') || '')
if (_url.hostname == 'space.bilibili.com' && _url.pathname.match(/^\/\d+\/favlist$/) && !isNaN(mediaId)) {
return { type: 'fav', value: mediaId }
}
const mlMatch = url.match(/^https:\/\/www.bilibili.com\/medialist\/detail\/ml(\d+)/)
if (mlMatch) return { type: 'fav', value: mlMatch[1] }
} catch { }
throw new Error('您输入的视频链接格式错误')
}
/** 将秒数转换为 `mm:ss` */
export const secondToTime = (second: number) => {
return `${Math.floor(second / 60)}:${(second % 60).toString().padStart(2, '0')}`
}
/** 如果是 B23 地址，则返回重定向后的地址，否则返回 `false` */
export const handleB23 = async (url: string): Promise<string | false> => {
if (!url.match(/^https:\/\/b23.tv\//)) return false
const epMatch = url.match(/^https:\/\/b23.tv\/(ep|ss)(\d+)/)
if (epMatch) return `https://www.bilibili.com/bangumi/play/${epMatch[1]}${epMatch[2]}`
const location = await getRedirectedLocation(url)
return location
}
export const handleSeasonsArchivesList = async (url: string): Promise<string | false> => {
try { new URL(url) } catch { return false }
const _url = new URL(url)
const mid = _url.pathname.match(/^\/(\d+)\/channel\/collectiondetail$/)?.[1]
const seasonId = parseInt(_url.searchParams.get('sid') || '')
if (_url.hostname == 'space.bilibili.com' && mid && !isNaN(seasonId)) {
return fetch(`/api/getSeasonsArchivesListFirstBvid?mid=${mid}&seasonId=${seasonId}`)
.then(res => res.json())
.then((body: ResJSON<string>) => {
if (!body.success) throw new Error(body.message)
return body.data
})
}
return false
}
web/src/work/type.ts
+277
View File
@@ -0,0 +1,277 @@
import { State } from 'vanjs-core'
/**
* 参考：[qn 视频清晰度标识](https://socialsisteryi.github.io/bilibili-API-collect/docs/video/videostream_url.html#qn%E8%A7%86%E9%A2%91%E6%B8%85%E6%99%B0%E5%BA%A6%E6%A0%87%E8%AF%86)
*
* | 值 | 含义 |
* | --- | ----------: |
* | 6 | 240P 极速 |
* | 16 | 360P 流畅 |
* | 32 | 480P 清晰 |
* | 64 | 720P 高清 |
* | 74 | 720P60 高帧率 |
* | 80 | 1080P 高清 |
* | 112 | 1080P+ 高码率 |
* | 116 | 1080P60 高帧率 |
* | 120 | 4K 超清 |
* | 125 | HDR 真彩色 |
* | 126 | 杜比视界 |
* | 127 | 8K 超高清 |
*/
export type VideoFormat = 6 | 16 | 32 | 64 | 74 | 80 | 112 | 116 | 120 | 125 | 126 | 127
/** 视频解析结果，数据用于 DOM 渲染，同时兼容 BV、EP、SS */
export type VideoParseResult = {
/** 合集标题 */
title: string
/** 合集描述 */
description: string
/** 合集发布时间 */
publishData: string
/** 合集封面 */
cover: string
/** 合集总时长 */
duration: number
/** 分集列表 */
pages: PageInParseResult[]
section: SectionItem[]
/** 合集作者 */
owner: {
mid: number
name: string
face: string
}
/** 合集分辨率 */
dimension: {
width: number
height: number
rotate: number
}
staff: string[]
/** 更新状态 */
status: string
/** 地区信息 */
areas: string[]
/** 分类标签 */
styles: string[]
/** 播放页面 */
targetURL: string
}
export type SectionItem = {
title: string
pages: PageInParseResult[]
}
export type PageInParseResult = {
/** 分集 CID */
cid: number
/** 分集 BVID */
bvid: string
/** 分集在合集中的序号，从 1 开始 */
page: number
/** 分集标题 */
part: string
/** 分集时长 */
duration: number
/** 分集分辨率 */
dimension: {
width: number
height: number
rotate: number
}
/** 前置胶囊标签内容 */
badge: string
/** 是否选中 */
selected: State<boolean>
}
export type StaffItem = {
mid: number
title: string
name: string
face: string
}
type PageInVideoInfo = {
cid: number
page: number
from: string
part: string
duration: number
dimension: {
width: number
height: number
rotate: number
}
}
/** 接口返回的视频信息 */
export type VideoInfo = {
aid: number
staff: null | StaffItem[]
title: string
desc: string
pubdate: number
pic: string
duration: number
bvid: string
pages: PageInVideoInfo[]
owner: {
mid: number
name: string
face: string
}
dimension: {
width: number
height: number
rotate: number
},
ugc_season: {
sections: {
title: string
episodes: {
title: string
pages: PageInVideoInfo[]
bvid: string
}[]
}[] | null
title: string
}
}
/** 接口返回的剧集信息 */
export type SeasonInfo = {
actors: string
areas: {
id: number
name: string
}[]
cover: string
evaluate: string
publish: {
is_finish: number
pub_time: string
};
season_id: number
season_title: string
stat: {
coins: number
danmakus: number
favorite: number
favorites: number
likes: number
reply: number
share: number
views: number
}
styles: string[]
title: string
total: number
episodes: Episode[]
new_ep: {
desc: string
is_new: number
}
section: {
title: string
episodes: Episode[]
}[] | null
}
export type Episode = {
aid: number
bvid: string
cid: number
cover: string
dimension: {
width: number
height: number
rotate: number
}
duration: number
ep_id: number
long_title: string
pub_time: number
title: string
}
export type VideoInfoCardMode = State<"video" | "season" | "hide">
export type Media<Type = 'video' | 'audio'> = {
id: Type extends 'video' ? VideoFormat : number
baseUrl: string
backupUrl: string[]
bandwidth: number
mimeType: string
codecs: string
width: number
height: number
frameRate: string
codecid: number
}
export type PlayInfo = {
// accept_description: string[]
accept_quality: VideoFormat[]
// support_formats: {
// quality: number
// format: string
// new_description: string
// codecs: string[]
// }[]
dash: {
duration: number
video: Media<'video'>[]
audio: Media<'audio'>[]
flac: {
audio: Media
} | null
}
}
/** 创建任务时的初始数据 */
export type TaskInitData = {
bvid: string
cid: number
format: number
title: string
owner: string
cover: string
audio: string
video: string
duration: number
downloadType: 'audio' | 'video' | 'merge'
}
/** 任务数据库中的数据 */
export type TaskInDB = TaskInitData & {
id: number
folder: string
createAt: string
status: TaskStatus
}
export type TaskStatus = 'done' | 'waiting' | 'running' | 'error'
export type FavList = FavListItem[]
export type FavListItem = {
title: string
cover: string
intro: string
duration: number
upper: {
mid: number
name: string
face: string
}
pubtime: number
bvid: string
ugc: {
first_cid: number
}
}
web/src/work/view/inputBox.ts
+85
View File
@@ -0,0 +1,85 @@
import van from 'vanjs-core'
import { goto } from 'vanjs-router'
import { v4 } from 'uuid'
import { checkURL, handleB23, handleSeasonsArchivesList, start } from '../mixin'
import { WorkRoute } from '..'
import { VanComponent } from '../../mixin'
const { button, div, input, label, span } = van.tags
class InputBoxComp implements VanComponent {
element: HTMLElement
btnID = v4()
constructor(public workRoute: WorkRoute) {
this.element = div(
div({ class: () => `hstack gap-3 align-items-stretch ${workRoute.urlInvalidClass.val}` },
div({ class: () => `form-floating flex-fill` },
input({
class: () => `form-control border-3 ${workRoute.urlInvalidClass.val}`,
placeholder: '请输入待解析的视频链接',
value: workRoute.urlValue,
oninput: event => workRoute.urlValue.val = event.target.value,
onkeyup: event => {
if (event.key === 'Enter') document.getElementById(this.btnID)?.click()
}
}),
label({ class: 'w-100' }, '请输入视频链接或 BV/EP/SS 号')
),
ParseButton(this, false, this.btnID),
ParseButton(this, true)
),
div({ class: 'invalid-feedback' }, () => workRoute.urlInvalid.val ? '您输入的视频链接格式错误' : ''),
)
}
}
const ParseButton = (parent: InputBoxComp, large: boolean, id: string = '') => {
const { workRoute } = parent
return button({
class: `btn btn-success text-nowrap ${large ? `btn-lg d-none d-md-block` : 'd-md-none'}`,
async onclick() {
try {
workRoute.btnLoading.val = true
workRoute.urlValue.val = workRoute.urlValue.val.trim()
try {
const handleB23Result = await handleB23(workRoute.urlValue.val)
if (handleB23Result) workRoute.urlValue.val = handleB23Result
} catch (error) {
if (error instanceof Error) return alert(error.message)
}
try {
const handleSeasonsArchivesListResult = await handleSeasonsArchivesList(workRoute.urlValue.val)
if (handleSeasonsArchivesListResult) workRoute.urlValue.val = handleSeasonsArchivesListResult
} catch (error) {
if (error instanceof Error) return alert(error.message)
}
const { type, value } = checkURL(workRoute.urlValue.val)
workRoute.urlInvalid.val = false
await start(workRoute, {
idType: type,
value,
from: 'click'
}).catch(error => {
const errorMessage = `获取视频信息失败：${error.message}`
alert(errorMessage)
goto('work')
workRoute.videoInfoCardMode.val = 'hide'
})
} catch (error) {
workRoute.urlInvalid.val = true
} finally {
setTimeout(() => {
workRoute.btnLoading.val = false
}, 200)
}
},
id,
disabled: workRoute.btnLoading
}, span({ class: 'spinner-border spinner-border-sm me-2', hidden: () => !workRoute.btnLoading.val }),
() => workRoute.btnLoading.val ? '解析中' : '解析视频'
)
}
export default (workRoute: WorkRoute) => new InputBoxComp(workRoute).element
web/src/work/view/parseModal.ts
+337
View File
@@ -0,0 +1,337 @@
import van, { State } from 'vanjs-core'
import { VanComponent, formatSeconds } from '../../mixin'
import { PageInParseResult, PlayInfo, VideoFormat } from '../type'
import { WorkRoute } from '..'
import { createTask, getPlayInfo } from '../data'
import PQueue from 'p-queue'
const { a, button, div, input, select, option, label } = van.tags
type Option = {
workRoute: WorkRoute
}
const videoFormatMap: Record<VideoFormat, string> = {
127: "超高清 8K",
126: "杜比视界",
125: "真彩 HDR",
120: "超清 4K",
116: "高清 1080P60",
112: "高清 1080P+",
80: "高清 1080P",
74: "高清 720P60",
64: "高清 720P",
32: "清晰 480P",
16: "流畅 360P",
6: "极速 240P",
}
const codecMap: Record<12 | 7 | 13, string> = {
12: "HEVC (hev1)",
7: "AVC (avc1)",
13: "AV1 (av01)",
}
export class ParseModalComp implements VanComponent {
element: HTMLElement
totalCount: State<number>
finishCount = van.state(0)
abortControllers: AbortController[] = []
currentController?: AbortController
allPlayInfo: State<{
page: PageInParseResult
info: PlayInfo | null
selected: State<boolean>
formatIndex: State<number>
}[]> = van.state([])
/** 该属性用于在点击“开始下载”按钮后使按钮变为禁用状态，防止多次点击 */
downloadBtnDisabled = van.state(false)
/** 下载类型：audio 仅音频，video 仅视频，merge 音视频合并 */
downloadType = van.state<'audio' | 'video' | 'merge'>('merge')
/** 优先视频编码格式：12 hev1, 7 avc1, 13 av01 */
preferredCodec = van.state<12 | 7 | 13>(12)
/** 是否优先使用HiRes（flac）音频 */
preferHiResAudio = van.state(true)
errorList: State<string[]> = van.state([])
constructor(public option: Option) {
this.totalCount = van.derive(() => option.workRoute.selectedPages.val.length)
const allFinish = van.derive(() => this.totalCount.val == this.finishCount.val)
this.element = div({ class: `modal fade`, tabIndex: -1 },
div({ class: () => `modal-dialog modal-xl modal-fullscreen-xl-down ${(this.totalCount.val + this.errorList.val.length) < 10 ? '' : 'modal-dialog-scrollable'}` },
div({ class: `modal-content` },
div({ class: `modal-header` },
div({ class: `h5 modal-title` }, () => allFinish.val ? '批量下载' : '批量解析'),
button({ class: `btn-close`, 'data-bs-dismiss': `modal` })
),
div({ class: `modal-body vstack gap-3`, tabIndex: -1, style: 'outline: none;' },
this.ParseProgress(),
div({ class: 'vstack gap-2', hidden: () => this.errorList.val.length == 0 || !allFinish.val },
div({ class: 'text-danger' }, () => `以下 ${this.errorList.val.length} 个视频解析失败`),
() => div({ class: 'list-group' },
this.errorList.val.map(error => div({ class: 'list-group-item disabled' }, error))
)
),
this.ListGroup()
),
this.ModalFooter()
)
)
)
this.element.addEventListener('hidden.bs.modal', () => {
this.allPlayInfo.val = []
this.finishCount.val = this.totalCount.val
for (const controller of this.abortControllers) {
controller.abort()
}
this.abortControllers = []
})
this.element.addEventListener('show.bs.modal', () => {
this.start()
})
}
/** 开始解析 */
async start() {
this.finishCount.val = 0
this.errorList.val = []
const queue = new PQueue({ concurrency: 10 })
for (const page of this.option.workRoute.selectedPages.val) {
queue.add(async () => {
if (this.totalCount.val == this.finishCount.val) return
const controller = new AbortController()
this.abortControllers.push(controller)
const playInfo = await getPlayInfo(page.bvid, page.cid, controller)
playInfo.accept_quality = [...new Set(playInfo.dash.video.map(video => video.id))].sort((a, b) => b - a)
this.allPlayInfo.val = this.allPlayInfo.val.concat({
page,
info: playInfo,
selected: van.state(true),
formatIndex: van.state(0),
})
this.finishCount.val++
}).catch(() => {
this.finishCount.val++
const badgeNotNum = !page.badge.match(/^\d+$/)
this.errorList.val = this.errorList.val.concat(`${page.part}${badgeNotNum ? ` - ${page.badge}` : ''}`)
})
}
await queue.onIdle()
}
download() {
const selectedPlayInfos = this.allPlayInfo.val.filter(info => info.selected.val)
const workRoute = this.option.workRoute
this.downloadBtnDisabled.val = true
// 需要传递给服务器，需要创建下载任务的数据列表
createTask(selectedPlayInfos.map(info => {
const badgeNotNum = !info.page.badge.match(/^\d+$/)
const isVideoMode = workRoute.videoInfoCardMode.val == 'video'
const cardTitle = workRoute.videoInfoCardData.val.title
const owner = workRoute.videoInfoCardData.val.staff.length > 0
? workRoute.videoInfoCardData.val.staff[0].split("[")[0].trim()
: workRoute.videoInfoCardData.val.owner.name.trim()
const activeVideoInfo = getActiveFormatVideo(info.info!, info.info!.accept_quality[info.formatIndex.val], this.preferredCodec.val)
const pagesLength = workRoute.videoInfoCardData.val.pages.length
return ({
bvid: info.page.bvid,
cid: info.page.cid,
cover: workRoute.videoInfoCardData.val.cover,
title: (badgeNotNum
? [
info.page.part.trim(),
`[${info.page.badge.trim()}]`,
`[${cardTitle.trim()}]`,
`[${videoFormatMap[info.info!.accept_quality[info.formatIndex.val]]}]`,
`[${formatSeconds(info.info!.dash.duration)}]`
]
: [
pagesLength == 1 ? workRoute.allSection.val[workRoute.sectionTabsActiveIndex.val].title : `[${cardTitle.trim()}]`,
workRoute.sectionPages.val.length == 1 ? '' : `[${info.page.badge.trim()}]`,
info.page.part.trim(),
isVideoMode ? `[${owner}]` : '',
`[${videoFormatMap[info.info!.accept_quality[info.formatIndex.val]]}]`,
`[${formatSeconds(info.info!.dash.duration)}]`
]).filter(p => p).join(' '),
format: info.info!.accept_quality[info.formatIndex.val],
owner,
audio: getAudioURL(info.info!, this.preferHiResAudio.val),
duration: info.info!.dash.duration,
downloadType: this.downloadType.val,
...activeVideoInfo
})
})).then(() => {
workRoute.parseModal.hide()
}).catch(error => {
alert(error.message)
}).finally(() => {
this.downloadBtnDisabled.val = false
})
}
ParseProgress() {
return div({ class: 'vstack gap-3', hidden: () => this.totalCount.val == this.finishCount.val },
div({ class: 'text-center fs-5' }, () => `正在解析，剩余 ${this.totalCount.val - this.finishCount.val} 项`),
div({ class: 'progress' }, div({
class: 'progress-bar progress-bar-striped progress-bar-animated',
style: () => `width: ${this.finishCount.val / this.totalCount.val * 100}%`
},)),
)
}
ListGroup() {
return () => div({ class: 'list-group', hidden: () => this.totalCount.val != this.finishCount.val },
this.allPlayInfo.val.filter(info => info.info)
.sort((a, b) => a.page.page - b.page.page)
.map(info => {
const badgeNotNum = !info.page.badge.match(/^\d+$/)
return div({
class: () => `list-group-item user-select-none py-0 ${info.info ? '' : 'disabled'}`,
role: 'button',
onclick(event) {
if ((event.target as HTMLElement).getAttribute('class')?.match(/dropdown-?/)) return
info.selected.val = !info.selected.val
}
},
div({ class: 'hstack gap-2' },
div({ class: 'hstack gap-3 flex-fill py-1' },
input({
class: 'form-check-input', type: 'checkbox', checked: info.selected,
}),
div({},
div((badgeNotNum ? '' : `${info.page.badge}. `) + info.page.part),
badgeNotNum ? div({ class: info.page.part ? 'small text-secondary' : '' },
info.page.badge) : ''
),
),
div({ class: 'dropdown' },
div({ class: 'dropdown-toggle py-2 text-primary', 'data-bs-toggle': 'dropdown' },
() => videoFormatMap[info.info!.accept_quality[info.formatIndex.val]]
),
() => {
return div({ class: 'dropdown-menu shadow' },
info.info!.accept_quality.map((formatID, index) => {
return div({
class: () => `dropdown-item ${info.formatIndex.val == index ? 'active' : ''}`,
onclick() {
info.formatIndex.val = index
}
}, videoFormatMap[formatID as VideoFormat])
})
)
}
)
)
)
})
)
}
ModalFooter() {
const _that = this
const selectedCount = van.derive(() => this.allPlayInfo.val.filter(info => info.selected.val).length)
const totalCount = van.derive(() => this.allPlayInfo.val.length)
/** 解析完成列表全部选中 */
const allSelected = van.derive(() => selectedCount.val == totalCount.val)
/** 是否全部解析完成 */
const allFinish = van.derive(() => this.totalCount.val == this.finishCount.val)
return div({ class: `modal-footer` },
div({ class: 'me-auto', hidden: () => !allFinish.val || totalCount.val == 0 },
div({ class: 'hstack gap-3 text-nowrap' },
() => `已选择 (${selectedCount.val}/${totalCount.val}) 项`,
select({
class: 'form-select form-select-sm',
value: _that.downloadType,
oninput: (e) => _that.downloadType.val = (e.target as HTMLSelectElement).value as 'audio' | 'video' | 'merge'
},
option({ value: 'merge' }, '音视频合并'),
option({ value: 'audio' }, '仅音频'),
option({ value: 'video' }, '仅视频')
),
select({
class: 'form-select form-select-sm',
value: _that.preferredCodec,
oninput: (e) => _that.preferredCodec.val = Number((e.target as HTMLSelectElement).value) as 12 | 7 | 13
},
option({ value: '12' }, 'HEVC (hev1)'),
option({ value: '7' }, 'AVC (avc1)'),
option({ value: '13' }, 'AV1 (av01)')
),
div({ class: 'form-check form-check-inline' },
input({
type: 'checkbox',
class: 'form-check-input',
id: 'preferHiResAudio',
checked: _that.preferHiResAudio,
oninput: (e) => _that.preferHiResAudio.val = (e.target as HTMLInputElement).checked
}),
label({ class: 'form-check-label', for: 'preferHiResAudio' }, 'Hi-Res')
)
)
),
button({
class: `btn btn-secondary`,
'data-bs-dismiss': `modal`,
hidden: allFinish
}, '取消解析'),
button({
class: 'btn btn-secondary', hidden: () => !allFinish.val || allSelected.val || totalCount.val == 0,
onclick() {
_that.allPlayInfo.val.forEach(info => info.selected.val = true)
}
}, '全选'),
button({
class: 'btn btn-warning', hidden: () => !allFinish.val || !allSelected.val || totalCount.val == 0,
onclick() {
_that.allPlayInfo.val.forEach(info => info.selected.val = false)
}
}, '全不选'),
button({
class: `btn btn-primary`, onclick() {
_that.download()
},
hidden: () => !allFinish.val,
disabled: () => selectedCount.val <= 0 || _that.downloadBtnDisabled.val
}, '开始下载'),
)
}
}
const getAudioURL = (playInfo: PlayInfo, preferHiRes: boolean = true): string => {
if (preferHiRes && playInfo.dash.flac) {
return playInfo.dash.flac.audio.baseUrl
} else {
return playInfo.dash.audio.sort((a, b) => b.id - a.id)[0].baseUrl
}
}
const getActiveFormatVideo = (playInfo: PlayInfo, format: VideoFormat, preferredCodec: 12 | 7 | 13 = 12): { video: string, width: number, height: number } => {
// 优先级顺序：用户首选编码格式，然后按默认优先级 12 > 7 > 13
const codecOrder = [preferredCodec, 12, 7, 13].filter((value, index, self) => self.indexOf(value) === index)
for (const code of codecOrder) {
for (const item of playInfo.dash.video) {
if (item.id == format && item.codecid == code) {
return {
video: item.baseUrl,
width: item.width,
height: item.height
}
}
}
}
throw new Error('未找到对应视频分辨率格式')
}
web/src/work/view/videoInfoCard.ts
+198
View File
@@ -0,0 +1,198 @@
import van, { State, Val } from 'vanjs-core'
import { VideoParseResult, VideoInfoCardMode } from '../type'
import { secondToTime } from '../mixin'
import { VanComponent } from '../../mixin'
import VideoItemList from './videoItemList'
import { WorkRoute } from '..'
const { a, div, img } = van.tags
class VideoInfoCardComp implements VanComponent {
element: HTMLElement
constructor(
public workRoute: WorkRoute,
) {
const {
videoInfoCardData: data,
videoInfoCardMode: mode,
ownerFaceHide
} = workRoute
this.element = div({ class: 'card border-2 shadow-sm' },
div({ class: 'card-header' },
a({
class: 'link-dark text-decoration-none fw-bold focus-ring', href: () => data.val.targetURL,
target: '_blank',
},
() => data.val.title,
)
),
div({ class: 'card-body vstack gap-4' },
div({ class: 'vstack gap-3' },
div({ class: 'row gx-3 gy-3' },
// 封面
div({
class: () => mode.val == 'video'
? 'col-md-5 col-xl-4'
: 'col-8 col-sm-6 mx-auto col-md-5 col-lg-3 col-xl-2'
},
div({ class: 'position-relative shadow-sm rounded overflow-hidden' },
a({
href: () => data.val.targetURL,
title: () => `打开视频播放页面`,
target: '_blank',
},
img({
src: () => data.val.cover,
class: 'w-100',
ondragstart: event => event.preventDefault(),
referrerPolicy: 'no-referrer',
})
),
a({
href: () => `https://space.bilibili.com/${data.val.owner.mid}`,
title: () => `查看用户主页：${data.val.owner.name}`,
target: '_blank',
tabIndex: () => mode.val == 'video' ? 0 : -1,
},
img({
src: () => data.val.owner.face,
hidden: ownerFaceHide,
referrerPolicy: 'no-referrer',
ondragstart: event => event.preventDefault(),
style: `right: 1rem; bottom: 1rem;`,
class: 'rounded-3 border shadow position-absolute w-25'
})
),
),
),
// 字段信息
div({
class: () => mode.val == 'video'
? 'col-md-7 col-xl-8 vstack gap-2'
: 'col-md-7 col-lg-9 col-xl-10 vstack gap-2'
},
div({ class: 'position-relative h-100' },
div({ class: 'position-absolute top-0 bottom-0 position-relative-sm-down' },
Right(this)
)
),
),
),
DescriptionGroup(this, true),
),
VideoItemList(workRoute)
)
)
}
}
const Right = (parent: VideoInfoCardComp) => {
const mode = parent.workRoute.videoInfoCardMode
const data = parent.workRoute.videoInfoCardData
return div({ class: 'vstack gap-2 h-100' },
div({ class: 'row gx-2 gy-2' },
div({ class: 'col-xl-7 col-xxl-8' },
InputGroup(
van.derive(() => mode.val == 'video'
? (data.val.staff.length > 0 ? '制作信息' : '发布者')
: '参演人员'),
van.derive(() => {
if (data.val.staff.length > 0)
return data.val.staff.map(i => i.trim()).join(', ')
return data.val.owner.name
}), { disabled: true }
),
),
div({ class: 'col-xl-5 col-xxl-4' },
InputGroup('发布时间',
van.derive(() => data.val.publishData), { disabled: true }
)
),
div({ class: 'col-sm col-md-12 col-lg-4', hidden: () => mode.val != 'video' },
InputGroup('分辨率',
van.derive(() => `${data.val.dimension.width}x${data.val.dimension.height}`),
{ disabled: true }
)
),
div({ class: 'col col-lg-4', hidden: () => mode.val != 'video' },
InputGroup('时长',
van.derive(() => `${secondToTime(data.val.duration)}`),
{ disabled: true }
)
),
div({ class: 'col col-lg-4', hidden: () => mode.val != 'video' },
InputGroup('集数',
van.derive(() => data.val.pages.length.toString()),
{ disabled: true }
)
),
div({ class: 'col-md-12 col-lg-4', hidden: () => mode.val != 'season' },
InputGroup('状态',
van.derive(() => data.val.status),
{ disabled: true }
)
),
div({ class: 'col-sm col-lg-4', hidden: () => mode.val != 'season' },
InputGroup('地区',
van.derive(() => data.val.areas.map(i => i.trim()).join(', ')),
{ disabled: true }
)
),
div({ class: 'col-sm col-lg-4', hidden: () => mode.val != 'season' },
InputGroup('标签',
van.derive(() => data.val.styles.join(', ')),
{ disabled: true }
)
),
),
DescriptionGroup(parent),
)
}
/** 用于显示 `description` 字段的 `.input-group`
*
* @param parent 父组件
* @param bottom 是否在底部
*/
const DescriptionGroup = (parent: VideoInfoCardComp, bottom = false) => {
const mode = parent.workRoute.videoInfoCardMode
const data = parent.workRoute.videoInfoCardData
const _class = van.derive(() => mode.val == 'video' ? 'd-md-flex' : '')
const size = van.derive(() => mode.val == 'video' ? 'lg' : 'lg')
return div({
class: () => `shadow-sm input-group input-group-sm ${bottom
? `d-none d-lg-none ${_class.val}`
: `overflow-hidden flex-fill ${mode.val == 'video' ? 'd-md-none d-lg-flex ' : ''}`
}`,
},
div({ class: 'input-group-text align-items-start' }, '描述'),
() => {
const lines = (data.val.description.match(/^(\s*|.)$/) ? '暂无描述' : data.val.description).split('\n')
return div({ class: `form-control overflow-auto ${bottom ? `max-height-description` : `h-100`}` },
lines.map(line => div(line))
)
}
)
}
const InputGroup = (title: Val<string>, value: State<string>, option?: {
disabled?: Val<boolean>
elementType?: 'input' | 'textarea'
}) => {
return div({ class: 'input-group input-group-sm shadow-sm rounded' },
div({ class: 'input-group-text' }, title),
van.tags[option?.elementType || 'input']({
class: 'form-control bg-white',
disabled: option?.disabled || false,
style: 'cursor: text;',
value
})
)
}
export default (
workRoute: WorkRoute
) => new VideoInfoCardComp(workRoute).element
web/src/work/view/videoItemList.ts
+102
View File
@@ -0,0 +1,102 @@
import van, { State } from 'vanjs-core'
import { VideoParseResult, VideoInfoCardMode, PageInParseResult, SectionItem } from '../type'
import { VanComponent } from '../../mixin'
import { WorkRoute } from '..'
const { button, div, span } = van.tags
class VideoItemListComp implements VanComponent {
element: HTMLElement
constructor(
public workRoute: WorkRoute
) {
const { videoInfoCardData: data } = workRoute
this.element = div({
hidden: () => false && data.val.pages.length <= 1,
class: 'vstack gap-4'
},
div({ class: 'vstack gap-4' },
div({ hidden: () => workRoute.allSection.val.length == 1 && workRoute.allSection.val[0].title == '正片' }, SectionTabs(this, workRoute.allSection)),
ButtonGroup(workRoute),
ListBox(workRoute.sectionPages),
)
)
}
}
const SectionTabs = (parent: VideoItemListComp, allSection: State<SectionItem[]>) => {
return () => div({ class: 'nav nav-underline' },
allSection.val.map((item, index) => div({ class: 'nav-item', role: 'button' },
div({
tabIndex: 0,
class: `nav-link ${parent.workRoute.sectionTabsActiveIndex.val == index ? 'active' : ''}`,
onclick() {
parent.workRoute.sectionTabsActiveIndex.val = index
},
onkeyup(e) {
if (e.key == 'Enter') {
e.target.click()
}
}
}, () => item.title)
))
)
}
const ButtonGroup = (workRoute: WorkRoute) => {
const pages = workRoute.sectionPages
const selectedCount = van.derive(() => pages.val.filter(page => page.selected.val).length)
const totalCount = van.derive(() => pages.val.length)
return div({ class: 'hstack gap-3' },
button({
class: 'btn btn-secondary',
onclick() {
pages.val.forEach(page => page.selected.val = selectedCount.val < totalCount.val)
}
}, () => `${selectedCount.val < totalCount.val ? '全选' : '取消全选'} (${selectedCount.val}/${totalCount.val})`),
button({
class: 'btn btn-primary',
disabled: () => selectedCount.val <= 0,
async onclick() {
workRoute.parseModal.show()
}
}, '解析选中项目')
)
}
const ListBox = (pages: State<PageInParseResult[]>) => {
return () => div({ class: 'row gy-3 gx-3' },
pages.val.map(page => {
const badgeNotNum = !page.badge.match(/^\d+$/)
const active = page.selected
return div({ class: 'col-xxl-3 col-lg-4 col-md-6' },
div({
tabIndex: 0,
class: () => `${badgeNotNum
? `vstack gap-2 justify-content-center`
: `hstack gap-3`
} shadow-sm h-100 text-break user-select-none card card-body video-item-btn bg-success bg-opacity-10 ${active.val ? 'active' : ''}`,
onclick() {
active.val = !active.val
},
onkeyup(e) {
if (e.key == 'Enter') {
active.val = !active.val
}
}
},
span({ class: 'badge text-bg-success bg-opacity-75 border', hidden: badgeNotNum }, page.badge),
div(page.part),
div({ class: `${page.part ? 'small text-muted' : ''}`, hidden: !badgeNotNum }, page.badge),
)
)
}),
)
}
export default (
workRoute: WorkRoute
) => new VideoItemListComp(workRoute).element