Merge pull request #1219 from Stremio/feat/player-add-hdr-badge

Player: Add HDR badge

package.json

@@ -18,8 +18,8 @@
         "@sentry/browser": "8.42.0",
         "@stremio/stremio-colors": "5.2.0",
         "@stremio/stremio-core-web": "0.56.4",
-        "@stremio/stremio-icons": "5.8.0",
-        "@stremio/stremio-video": "0.0.75",
+        "@stremio/stremio-icons": "5.10.0",
+        "@stremio/stremio-video": "0.0.76",
         "a-color-picker": "1.2.1",
         "bowser": "2.11.0",
         "buffer": "6.0.3",

pnpm-lock.yaml

@@ -21,11 +21,11 @@ importers:
         specifier: 0.56.4
         version: 0.56.4
       '@stremio/stremio-icons':
-        specifier: 5.8.0
-        version: 5.8.0
+        specifier: 5.10.0
+        version: 5.10.0
       '@stremio/stremio-video':
-        specifier: 0.0.75
-        version: 0.0.75
+        specifier: 0.0.76
+        version: 0.0.76
       a-color-picker:
         specifier: 1.2.1
         version: 1.2.1
@@ -1123,11 +1123,11 @@ packages:
   '@stremio/stremio-core-web@0.56.4':
     resolution: {integrity: sha512-tFAMYgKrJ1bkvHRMpxDykM/844sDjgRPFk6FLhjQiwh01OHIyEgDqGo/NgwFM+CuMR4mW676SDvwNHkK0Xqg3w==}
 
-  '@stremio/stremio-icons@5.8.0':
-    resolution: {integrity: sha512-IVUvQbIWfA4YEHCTed7v/sdQJCJ+OOCf84LTWpkE2W6GLQ+15WHcMEJrVkE1X3ekYJnGg3GjT0KLO6tKSU0P4w==}
+  '@stremio/stremio-icons@5.10.0':
+    resolution: {integrity: sha512-Zw/vGC3D2yeQfk8xv/tfMJTDvbCPOI91tBg4XpR2+EgbZSX8Xvm7Vz457PIhFPhTAwdOPHp0VX0M3gzjbt0zOg==}
 
-  '@stremio/stremio-video@0.0.75':
-    resolution: {integrity: sha512-oKXMq156BVagzziWoTsmgNYABCSfwV9hR/TM6+JR4lne5pW4qmUN17ba/Fxsr+USKHeCKUaz1u0asKBj06HfyA==}
+  '@stremio/stremio-video@0.0.76':
+    resolution: {integrity: sha512-q/mCnp4mBReWbtreyeYAf0wD8z+jL4wA5GdkOLPY8o5OPZPUv9Qa9p3FNkK3CMVWf3TP1FzeNj3KYKqUVf5/2Q==}
 
   '@stylistic/eslint-plugin-jsx@4.4.1':
     resolution: {integrity: sha512-83SInq4u7z71vWwGG+6ViOtlOmZ6tSrDkMPhrvdBBTGMLA0gs22WSdhQ4vZP3oJ5Xg4ythvqeUiFSedvVxzhyA==}
@@ -5874,9 +5874,9 @@ snapshots:
     dependencies:
       '@babel/runtime': 7.24.1
 
-  '@stremio/stremio-icons@5.8.0': {}
+  '@stremio/stremio-icons@5.10.0': {}
 
-  '@stremio/stremio-video@0.0.75':
+  '@stremio/stremio-video@0.0.76':
     dependencies:
       buffer: 6.0.3
       color: 4.2.3

src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js

@@ -12,7 +12,7 @@ const NavMenu = require('./NavMenu');
 const styles = require('./styles');
 const { t } = require('i18next');
 
-const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, ...props }) => {
+const HorizontalNavBar = React.memo(({ className, route, query, title, backButton, searchBar, fullscreenButton, navMenu, hdrInfo, ...props }) => {
     const backButtonOnClick = React.useCallback(() => {
         window.history.back();
     }, []);
@@ -53,6 +53,14 @@ const HorizontalNavBar = React.memo(({ className, route, query, title, backButto
                     null
             }
             <div className={styles['buttons-container']}>
+                {
+                    hdrInfo && (hdrInfo.gamma === 'pq' || hdrInfo.gamma === 'hlg') ?
+                        <div className={styles['hdr-indicator']} title={hdrInfo.gamma === 'pq' ? 'HDR10' : 'HLG'}>
+                            <Icon className={styles['icon']} name={'hdr'} />
+                        </div>
+                        :
+                        null
+                }
                 {
                     !isIOSPWA && fullscreenButton ?
                         <Button className={styles['button-container']} title={fullscreen ? t('EXIT_FULLSCREEN') : t('ENTER_FULLSCREEN')} tabIndex={-1} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
@@ -82,7 +90,10 @@ HorizontalNavBar.propTypes = {
     backButton: PropTypes.bool,
     searchBar: PropTypes.bool,
     fullscreenButton: PropTypes.bool,
-    navMenu: PropTypes.bool
+    navMenu: PropTypes.bool,
+    hdrInfo: PropTypes.shape({
+        gamma: PropTypes.string,
+    }),
 };
 
 module.exports = HorizontalNavBar;

src/components/NavBar/HorizontalNavBar/styles.less

@@ -57,10 +57,30 @@
     .buttons-container {
         display: flex;
         flex-direction: row;
+        align-items: center;
         gap: 0.5rem;
         overflow: visible;
     }
 
+    .hdr-indicator {
+        flex: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 3.5rem;
+        padding: 0 0.5rem;
+        opacity: 0.6;
+        user-select: none;
+
+        .icon {
+            flex: none;
+            width: 3rem;
+            height: 1.5rem;
+            color: var(--primary-foreground-color);
+            opacity: 0.6;
+        }
+    }
+
     .button-container {
         flex: none;
         display: flex;

src/routes/Player/Player.js

@@ -916,6 +916,7 @@ const Player = ({ urlParams, queryParams }) => {
                 title={player.title !== null ? player.title : ''}
                 backButton={true}
                 fullscreenButton={true}
+                hdrInfo={video.state.hdrInfo}
                 onMouseMove={onBarMouseMove}
                 onMouseOver={onBarMouseMove}
             />

src/routes/Player/styles.less

@@ -65,7 +65,6 @@ html:not(.active-slider-within) {
                 top: 0;
                 left: 0;
                 z-index: -1;
-                box-shadow: 0 0 8rem 6rem @color-background-dark5;
                 content: "";
             }
 
@@ -102,7 +101,6 @@ html:not(.active-slider-within) {
                 bottom: 0;
                 left: 0;
                 z-index: -1;
-                box-shadow: 0 0 8rem 8rem @color-background-dark5;
                 content: "";
             }
         }

src/routes/Player/useVideo.js

@@ -22,6 +22,7 @@ const useVideo = () => {
         muted: null,
         playbackSpeed: null,
         videoParams: null,
+        hdrInfo: null,
         audioTracks: [],
         selectedAudioTrackId: null,
         subtitlesTracks: [],