From 35cf375013d4851f899814590fa2f460eb454fbf Mon Sep 17 00:00:00 2001
From: Vithorio Polten <reach@vithor.io>
Date: Thu, 2 May 2024 15:16:23 -0300
Subject: [PATCH] new display selector, working for macOS only

Missing Windows and Linux implementations, but achieved an OK PoC for macOS, time to clean and do the basics for Windows
---
 .../assets/web/configs/tabs/AudioVideo.vue    |  4 +-
 .../LegacyDisplayOutputSelector.vue           |  4 +-
 .../audiovideo/NewDisplayOutputSelector.vue   | 52 +++++++++++--------
 3 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/src_assets/common/assets/web/configs/tabs/AudioVideo.vue b/src_assets/common/assets/web/configs/tabs/AudioVideo.vue
index fb11d339f74..4b0573f8638 100644
--- a/src_assets/common/assets/web/configs/tabs/AudioVideo.vue
+++ b/src_assets/common/assets/web/configs/tabs/AudioVideo.vue
@@ -1,5 +1,5 @@
 <script setup>
-import {ref} from 'vue'
+import {reactive, ref} from 'vue'
 import {$tp} from '../../platform-i18n'
 import PlatformLayout from '../../PlatformLayout.vue'
 import AdapterNameSelector from './audiovideo/AdapterNameSelector.vue'
@@ -16,7 +16,7 @@ const props = defineProps([
   'displays'
 ])
 
-const config = ref(props.config)
+const config = reactive(props.config)
 </script>
 
 <template>
diff --git a/src_assets/common/assets/web/configs/tabs/audiovideo/LegacyDisplayOutputSelector.vue b/src_assets/common/assets/web/configs/tabs/audiovideo/LegacyDisplayOutputSelector.vue
index d16c168d383..94921e168b3 100644
--- a/src_assets/common/assets/web/configs/tabs/audiovideo/LegacyDisplayOutputSelector.vue
+++ b/src_assets/common/assets/web/configs/tabs/audiovideo/LegacyDisplayOutputSelector.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue'
+import {reactive, ref} from 'vue'
 import { $tp } from '../../../platform-i18n'
 import PlatformLayout from '../../../PlatformLayout.vue'
 
@@ -8,7 +8,7 @@ const props = defineProps([
   'config'
 ])
 
-const config = ref(props.config)
+const config = reactive(props.config)
 const outputNamePlaceholder = (props.platform === 'windows') ? '\\.\DISPLAY1' : '0'
 </script>
 
diff --git a/src_assets/common/assets/web/configs/tabs/audiovideo/NewDisplayOutputSelector.vue b/src_assets/common/assets/web/configs/tabs/audiovideo/NewDisplayOutputSelector.vue
index 0b71f1d8922..b22a9fd933d 100644
--- a/src_assets/common/assets/web/configs/tabs/audiovideo/NewDisplayOutputSelector.vue
+++ b/src_assets/common/assets/web/configs/tabs/audiovideo/NewDisplayOutputSelector.vue
@@ -1,29 +1,33 @@
 <script setup>
-import {computed, ref} from 'vue'
+import { reactive, ref } from 'vue'
 import { $tp } from '../../../platform-i18n'
 import PlatformLayout from '../../../PlatformLayout.vue'
-import LegacyDisplayOutputSelector from "./LegacyDisplayOutputSelector.vue";
+import LegacyDisplayOutputSelector from './LegacyDisplayOutputSelector.vue'
 
-const props = defineProps([
-  'platform',
-  'config',
-  'displays'
-])
+const props = defineProps({
+  platform: String,
+  config: Object,
+  displays: Array
+})
 
-const config = ref(props.config)
-const outputNamePlaceholder = (props.platform === 'windows') ? '{de9bb7e2-186e-505b-9e93-f48793333810}' : '4531345'
+const config = reactive(props.config)
 
-const selectedDisplay = computed(() => getSelected(config.output_name))
+const selectedDisplay = ref(getDisplaySelected(props.config.output_name))
 
-function getSelected(id) {
-  for (const display of props.displays) {
-    if (display.id === id) {
-      return display
+function getDisplaySelected(id) {
+  if (!id || !props.displays) { return null }
+  for (let i = 0; i < props.displays.length; i++) {
+    if (props.displays[i].id === id) {
+      return props.displays[i]
     }
   }
   return null
 }
 
+function updatedSelected(id) {
+  selectedDisplay.value = getDisplaySelected(id)
+}
+
 function isPrimary(display) {
   const origin = display.current_settings.origin
   return origin.x === 0 && origin.y === 0;
@@ -43,31 +47,35 @@ function resolution(display) {
   />
 
   <div class="mb-3" v-if="displays">
-    <label for="output_name" class="form-label">{{ $tp('config.output_name') }}</label>
-    <select id="output_name" class="form-select" v-model="config.output_name">
+    <label for="output_name" class="form-label">{{ $tp('config.output_name', $t('config.output_name_linux')) }}</label>
+    <select id="output_name" class="form-select" v-model="config.output_name" v-on:change="updatedSelected(config.output_name)">
       <option value="">Default</option>
-      <option v-for="display in displays" :value="display.name">
-        {{ display.id }}: {{ display.name }} {{ resolution(display) }}<template v-if='isPrimary(display)'>, primary</template>
+      <option v-for="display in displays" :value="display.id">
+        {{ display.id }}: {{ display.friendly_name }} {{ resolution(display) }}<template v-if='isPrimary(display)'>, primary</template>
       </option>
     </select>
     <div class="form-text">
-      <p style="white-space: pre-line">{{ $tp('config.output_name_desc') }}</p>
       <PlatformLayout :platform="platform">
         <template #windows>
+          <p style="white-space: pre-line">{{ $tp('config.output_name_desc', $t('config.output_name_desc_linux')) }}</p>
           <b>&nbsp;&nbsp;&nbsp;&nbsp;DEVICE ID: {de9bb7e2-186e-505b-9e93-f48793333810}</b><br>
           <b>&nbsp;&nbsp;&nbsp;&nbsp;DISPLAY NAME: \\.\DISPLAY1</b><br>
           <b>&nbsp;&nbsp;&nbsp;&nbsp;FRIENDLY NAME: ROG PG279Q</b><br>
           <b>&nbsp;&nbsp;&nbsp;&nbsp;DEVICE STATE: PRIMARY</b><br>
           <b>&nbsp;&nbsp;&nbsp;&nbsp;HDR STATE: UNKNOWN</b>
         </template>
+
         <template #linux>
         </template>
+
         <template #macos>
-          <template v-if="selectedDisplay">
+          <div v-if="selectedDisplay">
             <b>&nbsp;&nbsp;&nbsp;&nbsp;DEVICE ID: {{ selectedDisplay.id }}</b><br>
             <b>&nbsp;&nbsp;&nbsp;&nbsp;FRIENDLY NAME: {{ selectedDisplay.friendly_name }}</b><br>
-            <b>&nbsp;&nbsp;&nbsp;&nbsp;DEVICE STATE: {{ isPrimary(selectedDisplay) }}</b><br>
-          </template>
+            <b>&nbsp;&nbsp;&nbsp;&nbsp;PRIMARY DEVICE: {{ isPrimary(selectedDisplay) }}</b><br>
+            <b>&nbsp;&nbsp;&nbsp;&nbsp;RAW DEVICE DATA:</b><br>
+            <b>&nbsp;&nbsp;&nbsp;&nbsp;{{ JSON.stringify(selectedDisplay) }}</b><br>
+          </div>
         </template>
       </PlatformLayout>
     </div>