Initial HDR brightness UI

src/components/BrightnessPanel.jsx

@@ -1,6 +1,7 @@
 import React, { PureComponent } from "react";
 import Slider from "./Slider";
 import DDCCISliders from "./DDCCISliders"
+import HDRSliders from "./HDRSliders";
 import TranslateReact from "../TranslateReact"
 
 const monitorSort = (a, b) => {
@@ -100,7 +101,7 @@ export default class BrightnessPanel extends PureComponent {
                 }
               }
 
-              if (!useFeatures || !hasFeatures) {
+              if ((!useFeatures || !hasFeatures) && false) {
                 return (
                   <div className="monitor-sliders" key={monitor.key}>
                     <Slider name={this.getMonitorName(monitor, this.state.names)} id={monitor.id} level={monitor.brightness} min={0} max={100} num={monitor.num} monitortype={monitor.type} hwid={monitor.key} key={monitor.key} onChange={this.handleChange} afterName={showPowerButton()} scrollAmount={window.settings?.scrollFlyoutAmount} />
@@ -121,6 +122,7 @@ export default class BrightnessPanel extends PureComponent {
                       <Slider id={monitor.id} level={monitor.brightness} min={0} max={100} num={monitor.num} monitortype={monitor.type} hwid={monitor.key} key={monitor.key} onChange={this.handleChange} scrollAmount={window.settings?.scrollFlyoutAmount} />
                     </div>
                     <DDCCISliders monitor={monitor} monitorFeatures={monitorFeatures} scrollAmount={window.settings?.scrollFlyoutAmount} />
+                    <HDRSliders monitor={monitor} scrollAmount={window.settings?.scrollFlyoutAmount} />
                   </div>
                 )
               }

src/components/HDRSliders.jsx

@@ -0,0 +1,33 @@
+import React, { useState } from "react"
+import { useObject } from "../hooks/useObject"
+import Slider from "./Slider"
+
+export default function HDRSliders(props) {
+    const { monitor, name, hdrFeatures } = props
+    const [sdrLevel, setSDRLevel] = useState(monitor?.sdrLevel)
+
+    let extraHTML = []
+
+    // SDR Brightness
+    extraHTML.push(
+        <div className="feature-row feature-sdr" key={monitor.key + "_sdr"}>
+            <div className="feature-icon"><span className="text vfix">SDR</span></div>
+            <Slider type="sdr" monitorID={monitor.id} level={sdrLevel} monitorName={monitor.name} monitortype={monitor.type} onChange={val => { setSDRLevel( val ); setSDRBrightness(monitor.id, parseInt(val)) }} scrollAmount={props.scrollAmount} />
+        </div>
+    )
+
+    return (
+        <>
+        {extraHTML}
+        </>
+    )
+}
+
+function setSDRBrightness(monitor, code, value) {
+    window.dispatchEvent(new CustomEvent("set-sdr-brightness", {
+        detail: {
+            monitor,
+            value
+        }
+    }))
+}

src/css/panel.scss

@@ -415,6 +415,9 @@ body[data-is-win11="false"] #root {
     align-items: center;
     font-size: 22px;
     padding-right: 18px;
+    .text {
+        font-size: 12.5px;
+    }
 }
 .feature-power-icon {
     display: flex;