//
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(>.header-favorite-container)',
'.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)
} 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
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))
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)
// 设置历史自动展开
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/BV1XH4y137f3/?',
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 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.classList.add('show')
showMoreFab.classList.add('reverse')
sessionStorage.setItem('show-conditions', 'true')
} else {
searchConditions.classList.remove('show')
showMoreFab.classList.remove('reverse')
sessionStorage.setItem('show-conditions', '')
}
}
} else if (page === 'space') {
const followRow = document.querySelector('.h .h-action')
followRow?.classList.toggle('show')
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 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() }
})
}
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)
}
}
}
/***/ }),
/* 26 */
/***/ ((__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);
/***/ }),
/* 27 */
/***/ ((__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 */ });
// 控制首页头图函数
function handleHeaderImage () {
let source
// eslint-disable-next-line no-undef
source = GM_getValue('custom-header-image-source', 'unsplash')
const key = 'header-image'
const formattedDate = new Date().toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/-/g, '/')
const url = source === 'unsplash' ? 'https://source.unsplash.com/random/840x400' : `https://api.ee123.net/img/bingimg/${formattedDate}.jpg`
const elementSelector = '.bili-header__banner'
loadImage(key, elementSelector)
if (source !== 'local') { setTimeout(renewImage, 5000) }
window.addEventListener('variableChanged', e => {
if (e.detail.key === 'header-image-source') {
source = e.detail.newValue
setTimeout(renewImage, 0)
}
})
async function renewImage () {
try {
const img = await getImage(url)
const base64Data = imageToBase64(img)
storeImage(key, base64Data)
} 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 () {
let lastPreviewCard = null
// 添加预览视频选项
new MutationObserver(mutations => {
mutations.forEach(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 => { // 移除父元素时，监听器和观察器均移除
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)
}) // 默认为 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() // 避免全局点击退出预览
})
}
})
}
})
}).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.addEventListener('click', () => {
btn.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }))
}, { once: true })
}
})
}
/***/ }),
/* 28 */
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ videoInteraction: () => (/* binding */ videoInteraction)
/* harmony export */ });
/* global GM_getValue */
function videoInteraction () {
handlePortrait()
handlelVideoClick()
handleVideoLongPress()
closeMiniPlayer()
setEndingContent()
}
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() }
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 { transform: scale(calc(${window.innerWidth}/536*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)
window.addEventListener('fullscreenchange', renewEndingScale)
}
/***/ }),
/* 29 */
/***/ ((__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;
/******/ }
/******/
/************************************************************************/
/******/ /* 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/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__(15);
/* harmony import */ var _style_search_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(17);
/* harmony import */ var _style_space_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(19);
/* harmony import */ var _style_message_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(21);
/* harmony import */ var _window_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(23);
/* harmony import */ var _setting_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(24);
/* harmony import */ var _actionbar_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(25);
/* harmony import */ var _home_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(27);
/* harmony import */ var _video_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(28);
/* harmony import */ var _message_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(29);
// @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)()
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
}
})()
})();
/******/ })()
;