From 428cb776ce3f6b187b2e4765ea4a7df32eeea2d4 Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Wed, 11 Mar 2020 15:25:53 +0200
Subject: [PATCH] nav bar added to player

---
 src/routes/Player/Player.js   | 13 ++++++++++++-
 src/routes/Player/styles.less | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 03ce353bf..840c9c975 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -1,7 +1,7 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const { useDeepEqualEffect, useBinaryState } = require('stremio/common');
+const { HorizontalNavBar, useDeepEqualEffect, useBinaryState } = require('stremio/common');
 const BufferingLoader = require('./BufferingLoader');
 const ControlBar = require('./ControlBar');
 const SubtitlesPicker = require('./SubtitlesPicker');
@@ -153,6 +153,17 @@ const Player = ({ urlParams }) => {
                     :
                     null
             }
+            <HorizontalNavBar
+                className={classnames(styles['layer'], styles['nav-bar-layer'])}
+                title={
+                    player.meta_resource !== null && player.meta_resource.content.type === 'Ready' ?
+                        player.meta_resource.content.content.name
+                        :
+                        null
+                }
+                backButton={true}
+                fullscreenButton={true}
+            />
             <ControlBar
                 className={classnames(styles['layer'], styles['control-bar-layer'])}
                 paused={state.paused}
diff --git a/src/routes/Player/styles.less b/src/routes/Player/styles.less
index 21206079e..ba052b6a2 100644
--- a/src/routes/Player/styles.less
+++ b/src/routes/Player/styles.less
@@ -1,5 +1,11 @@
 @import (reference) '~stremio-colors/dist/less/stremio-colors.less';
 
+:import('~stremio/common/NavBar/HorizontalNavBar/styles.less') {
+    nav-bar-button-container: button-container;
+    nav-bar-title: title;
+    nav-bar-icon: icon;
+}
+
 .player-container {
     position: relative;
     z-index: 0;
@@ -15,6 +21,35 @@
         bottom: 0;
         z-index: 0;
 
+        &.nav-bar-layer {
+            bottom: initial;
+            background: transparent;
+
+            &::before {
+                position: absolute;
+                right: 0;
+                top: 0;
+                left: 0;
+                z-index: -1;
+                box-shadow: 0 0 8rem 6rem @color-background-dark5;
+                content: "";
+            }
+
+            .nav-bar-button-container {
+                &:hover {
+                    background: transparent;
+                }
+
+                .nav-bar-icon {
+                    fill: @color-surface-light5;
+                }
+            }
+
+            .nav-bar-title {
+                color: @color-surface-light5;
+            }
+        }
+
         &.control-bar-layer {
             top: initial;
             overflow: visible;