src/csui/Popup.vue

@@ -80,6 +80,10 @@
         <!-- CONTENT -->
         <div class="scrollable" style="flex: 7 7; padding: 1rem;">
           <template v-if="settings && siteSettings">
+            <InPlayerUIAdvertisement
+              v-if="selectedTab === 'playerUiCtl'"
+              :eventBus="eventBus"
+            />
             <PopupVideoSettings
               v-if="selectedTab === 'videoSettings'"
               :settings="settings"
@@ -124,6 +128,7 @@ import BaseExtensionSettings from './src/PlayerUiPanels/BaseExtensionSettings.vu
 import PlayerDetectionPanel from './src/PlayerUiPanels/PlayerDetectionPanel.vue'
 import ChangelogPanel from './src/PlayerUiPanels/ChangelogPanel.vue'
 import PopupVideoSettings from './src/popup/panels/PopupVideoSettings.vue'
+import InPlayerUIAdvertisement from './src/PlayerUiPanels/InPlayerUiAdvertisement.vue';
 import AboutPanel from '@csui/src/popup/panels/AboutPanel.vue'
 import Debug from '../ext/conf/Debug';
 import BrowserDetect from '../ext/conf/BrowserDetect';
@@ -142,6 +147,7 @@ export default {
     PopupVideoSettings,
     PlayerDetectionPanel,
     BaseExtensionSettings,
+    InPlayerUIAdvertisement,
     SupportLevelIndicator,
     ChangelogPanel,
     AboutPanel

src/csui/src/PlayerUiPanels/InPlayerUiAdvertisement.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <h1>In-player UI</h1>
+
+    <div
+      class="button b3"
+      style="margin: 16px; padding: 4px;"
+      @click="showInPlayerUi()"
+    >
+      Show settings window
+    </div>
+
+    <!-- <p></p>
+    <p></p>
+    <p>In-player UI should show and hide automatically as you start or stop moving your mouse inside the player window.</p>
+    <p>Note that by default, in-player UI may not show if player window is not big enough.</p> -->
+  </div>
+</template>
+
+<script>
+import UIProbeMixin from '../utils/UIProbeMixin';
+
+export default {
+  mixins: [
+    UIProbeMixin
+  ],
+  props: [
+    'eventBus',
+  ],
+  data() {
+    return {
+      pageData: {
+        pcsDark: 'x',
+        pcsLight: 'x',
+        colorScheme: 'x'
+      },
+    }
+  },
+  created() {
+    this.eventBus.subscribeMulti(
+      {
+        'uw-page-stats': {
+          function: (data) => {
+            console.log('got page statss:', data);
+            this.pageData = data;
+          }
+        }
+      },
+      this
+    );
+    this.eventBus.send('uw-get-page-stats', {}, {comms: {forwardTo: 'active'}});
+  },
+  methods: {
+    showInPlayerUi() {
+      this.eventBus.send('uw-set-ui-state', {globalUiVisible: true}, {comms: {forwardTo: 'active'}});
+    }
+  }
+}
+</script>

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

@@ -8,7 +8,7 @@
       </div>
       <div class="select">
         <select
-          :value="simpleExtensionSettings.enable"
+          v-model="simpleExtensionSettings.enable"
           @click="setExtensionMode('enable', $event)"
         >
           <option
@@ -53,7 +53,7 @@
         </div>
         <div class="select">
           <select
-            :value="simpleExtensionSettings.enableAard"
+            v-model="simpleExtensionSettings.enableAard"
             @click="setExtensionMode('enableAard', $event)"
           >
             <option
@@ -96,7 +96,7 @@
         </div>
         <div class="select">
           <select
-            :value="simpleExtensionSettings.enableKeyboard"
+            v-model="simpleExtensionSettings.enableKeyboard"
             @click="setExtensionMode('enableKeyboard', $event)"
           >
             <option
@@ -139,7 +139,7 @@
         </div>
         <div class="select">
           <select
-            :value="simpleExtensionSettings.enableUI"
+            v-model="simpleExtensionSettings.enableUI"
             @click="setExtensionMode('enableUI', $event)"
           >
             <template v-if="isDefaultConfiguration">
@@ -170,7 +170,7 @@
         <div class="label">Default crop:</div>
         <div class="select">
           <select
-            :value="siteDefaultCrop"
+            v-model="siteDefaultCrop"
             @change="setOption('defaults.crop', $event)"
           >
             <option
@@ -357,7 +357,7 @@ export default {
      * Compiles our extension settings into more user-friendly options
      */
     compileSimpleSettings(component, getFor = 'site') {
-      // console.log('compiling simple settings!', component, getFor, 'site settings?', this.siteSettings);
+      console.log('compiling simple settings!', component, getFor);
       let settingsData;
       switch (getFor) {
         case 'site':
@@ -371,7 +371,7 @@ export default {
           break;
       }
 
-      // console.log('getting data from:', settingsData);
+      console.log('getting data from:', settingsData);
 
       try {
         if (
@@ -386,14 +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}`,
+          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
-          // )
+            `\n\n(expected values:`, ExtensionMode.Default
+          )
           return 'default';
         }
         if (

src/ext/UWServer.ts

@@ -276,20 +276,11 @@ export default class UWServer {
   }
 
   async getCurrentSite() {
-    const site = await this.getVideoTab();
-
-    // Don't propagate 'INVALID SITE' to the popup.
-    if (site.host === 'INVALID SITE') {
-      return;
-    }
-
-    const tabHostname = await this.getCurrentTabHostname();
-
     this.eventBus.send(
       'set-current-site',
       {
-        site,
-        tabHostname,
+        site: await this.getVideoTab(),
+        tabHostname: await this.getCurrentTabHostname(),
       },
       {
         comms: {