//
innerHTML: `
`
})
document.body.appendChild(actionbar)
document.body.appendChild(Object.assign(document.createElement('div'), { id: 'toast' }))
actionbar.classList.add(page)
setHomeBtn()
setSearchBtn()
if (page !== 'message') { setMenuBtn() }
switch (page) {
case 'home':
setTopBtn()
setRefreshBtn()
break
case 'video':
setFullbtn()
setSidebarBtn()
break
case 'search':
setTopBtn()
setShowMoreBtn()
break
case 'space':
setTopBtn()
setShowMoreBtn()
break
case 'message':
setSidebarBtn()
break
default:
break
}
function setFullbtn () {
let clickTimer = null
const fullBtn = document.getElementById('full-now')
function playVideo () {
const video = document.querySelector('video')
video.play()
video.muted = false
if (video.volume === 0) { document.querySelector('.bpx-player-ctrl-muted-icon').click() }
}
fullBtn.addEventListener('click', () => {
clearTimeout(clickTimer) // 双击会产生两次单击事件和两个定时器, 双击事件只能清除第二个定时器
// via 报错：DOMException: play() can only be initiated by a user gesture. 是浏览器为防止未经请求的视频播放而实施的安全措施。
// 如果 video.play() 方法是在 setTimeout 函数中调用的，这不被视为直接用户手势。
playVideo()
clickTimer = setTimeout(() => {
const videoWrap = document.querySelector('.bpx-player-video-wrap')
videoWrap.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
}, 250)
})
fullBtn.addEventListener('dblclick', () => { clearTimeout(clickTimer) })
}
function setTopBtn () {
const topBtn = document.getElementById('my-top')
topBtn.addEventListener('click', () => window.scrollTo({ top: 0 }))
}
function setHomeBtn () {
const home = document.getElementById('my-home')
home.addEventListener('click', () => (location.href = 'https://www.bilibili.com/'))
}
/**
* 设置不同页面的搜索事件的函数
*/
function setSearchBtn () {
const searchFab = document.getElementById('search-fab')
const svg = searchFab.querySelector('svg')
const searchOverlay = document.createElement('div')
searchOverlay.id = 'search-overlay'
searchFab.appendChild(searchOverlay)
const searchContainerSelector = page === 'message' ? '.nav-search-box' : '.center-search-container'
let clickTimer = null
function handleClick (input) {
// 滑动时 .center-search-container 的 class 会刷新
const searchContainer = document.querySelector(`${searchContainerSelector}`)
searchContainer.style.cssText = 'display: block !important' // 修复搜索页优先隐藏
// 在同一个执行上下文中修改多个 CSS 属性时，浏览器会将这些属性的变化合并为一个重绘和重排操作
setTimeout(() => { searchContainer.setAttribute('show', '') }, 10)
input.focus()
searchOverlay.classList.add('show')
searchFab.classList.add('active')
}
/**
* 单击事件、双击事件、searchOverlay 共用的 input
*/
let input = null
if (page !== 'search' && page !== 'space') {
searchFab.addEventListener('click', () => {
input = document.querySelector(`${searchContainerSelector} input`)
if (!input) { return }
handleClick(input)
})
}
if (page === 'search') {
// 底部显示搜索文本
const pageInput = document.querySelector('.search-input input')
const searchFabText = Object.assign(document.createElement('div'), { id: 'search-fab-text', textContent: pageInput.value })
searchFab.appendChild(searchFabText)
searchFab.style.cssText = 'background-color: var(--graph_bg_thick); border-radius: 16px;'
svg.style.flex = '0 0 20px'
// 文本更新到底部搜索
const handleInput = () => {
searchFabText.textContent = input.value
if (input.value === '') {
searchFab.style.cssText = ''
svg.style.flex = ''
} else {
searchFab.style.cssText = 'background-color: var(--graph_bg_thick); border-radius: 16px;'
svg.style.flex = '0 0 20px'
}
}
searchFab.addEventListener('click', () => {
input = document.querySelector(`${searchContainerSelector} input`)
if (!input) { return }
clearTimeout(clickTimer)
clickTimer = setTimeout(() => {
handleClick(input)
// 移除之前添加的 input 事件监听器
input.removeEventListener('input', handleInput)
// 模拟输入: 将文本填入底部搜索
input.value = searchFabText.textContent
input.dispatchEvent(new Event('input', { bubbles: true }))
handleInput()
input.addEventListener('input', handleInput)
}, 300)
})
searchFab.addEventListener('dblclick', () => {
if (!input) { return } // return 语句结束当前函数的执行
clearTimeout(clickTimer)
handleClick(input)
input.value = ''
input.dispatchEvent(new Event('input', { bubbles: true }))
searchFabText.textContent = input.value
searchFab.style.cssText = ''
svg.style.flex = ''
handleInput()
input.removeEventListener('input', handleInput)
input.addEventListener('input', handleInput)
})
}
if (page === 'space') {
// 使用 let handleInput 声明变量并在内部块中赋值时，实际上是在创建一个新的函数。即使引用移除事件监听器时能访问到 let handleInput 变量，但是此时 handleInput 变量引用的函数并不是添加事件监听器时使用的那个函数
const spaceHandleInput = event => {
if (event.key === 'Enter') {
const spaceInput = document.querySelector('#navigator .space_input')
const spaceSearchBtn = document.querySelector('#navigator .search-btn')
event.preventDefault()
spaceInput.value = input.value
spaceInput.dispatchEvent(new Event('input', { bubbles: true }))
spaceSearchBtn.click()
searchOverlay.click()
}
}
searchFab.addEventListener('click', () => {
input = document.querySelector(`${searchContainerSelector} input`)
if (!input) { return }
clearTimeout(clickTimer)
clickTimer = setTimeout(() => {
handleClick(input)
// 移除之前添加的 keydown 事件监听器
input.removeEventListener('keydown', spaceHandleInput)
// 移除事件监听器时，回调函数需要与添加事件监听器时使用的回调函数完全一致。内联定义的新箭头函数不是添加事件监听器时使用的原始回调函数
// 引用回调函数时，形参写在函数声明中，不需要内联一个匿名函数 (匿名内部函数, 无函数名)
input.addEventListener('keydown', spaceHandleInput)
const searchPanel = document.querySelector('.search-panel')
const firstChild = searchPanel.firstChild
if (firstChild.nodeType === Node.COMMENT_NODE || !firstChild.classList.contains('space-search-tip')) {
const spaceSearchTip = Object.assign(document.createElement('div'), {
className: 'header space-search-tip', innerHTML: '
搜索 up 的视频、动态
'
})
searchPanel.insertBefore(spaceSearchTip, firstChild)
}
}, 300)
})
searchFab.addEventListener('dblclick', () => {
if (!input) { return }
clearTimeout(clickTimer)
handleClick(input)
input.removeEventListener('keydown', spaceHandleInput)
document.querySelector('.space-search-tip')?.remove()
})
}
// 避免存在双击事件时的延时操作导致视频页滑动阴影无法滚动内容以及卡顿感
searchOverlay.addEventListener('click', event => {
event.stopPropagation()
const searchContainer = document.querySelector(`${searchContainerSelector}`)
searchContainer.removeAttribute('show')
searchContainer.addEventListener('transitionend', () => { searchContainer.style.cssText = '' }, { once: true })
searchOverlay.classList.remove('show')
searchFab.classList.remove('active')
})
// 移动端 click 会先触发 touchstart, touchend 和 mousemove
function handleTouchMove () { searchOverlay.click() } // searchOverlay.click() 返回值为 undefined
searchOverlay.addEventListener('touchstart', () => searchOverlay.addEventListener('touchmove', handleTouchMove, { once: true }))
searchOverlay.addEventListener('touchend', () => searchOverlay.removeEventListener('touchmove', handleTouchMove))
}
function setMenuBtn () {
// 覆盖显隐，初始化加载动态、收藏、历史、主页
const preloadeditems = [
'.v-popover-wrap:has(>.right-entry__outside[href="//t.bilibili.com/"])',
'.v-popover-wrap:has(>.right-entry__outside[data-header-fav-entry])',
'.right-entry__outside[href="//www.bilibili.com/account/history"]',
'.header-avatar-wrap']
const waitRightEntry = () => {
document.querySelector('.right-entry') ? tryPreload() : setTimeout(waitRightEntry, 200)
}
waitRightEntry()
function tryPreload () {
if (document.querySelector(preloadeditems[2])) {
preloadeditems.forEach(item => {
document.querySelector(item).dispatchEvent(new MouseEvent('mouseenter'))
})
setTimeout(handleHistoryShowMore, 50)
setTimeout(handleDynamicShowMore, 60)
} else setTimeout(tryPreload, 1000)
}
const menuFab = document.getElementById('menu-fab')
// headerInMenu
const menuOverlay = Object.assign(document.createElement('div'), {
id: 'menu-overlay',
innerHTML: `
`
})
menuFab.appendChild(menuOverlay)
const menu = menuOverlay.querySelector('#header-in-menu')
menuFab.addEventListener('click', () => {
menu.classList.add('show')
document.body.setAttribute('menu', '') // 显示消息数
menuOverlay.classList.add('show')
menuFab.classList.add('active')
})
let openedDialog = '' // sessionStorage 刷新网页不变
const items = menuOverlay.querySelectorAll('li')
items.forEach(item =>
item.addEventListener('click', event => {
event.stopPropagation()
menu.classList.remove('show')
document.body.removeAttribute('menu')
const refer = item.dataset.refer
if (!refer) { return } // 热门
const referElement = document.querySelector(`${refer}+.v-popover`)
if (!referElement) {
const toast = document.querySelector('#toast')
toast.textContent = '网页菜单加载中，请稍后重试'
toast.style.display = 'block'
setTimeout(() => { toast.setAttribute('show', '') }, 10)
menuOverlay.click()
setTimeout(() => {
toast.removeAttribute('show')
toast.addEventListener('transitionend', () => { toast.style.cssText = '' }, { once: true })
}, 3000)
return
}
openedDialog = refer
referElement.style.display = 'block'
setTimeout(() => { referElement.setAttribute('show', '') }, 10)
})
)
menuOverlay.addEventListener('click', event => {
event.stopPropagation()
menu.classList.remove('show')
document.body.removeAttribute('menu')
menuOverlay.classList.remove('show')
menuFab.classList.remove('active')
if (openedDialog === '') { return }
const referElement = document.querySelector(`${openedDialog}+.v-popover`)
referElement.removeAttribute('show')
referElement.addEventListener('transitionend', () => { referElement.style.cssText = '' }, { once: true }) // 鼠标一动就会触发 mouseleave
})
function handleTouchMove () { menuOverlay.click() }
menuOverlay.addEventListener('touchstart', () => menuOverlay.addEventListener('touchmove', handleTouchMove, { once: true }))
menuOverlay.addEventListener('touchend', () => menuOverlay.removeEventListener('touchmove', handleTouchMove))
createExtraDialog()
// 添加分类和关注弹窗
function createExtraDialog () {
const falseHeader = Object.assign(document.createElement('div'), {
className: 'bili-header false-header',
innerHTML: _html_category_html__WEBPACK_IMPORTED_MODULE_0__["default"]
})
document.body.appendChild(falseHeader)
const followOutside = document.createElement('div')
followOutside.className = 'right-entry__outside follow-list'
falseHeader.appendChild(followOutside)
const followDialog = Object.assign(document.createElement('div'), {
className: 'v-popover is-bottom',
id: 'follow-list-dialog',
// /* html */
innerHTML: `
`
})
falseHeader.appendChild(followDialog)
loadFollowList(1)
}
// 设置历史自动展开
function handleHistoryShowMore () {
let cursor = {}
fetch('https://api.bilibili.com/x/web-interface/history/cursor?max=0&view_at=0&business=', { credentials: 'include' })
.then(response => response.json())
.then(data => { cursor = data.data.cursor })
.catch(error => console.error(error))
const historyContent = document.querySelector('.history-panel-popover>.header-tabs-panel__content')
function onScroll () {
const { scrollTop, scrollHeight, clientHeight } = historyContent
if (Math.abs(scrollTop + clientHeight - scrollHeight) > 1) { return }
historyContent.removeEventListener('scroll', onScroll) // 内容加载后再重新监听滚动
setTimeout(() => { historyContent.addEventListener('scroll', onScroll) }, 2000)
console.log('Scroll to bottom')
fetch(`https://api.bilibili.com/x/web-interface/history/cursor?max=${cursor.max}&view_at=${cursor.view_at}&business=archive`, { credentials: 'include' })
.then(response => response.json())
.then(data => {
cursor = data.data.cursor
data.data.list.forEach(addElementByItem) // 简写形式有时需绑定 this
})
.catch(error => console.error(error))
}
historyContent.addEventListener('scroll', onScroll)
function addElementByItem (item) {
const record = Object.assign(document.createElement('a'), {
href: `//www.bilibili.com/video/${item.history.bvid}/?`,
className: 'header-history-card header-history-video',
target: '_blank',
'data-mod': 'top_right_bar_window_history',
'data-idx': 'content',
'data-ext': 'click',
// /* html */
innerHTML: `
`
})
historyContent.appendChild(record)
}
const formatUrl = url => url.slice(url.indexOf(':') + 1)
function formatProgressTime (seconds) {
const hrs = Math.floor(seconds / 3600) // Math.floor() 向下取整
const mins = Math.floor((seconds % 3600) / 60)
const secs = seconds % 60
return `${hrs ? (hrs + ':') : ''}${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}
function formatViewTime (timestamp) {
const days = Math.floor(timestamp / 86400)
const hrs = Math.floor((timestamp % 86400) / 3600)
const mins = Math.floor((timestamp % 3600) / 60)
const now = Math.floor(Date.now() / 1000)
const today = Math.floor(now / 86400)
const dayTextMap = {
0: '今天',
1: '昨天',
2: '前天'
}
const dayText = dayTextMap[today - days] || (today - days) + '天前'
return `${dayText} ${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}`
}
}
// 设置动态自动展开
function handleDynamicShowMore () {
let offset = ''
let i = 0
async function getLoadedData () {
try {
const data = await (0,_api_js__WEBPACK_IMPORTED_MODULE_1__.getDynamicList)(offset)
offset = data.offset
if (i < 2) { getLoadedData(); i++ }
} catch (error) {
console.error(error)
}
}
getLoadedData()
const dynamicContent = document.querySelector('.dynamic-panel-popover>.header-tabs-panel__content')
const dynamicAll = dynamicContent.querySelector('.dynamic-all')
let loadedTitle = []
async function onScroll () {
const { scrollTop, scrollHeight, clientHeight } = dynamicContent
if (Math.abs(scrollTop + clientHeight - scrollHeight) > 1) { return }
dynamicContent.removeEventListener('scroll', onScroll) // 内容加载后再重新监听滚动
setTimeout(() => { dynamicContent.addEventListener('scroll', onScroll) }, 2000)
const data = await (0,_api_js__WEBPACK_IMPORTED_MODULE_1__.getDynamicList)(offset)
offset = data.offset
data.items.forEach(checkIsLoaded) // 简写形式有时需绑定 this
const dynamics = dynamicAll.querySelectorAll(':scope>a')
loadedTitle = Array.from(dynamics).map(a => a.title)
}
dynamicContent.addEventListener('scroll', onScroll)
function checkIsLoaded (item) { if (!loadedTitle.includes(item.title)) { addElementByItem(item) } }
function addElementByItem (item) {
const record = Object.assign(document.createElement('a'), {
href: `${item.jump_url}`,
title: `${item.title}`,
target: '_blank',
'data-mod': 'top_right_bar_window_dynamic',
'data-idx': 'content',
'data-ext': 'click',
// /* html */
innerHTML: `
`
})
dynamicAll.appendChild(record)
}
const formatUrl = url => url.slice(url.indexOf(':') + 1)
}
/**
* 加载关注列表
* @param {number} orderType 排序方式，1: 最常访问，2: 最近关注
*/
async function loadFollowList (orderType) {
const content = document.querySelector('#follow-list-dialog .follow-list-content')
let pageNumber = 1
let pageSize = 20
const data = await (0,_api_js__WEBPACK_IMPORTED_MODULE_1__.getFollowList)(pageNumber, pageSize, orderType)
const list = data.list
list.forEach(addElementByItem)
const total = data.total
async function onScroll () {
const { scrollTop, scrollHeight, clientHeight } = content
if (Math.abs(scrollTop + clientHeight - scrollHeight) > 1) { return }
content.removeEventListener('scroll', onScroll)
const remainingData = total - pageNumber * pageSize
if (remainingData <= pageSize) {
pageSize = remainingData
} else {
setTimeout(() => { content.addEventListener('scroll', onScroll) }, 2000)
}
const data = await (0,_api_js__WEBPACK_IMPORTED_MODULE_1__.getFollowList)(++pageNumber, pageSize, 1)
const list = data.list
list.forEach(addElementByItem)
}
content.addEventListener('scroll', onScroll)
const tabsPanel = document.querySelector('#follow-list-dialog .header-tabs-panel')
const firstItem = tabsPanel.firstElementChild
const secondItem = firstItem.nextElementSibling
firstItem.addEventListener('click', () => {
if (firstItem.classList.contains('header-tabs-panel__item--active')) { return }
firstItem.classList.add('header-tabs-panel__item--active')
secondItem.classList.remove('header-tabs-panel__item--active')
content.innerHTML = ''
content.removeEventListener('scroll', onScroll)
loadFollowList(1)
})
secondItem.addEventListener('click', () => {
if (secondItem.classList.contains('header-tabs-panel__item--active')) { return }
secondItem.classList.add('header-tabs-panel__item--active')
firstItem.classList.remove('header-tabs-panel__item--active')
content.innerHTML = ''
content.removeEventListener('scroll', onScroll)
loadFollowList(2)
})
function addElementByItem (item) {
const up = Object.assign(document.createElement('li'), {
className: 'list-item clearfix',
/* html */
innerHTML: `
${item.uname}
${desc(item)}
`
})
content.appendChild(up)
const fansAction = up.querySelector('.fans-action')
const follow = fansAction.firstElementChild
const more = follow.nextElementSibling
follow.addEventListener('click', async () => {
if (!follow.classList.contains('follow')) {
const followRes = await (0,_api_js__WEBPACK_IMPORTED_MODULE_1__.followUser)(item.mid, false)
if (followRes.code === 0) {
follow.className = 'fans-action-btn follow'
follow.innerHTML = '
+ 关注'
follow.style.backgroundColor = '#00a1d6'
follow.style.color = 'white'
}
} else {
const followRes = await (0,_api_js__WEBPACK_IMPORTED_MODULE_1__.followUser)(item.mid, true)
if (followRes.code === 0) {
follow.className = 'be-dropdown fans-action-btn fans-action-follow'
follow.innerHTML = '
已关注'
follow.style.backgroundColor = ''
follow.style.color = ''
}
}
})
more.addEventListener('mouseenter', () => {
const dropdownMenu = more.querySelector('.be-dropdown-menu')
dropdownMenu.style.display = ''
fansAction.style.zIndex = 2
more.style.color = '#00a1d6'
})
more.addEventListener('mouseleave', () => {
const dropdownMenu = more.querySelector('.be-dropdown-menu')
dropdownMenu.style.display = 'none'
fansAction.style.zIndex = 1
more.style.color = ''
})
}
// 若为函数表达式，则不能在声明前调用
function formatUrl (url) { return url.slice(url.indexOf(':') + 1) }
function desc (item) { return item.official_verify.desc || item.sign }
}
}
function setRefreshBtn () {
const refreshFab = document.getElementById('refresh-fab') // 返回动态 HTML Collection
// 使用rollBtn?.click可选链操作符前的rollBtn会立即执行，如果rollBtn存在才传递该元素的click函数引用。而创建了一个新的箭头函数()=>{rollBtn?.click()}则会在监听事件触发时才执行rollBtn
refreshFab.addEventListener('click', () => { document.querySelector('.flexible-roll-btn-inner')?.click() })
}
function setShowMoreBtn () {
const showMoreFab = document.getElementById('show-more-fab')
const handleClick = () => {
if (page === 'search') {
const searchConditions = document.querySelector('.search-conditions')
if (searchConditions) {
if (sessionStorage.getItem('show-conditions') !== 'true') {
searchConditions.style.transition = '.4s ease-in'
searchConditions.classList.add('show')
searchConditions.addEventListener('transitionend', () => { searchConditions.style.transition = '' }, { once: true })
showMoreFab.classList.add('reverse')
sessionStorage.setItem('show-conditions', 'true')
} else {
searchConditions.style.transition = '.4s ease-in'
searchConditions.classList.remove('show')
searchConditions.addEventListener('transitionend', () => { searchConditions.style.transition = '' }, { once: true })
showMoreFab.classList.remove('reverse')
sessionStorage.setItem('show-conditions', '')
}
}
} else if (page === 'space') {
const followRow = document.querySelector('.h .h-action')
followRow.style.transition = '.4s ease-in'
followRow?.classList.toggle('show')
followRow.addEventListener('transitionend', () => { followRow.style.transition = '' }, { once: true })
showMoreFab.classList.toggle('reverse')
}
}
showMoreFab.addEventListener('click', handleClick)
}
// 侧边栏(使用 sessionStorage + heade style 绕过 DOM 依赖以解决刷新缓加载导致的内容跳动。head 中的 style 也会暂缓。最后确定是元素在样式表加载前的初始样式问题。)
/**
* 处理侧边栏事件的函数
*/
function setSidebarBtn () {
if (page === 'video') {
handleVideoSidebar()
showMoreRecommend()
} else if (page === 'message') {
handleMessageSidebar()
}
function handleVideoSidebar () {
const sidebarFab = document.getElementById('sidebar-fab')
const videoContainer = document.querySelector('#mirror-vdcon')
sidebarFab.addEventListener('click', () => videoContainer.toggleAttribute('sidebar'))
function closeSidebar () {
videoContainer.removeAttribute('sidebar')
}
const rightContainer = videoContainer.querySelector('.right-container')
const recommendLiist = document.getElementById('reco_list')
recommendLiist.addEventListener('click', event => {
const nextPlay = document.querySelector('.rec-title')
const recommendFooter = document.querySelector('.rec-footer') // 自动收起侧边栏
if (!nextPlay?.contains(event.target) && !recommendFooter.contains(event.target)) {
closeSidebar()
rightContainer.addEventListener('transitionend', event => {
if (event.propertyName === 'transform') { rightContainer.scrollTop = 0 }
}, { once: true })
// 此处不要使用监听器，否则会干扰原函数执行
;(0,_video_js__WEBPACK_IMPORTED_MODULE_2__.modifyShadowDOMLate)()
}
})
}
// 自动展开侧边栏
function showMoreRecommend () {
const recommendFooter = document.querySelector('.rec-footer')
setTimeout(() => { recommendFooter?.click() }, 2000) // 直接传递 recommendFooter?.click: 可选链操作符前的 recommendFooter 条件判断将会立即执行
document.querySelector('video').addEventListener('canplay', showMoreRecommend, { once: true })
}
function handleMessageSidebar () {
const sidebarFab = document.getElementById('sidebar-fab')
const messageContainer = document.querySelector('body>.container')
sidebarFab.addEventListener('click', () => {
messageContainer.toggleAttribute('sidebar')
sidebarOverlay.classList.toggle('show')
sidebarFab.classList.toggle('active')
})
const sidebarOverlay = document.createElement('div')
sidebarOverlay.id = 'sidebar-overlay'
sidebarFab.appendChild(sidebarOverlay)
}
}
}
/***/ }),
/* 28 */
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
// Module
var code = "
";
// Exports
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (code);
/***/ }),
/* 29 */
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ followUser: () => (/* binding */ followUser),
/* harmony export */ getAIConclusion: () => (/* binding */ getAIConclusion),
/* harmony export */ getDynamicList: () => (/* binding */ getDynamicList),
/* harmony export */ getFollowList: () => (/* binding */ getFollowList),
/* harmony export */ getJudgeAI: () => (/* binding */ getJudgeAI),
/* harmony export */ getVideoInfo: () => (/* binding */ getVideoInfo)
/* harmony export */ });
// fork 自 BiliPlus 项目：https://github.com/0xlau/biliplus
const mixinKeyEncTab = [
46, 47, 18, 2, 53, 8, 23, 32, 15, 50, 10, 31, 58, 3, 45, 35, 27, 43, 5, 49,
33, 9, 42, 19, 29, 28, 14, 39, 12, 38, 41, 13, 37, 48, 7, 16, 24, 55, 40,
61, 26, 17, 0, 1, 60, 51, 30, 4, 22, 25, 54, 21, 56, 59, 6, 63, 57, 62, 11,
36, 20, 34, 44, 52
]
// 对 imgKey 和 subKey 进行字符顺序打乱编码
const getMixinKey = (orig) =>
mixinKeyEncTab
.map((n) => orig[n])
.join('')
.slice(0, 32)
// 为请求参数进行 wbi 签名
function encWbi (params, imgKey, subKey) {
const mixinKey = getMixinKey(imgKey + subKey)
const currTime = Math.round(Date.now() / 1000)
const chrFilter = /[!'()*]/g
Object.assign(params, { wts: currTime }) // 添加 wts 字段
// 按照 key 重排参数
const query = Object.keys(params)
.sort()
.map((key) => {
// 过滤 value 中的 "!'()*" 字符
const value = params[key].toString().replace(chrFilter, '')
return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
})
.join('&')
// 在脚本 metadata 中引用 AI 总结使用的 md5 算法
// eslint-disable-next-line no-undef
const wbiSign = md5(query + mixinKey) // 计算 w_rid
return query + '&w_rid=' + wbiSign
}
// 获取最新的 imgKey 和 subKey
async function getWbiKeys () {
const {
wbi_img: { img_url: imgUrl, sub_url: subUrl }
} = await getNavUserInfo()
return {
imgKey: imgUrl.slice(
imgUrl.lastIndexOf('/') + 1,
imgUrl.lastIndexOf('.')
),
subKey: subUrl.slice(
subUrl.lastIndexOf('/') + 1,
subUrl.lastIndexOf('.')
)
}
}
// 刷新 wts 和 wrid
async function getwts (params) {
const webKeys = await getWbiKeys()
const imgKey = webKeys.imgKey
const subKey = webKeys.subKey
const query = encWbi(params, imgKey, subKey)
return query
}
const BILIBILI_API = 'https://api.bilibili.com'
/**
* 获取导航栏用户信息
* @returns 用户信息data
*/
async function getNavUserInfo () {
const response = await fetch(`${BILIBILI_API}/x/web-interface/nav`, { credentials: 'include' })
const jsonData = await response.json()
if (response.status !== 200 || !jsonData) { throw new Error() }
return jsonData.data
}
/**
* 获取B站视频 aid、cid 等信息
* @param {string} 视频 bvid
* @returns 视频data
*/
async function getVideoInfo (bvid) {
const response = await fetch(`${BILIBILI_API}/x/web-interface/view?bvid=${bvid}`)
const jsonData = await response.json()
if (response.status !== 200 || !jsonData) { throw new Error() }
return jsonData.data
}
/**
* 获取 AI判断 响应
* @param {object} params
* @returns response.json().data
*/
async function getJudgeAI (params) {
const query = await getwts(params)
const response = await fetch(`${BILIBILI_API}/x/web-interface/view/conclusion/judge?${query}`)
const jsonData = await response.json()
if (response.status !== 200 || !jsonData) { throw new Error() }
return jsonData.data
}
/**
* 获取 AI 总结
* @param {object} params { bvid, cid, up_mid }
* @returns response.json().data
*/
async function getAIConclusion (params) {
const query = await getwts(params)
const response = await fetch(`${BILIBILI_API}/x/web-interface/view/conclusion/get?${query}`)
const jsonData = await response.json()
if (response.status !== 200 || !jsonData) { throw new Error() }
return jsonData.data
}
/**
* 获取用户ID
* @returns cookie: DedeUserID
*/
function getUserID () {
const cookies = document.cookie
const cookieArray = cookies.split('; ')
for (let i = 0; i < cookieArray.length; i++) {
const cookie = cookieArray[i].split('=')
if (cookie[0] === 'DedeUserID') {
return cookie[1]
}
}
return null // 如果不返回 null，那么函数就会返回 undefined，这可能会导致一些意想不到的问题。
}
/**
* 获取 CSRF
* @returns cookie: bili_jct
*/
function getCSRF () {
const cookies = document.cookie
const cookieArray = cookies.split('; ')
for (let i = 0; i < cookieArray.length; i++) {
const cookie = cookieArray[i].split('=')
if (cookie[0] === 'bili_jct') {
return cookie[1]
}
}
return null // 如果不返回 null，那么函数就会返回 undefined，这可能会导致一些意想不到的问题。
}
/**
* 获取关注列表
* @param {number} pageNumber 页码
* @param {number} pageSize 每页显示的数据条数
* @param {number} orderType 排序方式，1: 最常访问，2: 最近关注
* @returns {object} response.json().data
*/
async function getFollowList (pageNumber, pageSize, orderType) {
const vmid = getUserID()
const query = await getwts({})
const response = await fetch(`${BILIBILI_API}/x/relation/followings?vmid=${vmid}&pn=${pageNumber}&ps=${pageSize}&order=desc&order_type=${orderType === 1 ? 'attention' : ''}&gaia_source=main_web&web_location=333.999&${query}`, { credentials: 'include' })
const jsonData = await response.json()
if (response.status !== 200 || !jsonData) { throw new Error() }
return jsonData.data
}
/**
* 获取动态列表
* @param {string} offset the data.offset of last response
* @returns {object} response.json().data
*/
async function getDynamicList (offset) {
const response = await fetch(`${BILIBILI_API}/x/polymer/web-dynamic/v1/feed/nav?offset=${offset}`, { credentials: 'include' })
const jsonData = await response.json()
if (response.status !== 200 || !jsonData) { throw new Error() }
return jsonData.data
}
/**
* 关注用户
* @param {string} mid user id
* @param {boolean} isFollow 关注/取关
* @returns response.json()
*/
async function followUser (mid, isFollow) {
const response = await fetch('https://api.bilibili.com/x/relation/modify', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams({
fid: mid,
act: isFollow ? '1' : '2',
// eslint-disable-next-line camelcase
re_src: '11',
csrf: getCSRF()
}).toString(),
credentials: 'include' // 发送Cookie
})
const jsonData = await response.json()
if (response.status !== 200 || !jsonData) { throw new Error() }
return jsonData
}
/***/ }),
/* 30 */
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ modifyShadowDOMLate: () => (/* binding */ modifyShadowDOMLate),
/* harmony export */ videoInteraction: () => (/* binding */ videoInteraction)
/* harmony export */ });
/* global GM_getValue */
function videoInteraction () {
handlePortrait()
handlelVideoClick()
handleVideoLongPress()
closeMiniPlayer()
setEndingContent()
modifyShadowDOMLate()
}
let isPortrait = false
function handlePortrait () {
const video = document.querySelector('#bilibili-player video')
// 适配侧边栏切换视频
video.addEventListener('resize', () => {
// aspectRatio, resize 前宽高为 0
isPortrait = video.videoHeight / video.videoWidth > 1
})
}
// 接管视频点击事件
function handlelVideoClick () {
const playerContainter = document.querySelector('.bpx-player-container')
const videoArea = playerContainter.querySelector('.bpx-player-video-area')
const videoPerch = videoArea.querySelector('.bpx-player-video-perch')
const videoWrap = videoPerch.querySelector('.bpx-player-video-wrap')
const video = videoWrap.querySelector('video')
// 架空双击全屏层以适应竖屏
videoArea.insertBefore(videoWrap, videoPerch)
// safari 内联播放
if (video) { video.playsInline = true }
const oldControlWrap = videoArea.querySelector('.bpx-player-control-wrap')
const controlEntity = oldControlWrap.querySelector('.bpx-player-control-entity') // 移动后再使用
let clickTimer = null
let hideTimer = null
// 阻止 controlWrap 的 mouseleave 事件隐藏控制栏, mouseleave 事件不会在冒泡阶段和捕获阶段传播
const controlWrap = Object.assign(document.createElement('div'), {
className: 'bpx-player-control-wrap new',
innerHTML: '
'
})
videoArea.insertBefore(controlWrap, oldControlWrap)
controlWrap.appendChild(controlEntity)
// 观察控制栏按键弹窗, 元素发生移动后, 之前的 querySelector 会失效 (无法找到该元素)
// 当箭头函数的函数体只有一条语句时，如果使用了花括号，则该语句会被解释为函数体，而不是返回值。因此，当使用了花括号时，isBpxStateShow 的返回值为 undefined。
const isBpxStateShow = () => controlEntity.querySelector('.bpx-player-control-bottom-right>.bpx-state-show')
const controlTop = controlEntity.querySelector('.bpx-player-control-top')
const bottomRight = controlEntity.querySelector('.bpx-player-control-bottom-right')
// 可以作语句的表达式：需要赋值给变量或者作为函数调用的一部分，能够产生一个可以被丢弃的值
// 布尔值不能直接作为语句，因为它们不执行任何动作，也不改变程序的状态
// x++ 作语句时执行操作，但是不显式返回值，实际 x 的值隐式地改变了；作表达式时根据前后缀，依次返回 x 的值和执行操作
const isShown = () => playerContainter.getAttribute('ctrl-shown') === 'true' // controlWrap 的 mouseleave 事件导致点击非视频部分会隐藏控制栏, 实际已不必要
// 覆盖原显隐
playerContainter.setAttribute('ctrl-shown', 'false')
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.addedNodes[0].classList.contains('bpx-player-ctrl-web')) { // 还可以让控制栏显示作为网页全屏按钮加载的标志事件
if (video.paused) { showControlWrap() }
// 点击视频关闭字幕设置
const subtitleBtn = document.querySelector('.bpx-player-ctrl-subtitle')
if (subtitleBtn) {
window.addEventListener('click', event => {
if (!subtitleBtn.contains(event.target)) { subtitleBtn.dispatchEvent(new MouseEvent('mouseleave')) }
})
}
observer.disconnect()
}
})
})
observer.observe(bottomRight, { childList: true })
function hideControlWrap (isEnd) {
if ((!video.paused && !isBpxStateShow()) || isEnd) {
playerContainter.setAttribute('ctrl-shown', 'false')
clearTimeout(hideTimer)
} else {
delayHideTimer()
}
}
video.addEventListener('ended', () => { hideControlWrap(true) })
function showControlWrap () {
playerContainter.setAttribute('ctrl-shown', 'true')
delayHideTimer()
}
function delayHideTimer () {
clearTimeout(hideTimer)
hideTimer = setTimeout(hideControlWrap, 3000)
}
// 阻止触摸单击触发 videoArea 的 mousemove 事件而显隐控制栏
videoWrap.addEventListener('mousemove', event => { event.stopPropagation() })
controlWrap.addEventListener('mousemove', event => { event.stopPropagation() })
video.addEventListener('play', delayHideTimer)
controlWrap.addEventListener('click', event => {
event.stopPropagation()
delayHideTimer()
})
controlTop.addEventListener('touchstart', delayHideTimer)
// 单击监听
videoWrap.addEventListener('click', () => {
clearTimeout(clickTimer)
clickTimer = setTimeout(() => {
isShown() ? hideControlWrap() : showControlWrap()
if (!GM_getValue('ban-video-click-play', false)) { video.paused ? video.play() : video.pause() } // videoPerch.click()
}, 250)
})
// 双击监听
videoWrap.addEventListener('dblclick', () => {
clearTimeout(clickTimer)
// 双击打开声音
video.muted = false
if (video.volume === 0) { document.querySelector('.bpx-player-ctrl-muted-icon').click() }
isPortrait
? document.querySelector('.bpx-player-ctrl-web').click()
// view 省略时指向当前窗口
: videoPerch.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
})
// 阻止视频响应滑动侧边栏
// 阻止冒泡只对当前监听器生效，禁止全屏滑动和拖动进度条触发侧边栏。要传递参数或用形参，就要用函数而非引用
videoArea.addEventListener('touchstart', event => { event.stopPropagation() })
}
function closeMiniPlayer () {
// 关闭小窗: getElement 提前使用在元素加载后能获取到, querySelector 在元素加载后使用才能获取到
if (!localStorage.getItem('is-mini-player-closed')) {
const miniPlayerBtn = document.getElementsByClassName('mini-player-window')[0]
new MutationObserver(mutations =>
mutations.forEach(mutation => {
if (mutation.target.classList.contains('on')) {
miniPlayerBtn.click()
localStorage.setItem('is-mini-player-closed', true)
}
})
).observe(miniPlayerBtn, { attributes: true, attributeFilter: ['class'] })
}
}
function handleVideoLongPress () {
const video = document.querySelector('video')
let isLongPress = false
let timeoutId
let times
video.addEventListener('touchstart', () => {
times = Number(GM_getValue('video-longpress-speed', '2'))
timeoutId = setTimeout(() => {
video.playbackRate = video.playbackRate * times
isLongPress = true
}, 500)
})
video.addEventListener('touchmove', cancelLongPress)
video.addEventListener('touchend', cancelLongPress)
function cancelLongPress () {
clearTimeout(timeoutId)
if (isLongPress) {
video.playbackRate = video.playbackRate / times
isLongPress = false
}
}
}
function setEndingContent () {
addEndingScale()
function addEndingScale () {
const style = Object.assign(document.createElement('style'), {
id: 'ending-content-scale',
textContent: `
.bpx-player-ending-content[screen-mode=little-screen] { transform: scale(calc(${window.innerWidth}/536*0.9)) !important; }
.bpx-player-ending-content { transform: scale(calc(${window.innerWidth}/710*0.9)) !important; }
.bpx-player-container[data-screen=full] .bpx-player-ending-content { transform: scale(calc(${window.innerWidth}/952*0.9)) !important; }
`
})
document.head.appendChild(style)
}
function renewEndingScale () {
document.head.querySelector('#ending-content-scale').remove()
addEndingScale()
}
screen.orientation.addEventListener('change', renewEndingScale)
window.addEventListener('resize', renewEndingScale)
}
// 动态修改播放组件样式
function modifyShadowDOMLate () {
let commentsShadow
let commentsHeaderShadow
// 初始化动态要获胜 #comment，第一次变化删除.comment增加.comment，第二次添加bili-comments
const comment = document.getElementById('comment')
// console.log(comment)
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
// console.log(mutation.addedNodes, mutation.removedNodes)
mutation.addedNodes.forEach(node => {
// console.log(node.nodeType, node.nodeName)
if (node.nodeType === Node.ELEMENT_NODE && node.nodeName.toLowerCase() === 'bili-comments') {
A()
observer.disconnect()
}
})
})
})
// 开始观察目标元素
observer.observe(comment, { childList: true, subtree: true })
function A () {
commentsShadow = document.querySelector('bili-comments').shadowRoot
const style1 = Object.assign(document.createElement('style'), {
textContent: `
div#contents {
padding-top: 0;
left: -30px;
width: calc(100% + 30px);
}`
})
commentsShadow.appendChild(style1)
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
// console.log(mutation.addedNodes, mutation.removedNodes)
mutation.addedNodes.forEach(node => {
// console.log(node.nodeType, node.nodeName)
if (node.nodeType === Node.ELEMENT_NODE && node.id === 'header') {
B()
observer.disconnect()
}
})
})
})
// 开始观察目标元素
observer.observe(commentsShadow, { childList: true, subtree: true })
}
function B () {
commentsHeaderShadow = commentsShadow.querySelector('bili-comments-header-renderer').shadowRoot
// 固定评论栏
const style2 = Object.assign(document.createElement('style'), {
textContent: `
div#commentbox {
position: fixed;
left: 0;
bottom: var(--actionbar-height);
z-index: 10;
background: white;
width: 100%;
padding: 8px 12px;
border-top: 1px solid var(--line_regular);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: calc(var(--actionbar-time)*1.40) ease-in;
display: var(--commentbox-display);
/* 由全局变量控制滚动隐藏 */
transform: var(--shadow-transform)
}
/* 评论导航 */
div#navbar {
margin-bottom: 0;
}
/* 评论顶部广告横条 */
#notice {
display: none;
}`
})
commentsHeaderShadow.appendChild(style2)
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
// console.log(mutation.addedNodes, mutation.removedNodes)
mutation.addedNodes.forEach(node => {
// console.log(node.nodeType, node.nodeName)
if (node.nodeType === Node.ELEMENT_NODE && node.nodeName.toLowerCase() === 'div' && node.classList.contains('bili-comments-bottom-fixed-wrapper')) {
C()
observer.disconnect()
}
})
})
})
observer.observe(commentsHeaderShadow, { childList: true, subtree: true })
}
function C () {
const commentBoxShadow = commentsHeaderShadow.querySelector('bili-comment-box')?.shadowRoot
const style3 = Object.assign(document.createElement('style'), {
textContent: `
:host {
display: var(--commentbox-display) !important;
}
/* 移除评论头像 */
div#user-avatar {
display: none;
}
/* 输入块 */
div#comment-area {
width: calc(100% - 24px);
}
/* 输入块内 */
div#editor {
border-radius: 13px;
padding: 0;
}`
})
commentBoxShadow.appendChild(style3)
}
}
/***/ }),
/* 31 */
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ handleHeaderImage: () => (/* binding */ handleHeaderImage),
/* harmony export */ handleVideoCard: () => (/* binding */ handleVideoCard)
/* harmony export */ });
/* harmony import */ var _api_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(29);
// 控制首页头图函数
function handleHeaderImage () {
// eslint-disable-next-line no-undef
const source = GM_getValue('header-image-source', 'unsplash')
// const formattedDate = new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/-/g, '/')
// https://api.ee123.net/img/bingimg/${formattedDate}.jpg
const mapping = {
bing: 'https://api.suyanw.cn/api/bing.php', // https://api.paugram.com/bing
unsplash: 'https://unsplash.it/1600/900?random',
picsum: 'https://picsum.photos/1600/900',
meizi: 'https://api.suyanw.cn/api/sjbz.php?method=pc&lx=meizi', // 素颜API
dongman: 'https://api.suyanw.cn/api/sjbz.php?method=pc&lx=dongman',
fengjing: 'https://api.suyanw.cn/api/sjbz.php?method=pc&lx=fengjing',
suiji: 'https://api.suyanw.cn/api/sjbz.php?method=pc&lx=suiji'
}
let url
url = mapping[source]
const elementSelector = '.bili-header__banner'
const key = 'header-image'
loadImage(key, elementSelector)
if (source !== 'local') { setTimeout(renewImage, 5000) }
// 触发事件前已判断 value !== 'local'
window.addEventListener('variableChanged', e => {
if (e.detail.key === 'header-image-source') {
const newSource = e.detail.newValue
url = mapping[newSource]
setTimeout(() => renewImage(true), 0)
}
})
async function renewImage (loadImmediately) {
try {
const img = await getImage(url)
const base64Data = imageToBase64(img)
storeImage(key, base64Data)
if (loadImmediately) loadImage(key, elementSelector)
} catch (error) {
console.error('Failed to get image:', error)
}
}
function getImage (url) {
return new Promise((resolve, reject) => {
const img = new Image()
img.crossOrigin = 'Anonymous'
img.src = url
img.onload = () => resolve(img)
img.onerror = reject
})
}
function imageToBase64 (img) {
const canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
const ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0)
return canvas.toDataURL('image/jpeg')
}
function storeImage (key, base64Data) {
localStorage.setItem(key, base64Data)
}
function loadImage (key, elementSelector) {
const base64Data = localStorage.getItem(key)
if (base64Data) {
const style = document.createElement('style')
style.innerHTML = `
${elementSelector}::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image: url(${base64Data});
background-size: cover;
background-position: center;
}
`
document.head.appendChild(style)
} else {
// 如果本地存储中不存在图片数据，则从 URL 中获取图片
getImage(url).then((img) => {
const base64Data = imageToBase64(img)
storeImage(key, base64Data)
loadImage(key, elementSelector)
}).catch(error => console.error('Failed to get image:', error))
}
}
}
// 处理视频卡片
function handleVideoCard () {
judgeHasAi()
let isLoading = false
// 获取AI总结
new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (isLoading) { return }
mutation.addedNodes.forEach(node => {
if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('bili-video-card')) {
isLoading = true
setTimeout(() => {
judgeHasAi()
isLoading = false
}, 2000) // 两秒后获取 AI 总结判断
}
})
})
}).observe(document.querySelector('.recommended-container_floor-aside>.container'), { childList: true })
function judgeHasAi () {
const imageLinks = document.querySelectorAll('.bili-video-card__image--link')
let delay = 0 // 初始化延迟变量
imageLinks.forEach(async link => {
await new Promise(resolve => setTimeout(resolve, delay)) // 在每次循环前等待当前延迟时间
const card = link.closest('.bili-video-card:not(:has(.bili-video-card__info--ad))') // 排除广告卡片
if (card) {
if (!link.dataset.hasJudgedAi) {
const aiJudgeRes = await judge(card)
if (aiJudgeRes) { card.dataset.hasAi = true }
delay += 100 // 将下一次循环的延迟时间往后延长 100 毫秒
}
link.dataset.hasJudgedAi = true
}
})
}
/**
* 存储已点击卡片
*/
let lastPreviewCard = null
// 添加预览视频选项
new MutationObserver(mutations => {
mutations.forEach(async mutation => {
const firstChild = mutation.addedNodes[0]?.firstChild // 未添加节点时 addedNodes 返回 []
if (firstChild && firstChild.className === 'v-popover is-bottom-end') {
const panel = firstChild.querySelector('.bili-video-card__info--no-interest-panel') // 不能用 document，直接切换不同视频面板时先添加第二个再移除第一个
const previewOption = Object.assign(document.createElement('div'), {
className: 'bili-video-card__info--no-interest-panel--item',
textContent: '预览此视频'
})
panel.insertBefore(previewOption, panel.firstChild)
previewOption.addEventListener('click', event => { onPreviewOptionClick(event, firstChild) }) // 移除父元素时，监听器和观察器均移除
function getCard () {
return new Promise(resolve => {
setTimeout(() => {
// 切换时筛选未使用的那一个
const btn = document.querySelector('.bili-video-card__info--no-interest.active:not(.use)')
const card = btn.closest('.bili-video-card')
btn.classList.add('use') // 新按钮添加使用状态
resolve(card)
}, 50) // 等待按钮添加 active 类，切换时旧按钮即移除 active 类需要 200 ms
})
}
const card = await getCard() // 异步函数返回结果，使用 async ... await 暂停执行，或使用 then 等待 promise 对象解析
const hasAi = card.dataset.hasAi
if (!hasAi) {
return
}
const AIOption = Object.assign(document.createElement('div'), {
className: 'bili-video-card__info--no-interest-panel--item',
textContent: '生成视频总结'
})
panel.insertBefore(AIOption, previewOption.nextSibling)
AIOption.addEventListener('click', async event => {
event.stopPropagation()
firstChild.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true })) // 面板鼠标移出，面板或按键的鼠标移入事件均会显示面板，此时后续事件按键自动鼠标移出
const aiCardElement = createAICardElement(card.querySelector('.bili-video-card__image--wrap'))
const aiConclusionRes = await aiConclusion(card)
const bvid = card.querySelector('.bili-video-card__image--link').dataset.bvid
genterateAIConclusionCard(aiConclusionRes, aiCardElement, bvid)
})
}
})
}).observe(document.body, { childList: true })
// 先由外到内冒泡鼠标移入事件，再由内到外冒泡点击事件
// 添加点击关闭逻辑，展开时才触发
window.addEventListener('click', event => {
const btn = document.querySelector('.bili-video-card__info--no-interest.active')
if (btn?.contains(event.target)) {
btn.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }))
btn.classList.remove('use') // 切换完成后才执行，移除旧按钮的使用状态
btn.addEventListener('click', () => {
btn.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
}, { once: true })
}
})
/**
* 预览按钮点击回调
* @param {MouseEvent} event
* @param {ChildNode} firstChild
*/
function onPreviewOptionClick (event, firstChild) {
event.stopPropagation()
firstChild.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true })) // 面板或按键的鼠标移入事件均会显示面板，但此时后续事件按键自动鼠标移出
// 先退出预览，否则切换时跳过前一个卡片
window.addEventListener('click', () => {
lastPreviewCard?.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }))
}, { once: true })
const card = document.querySelector('.bili-video-card__info--no-interest.active').closest('.bili-video-card')
const cardEventWrap = card.querySelector('.bili-video-card__image--wrap')
cardEventWrap.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true })) // 移入移出状态不会叠加
lastPreviewCard = cardEventWrap
if (!cardEventWrap.querySelector('.inline-progress-bar')) {
const intervalId = setInterval(() => {
if (cardEventWrap.querySelector('video')) {
createProgressBar()
clearInterval(intervalId)
}
}, 1000)
}
function createProgressBar () {
// 创建进度条
const progressBar = Object.assign(document.createElement('div'), {
className: 'inline-progress-bar',
innerHTML: '
'
})
cardEventWrap.appendChild(progressBar)
// 获取视频元素和进度条元素
const video = cardEventWrap.querySelector('video')
const progressBarFilled = progressBar.querySelector('.inline-progress-bar-filled')
const progressBarThumb = progressBar.querySelector('.inline-progress-bar-thumb')
const progressBarWidth = progressBar.offsetWidth
function updateProgressBar (progress) {
progressBarFilled.style.width = `${progress * 100}%`
progressBarThumb.style.left = `${progress * progressBarWidth}px`
}
// 为视频元素添加时间更新事件监听器
video.addEventListener('timeupdate', () => {
const initialProgress = video.currentTime / video.duration
const progress = Math.min(Math.max(initialProgress, 0), 1)
updateProgressBar(progress)
}, true) // 避免被下面拦截，先执行捕获，再执行冒泡，默认为 false
// 阻止后续捕获阶段监听器执行
// 同一事件传播阶段中，监听器的执行顺序按照添加的顺序依次执行。不同事件传播阶段中，捕获阶段的监听器总是先于冒泡阶段的监听器执行。
video.addEventListener('timeupdate', event => { event.stopImmediatePropagation() }, true)
function onTouchEvent (event) {
const initialProgress = (event.touches[0].clientX - progressBar.getBoundingClientRect().left) / progressBarWidth // offsetLeft 是相对于父元素的
const progress = Math.min(Math.max(initialProgress, 0), 1)
updateProgressBar(progress)
video.currentTime = progress * video.duration
}
progressBar.addEventListener('touchstart', event => {
onTouchEvent(event)
document.addEventListener('touchmove', onTouchEvent)
})
document.addEventListener('touchend', () => {
document.removeEventListener('touchmove', onTouchEvent)
})
progressBar.addEventListener('click', event => {
event.preventDefault() // a 标签内部元素默认事件
event.stopPropagation() // 避免全局点击退出预览
})
}
}
/**
* 判断是否有 AI 总结
* @param {object} card 点击视频卡片
* @returns AI 响应 data 节点
*/
async function judge (card) {
const cardImageLinkElement = card.querySelector('.bili-video-card__image--link')
const match = /\/video\/([A-Za-z0-9]+)/.exec(cardImageLinkElement.dataset.targetUrl) || /\/video\/([A-Za-z0-9]+)/.exec(cardImageLinkElement.href)
const bvid = match[1] // 第二个元素才是捕获组
try {
const videoInfo = await (0,_api_js__WEBPACK_IMPORTED_MODULE_0__.getVideoInfo)(bvid)
cardImageLinkElement.dataset.cid = videoInfo.cid
cardImageLinkElement.dataset.bvid = videoInfo.bvid
cardImageLinkElement.dataset.upMid = videoInfo.owner.mid
const cid = videoInfo.cid
const up_mid = videoInfo.owner.mid
const aiJudgeRes = await (0,_api_js__WEBPACK_IMPORTED_MODULE_0__.getJudgeAI)({ bvid, cid, up_mid })
if (aiJudgeRes.judge === 1) {
return true
}
} catch (error) {
console.error(error)
}
}
/**
* 临时缓存 AI 响应
*/
const aiData = {}
/**
* 获取 AI 总结
* @param {object} card 点击视频卡片
* @returns AI 响应 data 节点
*/
async function aiConclusion (card) {
const cardImageLinkElement = card.querySelector('.bili-video-card__image--link')
const match = /\/video\/([A-Za-z0-9]+)/.exec(cardImageLinkElement.dataset.targetUrl) || /\/video\/([A-Za-z0-9]+)/.exec(cardImageLinkElement.href)
const bvid = match[1] // 第二个元素才是捕获组
if (aiData[bvid] && aiData[bvid].code === 0) {
return aiData[bvid]
}
if (cardImageLinkElement.dataset.hasGotAi === undefined) {
const cid = cardImageLinkElement.dataset.cid
const up_mid = cardImageLinkElement.dataset.upMid
const aiConclusionRes = await (0,_api_js__WEBPACK_IMPORTED_MODULE_0__.getAIConclusion)({ bvid, cid, up_mid })
aiData[bvid] = aiConclusionRes
cardImageLinkElement.dataset.hasGotAi = true
if (aiConclusionRes.code === 0) {
return aiData[bvid]
}
}
}
/**
* 创建AI卡片
*/
const createAICardElement = cardElement => {
const overlay = Object.assign(document.createElement('div'), {
id: 'ai-conclusion-overlay',
innerHTML: `
`
})
cardElement.closest('.bili-video-card').appendChild(overlay)
overlay.classList.add('show')
overlay.addEventListener('click', () => {
overlay.classList.remove('show')
overlay.addEventListener('transitionend', overlay.remove)
}, { once: true }) // 移除元素后监听器不会自动消失 (需要移除父元素)
const div = overlay.querySelector('.ai-conclusion-card')
div.addEventListener('click', event => event.stopPropagation())
return div
}
/**
* 生成AI总结
*/
const genterateAIConclusionCard = (aiConclusionRes, aiCardElement, bvid) => {
let aiCard = ''
const { model_result: modelResult } = aiConclusionRes
aiCard = `
${modelResult.summary}
`
modelResult.outline.forEach(item => {
aiCard += `
`
})
// 函数表达式 ( const timeNumberToTime = time => {...} ) 不会被提升（Hoisted）到当前作用域的顶部，必须在声明函数之后才能调用
function timeNumberToTime (time) {
const min = Math.floor(time / 60)
const sec = time % 60
return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`
}
aiCardElement.innerHTML = aiCard
}
}
/***/ }),
/* 32 */
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ createUnfoldBtn: () => (/* binding */ createUnfoldBtn)
/* harmony export */ });
function createUnfoldBtn () {
const observer = new MutationObserver(mutations =>
mutations.forEach(mutation => {
// innerHTML 属性可一次性插入多个节点。此处 mutation.addedNodes.length 为 0 或 1。非数组使用 for...of 循环。
// addedNode.nodeType 为 1 表示 Node.ELEMENT_NODE
if (mutation.addedNodes[0]?.classList.contains('bili-im')) {
createElement()
observer.disconnect()
}
})
)
const messageContainer = document.querySelector('body>.container')
observer.observe(messageContainer, { childList: true, subtree: true })
function createElement () {
const unfoldBtn = Object.assign(document.createElement('div'), {
id: 'unfold-btn',
textContent: '展开'
})
const messageList = document.querySelector('.bili-im .left')
messageList.appendChild(unfoldBtn)
unfoldBtn.addEventListener('click', () => {
if (messageList.style.cssText === '') {
messageList.style.cssText = 'width: 240px !important'
unfoldBtn.textContent = '折叠'
} else {
messageList.style.cssText = ''
unfoldBtn.textContent = '展开'
}
})
}
}
/***/ })
/******/ ]);
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ id: moduleId,
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = __webpack_modules__;
/******/
/************************************************************************/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/jsonp chunk loading */
/******/ (() => {
/******/ __webpack_require__.b = document.baseURI || self.location.href;
/******/
/******/ // object to store loaded and loading chunks
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = {
/******/ 0: 0
/******/ };
/******/
/******/ // no chunk on demand loading
/******/
/******/ // no prefetching
/******/
/******/ // no preloaded
/******/
/******/ // no HMR
/******/
/******/ // no HMR manifest
/******/
/******/ // no on chunks loaded
/******/
/******/ // no jsonp function
/******/ })();
/******/
/******/ /* webpack/runtime/nonce */
/******/ (() => {
/******/ __webpack_require__.nc = undefined;
/******/ })();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
(() => {
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _style_app_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
/* harmony import */ var _style_header_css__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
/* harmony import */ var _style_home_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(13);
/* harmony import */ var _style_video_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(17);
/* harmony import */ var _style_search_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(19);
/* harmony import */ var _style_space_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(21);
/* harmony import */ var _style_message_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(23);
/* harmony import */ var _window_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(25);
/* harmony import */ var _setting_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(26);
/* harmony import */ var _actionbar_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(27);
/* harmony import */ var _home_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(31);
/* harmony import */ var _video_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(30);
/* harmony import */ var _message_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(32);
// @grant 表示全局作用域运行，而不在隔离沙盒内使用特定 API
(function () {
// setInterval(() => { debugger }, 100)
if (window.top !== window.self) { return } // 检查当前执行环境是否为顶级窗口
function waitDOMContentLoaded (callback) { document.readyState === 'loading' ? document.addEventListener('DOMContentLoaded', callback) : callback() }
/* initViewport */ document.head.appendChild(Object.assign(document.createElement('meta'), { name: 'viewport', content: 'width=device-width, initial-scale=1' }))
;(0,_window_js__WEBPACK_IMPORTED_MODULE_7__.preventBeforeUnload)()
;(0,_window_js__WEBPACK_IMPORTED_MODULE_7__.countViewTime)()
/* iconfont */document.head.appendChild(Object.assign(document.createElement('link'), { rel: 'stylesheet', href: 'https://s1.hdslb.com/bfs/static/jinkela/space/css/space.8.22c06a62b42dec796d083a84f5a769f44a97b325.css' }))
console.log('Bilibili mobile execute!')
// 简单表达式: 常量折叠，解析引擎优化为只计算一次，然后缓存入临时变量。函数调用、对象属性访问等不适用。
const part = location.hostname.substring(0, location.hostname.indexOf('.'))
switch (part) {
case 'www':
if (location.pathname === '/') {
(0,_window_js__WEBPACK_IMPORTED_MODULE_7__.increaseVideoLoadSize)()
;(0,_home_js__WEBPACK_IMPORTED_MODULE_10__.handleHeaderImage)()
;(0,_setting_js__WEBPACK_IMPORTED_MODULE_8__.handleScriptPreSetting)()
waitDOMContentLoaded(() => {
;(0,_actionbar_js__WEBPACK_IMPORTED_MODULE_9__.handleActionbar)('home')
;(0,_setting_js__WEBPACK_IMPORTED_MODULE_8__.handleScriptSetting)()
;(0,_home_js__WEBPACK_IMPORTED_MODULE_10__.handleVideoCard)()
;(0,_window_js__WEBPACK_IMPORTED_MODULE_7__.handleScroll)()
;(0,_setting_js__WEBPACK_IMPORTED_MODULE_8__.setScriptHelp)()
})
} else if (location.pathname.startsWith('/video')) {
(0,_setting_js__WEBPACK_IMPORTED_MODULE_8__.handleScriptPreSetting)()
waitDOMContentLoaded(() => {
;(0,_actionbar_js__WEBPACK_IMPORTED_MODULE_9__.handleActionbar)('video')
;(0,_setting_js__WEBPACK_IMPORTED_MODULE_8__.handleScriptSetting)()
;(0,_video_js__WEBPACK_IMPORTED_MODULE_11__.videoInteraction)()
;(0,_window_js__WEBPACK_IMPORTED_MODULE_7__.handleScroll)('video')
;(0,_setting_js__WEBPACK_IMPORTED_MODULE_8__.setScriptHelp)()
})
}
break
case 'search':
;(0,_setting_js__WEBPACK_IMPORTED_MODULE_8__.handleScriptPreSetting)()
waitDOMContentLoaded(() => {
;(0,_actionbar_js__WEBPACK_IMPORTED_MODULE_9__.handleActionbar)('search')
;(0,_setting_js__WEBPACK_IMPORTED_MODULE_8__.handleScriptSetting)()
;(0,_window_js__WEBPACK_IMPORTED_MODULE_7__.handleScroll)('search')
;(0,_setting_js__WEBPACK_IMPORTED_MODULE_8__.setScriptHelp)()
})
break
case 'space':
;(0,_setting_js__WEBPACK_IMPORTED_MODULE_8__.handleScriptPreSetting)()
waitDOMContentLoaded(() => {
;(0,_actionbar_js__WEBPACK_IMPORTED_MODULE_9__.handleActionbar)('space')
;(0,_setting_js__WEBPACK_IMPORTED_MODULE_8__.handleScriptSetting)()
;(0,_window_js__WEBPACK_IMPORTED_MODULE_7__.handleScroll)('space')
;(0,_setting_js__WEBPACK_IMPORTED_MODULE_8__.setScriptHelp)()
})
break
case 'message':
;(0,_setting_js__WEBPACK_IMPORTED_MODULE_8__.handleScriptPreSetting)()
waitDOMContentLoaded(() => {
;(0,_actionbar_js__WEBPACK_IMPORTED_MODULE_9__.handleActionbar)('message')
;(0,_setting_js__WEBPACK_IMPORTED_MODULE_8__.handleScriptSetting)()
;(0,_window_js__WEBPACK_IMPORTED_MODULE_7__.handleScroll)('message')
;(0,_message_js__WEBPACK_IMPORTED_MODULE_12__.createUnfoldBtn)()
;(0,_setting_js__WEBPACK_IMPORTED_MODULE_8__.setScriptHelp)()
})
break
default:
break
}
})()
})();
/******/ })()
;
}@96w_96h_1c_1s_!web-avatar.avif){kind=avatar}
}@96w_96h_1c_1s_!web-avatar-space-list.avif){kind=avatar}