feat: add video title to the player page

WhiteMinds · Mar 1, 2024 · ff8d278 · ff8d278
1 parent c02acb8
commit ff8d278
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 0 deletions.
diff --git a/packages/http-server/src/routes/api_types.ts b/packages/http-server/src/routes/api_types.ts
@@ -125,6 +125,14 @@ export namespace API {
     }
   }
 
+  export namespace getRecord {
+    export interface Args {
+      id: RecordModel['id']
+    }
+
+    export type Resp = ClientRecord
+  }
+
   export namespace getRecordExtraData {
     export interface Args {
       id: RecordModel['id']

diff --git a/packages/http-server/src/routes/record.ts b/packages/http-server/src/routes/record.ts
@@ -21,6 +21,13 @@ async function getRecords(args: API.getRecords.Args): Promise<API.getRecords.Res
   return pagedGetter(args.page, args.pageSize)
 }
 
+function getRecord(args: API.getRecord.Args): API.getRecord.Resp {
+  const record = db.getRecord(args.id)
+  if (record == null) throw new Error('404')
+
+  return record
+}
+
 router.route('/records').get(async (req, res) => {
   const { recorderId } = req.query
   if (recorderId != null) {
@@ -36,6 +43,11 @@ router.route('/records').get(async (req, res) => {
   res.json({ payload: await getRecords({ recorderId, page, pageSize }) })
 })
 
+router.route('/records/:id').get(async (req, res) => {
+  const { id } = req.params
+  res.json({ payload: getRecord({ id }) })
+})
+
 router.route('/records/:id/video').get(async (req, res) => {
   const { id } = req.params
   const record = db.getRecord(id)

diff --git a/packages/web/src/services/LARServerService/index.ts b/packages/web/src/services/LARServerService/index.ts
@@ -79,6 +79,11 @@ async function getRecords(args: API.getRecords.Args): Promise<API.getRecords.Res
   return resp.data.payload
 }
 
+async function getRecord(args: API.getRecord.Args): Promise<API.getRecord.Resp> {
+  const resp = await requester.get<{ payload: API.getRecord.Resp }>(`/records/${args.id}`)
+  return resp.data.payload
+}
+
 async function getRecordExtraData(args: API.getRecordExtraData.Args): Promise<API.getRecordExtraData.Resp> {
   const resp = await requester.get<{ payload: API.getRecordExtraData.Resp }>(`/records/${args.id}/extra_data`)
   return resp.data.payload
@@ -131,6 +136,7 @@ export const LARServerService = {
   resolveChannel,
   getManagerDefault,
   getRecords,
+  getRecord,
   getRecordExtraData,
   createRecordSRT,
   getRecordVideoURL,

diff --git a/packages/web/src/views/Player/index.vue b/packages/web/src/views/Player/index.vue
@@ -28,6 +28,8 @@ const id = typeof route.query.id === 'string' ? route.query.id : null
 onMounted(async () => {
   if (id === null) return
   assert(container.value)
+  const record = await LARServerService.getRecord({ id })
+  document.title = record.savePath
   const videoURL = await LARServerService.getRecordVideoURL({ id })
   // 浏览器会缓存 fmp4 的 duration，需要加个 query 来 bypass 缓存
   const videoURLWithBypassCache = `${videoURL}?_=${Date.now()}`
@@ -47,6 +49,7 @@ onMounted(async () => {
     apiBackend: {
       async read({ success }) {
         const res = await LARServerService.getRecordExtraData({ id })
+        if (res.meta.title != null) document.title = `${res.meta.title} - ${record.savePath}`
 
         const start = res.meta.recordStartTimestamp
         const comments = res.messages