src/csui/Popup.vue

@@ -13,39 +13,28 @@
         class="popup flex flex-col no-overflow"
         :class="{'popup-chrome': ! BrowserDetect?.firefox}"
     >
-      <div class="flex flex-col w-full relative header"
+      <div class="flex-row flex-nogrow flex-noshrink relative header"
       >
-        <div class="flex flex-row w-full" style="height: 42px">
+        <div class="grow shrink">
-          <h1 class="flex-grow">
+          <h1>
             <span class="smallcaps">Ultrawidify</span>: <small>Quick settings</small>
           </h1>
-          <button
+          <div v-if="site && siteSettings" style="transform: scale(0.75) translateX(-12.5%); margin-bottom: -0.5rem; align-content: center" class="flex flex-row">
-            class="settings-header-button"
-            style="align-self: stretch"
-            @click="showInPlayerUi()"
-          >
-            Show settings window
-          </button>
-        </div>
-
-        <div class="flex flex-row w-full">
-          <div v-if="site && siteSettings" style="transform: scale(0.75) translateX(-12.5%); margin-bottom: -0.5rem; align-content: center" class="flex flex-row flex-grow items-center">
             <div>site: {{site.host}}</div>
             <SupportLevelIndicator
               :siteSupportLevel="siteSupportLevel"
             >
             </SupportLevelIndicator>
           </div>
-
+        </div>
-          <!-- Version info -->
+        <div v-if="BrowserDetect?.processEnvChannel !== 'stable'" class="absolute channel-info version-info">
-          <div v-if="BrowserDetect?.processEnvChannel !== 'stable'" class="absolute channel-info version-info">
+          Build channel: {{BrowserDetect?.processEnvChannel}} <br/>
-            <label>Version:</label> <br/>
+          <label>Version:</label> <br/>
-            {{ settings.getExtensionVersion() }} (non-stable)
+          {{ settings.getExtensionVersion() }}
-          </div>
+        </div>
-          <div v-else class="version-info">
+        <div v-else class="version-info">
-            <label>Version:</label> <br/>
+          <label>Version:</label> <br/>
-            {{ settings.getExtensionVersion() }}
+          {{ settings.getExtensionVersion() }}
-          </div>
         </div>
       </div>
 
@@ -163,10 +152,10 @@ export default {
       logger: undefined,
       site: undefined,
       siteSettings: undefined,
-      selectedTab: 'videoSettings',
+      selectedTab: 'playerUiCtl',
       tabs: [
         // see this for icons: https://pictogrammers.com/library/mdi/
-        // {id: 'playerUiCtl', label: 'In-player UI', icon: 'artboard'},
+        {id: 'playerUiCtl', label: 'In-player UI', icon: 'artboard'},
         {id: 'videoSettings', label: 'Video settings', icon: 'crop'},
         // {id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
         {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
@@ -270,9 +259,6 @@ export default {
   },
 
   methods: {
-    showInPlayerUi() {
-      this.eventBus.send('uw-set-ui-state', {globalUiVisible: true}, {comms: {forwardTo: 'active'}});
-    },
     async sleep(t) {
       return new Promise( (resolve,reject) => {
         setTimeout(() => resolve(), t);
@@ -379,15 +365,12 @@ export default {
 
 .header {
   background-color: rgb(90, 28, 13);
-  background-color: rgb(0,0,0);
   color: #fff;
   padding: 8px;
 
-  // display: flex;
+  display: flex;
-  // flex-direction: row;
+  flex-direction: row;
-  // justify-content: space-between;
+  justify-content: space-between;
-
-  border-bottom: 1px dotted #fa6;
 
 
   h1 {
@@ -405,21 +388,6 @@ export default {
 
 }
 
-.settings-header-button {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  padding: 0.5rem 2rem;
-  text-transform: lowercase;
-  font-variant: small-caps;
-
-  background-color: #000;
-  border: 1px solid #fa68;
-
-  color: #eee;
-}
-
 .site-support-info {
   display: flex;
   flex-direction: row;

src/csui/res/css/flex.scss

@@ -27,9 +27,6 @@
   flex-shrink: 0;
 }
 
-.items-center {
-  align-items: center;
-}
 
 .flex-wrap {
   flex-wrap: wrap;

src/csui/src/PlayerUiPanels/BaseExtensionSettings.vue

@@ -64,12 +64,12 @@
       <p>
         Pressing the button will reset settings to default without asking.
       </p>
-      <ConfirmButton
+      <button
         class="danger"
-        @onConfirmed="resetSettings"
+        @click="resetSettings"
       >
         Reset settings
-      </ConfirmButton>
+      </button>
     </div>
   </div>
 </template>
@@ -77,7 +77,6 @@
 <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() {
@@ -94,9 +93,8 @@ export default {
   ],
   components: {
     SiteExtensionSettings,
-    OtherSiteSettings,
+    OtherSiteSettings
-    ConfirmButton
+},
-  },
   computed: {
     globalSettings() {
       return this.settings?.getSiteSettings('@global') ?? null;

src/csui/src/PlayerUiPanels/PanelComponents/ExtensionSettings/SiteExtensionSettings.vue

@@ -357,7 +357,6 @@ 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':
@@ -371,8 +370,6 @@ export default {
           break;
       }
 
-      console.log('getting data from:', settingsData);
-
       try {
         if (
           (  settingsData?.[component]?.normal     === ExtensionMode.Disabled || component === 'enableUI')
@@ -386,14 +383,6 @@ 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

@@ -1,83 +0,0 @@
-<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>