From 681f2892b8d75926e6e82a5009063daf51a4c3a0 Mon Sep 17 00:00:00 2001
From: Thomas Mello <work.mello@gmail.com>
Date: Wed, 17 Sep 2025 02:55:18 +0300
Subject: [PATCH] feat(gui): quick access settings

---
 .../src/components/ClipperHeader.vue          | 69 ++++++++++++++++++-
 1 file changed, 68 insertions(+), 1 deletion(-)

diff --git a/src/gui-frontend/src/components/ClipperHeader.vue b/src/gui-frontend/src/components/ClipperHeader.vue
index 58ce7de..225edce 100644
--- a/src/gui-frontend/src/components/ClipperHeader.vue
+++ b/src/gui-frontend/src/components/ClipperHeader.vue
@@ -9,6 +9,30 @@
           Settings
         </el-button>
       </el-button-group>
+      <div class="quick-settings">
+        <el-tooltip placement="bottom" effect="dark" content="Constant Rate Factor (0-51). Lower = higher quality/larger size. Empty = auto.">
+          <el-input
+            v-model="crfInput"
+            placeholder="CRF"
+            size="small"
+            style="width:70px"
+            @change="onCrfChange"
+            @blur="onCrfBlur"
+            clearable
+          />
+        </el-tooltip>
+        <el-tooltip placement="bottom" effect="dark" content="Target Frames Per Second (1-300). Empty = keep source.">
+          <el-input
+            v-model="targetFpsInput"
+            placeholder="FPS"
+            size="small"
+            style="width:70px"
+            @change="onTargetFpsChange"
+            @blur="onTargetFpsBlur"
+            clearable
+          />
+        </el-tooltip>
+      </div>
     </div>
 
     <QuickDownload @video-selected="$emit('video-selected', $event)" />
@@ -26,12 +50,14 @@
 </template>
 
 <script setup lang="ts">
-import { ElButtonGroup, ElButton, ElTag } from 'element-plus'
+import { ElButtonGroup, ElButton, ElTag, ElInput, ElTooltip } from 'element-plus'
 import { Coin, Setting } from '@element-plus/icons-vue'
 import QuickDownload from './QuickDownload.vue'
 import type { EngineStatus } from '@/types/api'
 import type { CachedVideo } from '@/types/cache'
 import { ENGINE_STATUS } from '@/constants'
+import { useSettingsStore } from '@/stores/settings'
+import { ref, watch } from 'vue'
 
 interface Props {
   engineStatus: EngineStatus | null
@@ -46,6 +72,41 @@ interface Emits {
 const props = defineProps<Props>()
 defineEmits<Emits>()
 
+// Settings store for quick updates
+const settingsStore = useSettingsStore()
+const crfInput = ref<string>('')
+const targetFpsInput = ref<string>('')
+
+function syncFromStore() {
+  const gs = settingsStore.generalSettings
+  crfInput.value = gs?.crf !== undefined && gs.crf !== null ? String(gs.crf) : ''
+  targetFpsInput.value = gs?.target_fps !== undefined && gs.target_fps !== null ? String(gs.target_fps) : ''
+}
+watch(() => settingsStore.generalSettings, syncFromStore, { deep: true })
+syncFromStore()
+
+async function commitSetting(key: 'crf' | 'target_fps', raw: string) {
+  if (!settingsStore.generalSettings) return
+  const trimmed = raw.trim()
+  if (trimmed === '') {
+    await settingsStore.updateGeneralSettings({ [key]: null })
+    return
+  }
+  const num = Number(trimmed)
+  if (Number.isNaN(num)) return // ignore invalid
+  if (key === 'crf') {
+    if (num < 0 || num > 51) return
+  } else if (key === 'target_fps') {
+    if (num < 1 || num > 300) return
+  }
+  await settingsStore.updateGeneralSettings({ [key]: num })
+}
+
+function onCrfChange(val: string) { crfInput.value = val }
+function onCrfBlur() { commitSetting('crf', crfInput.value) }
+function onTargetFpsChange(val: string) { targetFpsInput.value = val }
+function onTargetFpsBlur() { commitSetting('target_fps', targetFpsInput.value) }
+
 // Status helpers
 function getStatusType() {
   if (!props.engineStatus) return 'info'
@@ -75,4 +136,10 @@ function getStatusMessage() {
   display: flex;
   align-items: center;
 }
+.quick-settings {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: 12px;
+}
 </style>