Fullscreen button implemented

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 (
+        <Button className={classnames(className, styles['fullscreen-button-container'])} title={fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'} onClick={fullscreen ? exitFullscreen : requestFullscreen} tabIndex={-1}>
+            <Icon className={styles['icon']} icon={fullscreen ? 'ic_exit_fullscreen' : 'ic_fullscreen'} />
+        </Button>
+    );
+};
+
+FullscreenButton.propTypes = {
+    className: PropTypes.string
+};
+
+module.exports = FullscreenButton;

src/common/NavBar/FullscreenButton/index.js

@@ -0,0 +1,3 @@
+const FullscreenButton = require('./FullscreenButton');
+
+module.exports = FullscreenButton;

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);
+    }
+}

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 ?
+                    <FullscreenButton className={styles['fullscreen-button']} />
+                    :
+                    null
+            }
             {
                 navMenu ?
                     <NavMenu className={styles['nav-menu']} />
@@ -79,6 +86,7 @@ NavBar.propTypes = {
     title: PropTypes.string,
     searchBar: PropTypes.bool,
     addonsButton: PropTypes.bool,
+    fullscreenButton: PropTypes.bool,
     navMenu: PropTypes.bool
 };
 

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;