From e3f1f21ce98ec8c17cc745068810e72a7ad74662 Mon Sep 17 00:00:00 2001
From: Tamius Han <tamius.han@gmail.com>
Date: Tue, 18 Mar 2025 18:58:31 +0100
Subject: [PATCH] Add basic confirm button.

---
 .../PlayerUiPanels/BaseExtensionSettings.vue  | 12 +--
 .../SiteExtensionSettings.vue                 | 11 +++
 src/csui/src/components/ConfirmButton.vue     | 83 +++++++++++++++++++
 3 files changed, 101 insertions(+), 5 deletions(-)
 create mode 100644 src/csui/src/components/ConfirmButton.vue

diff --git a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
index a7dc160..0a836f3 100644
--- a/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
+++ b/src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue
@@ -64,12 +64,12 @@
       <p>
         Pressing the button will reset settings to default without asking.
       </p>
-      <button
+      <ConfirmButton
         class="danger"
-        @click="resetSettings"
+        @onConfirmed="resetSettings"
       >
         Reset settings
-      </button>
+      </ConfirmButton>
     </div>
   </div>
 </template>
@@ -77,6 +77,7 @@
 <script>
 import SiteExtensionSettings from './PanelComponents/ExtensionSettings/SiteExtensionSettings.vue';
 import OtherSiteSettings from './PanelComponents/ExtensionSettings/OtherSiteSettings.vue';
+import ConfirmButton from '@csui/src/components/ConfirmButton';
 
 export default {
   data() {
@@ -93,8 +94,9 @@ export default {
   ],
   components: {
     SiteExtensionSettings,
-    OtherSiteSettings
-},
+    OtherSiteSettings,
+    ConfirmButton
+  },
   computed: {
     globalSettings() {
       return this.settings?.getSiteSettings('@global') ?? null;
diff --git a/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue b/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue
index 56aaf90..793fd33 100644
--- a/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue
+++ b/src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue
@@ -357,6 +357,7 @@ export default {
      * Compiles our extension settings into more user-friendly options
      */
     compileSimpleSettings(component, getFor = 'site') {
+      console.log('compiling simple settings!', component, getFor);
       let settingsData;
       switch (getFor) {
         case 'site':
@@ -370,6 +371,8 @@ export default {
           break;
       }
 
+      console.log('getting data from:', settingsData);
+
       try {
         if (
           (  settingsData?.[component]?.normal     === ExtensionMode.Disabled || component === 'enableUI')
@@ -383,6 +386,14 @@ export default {
           && settingsData?.[component]?.theater    === ExtensionMode.Default
           && settingsData?.[component]?.fullscreen === ExtensionMode.Default
         ) {
+          console.log(
+            component, 'is set to default because:\n'
+            `\nsettingsData[${component}].normal: ${settingsData?.[component]?.normal} || component is enableUI?`, component,
+            `\nsettingsData[${component}].theater: ${settingsData?.[component]?.normal}`,
+            `\nsettingsData[${component}].fullscreen: ${settingsData?.[component]?.normal}`,
+
+            `\n\n(expected values:`, ExtensionMode.Default
+          )
           return 'default';
         }
         if (
diff --git a/src/csui/src/components/ConfirmButton.vue b/src/csui/src/components/ConfirmButton.vue
new file mode 100644
index 0000000..e1ed677
--- /dev/null
+++ b/src/csui/src/components/ConfirmButton.vue
@@ -0,0 +1,83 @@
+<template>
+  <div v-if="popupVisible" class="popup">
+    <div class="popup-window">
+      <div
+        class="header"
+        :class="{
+          'danger': dialogType === 'danger',
+          'warning': dialogType === 'warning',
+          'info': dialogType === 'info',
+          'normal': dialogType === 'normal'
+        }"
+      >
+        {{ dialogText || 'Confirm action' }}
+      </div>
+      <div class="body">
+        {{ dialogText || 'Are you sure you want to do that?' }}
+      </div>
+      <div class="footer">
+        <button
+          class="button confirm"
+          :class="{
+            'danger': dialogType === 'danger',
+            'warning': dialogType === 'warning',
+            'info': dialogType === 'info',
+            'normal': dialogType === 'normal'
+          }"
+          @click="confirmAction"
+        >
+          {{ confirmText || 'Confirm' }}
+        </button>
+        <button @click="popupVisible = false">{{ cancelText  || 'Cancel' }}</button>
+      </div>
+    </div>
+  </div>
+  <button @click="popupVisible = true">
+    <slot></slot>
+  </button>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      popupVisible: false,
+    }
+  },
+  props: [
+    'dialogTitle',
+    'dialogText',
+    'confirmText',
+    'cancelText',
+    'dialogType'
+  ],
+  methods: {
+    confirmAction() {
+      this.$emit('onConfirmed');
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: saturate(50%) backdrop-blur(1rem);
+  z-index: 99999;
+
+  .header {
+    font-size: 1.33rem;
+    color: #fff;
+    background-color: #000;
+  }
+  .body {
+    min-height: 5rem;
+  }
+}
+</style>