diff --git a/src/common/NavBar/FullscreenButton/FullscreenButton.js b/src/common/NavBar/FullscreenButton/FullscreenButton.js
new file mode 100644
index 000000000..6aa93a985
--- /dev/null
+++ b/src/common/NavBar/FullscreenButton/FullscreenButton.js
@@ -0,0 +1,22 @@
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const Icon = require('stremio-icons/dom');
+const Button = require('stremio/common/Button');
+const useFullscreen = require('stremio/common/useFullscreen');
+const styles = require('./styles');
+
+const FullscreenButton = ({ className }) => {
+ const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
+ return (
+
+ );
+};
+
+FullscreenButton.propTypes = {
+ className: PropTypes.string
+};
+
+module.exports = FullscreenButton;
diff --git a/src/common/NavBar/FullscreenButton/index.js b/src/common/NavBar/FullscreenButton/index.js
new file mode 100644
index 000000000..591e5393e
--- /dev/null
+++ b/src/common/NavBar/FullscreenButton/index.js
@@ -0,0 +1,3 @@
+const FullscreenButton = require('./FullscreenButton');
+
+module.exports = FullscreenButton;
diff --git a/src/common/NavBar/FullscreenButton/styles.less b/src/common/NavBar/FullscreenButton/styles.less
new file mode 100644
index 000000000..63a7e636e
--- /dev/null
+++ b/src/common/NavBar/FullscreenButton/styles.less
@@ -0,0 +1,17 @@
+.fullscreen-button-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+
+ &:hover {
+ background-color: var(--color-secondary);
+ }
+
+ .icon {
+ flex: none;
+ width: 1.6rem;
+ height: 1.6rem;
+ fill: var(--color-surfacelighter);
+ }
+}
\ No newline at end of file
diff --git a/src/common/NavBar/NavBar.js b/src/common/NavBar/NavBar.js
index f6004c815..f983803f6 100644
--- a/src/common/NavBar/NavBar.js
+++ b/src/common/NavBar/NavBar.js
@@ -4,10 +4,11 @@ const classnames = require('classnames');
const NavTabButton = require('./NavTabButton');
const SearchBar = require('./SearchBar');
const AddonsButton = require('./AddonsButton');
+const FullscreenButton = require('./FullscreenButton');
const NavMenu = require('./NavMenu');
const styles = require('./styles');
-const NavBar = React.memo(({ className, backButton = false, tabs = [], title = '', searchBar = false, addonsButton = false, navMenu = false }) => {
+const NavBar = React.memo(({ className, backButton = false, tabs = [], title = '', searchBar = false, addonsButton = false, fullscreenButton = false, navMenu = false }) => {
const backButtonOnClick = React.useCallback(() => {
window.history.back();
}, []);
@@ -55,6 +56,12 @@ const NavBar = React.memo(({ className, backButton = false, tabs = [], title = '
:
null
}
+ {
+ fullscreenButton ?
+
+ :
+ null
+ }
{
navMenu ?
@@ -79,6 +86,7 @@ NavBar.propTypes = {
title: PropTypes.string,
searchBar: PropTypes.bool,
addonsButton: PropTypes.bool,
+ fullscreenButton: PropTypes.bool,
navMenu: PropTypes.bool
};
diff --git a/src/common/NavBar/styles.less b/src/common/NavBar/styles.less
index 8362510b1..8ce93fe4e 100644
--- a/src/common/NavBar/styles.less
+++ b/src/common/NavBar/styles.less
@@ -42,7 +42,7 @@
}
}
- .addons-button, .nav-menu {
+ .addons-button, .fullscreen-button, .nav-menu {
flex: none;
width: 3.2rem;
height: 3.2rem;