From 5c898567651ad45e7ea153e35e25a313ba8dcf29 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Tue, 31 Mar 2020 12:13:58 +0300
Subject: [PATCH 01/27] sample InfoMenu component added

---
 src/routes/Player/ControlBar/ControlBar.js    | 10 ++---
 .../InfoMenuButton.js}                        | 16 +++----
 .../Player/ControlBar/InfoMenuButton/index.js |  3 ++
 .../ControlBar/MetaPreviewButton/index.js     |  3 --
 src/routes/Player/InfoMenu/InfoMenu.js        | 22 ++++++++++
 src/routes/Player/InfoMenu/index.js           |  3 ++
 src/routes/Player/InfoMenu/styles.less        |  3 ++
 src/routes/Player/Player.js                   | 43 ++++++++++---------
 8 files changed, 66 insertions(+), 37 deletions(-)
 rename src/routes/Player/ControlBar/{MetaPreviewButton/MetaPreviewButton.js => InfoMenuButton/InfoMenuButton.js} (64%)
 create mode 100644 src/routes/Player/ControlBar/InfoMenuButton/index.js
 delete mode 100644 src/routes/Player/ControlBar/MetaPreviewButton/index.js
 create mode 100644 src/routes/Player/InfoMenu/InfoMenu.js
 create mode 100644 src/routes/Player/InfoMenu/index.js
 create mode 100644 src/routes/Player/InfoMenu/styles.less

diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index cbc37920f..a8be75d45 100644
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@@ -3,7 +3,7 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const { Button } = require('stremio/common');
-const MetaPreviewButton = require('./MetaPreviewButton');
+const InfoMenuButton = require('./InfoMenuButton');
 const MuteButton = require('./MuteButton');
 const PlayPauseButton = require('./PlayPauseButton');
 const SeekBar = require('./SeekBar');
@@ -27,7 +27,7 @@ const ControlBar = ({
     onVolumeChangeRequested,
     onSeekRequested,
     onToggleSubtitlesPicker,
-    onToggleMetaPreview,
+    onToggleInfoMenu,
     ...props
 }) => {
     return (
@@ -61,10 +61,10 @@ const ControlBar = ({
                 <Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
                     <Icon className={'icon'} icon={'ic_network'} />
                 </Button>
-                <MetaPreviewButton
+                <InfoMenuButton
                     className={styles['control-bar-button']}
                     metaResource={metaResource}
-                    onToggleMetaPreview={onToggleMetaPreview}
+                    onToggleInfoMenu={onToggleInfoMenu}
                 />
                 <Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
                     <Icon className={'icon'} icon={'ic_cast'} />
@@ -98,7 +98,7 @@ ControlBar.propTypes = {
     onVolumeChangeRequested: PropTypes.any,
     onSeekRequested: PropTypes.any,
     onToggleSubtitlesPicker: PropTypes.any,
-    onToggleMetaPreview: PropTypes.any
+    onToggleInfoMenu: PropTypes.any
 };
 
 module.exports = ControlBar;
diff --git a/src/routes/Player/ControlBar/MetaPreviewButton/MetaPreviewButton.js b/src/routes/Player/ControlBar/InfoMenuButton/InfoMenuButton.js
similarity index 64%
rename from src/routes/Player/ControlBar/MetaPreviewButton/MetaPreviewButton.js
rename to src/routes/Player/ControlBar/InfoMenuButton/InfoMenuButton.js
index 6bb2ec221..de76d1658 100644
--- a/src/routes/Player/ControlBar/MetaPreviewButton/MetaPreviewButton.js
+++ b/src/routes/Player/ControlBar/InfoMenuButton/InfoMenuButton.js
@@ -4,15 +4,15 @@ const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const { Button } = require('stremio/common');
 
-const MetaPreviewButton = ({ className, metaResource, onToggleMetaPreview }) => {
+const InfoMenuButton = ({ className, metaResource, onToggleInfoMenu }) => {
     const onMouseDown = React.useCallback((event) => {
-        event.nativeEvent.metaPreviewClosePrevented = true;
+        event.nativeEvent.infoMenuClosePrevented = true;
     }, []);
     const onClick = React.useCallback(() => {
-        if (typeof onToggleMetaPreview === 'function') {
-            onToggleMetaPreview();
+        if (typeof onToggleInfoMenu === 'function') {
+            onToggleInfoMenu();
         }
-    }, [onToggleMetaPreview]);
+    }, [onToggleInfoMenu]);
     return (
         <Button className={classnames(className, { 'disabled': metaResource === null || metaResource.content.type !== 'Ready' })} tabIndex={-1} onMouseDown={onMouseDown} onClick={onClick}>
             <Icon className={'icon'} icon={'ic_info'} />
@@ -20,10 +20,10 @@ const MetaPreviewButton = ({ className, metaResource, onToggleMetaPreview }) =>
     );
 };
 
-MetaPreviewButton.propTypes = {
+InfoMenuButton.propTypes = {
     className: PropTypes.string,
     metaResource: PropTypes.object,
-    onToggleMetaPreview: PropTypes.func
+    onToggleInfoMenu: PropTypes.func
 };
 
-module.exports = MetaPreviewButton;
+module.exports = InfoMenuButton;
diff --git a/src/routes/Player/ControlBar/InfoMenuButton/index.js b/src/routes/Player/ControlBar/InfoMenuButton/index.js
new file mode 100644
index 000000000..6dfeff76d
--- /dev/null
+++ b/src/routes/Player/ControlBar/InfoMenuButton/index.js
@@ -0,0 +1,3 @@
+const InfoMenuButton = require('./InfoMenuButton');
+
+module.exports = InfoMenuButton;
diff --git a/src/routes/Player/ControlBar/MetaPreviewButton/index.js b/src/routes/Player/ControlBar/MetaPreviewButton/index.js
deleted file mode 100644
index ecea92ab1..000000000
--- a/src/routes/Player/ControlBar/MetaPreviewButton/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const MetaPreviewButton = require('./MetaPreviewButton');
-
-module.exports = MetaPreviewButton;
diff --git a/src/routes/Player/InfoMenu/InfoMenu.js b/src/routes/Player/InfoMenu/InfoMenu.js
new file mode 100644
index 000000000..5d5dd1202
--- /dev/null
+++ b/src/routes/Player/InfoMenu/InfoMenu.js
@@ -0,0 +1,22 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const MetaPreview = require('stremio/common/MetaPreview');
+const styles = require('./styles');
+
+const InfoMenu = ({ className }) => {
+    const onMouseDown = React.useCallback((event) => {
+        event.nativeEvent.infoMenuClosePrevented = true;
+    }, []);
+    return (
+        <div className={classnames(className, styles['info-menu-container'])} onMouseDown={onMouseDown}>
+            <MetaPreview name={'Info menu name'} />
+        </div>
+    );
+};
+
+InfoMenu.propTypes = {
+    className: PropTypes.string,
+};
+
+module.exports = InfoMenu;
diff --git a/src/routes/Player/InfoMenu/index.js b/src/routes/Player/InfoMenu/index.js
new file mode 100644
index 000000000..a5f56d1ef
--- /dev/null
+++ b/src/routes/Player/InfoMenu/index.js
@@ -0,0 +1,3 @@
+const InfoMenu = require('./InfoMenu');
+
+module.exports = InfoMenu;
diff --git a/src/routes/Player/InfoMenu/styles.less b/src/routes/Player/InfoMenu/styles.less
new file mode 100644
index 000000000..67d10f13e
--- /dev/null
+++ b/src/routes/Player/InfoMenu/styles.less
@@ -0,0 +1,3 @@
+.info-menu-container {
+    
+}
\ No newline at end of file
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 1e6861ac5..458a7c5f3 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -7,6 +7,7 @@ const { useServices } = require('stremio/services');
 const { HorizontalNavBar, useDeepEqualEffect, useDeepEqualMemo, useFullscreen, useBinaryState, useToast } = require('stremio/common');
 const BufferingLoader = require('./BufferingLoader');
 const ControlBar = require('./ControlBar');
+const InfoMenu = require('./InfoMenu');
 const SubtitlesPicker = require('./SubtitlesPicker');
 const Video = require('./Video');
 const usePlayer = require('./usePlayer');
@@ -23,7 +24,7 @@ const Player = ({ urlParams }) => {
     const [immersed, setImmersed] = React.useState(true);
     const setImmersedDebounced = React.useCallback(debounce(setImmersed, 3000), []);
     const [subtitlesPickerOpen, , closeSubtitlesPicker, toggleSubtitlesPicker] = useBinaryState(false);
-    const [metaPreviewOpen, , closeMetaPreview, toggleMetaPreview] = useBinaryState(false);
+    const [infoMenuOpen, , closeInfoMenu, toggleInfoMenu] = useBinaryState(false);
     const [error, setError] = React.useState(null);
     const [videoState, setVideoState] = React.useReducer(
         (videoState, nextVideoState) => ({ ...videoState, ...nextVideoState }),
@@ -142,8 +143,8 @@ const Player = ({ urlParams }) => {
         if (!event.nativeEvent.subtitlesPickerClosePrevented) {
             closeSubtitlesPicker();
         }
-        if (!event.nativeEvent.metaPreviewClosePrevented) {
-            closeMetaPreview();
+        if (!event.nativeEvent.infoMenuClosePrevented) {
+            closeInfoMenu();
         }
     }, []);
     const onContainerMouseMove = React.useCallback((event) => {
@@ -244,7 +245,7 @@ const Player = ({ urlParams }) => {
         const onKeyDown = (event) => {
             switch (event.code) {
                 case 'Space': {
-                    if (!subtitlesPickerOpen && !metaPreviewOpen && videoState.paused !== null) {
+                    if (!subtitlesPickerOpen && !infoMenuOpen && videoState.paused !== null) {
                         if (videoState.paused) {
                             onPlayRequested();
                         } else {
@@ -255,46 +256,46 @@ const Player = ({ urlParams }) => {
                     break;
                 }
                 case 'ArrowRight': {
-                    if (!subtitlesPickerOpen && !metaPreviewOpen && videoState.time !== null) {
+                    if (!subtitlesPickerOpen && !infoMenuOpen && videoState.time !== null) {
                         onSeekRequested(videoState.time + 15000);
                     }
 
                     break;
                 }
                 case 'ArrowLeft': {
-                    if (!subtitlesPickerOpen && !metaPreviewOpen && videoState.time !== null) {
+                    if (!subtitlesPickerOpen && !infoMenuOpen && videoState.time !== null) {
                         onSeekRequested(videoState.time - 15000);
                     }
 
                     break;
                 }
                 case 'ArrowUp': {
-                    if (!subtitlesPickerOpen && !metaPreviewOpen && videoState.volume !== null) {
+                    if (!subtitlesPickerOpen && !infoMenuOpen && videoState.volume !== null) {
                         onVolumeChangeRequested(videoState.volume + 5);
                     }
 
                     break;
                 }
                 case 'ArrowDown': {
-                    if (!subtitlesPickerOpen && !metaPreviewOpen && videoState.volume !== null) {
+                    if (!subtitlesPickerOpen && !infoMenuOpen && videoState.volume !== null) {
                         onVolumeChangeRequested(videoState.volume - 5);
                     }
 
                     break;
                 }
                 case 'KeyS': {
-                    closeMetaPreview();
+                    closeInfoMenu();
                     toggleSubtitlesPicker();
                     break;
                 }
                 case 'KeyM': {
                     closeSubtitlesPicker();
-                    toggleMetaPreview();
+                    toggleInfoMenu();
                     break;
                 }
                 case 'Escape': {
                     closeSubtitlesPicker();
-                    closeMetaPreview();
+                    closeInfoMenu();
                     break;
                 }
             }
@@ -305,14 +306,14 @@ const Player = ({ urlParams }) => {
         return () => {
             window.removeEventListener('keydown', onKeyDown);
         };
-    }, [routeFocused, subtitlesPickerOpen, metaPreviewOpen, videoState.paused, videoState.time, videoState.volume, toggleSubtitlesPicker, toggleMetaPreview]);
+    }, [routeFocused, subtitlesPickerOpen, infoMenuOpen, videoState.paused, videoState.time, videoState.volume, toggleSubtitlesPicker, toggleInfoMenu]);
     React.useLayoutEffect(() => {
         return () => {
             setImmersedDebounced.cancel();
         };
     }, []);
     return (
-        <div className={classnames(styles['player-container'], { [styles['immersed']]: immersed && videoState.paused !== null && !videoState.paused && !subtitlesPickerOpen && !metaPreviewOpen })}
+        <div className={classnames(styles['player-container'], { [styles['immersed']]: immersed && videoState.paused !== null && !videoState.paused && !subtitlesPickerOpen && !infoMenuOpen })}
             onMouseDown={onContainerMouseDown}
             onMouseMove={onContainerMouseMove}
             onMouseOver={onContainerMouseMove}
@@ -365,7 +366,7 @@ const Player = ({ urlParams }) => {
                 volume={videoState.volume}
                 muted={videoState.muted}
                 subtitlesTracks={videoState.subtitlesTracks}
-                metaResource={null}
+                metaResource={player.meta_resource}
                 onPlayRequested={onPlayRequested}
                 onPauseRequested={onPauseRequested}
                 onMuteRequested={onMuteRequested}
@@ -373,7 +374,7 @@ const Player = ({ urlParams }) => {
                 onVolumeChangeRequested={onVolumeChangeRequested}
                 onSeekRequested={onSeekRequested}
                 onToggleSubtitlesPicker={toggleSubtitlesPicker}
-                onToggleMetaPreview={toggleMetaPreview}
+                onToggleInfoMenu={toggleInfoMenu}
                 onMouseMove={onBarMouseMove}
                 onMouseOver={onBarMouseMove}
             />
@@ -397,14 +398,14 @@ const Player = ({ urlParams }) => {
                     :
                     null
             }
-            {/* {
-                metaPreviewOpen ?
-                    <div className={classnames(styles['layer'], styles['menu-layer'])} onMouseDown={(event) => event.nativeEvent.metaPreviewClosePrevented = true}>
-                        <div style={{ width: 300, height: 800, background: 'red' }} />
-                    </div>
+            {
+                infoMenuOpen ?
+                    <InfoMenu
+                        className={classnames(styles['layer'], styles['menu-layer'])}
+                    />
                     :
                     null
-            } */}
+            }
         </div>
     );
 };

From ec2a27a72d7b151108630596cad08c84e8a45d78 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Tue, 31 Mar 2020 12:15:04 +0300
Subject: [PATCH 02/27] menu background moved to common classname

---
 src/routes/Player/SubtitlesPicker/styles.less | 1 -
 src/routes/Player/styles.less                 | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/Player/SubtitlesPicker/styles.less b/src/routes/Player/SubtitlesPicker/styles.less
index eac05c0aa..3718500ca 100644
--- a/src/routes/Player/SubtitlesPicker/styles.less
+++ b/src/routes/Player/SubtitlesPicker/styles.less
@@ -4,7 +4,6 @@
     height: 23rem;
     display: flex;
     flex-direction: row;
-    background-color: @color-background-dark1;
 
     .languages-container, .variants-container, .subtitles-settings-container {
         flex: none;
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index 9c3c6ce50..e691dc12e 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -104,6 +104,7 @@ html:not(.active-slider-within) {
             bottom: 8rem;
             max-height: calc(100% - 13.5rem);
             max-width: calc(100% - 4rem);
+            background-color: @color-background-dark1;
             box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
                 0 1.1rem 0.85rem @color-background-dark5-20;
             overflow: auto;

From faf6f9914ac42990cb6fd148398afdaa8e21284d Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Tue, 31 Mar 2020 12:35:59 +0300
Subject: [PATCH 03/27] InfoMenu availability handled

---
 src/routes/Player/ControlBar/ControlBar.js            |  7 +++----
 .../ControlBar/InfoMenuButton/InfoMenuButton.js       |  6 ++----
 src/routes/Player/Player.js                           | 11 ++++++++---
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index a8be75d45..1b00b5903 100644
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@@ -13,13 +13,13 @@ const styles = require('./styles');
 
 const ControlBar = ({
     className,
+    infoAvailable,
     paused,
     time,
     duration,
     volume,
     muted,
     subtitlesTracks,
-    metaResource,
     onPlayRequested,
     onPauseRequested,
     onMuteRequested,
@@ -62,8 +62,7 @@ const ControlBar = ({
                     <Icon className={'icon'} icon={'ic_network'} />
                 </Button>
                 <InfoMenuButton
-                    className={styles['control-bar-button']}
-                    metaResource={metaResource}
+                    className={classnames(styles['control-bar-button'], { 'disabled': !infoAvailable })}
                     onToggleInfoMenu={onToggleInfoMenu}
                 />
                 <Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
@@ -84,13 +83,13 @@ const ControlBar = ({
 
 ControlBar.propTypes = {
     className: PropTypes.string,
+    infoAvailable: PropTypes.bool,
     paused: PropTypes.any,
     time: PropTypes.any,
     duration: PropTypes.any,
     volume: PropTypes.any,
     muted: PropTypes.any,
     subtitlesTracks: PropTypes.any,
-    metaResource: PropTypes.any,
     onPlayRequested: PropTypes.any,
     onPauseRequested: PropTypes.any,
     onMuteRequested: PropTypes.any,
diff --git a/src/routes/Player/ControlBar/InfoMenuButton/InfoMenuButton.js b/src/routes/Player/ControlBar/InfoMenuButton/InfoMenuButton.js
index de76d1658..2062a2bdd 100644
--- a/src/routes/Player/ControlBar/InfoMenuButton/InfoMenuButton.js
+++ b/src/routes/Player/ControlBar/InfoMenuButton/InfoMenuButton.js
@@ -1,10 +1,9 @@
 const React = require('react');
 const PropTypes = require('prop-types');
-const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const { Button } = require('stremio/common');
 
-const InfoMenuButton = ({ className, metaResource, onToggleInfoMenu }) => {
+const InfoMenuButton = ({ className, onToggleInfoMenu }) => {
     const onMouseDown = React.useCallback((event) => {
         event.nativeEvent.infoMenuClosePrevented = true;
     }, []);
@@ -14,7 +13,7 @@ const InfoMenuButton = ({ className, metaResource, onToggleInfoMenu }) => {
         }
     }, [onToggleInfoMenu]);
     return (
-        <Button className={classnames(className, { 'disabled': metaResource === null || metaResource.content.type !== 'Ready' })} tabIndex={-1} onMouseDown={onMouseDown} onClick={onClick}>
+        <Button className={className} tabIndex={-1} onMouseDown={onMouseDown} onClick={onClick}>
             <Icon className={'icon'} icon={'ic_info'} />
         </Button>
     );
@@ -22,7 +21,6 @@ const InfoMenuButton = ({ className, metaResource, onToggleInfoMenu }) => {
 
 InfoMenuButton.propTypes = {
     className: PropTypes.string,
-    metaResource: PropTypes.object,
     onToggleInfoMenu: PropTypes.func
 };
 
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 458a7c5f3..aad84aaca 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -26,6 +26,9 @@ const Player = ({ urlParams }) => {
     const [subtitlesPickerOpen, , closeSubtitlesPicker, toggleSubtitlesPicker] = useBinaryState(false);
     const [infoMenuOpen, , closeInfoMenu, toggleInfoMenu] = useBinaryState(false);
     const [error, setError] = React.useState(null);
+    const infoAvailable = React.useMemo(() => {
+        return player.meta_resource !== null && player.meta_resource.content.type === 'Ready';
+    }, [player.meta_resource]);
     const [videoState, setVideoState] = React.useReducer(
         (videoState, nextVideoState) => ({ ...videoState, ...nextVideoState }),
         {
@@ -290,7 +293,9 @@ const Player = ({ urlParams }) => {
                 }
                 case 'KeyM': {
                     closeSubtitlesPicker();
-                    toggleInfoMenu();
+                    if (infoAvailable) {
+                        toggleInfoMenu();
+                    }
                     break;
                 }
                 case 'Escape': {
@@ -306,7 +311,7 @@ const Player = ({ urlParams }) => {
         return () => {
             window.removeEventListener('keydown', onKeyDown);
         };
-    }, [routeFocused, subtitlesPickerOpen, infoMenuOpen, videoState.paused, videoState.time, videoState.volume, toggleSubtitlesPicker, toggleInfoMenu]);
+    }, [routeFocused, subtitlesPickerOpen, infoAvailable, infoMenuOpen, videoState.paused, videoState.time, videoState.volume, toggleSubtitlesPicker, toggleInfoMenu]);
     React.useLayoutEffect(() => {
         return () => {
             setImmersedDebounced.cancel();
@@ -366,7 +371,7 @@ const Player = ({ urlParams }) => {
                 volume={videoState.volume}
                 muted={videoState.muted}
                 subtitlesTracks={videoState.subtitlesTracks}
-                metaResource={player.meta_resource}
+                infoAvailable={infoAvailable}
                 onPlayRequested={onPlayRequested}
                 onPauseRequested={onPauseRequested}
                 onMuteRequested={onMuteRequested}

From b0801e6686c58c7aea56ef2f339f3e18870945c8 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Tue, 31 Mar 2020 12:54:36 +0300
Subject: [PATCH 04/27] hooks in player optimized

---
 src/routes/Player/Player.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index aad84aaca..107689ccf 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -4,7 +4,7 @@ const classnames = require('classnames');
 const debounce = require('lodash.debounce');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
-const { HorizontalNavBar, useDeepEqualEffect, useDeepEqualMemo, useFullscreen, useBinaryState, useToast } = require('stremio/common');
+const { HorizontalNavBar, useDeepEqualEffect, useFullscreen, useBinaryState, useToast } = require('stremio/common');
 const BufferingLoader = require('./BufferingLoader');
 const ControlBar = require('./ControlBar');
 const InfoMenu = require('./InfoMenu');
@@ -28,7 +28,7 @@ const Player = ({ urlParams }) => {
     const [error, setError] = React.useState(null);
     const infoAvailable = React.useMemo(() => {
         return player.meta_resource !== null && player.meta_resource.content.type === 'Ready';
-    }, [player.meta_resource]);
+    }, [player]);
     const [videoState, setVideoState] = React.useReducer(
         (videoState, nextVideoState) => ({ ...videoState, ...nextVideoState }),
         {
@@ -67,7 +67,7 @@ const Player = ({ urlParams }) => {
     const onPropChanged = React.useCallback((propName, propValue) => {
         setVideoState({ [propName]: propValue });
     }, []);
-    const onEnded = useDeepEqualMemo(() => () => {
+    const onEnded = React.useCallback(() => {
         core.dispatch({ action: 'Unload' }, 'player');
         if (player.lib_item !== null) {
             core.dispatch({
@@ -82,7 +82,7 @@ const Player = ({ urlParams }) => {
             // TODO go to next video
         }
         window.history.back();
-    }, [player.next_video, player.lib_item]);
+    }, [player]);
     const onError = React.useCallback((error) => {
         if (error.critical) {
             setError(error);

From 816ee24690c71272d339fd0d6a3848b5da548938 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Tue, 31 Mar 2020 12:54:48 +0300
Subject: [PATCH 05/27] updateSettings deps fixed

---
 src/routes/Player/useSettings.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/Player/useSettings.js b/src/routes/Player/useSettings.js
index 8ad45791c..7cdb7cdf7 100644
--- a/src/routes/Player/useSettings.js
+++ b/src/routes/Player/useSettings.js
@@ -16,7 +16,7 @@ const useSettings = () => {
                 }
             }
         });
-    }, [profile.settings]);
+    }, [profile]);
     return [profile.settings, updateSettings];
 };
 

From 43ab0745b568b329864d1910c627206035fdfc4e Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Tue, 31 Mar 2020 13:53:27 +0300
Subject: [PATCH 06/27] player related action moved to usePlayer

---
 src/routes/Player/Player.js    | 24 ++++--------------------
 src/routes/Player/usePlayer.js | 22 +++++++++++++++++++++-
 2 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 107689ccf..90f6d25de 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -16,7 +16,7 @@ const styles = require('./styles');
 
 const Player = ({ urlParams }) => {
     const { core } = useServices();
-    const player = usePlayer(urlParams);
+    const [player, updateLibraryItemState, pushToLibrary] = usePlayer(urlParams);
     const [settings, updateSettings] = useSettings();
     const routeFocused = useRouteFocused();
     const toast = useToast();
@@ -219,29 +219,13 @@ const Player = ({ urlParams }) => {
     }, [settings.subtitles_offset]);
     React.useEffect(() => {
         if (videoState.time !== null && !isNaN(videoState.time) && videoState.duration !== null && !isNaN(videoState.duration)) {
-            core.dispatch({
-                action: 'Player',
-                args: {
-                    action: 'UpdateLibraryItemState',
-                    args: {
-                        time: videoState.time,
-                        duration: videoState.duration
-                    }
-                }
-            }, 'player');
+            updateLibraryItemState(videoState.time, videoState.duration);
         }
     }, [videoState.time, videoState.duration]);
     React.useEffect(() => {
-        const interval = setInterval(() => {
-            core.dispatch({
-                action: 'Player',
-                args: {
-                    action: 'PushToLibrary'
-                }
-            }, 'player');
-        }, 30000);
+        const intervalId = setInterval(pushToLibrary, 30000);
         return () => {
-            clearInterval(interval);
+            clearInterval(intervalId);
         };
     }, []);
     React.useLayoutEffect(() => {
diff --git a/src/routes/Player/usePlayer.js b/src/routes/Player/usePlayer.js
index 526d95278..808f86f5f 100644
--- a/src/routes/Player/usePlayer.js
+++ b/src/routes/Player/usePlayer.js
@@ -1,5 +1,6 @@
 const React = require('react');
 const pako = require('pako');
+const { useServices } = require('stremio/services');
 const { useModelState } = require('stremio/common');
 
 const initPlayerState = () => ({
@@ -82,6 +83,7 @@ const mapPlayerStateWithCtx = (player, ctx) => {
 };
 
 const usePlayer = (urlParams) => {
+    const { core } = useServices();
     const loadPlayerAction = React.useMemo(() => {
         try {
             return {
@@ -133,12 +135,30 @@ const usePlayer = (urlParams) => {
             };
         }
     }, [urlParams]);
-    return useModelState({
+    const updateLibraryItemState = React.useCallback((time, duration) => {
+        core.dispatch({
+            action: 'Player',
+            args: {
+                action: 'UpdateLibraryItemState',
+                args: { time, duration }
+            }
+        }, 'player');
+    }, []);
+    const pushToLibrary = React.useCallback(() => {
+        core.dispatch({
+            action: 'Player',
+            args: {
+                action: 'PushToLibrary'
+            }
+        }, 'player');
+    }, []);
+    const player = useModelState({
         model: 'player',
         action: loadPlayerAction,
         init: initPlayerState,
         mapWithCtx: mapPlayerStateWithCtx
     });
+    return [player, updateLibraryItemState, pushToLibrary];
 };
 
 module.exports = usePlayer;

From 2bdd7eb35f0aef80269f7685e1fa96a700c8b9bc Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Tue, 31 Mar 2020 14:02:14 +0300
Subject: [PATCH 07/27] prevent toggle play/pause when closing menu

---
 src/routes/Player/Player.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 90f6d25de..508330f86 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -333,6 +333,12 @@ const Player = ({ urlParams }) => {
                 onClick={onVideoClick}
                 onDoubleClick={toggleFullscreen}
             />
+            {
+                subtitlesPickerOpen || infoMenuOpen ?
+                    <div className={styles['layer']} />
+                    :
+                    null
+            }
             <HorizontalNavBar
                 className={classnames(styles['layer'], styles['nav-bar-layer'])}
                 title={

From 1ccca352d6792550269ed9f7105e5af688cd4c73 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Tue, 31 Mar 2020 16:20:01 +0300
Subject: [PATCH 08/27] playback toggle debounced for clicks on video overlay

---
 src/routes/Player/Player.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 508330f86..fcc1d0f73 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -106,9 +106,11 @@ const Player = ({ urlParams }) => {
     const onPlayRequested = React.useCallback(() => {
         dispatch({ propName: 'paused', propValue: false });
     }, []);
+    const onPlayRequestedDebounced = React.useCallback(debounce(onPlayRequested, 200), []);
     const onPauseRequested = React.useCallback(() => {
         dispatch({ propName: 'paused', propValue: true });
     }, []);
+    const onPauseRequestedDebounced = React.useCallback(debounce(onPauseRequested, 200), []);
     const onMuteRequested = React.useCallback(() => {
         dispatch({ propName: 'muted', propValue: true });
     }, []);
@@ -136,12 +138,17 @@ const Player = ({ urlParams }) => {
     const onVideoClick = React.useCallback(() => {
         if (videoState.paused !== null) {
             if (videoState.paused) {
-                onPlayRequested();
+                onPlayRequestedDebounced();
             } else {
-                onPauseRequested();
+                onPauseRequestedDebounced();
             }
         }
     }, [videoState.paused]);
+    const onVideoDoubleClick = React.useCallback(() => {
+        onPlayRequestedDebounced.cancel();
+        onPauseRequestedDebounced.cancel();
+        toggleFullscreen();
+    }, [toggleFullscreen]);
     const onContainerMouseDown = React.useCallback((event) => {
         if (!event.nativeEvent.subtitlesPickerClosePrevented) {
             closeSubtitlesPicker();
@@ -299,6 +306,8 @@ const Player = ({ urlParams }) => {
     React.useLayoutEffect(() => {
         return () => {
             setImmersedDebounced.cancel();
+            onPlayRequestedDebounced.cancel();
+            onPauseRequestedDebounced.cancel();
         };
     }, []);
     return (
@@ -331,7 +340,7 @@ const Player = ({ urlParams }) => {
             <div
                 className={styles['layer']}
                 onClick={onVideoClick}
-                onDoubleClick={toggleFullscreen}
+                onDoubleClick={onVideoDoubleClick}
             />
             {
                 subtitlesPickerOpen || infoMenuOpen ?

From 89be4e8d1648f1891f73e66bd5a5e679b87a9cae Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Tue, 31 Mar 2020 18:19:39 +0300
Subject: [PATCH 09/27] refactor player menus

---
 src/routes/Player/ControlBar/ControlBar.js    | 129 +++++++++++-------
 .../InfoMenuButton/InfoMenuButton.js          |  27 ----
 .../Player/ControlBar/InfoMenuButton/index.js |   3 -
 .../ControlBar/MuteButton/MuteButton.js       |  39 ------
 .../Player/ControlBar/MuteButton/index.js     |   3 -
 .../PlayPauseButton/PlayPauseButton.js        |  36 -----
 .../ControlBar/PlayPauseButton/index.js       |   3 -
 .../SubtitlesButton/SubtitlesButton.js        |  29 ----
 .../ControlBar/SubtitlesButton/index.js       |   3 -
 src/routes/Player/ControlBar/styles.less      |   4 +-
 src/routes/Player/Player.js                   |  56 +++++---
 .../Player/SubtitlesPicker/SubtitlesPicker.js |   2 +-
 12 files changed, 120 insertions(+), 214 deletions(-)
 delete mode 100644 src/routes/Player/ControlBar/InfoMenuButton/InfoMenuButton.js
 delete mode 100644 src/routes/Player/ControlBar/InfoMenuButton/index.js
 delete mode 100644 src/routes/Player/ControlBar/MuteButton/MuteButton.js
 delete mode 100644 src/routes/Player/ControlBar/MuteButton/index.js
 delete mode 100644 src/routes/Player/ControlBar/PlayPauseButton/PlayPauseButton.js
 delete mode 100644 src/routes/Player/ControlBar/PlayPauseButton/index.js
 delete mode 100644 src/routes/Player/ControlBar/SubtitlesButton/SubtitlesButton.js
 delete mode 100644 src/routes/Player/ControlBar/SubtitlesButton/index.js

diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index 1b00b5903..7d11ba108 100644
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@@ -3,33 +3,68 @@ const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
 const { Button } = require('stremio/common');
-const InfoMenuButton = require('./InfoMenuButton');
-const MuteButton = require('./MuteButton');
-const PlayPauseButton = require('./PlayPauseButton');
 const SeekBar = require('./SeekBar');
-const SubtitlesButton = require('./SubtitlesButton');
 const VolumeSlider = require('./VolumeSlider');
 const styles = require('./styles');
 
 const ControlBar = ({
     className,
-    infoAvailable,
     paused,
     time,
     duration,
     volume,
     muted,
     subtitlesTracks,
+    metaItem,
+    stream,
     onPlayRequested,
     onPauseRequested,
     onMuteRequested,
     onUnmuteRequested,
     onVolumeChangeRequested,
     onSeekRequested,
-    onToggleSubtitlesPicker,
+    onToggleSubtitlesMenu,
     onToggleInfoMenu,
     ...props
 }) => {
+    const onSubtitlesButtonMouseDown = React.useCallback((event) => {
+        event.nativeEvent.subtitlesMenuClosePrevented = true;
+    }, []);
+    const onInfoButtonMouseDown = React.useCallback((event) => {
+        event.nativeEvent.infoMenuClosePrevented = true;
+    }, []);
+    const onPlayPauseButtonClick = React.useCallback(() => {
+        if (paused) {
+            if (typeof onPlayRequested === 'function') {
+                onPlayRequested();
+            }
+        } else {
+            if (typeof onPauseRequested === 'function') {
+                onPauseRequested();
+            }
+        }
+    }, [paused, onPlayRequested, onPauseRequested]);
+    const onMuteButtonClick = React.useCallback(() => {
+        if (muted) {
+            if (typeof onUnmuteRequested === 'function') {
+                onUnmuteRequested();
+            }
+        } else {
+            if (typeof onMuteRequested === 'function') {
+                onMuteRequested();
+            }
+        }
+    }, [muted, onMuteRequested, onUnmuteRequested]);
+    const onSubtitlesButtonClick = React.useCallback(() => {
+        if (typeof onToggleSubtitlesMenu === 'function') {
+            onToggleSubtitlesMenu();
+        }
+    }, [onToggleSubtitlesMenu]);
+    const onInfoButtonClick = React.useCallback(() => {
+        if (typeof onToggleInfoMenu === 'function') {
+            onToggleInfoMenu();
+        }
+    }, [onToggleInfoMenu]);
     return (
         <div {...props} className={classnames(className, styles['control-bar-container'])}>
             <SeekBar
@@ -39,19 +74,21 @@ const ControlBar = ({
                 onSeekRequested={onSeekRequested}
             />
             <div className={styles['control-bar-buttons-container']}>
-                <PlayPauseButton
-                    className={styles['control-bar-button']}
-                    paused={paused}
-                    onPlayRequested={onPlayRequested}
-                    onPauseRequested={onPauseRequested}
-                />
-                <MuteButton
-                    className={styles['control-bar-button']}
-                    volume={volume}
-                    muted={muted}
-                    onMuteRequested={onMuteRequested}
-                    onUnmuteRequested={onUnmuteRequested}
-                />
+                <Button className={classnames(styles['control-bar-button'], { 'disabled': typeof paused !== 'boolean' })} title={paused ? 'Play' : 'Pause'} tabIndex={-1} onClick={onPlayPauseButtonClick}>
+                    <Icon className={styles['icon']} icon={typeof paused !== 'boolean' || paused ? 'ic_play' : 'ic_pause'} />
+                </Button>
+                <Button className={classnames(styles['control-bar-button'], { 'disabled': typeof muted !== 'boolean' })} title={muted ? 'Unmute' : 'Mute'} tabIndex={-1} onClick={onMuteButtonClick}>
+                    <Icon
+                        className={styles['icon']}
+                        icon={
+                            (typeof muted === 'boolean' && muted) ? 'ic_volume0' :
+                                (volume === null || isNaN(volume)) ? 'ic_volume3' :
+                                    volume < 30 ? 'ic_volume1' :
+                                        volume < 70 ? 'ic_volume2' :
+                                            'ic_volume3'
+                        }
+                    />
+                </Button>
                 <VolumeSlider
                     className={styles['volume-slider']}
                     volume={volume}
@@ -59,22 +96,19 @@ const ControlBar = ({
                 />
                 <div className={styles['spacing']} />
                 <Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
-                    <Icon className={'icon'} icon={'ic_network'} />
+                    <Icon className={styles['icon']} icon={'ic_network'} />
                 </Button>
-                <InfoMenuButton
-                    className={classnames(styles['control-bar-button'], { 'disabled': !infoAvailable })}
-                    onToggleInfoMenu={onToggleInfoMenu}
-                />
-                <Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
-                    <Icon className={'icon'} icon={'ic_cast'} />
+                <Button className={classnames(styles['control-bar-button'], { 'disabled': typeof metaItem !== 'object' || metaItem === null || typeof stream !== 'object' || stream === null })} tabIndex={-1} onMouseDown={onInfoButtonMouseDown} onClick={onInfoButtonClick}>
+                    <Icon className={styles['icon']} icon={'ic_info'} />
                 </Button>
-                <SubtitlesButton
-                    className={styles['control-bar-button']}
-                    subtitlesTracks={subtitlesTracks}
-                    onToggleSubtitlesPicker={onToggleSubtitlesPicker}
-                />
                 <Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
-                    <Icon className={'icon'} icon={'ic_videos'} />
+                    <Icon className={styles['icon']} icon={'ic_cast'} />
+                </Button>
+                <Button className={classnames(styles['control-bar-button'], { 'disabled': !Array.isArray(subtitlesTracks) || subtitlesTracks.length === 0 })} tabIndex={-1} onMouseDown={onSubtitlesButtonMouseDown} onClick={onSubtitlesButtonClick}>
+                    <Icon className={styles['icon']} icon={'ic_sub'} />
+                </Button>
+                <Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
+                    <Icon className={styles['icon']} icon={'ic_videos'} />
                 </Button>
             </div>
         </div>
@@ -83,21 +117,22 @@ const ControlBar = ({
 
 ControlBar.propTypes = {
     className: PropTypes.string,
-    infoAvailable: PropTypes.bool,
-    paused: PropTypes.any,
-    time: PropTypes.any,
-    duration: PropTypes.any,
-    volume: PropTypes.any,
-    muted: PropTypes.any,
-    subtitlesTracks: PropTypes.any,
-    onPlayRequested: PropTypes.any,
-    onPauseRequested: PropTypes.any,
-    onMuteRequested: PropTypes.any,
-    onUnmuteRequested: PropTypes.any,
-    onVolumeChangeRequested: PropTypes.any,
-    onSeekRequested: PropTypes.any,
-    onToggleSubtitlesPicker: PropTypes.any,
-    onToggleInfoMenu: PropTypes.any
+    paused: PropTypes.bool,
+    time: PropTypes.number,
+    duration: PropTypes.number,
+    volume: PropTypes.number,
+    muted: PropTypes.bool,
+    subtitlesTracks: PropTypes.array,
+    metaItem: PropTypes.object,
+    stream: PropTypes.object,
+    onPlayRequested: PropTypes.func,
+    onPauseRequested: PropTypes.func,
+    onMuteRequested: PropTypes.func,
+    onUnmuteRequested: PropTypes.func,
+    onVolumeChangeRequested: PropTypes.func,
+    onSeekRequested: PropTypes.func,
+    onToggleSubtitlesMenu: PropTypes.func,
+    onToggleInfoMenu: PropTypes.func
 };
 
 module.exports = ControlBar;
diff --git a/src/routes/Player/ControlBar/InfoMenuButton/InfoMenuButton.js b/src/routes/Player/ControlBar/InfoMenuButton/InfoMenuButton.js
deleted file mode 100644
index 2062a2bdd..000000000
--- a/src/routes/Player/ControlBar/InfoMenuButton/InfoMenuButton.js
+++ /dev/null
@@ -1,27 +0,0 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const Icon = require('stremio-icons/dom');
-const { Button } = require('stremio/common');
-
-const InfoMenuButton = ({ className, onToggleInfoMenu }) => {
-    const onMouseDown = React.useCallback((event) => {
-        event.nativeEvent.infoMenuClosePrevented = true;
-    }, []);
-    const onClick = React.useCallback(() => {
-        if (typeof onToggleInfoMenu === 'function') {
-            onToggleInfoMenu();
-        }
-    }, [onToggleInfoMenu]);
-    return (
-        <Button className={className} tabIndex={-1} onMouseDown={onMouseDown} onClick={onClick}>
-            <Icon className={'icon'} icon={'ic_info'} />
-        </Button>
-    );
-};
-
-InfoMenuButton.propTypes = {
-    className: PropTypes.string,
-    onToggleInfoMenu: PropTypes.func
-};
-
-module.exports = InfoMenuButton;
diff --git a/src/routes/Player/ControlBar/InfoMenuButton/index.js b/src/routes/Player/ControlBar/InfoMenuButton/index.js
deleted file mode 100644
index 6dfeff76d..000000000
--- a/src/routes/Player/ControlBar/InfoMenuButton/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const InfoMenuButton = require('./InfoMenuButton');
-
-module.exports = InfoMenuButton;
diff --git a/src/routes/Player/ControlBar/MuteButton/MuteButton.js b/src/routes/Player/ControlBar/MuteButton/MuteButton.js
deleted file mode 100644
index 7e3c2b0b5..000000000
--- a/src/routes/Player/ControlBar/MuteButton/MuteButton.js
+++ /dev/null
@@ -1,39 +0,0 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const classnames = require('classnames');
-const Icon = require('stremio-icons/dom');
-const { Button } = require('stremio/common');
-
-const MuteButton = ({ className, muted, volume, onMuteRequested, onUnmuteRequested }) => {
-    const toggleMuted = React.useCallback(() => {
-        if (muted) {
-            if (typeof onUnmuteRequested === 'function') {
-                onUnmuteRequested();
-            }
-        } else {
-            if (typeof onMuteRequested === 'function') {
-                onMuteRequested();
-            }
-        }
-    }, [muted, onMuteRequested, onUnmuteRequested]);
-    const icon = (typeof muted === 'boolean' && muted) ? 'ic_volume0' :
-        (volume === null || isNaN(volume)) ? 'ic_volume3' :
-            volume < 30 ? 'ic_volume1' :
-                volume < 70 ? 'ic_volume2' :
-                    'ic_volume3';
-    return (
-        <Button className={classnames(className, { 'disabled': typeof muted !== 'boolean' })} title={muted ? 'Unmute' : 'Mute'} tabIndex={-1} onClick={toggleMuted}>
-            <Icon className={'icon'} icon={icon} />
-        </Button>
-    );
-};
-
-MuteButton.propTypes = {
-    className: PropTypes.string,
-    muted: PropTypes.bool,
-    volume: PropTypes.number,
-    onMuteRequested: PropTypes.func,
-    onUnmuteRequested: PropTypes.func
-};
-
-module.exports = MuteButton;
diff --git a/src/routes/Player/ControlBar/MuteButton/index.js b/src/routes/Player/ControlBar/MuteButton/index.js
deleted file mode 100644
index 3bc5c743b..000000000
--- a/src/routes/Player/ControlBar/MuteButton/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const MuteButton = require('./MuteButton');
-
-module.exports = MuteButton;
diff --git a/src/routes/Player/ControlBar/PlayPauseButton/PlayPauseButton.js b/src/routes/Player/ControlBar/PlayPauseButton/PlayPauseButton.js
deleted file mode 100644
index 34d9bbd7f..000000000
--- a/src/routes/Player/ControlBar/PlayPauseButton/PlayPauseButton.js
+++ /dev/null
@@ -1,36 +0,0 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const classnames = require('classnames');
-const Icon = require('stremio-icons/dom');
-const { Button } = require('stremio/common');
-
-const PlayPauseButton = ({ className, paused, onPlayRequested, onPauseRequested }) => {
-    const togglePaused = React.useCallback(() => {
-        if (paused) {
-            if (typeof onPlayRequested === 'function') {
-                onPlayRequested();
-            }
-        } else {
-            if (typeof onPauseRequested === 'function') {
-                onPauseRequested();
-            }
-        }
-    }, [paused, onPlayRequested, onPauseRequested]);
-    return (
-        <Button className={classnames(className, { 'disabled': typeof paused !== 'boolean' })} title={paused ? 'Play' : 'Pause'} tabIndex={-1} onClick={togglePaused}>
-            <Icon
-                className={'icon'}
-                icon={typeof paused !== 'boolean' || paused ? 'ic_play' : 'ic_pause'}
-            />
-        </Button>
-    );
-};
-
-PlayPauseButton.propTypes = {
-    className: PropTypes.string,
-    paused: PropTypes.bool,
-    onPlayRequested: PropTypes.func,
-    onPauseRequested: PropTypes.func
-};
-
-module.exports = PlayPauseButton;
diff --git a/src/routes/Player/ControlBar/PlayPauseButton/index.js b/src/routes/Player/ControlBar/PlayPauseButton/index.js
deleted file mode 100644
index cdaf43c88..000000000
--- a/src/routes/Player/ControlBar/PlayPauseButton/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const PlayPauseButton = require('./PlayPauseButton');
-
-module.exports = PlayPauseButton;
diff --git a/src/routes/Player/ControlBar/SubtitlesButton/SubtitlesButton.js b/src/routes/Player/ControlBar/SubtitlesButton/SubtitlesButton.js
deleted file mode 100644
index 891247025..000000000
--- a/src/routes/Player/ControlBar/SubtitlesButton/SubtitlesButton.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const classnames = require('classnames');
-const Icon = require('stremio-icons/dom');
-const { Button } = require('stremio/common');
-
-const SubtitlesButton = ({ className, subtitlesTracks, onToggleSubtitlesPicker }) => {
-    const onMouseDown = React.useCallback((event) => {
-        event.nativeEvent.subtitlesPickerClosePrevented = true;
-    }, []);
-    const onClick = React.useCallback(() => {
-        if (typeof onToggleSubtitlesPicker === 'function') {
-            onToggleSubtitlesPicker();
-        }
-    }, [onToggleSubtitlesPicker]);
-    return (
-        <Button className={classnames(className, { 'disabled': !Array.isArray(subtitlesTracks) || subtitlesTracks.length === 0 })} tabIndex={-1} onMouseDown={onMouseDown} onClick={onClick}>
-            <Icon className={'icon'} icon={'ic_sub'} />
-        </Button>
-    );
-};
-
-SubtitlesButton.propTypes = {
-    className: PropTypes.string,
-    subtitlesTracks: PropTypes.array,
-    onToggleSubtitlesPicker: PropTypes.func
-};
-
-module.exports = SubtitlesButton;
diff --git a/src/routes/Player/ControlBar/SubtitlesButton/index.js b/src/routes/Player/ControlBar/SubtitlesButton/index.js
deleted file mode 100644
index 53fd48771..000000000
--- a/src/routes/Player/ControlBar/SubtitlesButton/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const SubtitlesButton = require('./SubtitlesButton');
-
-module.exports = SubtitlesButton;
diff --git a/src/routes/Player/ControlBar/styles.less b/src/routes/Player/ControlBar/styles.less
index 5fa5ae688..8dd80785f 100644
--- a/src/routes/Player/ControlBar/styles.less
+++ b/src/routes/Player/ControlBar/styles.less
@@ -21,12 +21,12 @@
             align-items: center;
 
             &:global(.disabled) {
-                :global(.icon) {
+                .icon {
                     fill: @color-surface;
                 }
             }
 
-            :global(.icon) {
+            .icon {
                 flex: none;
                 width: 3rem;
                 height: 2rem;
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index fcc1d0f73..4bd2f9390 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -18,17 +18,26 @@ const Player = ({ urlParams }) => {
     const { core } = useServices();
     const [player, updateLibraryItemState, pushToLibrary] = usePlayer(urlParams);
     const [settings, updateSettings] = useSettings();
+    const stream = React.useMemo(() => {
+        return player.selected !== null ?
+            player.selected.stream
+            :
+            null;
+    }, [player]);
+    const metaItem = React.useMemo(() => {
+        return player.meta_resource !== null && player.meta_resource.content.type === 'Ready' ?
+            player.meta_resource.content.content
+            :
+            null;
+    }, [player]);
     const routeFocused = useRouteFocused();
     const toast = useToast();
     const [, , , toggleFullscreen] = useFullscreen();
     const [immersed, setImmersed] = React.useState(true);
     const setImmersedDebounced = React.useCallback(debounce(setImmersed, 3000), []);
-    const [subtitlesPickerOpen, , closeSubtitlesPicker, toggleSubtitlesPicker] = useBinaryState(false);
+    const [subtitlesMenuOpen, , closeSubtitlesMenu, toggleSubtitlesMenu] = useBinaryState(false);
     const [infoMenuOpen, , closeInfoMenu, toggleInfoMenu] = useBinaryState(false);
     const [error, setError] = React.useState(null);
-    const infoAvailable = React.useMemo(() => {
-        return player.meta_resource !== null && player.meta_resource.content.type === 'Ready';
-    }, [player]);
     const [videoState, setVideoState] = React.useReducer(
         (videoState, nextVideoState) => ({ ...videoState, ...nextVideoState }),
         {
@@ -150,8 +159,8 @@ const Player = ({ urlParams }) => {
         toggleFullscreen();
     }, [toggleFullscreen]);
     const onContainerMouseDown = React.useCallback((event) => {
-        if (!event.nativeEvent.subtitlesPickerClosePrevented) {
-            closeSubtitlesPicker();
+        if (!event.nativeEvent.subtitlesMenuClosePrevented) {
+            closeSubtitlesMenu();
         }
         if (!event.nativeEvent.infoMenuClosePrevented) {
             closeInfoMenu();
@@ -239,7 +248,7 @@ const Player = ({ urlParams }) => {
         const onKeyDown = (event) => {
             switch (event.code) {
                 case 'Space': {
-                    if (!subtitlesPickerOpen && !infoMenuOpen && videoState.paused !== null) {
+                    if (!subtitlesMenuOpen && !infoMenuOpen && videoState.paused !== null) {
                         if (videoState.paused) {
                             onPlayRequested();
                         } else {
@@ -250,28 +259,28 @@ const Player = ({ urlParams }) => {
                     break;
                 }
                 case 'ArrowRight': {
-                    if (!subtitlesPickerOpen && !infoMenuOpen && videoState.time !== null) {
+                    if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) {
                         onSeekRequested(videoState.time + 15000);
                     }
 
                     break;
                 }
                 case 'ArrowLeft': {
-                    if (!subtitlesPickerOpen && !infoMenuOpen && videoState.time !== null) {
+                    if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) {
                         onSeekRequested(videoState.time - 15000);
                     }
 
                     break;
                 }
                 case 'ArrowUp': {
-                    if (!subtitlesPickerOpen && !infoMenuOpen && videoState.volume !== null) {
+                    if (!subtitlesMenuOpen && !infoMenuOpen && videoState.volume !== null) {
                         onVolumeChangeRequested(videoState.volume + 5);
                     }
 
                     break;
                 }
                 case 'ArrowDown': {
-                    if (!subtitlesPickerOpen && !infoMenuOpen && videoState.volume !== null) {
+                    if (!subtitlesMenuOpen && !infoMenuOpen && videoState.volume !== null) {
                         onVolumeChangeRequested(videoState.volume - 5);
                     }
 
@@ -279,18 +288,22 @@ const Player = ({ urlParams }) => {
                 }
                 case 'KeyS': {
                     closeInfoMenu();
-                    toggleSubtitlesPicker();
+                    if (Array.isArray(videoState.subtitlesTracks) && videoState.subtitlesTracks.length > 0) {
+                        toggleSubtitlesMenu();
+                    }
+
                     break;
                 }
                 case 'KeyM': {
-                    closeSubtitlesPicker();
-                    if (infoAvailable) {
+                    closeSubtitlesMenu();
+                    if (typeof metaItem === 'object' && metaItem !== null && typeof stream === 'object' && stream !== null) {
                         toggleInfoMenu();
                     }
+
                     break;
                 }
                 case 'Escape': {
-                    closeSubtitlesPicker();
+                    closeSubtitlesMenu();
                     closeInfoMenu();
                     break;
                 }
@@ -302,7 +315,7 @@ const Player = ({ urlParams }) => {
         return () => {
             window.removeEventListener('keydown', onKeyDown);
         };
-    }, [routeFocused, subtitlesPickerOpen, infoAvailable, infoMenuOpen, videoState.paused, videoState.time, videoState.volume, toggleSubtitlesPicker, toggleInfoMenu]);
+    }, [routeFocused, subtitlesMenuOpen, infoMenuOpen, stream, metaItem, videoState.paused, videoState.time, videoState.volume, videoState.subtitlesTracks, toggleSubtitlesMenu, toggleInfoMenu]);
     React.useLayoutEffect(() => {
         return () => {
             setImmersedDebounced.cancel();
@@ -311,7 +324,7 @@ const Player = ({ urlParams }) => {
         };
     }, []);
     return (
-        <div className={classnames(styles['player-container'], { [styles['immersed']]: immersed && videoState.paused !== null && !videoState.paused && !subtitlesPickerOpen && !infoMenuOpen })}
+        <div className={classnames(styles['player-container'], { [styles['immersed']]: immersed && videoState.paused !== null && !videoState.paused && !subtitlesMenuOpen && !infoMenuOpen })}
             onMouseDown={onContainerMouseDown}
             onMouseMove={onContainerMouseMove}
             onMouseOver={onContainerMouseMove}
@@ -343,7 +356,7 @@ const Player = ({ urlParams }) => {
                 onDoubleClick={onVideoDoubleClick}
             />
             {
-                subtitlesPickerOpen || infoMenuOpen ?
+                subtitlesMenuOpen || infoMenuOpen ?
                     <div className={styles['layer']} />
                     :
                     null
@@ -370,20 +383,21 @@ const Player = ({ urlParams }) => {
                 volume={videoState.volume}
                 muted={videoState.muted}
                 subtitlesTracks={videoState.subtitlesTracks}
-                infoAvailable={infoAvailable}
+                stream={stream}
+                metaItem={metaItem}
                 onPlayRequested={onPlayRequested}
                 onPauseRequested={onPauseRequested}
                 onMuteRequested={onMuteRequested}
                 onUnmuteRequested={onUnmuteRequested}
                 onVolumeChangeRequested={onVolumeChangeRequested}
                 onSeekRequested={onSeekRequested}
-                onToggleSubtitlesPicker={toggleSubtitlesPicker}
+                onToggleSubtitlesMenu={toggleSubtitlesMenu}
                 onToggleInfoMenu={toggleInfoMenu}
                 onMouseMove={onBarMouseMove}
                 onMouseOver={onBarMouseMove}
             />
             {
-                subtitlesPickerOpen ?
+                subtitlesMenuOpen ?
                     <SubtitlesPicker
                         className={classnames(styles['layer'], styles['menu-layer'])}
                         tracks={videoState.subtitlesTracks}
diff --git a/src/routes/Player/SubtitlesPicker/SubtitlesPicker.js b/src/routes/Player/SubtitlesPicker/SubtitlesPicker.js
index a04e470f2..cb2394810 100644
--- a/src/routes/Player/SubtitlesPicker/SubtitlesPicker.js
+++ b/src/routes/Player/SubtitlesPicker/SubtitlesPicker.js
@@ -51,7 +51,7 @@ const SubtitlesPicker = (props) => {
             [];
     }, [props.tracks, selectedLanguage]);
     const onMouseDown = React.useCallback((event) => {
-        event.nativeEvent.subtitlesPickerClosePrevented = true;
+        event.nativeEvent.subtitlesMenuClosePrevented = true;
     }, []);
     const languageOnClick = React.useCallback((event) => {
         const trackId = Array.isArray(props.tracks) ?

From 91da0443f626ccaa87f6d74c9cf481e66bc7ac3f Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Tue, 31 Mar 2020 18:21:56 +0300
Subject: [PATCH 10/27] rename SubtitlesPicker to SubtitlesMenu

---
 src/routes/Player/Player.js                               | 4 ++--
 .../DiscreteSelectInput/DiscreteSelectInput.js            | 0
 .../DiscreteSelectInput/index.js                          | 0
 .../DiscreteSelectInput/styles.less                       | 0
 .../SubtitlesPicker.js => SubtitlesMenu/SubtitlesMenu.js} | 8 ++++----
 src/routes/Player/SubtitlesMenu/index.js                  | 3 +++
 .../Player/{SubtitlesPicker => SubtitlesMenu}/styles.less | 2 +-
 src/routes/Player/SubtitlesPicker/index.js                | 3 ---
 8 files changed, 10 insertions(+), 10 deletions(-)
 rename src/routes/Player/{SubtitlesPicker => SubtitlesMenu}/DiscreteSelectInput/DiscreteSelectInput.js (100%)
 rename src/routes/Player/{SubtitlesPicker => SubtitlesMenu}/DiscreteSelectInput/index.js (100%)
 rename src/routes/Player/{SubtitlesPicker => SubtitlesMenu}/DiscreteSelectInput/styles.less (100%)
 rename src/routes/Player/{SubtitlesPicker/SubtitlesPicker.js => SubtitlesMenu/SubtitlesMenu.js} (98%)
 create mode 100644 src/routes/Player/SubtitlesMenu/index.js
 rename src/routes/Player/{SubtitlesPicker => SubtitlesMenu}/styles.less (98%)
 delete mode 100644 src/routes/Player/SubtitlesPicker/index.js

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 4bd2f9390..0b2f20d19 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -8,7 +8,7 @@ const { HorizontalNavBar, useDeepEqualEffect, useFullscreen, useBinaryState, use
 const BufferingLoader = require('./BufferingLoader');
 const ControlBar = require('./ControlBar');
 const InfoMenu = require('./InfoMenu');
-const SubtitlesPicker = require('./SubtitlesPicker');
+const SubtitlesMenu = require('./SubtitlesMenu');
 const Video = require('./Video');
 const usePlayer = require('./usePlayer');
 const useSettings = require('./useSettings');
@@ -398,7 +398,7 @@ const Player = ({ urlParams }) => {
             />
             {
                 subtitlesMenuOpen ?
-                    <SubtitlesPicker
+                    <SubtitlesMenu
                         className={classnames(styles['layer'], styles['menu-layer'])}
                         tracks={videoState.subtitlesTracks}
                         selectedTrackId={videoState.selectedSubtitlesTrackId}
diff --git a/src/routes/Player/SubtitlesPicker/DiscreteSelectInput/DiscreteSelectInput.js b/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/DiscreteSelectInput.js
similarity index 100%
rename from src/routes/Player/SubtitlesPicker/DiscreteSelectInput/DiscreteSelectInput.js
rename to src/routes/Player/SubtitlesMenu/DiscreteSelectInput/DiscreteSelectInput.js
diff --git a/src/routes/Player/SubtitlesPicker/DiscreteSelectInput/index.js b/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/index.js
similarity index 100%
rename from src/routes/Player/SubtitlesPicker/DiscreteSelectInput/index.js
rename to src/routes/Player/SubtitlesMenu/DiscreteSelectInput/index.js
diff --git a/src/routes/Player/SubtitlesPicker/DiscreteSelectInput/styles.less b/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/styles.less
similarity index 100%
rename from src/routes/Player/SubtitlesPicker/DiscreteSelectInput/styles.less
rename to src/routes/Player/SubtitlesMenu/DiscreteSelectInput/styles.less
diff --git a/src/routes/Player/SubtitlesPicker/SubtitlesPicker.js b/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
similarity index 98%
rename from src/routes/Player/SubtitlesPicker/SubtitlesPicker.js
rename to src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
index cb2394810..a9dcf0dde 100644
--- a/src/routes/Player/SubtitlesPicker/SubtitlesPicker.js
+++ b/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
@@ -13,7 +13,7 @@ const LANGUAGE_PRIORITIES = {
     'eng': 1
 };
 
-const SubtitlesPicker = (props) => {
+const SubtitlesMenu = (props) => {
     const languages = React.useMemo(() => {
         return Array.isArray(props.tracks) ?
             props.tracks
@@ -101,7 +101,7 @@ const SubtitlesPicker = (props) => {
         }
     }, [props.offset, props.onOffsetChanged]);
     return (
-        <div className={classnames(props.className, styles['subtitles-picker-container'])} onMouseDown={onMouseDown}>
+        <div className={classnames(props.className, styles['subtitles-menu-container'])} onMouseDown={onMouseDown}>
             <div className={styles['languages-container']}>
                 <div className={styles['languages-header']}>Languages</div>
                 <div className={styles['languages-list']}>
@@ -182,7 +182,7 @@ const SubtitlesPicker = (props) => {
     );
 };
 
-SubtitlesPicker.propTypes = {
+SubtitlesMenu.propTypes = {
     className: PropTypes.string,
     tracks: PropTypes.arrayOf(PropTypes.shape({
         id: PropTypes.string.isRequired,
@@ -202,4 +202,4 @@ SubtitlesPicker.propTypes = {
     onOffsetChanged: PropTypes.func
 };
 
-module.exports = SubtitlesPicker;
+module.exports = SubtitlesMenu;
diff --git a/src/routes/Player/SubtitlesMenu/index.js b/src/routes/Player/SubtitlesMenu/index.js
new file mode 100644
index 000000000..17f9571d4
--- /dev/null
+++ b/src/routes/Player/SubtitlesMenu/index.js
@@ -0,0 +1,3 @@
+const SubtitlesMenu = require('./SubtitlesMenu');
+
+module.exports = SubtitlesMenu;
diff --git a/src/routes/Player/SubtitlesPicker/styles.less b/src/routes/Player/SubtitlesMenu/styles.less
similarity index 98%
rename from src/routes/Player/SubtitlesPicker/styles.less
rename to src/routes/Player/SubtitlesMenu/styles.less
index 3718500ca..d9eb0a214 100644
--- a/src/routes/Player/SubtitlesPicker/styles.less
+++ b/src/routes/Player/SubtitlesMenu/styles.less
@@ -1,6 +1,6 @@
 @import (reference) '~stremio-colors/dist/less/stremio-colors.less';
 
-.subtitles-picker-container {
+.subtitles-menu-container {
     height: 23rem;
     display: flex;
     flex-direction: row;
diff --git a/src/routes/Player/SubtitlesPicker/index.js b/src/routes/Player/SubtitlesPicker/index.js
deleted file mode 100644
index 0eb5e540e..000000000
--- a/src/routes/Player/SubtitlesPicker/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const SubtitlesPicker = require('./SubtitlesPicker');
-
-module.exports = SubtitlesPicker;

From 493be95becf3058262848e26dd190d085a30973c Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Tue, 31 Mar 2020 18:26:36 +0300
Subject: [PATCH 11/27] validation of videoid added

---
 src/routes/Player/usePlayer.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/routes/Player/usePlayer.js b/src/routes/Player/usePlayer.js
index 808f86f5f..a81688ef6 100644
--- a/src/routes/Player/usePlayer.js
+++ b/src/routes/Player/usePlayer.js
@@ -125,7 +125,10 @@ const usePlayer = (urlParams) => {
                             }
                             :
                             null,
-                        video_id: urlParams.videoId
+                        video_id: typeof urlParams.videoId === 'string' ?
+                            urlParams.videoId
+                            :
+                            null
                     }
                 }
             };

From cdb72526ada5cc9a6bf22aa577e12532b1474db5 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Wed, 1 Apr 2020 13:29:23 +0300
Subject: [PATCH 12/27] player background changed

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

diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index e691dc12e..01aad2eef 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -26,7 +26,7 @@ html:not(.active-slider-within) {
     z-index: 0;
     width: 100%;
     height: 100%;
-    background-color: @color-background-dark2;
+    background-color: @color-background-dark5;
 
     .layer {
         position: absolute;

From 44f98d5f53dee3bd79d75c3243a9a573f47d8f28 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Wed, 1 Apr 2020 14:37:04 +0300
Subject: [PATCH 13/27] default sizes removed from slider

---
 src/common/Slider/styles.less            | 3 ---
 src/routes/Player/ControlBar/styles.less | 3 +++
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/common/Slider/styles.less b/src/common/Slider/styles.less
index 3f46cba42..30d796423 100644
--- a/src/common/Slider/styles.less
+++ b/src/common/Slider/styles.less
@@ -9,9 +9,6 @@ html.active-slider-within {
 }
 
 .slider-container {
-    --track-size: 0.5rem;
-    --thumb-size: 1.5rem;
-
     position: relative;
     z-index: 0;
     overflow: visible;
diff --git a/src/routes/Player/ControlBar/styles.less b/src/routes/Player/ControlBar/styles.less
index 8dd80785f..6cd36691f 100644
--- a/src/routes/Player/ControlBar/styles.less
+++ b/src/routes/Player/ControlBar/styles.less
@@ -4,6 +4,9 @@
     padding: 0 1.5rem;
 
     .seek-bar {
+        --track-size: 0.5rem;
+        --thumb-size: 1.5rem;
+
         height: 2.5rem;
     }
 

From 8d9239acbff08618607faf532945c0662926355a Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Wed, 1 Apr 2020 15:27:49 +0300
Subject: [PATCH 14/27] use 90 alpha in subtitles picker

---
 .../Player/SubtitlesMenu/DiscreteSelectInput/styles.less      | 2 +-
 src/routes/Player/SubtitlesMenu/styles.less                   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/styles.less b/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/styles.less
index 0c286ae78..657d46df1 100644
--- a/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/styles.less
+++ b/src/routes/Player/SubtitlesMenu/DiscreteSelectInput/styles.less
@@ -34,7 +34,7 @@
                 display: block;
                 width: 100%;
                 height: 100%;
-                fill: @color-surface-light5;
+                fill: @color-surface-light5-90;
             }
         }
 
diff --git a/src/routes/Player/SubtitlesMenu/styles.less b/src/routes/Player/SubtitlesMenu/styles.less
index d9eb0a214..8b60354ab 100644
--- a/src/routes/Player/SubtitlesMenu/styles.less
+++ b/src/routes/Player/SubtitlesMenu/styles.less
@@ -48,7 +48,7 @@
                     height: 0.5rem;
                     border-radius: 100%;
                     margin-left: 1rem;
-                    background-color: @color-accent3;
+                    background-color: @color-accent3-90;
                 }
             }
         }
@@ -99,7 +99,7 @@
             }
 
             &:global(.disabled) {
-                color: @color-surface;
+                color: @color-surface-90;
             }
         }
     }

From 5cc640871c75bfbd91715501369f573168c177ff Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Wed, 1 Apr 2020 15:39:36 +0300
Subject: [PATCH 15/27] metaItem not required for InfoMenu

---
 src/routes/Player/ControlBar/ControlBar.js | 4 +---
 src/routes/Player/Player.js                | 5 ++---
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index 7d11ba108..11d1bd108 100644
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@@ -15,7 +15,6 @@ const ControlBar = ({
     volume,
     muted,
     subtitlesTracks,
-    metaItem,
     stream,
     onPlayRequested,
     onPauseRequested,
@@ -98,7 +97,7 @@ const ControlBar = ({
                 <Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
                     <Icon className={styles['icon']} icon={'ic_network'} />
                 </Button>
-                <Button className={classnames(styles['control-bar-button'], { 'disabled': typeof metaItem !== 'object' || metaItem === null || typeof stream !== 'object' || stream === null })} tabIndex={-1} onMouseDown={onInfoButtonMouseDown} onClick={onInfoButtonClick}>
+                <Button className={classnames(styles['control-bar-button'], { 'disabled': typeof stream !== 'object' || stream === null })} tabIndex={-1} onMouseDown={onInfoButtonMouseDown} onClick={onInfoButtonClick}>
                     <Icon className={styles['icon']} icon={'ic_info'} />
                 </Button>
                 <Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
@@ -123,7 +122,6 @@ ControlBar.propTypes = {
     volume: PropTypes.number,
     muted: PropTypes.bool,
     subtitlesTracks: PropTypes.array,
-    metaItem: PropTypes.object,
     stream: PropTypes.object,
     onPlayRequested: PropTypes.func,
     onPauseRequested: PropTypes.func,
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 0b2f20d19..0ddeb5208 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -296,7 +296,7 @@ const Player = ({ urlParams }) => {
                 }
                 case 'KeyM': {
                     closeSubtitlesMenu();
-                    if (typeof metaItem === 'object' && metaItem !== null && typeof stream === 'object' && stream !== null) {
+                    if (typeof stream === 'object' && stream !== null) {
                         toggleInfoMenu();
                     }
 
@@ -315,7 +315,7 @@ const Player = ({ urlParams }) => {
         return () => {
             window.removeEventListener('keydown', onKeyDown);
         };
-    }, [routeFocused, subtitlesMenuOpen, infoMenuOpen, stream, metaItem, videoState.paused, videoState.time, videoState.volume, videoState.subtitlesTracks, toggleSubtitlesMenu, toggleInfoMenu]);
+    }, [routeFocused, subtitlesMenuOpen, infoMenuOpen, stream, videoState.paused, videoState.time, videoState.volume, videoState.subtitlesTracks, toggleSubtitlesMenu, toggleInfoMenu]);
     React.useLayoutEffect(() => {
         return () => {
             setImmersedDebounced.cancel();
@@ -384,7 +384,6 @@ const Player = ({ urlParams }) => {
                 muted={videoState.muted}
                 subtitlesTracks={videoState.subtitlesTracks}
                 stream={stream}
-                metaItem={metaItem}
                 onPlayRequested={onPlayRequested}
                 onPauseRequested={onPauseRequested}
                 onMuteRequested={onMuteRequested}

From 51ec3588bcc9285a53f26a8828b1603674fc2912 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Wed, 1 Apr 2020 15:43:10 +0300
Subject: [PATCH 16/27] close menus if data becomes unavailable

---
 src/routes/Player/Player.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 0ddeb5208..f66edb584 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -238,6 +238,16 @@ const Player = ({ urlParams }) => {
             updateLibraryItemState(videoState.time, videoState.duration);
         }
     }, [videoState.time, videoState.duration]);
+    React.useEffect(() => {
+        if (!Array.isArray(videoState.subtitlesTracks) || videoState.subtitlesTracks.length === 0) {
+            closeSubtitlesMenu();
+        }
+    }, [videoState.subtitlesTracks]);
+    React.useEffect(() => {
+        if (typeof stream !== 'object' || stream === null) {
+            closeInfoMenu();
+        }
+    }, [stream]);
     React.useEffect(() => {
         const intervalId = setInterval(pushToLibrary, 30000);
         return () => {

From cdd1eac725ece6daf21f646ca58bbea9c29f4cd7 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Wed, 1 Apr 2020 17:11:15 +0300
Subject: [PATCH 17/27] correct title in player

---
 src/routes/Player/Player.js | 42 ++++++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index f66edb584..de64f1c36 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -19,17 +19,37 @@ const Player = ({ urlParams }) => {
     const [player, updateLibraryItemState, pushToLibrary] = usePlayer(urlParams);
     const [settings, updateSettings] = useSettings();
     const stream = React.useMemo(() => {
-        return player.selected !== null ?
-            player.selected.stream
-            :
-            null;
+        return player.selected !== null ? player.selected.stream : null;
     }, [player]);
     const metaItem = React.useMemo(() => {
-        return player.meta_resource !== null && player.meta_resource.content.type === 'Ready' ?
-            player.meta_resource.content.content
+        return player.meta_resource !== null && player.meta_resource.content.type === 'Ready' ? player.meta_resource.content.content : null;
+    }, [player]);
+    const video = React.useMemo(() => {
+        return metaItem !== null && player.selected !== null && typeof player.selected.video_id === 'string' ?
+            metaItem.videos.reduce((result, video) => {
+                if (video.id === player.selected.video_id) {
+                    return video;
+                }
+
+                return result;
+            }, null)
             :
             null;
-    }, [player]);
+    }, [player, metaItem]);
+    const title = React.useMemo(() => {
+        const streamTitle = stream !== null && typeof stream.title === 'string' ? stream.title : '';
+        const metaItemTitle = metaItem !== null ? metaItem.name : '';
+        const videoTitle = video !== null && typeof video.title === 'string' && video.title.length > 0 ? video.title : '';
+        const seriesInfo = video !== null && !isNaN(video.season) && !isNaN(video.episode) ? `${video.season}x${video.episode}` : '';
+        if (metaItemTitle.length > 0) {
+            return metaItemTitle
+                .concat(videoTitle.length > 0 || seriesInfo.length > 0 ? ' -' : '')
+                .concat(videoTitle.length > 0 ? ` ${videoTitle}` : '')
+                .concat(seriesInfo.length > 0 ? ` (${seriesInfo})` : '');
+        } else {
+            return streamTitle;
+        }
+    }, [stream, metaItem, video]);
     const routeFocused = useRouteFocused();
     const toast = useToast();
     const [, , , toggleFullscreen] = useFullscreen();
@@ -373,13 +393,7 @@ const Player = ({ urlParams }) => {
             }
             <HorizontalNavBar
                 className={classnames(styles['layer'], styles['nav-bar-layer'])}
-                title={
-                    // TODO consider use video.title and fallback to stream.title
-                    player.meta_resource !== null && player.meta_resource.content.type === 'Ready' ?
-                        player.meta_resource.content.content.name
-                        :
-                        null
-                }
+                title={title}
                 backButton={true}
                 fullscreenButton={true}
                 onMouseMove={onBarMouseMove}

From 63ac8b14536b1de7fd5fc23bd240b599f82e0e65 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Wed, 1 Apr 2020 17:12:15 +0300
Subject: [PATCH 18/27] redundant checks for the type of stream removed

---
 src/routes/Player/Player.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index de64f1c36..bd295caca 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -264,7 +264,7 @@ const Player = ({ urlParams }) => {
         }
     }, [videoState.subtitlesTracks]);
     React.useEffect(() => {
-        if (typeof stream !== 'object' || stream === null) {
+        if (stream === null) {
             closeInfoMenu();
         }
     }, [stream]);
@@ -326,7 +326,7 @@ const Player = ({ urlParams }) => {
                 }
                 case 'KeyM': {
                     closeSubtitlesMenu();
-                    if (typeof stream === 'object' && stream !== null) {
+                    if (stream !== null) {
                         toggleInfoMenu();
                     }
 

From 5ddb84ddc6228d52360f59e3729e727515b09d7c Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 2 Apr 2020 12:09:13 +0300
Subject: [PATCH 19/27] map meta_resource dates and hrefs in usePlayer

---
 src/routes/Player/usePlayer.js | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/routes/Player/usePlayer.js b/src/routes/Player/usePlayer.js
index a81688ef6..82f89dde5 100644
--- a/src/routes/Player/usePlayer.js
+++ b/src/routes/Player/usePlayer.js
@@ -41,7 +41,35 @@ const mapPlayerStateWithCtx = (player, ctx) => {
         }
         :
         null;
-    const meta_resource = player.meta_resource;
+    const meta_resource = player.meta_resource !== null && player.meta_resource.content.type === 'Ready' ?
+        {
+            request: player.meta_resource.request,
+            content: {
+                type: 'Ready',
+                content: {
+                    ...player.meta_resource.content.content,
+                    released: new Date(
+                        typeof player.meta_resource.content.content.released === 'string' ?
+                            player.meta_resource.content.content.released
+                            :
+                            NaN
+                    ),
+                    videos: player.meta_resource.content.content.videos.map((video) => ({
+                        ...video,
+                        released: new Date(
+                            typeof video.released === 'string' ?
+                                video.released
+                                :
+                                NaN
+                        ),
+                        // TODO add watched and progress
+                        href: `#/metadetails/${player.meta_resource.content.content.type}/${player.meta_resource.content.content.id}/${video.id}`
+                    }))
+                }
+            }
+        }
+        :
+        player.meta_resource;
     const subtitles_resources = player.subtitles_resources.map((subtitles_resource) => {
         const request = subtitles_resource.request;
         const origin = ctx.profile.addons.reduce((origin, addon) => {

From f788bd1d4dd796f1c6fa3090ae5512e22ea07219 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 2 Apr 2020 12:23:51 +0300
Subject: [PATCH 20/27] EMBEDDED subtitles origin renamed to EMBEDDED IN VIDEO

---
 src/video/HTMLSubtitles.js | 2 +-
 src/video/YouTubeVideo.js  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/video/HTMLSubtitles.js b/src/video/HTMLSubtitles.js
index a9764557e..d4b6d73d5 100644
--- a/src/video/HTMLSubtitles.js
+++ b/src/video/HTMLSubtitles.js
@@ -55,7 +55,7 @@ function HTMLSubtitles(options) {
                     track.url.length > 0 &&
                     typeof track.origin === 'string' &&
                     track.origin.length > 0 &&
-                    track.origin !== 'EMBEDDED';
+                    track.origin !== 'EMBEDDED IN VIDEO';
             })
             .map(function(track) {
                 return Object.freeze(Object.assign({}, track, {
diff --git a/src/video/YouTubeVideo.js b/src/video/YouTubeVideo.js
index 1ef9bc466..e679e0a5e 100644
--- a/src/video/YouTubeVideo.js
+++ b/src/video/YouTubeVideo.js
@@ -84,7 +84,7 @@ function YouTubeVideo(options) {
             .map(function(track) {
                 return Object.freeze({
                     id: track.languageCode,
-                    origin: 'EMBEDDED',
+                    origin: 'EMBEDDED IN VIDEO',
                     label: track.languageName
                 });
             });
@@ -482,7 +482,7 @@ function YouTubeVideo(options) {
                             embeddedSubtitlesSelectedTrackId = null;
                             var tracks = getSubtitlesTracks();
                             for (var i = 0; i < tracks.length; i++) {
-                                if (tracks[i].id === arguments[2] && tracks[i].origin === 'EMBEDDED') {
+                                if (tracks[i].id === arguments[2] && tracks[i].origin === 'EMBEDDED IN VIDEO') {
                                     embeddedSubtitlesSelectedTrackId = tracks[i].id;
                                     break;
                                 }

From 41fe0437683f8602aa00983bf9762f7cba448109 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 2 Apr 2020 12:26:05 +0300
Subject: [PATCH 21/27] categories constants moved to constants module

---
 src/common/CONSTANTS.js               |  4 ++++
 src/common/MetaPreview/MetaPreview.js | 25 ++++++++++++-------------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/common/CONSTANTS.js b/src/common/CONSTANTS.js
index 359c5a3fb..ad5454bcf 100644
--- a/src/common/CONSTANTS.js
+++ b/src/common/CONSTANTS.js
@@ -4,6 +4,8 @@ const CATALOG_PREVIEW_SIZE = 10;
 const CATALOG_PAGE_SIZE = 100;
 const NONE_EXTRA_VALUE = 'None';
 const SKIP_EXTRA_NAME = 'skip';
+const IMDB_LINK_CATEGORY = 'imdb';
+const SHARE_LINK_CATEGORY = 'share';
 const TYPE_PRIORITIES = {
     movie: 10,
     series: 9,
@@ -25,5 +27,7 @@ module.exports = {
     CATALOG_PAGE_SIZE,
     NONE_EXTRA_VALUE,
     SKIP_EXTRA_NAME,
+    IMDB_LINK_CATEGORY,
+    SHARE_LINK_CATEGORY,
     TYPE_PRIORITIES
 };
diff --git a/src/common/MetaPreview/MetaPreview.js b/src/common/MetaPreview/MetaPreview.js
index 557f76331..1b3219123 100644
--- a/src/common/MetaPreview/MetaPreview.js
+++ b/src/common/MetaPreview/MetaPreview.js
@@ -8,6 +8,7 @@ const Button = require('stremio/common/Button');
 const Image = require('stremio/common/Image');
 const ModalDialog = require('stremio/common/ModalDialog');
 const SharePrompt = require('stremio/common/SharePrompt');
+const CONSTANTS = require('stremio/common/CONSTANTS');
 const routesRegexp = require('stremio/common/routesRegexp');
 const useBinaryState = require('stremio/common/useBinaryState');
 const ActionButton = require('./ActionButton');
@@ -15,8 +16,6 @@ const MetaLinks = require('./MetaLinks');
 const MetaPreviewPlaceholder = require('./MetaPreviewPlaceholder');
 const styles = require('./styles');
 
-const IMDB_LINK_CATEGORY = 'imdb';
-const SHARE_LINK_CATEGORY = 'share';
 const ALLOWED_LINK_REDIRECTS = [
     routesRegexp.search.regexp,
     routesRegexp.discover.regexp,
@@ -30,12 +29,12 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
             links
                 .filter((link) => link && typeof link.category === 'string' && typeof link.url === 'string')
                 .reduce((linksGroups, { category, name, url }) => {
-                    if (category === IMDB_LINK_CATEGORY) {
+                    if (category === CONSTANTS.IMDB_LINK_CATEGORY) {
                         linksGroups[category] = {
                             label: name,
                             href: `https://www.stremio.com/warning#${encodeURIComponent(`https://www.imdb.com/title/${encodeURIComponent(url)}`)}`
                         };
-                    } else if (category === SHARE_LINK_CATEGORY) {
+                    } else if (category === CONSTANTS.SHARE_LINK_CATEGORY) {
                         linksGroups[category] = {
                             label: name,
                             href: url
@@ -96,7 +95,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                         null
                 }
                 {
-                    (typeof releaseInfo === 'string' && releaseInfo.length > 0) || (released instanceof Date && !isNaN(released.getTime())) || (typeof runtime === 'string' && runtime.length > 0) || typeof linksGroups[IMDB_LINK_CATEGORY] === 'object' ?
+                    (typeof releaseInfo === 'string' && releaseInfo.length > 0) || (released instanceof Date && !isNaN(released.getTime())) || (typeof runtime === 'string' && runtime.length > 0) || typeof linksGroups[CONSTANTS.IMDB_LINK_CATEGORY] === 'object' ?
                         <div className={styles['runtime-release-info-container']}>
                             {
                                 typeof runtime === 'string' && runtime.length > 0 ?
@@ -114,16 +113,16 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                                         null
                             }
                             {
-                                typeof linksGroups[IMDB_LINK_CATEGORY] === 'object' ?
+                                typeof linksGroups[CONSTANTS.IMDB_LINK_CATEGORY] === 'object' ?
                                     <Button
                                         className={styles['imdb-button-container']}
-                                        title={linksGroups[IMDB_LINK_CATEGORY].label}
-                                        href={linksGroups[IMDB_LINK_CATEGORY].href}
+                                        title={linksGroups[CONSTANTS.IMDB_LINK_CATEGORY].label}
+                                        href={linksGroups[CONSTANTS.IMDB_LINK_CATEGORY].href}
                                         target={'_blank'}
                                         {...(compact ? { tabIndex: -1 } : null)}
                                     >
                                         <Icon className={styles['icon']} icon={'ic_imdbnoframe'} />
-                                        <div className={styles['label']}>{linksGroups[IMDB_LINK_CATEGORY].label}</div>
+                                        <div className={styles['label']}>{linksGroups[CONSTANTS.IMDB_LINK_CATEGORY].label}</div>
                                     </Button>
                                     :
                                     null
@@ -149,8 +148,8 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                 {
                     Object.keys(linksGroups)
                         .filter((category) => {
-                            return category !== IMDB_LINK_CATEGORY &&
-                                category !== SHARE_LINK_CATEGORY;
+                            return category !== CONSTANTS.IMDB_LINK_CATEGORY &&
+                                category !== CONSTANTS.SHARE_LINK_CATEGORY;
                         })
                         .map((category, index) => (
                             <MetaLinks
@@ -188,7 +187,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                         null
                 }
                 {
-                    !compact && typeof linksGroups[SHARE_LINK_CATEGORY] === 'object' ?
+                    !compact && typeof linksGroups[CONSTANTS.SHARE_LINK_CATEGORY] === 'object' ?
                         <React.Fragment>
                             <ActionButton
                                 className={styles['action-button']}
@@ -202,7 +201,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                                     <ModalDialog title={'Share'} onCloseRequest={closeShareModal}>
                                         <SharePrompt
                                             className={styles['share-prompt']}
-                                            url={linksGroups[SHARE_LINK_CATEGORY].href}
+                                            url={linksGroups[CONSTANTS.SHARE_LINK_CATEGORY].href}
                                         />
                                     </ModalDialog>
                                     :

From 8f9efa2fea25caf3dbd2b07de01dcfdfafa7cc55 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 2 Apr 2020 12:26:34 +0300
Subject: [PATCH 22/27] share link rendered in compact mode too

---
 src/common/MetaPreview/MetaPreview.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/MetaPreview/MetaPreview.js b/src/common/MetaPreview/MetaPreview.js
index 1b3219123..a93cc168d 100644
--- a/src/common/MetaPreview/MetaPreview.js
+++ b/src/common/MetaPreview/MetaPreview.js
@@ -187,7 +187,7 @@ const MetaPreview = ({ className, compact, name, logo, background, runtime, rele
                         null
                 }
                 {
-                    !compact && typeof linksGroups[CONSTANTS.SHARE_LINK_CATEGORY] === 'object' ?
+                    typeof linksGroups[CONSTANTS.SHARE_LINK_CATEGORY] === 'object' ?
                         <React.Fragment>
                             <ActionButton
                                 className={styles['action-button']}

From 801e67860b87ce2f40a107fad6165732c6de99b2 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 2 Apr 2020 12:32:56 +0300
Subject: [PATCH 23/27] addon mapped as a stream prop in usePlayer

---
 src/routes/Player/Player.js    |  9 ++++++++-
 src/routes/Player/usePlayer.js | 22 ++++++----------------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index bd295caca..fab0793ea 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -221,7 +221,14 @@ const Player = ({ urlParams }) => {
             dispatch({
                 commandName: 'addSubtitlesTracks',
                 commandArgs: {
-                    tracks: player.selected.stream.subtitles
+                    tracks: player.selected.stream.subtitles.map(({ url, lang }) => ({
+                        url,
+                        lang,
+                        origin: player.selected.stream.addon !== null ?
+                            player.selected.stream.addon.manifest.name
+                            :
+                            'EMBEDDED IN STREAM'
+                    }))
                 }
             });
         }
diff --git a/src/routes/Player/usePlayer.js b/src/routes/Player/usePlayer.js
index 82f89dde5..36beda83e 100644
--- a/src/routes/Player/usePlayer.js
+++ b/src/routes/Player/usePlayer.js
@@ -16,23 +16,13 @@ const mapPlayerStateWithCtx = (player, ctx) => {
         {
             stream: {
                 ...player.selected.stream,
-                subtitles: Array.isArray(player.selected.stream.subtitles) ?
-                    player.selected.stream.subtitles.map(({ url, lang }) => ({
-                        url,
-                        lang,
-                        origin: ctx.profile.addons.reduce((origin, addon) => {
-                            if (player.selected.stream_resource_request !== null && addon.transportUrl === player.selected.stream_resource_request.base) {
-                                return typeof addon.manifest.name === 'string' && addon.manifest.name.length > 0 ?
-                                    addon.manifest.name
-                                    :
-                                    addon.manifest.id;
-                            }
+                addon: ctx.profile.addons.reduce((result, addon) => {
+                    if (player.selected.stream_resource_request !== null && addon.transportUrl === player.selected.stream_resource_request.base) {
+                        return addon;
+                    }
 
-                            return origin;
-                        }, player.selected.stream_resource_request !== null ? player.selected.stream_resource_request.base : 'Stream')
-                    }))
-                    :
-                    []
+                    return result;
+                }, null)
             },
             stream_resource_request: player.selected.stream_resource_request,
             meta_resource_request: player.selected.meta_resource_request,

From dabba0f19c852bae455ffce619de8e0af5e24852 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 2 Apr 2020 12:33:15 +0300
Subject: [PATCH 24/27] origin priorities updated in subs menu

---
 src/routes/Player/SubtitlesMenu/SubtitlesMenu.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js b/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
index a9dcf0dde..b06dacb67 100644
--- a/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
+++ b/src/routes/Player/SubtitlesMenu/SubtitlesMenu.js
@@ -6,8 +6,8 @@ const DiscreteSelectInput = require('./DiscreteSelectInput');
 const styles = require('./styles');
 
 const ORIGIN_PRIORITIES = {
-    'EMBEDDED': 1,
-    'Stream': 2
+    'EMBEDDED IN VIDEO': 1,
+    'EMBEDDED IN STREAM': 2
 };
 const LANGUAGE_PRIORITIES = {
     'eng': 1

From 19c747f019495ebccde9872d7ce838c47fe3a749 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 2 Apr 2020 13:41:18 +0300
Subject: [PATCH 25/27] assign addon to every subtitles resouce in usePlayer

---
 src/routes/Player/Player.js    |  6 +++++-
 src/routes/Player/usePlayer.js | 37 +++++++---------------------------
 2 files changed, 12 insertions(+), 31 deletions(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index fab0793ea..e560a8a7b 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -240,7 +240,11 @@ const Player = ({ urlParams }) => {
                 tracks: player.subtitles_resources
                     .filter((subtitles_resource) => subtitles_resource.content.type === 'Ready')
                     .reduce((tracks, subtitles_resource) => {
-                        return tracks.concat(subtitles_resource.content.content);
+                        return tracks.concat(subtitles_resource.content.content.map(({ url, lang }) => ({
+                            url,
+                            lang,
+                            origin: subtitles_resource.addon !== null ? subtitles_resource.addon.manifest.name : subtitles_resource.request.base
+                        })));
                     }, [])
             }
         });
diff --git a/src/routes/Player/usePlayer.js b/src/routes/Player/usePlayer.js
index 36beda83e..b7bb38b2f 100644
--- a/src/routes/Player/usePlayer.js
+++ b/src/routes/Player/usePlayer.js
@@ -62,42 +62,19 @@ const mapPlayerStateWithCtx = (player, ctx) => {
         player.meta_resource;
     const subtitles_resources = player.subtitles_resources.map((subtitles_resource) => {
         const request = subtitles_resource.request;
-        const origin = ctx.profile.addons.reduce((origin, addon) => {
+        const addon = ctx.profile.addons.reduce((result, addon) => {
             if (addon.transportUrl === subtitles_resource.request.base) {
-                return typeof addon.manifest.name === 'string' && addon.manifest.name.length > 0 ?
-                    addon.manifest.name
-                    :
-                    addon.manifest.id;
+                return addon;
             }
 
-            return origin;
-        }, subtitles_resource.request.base);
-        const content = subtitles_resource.content.type === 'Ready' ?
-            {
-                type: 'Ready',
-                content: subtitles_resource.content.content.map(({ url, lang }) => ({
-                    url,
-                    lang,
-                    origin
-                }))
-            }
-            :
-            subtitles_resource.content;
-        return {
-            request,
-            origin,
-            content
-        };
+            return result;
+        }, null);
+        const content = subtitles_resource.content;
+        return { request, addon, content };
     });
     const next_video = player.next_video;
     const lib_item = player.lib_item;
-    return {
-        selected,
-        meta_resource,
-        subtitles_resources,
-        next_video,
-        lib_item
-    };
+    return { selected, meta_resource, subtitles_resources, next_video, lib_item };
 };
 
 const usePlayer = (urlParams) => {

From 1ec803b06dfc1e76f5b1139f0e88af524596e5af Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 2 Apr 2020 18:17:14 +0300
Subject: [PATCH 26/27] basic info menu implemented

---
 src/routes/Player/ControlBar/ControlBar.js |  6 +--
 src/routes/Player/InfoMenu/InfoMenu.js     | 26 +++++++++--
 src/routes/Player/InfoMenu/styles.less     |  2 +-
 src/routes/Player/Player.js                | 54 ++++++----------------
 src/routes/Player/useInfo.js               | 41 ++++++++++++++++
 src/routes/Player/useSettings.js           |  4 +-
 6 files changed, 83 insertions(+), 50 deletions(-)
 create mode 100644 src/routes/Player/useInfo.js

diff --git a/src/routes/Player/ControlBar/ControlBar.js b/src/routes/Player/ControlBar/ControlBar.js
index 11d1bd108..7033efa89 100644
--- a/src/routes/Player/ControlBar/ControlBar.js
+++ b/src/routes/Player/ControlBar/ControlBar.js
@@ -15,7 +15,7 @@ const ControlBar = ({
     volume,
     muted,
     subtitlesTracks,
-    stream,
+    info,
     onPlayRequested,
     onPauseRequested,
     onMuteRequested,
@@ -97,7 +97,7 @@ const ControlBar = ({
                 <Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
                     <Icon className={styles['icon']} icon={'ic_network'} />
                 </Button>
-                <Button className={classnames(styles['control-bar-button'], { 'disabled': typeof stream !== 'object' || stream === null })} tabIndex={-1} onMouseDown={onInfoButtonMouseDown} onClick={onInfoButtonClick}>
+                <Button className={classnames(styles['control-bar-button'], { 'disabled': typeof info !== 'object' || info === null })} tabIndex={-1} onMouseDown={onInfoButtonMouseDown} onClick={onInfoButtonClick}>
                     <Icon className={styles['icon']} icon={'ic_info'} />
                 </Button>
                 <Button className={classnames(styles['control-bar-button'], 'disabled')} tabIndex={-1}>
@@ -122,7 +122,7 @@ ControlBar.propTypes = {
     volume: PropTypes.number,
     muted: PropTypes.bool,
     subtitlesTracks: PropTypes.array,
-    stream: PropTypes.object,
+    info: PropTypes.object,
     onPlayRequested: PropTypes.func,
     onPauseRequested: PropTypes.func,
     onMuteRequested: PropTypes.func,
diff --git a/src/routes/Player/InfoMenu/InfoMenu.js b/src/routes/Player/InfoMenu/InfoMenu.js
index 5d5dd1202..538ac91c1 100644
--- a/src/routes/Player/InfoMenu/InfoMenu.js
+++ b/src/routes/Player/InfoMenu/InfoMenu.js
@@ -1,22 +1,42 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const MetaPreview = require('stremio/common/MetaPreview');
+const { MetaPreview, CONSTANTS } = require('stremio/common');
 const styles = require('./styles');
 
-const InfoMenu = ({ className }) => {
+const InfoMenu = ({ className, ...props }) => {
+    const metaItem = React.useMemo(() => {
+        return props.metaItem !== null ?
+            {
+                ...props.metaItem,
+                links: props.metaItem.links.filter(({ category }) => category === CONSTANTS.SHARE_LINK_CATEGORY)
+            }
+            :
+            null;
+    }, [props.metaItem]);
     const onMouseDown = React.useCallback((event) => {
         event.nativeEvent.infoMenuClosePrevented = true;
     }, []);
     return (
         <div className={classnames(className, styles['info-menu-container'])} onMouseDown={onMouseDown}>
-            <MetaPreview name={'Info menu name'} />
+            <MetaPreview
+                className={styles['meta-preview']}
+                compact={true}
+                name={metaItem.name}
+                logo={metaItem.logo}
+                runtime={metaItem.runtime}
+                releaseInfo={metaItem.releaseInfo}
+                released={metaItem.released}
+                description={metaItem.description}
+                links={metaItem.links}
+            />
         </div>
     );
 };
 
 InfoMenu.propTypes = {
     className: PropTypes.string,
+    metaItem: PropTypes.object
 };
 
 module.exports = InfoMenu;
diff --git a/src/routes/Player/InfoMenu/styles.less b/src/routes/Player/InfoMenu/styles.less
index 67d10f13e..e3f8f74e9 100644
--- a/src/routes/Player/InfoMenu/styles.less
+++ b/src/routes/Player/InfoMenu/styles.less
@@ -1,3 +1,3 @@
 .info-menu-container {
-    
+    width: 30rem;
 }
\ No newline at end of file
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index e560a8a7b..7f05e926e 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -4,52 +4,23 @@ const classnames = require('classnames');
 const debounce = require('lodash.debounce');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
-const { HorizontalNavBar, useDeepEqualEffect, useFullscreen, useBinaryState, useToast } = require('stremio/common');
+const { HorizontalNavBar, useDeepEqualEffect, useFullscreen, useBinaryState, useToast, useProfile } = require('stremio/common');
 const BufferingLoader = require('./BufferingLoader');
 const ControlBar = require('./ControlBar');
 const InfoMenu = require('./InfoMenu');
 const SubtitlesMenu = require('./SubtitlesMenu');
 const Video = require('./Video');
+const useInfo = require('./useInfo');
 const usePlayer = require('./usePlayer');
 const useSettings = require('./useSettings');
 const styles = require('./styles');
 
 const Player = ({ urlParams }) => {
     const { core } = useServices();
+    const profile = useProfile();
     const [player, updateLibraryItemState, pushToLibrary] = usePlayer(urlParams);
-    const [settings, updateSettings] = useSettings();
-    const stream = React.useMemo(() => {
-        return player.selected !== null ? player.selected.stream : null;
-    }, [player]);
-    const metaItem = React.useMemo(() => {
-        return player.meta_resource !== null && player.meta_resource.content.type === 'Ready' ? player.meta_resource.content.content : null;
-    }, [player]);
-    const video = React.useMemo(() => {
-        return metaItem !== null && player.selected !== null && typeof player.selected.video_id === 'string' ?
-            metaItem.videos.reduce((result, video) => {
-                if (video.id === player.selected.video_id) {
-                    return video;
-                }
-
-                return result;
-            }, null)
-            :
-            null;
-    }, [player, metaItem]);
-    const title = React.useMemo(() => {
-        const streamTitle = stream !== null && typeof stream.title === 'string' ? stream.title : '';
-        const metaItemTitle = metaItem !== null ? metaItem.name : '';
-        const videoTitle = video !== null && typeof video.title === 'string' && video.title.length > 0 ? video.title : '';
-        const seriesInfo = video !== null && !isNaN(video.season) && !isNaN(video.episode) ? `${video.season}x${video.episode}` : '';
-        if (metaItemTitle.length > 0) {
-            return metaItemTitle
-                .concat(videoTitle.length > 0 || seriesInfo.length > 0 ? ' -' : '')
-                .concat(videoTitle.length > 0 ? ` ${videoTitle}` : '')
-                .concat(seriesInfo.length > 0 ? ` (${seriesInfo})` : '');
-        } else {
-            return streamTitle;
-        }
-    }, [stream, metaItem, video]);
+    const [settings, updateSettings] = useSettings(profile);
+    const info = useInfo(player, profile);
     const routeFocused = useRouteFocused();
     const toast = useToast();
     const [, , , toggleFullscreen] = useFullscreen();
@@ -275,10 +246,10 @@ const Player = ({ urlParams }) => {
         }
     }, [videoState.subtitlesTracks]);
     React.useEffect(() => {
-        if (stream === null) {
+        if (info === null) {
             closeInfoMenu();
         }
-    }, [stream]);
+    }, [info]);
     React.useEffect(() => {
         const intervalId = setInterval(pushToLibrary, 30000);
         return () => {
@@ -337,7 +308,7 @@ const Player = ({ urlParams }) => {
                 }
                 case 'KeyM': {
                     closeSubtitlesMenu();
-                    if (stream !== null) {
+                    if (info !== null) {
                         toggleInfoMenu();
                     }
 
@@ -356,7 +327,7 @@ const Player = ({ urlParams }) => {
         return () => {
             window.removeEventListener('keydown', onKeyDown);
         };
-    }, [routeFocused, subtitlesMenuOpen, infoMenuOpen, stream, videoState.paused, videoState.time, videoState.volume, videoState.subtitlesTracks, toggleSubtitlesMenu, toggleInfoMenu]);
+    }, [routeFocused, subtitlesMenuOpen, infoMenuOpen, info, videoState.paused, videoState.time, videoState.volume, videoState.subtitlesTracks, toggleSubtitlesMenu, toggleInfoMenu]);
     React.useLayoutEffect(() => {
         return () => {
             setImmersedDebounced.cancel();
@@ -404,7 +375,7 @@ const Player = ({ urlParams }) => {
             }
             <HorizontalNavBar
                 className={classnames(styles['layer'], styles['nav-bar-layer'])}
-                title={title}
+                title={info !== null ? info.title : ''}
                 backButton={true}
                 fullscreenButton={true}
                 onMouseMove={onBarMouseMove}
@@ -418,7 +389,7 @@ const Player = ({ urlParams }) => {
                 volume={videoState.volume}
                 muted={videoState.muted}
                 subtitlesTracks={videoState.subtitlesTracks}
-                stream={stream}
+                info={info}
                 onPlayRequested={onPlayRequested}
                 onPauseRequested={onPauseRequested}
                 onMuteRequested={onMuteRequested}
@@ -454,6 +425,9 @@ const Player = ({ urlParams }) => {
                 infoMenuOpen ?
                     <InfoMenu
                         className={classnames(styles['layer'], styles['menu-layer'])}
+                        stream={info !== null ? info.stream : null}
+                        addon={info !== null ? info.addon : null}
+                        metaItem={info !== null ? info.metaItem : null}
                     />
                     :
                     null
diff --git a/src/routes/Player/useInfo.js b/src/routes/Player/useInfo.js
new file mode 100644
index 000000000..08f85b7c6
--- /dev/null
+++ b/src/routes/Player/useInfo.js
@@ -0,0 +1,41 @@
+const React = require('react');
+
+const useInfo = (player, profile) => {
+    const info = React.useMemo(() => {
+        if (player.selected === null) {
+            return null;
+        }
+
+        const stream = player.selected.stream;
+        const addon = stream.addon;
+        const metaItem = player.meta_resource !== null && player.meta_resource.content.type === 'Ready' ?
+            player.meta_resource.content.content
+            :
+            null;
+        const video = metaItem !== null ?
+            metaItem.videos.reduce((result, video) => {
+                if (video.id === player.selected.video_id) {
+                    return video;
+                }
+
+                return result;
+            }, null)
+            :
+            null;
+        const streamTitle = typeof stream.title === 'string' ? stream.title : '';
+        const metaItemTitle = metaItem !== null ? metaItem.name : '';
+        const videoTitle = video !== null && typeof video.title === 'string' && video.title.length > 0 ? video.title : '';
+        const seriesInfo = video !== null && !isNaN(video.season) && !isNaN(video.episode) ? `${video.season}x${video.episode}` : '';
+        const title = metaItemTitle.length > 0 ?
+            metaItemTitle
+                .concat(videoTitle.length > 0 || seriesInfo.length > 0 ? ' -' : '')
+                .concat(videoTitle.length > 0 ? ` ${videoTitle}` : '')
+                .concat(seriesInfo.length > 0 ? ` (${seriesInfo})` : '')
+            :
+            streamTitle;
+        return { stream, addon, metaItem, title };
+    }, [player, profile]);
+    return info;
+};
+
+module.exports = useInfo;
diff --git a/src/routes/Player/useSettings.js b/src/routes/Player/useSettings.js
index 7cdb7cdf7..be82d6034 100644
--- a/src/routes/Player/useSettings.js
+++ b/src/routes/Player/useSettings.js
@@ -1,10 +1,8 @@
 const React = require('react');
-const { useProfile } = require('stremio/common');
 const { useServices } = require('stremio/services');
 
-const useSettings = () => {
+const useSettings = (profile) => {
     const { core } = useServices();
-    const profile = useProfile();
     const updateSettings = React.useCallback((settings) => {
         core.dispatch({
             action: 'Ctx',

From a2d1ad829c434fe2259ff5ba943b8106b8617cc8 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Thu, 2 Apr 2020 19:07:51 +0300
Subject: [PATCH 27/27] TODO added to InfoMenu

---
 src/routes/Player/InfoMenu/InfoMenu.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/Player/InfoMenu/InfoMenu.js b/src/routes/Player/InfoMenu/InfoMenu.js
index 538ac91c1..e47deff20 100644
--- a/src/routes/Player/InfoMenu/InfoMenu.js
+++ b/src/routes/Player/InfoMenu/InfoMenu.js
@@ -5,6 +5,7 @@ const { MetaPreview, CONSTANTS } = require('stremio/common');
 const styles = require('./styles');
 
 const InfoMenu = ({ className, ...props }) => {
+    // TODO handle stream and addon
     const metaItem = React.useMemo(() => {
         return props.metaItem !== null ?
             {