feat(display): add display mode remapping option (#3529)

Co-authored-by: ReenigneArcher <42013603+ReenigneArcher@users.noreply.github.com>

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

@@ -11,7 +11,6 @@ import Checkbox from "../../Checkbox.vue";
 const props = defineProps([
   'platform',
   'config',
-  'min_fps_factor',
 ])
 
 const config = ref(props.config)
@@ -95,7 +94,6 @@ const config = ref(props.config)
     <DisplayModesSettings
         :platform="platform"
         :config="config"
-        :min_fps_factor="min_fps_factor"
     />
 
   </div>

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

@@ -4,12 +4,9 @@ import { ref } from 'vue'
 
 const props = defineProps({
   platform: String,
-  config: Object,
-  globalPrepCmd: Array
+  config: Object
 })
-
 const config = ref(props.config)
-const globalPrepCmd = ref(props.globalPrepCmd)
 
 function addCmd() {
   let template = {
@@ -20,11 +17,11 @@ function addCmd() {
   if (props.platform === 'windows') {
     template = { ...template, elevated: false };
   }
-  globalPrepCmd.value.push(template);
+  config.value.global_prep_cmd.push(template);
 }
 
 function removeCmd(index) {
-  globalPrepCmd.value.splice(index,1)
+  config.value.global_prep_cmd.splice(index,1)
 }
 </script>
 
@@ -83,7 +80,7 @@ function removeCmd(index) {
     <div id="global_prep_cmd" class="mb-3 d-flex flex-column">
       <label class="form-label">{{ $t('config.global_prep_cmd') }}</label>
       <div class="form-text">{{ $t('config.global_prep_cmd_desc') }}</div>
-      <table class="table" v-if="globalPrepCmd.length > 0">
+      <table class="table" v-if="config.global_prep_cmd.length > 0">
         <thead>
         <tr>
           <th scope="col"><i class="fas fa-play"></i> {{ $t('_common.do_cmd') }}</th>
@@ -95,7 +92,7 @@ function removeCmd(index) {
         </tr>
         </thead>
         <tbody>
-        <tr v-for="(c, i) in globalPrepCmd">
+        <tr v-for="(c, i) in config.global_prep_cmd">
           <td>
             <input type="text" class="form-control monospace" v-model="c.do" />
           </td>

src_assets/common/assets/web/configs/tabs/audiovideo/DisplayDeviceOptions.vue

@@ -7,8 +7,44 @@ const props = defineProps({
   platform: String,
   config: Object
 })
-
 const config = ref(props.config)
+
+const REFRESH_RATE_ONLY = "refresh_rate_only"
+const RESOLUTION_ONLY = "resolution_only"
+const MIXED = "mixed"
+
+function canBeRemapped() {
+  return (config.value.dd_resolution_option === "auto" || config.value.dd_refresh_rate_option === "auto")
+    && config.value.dd_configuration_option !== "disabled";
+}
+
+function getRemappingType() {
+  // Assuming here that at least one setting is set to "auto" if other is not
+  if (config.value.dd_resolution_option !== "auto") {
+    return REFRESH_RATE_ONLY;
+  }
+  if (config.value.dd_refresh_rate_option !== "auto") {
+    return RESOLUTION_ONLY;
+  }
+  return MIXED;
+}
+
+function addRemappingEntry() {
+  const type = getRemappingType();
+  let template = {};
+
+  if (type !== RESOLUTION_ONLY) {
+    template["requested_fps"] = "";
+    template["final_refresh_rate"] = "";
+  }
+
+  if (type !== REFRESH_RATE_ONLY) {
+    template["requested_resolution"] = "";
+    template["final_resolution"] = "";
+  }
+
+  config.value.dd_mode_remapping[type].push(template);
+}
 </script>
 
 <template>
@@ -114,6 +150,76 @@ const config = ref(props.config)
                   {{ $t('config.dd_config_revert_delay_desc') }}
                 </div>
               </div>
+
+              <!-- Display mode remapping -->
+              <div class="mb-3" v-if="canBeRemapped()">
+                <label for="dd_mode_remapping" class="form-label">
+                  {{ $t('config.dd_mode_remapping') }}
+                </label>
+                <div id="dd_mode_remapping" class="d-flex flex-column">
+                  <div class="form-text">
+                    {{ $t('config.dd_mode_remapping_desc_1') }}<br>
+                    {{ $t('config.dd_mode_remapping_desc_2') }}<br>
+                    {{ $t('config.dd_mode_remapping_desc_3') }}<br>
+                    {{ $t(getRemappingType() === MIXED ? 'config.dd_mode_remapping_desc_4_final_values_mixed' : 'config.dd_mode_remapping_desc_4_final_values_non_mixed') }}<br>
+                    <template v-if="getRemappingType() === MIXED">
+                      {{ $t('config.dd_mode_remapping_desc_5_sops_mixed_only') }}<br>
+                    </template>
+                    <template v-if="getRemappingType() === RESOLUTION_ONLY">
+                      {{ $t('config.dd_mode_remapping_desc_5_sops_resolution_only') }}<br>
+                    </template>
+                  </div>
+                </div>
+
+                <table class="table" v-if="config.dd_mode_remapping[getRemappingType()].length > 0">
+                  <thead>
+                    <tr>
+                      <th scope="col" v-if="getRemappingType() !== REFRESH_RATE_ONLY">
+                        {{ $t('config.dd_mode_remapping_requested_resolution') }}
+                      </th>
+                      <th scope="col" v-if="getRemappingType() !== RESOLUTION_ONLY">
+                        {{ $t('config.dd_mode_remapping_requested_fps') }}
+                      </th>
+                      <th scope="col" v-if="getRemappingType() !== REFRESH_RATE_ONLY">
+                        {{ $t('config.dd_mode_remapping_final_resolution') }}
+                      </th>
+                      <th scope="col" v-if="getRemappingType() !== RESOLUTION_ONLY">
+                        {{ $t('config.dd_mode_remapping_final_refresh_rate') }}
+                      </th>
+                      <!-- Additional columns for buttons-->
+                      <th scope="col"></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr v-for="(value, idx) in config.dd_mode_remapping[getRemappingType()]">
+                      <td v-if="getRemappingType() !== REFRESH_RATE_ONLY">
+                        <input type="text" class="form-control monospace" v-model="value.requested_resolution"
+                               :placeholder="'1920x1080'" />
+                      </td>
+                      <td v-if="getRemappingType() !== RESOLUTION_ONLY">
+                        <input type="text" class="form-control monospace" v-model="value.requested_fps"
+                               :placeholder="'60'" />
+                      </td>
+                      <td v-if="getRemappingType() !== REFRESH_RATE_ONLY">
+                        <input type="text" class="form-control monospace" v-model="value.final_resolution"
+                               :placeholder="'2560x1440'" />
+                      </td>
+                      <td v-if="getRemappingType() !== RESOLUTION_ONLY">
+                        <input type="text" class="form-control monospace" v-model="value.final_refresh_rate"
+                               :placeholder="'119.95'" />
+                      </td>
+                      <td>
+                        <button class="btn btn-danger" @click="config.dd_mode_remapping[getRemappingType()].splice(idx, 1)">
+                          <i class="fas fa-trash"></i>
+                        </button>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+                <button class="ms-0 mt-2 btn btn-success" style="margin: 0 auto" @click="addRemappingEntry()">
+                  &plus; {{ $t('config.dd_mode_remapping_add') }}
+                </button>
+              </div>
             </div>
           </div>
         </div>

src_assets/common/assets/web/configs/tabs/audiovideo/DisplayModesSettings.vue

@@ -6,13 +6,8 @@ import PlatformLayout from '../../../PlatformLayout.vue'
 const props = defineProps([
   'platform',
   'config',
-  'min_fps_factor',
 ])
-
 const config = ref(props.config)
-
-const resIn = ref("")
-const fpsIn = ref("")
 </script>
 
 <template>