Add call to arms to popup. Fix some minor issues

src/csui/PlayerOverlay.vue

@@ -37,7 +37,8 @@
 
           Ultrawidify
         </div>
-        </template>
+
+      </template>
       <slot>
         <!--
           Didn't manage to ensure that extension status pops up above other menu items in less than 3 minutes with z-index,

src/csui/src/PlayerUIWindow.vue

@@ -135,7 +135,7 @@ import PlayerDetectionPanel from './PlayerUiPanels/PlayerDetectionPanel.vue'
 import VideoSettings from './PlayerUiPanels/VideoSettings.vue'
 import BrowserDetect from '../../ext/conf/BrowserDetect'
 import ChangelogPanel from './PlayerUiPanels/ChangelogPanel.vue'
-import AboutPanel from './PlayerUiPanels/AboutPanel.vue'
+import AboutPanel from '@csui/src/PlayerUiPanels/AboutPanel.vue'
 import PlayerUiSettings from './PlayerUiPanels/PlayerUiSettings.vue'
 import ResetBackupPanel from './PlayerUiPanels/ResetBackupPanel.vue'
 

src/csui/src/PlayerUiPanels/InPlayerUiAdvertisement.vue

@@ -1,17 +1,39 @@
 <template>
   <div>
     <h1>In-player UI</h1>
+
     <div
       class="button b3"
       style="margin: 16px; padding: 4px;"
       @click="showInPlayerUi()"
     >
-      Show in-player UI
+      Show settings window
     </div>
-    <p></p>
+
+    <div>
+      <b>Is your screen entirely white or entirely black?</b>
+
+      <p>This appears to be a rare issue that happens to some people. If you're experiencing this issue, please consider contacting me and sharing the following data:</p>
+
+      <ul>
+        <li>Which sites this problem appears on and whether it happens on youtube. If you use youtube premium, please try signing out of youtube (or use a new profile in Google Chrome) in order to see whether youtube premium is required.</li>
+        <li>your browser. if using browsers other than Chrome, please try to reproduce this issue in Chrome</li>
+        <li>your operating system</li>
+        <li>your graphics card</li>
+        <li>the following line:<br/>
+          <pre>prefers-color-scheme dark: {{pageData.pcsDark}}; prefers-color-scheme light: {{pageData.pcsLight}}; color-scheme: {{pageData.colorScheme}}</pre>
+        </li>
+      </ul>
+
+      <p>Please post this info to <a href="https://github.com/tamius-han/ultrawidify/issues/262" target="_blank">this thread</a>, or message me via e-mail.</p>
+
+      <p>Then, disable the in-player UI.</p>
+    </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>
+    <p>Note that by default, in-player UI may not show if player window is not big enough.</p> -->
   </div>
 </template>
 
@@ -25,6 +47,29 @@ export default {
   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'}});

src/ext/lib/uwui/UI.js

@@ -190,6 +190,24 @@ class UI {
             this.sendToIframe('uw-set-ui-state', {...config, isGlobal: this.isGlobal}, routingData);
           }
         },
+        'uw-get-page-stats': {
+          function: (config, routingData) => {
+            console.log('got get page stats!');
+            this.eventBus.send(
+              'uw-page-stats',
+              {
+                pcsDark: window.matchMedia('(prefers-color-scheme: dark)').matches,
+                pcsLight: window.matchMedia('(prefers-color-scheme: light)').matches,
+                colorScheme: window.getComputedStyle( document.body ,null).getPropertyValue('color-scheme')
+              },
+              {
+                comms: {
+                  forwardTo: 'popup'
+                }
+              }
+            );
+          }
+        },
         'uw-restore-ui-state': {
           function: (config, routingData) => {
             if (!this.isGlobal) {
@@ -324,7 +342,7 @@ class UI {
           }
 
           this.uiIframe.style.pointerEvents = event.data.clickable ? 'auto' : 'none';
-          this.uiIframe.style.opacity = event.data.opacity ? '100' : '0';
+          this.uiIframe.style.opacity = event.data.opacity || this.isGlobal ? '100' : '0';
           break;
         case 'uw-bus-tunnel':
           const busCommand = event.data.payload;
@@ -337,7 +355,7 @@ class UI {
           this.setUiVisibility(!this.isGlobal);
           break;
         case 'uwui-hidden':
-          this.uiIframe.style.opacity = event.data.opacity ? '100' : '0';
+          this.uiIframe.style.opacity = event.data.opacity || this.isGlobal ? '100' : '0';
           break;
         case 'uwui-global-window-hidden':
           if (!this.isGlobal) {