sample share modal adapted to common components

src/routes/Player/ControlBar/ControlBar.js

@@ -36,7 +36,7 @@ const ControlBar = (props) => {
                     dispatch={props.dispatch}
                 />
                 <div className={styles['spacing']} />
-                <SubtitlesButton
+                {/* <SubtitlesButton
                     className={styles['control-bar-button']}
                     modalContainerClassName={classnames(styles['modal-container'], props.modalContainerClassName)}
                     subtitlesTracks={props.subtitlesTracks}
@@ -48,9 +48,10 @@ const ControlBar = (props) => {
                     subtitlesOutlineColor={props.subtitlesOutlineColor}
                     dispatch={props.dispatch}
                 />
+                 */}
                 <ShareButton
                     className={styles['control-bar-button']}
-                    modalContainerClassName={classnames(styles['modal-container'], props.modalContainerClassName)}
+                    modalContainerClassName={styles['modal-container']}
                 />
             </div>
         </div>

src/routes/Player/ControlBar/ShareButton/ShareButton.js

@@ -2,47 +2,28 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
 const Icon = require('stremio-icons/dom');
-const { Popup } = require('stremio/common');
+const { Button, Popup, useBinaryState } = require('stremio/common');
 const styles = require('./styles');
 
-class ShareButton extends React.Component {
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            popupOpen: false
-        };
-    }
-
-    shouldComponentUpdate(nextProps, nextState) {
-        return nextState.popupOpen !== this.state.popupOpen ||
-            nextProps.className !== this.props.className ||
-            nextProps.modalContainerClassName !== this.props.modalContainerClassName;
-    }
-
-    onPopupOpen = () => {
-        this.setState({ popupOpen: true });
-    }
-
-    onPopupClose = () => {
-        this.setState({ popupOpen: false });
-    }
-
-    render() {
-        return (
-            <Popup onOpen={this.onPopupOpen} onClose={this.onPopupClose}>
-                <Popup.Label>
-                    <div className={classnames(this.props.className, { 'active': this.state.popupOpen })}>
-                        <Icon className={'icon'} icon={'ic_share'} />
-                    </div>
-                </Popup.Label>
-                <Popup.Menu className={this.props.modalContainerClassName}>
-                    <div className={styles['share-dialog-container']} />
-                </Popup.Menu>
-            </Popup>
-        );
-    }
-}
+const ShareButton = ({ className, modalContainerClassName }) => {
+    const [modalOpen, openModal, closeModal, toggleModal] = useBinaryState(false);
+    return (
+        <Popup
+            open={modalOpen}
+            menuModalClassName={classnames(modalContainerClassName, styles['share-modal-container'])}
+            menuRelativePosition={false}
+            renderLabel={(ref) => (
+                <Button ref={ref} className={classnames(className, { 'active': modalOpen })} tabIndex={-1} onClick={toggleModal}>
+                    <Icon className={'icon'} icon={'ic_share'} />
+                </Button>
+            )}
+            renderMenu={() => (
+                <div className={styles['share-dialog-container']} />
+            )}
+            onCloseRequest={closeModal}
+        />
+    );
+};
 
 ShareButton.propTypes = {
     className: PropTypes.string,

src/routes/Player/ControlBar/ShareButton/styles.less

@@ -1,5 +1,8 @@
-.share-dialog-container {
-    width: calc(var(--control-bar-button-size) * 5);
-    height: calc(var(--control-bar-button-size) * 3);
-    background-color: var(--color-backgrounddark);
+.share-modal-container {
+    .share-dialog-container {
+        flex: none;
+        width: 10rem;
+        height: 5rem;
+        background-color: var(--color-backgroundlighter);
+    }
 }

src/routes/Player/ControlBar/styles.less

@@ -62,4 +62,11 @@
             flex: 1;
         }
     }
+}
+
+.modal-container {
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+    padding: 8rem 1rem;
 }