Subtitles button layout in player

src/routes/Player/ControlBar/ControlBar.js

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

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

@@ -6,21 +6,21 @@ const { Button, Popup, useBinaryState } = require('stremio/common');
 const styles = require('./styles');
 
 const ShareButton = ({ className, modalContainerClassName }) => {
-    const [modalOpen, openModal, closeModal, toggleModal] = useBinaryState(false);
+    const [popupOpen, openPopup, closePopup, togglePopup] = useBinaryState(false);
     return (
         <Popup
-            open={modalOpen}
+            open={popupOpen}
             menuModalClassName={classnames(modalContainerClassName, styles['share-modal-container'])}
             menuRelativePosition={false}
             renderLabel={(ref) => (
-                <Button ref={ref} className={classnames(className, { 'active': modalOpen })} tabIndex={-1} onClick={toggleModal}>
+                <Button ref={ref} className={classnames(className, { 'active': popupOpen })} tabIndex={-1} onClick={togglePopup}>
                     <Icon className={'icon'} icon={'ic_share'} />
                 </Button>
             )}
             renderMenu={() => (
                 <div className={styles['share-dialog-container']} />
             )}
-            onCloseRequest={closeModal}
+            onCloseRequest={closePopup}
         />
     );
 };

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

@@ -1,8 +1,6 @@
 .share-modal-container {
     .share-dialog-container {
-        flex: none;
         width: 10rem;
         height: 5rem;
-        background-color: var(--color-backgroundlighter);
     }
 }

src/routes/Player/ControlBar/SubtitlesButton/SubtitlesButton.js

@@ -2,65 +2,32 @@ 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 SubtitlesPicker = require('./SubtitlesPicker');
 const styles = require('./styles');
 
-class SubtitlesButton 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 ||
-            nextProps.subtitlesTracks !== this.props.subtitlesTracks ||
-            nextProps.selectedSubtitlesTrackId !== this.props.selectedSubtitlesTrackId ||
-            nextProps.subtitlesSize !== this.props.subtitlesSize ||
-            nextProps.subtitlesDelay !== this.props.subtitlesDelay ||
-            nextProps.subtitlesTextColor !== this.props.subtitlesTextColor ||
-            nextProps.subtitlesBackgroundColor !== this.props.subtitlesBackgroundColor ||
-            nextProps.subtitlesOutlineColor !== this.props.subtitlesOutlineColor;
-    }
-
-    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 }, { 'disabled': this.props.subtitlesTracks.length === 0 })}>
-                        <Icon className={'icon'} icon={'ic_sub'} />
-                    </div>
-                </Popup.Label>
-                <Popup.Menu className={this.props.modalContainerClassName}>
-                    <SubtitlesPicker
-                        className={styles['subtitles-picker-container']}
-                        subtitlesTracks={this.props.subtitlesTracks}
-                        selectedSubtitlesTrackId={this.props.selectedSubtitlesTrackId}
-                        subtitlesSize={this.props.subtitlesSize}
-                        subtitlesDelay={this.props.subtitlesDelay}
-                        subtitlesTextColor={this.props.subtitlesTextColor}
-                        subtitlesBackgroundColor={this.props.subtitlesBackgroundColor}
-                        subtitlesOutlineColor={this.props.subtitlesOutlineColor}
-                        dispatch={this.props.dispatch}
-                    />
-                </Popup.Menu>
-            </Popup>
-        );
-    }
-}
+const SubtitlesButton = (props) => {
+    const [popupOpen, openPopup, closePopup, togglePopup] = useBinaryState(false);
+    return (
+        <Popup
+            open={popupOpen}
+            menuModalClassName={classnames(props.modalContainerClassName, styles['subtitles-modal-container'])}
+            menuRelativePosition={false}
+            renderLabel={(ref) => (
+                <Button ref={ref} className={classnames(props.className, { 'active': popupOpen }, { 'disabled': !Array.isArray(props.subtitlesTracks) || props.subtitlesTracks.length === 0 })} tabIndex={-1} onClick={togglePopup}>
+                    <Icon className={'icon'} icon={'ic_sub'} />
+                </Button>
+            )}
+            renderMenu={() => (
+                <SubtitlesPicker
+                    {...props}
+                    className={styles['subtitles-picker-container']}
+                />
+            )}
+            onCloseRequest={closePopup}
+        />
+    );
+};
 
 SubtitlesButton.propTypes = {
     className: PropTypes.string,
@@ -69,7 +36,7 @@ SubtitlesButton.propTypes = {
         id: PropTypes.string.isRequired,
         label: PropTypes.string.isRequired,
         origin: PropTypes.string.isRequired
-    })).isRequired,
+    })),
     selectedSubtitlesTrackId: PropTypes.string,
     subtitlesSize: PropTypes.number,
     subtitlesDelay: PropTypes.number,
@@ -78,8 +45,5 @@ SubtitlesButton.propTypes = {
     subtitlesOutlineColor: PropTypes.string,
     dispatch: PropTypes.func.isRequired
 };
-SubtitlesButton.defaultProps = {
-    subtitlesTracks: Object.freeze([])
-};
 
 module.exports = SubtitlesButton;

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

@@ -1,4 +1,6 @@
-.subtitles-picker-container {
-    --subtitles-picker-button-size: calc(var(--control-bar-button-size) * 0.6);
-    background-color: var(--color-backgrounddark);
+.subtitles-modal-container {
+    .subtitles-picker-container {
+        width: 35rem;
+        height: 25rem;
+    }
 }

src/routes/Player/ControlBar/styles.less

@@ -1,3 +1,11 @@
+:import('./ShareButton/styles.less') {
+    share-dialog-container: share-dialog-container;
+}
+
+:import('./SubtitlesButton/styles.less') {
+    subtitles-picker-container: subtitles-picker-container;
+}
+
 .control-bar-container {
     position: relative;
     z-index: 0;
@@ -69,4 +77,10 @@
     align-items: flex-end;
     justify-content: flex-end;
     padding: 8rem 1rem;
+
+    .share-dialog-container, .subtitles-picker-container {
+        flex: none;
+        background-color: var(--color-backgroundlighter);
+        border: thin solid var(--color-surfacelighter20);
+    }
 }