mirror of
https://github.com/BewlyBewly/BewlyBewly.git
synced 2025-04-14 13:15:29 +00:00
feat: video page
This commit is contained in:
Hakadao
@@ -2,6 +2,7 @@ import browser from 'webextension-polyfill'
|
||||
|
||||
export const setupVideosAPIs = () => {
|
||||
browser.runtime.onMessage.addListener((message) => {
|
||||
// #region APP端api，遺棄
|
||||
/** Recommend Videos */
|
||||
// if (message.contentScriptQuery === 'getRecommendVideos') {
|
||||
// // https://github.com/indefined/UserScripts/blob/master/bilibiliHome/bilibiliHome.API.md#%E8%8E%B7%E5%8F%96%E9%A6%96%E9%A1%B5%E5%86%85%E5%AE%B9
|
||||
@@ -11,6 +12,49 @@ export const setupVideosAPIs = () => {
|
||||
// .then(data => data)
|
||||
// .catch(error => console.error(error))
|
||||
// }
|
||||
// /** Submit a video that is not of interest */
|
||||
// else if (message.contentScriptQuery === 'submitDislike') {
|
||||
// // https://github.com/indefined/UserScripts/blob/master/bilibiliHome/bilibiliHome.API.md#%E6%8F%90%E4%BA%A4%E4%B8%8D%E5%96%9C%E6%AC%A2
|
||||
// let url = `https://app.bilibili.com/x/feed/dislike?access_key=${message.accessKey}
|
||||
// &goto=${message.goto}
|
||||
// &id=${message.id}
|
||||
// &mid=${message.mid}
|
||||
// &reason_id=${message.reasonID}
|
||||
// &rid=${message.rid}
|
||||
// &tag_id=${message.tagID}
|
||||
// &build=5000000`
|
||||
|
||||
// // remove url empty spaces
|
||||
// url = url.replace(/\s+/g, '')
|
||||
|
||||
// return fetch(url)
|
||||
// .then(response => response.json())
|
||||
// .then(data => data)
|
||||
// .catch(error => console.error(error))
|
||||
// }
|
||||
|
||||
// /** Undo a video that is not of interest */
|
||||
// else if (message.contentScriptQuery === 'undoDislike') {
|
||||
// // https://github.com/indefined/UserScripts/blob/master/bilibiliHome/bilibiliHome.API.md#%E6%92%A4%E9%94%80%E4%B8%8D%E5%96%9C%E6%AC%A2
|
||||
// let url = `https://app.bilibili.com/x/feed/dislike/cancel?access_key=${message.accessKey}
|
||||
// &goto=${message.goto}
|
||||
// &id=${message.id}
|
||||
// &mid=${message.mid}
|
||||
// &reason_id=${message.reasonID}
|
||||
// &rid=${message.rid}
|
||||
// &tag_id=${message.tagID}
|
||||
// &build=5000000`
|
||||
|
||||
// // remove url empty spaces
|
||||
// url = url.replace(/\s+/g, '')
|
||||
|
||||
// return fetch(url)
|
||||
// .then(response => response.json())
|
||||
// .then(data => data)
|
||||
// .catch(error => console.error(error))
|
||||
// }
|
||||
// #endregion
|
||||
|
||||
if (message.contentScriptQuery === 'getRecommendVideos') {
|
||||
const url = `https://api.bilibili.com/x/web-interface/index/top/feed/rcmd?fresh_idx=${message.refreshIdx}&feed_version=V1&fresh_type=4&ps=30&plat=1`
|
||||
return fetch(url)
|
||||
@@ -18,43 +62,9 @@ export const setupVideosAPIs = () => {
|
||||
.then(data => data)
|
||||
.catch(error => console.error(error))
|
||||
}
|
||||
|
||||
/** Submit a video that is not of interest */
|
||||
if (message.contentScriptQuery === 'submitDislike') {
|
||||
// https://github.com/indefined/UserScripts/blob/master/bilibiliHome/bilibiliHome.API.md#%E6%8F%90%E4%BA%A4%E4%B8%8D%E5%96%9C%E6%AC%A2
|
||||
let url = `https://app.bilibili.com/x/feed/dislike?access_key=${message.accessKey}
|
||||
&goto=${message.goto}
|
||||
&id=${message.id}
|
||||
&mid=${message.mid}
|
||||
&reason_id=${message.reasonID}
|
||||
&rid=${message.rid}
|
||||
&tag_id=${message.tagID}
|
||||
&build=5000000`
|
||||
|
||||
// remove url empty spaces
|
||||
url = url.replace(/\s+/g, '')
|
||||
|
||||
return fetch(url)
|
||||
.then(response => response.json())
|
||||
.then(data => data)
|
||||
.catch(error => console.error(error))
|
||||
}
|
||||
|
||||
/** Unsubmit a video that is not of interest */
|
||||
if (message.contentScriptQuery === 'undoDislike') {
|
||||
// https://github.com/indefined/UserScripts/blob/master/bilibiliHome/bilibiliHome.API.md#%E6%92%A4%E9%94%80%E4%B8%8D%E5%96%9C%E6%AC%A2
|
||||
let url = `https://app.bilibili.com/x/feed/dislike/cancel?access_key=${message.accessKey}
|
||||
&goto=${message.goto}
|
||||
&id=${message.id}
|
||||
&mid=${message.mid}
|
||||
&reason_id=${message.reasonID}
|
||||
&rid=${message.rid}
|
||||
&tag_id=${message.tagID}
|
||||
&build=5000000`
|
||||
|
||||
// remove url empty spaces
|
||||
url = url.replace(/\s+/g, '')
|
||||
|
||||
// https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/video/info.md#%E8%8E%B7%E5%8F%96%E8%A7%86%E9%A2%91%E8%AF%A6%E7%BB%86%E4%BF%A1%E6%81%AFweb%E7%AB%AF
|
||||
else if (message.contentScriptQuery === 'getVideoInfo') {
|
||||
const url = `https://api.bilibili.com/x/web-interface/view?${message.aid ? `aid=${message.aid}` : `bvid=${message.bvid}`}`
|
||||
return fetch(url)
|
||||
.then(response => response.json())
|
||||
.then(data => data)
|
||||
|
||||
@@ -1,26 +1,77 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Ref } from 'vue'
|
||||
import type { Ref, UnwrapNestedRefs } from 'vue'
|
||||
import type { VideoInfoModel } from './types'
|
||||
import { removeHttpFromUrl } from '~/utils'
|
||||
|
||||
const hahaha = ref() as Ref<HTMLElement>
|
||||
|
||||
const app = document.querySelector('#app') as HTMLElement
|
||||
// app.innerHTML = ''
|
||||
const videoContent = ref() as Ref<HTMLElement>
|
||||
const videoInfo = reactive<VideoInfoModel | {}>({}) as UnwrapNestedRefs<VideoInfoModel>
|
||||
|
||||
// document.body.removeChild(app)
|
||||
|
||||
onMounted(() => {
|
||||
// const app = document.querySelector('#app') as HTMLElement
|
||||
// app.innerHTML = ''
|
||||
getVideoInfo()
|
||||
|
||||
const videoPlayer = document.querySelector('#playerWrap') as HTMLElement
|
||||
if (hahaha.value)
|
||||
hahaha.value.appendChild(videoPlayer)
|
||||
if (videoContent.value)
|
||||
videoContent.value.appendChild(videoPlayer)
|
||||
})
|
||||
|
||||
function getVideoInfo() {
|
||||
// e.g. https://www.bilibili.com/video/BV1vx4y1V7VD/
|
||||
const url = location.href
|
||||
// url.match(/video\/[0-9a-zA-Z]*/) = ['video/BV1vx4y1V7VD/', index: 25, input: 'https://www.bilibili.com/video/BV1vx4y1V7VD/', groups: undefined]
|
||||
// url.match(/video\/[0-9a-zA-Z]*/)[0] = 'video/BV1vx4y1V7VD/'
|
||||
const bvid = url.match(/video\/[0-9a-zA-Z]*\/?/)![0].split('/')[1]
|
||||
browser.runtime.sendMessage({ contentScriptQuery: 'getVideoInfo', bvid })
|
||||
.then((res) => {
|
||||
if (res.code === 0)
|
||||
Object.assign(videoInfo, res.data)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div ref="hahaha" class="uwuwuw" />
|
||||
<div flex gap-6>
|
||||
<main w="3/4" grid gap-6>
|
||||
<div ref="videoContent" w-full bg="$bew-fill-1" />
|
||||
<section>
|
||||
<p text-2xl fw-600>
|
||||
{{ videoInfo.title }}
|
||||
</p>
|
||||
</section>
|
||||
<section flex justify-between bg="$bew-content-solid-1" rounded="$bew-radius" p-4>
|
||||
<div flex>
|
||||
<img
|
||||
v-if="videoInfo.owner?.face"
|
||||
:src="`${videoInfo.owner?.face}@60w_60h_1c`"
|
||||
:alt="videoInfo.owner.name" rounded="$bew-radius-half" aspect-square
|
||||
w-40px mr-4
|
||||
>
|
||||
<div>
|
||||
<p text-xl fw-500>
|
||||
{{ videoInfo.owner?.name }}
|
||||
</p>
|
||||
<!-- <p>{{ videoInfo.owner }}</p> -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- <section>
|
||||
{{ JSON.stringify(videoInfo.desc_v2[0].raw_text) }}
|
||||
</section> -->
|
||||
<!-- <section v-html="videoInfo.desc_v2[0].raw_text" /> -->
|
||||
</main>
|
||||
<aside w="1/4" bg="$bew-fill-1" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
<style>
|
||||
#bilibili-player {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
224
src/contentScripts/views/Video/types.ts
Normal file
224
src/contentScripts/views/Video/types.ts
Normal file
@@ -0,0 +1,224 @@
|
||||
// https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/video/info.md#%E8%8E%B7%E5%8F%96%E8%A7%86%E9%A2%91%E8%AF%A6%E7%BB%86%E4%BF%A1%E6%81%AFweb%E7%AB%AF
|
||||
export interface VideoInfoModel {
|
||||
bvid: string
|
||||
aid: number
|
||||
videos: number
|
||||
tid: number
|
||||
tname: string
|
||||
copyright: number
|
||||
pic: string
|
||||
title: string
|
||||
pubdate: number
|
||||
ctime: number
|
||||
desc: string
|
||||
desc_v2: [
|
||||
{
|
||||
raw_text: string
|
||||
type: number
|
||||
biz_id: number
|
||||
},
|
||||
]
|
||||
state: number
|
||||
duration: number
|
||||
mission_id: number
|
||||
rights: {
|
||||
bp: number
|
||||
elec: number
|
||||
download: number
|
||||
movie: number
|
||||
pay: number
|
||||
hd5: number
|
||||
no_reprint: number
|
||||
autoplay: number
|
||||
ugc_pay: number
|
||||
is_cooperation: number
|
||||
ugc_pay_preview: number
|
||||
no_background: number
|
||||
clean_mode: number
|
||||
is_stein_gate: number
|
||||
is_360: number
|
||||
no_share: number
|
||||
arc_pay: number
|
||||
free_watch: number
|
||||
}
|
||||
owner: {
|
||||
mid: number
|
||||
name: string
|
||||
face: string
|
||||
}
|
||||
staff: Array<{
|
||||
mid: number
|
||||
title: string
|
||||
name: string
|
||||
face: string
|
||||
follower: number
|
||||
}>
|
||||
stat: {
|
||||
aid: number
|
||||
view: number
|
||||
danmaku: number
|
||||
reply: number
|
||||
favorite: number
|
||||
coin: number
|
||||
share: number
|
||||
now_rank: number
|
||||
his_rank: number
|
||||
like: number
|
||||
dislike: number
|
||||
evaluation: string
|
||||
argue_msg: string
|
||||
}
|
||||
dynamic: string
|
||||
cid: number
|
||||
dimension: {
|
||||
width: number
|
||||
height: number
|
||||
rotate: number
|
||||
}
|
||||
season_id: number
|
||||
premiere: null
|
||||
teenage_mode: number
|
||||
is_chargeable_season: boolean
|
||||
is_story: false
|
||||
no_cache: boolean
|
||||
pages: Array<{
|
||||
cid: number
|
||||
page: number
|
||||
from: string
|
||||
part: string
|
||||
duration: number
|
||||
vid: string
|
||||
weblink: string
|
||||
dimension: {
|
||||
width: number
|
||||
height: number
|
||||
rotate: number
|
||||
}
|
||||
first_frame: string
|
||||
}>
|
||||
|
||||
subtitle: {
|
||||
allow_submit: boolean
|
||||
list: string[]
|
||||
}
|
||||
ugc_season: {
|
||||
id: number
|
||||
title: string
|
||||
cover: string
|
||||
mid: number
|
||||
intro: string
|
||||
sign_state: number
|
||||
attribute: number
|
||||
sections: [
|
||||
{
|
||||
season_id: number
|
||||
id: number
|
||||
title: string
|
||||
type: number
|
||||
episodes: Array<{
|
||||
season_id: number
|
||||
section_id: number
|
||||
id: number
|
||||
aid: number
|
||||
cid: number
|
||||
title: string
|
||||
attribute: number
|
||||
arc: {
|
||||
aid: number
|
||||
videos: number
|
||||
type_id: number
|
||||
type_name: string
|
||||
copyright: number
|
||||
pic: string
|
||||
title: string
|
||||
pubdate: number
|
||||
ctime: number
|
||||
desc: string
|
||||
state: number
|
||||
duration: number
|
||||
rights: {
|
||||
bp: number
|
||||
elec: number
|
||||
download: number
|
||||
movie: number
|
||||
pay: number
|
||||
hd5: number
|
||||
no_reprint: number
|
||||
autoplay: number
|
||||
ugc_pay: number
|
||||
is_cooperation: number
|
||||
ugc_pay_preview: number
|
||||
arc_pay: number
|
||||
free_watch: number
|
||||
}
|
||||
author: {
|
||||
mid: number
|
||||
name: string
|
||||
face: string
|
||||
}
|
||||
stat: {
|
||||
aid: number
|
||||
view: number
|
||||
danmaku: number
|
||||
reply: number
|
||||
fav: number
|
||||
coin: number
|
||||
share: number
|
||||
now_rank: number
|
||||
his_rank: number
|
||||
like: number
|
||||
dislike: number
|
||||
evaluation: string
|
||||
argue_msg: string
|
||||
}
|
||||
dynamic: string
|
||||
dimension: {
|
||||
width: number
|
||||
height: number
|
||||
rotate: number
|
||||
}
|
||||
desc_v2: null
|
||||
is_chargeable_season: boolean
|
||||
is_blooper: boolean
|
||||
}
|
||||
page: {
|
||||
cid: number
|
||||
page: number
|
||||
from: string
|
||||
part: string
|
||||
duration: number
|
||||
vid: string
|
||||
weblink: string
|
||||
dimension: {
|
||||
width: number
|
||||
height: number
|
||||
rotate: number
|
||||
}
|
||||
}
|
||||
bvid: string
|
||||
}>
|
||||
},
|
||||
]
|
||||
stat: {
|
||||
season_id: number
|
||||
view: number
|
||||
danmaku: number
|
||||
reply: number
|
||||
fav: number
|
||||
coin: number
|
||||
share: number
|
||||
now_rank: number
|
||||
his_rank: number
|
||||
like: number
|
||||
}
|
||||
ep_count: number
|
||||
season_type: number
|
||||
is_pay_season: boolean
|
||||
}
|
||||
is_season_display: boolean
|
||||
user_garb: {
|
||||
url_image_ani_cut: string
|
||||
}
|
||||
like_icon: string
|
||||
need_jump_bv: boolean
|
||||
}
|
||||
Reference in New Issue
Block a user