feat: support ffmpeg param templates (#95)

TensoRaws · Dec 16, 2024 · 6519447 · 6519447
1 parent 9ffacdb
commit 6519447
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 16 deletions.
diff --git a/src/api/github.ts b/src/api/github.ts
@@ -3,6 +3,7 @@ import type { SelectOption } from 'naive-ui'
 export async function getGitHubTemplates(
   repo: string,
   token: string = '',
+  extension: string = 'py',
 ): Promise<SelectOption[]> {
   const templateList: SelectOption[] = []
   const url = `https://api.github.com/repos/${repo}/contents/templates`
@@ -15,10 +16,12 @@ export async function getGitHubTemplates(
   const data = await response.json()
 
   data.forEach((item: any) => {
-    templateList.push({
-      label: item.name,
-      value: item.download_url,
-    })
+    if (item.name.split('.').pop() === extension) {
+      templateList.push({
+        label: item.name,
+        value: item.download_url,
+      })
+    }
   })
 
   return templateList

diff --git a/src/store/setting.ts b/src/store/setting.ts
@@ -19,7 +19,8 @@ export const useSettingStore = defineStore(
     const apiToken = ref('114514')
 
     // templates
-    const templates: Ref<SelectOption[]> = ref([])
+    const vsScriptTemplates: Ref<SelectOption[]> = ref([])
+    const ffmpegParamTemplates: Ref<SelectOption[]> = ref([])
     const templateRepo = ref('TensoRaws/vs-playground')
     const githubToken = ref('')
 
@@ -50,7 +51,8 @@ export const useSettingStore = defineStore(
       collapsed,
       apiURL,
       apiToken,
-      templates,
+      vsScriptTemplates,
+      ffmpegParamTemplates,
       templateRepo,
       githubToken,
       script,
@@ -71,7 +73,8 @@ export const useSettingStore = defineStore(
         'collapsed',
         'apiURL',
         'apiToken',
-        'templates',
+        'vsScriptTemplates',
+        'ffmpegParamTemplates',
         'templateRepo',
         'githubToken',
         'script',

diff --git a/src/views/Code.vue b/src/views/Code.vue
@@ -9,7 +9,8 @@ import { shallowRef } from 'vue'
 import { getGitHubTemplateContent } from '@/api/github'
 import { useSettingStore } from '@/store/setting'
 
-const { darkMode, systemDarkMode, script, encodeParam, templates } = storeToRefs(useSettingStore())
+const { darkMode, systemDarkMode, script, encodeParam, vsScriptTemplates, ffmpegParamTemplates } =
+  storeToRefs(useSettingStore())
 
 const notification = useNotification()
 
@@ -33,7 +34,7 @@ function handleMount(editorInstance: any): any {
   editor.value = editorInstance
 }
 
-function handleUpdateTemplate(value: string, option: SelectOption): void {
+function handleUpdateVSScriptTemplate(value: string, option: SelectOption): void {
   console.log('fetching template content: ' + value)
   getGitHubTemplateContent(option)
     .then((res) => {
@@ -42,18 +43,48 @@ function handleUpdateTemplate(value: string, option: SelectOption): void {
     .catch((err) => {
       console.error(err)
       notification['error']({
-        title: 'Failed to get template content',
+        title: 'Failed to get vs script template content',
         content: String(err),
       })
     })
 }
+
+function handleUpdateFFmpegParamTemplate(value: string, option: SelectOption): void {
+  console.log('fetching template content: ' + value)
+  getGitHubTemplateContent(option)
+    .then((res) => {
+      encodeParam.value = res
+    })
+    .catch((err) => {
+      console.error(err)
+      notification['error']({
+        title: 'Failed to get ffmpeg encode param template content',
+        content: String(err),
+      })
+    })
+}
+
+function handleEncodeParamChange(value: string): void {
+  console.log('encode param changed: ' + value)
+  // 如果输入的字符串里面包含了换行符，提醒用户
+  if (value.includes('\n') || value.includes('\r') || value.includes('\r\n')) {
+    notification['error']({
+      title: 'Encode param contains line breaks!!!!!',
+      content: 'Please remove line breaks',
+    })
+  }
+}
 </script>
 
 <template>
   <NSpace vertical>
     <NSpace justify="space-between">
       <NGradientText size="18" type="primary"> Code </NGradientText>
-      <NSelect :options="templates" style="width: 50vh" @update:value="handleUpdateTemplate" />
+      <NSelect
+        :options="vsScriptTemplates"
+        style="width: 50vh"
+        @update:value="handleUpdateVSScriptTemplate"
+      />
     </NSpace>
     <NCard hoverable size="small" style="width: 100%; height: 65vh">
       <VueMonacoEditor
@@ -65,8 +96,21 @@ function handleUpdateTemplate(value: string, option: SelectOption): void {
         @mount="handleMount"
       />
     </NCard>
-    <NCard hoverable title="Encode Param" size="small" style="width: 100%">
-      <NInput v-model:value="encodeParam" type="textarea" placeholder="Encode Param" />
+    <NSpace justify="space-between">
+      <NGradientText size="18" type="primary"> Encode Param </NGradientText>
+      <NSelect
+        :options="ffmpegParamTemplates"
+        style="width: 50vh"
+        @update:value="handleUpdateFFmpegParamTemplate"
+      />
+    </NSpace>
+    <NCard hoverable size="small" style="width: 100%">
+      <NInput
+        v-model:value="encodeParam"
+        type="textarea"
+        placeholder="Encode Param"
+        @change="handleEncodeParamChange"
+      />
     </NCard>
   </NSpace>
 </template>

diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
@@ -8,7 +8,8 @@ import router from '@/router'
 import { useSettingStore } from '@/store/setting'
 import List from '@/views/List.vue'
 
-const { templateRepo, templates, githubToken } = storeToRefs(useSettingStore())
+const { templateRepo, vsScriptTemplates, ffmpegParamTemplates, githubToken } =
+  storeToRefs(useSettingStore())
 
 const notification = useNotification()
 
@@ -33,9 +34,19 @@ onMounted(() => {
       })
     })
 
-  getGitHubTemplates(templateRepo.value, githubToken.value)
+  getGitHubTemplates(templateRepo.value, githubToken.value, 'py')
     .then((res) => {
-      templates.value = res
+      console.log(res)
+      vsScriptTemplates.value = res
+    })
+    .catch((error) => {
+      console.log(error)
+    })
+
+  getGitHubTemplates(templateRepo.value, githubToken.value, 'txt')
+    .then((res) => {
+      console.log(res)
+      ffmpegParamTemplates.value = res
     })
     .catch((error) => {
       console.log(error)