feat: 支持在修改下载内容时选择画质和音质

src/panes/DownloadPane/components/ModifyProgressDialogContent.vue

@@ -1,7 +1,21 @@
 <script setup lang="ts">
-import { DeepReadonly, ref } from 'vue'
+import { computed, DeepReadonly, onMounted, ref } from 'vue'
-import { commands } from '../../../bindings'
+import {
+  AvailableMediaFormats,
+  CodecType,
+  commands,
+  GetAvailableMediaFormatsParams,
+  VideoQuality,
+  AudioQuality,
+} from '../../../bindings'
 import { ProgressData } from '../DownloadPane.vue'
+import { SelectOption } from 'naive-ui'
+
+type VideoFormatOption = SelectOption & {
+  videoQuality: VideoQuality
+  codecType: CodecType
+}
+type AudioFormatOption = SelectOption & { value: AudioQuality }
 
 const props = defineProps<{
   p: DeepReadonly<ProgressData>
@@ -9,6 +23,83 @@ const props = defineProps<{
 }>()
 
 const progressData = ref<ProgressData>(JSON.parse(JSON.stringify(props.p)))
+const availableMediaFormats = ref<AvailableMediaFormats>()
+
+const videoFormatOptions = computed<VideoFormatOption[]>(() => {
+  const priorityOption: VideoFormatOption = {
+    label: '根据优先级自动选择',
+    value: toVideoFormatSelectValue('Unknown', 'Unknown'),
+    videoQuality: 'Unknown',
+    codecType: 'Unknown',
+  }
+
+  if (availableMediaFormats.value === undefined) {
+    return [priorityOption]
+  }
+
+  const videoQualitiesAndCodecTypes = availableMediaFormats.value.video_qualities_and_codec_types
+
+  const options: VideoFormatOption[] = videoQualitiesAndCodecTypes.map((videoQualityAndCodecType) => {
+    const videoQuality = videoQualityAndCodecType.video_quality
+    const codecType = videoQualityAndCodecType.codec_type
+    return {
+      label: `画质:${videoQuality}  编码:${codecType}`,
+      value: toVideoFormatSelectValue(videoQuality, codecType),
+      videoQuality: videoQuality,
+      codecType: codecType,
+    }
+  })
+
+  return [priorityOption, ...options]
+})
+
+const audioFormatOptions = computed<AudioFormatOption[]>(() => {
+  const priorityOption: AudioFormatOption = {
+    label: '根据优先级自动选择',
+    value: 'Unknown',
+  }
+
+  if (availableMediaFormats.value === undefined) {
+    return [priorityOption]
+  }
+
+  const options: AudioFormatOption[] = availableMediaFormats.value.audio_qualities.map((quality) => {
+    return { label: quality, value: quality }
+  })
+
+  return [priorityOption, ...options]
+})
+
+onMounted(async () => {
+  const { episode_type, bvid, cid, ep_id } = progressData.value
+
+  let params: GetAvailableMediaFormatsParams | undefined
+  if (episode_type === 'Normal') {
+    if (bvid === null) {
+      return
+    }
+    params = { Normal: { bvid, cid } }
+  } else if (episode_type === 'Bangumi') {
+    params = { Bangumi: { cid } }
+  } else if (episode_type === 'Cheese') {
+    if (ep_id === null) {
+      return
+    }
+    params = { Cheese: { ep_id } }
+  }
+
+  if (params === undefined) {
+    return
+  }
+
+  const result = await commands.getAvailableMediaFormats(params)
+  if (result.status === 'error') {
+    console.error(result.error)
+    return
+  }
+
+  availableMediaFormats.value = result.data
+})
 
 async function restartDownloadTask() {
   await commands.restartDownloadTask({
@@ -34,6 +125,15 @@ async function restartDownloadTask() {
 
   props.destroyDialog()
 }
+
+function handleVideoFormatSelectUpdate(_value: string, option: VideoFormatOption) {
+  progressData.value.video_task.video_quality = option.videoQuality
+  progressData.value.video_task.codec_type = option.codecType
+}
+
+function toVideoFormatSelectValue(videoQuality: VideoQuality, codecType: CodecType) {
+  return `${videoQuality} ${codecType}`
+}
 </script>
 
 <template>
@@ -98,6 +198,38 @@ async function restartDownloadTask() {
       <n-checkbox class="w-22" v-model:checked="progressData.json_task.selected">json刮削</n-checkbox>
     </div>
 
+    <div class="flex gap-2 justify-between">
+      <div class="flex flex-col w-full">
+        <span class="font-bold">画质</span>
+        <n-select
+          :consistent-menu-width="false"
+          size="small"
+          menu-size="small"
+          :theme-overrides="{
+            peers: {
+              InternalSelectMenu: {
+                height: '175px',
+              },
+            },
+          }"
+          :default-value="
+            toVideoFormatSelectValue(progressData.video_task.video_quality, progressData.video_task.codec_type)
+          "
+          :options="videoFormatOptions"
+          @update:value="handleVideoFormatSelectUpdate" />
+      </div>
+
+      <div class="flex flex-col w-full">
+        <span class="font-bold">音质</span>
+        <n-select
+          :consistent-menu-width="false"
+          size="small"
+          menu-size="small"
+          v-model:value="progressData.audio_task.audio_quality"
+          :options="audioFormatOptions" />
+      </div>
+    </div>
+
     <n-button class="mt-2" type="primary" @click="restartDownloadTask">修改完毕，按照这个配置重新开始下载吧</n-button>
   </div>
 </template>