feat: begin fix hdr feature

assets/resources.json

@@ -1,6 +1,7 @@
 {
   "css-anchor_improvements": "style/anchorImprovements.css",
   "css-fix_spacing": "style/fixSpacing.css",
+  "css-fix_hdr": "style/fixHDR.css",
   "doc-changelog": "/changelog.md",
   "icon-advanced_mode": "icons/plus_circle_small.svg",
   "icon-arrow_down": "icons/arrow_down.svg",

src/config.ts

@@ -56,6 +56,7 @@ export const migrations: DataMigrationsDict = {
       "thumbnailOverlayBehavior", "thumbnailOverlayToggleBtnShown",
       "thumbnailOverlayShowIndicator", "thumbnailOverlayIndicatorOpacity",
       "thumbnailOverlayImageFit", "removeShareTrackingParamSites",
+      "fixHdrIssues",
     ], oldData),
   }),
   // TODO: once advanced filtering is fully implemented, clear cache on migration to fv6

src/features/index.ts

@@ -1,4 +1,4 @@
-import { getPreferredLocale, resourceToHTMLString, t, tp } from "../utils";
+import { getPreferredLocale, hdrEnabled, resourceToHTMLString, t, tp } from "../utils";
 import langMapping from "../../assets/locales.json" assert { type: "json" };
 import { clearLyricsCache, getLyricsCache } from "./lyricsCache";
 import { doVersionCheck } from "./versionCheck";
@@ -207,6 +207,12 @@ export const featInfo = {
     reloadRequired: false,
     enable: noop,
   },
+  fixHdrIssues: {
+    type: "toggle",
+    category: "layout",
+    default: hdrEnabled(),
+    textAdornment: adornments.reloadRequired,
+  },
 
   //#region volume
   volumeSliderLabel: {

src/features/layout.ts

@@ -2,7 +2,7 @@ import { addParent, autoPlural, debounce, fetchAdvanced, insertAfter, pauseFor }
 import { getFeatures } from "../config";
 import { siteEvents } from "../siteEvents";
 import { addSelectorListener } from "../observers";
-import { error, getResourceUrl, log, warn, t, onInteraction, openInTab, getBestThumbnailUrl, getDomain, addStyle, currentMediaType, domLoaded, waitVideoElementReady } from "../utils";
+import { error, getResourceUrl, log, warn, t, onInteraction, openInTab, getBestThumbnailUrl, getDomain, addStyle, currentMediaType, domLoaded, waitVideoElementReady, hdrEnabled } from "../utils";
 import { scriptInfo } from "../constants";
 import { openCfgMenu } from "../menu/menu_old";
 import "./layout.css";
@@ -664,3 +664,16 @@ export async function initHideCursorOnIdle() {
     },
   });
 }
+
+//#region fix HDR
+
+/** Fixes visual issues when HDR is enabled */
+export async function fixHdrIssues() {
+  if(!hdrEnabled())
+    return log("HDR is not enabled, skipping HDR fixes");
+  const css = await (await fetchAdvanced(await getResourceUrl("css-fix_hdr"))).text();
+  if(css) {
+    addStyle(css, "fix-hdr");
+    log("Fixed HDR issues");
+  }
+}

src/index.ts

@@ -11,7 +11,7 @@ import {
   addWatermark, removeUpgradeTab,
   initRemShareTrackParam, fixSpacing,
   addScrollToActiveBtn, initThumbnailOverlay,
-  initHideCursorOnIdle,
+  initHideCursorOnIdle, fixHdrIssues,
   // volume
   initVolumeFeatures,
   // song lists
@@ -169,6 +169,9 @@ async function onDomLoad() {
       if(features.hideCursorOnIdle)
         ftInit.push(initHideCursorOnIdle());
 
+      if(features.fixHdrIssues)
+        ftInit.push(fixHdrIssues());
+
       //#region (ytm) volume
 
       ftInit.push(initVolumeFeatures());

src/types.ts

@@ -344,6 +344,8 @@ export interface FeatureConfig {
   hideCursorOnIdle: boolean;
   /** Delay in seconds after which the cursor should be hidden */
   hideCursorOnIdleDelay: number;
+  /** Whether to fix various issues in the layout when HDR is supported and active */
+  fixHdrIssues: boolean;
 
   //#region volume
   /** Add a percentage label to the volume slider */

src/utils/misc.ts

@@ -115,6 +115,11 @@ export function openInTab(href: string, background = true) {
   }
 }
 
+/** Returns whether the monitor has HDR enabled */
+export function hdrEnabled() {
+  return window.matchMedia("(dynamic-range: high)").matches;
+}
+
 //#region resources
 
 /**