From e36d15eccf5308df5132b9323f6f73dc83989935 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 21 Apr 2026 00:26:52 +0300
Subject: [PATCH 1/6] feat: add hdr badge

---
 src/routes/Player/HdrBadge/HdrBadge.less | 19 ++++++++++++++
 src/routes/Player/HdrBadge/HdrBadge.tsx  | 33 ++++++++++++++++++++++++
 src/routes/Player/Player.js              |  5 ++++
 src/routes/Player/styles.less            |  7 +++++
 src/routes/Player/useVideo.js            |  1 +
 5 files changed, 65 insertions(+)
 create mode 100644 src/routes/Player/HdrBadge/HdrBadge.less
 create mode 100644 src/routes/Player/HdrBadge/HdrBadge.tsx

diff --git a/src/routes/Player/HdrBadge/HdrBadge.less b/src/routes/Player/HdrBadge/HdrBadge.less
new file mode 100644
index 000000000..a373df267
--- /dev/null
+++ b/src/routes/Player/HdrBadge/HdrBadge.less
@@ -0,0 +1,19 @@
+.hdr-badge-container {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+
+    .hdr-badge {
+        flex: none;
+        padding: 0.4rem 0.8rem;
+        border-radius: 0.4rem;
+        font-size: 1.2rem;
+        font-weight: bold;
+        letter-spacing: 0.05rem;
+        color: var(--primary-foreground-color);
+        background-color: var(--modal-background-color);
+        border: 0.1rem solid var(--primary-foreground-color);
+    }
+}
diff --git a/src/routes/Player/HdrBadge/HdrBadge.tsx b/src/routes/Player/HdrBadge/HdrBadge.tsx
new file mode 100644
index 000000000..e7ca2f2b5
--- /dev/null
+++ b/src/routes/Player/HdrBadge/HdrBadge.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import classNames from 'classnames';
+import styles from './HdrBadge.less';
+
+type HdrInfo = {
+    gamma?: string | null,
+    primaries?: string | null,
+};
+
+type Props = {
+    className?: string,
+    hdrInfo: HdrInfo | null,
+};
+
+const labelFor = (hdrInfo: HdrInfo | null): string | null => {
+    const gamma = hdrInfo?.gamma?.toLowerCase();
+    if (gamma === 'pq') return 'HDR10';
+    if (gamma === 'hlg') return 'HLG';
+    return null;
+};
+
+const HdrBadge = ({ className, hdrInfo }: Props) => {
+    const label = labelFor(hdrInfo);
+    if (!label) return null;
+
+    return (
+        <div className={classNames(className, styles['hdr-badge-container'])}>
+            <div className={styles['hdr-badge']}>{label}</div>
+        </div>
+    );
+};
+
+export default HdrBadge;
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 662717b70..4d56d3366 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -28,6 +28,7 @@ const useVideo = require('./useVideo');
 const styles = require('./styles');
 const Video = require('./Video');
 const { default: Indicator } = require('./Indicator/Indicator');
+const { default: HdrBadge } = require('./HdrBadge/HdrBadge');
 
 const findTrackByLang = (tracks, lang) => tracks.find((track) => track.lang === lang || langs.where('1', track.lang)?.[2] === lang);
 const findTrackById = (tracks, id) => tracks.find((track) => track.id === id);
@@ -1010,6 +1011,10 @@ const Player = ({ urlParams, queryParams }) => {
                 videoState={video.state}
                 disabled={subtitlesMenuOpen}
             />
+            <HdrBadge
+                className={classnames(styles['layer'], styles['hdr-badge-layer'])}
+                hdrInfo={video.state.hdrInfo}
+            />
             {
                 nextVideoPopupOpen ?
                     <NextVideoPopup
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index 4894791f0..9960c6687 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -114,6 +114,13 @@ html:not(.active-slider-within) {
             bottom: 10rem;
         }
 
+        &.hdr-badge-layer {
+            top: 7rem;
+            left: initial;
+            right: 2rem;
+            bottom: initial;
+        }
+
         &.menu-layer {
             top: initial;
             left: initial;
diff --git a/src/routes/Player/useVideo.js b/src/routes/Player/useVideo.js
index b3a5d2e39..bfa8ddf94 100644
--- a/src/routes/Player/useVideo.js
+++ b/src/routes/Player/useVideo.js
@@ -22,6 +22,7 @@ const useVideo = () => {
         muted: null,
         playbackSpeed: null,
         videoParams: null,
+        hdrInfo: null,
         audioTracks: [],
         selectedAudioTrackId: null,
         subtitlesTracks: [],

From c8592d56106b8165aa5d6fb072e8c36b85e8000f Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 21 Apr 2026 13:22:35 +0300
Subject: [PATCH 2/6] feat: use an icon for hdr badge

---
 .../HorizontalNavBar/HorizontalNavBar.js      | 15 +++++++--
 .../NavBar/HorizontalNavBar/styles.less       | 20 +++++++++++
 src/routes/Player/HdrBadge/HdrBadge.less      | 19 -----------
 src/routes/Player/HdrBadge/HdrBadge.tsx       | 33 -------------------
 src/routes/Player/Player.js                   |  6 +---
 src/routes/Player/styles.less                 |  7 ----
 6 files changed, 34 insertions(+), 66 deletions(-)
 delete mode 100644 src/routes/Player/HdrBadge/HdrBadge.less
 delete mode 100644 src/routes/Player/HdrBadge/HdrBadge.tsx

diff --git a/src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js b/src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js
index 65bf30c94..6fed91c8a 100644
--- a/src/components/NavBar/HorizontalNavBar/HorizontalNavBar.js
+++ b/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;
diff --git a/src/components/NavBar/HorizontalNavBar/styles.less b/src/components/NavBar/HorizontalNavBar/styles.less
index 78414ce64..7f7829152 100644
--- a/src/components/NavBar/HorizontalNavBar/styles.less
+++ b/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;
diff --git a/src/routes/Player/HdrBadge/HdrBadge.less b/src/routes/Player/HdrBadge/HdrBadge.less
deleted file mode 100644
index a373df267..000000000
--- a/src/routes/Player/HdrBadge/HdrBadge.less
+++ /dev/null
@@ -1,19 +0,0 @@
-.hdr-badge-container {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    user-select: none;
-
-    .hdr-badge {
-        flex: none;
-        padding: 0.4rem 0.8rem;
-        border-radius: 0.4rem;
-        font-size: 1.2rem;
-        font-weight: bold;
-        letter-spacing: 0.05rem;
-        color: var(--primary-foreground-color);
-        background-color: var(--modal-background-color);
-        border: 0.1rem solid var(--primary-foreground-color);
-    }
-}
diff --git a/src/routes/Player/HdrBadge/HdrBadge.tsx b/src/routes/Player/HdrBadge/HdrBadge.tsx
deleted file mode 100644
index e7ca2f2b5..000000000
--- a/src/routes/Player/HdrBadge/HdrBadge.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import styles from './HdrBadge.less';
-
-type HdrInfo = {
-    gamma?: string | null,
-    primaries?: string | null,
-};
-
-type Props = {
-    className?: string,
-    hdrInfo: HdrInfo | null,
-};
-
-const labelFor = (hdrInfo: HdrInfo | null): string | null => {
-    const gamma = hdrInfo?.gamma?.toLowerCase();
-    if (gamma === 'pq') return 'HDR10';
-    if (gamma === 'hlg') return 'HLG';
-    return null;
-};
-
-const HdrBadge = ({ className, hdrInfo }: Props) => {
-    const label = labelFor(hdrInfo);
-    if (!label) return null;
-
-    return (
-        <div className={classNames(className, styles['hdr-badge-container'])}>
-            <div className={styles['hdr-badge']}>{label}</div>
-        </div>
-    );
-};
-
-export default HdrBadge;
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 4d56d3366..8a97d1eab 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -28,7 +28,6 @@ const useVideo = require('./useVideo');
 const styles = require('./styles');
 const Video = require('./Video');
 const { default: Indicator } = require('./Indicator/Indicator');
-const { default: HdrBadge } = require('./HdrBadge/HdrBadge');
 
 const findTrackByLang = (tracks, lang) => tracks.find((track) => track.lang === lang || langs.where('1', track.lang)?.[2] === lang);
 const findTrackById = (tracks, id) => tracks.find((track) => track.id === id);
@@ -961,6 +960,7 @@ const Player = ({ urlParams, queryParams }) => {
                 title={player.title !== null ? player.title : ''}
                 backButton={true}
                 fullscreenButton={true}
+                hdrInfo={video.state.hdrInfo}
                 onMouseMove={onBarMouseMove}
                 onMouseOver={onBarMouseMove}
             />
@@ -1011,10 +1011,6 @@ const Player = ({ urlParams, queryParams }) => {
                 videoState={video.state}
                 disabled={subtitlesMenuOpen}
             />
-            <HdrBadge
-                className={classnames(styles['layer'], styles['hdr-badge-layer'])}
-                hdrInfo={video.state.hdrInfo}
-            />
             {
                 nextVideoPopupOpen ?
                     <NextVideoPopup
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index 9960c6687..4894791f0 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -114,13 +114,6 @@ html:not(.active-slider-within) {
             bottom: 10rem;
         }
 
-        &.hdr-badge-layer {
-            top: 7rem;
-            left: initial;
-            right: 2rem;
-            bottom: initial;
-        }
-
         &.menu-layer {
             top: initial;
             left: initial;

From 85176d36a2d78b0eff309a77690b6115fd052116 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Tue, 21 Apr 2026 18:36:06 +0300
Subject: [PATCH 3/6] bump: stremio-icons to v5.10.0

---
 package.json   |  2 +-
 pnpm-lock.yaml | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 4fe8c9adf..f2adc8717 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
         "@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-icons": "5.10.0",
         "@stremio/stremio-video": "0.0.75",
         "a-color-picker": "1.2.1",
         "bowser": "2.11.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4c9853d5f..74fb95ad1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,8 +21,8 @@ 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
@@ -1123,8 +1123,8 @@ 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==}
@@ -5874,7 +5874,7 @@ 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':
     dependencies:

From 7f28b54ce8dbdfbfb5ddcaf35baffc2bb100a56e Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 22 Apr 2026 12:47:35 +0300
Subject: [PATCH 4/6] bump: stremio-video to v0.0.76

---
 package.json   |  2 +-
 pnpm-lock.yaml | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index f2adc8717..87886609b 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
         "@stremio/stremio-colors": "5.2.0",
         "@stremio/stremio-core-web": "0.56.4",
         "@stremio/stremio-icons": "5.10.0",
-        "@stremio/stremio-video": "0.0.75",
+        "@stremio/stremio-video": "0.0.76",
         "a-color-picker": "1.2.1",
         "bowser": "2.11.0",
         "buffer": "6.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 74fb95ad1..c55322654 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         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
@@ -1126,8 +1126,8 @@ packages:
   '@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==}
@@ -5876,7 +5876,7 @@ snapshots:
 
   '@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

From b4908574bfb4675f6287765b447abf1ea0e5ccc7 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 22 Apr 2026 12:47:44 +0300
Subject: [PATCH 5/6] remove player control shadows

---
 src/routes/Player/styles.less | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index 4894791f0..4ded33221 100644
--- a/src/routes/Player/styles.less
+++ b/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: "";
             }
         }

From c78230340753a9d3c0a622c241dfdc261ef40553 Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 22 Apr 2026 17:12:51 +0200
Subject: [PATCH 6/6] refactor: move media session logic to hook

---
 src/routes/Player/Player.js          | 48 +----------------------
 src/routes/Player/useMediaSession.ts | 57 ++++++++++++++++++++++++++++
 src/routes/Player/videoState.d.ts    |  3 ++
 src/types/models/Player.d.ts         |  1 -
 4 files changed, 62 insertions(+), 47 deletions(-)
 create mode 100644 src/routes/Player/useMediaSession.ts
 create mode 100644 src/routes/Player/videoState.d.ts

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 662717b70..77e8a952c 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -28,6 +28,7 @@ const useVideo = require('./useVideo');
 const styles = require('./styles');
 const Video = require('./Video');
 const { default: Indicator } = require('./Indicator/Indicator');
+const { default: useMediaSession } = require('./useMediaSession');
 
 const findTrackByLang = (tracks, lang) => tracks.find((track) => track.lang === lang || langs.where('1', track.lang)?.[2] === lang);
 const findTrackById = (tracks, id) => tracks.find((track) => track.id === id);
@@ -596,52 +597,7 @@ const Player = ({ urlParams, queryParams }) => {
         }
     }, [settings.pauseOnMinimize, shell.windowClosed, shell.windowHidden]);
 
-    // Media Session PlaybackState
-    React.useEffect(() => {
-        if (!navigator.mediaSession) return;
-
-        const playbackState = !video.state.paused ? 'playing' : 'paused';
-        navigator.mediaSession.playbackState = playbackState;
-
-        return () => navigator.mediaSession.playbackState = 'none';
-    }, [video.state.paused]);
-
-    // Media Session Metadata
-    React.useEffect(() => {
-        if (!navigator.mediaSession) return;
-
-        const metaItem = player.metaItem && player.metaItem?.type === 'Ready' ? player.metaItem.content : null;
-        const videoId = player.selected ? player.selected?.streamRequest?.path?.id : null;
-        const video = metaItem ? metaItem.videos.find(({ id }) => id === videoId) : null;
-
-        const videoInfo = video && video.season && video.episode ? ` (${video.season}x${video.episode})` : null;
-        const videoTitle = video ? `${video.title}${videoInfo}` : null;
-        const metaTitle = metaItem ? metaItem.name : null;
-        const imageUrl = metaItem ? metaItem.logo : null;
-
-        const title = videoTitle ?? metaTitle;
-        const artist = videoTitle ? metaTitle : undefined;
-        const artwork = imageUrl ? [{ src: imageUrl }] : undefined;
-
-        if (title) {
-            navigator.mediaSession.metadata = new MediaMetadata({
-                title,
-                artist,
-                artwork,
-            });
-        }
-    }, [player.metaItem, player.selected]);
-
-    // Media Session Actions
-    React.useEffect(() => {
-        if (!navigator.mediaSession) return;
-
-        navigator.mediaSession.setActionHandler('play', onPlayRequested);
-        navigator.mediaSession.setActionHandler('pause', onPauseRequested);
-
-        const nexVideoCallback = player.nextVideo ? onNextVideoRequested : null;
-        navigator.mediaSession.setActionHandler('nexttrack', nexVideoCallback);
-    }, [player.nextVideo, onPlayRequested, onPauseRequested, onNextVideoRequested]);
+    useMediaSession(video.state, player, onPlayRequested, onPauseRequested, onNextVideoRequested);
 
     onShortcut('seekForward', (combo) => {
         if (video.state.time !== null) {
diff --git a/src/routes/Player/useMediaSession.ts b/src/routes/Player/useMediaSession.ts
new file mode 100644
index 000000000..7a63423bd
--- /dev/null
+++ b/src/routes/Player/useMediaSession.ts
@@ -0,0 +1,57 @@
+import { useEffect } from 'react';
+
+const useMediaSession = (
+    videoState: VideoState,
+    player: Player,
+    onPlayRequested: () => void,
+    onPauseRequested: () => void,
+    onNextVideoRequested: () => void,
+) => {
+    useEffect(() => {
+        if (!navigator.mediaSession) return;
+
+        const playbackState = !videoState.paused ? 'playing' : 'paused';
+        navigator.mediaSession.playbackState = playbackState;
+
+        return () => {
+            navigator.mediaSession.playbackState = 'none';
+        };
+    }, [videoState.paused]);
+
+    useEffect(() => {
+        if (!navigator.mediaSession) return;
+
+        const metaItem = player.metaItem && player.metaItem?.type === 'Ready' ? player.metaItem.content as MetaItemPlayer : null;
+        const videoId = player.selected ? player.selected?.streamRequest?.path?.id : null;
+        const video = metaItem?.videos.find(({ id }) => id === videoId);
+
+        const videoInfo = video?.season && video?.episode ? ` (${video.season}x${video.episode})` : null;
+        const videoTitle = video ? `${video.title}${videoInfo}` : null;
+        const metaTitle = metaItem ? metaItem.name : null;
+        const imageUrl = metaItem ? metaItem.logo : null;
+
+        const title = videoTitle ?? metaTitle;
+        const artist = (videoTitle && metaTitle) ?? undefined;
+        const artwork = imageUrl ? [{ src: imageUrl }] : undefined;
+
+        if (title) {
+            navigator.mediaSession.metadata = new MediaMetadata({
+                title,
+                artist,
+                artwork,
+            });
+        }
+    }, [player.metaItem, player.selected]);
+
+    useEffect(() => {
+        if (!navigator.mediaSession) return;
+
+        navigator.mediaSession.setActionHandler('play', onPlayRequested);
+        navigator.mediaSession.setActionHandler('pause', onPauseRequested);
+
+        const nexVideoCallback = player.nextVideo ? onNextVideoRequested : null;
+        navigator.mediaSession.setActionHandler('nexttrack', nexVideoCallback);
+    }, [player.nextVideo, onPlayRequested, onPauseRequested, onNextVideoRequested]);
+};
+
+export default useMediaSession;
diff --git a/src/routes/Player/videoState.d.ts b/src/routes/Player/videoState.d.ts
new file mode 100644
index 000000000..0f8a78c10
--- /dev/null
+++ b/src/routes/Player/videoState.d.ts
@@ -0,0 +1,3 @@
+type VideoState = {
+    paused?: boolean;
+};
diff --git a/src/types/models/Player.d.ts b/src/types/models/Player.d.ts
index 321127316..14e78a768 100644
--- a/src/types/models/Player.d.ts
+++ b/src/types/models/Player.d.ts
@@ -5,7 +5,6 @@ type LibraryItemPlayer = Pick<LibraryItem, '_id'> & {
 type VideoPlayer = Video & {
     upcoming: boolean,
     watched: boolean,
-    progress: boolean | null,
     scheduled: boolean,
     deepLinks: VideoDeepLinks,
 };