Add fallback mode config

src_assets/common/assets/web/config.html

@@ -343,6 +343,11 @@
       serialize() {
         this.config.global_prep_cmd = JSON.stringify(this.global_prep_cmd.filter(cmd => cmd.do || cmd.undo));
         this.config.server_cmd = JSON.stringify(this.server_cmd.filter(cmd => cmd.name && cmd.cmd));
+
+        // Validate fallback mode
+        if (this.config.fallback_mode && !this.config.fallback_mode.match(/^\d+x\d+x\d+$/)) {
+          this.config.fallback_mode = "1920x1080x60";
+        }
       },
       save() {
         this.saved = false;

src_assets/common/assets/web/configs/tabs/AudioVideo.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {ref, computed} from 'vue'
+import {ref, computed, inject} from 'vue'
 import {$tp} from '../../platform-i18n'
 import PlatformLayout from '../../PlatformLayout.vue'
 import AdapterNameSelector from './audiovideo/AdapterNameSelector.vue'
@@ -8,6 +8,8 @@ import NewDisplayOutputSelector from './audiovideo/NewDisplayOutputSelector.vue'
 import DisplayDeviceOptions from "./audiovideo/DisplayDeviceOptions.vue";
 import DisplayModesSettings from "./audiovideo/DisplayModesSettings.vue";
 
+const $t = inject('i18n').t;
+
 const props = defineProps([
   'platform',
   'config',
@@ -26,6 +28,17 @@ const sudovdaStatus = {
 const currentDriverStatus = computed(() => sudovdaStatus[props.vdisplay])
 
 const config = ref(props.config)
+
+const validateFallbackMode = (event) => {
+  const value = event.target.value;
+  if (!value.match(/^\d+x\d+x\d+$/)) {
+    event.target.setCustomValidity($t('config.fallback_mode_error'));
+  } else {
+    event.target.setCustomValidity('');
+  }
+
+  event.target.reportValidity();
+}
 </script>
 
 <template>
@@ -102,6 +115,20 @@ const config = ref(props.config)
         :min_fps_factor="min_fps_factor"
     />
 
+    <!-- Fallback Display Mode -->
+    <div class="mb-3">
+      <label for="fallback_mode" class="form-label">{{ $t('config.fallback_mode') }}</label>
+      <input 
+        type="text" 
+        class="form-control" 
+        id="fallback_mode" 
+        v-model="config.fallback_mode" 
+        placeholder="1920x1080x60"
+        @input="validateFallbackMode"
+      />
+      <div class="form-text">{{ $t('config.fallback_mode_desc') }}</div>
+    </div>
+
     <div class="mb-3 form-check" v-if="platform === 'windows'">
       <input type="checkbox" class="form-check-input" id="follow_client_hdr" v-model="config.follow_client_hdr" true-value="enabled" false-value="disabled"/>
       <label for="follow_client_hdr" class="form-check-label">{{ $t('config.follow_client_hdr') }}</label>

src_assets/common/assets/web/public/assets/locale/en.json

@@ -181,6 +181,9 @@
     "encoder_software": "Software",
     "external_ip": "External IP",
     "external_ip_desc": "If no external IP address is given, Apollo will automatically detect external IP",
+    "fallback_mode": "Fallback Display Mode",
+    "fallback_mode_desc": "Apollo will use this mode when the client does not provide a mode or when the app is launched through the web UI. Format: [Width]x[Height]x[FPS]",
+    "fallback_mode_error": "Invalid fallback mode. Format: [Width]x[Height]x[FPS]",
     "fec_percentage": "FEC Percentage",
     "fec_percentage_desc": "Percentage of error correcting packets per data packet in each video frame. Higher values can correct for more network packet loss, but at the cost of increasing bandwidth usage.",
     "ffmpeg_auto": "auto -- let ffmpeg decide (default)",

src_assets/common/assets/web/public/assets/locale/zh.json

@@ -179,6 +179,9 @@
     "encoder_software": "软件",
     "external_ip": "外部 IP",
     "external_ip_desc": "如果没有指定外部 IP 地址，Apollo 将自动检测外部 IP",
+    "fallback_mode": "备用显示参数",
+    "fallback_mode_desc": "当客户端未提供显示参数或通过 Web UI 启动应用时使用。格式：[宽度]x[高度]x[帧率]",
+    "fallback_mode_error": "无效的备用显示参数。格式：[宽度]x[高度]x[帧率]",
     "fec_percentage": "FEC (前向纠错) 参数",
     "fec_percentage_desc": "每个视频帧中的错误纠正数据包百分比。较高的值可纠正更多的网络数据包丢失，但代价是增加带宽使用量。",
     "ffmpeg_auto": "auto -- 由 ffmpeg 决定（默认）",