✨ B站视频基本信息获取，支持分享图生成

2025-12-06 08:32:51 +08:00 · 2024-12-16 16:08:14 +08:00
parent 582d2cffb8
commit c6a9548a43
13 changed files with 195 additions and 148 deletions
--- a/public/source/UI/video_play_bili.png
+++ b/public/source/UI/video_play_bili.png
--- a/src-tauri/capabilities/SubWindow.json
+++ b/src-tauri/capabilities/SubWindow.json
@@ -35,31 +35,59 @@
    "core:window:default",
    {
      "identifier": "fs:allow-exists",
-      "allow": [{ "path": "**" }]
+      "allow": [
+        {
+          "path": "**"
+        }
+      ]
    },
    {
      "identifier": "fs:allow-mkdir",
-      "allow": [{ "path": "**" }]
+      "allow": [
+        {
+          "path": "**"
+        }
+      ]
    },
    {
      "identifier": "fs:allow-read-dir",
-      "allow": [{ "path": "**" }]
+      "allow": [
+        {
+          "path": "**"
+        }
+      ]
    },
    {
      "identifier": "fs:allow-read-text-file",
-      "allow": [{ "path": "**" }]
+      "allow": [
+        {
+          "path": "**"
+        }
+      ]
    },
    {
      "identifier": "fs:allow-remove",
-      "allow": [{ "path": "**" }]
+      "allow": [
+        {
+          "path": "**"
+        }
+      ]
    },
    {
      "identifier": "fs:allow-write-file",
-      "allow": [{ "path": "**" }]
+      "allow": [
+        {
+          "path": "**"
+        }
+      ]
    },
    {
      "identifier": "fs:allow-write-text-file",
-      "allow": [{ "path": "**" }]
+      "allow": [
+        {
+          "path": "**"
+        }
+      ]
    },
    {
      "identifier": "http:default",
@@ -76,6 +104,9 @@
        {
          "url": "https://*.bilibili.com/*"
        },
+        {
+          "url": "http://*.hdslb.com/*"
+        },
        {
          "url": "https://*.hoyoverse.com/*"
        },
--- a/src-tauri/gen/schemas/capabilities.json
+++ b/src-tauri/gen/schemas/capabilities.json
@@ -124,6 +124,7 @@
          { "url": "https://*.mihoyo.com/*" },
          { "url": "https://*.mihoyogift.com/*" },
          { "url": "https://*.bilibili.com/*" },
+          { "url": "http://*.hdslb.com/*" },
          { "url": "https://*.hoyoverse.com/*" },
          { "url": "https://*.genshinnet.com/*" }
        ]
--- a/src/components/viewPost/tp-video.vue
+++ b/src/components/viewPost/tp-video.vue
@@ -1,6 +1,5 @@
-<!-- todo 优化 -->
 <template>
-  <div class="tp-video-box">
+  <div class="tp-video-box" v-if="videoData">
    <!-- todo https://socialsisteryi.github.io/bilibili-API-collect/docs/video/videostream_url.html#%E8%A7%86%E9%A2%91%E4%BC%B4%E9%9F%B3%E9%9F%B3%E8%B4%A8%E4%BB%A3%E7%A0%81 -->
    <iframe
      class="tp-video-container"
@@ -9,26 +8,32 @@
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
      sandbox="allow-forms allow-same-origin allow-popups allow-presentation allow-scripts"
      :id="`tp-video-${props.data.insert.video}`"
-    >
-    </iframe>
-    <div class="tp-video-cover" v-if="videoCover">
-      <img alt="cover" :src="videoCover" />
-      <img src="/source/UI/video_play.svg" alt="icon" />
-      <span>{{ getVideoTime() }}</span>
+    />
+    <div class="tp-video-share">
+      <img alt="cover" :src="videoCover" class="tp-video-cover" />
+      <img alt="icon" src="/source/UI/video_play_bili.png" class="tp-video-icon" />
+      <div class="tp-video-info">
+        <span>{{ videoData.bvid }}|{{ timestampToDate(videoData.ctime * 1000) }}</span>
+        <span>{{ videoData.title }}</span>
+      </div>
+      <div class="tp-video-view">
+        <v-icon size="12">mdi-eye</v-icon>
+        <span>{{ videoData.stat.view }}</span>
+      </div>
+      <div class="tp-video-time">
+        <v-icon size="12">mdi-clock-time-four-outline</v-icon>
+        <span>{{ getVideoDuration(videoData.duration) }}</span>
+      </div>
    </div>
  </div>
 </template>
 <script lang="ts" setup>
-// todo https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js&example=dash
-// todo flv
-// https://artplayer.org/document/library/flv.html
-//  https://api.bilibili.com/x/player/playurl?avid=666064953&cid=1400018762&qn=64&otype=json
 import Bili from "@Bili/index.js";
-import { getCurrentWindow } from "@tauri-apps/api/window";
-import { onBeforeMount, onMounted, onUnmounted, ref, shallowRef, useTemplateRef } from "vue";
+import showSnackbar from "@comp/func/snackbar.js";
+import { onMounted, onUnmounted, ref, shallowRef } from "vue";

-import TGLogger from "@/utils/TGLogger.js";
-import { saveImgLocal } from "@/utils/TGShare.js";
+import { getImageBuffer } from "@/utils/TGShare.js";
+import { getVideoDuration, timestampToDate } from "@/utils/toolFunc.js";

 type TpVideo = { insert: { video: string } };
 type TpVideoProps = { data: TpVideo };
@@ -37,60 +42,28 @@ const props = defineProps<TpVideoProps>();
 const videoAspectRatio = ref<number>(16 / 9);
 const videoCover = ref<string>();
 const videoData = shallowRef<TGApp.Plugins.Bili.Video.ViewData>();
-const videoRef = useTemplateRef<HTMLIFrameElement>(`#tp-video-${props.data.insert.video}`);
+const coverBuffer = shallowRef<Uint8Array | null>(null);

 console.log("tpVideo", props.data.insert.video);

-onBeforeMount(async () => {
+onMounted(async () => {
  const url = new URL(props.data.insert.video);
  const aid = url.searchParams.get("aid") ?? undefined;
  const bvid = url.searchParams.get("bvid") ?? undefined;
-  try {
-    videoData.value = await Bili.video.view(aid, bvid);
-  } catch (e) {
-    if (e instanceof Error) {
-      await TGLogger.Error(`获取视频信息失败: ${e.message}`);
-    } else await TGLogger.Error(`获取视频信息失败: ${e}`);
-  }
+  videoData.value = await Bili.video.view(aid, bvid);
  if (!videoData.value) {
-    console.error("videoData is null");
+    showSnackbar.error(`获取B站视频信息失败：${props.data.insert.video}`);
    return;
  }
  const meta = videoData.value.dimension;
  if (meta.width > meta.height) videoAspectRatio.value = meta.width / meta.height;
  else videoAspectRatio.value = meta.height / meta.width;
+  coverBuffer.value = await getImageBuffer(videoData.value.pic);
+  videoCover.value = URL.createObjectURL(new Blob([coverBuffer.value], { type: "image/png" }));
 });

-onMounted(async () => {
-  if (videoData.value && videoData.value.pic) {
-    videoCover.value = await saveImgLocal(videoData.value.pic);
-  }
-  if (videoRef.value === null) return;
-  videoRef.value.addEventListener("fullscreenchange", listenFullScreen);
-});
-
-async function listenFullScreen(): Promise<void> {
-  if (document.fullscreenElement) await getCurrentWindow().setFullscreen(true);
-  else await getCurrentWindow().setFullscreen(false);
-}
-
-function getVideoTime(): string {
-  const duration = videoData.value?.duration ?? 0;
-  const seconds = duration % 60;
-  const minutes = Math.floor(duration / 60) % 60;
-  const hours = Math.floor(duration / 3600);
-  let result = "";
-  if (hours > 0) result += `${hours.toString().padStart(2, "0")}:`;
-  result += `${minutes.toString().padStart(2, "0")}:`;
-  result += `${seconds.toString().padStart(2, "0")}`;
-  return result;
-}
-
 onUnmounted(() => {
  if (videoCover.value) URL.revokeObjectURL(videoCover.value);
-  if (videoRef.value !== null) {
-    videoRef.value.removeEventListener("fullscreenchange", listenFullScreen);
-  }
 });
 </script>
 <style lang="css" scoped>
@@ -102,6 +75,8 @@ onUnmounted(() => {
 }

 .tp-video-container {
+  position: relative;
+  z-index: 1;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
@@ -110,7 +85,7 @@ onUnmounted(() => {
  aspect-ratio: v-bind(videoAspectRatio);
 }

-.tp-video-cover {
+.tp-video-share {
  position: absolute;
  z-index: -1;
  top: 0;
@@ -124,28 +99,64 @@ onUnmounted(() => {
  aspect-ratio: v-bind(videoAspectRatio);
 }

-.tp-video-cover :first-child {
-  width: 100%;
+.tp-video-cover {
+  position: absolute;
+  max-width: 100%;
  object-fit: cover;
 }

-.tp-video-cover :nth-child(2) {
+.tp-video-icon {
  position: absolute;
-  top: calc(50% - 40px);
-  left: calc(50% - 40px);
+  top: 50%;
+  left: 50%;
  width: 80px;
  height: 80px;
+  transform: translate(-50%, -50%);
 }

-.tp-video-cover :nth-child(3) {
+.tp-video-time {
  position: absolute;
-  right: 10px;
  bottom: 10px;
-  padding: 0 5px;
+  left: 10px;
+  display: flex;
+  align-items: center;
+  padding: 2px 5px;
  border-radius: 5px;
  background: rgb(0 0 0/50%);
  color: var(--tgc-white-4);
  font-family: var(--font-title);
  font-size: 12px;
+  gap: 5px;
+}
+
+.tp-video-info {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 5px;
+  border-radius: 5px;
+  background: rgb(0 0 0 / 50%);
+  color: var(--tgc-white-1);
+  font-family: var(--font-title);
+  font-size: 12px;
+}
+
+.tp-video-view {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  padding: 2px 5px;
+  border-radius: 5px;
+  background: rgb(0 0 0/50%);
+  color: var(--tgc-white-4);
+  font-family: var(--font-title);
+  font-size: 12px;
+  gap: 5px;
 }
 </style>
--- a/src/plugins/Bili/request/getNav.ts
+++ b/src/plugins/Bili/request/getNav.ts
@@ -1,19 +1,24 @@
 /**
 * @file plugins/Bili/request/getNav.ts
 * @description Bili 插件导航请求文件
- * @since Beta v0.5.0
+ * @since Beta v0.5.7
 */

+import headerBili from "@Bili/utils/getHeader.js";
+
 import TGHttp from "@/utils/TGHttp.js";

 /**
 * @description Bili 插件导航请求
- * @since Beta v0.5.0
- * @return {Promise<TGApp.Plugins.Bili.Nav.NavData>} Bili 插件导航请求返回
+ * @since Beta v0.5.7
+ * @return {Promise<TGApp.Plugins.Bili.Nav.Data>} Bili 插件导航请求返回
 */
-async function getNav(): Promise<TGApp.Plugins.Bili.Nav.NavData> {
+async function getNav(): Promise<TGApp.Plugins.Bili.Nav.Data> {
  const url = "https://api.bilibili.com/x/web-interface/nav";
-  const resp = await TGHttp<TGApp.Plugins.Bili.Nav.NavResponse>(url, { method: "GET" });
+  const resp = await TGHttp<TGApp.Plugins.Bili.Nav.Response>(url, {
+    method: "GET",
+    headers: headerBili,
+  });
  return resp.data;
 }

--- a/src/plugins/Bili/request/getVideoUrl.ts
+++ b/src/plugins/Bili/request/getVideoUrl.ts
@@ -4,6 +4,7 @@
 * @since Beta v0.5.0
 */

+import headerBili from "@Bili/utils/getHeader.js";
 import getWrid from "@Bili/utils/getWrid.js";

 import TGHttp from "@/utils/TGHttp.js";
@@ -18,22 +19,13 @@ import TGHttp from "@/utils/TGHttp.js";
 */
 async function getVideoUrl(cid: number, bvid: string): Promise<TGApp.Plugins.Bili.Video.UrlData> {
  const url = "https://api.bilibili.com/x/player/playurl";
-  let params: Record<string, string> = {
-    bvid,
-    cid: cid.toString(),
-    fnval: "16",
-    platform: "pc",
-  };
+  let params: Record<string, string> = { bvid, cid: cid.toString(), fnval: "16", platform: "pc" };
  const wridRes = await getWrid(params);
-  params = {
-    ...params,
-    wts: wridRes[0],
-    wrid: wridRes[1],
-  };
+  params = { ...params, wts: wridRes[0], w_rid: wridRes[1] };
  const resp = await TGHttp<TGApp.Plugins.Bili.Video.UrlResponse>(url, {
    method: "GET",
    query: params,
-    headers: { referer: "https://www.bilibili.com/" },
+    headers: headerBili,
  });
  return resp.data;
 }
--- a/src/plugins/Bili/request/getVideoView.ts
+++ b/src/plugins/Bili/request/getVideoView.ts
@@ -4,7 +4,11 @@
 * @since Beta v0.5.0
 */

+import headerBili from "@Bili/utils/getHeader.js";
+import getWrid from "@Bili/utils/getWrid.js";
+
 import TGHttp from "@/utils/TGHttp.js";
+import TGLogger from "@/utils/TGLogger.js";

 /**
 * @description 获取视频基本信息
@@ -18,26 +22,24 @@ async function getVideoView(
  bvid?: string,
 ): Promise<TGApp.Plugins.Bili.Video.ViewData> {
  const url = "https://api.bilibili.com/x/web-interface/wbi/view";
-  const params: Record<string, string | number | boolean> = {
-    need_view: 1,
-    isGaiaAoided: true,
-  };
-  if (aid) {
-    params.aid = aid;
-  } else if (bvid) {
-    params.bvid = bvid;
-  } else {
-    throw new Error("参数错误");
+  let params: Record<string, string | number | boolean> = { need_view: 1, isGaiaAvoided: true };
+  if (aid) params.aid = aid;
+  if (bvid) params.bvid = bvid;
+  if (!aid && !bvid) throw new Error("aid和bVid不能同时为空");
+  const wrid = await getWrid(params);
+  params = { ...params, wts: wrid[0], w_rid: wrid[1] };
+  try {
+    const resp = await TGHttp<TGApp.Plugins.Bili.Video.ViewResponse>(url, {
+      method: "GET",
+      query: params,
+      headers: headerBili,
+    });
+    return resp.data;
+  } catch (error) {
+    if (error instanceof Error) await TGLogger.Error(`获取视频基本信息失败: ${error.message}`);
+    else await TGLogger.Error(`获取视频基本信息失败: ${error}`);
  }
-  const resp = await TGHttp<TGApp.Plugins.Bili.Video.ViewResponse>(url, {
-    method: "GET",
-    query: params,
-  }).catch((err) => {
-    console.error(err);
-    return err;
-  });
-  console.warn(resp.data);
-  return resp.data;
+  throw new Error("获取视频基本信息失败");
 }

 export default getVideoView;
--- a/src/plugins/Bili/types/Base.d.ts
+++ b/src/plugins/Bili/types/Base.d.ts
@@ -4,12 +4,6 @@
 * @since Beta v0.4.0
 */

-/**
- * @description Bili 插件基础类型
- * @since Beta v0.4.0
- * @namespace Base
- * @memberof TGApp.Plugins.Bili
- */
 declare namespace TGApp.Plugins.Bili.Base {
  /**
   * @description Bili Response 统一接口
@@ -21,10 +15,5 @@ declare namespace TGApp.Plugins.Bili.Base {
   * @property {any} data 数据
   * @return Response
   */
-  interface Response {
-    code: number;
-    message: string;
-    ttl: number;
-    data: any;
-  }
+  type Response = { code: number; message: string; ttl: number; data: unknown };
 }
--- a/src/plugins/Bili/types/Nav.d.ts
+++ b/src/plugins/Bili/types/Nav.d.ts
@@ -1,42 +1,29 @@
 /**
 * @file plugins/Bili/types/Nav.d.ts
 * @description Bili 插件导航类型定义文件
- * @since Beta v0.4.0
+ * @since Beta v0.5.7
 */

-/**
- * @description Bili 插件导航类型
- * @since Beta v0.4.0
- * @namespace Nav
- * @memberof TGApp.Plugins.Bili
- */
 declare namespace TGApp.Plugins.Bili.Nav {
  /**
   * @description Bili 导航基本信息返回
-   * @since Beta v0.4.0
-   * @interface NavResponse
+   * @since Beta v0.5.7
+   * @interface Response
   * @extends {TGApp.Plugins.Bili.Base.Response}
-   * @property {NavData} data 导航基本信息
+   * @property {Data} data 导航基本信息
   * @return NavResponse
   */
-  interface NavResponse extends TGApp.Plugins.Bili.Base.Response {
-    data: NavData;
-  }
+  type Response = TGApp.Plugins.Bili.Base.Response & { data: Data };

  /**
   * @description Bili 导航基本信息
-   * @since Beta v0.4.0
-   * @interface NavData
+   * @since Beta v0.5.7
+   * @interface Data
   * @see https://api.bilibili.com/x/web-interface/nav
   * @desc 只写了用到的部分
   * @property {string} wbi_img.img_url 网站图标
   * @property {string} wbi_img.sub_url 网站图标（小）
-   * @return NavData
+   * @return Data
   */
-  interface NavData {
-    wbi_img: {
-      img_url: string;
-      sub_url: string;
-    };
-  }
+  type Data = { wbi_img: { img_url: string; sub_url: string } };
 }
--- a/src/plugins/Bili/types/Video.d.ts
+++ b/src/plugins/Bili/types/Video.d.ts
@@ -187,7 +187,7 @@ declare namespace TGApp.Plugins.Bili.Video {
   * @property {string} seek_type 视频跳转类型
   * @property {UrlDash} dash 视频播放地址
   * @property {UrlDurl[]} durl 视频播放地址
-   * @property {UrlFormats} support_formats 视频支持格式
+   * @property {UrlFormat[]} support_formats 视频支持格式
   * @property {unknown} high_format 视频高清格式
   * @property {number} last_play_time 视频上次播放时间
   * @property {number} last_play_cid 视频上次播放分P号
@@ -208,7 +208,7 @@ declare namespace TGApp.Plugins.Bili.Video {
    seek_type: string;
    dash: UrlDash; // dash 返回
    durl: UrlDurl[]; // mp4 返回
-    support_formats: UrlFormats;
+    support_formats: UrlFormat[];
    high_format: unknown;
    last_play_time: number;
    last_play_cid: number;
@@ -331,7 +331,7 @@ declare namespace TGApp.Plugins.Bili.Video {
   * @property {unknown} codecs 视频编码
   * @return UrlFormats
   */
-  interface UrlFormats {
+  interface UrlFormat {
    quality: number;
    format: string;
    new_description: string;
--- a/src/plugins/Bili/utils/getHeader.ts
+++ b/src/plugins/Bili/utils/getHeader.ts
@@ -0,0 +1,13 @@
+/**
+ * @file plugins/Bili/utils/getHeader.ts
+ * @description 获取请求头
+ * @since Beta v0.5.7
+ */
+
+const headerBili = {
+  cookie: "",
+  "user-agent": "Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/115.0",
+  origin: "https://www.bilibili.com",
+};
+
+export default headerBili;
--- a/src/plugins/Bili/utils/getWrid.ts
+++ b/src/plugins/Bili/utils/getWrid.ts
@@ -43,13 +43,12 @@ async function getMixinKey(): Promise<string> {
 * @param {Record<string,string|number>} params 请求参数
 * @returns {Promise<[string|string]>} wrid
 */
-async function getWrid(params: Record<string, string | number>): Promise<[string, string]> {
+async function getWrid(
+  params: Record<string, string | number | boolean>,
+): Promise<[string, string]> {
  const mixin_key = await getMixinKey();
  const wts = Math.floor(Date.now() / 1000);
-  const obj: Record<string, string | number> = {
-    ...params,
-    wts,
-  };
+  const obj: Record<string, string | number> = { ...params, wts };
  const keys = Object.keys(obj).sort();
  let md5Str = "";
  for (let i = 0; i < keys.length; i++) {
--- a/src/utils/toolFunc.ts
+++ b/src/utils/toolFunc.ts
@@ -232,3 +232,20 @@ export function getZhElement(element: string): string {
      return "未知";
  }
 }
+
+/**
+ * @description 获取视频时长
+ * @since Beta v0.5.7
+ * @param {number} duration - 视频时长（秒）
+ * @returns {string} 视频时长
+ */
+export function getVideoDuration(duration: number): string {
+  const seconds = duration % 60;
+  const minutes = Math.floor(duration / 60) % 60;
+  const hours = Math.floor(duration / 3600);
+  let result = "";
+  if (hours > 0) result += `${hours.toString().padStart(2, "0")}:`;
+  result += `${minutes.toString().padStart(2, "0")}:`;
+  result += `${seconds.toString().padStart(2, "0")}`;
+  return result;
+}