feat(frontend): 视频库接口对接

Signed-off-by: Myon <[email protected]>

frontend/.env.production

@@ -1 +1,2 @@
 BACKEND_URL=
+BACKEND_STATIC_URL=

frontend/src/api/BaseApi.js

@@ -1,8 +1,9 @@
 import { createRequest } from 'src/utils/http';
+import config from 'src/config';
 
 class BaseApi {
   // 如果没设置baseUrl，则默认使用当前相对路径
-  BaseUrl = process.env.BACKEND_URL || new URL(window.location.href).pathname.replace(/\/$/, '');
+  BaseUrl = config.BACKEND_URL;
 
   http(url, ...option) {
     return createRequest(`${this.BaseUrl}${url}`, ...option);

frontend/src/api/LibraryApi.js

@@ -7,6 +7,6 @@ class LibraryApi extends BaseApi {
 
   getList = () => this.http('/v1/video/list');
 
-  downloadSubtitle = (videoId) => this.http(`/v1/video/subtitle/download`, { id: videoId }, 'POST');
+  downloadSubtitle = (data) => this.http(`/v1/video/list/add`, data, 'POST');
 }
 export default new LibraryApi();

frontend/src/config/index.js

@@ -0,0 +1,9 @@
+export default {
+  get BACKEND_URL() {
+    return process.env.BACKEND_URL || new URL(window.location.href).pathname.replace(/\/$/, '');
+  },
+
+  // 19037为静态服务默认端口
+  BACKEND_STATIC_URL:
+    process.env.BACKEND_STATIC_URL || `${window.location.protocol}//${window.location.hostname}:19037`,
+};

frontend/src/pages/library/movies/ListItemMovie.vue

@@ -1,7 +1,13 @@
 <template>
   <q-card flat square>
     <div class="area-cover q-mb-sm relative-position">
-      <q-img src="https://via.placeholder.com/500" class="content-width bg-grey-2" height="230px" no-spinner />
+      <q-img
+        :src="getUrl(data.dir_root_url) + '/poster.jpg'"
+        class="content-width bg-grey-2"
+        no-spinner
+        style="width: 160px; height: 200px"
+        fit="cover"
+      />
       <q-btn
         class="btn-download absolute-bottom-right"
         color="primary"
@@ -25,7 +31,7 @@
                 <q-item-section side>{{ index + 1 }}.</q-item-section>
 
                 <q-item-section class="overflow-hidden ellipsis" :title="item.split(/\/|\\/).pop()">
-                  <a class="text-primary" href="" target="_blank">{{ item.split(/\/|\\/).pop() }}</a>
+                  <a class="text-primary" :href="getUrl(item)" target="_blank">{{ item.split(/\/|\\/).pop() }}</a>
                 </q-item-section>
               </q-item>
             </q-list>
@@ -41,6 +47,8 @@
 import { computed } from 'vue';
 import LibraryApi from 'src/api/LibraryApi';
 import { SystemMessage } from 'src/utils/Message';
+import { VIDEO_TYPE_MOVIE } from 'src/constants/SettingConstants';
+import config from 'src/config';
 
 const props = defineProps({
   data: Object,
@@ -49,13 +57,21 @@ const props = defineProps({
 const hasSubtitle = computed(() => props.data.sub_f_path_list.length > 0);
 
 const downloadSubtitle = async () => {
-  const [, err] = await LibraryApi.downloadSubtitle(props.data.id);
+  const [, err] = await LibraryApi.downloadSubtitle({
+    video_type: VIDEO_TYPE_MOVIE,
+    physical_video_file_full_path: props.data.video_f_path,
+    task_priority_level: 3, // 一般的队列等级是5，如果想要快，那么可以先默认这里填写3，这样就可以插队
+    // 媒体服务器内部视频ID  `video/list` 中 获取到的 media_server_inside_video_id，可以用于自动 Emby 字幕列表刷新用
+    media_server_inside_video_id: props.data.media_server_inside_video_id,
+  });
   if (err !== null) {
     SystemMessage.error(err.message);
   } else {
     SystemMessage.success('已加入下载队列');
   }
 };
+
+const getUrl = (path) => config.BACKEND_STATIC_URL + path.split(/\/|\\/).join('/');
 </script>
 
 <style lang="scss" scoped>

frontend/src/pages/library/tvs/DialogTVDetail.vue

@@ -32,7 +32,9 @@
                       <q-item-section side>{{ index + 1 }}.</q-item-section>
 
                       <q-item-section class="overflow-hidden ellipsis" :title="item1.split(/\/|\\/).pop()">
-                        <a class="text-primary" href="" target="_blank">{{ item1.split(/\/|\\/).pop() }}</a>
+                        <a class="text-primary" :href="getUrl(item1)" target="_blank">{{
+                          item1.split(/\/|\\/).pop()
+                        }}</a>
                       </q-item-section>
                     </q-item>
                   </q-list>
@@ -50,7 +52,7 @@
                 dense
                 icon="download_for_offline"
                 title="下载字幕"
-                @click="downloadSubtitle(item.id)"
+                @click="downloadSubtitle(item)"
               ></q-btn>
             </q-item-section>
           </q-item>
@@ -64,6 +66,8 @@
 import { computed, ref } from 'vue';
 import LibraryApi from 'src/api/LibraryApi';
 import { SystemMessage } from 'src/utils/Message';
+import { VIDEO_TYPE_TV } from 'src/constants/SettingConstants';
+import config from 'src/config';
 
 const props = defineProps({
   data: Object,
@@ -97,8 +101,16 @@ const pandStart2 = (num) => {
 
 const visible = ref(false);
 
-const downloadSubtitle = async (id) => {
-  const [, err] = await LibraryApi.downloadSubtitle(id);
+const getUrl = (path) => config.BACKEND_STATIC_URL + path.split(/\/|\\/).join('/');
+
+const downloadSubtitle = async (item) => {
+  const [, err] = await LibraryApi.downloadSubtitle({
+    video_type: VIDEO_TYPE_TV,
+    physical_video_file_full_path: item.video_f_path,
+    task_priority_level: 3, // 一般的队列等级是5，如果想要快，那么可以先默认这里填写3，这样就可以插队
+    // 媒体服务器内部视频ID  `video/list` 中 获取到的 media_server_inside_video_id，可以用于自动 Emby 字幕列表刷新用
+    media_server_inside_video_id: item.media_server_inside_video_id,
+  });
   if (err !== null) {
     SystemMessage.error(err.message);
   } else {

frontend/src/pages/library/tvs/ListItemTV.vue

@@ -1,7 +1,13 @@
 <template>
   <q-card flat square>
     <div class="area-cover q-mb-sm relative-position">
-      <q-img src="https://via.placeholder.com/500" class="content-width bg-grey-2" height="230px" no-spinner />
+      <q-img
+        :src="getUrl(data.dir_root_url) + '/poster.jpg'"
+        class="content-width bg-grey-2"
+        no-spinner
+        style="width: 160px; height: 200px"
+        fit="cover"
+      />
     </div>
     <div class="content-width text-ellipsis-line-2" :title="data.name">{{ data.name }}</div>
     <div class="row items-center">
@@ -28,6 +34,7 @@
 <script setup>
 import { computed } from 'vue';
 import DialogTVDetail from 'pages/library/tvs/DialogTVDetail';
+import config from 'src/config';
 
 const props = defineProps({
   data: Object,
@@ -36,6 +43,8 @@ const props = defineProps({
 const hasSubtitleVideoCount = computed(
   () => props.data.one_video_info.filter((e) => e.sub_f_path_list.length > 0).length
 );
+
+const getUrl = (path) => config.BACKEND_STATIC_URL + path.split(/\/|\\/).join('/');
 </script>
 
 <style lang="scss" scoped>