WebUI: implement per-device display mode override

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

@@ -31,7 +31,7 @@ const config = ref(props.config)
 
 const validateFallbackMode = (event) => {
   const value = event.target.value;
-  if (!value.match(/^\d+x\d+x\d+$/)) {
+  if (!value.match(/^\d+x\d+x\d+(\.\d+)?$/)) {
     event.target.setCustomValidity($t('config.fallback_mode_error'));
   } else {
     event.target.setCustomValidity('');

src_assets/common/assets/web/pin.html

@@ -105,10 +105,24 @@
               </div>
             </div>
 
+            <!-- Display Mode Override -->
+            <div class="mb-3 mt-2">
+              <label for="display_mode_override" class="form-label">{{ $t('pin.display_mode_override') }}</label>
+              <input
+                type="text"
+                class="form-control"
+                id="display_mode_override"
+                v-model="client.editDisplayMode"
+                placeholder="1920x1080x59.94"
+                @input="validateModeOverride"
+              />
+              <div class="form-text">{{ $t('pin.display_mode_override_desc') }} <a href="https://github.com/ClassicOldSong/Apollo/wiki/Display-Mode-Override" target="_blank">{{ $t('_common.learn_more') }}</a></div>
+            </div>
+
             <!-- connect/disconnect commands -->
             <div class="mb-3 mt-2 d-flex flex-column" v-for="cmdType in ['do', 'undo']">
-              <label class="mb-0 orm-label">{{ $t(`config.client_${cmdType}_cmd`) }}</label>
+              <label class="mb-0 orm-label">{{ $t(`pin.client_${cmdType}_cmd`) }}</label>
-              <div class="form-text">{{ $t(`config.client_${cmdType}_cmd_desc`) }} <a href="https://github.com/ClassicOldSong/Apollo/wiki/Client-Commands" target="_blank">{{ $t('_common.learn_more') }}</a></div>
+              <div class="form-text">{{ $t(`pin.client_${cmdType}_cmd_desc`) }} <a href="https://github.com/ClassicOldSong/Apollo/wiki/Client-Commands" target="_blank">{{ $t('_common.learn_more') }}</a></div>
               <table class="mt-2 table" v-if="client[`edit_${cmdType}`].length > 0">
                 <thead>
                   <tr>
@@ -479,6 +493,7 @@
         client.editing = true;
         client.editPerm = client.perm;
         client.editName = client.name;
+        client.editDisplayMode = client.display_mode;
         client.edit_do = JSON.parse(JSON.stringify(client.do || []));
         client.edit_undo = JSON.parse(JSON.stringify(client.undo || []));
 
@@ -488,6 +503,7 @@
         client.editing = false;
         client.editPerm = client.perm;
         client.editName = client.name;
+        client.editDisplayMode = client.display_mode;
         currentEditingClient = null;
       },
       saveClient(client) {
@@ -496,6 +512,7 @@
         const editedClient = {
           uuid: client.uuid,
           name: client.editName,
+          display_mode: client.editDisplayMode.trim(),
           perm: client.editPerm & permissionMapping._all,
           do: client.edit_do.reduce((filtered, {cmd: _cmd, elevated}) => {
             const cmd = _cmd.trim()
@@ -553,6 +570,16 @@
       togglePermission(client, permission) {
         client.editPerm ^= permissionMapping[permission];
       },
+      validateModeOverride(event) {
+        const value = event.target.value.trim();
+        if (value && !value.match(/^\d+x\d+x\d+(\.\d+)?$/)) {
+          event.target.setCustomValidity(this.i18n.t('pin.display_mode_override_error'));
+        } else {
+          event.target.setCustomValidity('');
+        }
+
+        event.target.reportValidity();
+      },
       disconnectClient(uuid) {
         fetch("./api/clients/disconnect", {
           credentials: 'include',
@@ -599,11 +626,12 @@
           .then((response) => {
             if (response.status && response.named_certs && response.named_certs.length) {
               this.platform = response.platform
-              this.clients = response.named_certs.map(({name, uuid, perm, connected, do: _do, undo}) => {
+              this.clients = response.named_certs.map(({name, uuid, display_mode, perm, connected, do: _do, undo}) => {
                 const permInt = parseInt(perm, 10);
                 return {
                   name,
                   uuid,
+                  display_mode,
                   perm: permInt,
                   connected,
                   editing: false,

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

@@ -177,10 +177,6 @@
     "channels": "Maximum Connected Clients",
     "channels_desc_1": "Apollo can allow a single streaming session to be shared with multiple clients simultaneously.",
     "channels_desc_2": "Some hardware encoders may have limitations that reduce performance with multiple streams.",
-    "client_do_cmd": "Client connect commands",
-    "client_do_cmd_desc": "Commands to be executed when client connects. All of the commands are executed detached.",
-    "client_undo_cmd": "Client disconnect commands",
-    "client_undo_cmd_desc": "Commands to be executed when client disconnects. All of the commands are executed detached.",
     "coder_cabac": "cabac -- context adaptive binary arithmetic coding - higher quality",
     "coder_cavlc": "cavlc -- context adaptive variable-length coding - faster decode",
     "configuration": "Configuration",
@@ -480,7 +476,14 @@
     "launch": "Launch Apps"
   },
   "pin": {
+    "client_do_cmd": "Client connect commands",
+    "client_do_cmd_desc": "Commands to be executed when client connects. All of the commands are executed detached.",
+    "client_undo_cmd": "Client disconnect commands",
+    "client_undo_cmd_desc": "Commands to be executed when client disconnects. All of the commands are executed detached.",
     "device_name": "Optional: Device Name",
+    "display_mode_override": "Display Mode Override",
+    "display_mode_override_desc": "Apollo will ignore client requested display mode and use this value to configure (virtual) displays. Leave blank for auto matching. Format: [Width]x[Height]x[FPS]",
+    "display_mode_override_error": "Invalid mode override. Format: [Width]x[Height]x[FPS]",
     "pair_failure": "Pairing Failed: Check if the PIN is typed correctly",
     "pair_success": "Success! Please check Moonlight to continue",
     "pair_success_check_perm": "Pair success! Please grant necessary permissions to the client manually below.",

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

@@ -174,10 +174,6 @@
     "channels": "最多同时连接客户端数",
     "channels_desc_1": "Apollo 允许多个客户端同时共享一个串流会话。",
     "channels_desc_2": "某些硬件编码器可能存在限制，在编码多条流时会降低性能。",
-    "client_do_cmd": "客户端连入命令",
-    "client_do_cmd_desc": "当此客户端连接时执行的命令。所有命令都以后台模式允许。",
-    "client_undo_cmd": "客户端断开命令",
-    "client_undo_cmd_desc": "当此客户端断开连接时执行的命令。所有命令都以后台模式允许。",
     "coder_cabac": "cabac -- 上下文自适应二进制算术编码- 较高质量",
     "coder_cavlc": "cavlc -- 上下文适应变量编码 - 更快解码",
     "configuration": "配置",
@@ -474,7 +470,14 @@
     "launch": "启动APP"
   },
   "pin": {
+    "client_do_cmd": "客户端连入命令",
+    "client_do_cmd_desc": "当此客户端连接时执行的命令。所有命令都以后台模式允许。",
+    "client_undo_cmd": "客户端断开命令",
+    "client_undo_cmd_desc": "当此客户端断开连接时执行的命令。所有命令都以后台模式允许。",
     "device_name": "设备名称",
+    "display_mode_override": "显示模式覆盖",
+    "display_mode_override_desc": "Apollo 将无视客户端请求的显示参数而使用此参数来配置（虚拟）显示器。留空则自动匹配。格式: [Width]x[Height]x[FPS]",
+    "display_mode_override_error": "无效的显示模式。格式: [Width]x[Height]x[FPS]",
     "pair_failure": "配对失败：请检查 PIN 码是否正确输入",
     "pair_success": "成功！请检查 Moonlight 以继续",
     "pair_success_check_perm": "配对成功！请在下方手动授予客户端必要的权限。",