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;