Add basic confirm button.

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;

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 (

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>