chore:

2025-04-14 13:15:29 +00:00 · 2023-05-02 02:29:49 +08:00
parent 188a0f3709
commit 43e87274bb
5 changed files with 126 additions and 43 deletions
--- 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"
  }
 }
--- 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
--- a/src/components/DPlayer.vue
+++ b/src/components/DPlayer.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import DPlayer from 'dplayer'
+
+const dplayer = ref<HTMLElement>()
+
+onMounted(() => {
+  const dp = new DPlayer({
+    container: dplayer.value,
+    screenshot: true,
+    video: {
+      url: 'demo.mp4',
+      pic: 'demo.jpg',
+      thumbnails: 'thumbnails.jpg',
+    },
+    subtitle: {
+      url: 'webvtt.vtt',
+    },
+    danmaku: {
+      id: 'demo',
+      api: 'https://api.prprpr.me/dplayer/',
+    },
+  })
+})
+</script>
+
+<template>
+  <div ref="dplayer" />
+</template>
+
+<style lang="scss" scoped>
+
+</style>
--- 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')
--- a/src/contentScripts/views/Video/Video.vue
+++ b/src/contentScripts/views/Video/Video.vue
@@ -18,44 +18,44 @@ const commentPageInfo = reactive<any>({})

 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) {
  <div class="video-page-wrapper" flex gap-6 m-auto>
    <main w="3/4" min-w-640px flex="~ col gap-4">
      <div ref="videoContent" bg="$bew-fill-1" />
+      <!-- <DPlayer /> -->
      <section>
        <p text-2xl fw-600>
          {{ videoInfo.title }}