refactor(OptionMenu): improve code structure

src/routes/Player/OptionsMenu/Option/Option.js

@@ -0,0 +1,32 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const Icon = require('@stremio/stremio-icons/dom');
+const { Button } = require('stremio/common');
+const styles = require('./styles');
+
+const Option = ({ icon, label, playerId, disabled, onClick }) => {
+    const onButtonClick = React.useCallback(() => {
+        if (typeof onClick === 'function') {
+            onClick(playerId);
+        }
+    }, [onClick, playerId]);
+    return (
+        <Button className={classnames(styles['option-container'], { 'disabled': disabled })} disabled={disabled} onClick={onButtonClick}>
+            <Icon className={styles['icon']} icon={icon} />
+            <div className={styles['label']}>{ label }</div>
+        </Button>
+    );
+};
+
+Option.propTypes = {
+    icon: PropTypes.string,
+    label: PropTypes.string,
+    playerId: PropTypes.string,
+    disabled: PropTypes.bool,
+    onClick: PropTypes.func,
+};
+
+module.exports = Option;

src/routes/Player/OptionsMenu/Option/index.js

@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
+const Option = require('./Option');
+
+module.exports = Option;

src/routes/Player/OptionsMenu/Option/styles.less

@@ -0,0 +1,33 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
+@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+
+.option-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 4rem;
+
+    .icon {
+        flex: none;
+        width: 1.4rem;
+        height: 1.4rem;
+        margin: 1.3rem;
+        fill: @color-surface-light5-90;
+    }
+
+    .label {
+        flex: 1;
+        max-height: 2.4em;
+        font-weight: 400;
+        color: @color-surface-light5-90;
+    }
+
+    &:hover {
+        background-color: @color-background-light2;
+    }
+
+    &:global(.disabled) {
+        opacity: 0.5;
+    }
+}

src/routes/Player/OptionsMenu/OptionsMenu.js

@@ -3,9 +3,9 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const Icon = require('@stremio/stremio-icons/dom');
+const { useToast } = require('stremio/common');
-const { Button, useToast } = require('stremio/common');
 const { useServices } = require('stremio/services');
+const Option = require('./Option');
 const styles = require('./styles');
 
 const OptionsMenu = ({ className, stream, playbackDevices }) => {
@@ -71,22 +71,27 @@ const OptionsMenu = ({ className, stream, playbackDevices }) => {
     }, []);
     return (
         <div className={classnames(className, styles['options-menu-container'])} onMouseDown={onMouseDown}>
-            <Button className={classnames(styles['option-container'], { 'disabled': stream === null })} disabled={stream === null} onClick={onCopyStreamButtonClick}>
+            <Option
-                <Icon className={styles['icon']} icon={'ic_link'} />
+                icon={'ic_link'}
-                <div className={styles['label']}>Copy Stream Link</div>
+                label={'Copy Stream Link'}
-            </Button>
+                disabled={stream === null}
-            <Button className={classnames(styles['option-container'], { 'disabled': stream === null })} disabled={stream === null}onClick={onDownloadVideoButtonClick}>
+                onClick={onCopyStreamButtonClick}
-                <Icon className={styles['icon']} icon={'ic_downloads'} />
+            />
-                <div className={styles['label']}>Download Video</div>
+            <Option
-            </Button>
+                icon={'ic_downloads'}
+                label={'Download Video'}
+                disabled={stream === null}
+                onClick={onDownloadVideoButtonClick}
+            />
             {
                 !stream.infoHash && externalPlayers.map(({ id, name }) => (
-                    <ExternalPlayerButton
+                    <Option
                         key={id}
-                        id={id}
+                        icon={'ic_vlc'}
-                        name={name}
+                        label={`Play in ${name}`}
+                        playerId={id}
                         disabled={stream === null}
-                        onExternalPlayRequested={onExternalPlayRequested}
+                        onClick={onExternalPlayRequested}
                     />
                 ))
             }
@@ -100,25 +105,4 @@ OptionsMenu.propTypes = {
     playbackDevices: PropTypes.array
 };
 
-const ExternalPlayerButton = ({ id, name, disabled, onExternalPlayRequested }) => {
-    const onClick = React.useCallback(() => {
-        if (typeof onExternalPlayRequested === 'function') {
-            onExternalPlayRequested(id);
-        }
-    }, [onExternalPlayRequested, id]);
-    return (
-        <Button className={classnames(styles['option-container'], { 'disabled': disabled })} disabled={disabled} onClick={onClick}>
-            <Icon className={styles['icon']} icon={'ic_vlc'} />
-            <div className={styles['label']}>Play in {name}</div>
-        </Button>
-    );
-};
-
-ExternalPlayerButton.propTypes = {
-    id: PropTypes.string,
-    name: PropTypes.string,
-    disabled: PropTypes.bool,
-    onExternalPlayRequested: PropTypes.func,
-};
-
 module.exports = OptionsMenu;

src/routes/Player/OptionsMenu/styles.less

@@ -1,37 +1,3 @@
-// Copyright (C) 2017-2022 Smart code 203358507
-
-@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
-
 .options-menu-container {
     width: 15rem;
-
-    .option-container {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        height: 4rem;
-
-        .icon {
-            flex: none;
-            width: 1.4rem;
-            height: 1.4rem;
-            margin: 1.3rem;
-            fill: @color-surface-light5-90;
-        }
-
-        .label {
-            flex: 1;
-            max-height: 2.4em;
-            font-weight: 400;
-            color: @color-surface-light5-90;
-        }
-
-        &:hover {
-            background-color: @color-background-light2;
-        }
-
-        &:global(.disabled) {
-            opacity: 0.5;
-        }
-    }
 }