369 lines
16 KiB
TypeScript
369 lines
16 KiB
TypeScript
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, span } = 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([])
|
||
|
||
/** 下载状态 */
|
||
isDownloading = 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` }, () => this.isDownloading.val ? '正在创建下载任务...' : (allFinish.val ? '批量下载' : '批量解析')),
|
||
button({ class: `btn-close`, 'data-bs-dismiss': `modal` })
|
||
),
|
||
// 进度条固定在头部下方
|
||
this.StickyProgress(),
|
||
// 下载时的加载动画
|
||
div({
|
||
class: 'text-center p-5',
|
||
hidden: () => !this.isDownloading.val
|
||
},
|
||
div({ class: 'spinner-border text-primary', role: 'status' },
|
||
span({ class: 'visually-hidden' }, '加载中...')
|
||
),
|
||
div({ class: 'mt-3' }, '正在创建下载任务...')
|
||
),
|
||
div({ class: `modal-body vstack gap-3`, tabIndex: -1, style: 'outline: none;' },
|
||
div({ class: 'vstack gap-2', hidden: () => this.errorList.val.length == 0 || !allFinish.val || this.isDownloading.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.isDownloading.val = true
|
||
|
||
// 需要传递给服务器，需要创建下载任务的数据列表
|
||
createTask(selectedPlayInfos.map((info, index) => {
|
||
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
|
||
// 合集标题，用于创建子目录
|
||
// season 模式（番剧）使用视频标题
|
||
// video 模式有 collectionTitle（视频合集）时使用合集名称
|
||
const collectionTitle = workRoute.videoInfoCardData.val.collectionTitle
|
||
const seasonTitle = workRoute.videoInfoCardMode.val == 'season'
|
||
? cardTitle.trim()
|
||
: (isVideoMode && collectionTitle ? collectionTitle.trim() : undefined)
|
||
|
||
return ({
|
||
bvid: info.page.bvid,
|
||
cid: info.page.cid,
|
||
cover: workRoute.videoInfoCardData.val.cover,
|
||
title: (badgeNotNum
|
||
? [
|
||
info.page.part.trim(),
|
||
`[${info.page.badge.trim()}]`,
|
||
seasonTitle ? '' : `[${cardTitle.trim()}]`,
|
||
`[${videoFormatMap[info.info!.accept_quality[info.formatIndex.val]]}]`,
|
||
`[${formatSeconds(info.info!.dash.duration)}]`
|
||
]
|
||
: [
|
||
pagesLength == 1 ? workRoute.allSection.val[workRoute.sectionTabsActiveIndex.val].title : (seasonTitle ? '' : `[${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,
|
||
seasonTitle,
|
||
...activeVideoInfo
|
||
})
|
||
})).then(() => {
|
||
workRoute.parseModal.hide()
|
||
}).catch(error => {
|
||
alert(error.message)
|
||
}).finally(() => {
|
||
this.isDownloading.val = false
|
||
})
|
||
}
|
||
|
||
ParseProgress() {
|
||
return div({ class: 'vstack gap-3', hidden: () => this.totalCount.val == this.finishCount.val || this.isDownloading.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}%`
|
||
},)),
|
||
)
|
||
}
|
||
|
||
/** 固定在顶部的进度条（解析进度） */
|
||
StickyProgress() {
|
||
return div({
|
||
class: 'sticky-top bg-body p-3 border-bottom',
|
||
hidden: () => this.totalCount.val == this.finishCount.val,
|
||
style: 'z-index: 10;'
|
||
},
|
||
this.ParseProgress(),
|
||
)
|
||
}
|
||
|
||
ListGroup() {
|
||
return () => div({ class: 'list-group', hidden: () => this.totalCount.val != this.finishCount.val || this.isDownloading.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.isDownloading.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('未找到对应视频分辨率格式')
|
||
}
|