diff --git a/package.json b/package.json index ef519ad8..00f654c1 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "@iconify/json": "^2.1.119", "@intlify/unplugin-vue-i18n": "^0.8.1", "@rollup/plugin-replace": "^5.0.1", + "@types/dplayer": "^1.25.2", "@types/fs-extra": "^9.0.13", "@types/node": "^18.8.3", "@types/webextension-polyfill": "^0.9.1", @@ -73,6 +74,7 @@ "webextension-polyfill": "^0.10.0" }, "dependencies": { + "dplayer": "^1.27.1", "vue-i18n": "^9.2.2" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 306a4425..1e68627c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,6 +6,7 @@ specifiers: '@iconify/json': ^2.1.119 '@intlify/unplugin-vue-i18n': ^0.8.1 '@rollup/plugin-replace': ^5.0.1 + '@types/dplayer': ^1.25.2 '@types/fs-extra': ^9.0.13 '@types/node': ^18.8.3 '@types/webextension-polyfill': ^0.9.1 @@ -20,6 +21,7 @@ specifiers: chokidar: ^3.5.3 cross-env: ^7.0.3 crx: ^5.0.1 + dplayer: ^1.27.1 eslint: ^8.25.0 esno: ^0.16.3 fs-extra: ^10.1.0 @@ -45,6 +47,7 @@ specifiers: webextension-polyfill: ^0.10.0 dependencies: + dplayer: 1.27.1 vue-i18n: 9.2.2_vue@3.2.45 devDependencies: @@ -53,6 +56,7 @@ devDependencies: '@iconify/json': 2.1.154 '@intlify/unplugin-vue-i18n': 0.8.1_vue-i18n@9.2.2 '@rollup/plugin-replace': 5.0.2 + '@types/dplayer': 1.25.2 '@types/fs-extra': 9.0.13 '@types/node': 18.11.17 '@types/webextension-polyfill': 0.9.2 @@ -410,8 +414,8 @@ packages: vue-i18n: optional: true dependencies: - '@intlify/message-compiler': 9.3.0-beta.16 - '@intlify/shared': 9.3.0-beta.16 + '@intlify/message-compiler': 9.3.0-beta.17 + '@intlify/shared': 9.3.0-beta.17 jsonc-eslint-parser: 1.4.1 source-map: 0.6.1 vue-i18n: 9.2.2_vue@3.2.45 @@ -443,11 +447,11 @@ packages: source-map: 0.6.1 dev: false - /@intlify/message-compiler/9.3.0-beta.16: - resolution: {integrity: sha512-CGQI3xRcs1ET75eDQ0DUy3MRYOqTauRIIgaMoISKiF83gqRWg93FqN8lGMKcpBqaF4tI0JhsfosCaGiBL9+dnw==} + /@intlify/message-compiler/9.3.0-beta.17: + resolution: {integrity: sha512-i7hvVIRk1Ax2uKa9xLRJCT57to08OhFMhFXXjWN07rmx5pWQYQ23MfX1xgggv9drnWTNhqEiD+u4EJeHoS5+Ww==} engines: {node: '>= 14'} dependencies: - '@intlify/shared': 9.3.0-beta.16 + '@intlify/shared': 9.3.0-beta.17 source-map: 0.6.1 dev: true @@ -456,8 +460,8 @@ packages: engines: {node: '>= 14'} dev: false - /@intlify/shared/9.3.0-beta.16: - resolution: {integrity: sha512-kXbm4svALe3lX+EjdJxfnabOphqS4yQ1Ge/iIlR8tvUiYRCoNz3hig1M4336iY++Dfx5ytEQJPNjIcknNIuvig==} + /@intlify/shared/9.3.0-beta.17: + resolution: {integrity: sha512-mscf7RQsUTOil35jTij4KGW1RC9SWQjYScwLxP53Ns6g24iEd5HN7ksbt9O6FvTmlQuX77u+MXpBdfJsGqizLQ==} engines: {node: '>= 14'} dev: true @@ -477,7 +481,7 @@ packages: optional: true dependencies: '@intlify/bundle-utils': 3.4.0_vue-i18n@9.2.2 - '@intlify/shared': 9.3.0-beta.16 + '@intlify/shared': 9.3.0-beta.17 '@rollup/pluginutils': 4.2.1 '@vue/compiler-sfc': 3.2.45 debug: 4.3.4 @@ -652,6 +656,10 @@ packages: resolution: {integrity: sha512-hC7OMnszpxhZPduX+m+nrx+uFoLkWOMiR4oa/AZF3MuSETYTZmFfJAHqZEM8MVlvfG7BEUcgvtwoCTxBp6hm3g==} dev: true + /@types/dplayer/1.25.2: + resolution: {integrity: sha512-bkTVZkK3Vi7N7eX2FUBnqKhCjTaeRLkhvY8H6zolatbSTtjPPdxyUzhE3C29sIBYRRq1kQHSduFgCHKg5VF3Jw==} + dev: true + /@types/estree/1.0.0: resolution: {integrity: sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==} dev: true @@ -1551,7 +1559,6 @@ packages: /asynckit/0.4.0: resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==} - dev: true /at-least-node/1.0.0: resolution: {integrity: sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==} @@ -1571,10 +1578,24 @@ packages: resolution: {integrity: sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==} dev: true + /axios/1.2.3: + resolution: {integrity: sha512-pdDkMYJeuXLZ6Xj/Q5J3Phpe+jbGdsSzlQaFVkMQzRUL05+6+tetX8TV3p4HrU4kzuO9bt+io/yGQxuyxA/xcw==} + dependencies: + follow-redirects: 1.15.2 + form-data: 4.0.0 + proxy-from-env: 1.1.0 + transitivePeerDependencies: + - debug + dev: false + /balanced-match/1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} dev: true + /balloon-css/1.2.0: + resolution: {integrity: sha512-urXwkHgwp6GsXVF+it01485Z2Cj4pnW02ICnM0TemOlkKmCNnDLmyy+ZZiRXBpwldUXO+aRNr7Hdia4CBvXJ5A==} + dev: false + /base64-js/1.5.1: resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==} dev: true @@ -1918,7 +1939,6 @@ packages: engines: {node: '>= 0.8'} dependencies: delayed-stream: 1.0.0 - dev: true /commander/2.20.3: resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} @@ -2252,7 +2272,6 @@ packages: /delayed-stream/1.0.0: resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} engines: {node: '>=0.4.0'} - dev: true /destr/1.2.2: resolution: {integrity: sha512-lrbCJwD9saUQrqUfXvl6qoM+QN3W7tLV5pAOs+OqOmopCCz/JkE05MHedJR1xfk4IAnZuJXPVuN5+7jNA2ZCiA==} @@ -2320,6 +2339,16 @@ packages: is-obj: 2.0.0 dev: true + /dplayer/1.27.1: + resolution: {integrity: sha512-2laBMXs5V1B9zPwJ7eAIw/OBo+Xjvy03i4GHTk3Cg+IWbrq8rKMFO0fFr6ClAYotYOCcFGOvaJDkOZcgKllsCA==} + dependencies: + axios: 1.2.3 + balloon-css: 1.2.0 + promise-polyfill: 8.3.0 + transitivePeerDependencies: + - debug + dev: false + /dtrace-provider/0.8.8: resolution: {integrity: sha512-b7Z7cNtHPhH9EJhNNbbeqTcXB8LGFFZhq1PGgEvpeHlzd36bhbdTWoE/Ba/YguqpBSlAPKnARWhVlhunCMwfxg==} engines: {node: '>=0.10'} @@ -3477,6 +3506,16 @@ packages: engines: {node: '>=8.9.0'} dev: true + /follow-redirects/1.15.2: + resolution: {integrity: sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==} + engines: {node: '>=4.0'} + peerDependencies: + debug: '*' + peerDependenciesMeta: + debug: + optional: true + dev: false + /forever-agent/0.6.1: resolution: {integrity: sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw==} dev: true @@ -3502,7 +3541,6 @@ packages: asynckit: 0.4.0 combined-stream: 1.0.8 mime-types: 2.1.35 - dev: true /formdata-polyfill/4.0.10: resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==} @@ -4720,14 +4758,12 @@ packages: /mime-db/1.52.0: resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==} engines: {node: '>= 0.6'} - dev: true /mime-types/2.1.35: resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==} engines: {node: '>= 0.6'} dependencies: mime-db: 1.52.0 - dev: true /mimic-fn/2.1.0: resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==} @@ -5415,6 +5451,10 @@ packages: engines: {node: '>=0.4.0'} dev: true + /promise-polyfill/8.3.0: + resolution: {integrity: sha512-H5oELycFml5yto/atYqmjyigJoAo3+OXwolYiH7OfQuYlAqhxNvTfiNMbV9hsC6Yp83yE5r2KTVmtrG6R9i6Pg==} + dev: false + /promise-toolbox/0.21.0: resolution: {integrity: sha512-NV8aTmpwrZv+Iys54sSFOBx3tuVaOBvvrft5PNppnxy9xpU/akHbaWIril22AB22zaPgrgwKdD0KsrM0ptUtpg==} engines: {node: '>=6'} @@ -5430,6 +5470,10 @@ packages: resolution: {integrity: sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==} dev: true + /proxy-from-env/1.1.0: + resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==} + dev: false + /psl/1.9.0: resolution: {integrity: sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==} dev: true diff --git a/src/components/DPlayer.vue b/src/components/DPlayer.vue new file mode 100644 index 00000000..ef3e9d5e --- /dev/null +++ b/src/components/DPlayer.vue @@ -0,0 +1,32 @@ + + + + + diff --git a/src/contentScripts/index.ts b/src/contentScripts/index.ts index 08fd3ac3..649f214d 100644 --- a/src/contentScripts/index.ts +++ b/src/contentScripts/index.ts @@ -53,6 +53,10 @@ let app: AppType | null = null; app.use(i18n).mount(root) } else if (/https?:\/\/(www.)?bilibili.com\/video\/.*/.test(currentUrl)) { + const originalPageContent = document.querySelector('#app') + if (originalPageContent) + originalPageContent.innerHTML = '' + const container = document.createElement('div') const root = document.createElement('div') const styleEl = document.createElement('link') diff --git a/src/contentScripts/views/Video/Video.vue b/src/contentScripts/views/Video/Video.vue index 9dece27c..e6ae862d 100644 --- a/src/contentScripts/views/Video/Video.vue +++ b/src/contentScripts/views/Video/Video.vue @@ -18,44 +18,44 @@ const commentPageInfo = reactive({}) onMounted(async () => { window.onload = () => { - const videoPlayer = document.querySelector('#playerWrap') as HTMLElement - if (videoContent.value && videoPlayer) - videoContent.value.appendChild(videoPlayer) + nextTick(async () => { + const videoPlayer = document.querySelector('#playerWrap') as HTMLElement + if (videoContent.value && videoPlayer) + videoContent.value.appendChild(videoPlayer) - // const comment = document.querySelector('#comment') as HTMLElement - // if (commentContent.value && comment) - // commentContent.value.appendChild(comment) + const danmukuBox = document.querySelector('#danmukuBox') as HTMLElement + if (danmukuContent.value && danmukuBox) + danmukuContent.value.appendChild(danmukuBox) - const danmukuBox = document.querySelector('#danmukuBox') as HTMLElement - if (danmukuContent.value && danmukuBox) - danmukuContent.value.appendChild(danmukuBox) + const recoList = document.querySelector('#reco_list') as HTMLElement + if (recommendedContent.value && recoList) + recommendedContent.value.appendChild(recoList) - // const recoList = document.querySelector('#reco_list') as HTMLElement - // if (recommendedContent.value && recoList) - // recommendedContent.value.appendChild(recoList) + const multiPage = document.querySelector('#multi_page') as HTMLElement + if (videoEpisodeList.value && multiPage) + videoEpisodeList.value.appendChild(multiPage) - const multiPage = document.querySelector('#multi_page') as HTMLElement - if (videoEpisodeList.value && multiPage) - videoEpisodeList.value.appendChild(multiPage) + // setupVideoSize() + // const videoPlayerContainer = document.querySelector('#bilibili-player .bpx-player-container') as HTMLElement + // videoPlayerContainer.dataset.screen = 'normal' + // videoPlayerContainer.style.right = '0' + // videoPlayerContainer.style.bottom = '0' - // setupVideoSize() - const videoPlayerContainer = document.querySelector('#bilibili-player .bpx-player-container') as HTMLElement - videoPlayerContainer.dataset.screen = 'normal' - videoPlayerContainer.style.right = '0' - videoPlayerContainer.style.bottom = '0' + const app = document.querySelector('#app') as HTMLElement + app.innerHTML = '' - const app = document.querySelector('#app') as HTMLElement - app.innerHTML = '' + await getVideoInfo() + getVideoComments() + }) } - - await getVideoInfo() - getVideoComments() }) -watch(() => 'location.href', async (newValue, oldValue) => { - await getVideoInfo() - getVideoComments() -}) +// watch(() => 'location.href', async (newValue, oldValue) => { +// console.log('location change') + +// await getVideoInfo() +// getVideoComments() +// }, { deep: true }) onUnmounted(() => { window.onload = () => {} @@ -178,6 +178,7 @@ function setupCommentEmote(content: string, emote: any) {
+

{{ videoInfo.title }}