Temporarily comment out zoom from player overlay

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/Popup.vue

@@ -85,6 +85,11 @@
               :site="site.host"
             >
             </BaseExtensionSettings>
+
+            <AboutPanel
+              v-if="selectedTab === 'about'"
+            >
+            </AboutPanel>
           </template>
           <template v-else>No settings or site settings found.</template>
         </div>
@@ -99,6 +104,7 @@ import BaseExtensionSettings from './src/PlayerUiPanels/BaseExtensionSettings.vu
 import PlayerDetectionPanel from './src/PlayerUiPanels/PlayerDetectionPanel.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';
 import Comms from '../ext/lib/comms/Comms';
@@ -109,6 +115,15 @@ import EventBus from '../ext/lib/EventBus';
 import {ChromeShittinessMitigations as CSM} from '../common/js/ChromeShittinessMitigations';
 
 export default {
+  components: {
+    Debug,
+    BrowserDetect,
+    PopupVideoSettings,
+    PlayerDetectionPanel,
+    BaseExtensionSettings,
+    InPlayerUIAdvertisement,
+    AboutPanel
+  },
   data () {
     return {
       comms: undefined,
@@ -127,6 +142,7 @@ export default {
         {id: 'videoSettings', label: 'Video settings', icon: 'crop'},
         // {id: 'playerDetection', label: 'Player detection', icon: 'television-play'},
         {id: 'extensionSettings', label: 'Site and Extension options', icon: 'cogs' },
+        {id: 'about', label: 'About', icon: 'information-outline'},
       ],
     }
   },
@@ -215,11 +231,7 @@ export default {
       this.narrowPopup = body.offsetWidth < 600;
     }
   },
-  components: {
-    Debug,
-    BrowserDetect,
-    PopupVideoSettings, PlayerDetectionPanel, BaseExtensionSettings, InPlayerUIAdvertisement
-  },
+
   methods: {
     async sleep(t) {
       return new Promise( (resolve,reject) => {

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/csui/src/popup/panels/AboutPanel.vue

@@ -7,44 +7,20 @@
     <span class="label">Having an issue?</span><br/> Report <strike>undocumented features</strike> bugs using one of the following options (in order of preference):
       <ul>
         <li> <a target="_blank" href="https://github.com/tamius-han/ultrawidify/issues"><b>Github (preferred)</b></a><br/></li>
-        <li>Email: <a target="_blank" :href="mailtoLink">tamius.han@gmail.com</a></li>
+        <li>Email: <a target="_blank" :href="mailtoLink">{{gmailLink}}</a></li>
       </ul>
     </div>
-
-    <div class="flex-grow"></div>
-
-    <div class="row">
-      <span class="label">Swatter mode (logging)</span><br/>
-    </div>
-    <div v-if="showEasterEgg" class="center"><small>You've made plenty of marks, all in the wrong places!</small></div>
-    <div class="flex flex-row">
-      <ShortcutButton class="flex flex-grow button"
-                      label="Show logger"
-                      :active="loggingEnabled"
-                      @click.native="showLogger()"
-      ></ShortcutButton>
-      <ShortcutButton class="flex flex-grow button"
-                      label="Make a mark"
-                      @click.native="sendMark()"
-      ></ShortcutButton>
-      <ShortcutButton class="flex flex-grow button"
-                      label="Hide logger"
-                      @click.native="hideLogger()"
-      ></ShortcutButton>
-    </div>
   </div>
 </template>
 
 <script>
-import Comms from '../../ext/lib/comms/Comms';
-import ShortcutButton from '../../common/components/ShortcutButton';
-import BrowserDetect from '../../ext/conf/BrowserDetect';
-
+// import Comms from '@src/ext/lib/comms/Comms';
+// import ShortcutButton from '@src/common/components/ShortcutButton';
+import BrowserDetect from '@src/ext/conf/BrowserDetect';
 
 export default {
   components: {
-    ShortcutButton,
- },
+  },
   data() {
     return {
       // reminder — webextension-polyfill doesn't seem to work in vue!
@@ -76,7 +52,7 @@ Browser-related stuff (please ensure this section is correct):
 * Operating system: ${window.navigator.platform}
 `
       );
-    this.mailtoLink = `mailto:tamius.han@gmail.com?subject=%5BUltrawidify%5D%20ENTER%20SUMMARY%20OF%20YOUR%20ISSUE%20HERE&body=${messageTemplate}`;
+    this.mailtoLink = `mailto:${this.gmailLink}?subject=%5BUltrawidify%5D%20ENTER%20SUMMARY%20OF%20YOUR%20ISSUE%20HERE&body=${messageTemplate}`;
   },
   methods: {
     async updateLoggerSettings(allowLogging) {
@@ -94,15 +70,15 @@ Browser-related stuff (please ensure this section is correct):
       //   Logger.saveConfig({allowLogging: allowLogging, ...lastLoadedLoggerSettings});
       // }
     },
-    showLogger() {
-      Comms.sendMessage({cmd: 'show-logger', forwardToActive: true});
-    },
-    sendMark() {
-      this.showEasterEgg = !this.showEasterEgg;
-    },
-    hideLogger() {
-      Comms.sendMessage({cmd: 'hide-logger', forwardToActive: true});
-    }
+    // showLogger() {
+    //   Comms.sendMessage({cmd: 'show-logger', forwardToActive: true});
+    // },
+    // sendMark() {
+    //   this.showEasterEgg = !this.showEasterEgg;
+    // },
+    // hideLogger() {
+    //   Comms.sendMessage({cmd: 'hide-logger', forwardToActive: true});
+    // }
   }
 }
 </script>

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) {

src/ext/lib/video-data/PlayerData.ts

@@ -560,6 +560,8 @@ class PlayerData {
     const playerQs = this.siteSettings.getCustomDOMQuerySelector('player');
     const playerIndex = this.siteSettings.getPlayerIndex();
 
+    console.log('player index:', playerIndex, 'player qs:', playerQs)
+
     // on verbose, get both qs and index player
     if (options?.verbose) {
       if (playerIndex) {
@@ -590,6 +592,8 @@ class PlayerData {
       }
     }
 
+    console.log('got player candidate from manual selection?:', playerCandidate);
+
     if (playerCandidate) {
       if (options?.verbose) {
         this.getPlayerAuto(elementStack, videoWidth, videoHeight);
@@ -713,8 +717,10 @@ class PlayerData {
       }
     }
     if (bestCandidate.initialValue) {
+      console.log('No candidates found:', bestCandidate, 'element stack:', elementStack);
       bestCandidate = null;
     } else {
+      console.log('Got auto-matched candidate', bestCandidate);
       bestCandidate.heuristics['autoMatch'] = true;
       if (this.siteSettings.data.playerAutoConfig?.initialIndex !== bestCandidate.index) {
         this.siteSettings.set('playerAutoConfig.initialIndex', bestCandidate.index, {reload: false});