meta item menu implemented

src/common/MetaItem/MetaItem.js

@@ -1,10 +1,27 @@
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { Popup } from 'stremio-common';
 import Icon from 'stremio-icons/dom';
 import styles from './styles';
 
-class MetaItem extends PureComponent {
+class MetaItem extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            menuPopupOpen: false
+        };
+    }
+
+    onMenuPopupOpen = () => {
+        this.setState({ menuPopupOpen: true });
+    }
+
+    onMenuPopupClose = () => {
+        this.setState({ menuPopupOpen: false });
+    }
+
     renderProgress() {
         if (this.props.progress === 0) {
             return null;
@@ -32,13 +49,35 @@ class MetaItem extends PureComponent {
     }
 
     renderTitleBar() {
-        if (this.props.title.length === 0) {
+        if (this.props.title.length === 0 && this.props.menu.length === 0) {
             return null;
         }
 
         return (
             <div className={styles['title-bar-container']}>
                 <div className={styles['title']}>{this.props.title}</div>
+                {
+                    this.props.menu.length > 0 ?
+                        <Popup className={this.props.popupClassName} onOpen={this.onMenuPopupOpen} onClose={this.onMenuPopupClose}>
+                            <Popup.Label>
+                                <div className={classnames(styles['menu-label'], { 'active': this.state.menuPopupOpen })}>
+                                    <Icon
+                                        className={styles['menu-icon']}
+                                        icon={'ic_more'}
+                                    />
+                                </div>
+                            </Popup.Label>
+                            <Popup.Menu>
+                                <div className={styles['menu-items-container']}>
+                                    {this.props.menu.map(({ label, callback }) => (
+                                        <div key={label} className={styles['menu-item']} onClick={callback}>{label}</div>
+                                    ))}
+                                </div>
+                            </Popup.Menu>
+                        </Popup>
+                        :
+                        null
+                }
             </div>
         );
     }
@@ -55,6 +94,7 @@ class MetaItem extends PureComponent {
 
 MetaItem.propTypes = {
     className: PropTypes.string,
+    popupClassName: PropTypes.string,
     type: PropTypes.string.isRequired,
     relativeSize: PropTypes.oneOf(['auto', 'height']).isRequired,
     posterShape: PropTypes.oneOf(['poster', 'landscape', 'square']).isRequired,
@@ -63,6 +103,10 @@ MetaItem.propTypes = {
     subtitle: PropTypes.string.isRequired,
     progress: PropTypes.number.isRequired,
     released: PropTypes.instanceOf(Date).isRequired,
+    menu: PropTypes.arrayOf(PropTypes.shape({
+        label: PropTypes.string.isRequired,
+        callback: PropTypes.func.isRequired
+    })).isRequired
 };
 MetaItem.defaultProps = {
     relativeSize: 'auto',
@@ -71,7 +115,8 @@ MetaItem.defaultProps = {
     title: '',
     subtitle: '',
     progress: 0,
-    released: new Date(NaN)
+    released: new Date(NaN),
+    menu: Object.freeze([])
 };
 
 export default MetaItem;

src/common/MetaItem/styles.less

@@ -48,7 +48,7 @@
     }
 
     .title-bar-container {
-        height: calc(var(--poster-relative-size) * 0.14);
+        height: 3em;
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -59,6 +59,22 @@
             padding: 0 0.5em;
             color: var(--color-surfacelighter);
         }
+
+        .menu-label {
+            width: 3em;
+            height: 3em;
+            padding: 0.8em;
+
+            .menu-icon {
+                width: 100%;
+                height: 100%;
+                fill: var(--color-surfacelighter);
+            }
+
+            &:hover, &:global(.active) {
+                background-color: var(--color-backgroundlighter);
+            }
+        }
     }
 
     &.poster-shape-square {
@@ -90,4 +106,21 @@
             }
         }
     }
+}
+
+.menu-items-container {
+    background-color: var(--color-surfacelighter);
+    min-width: calc(var(--poster-relative-size) * 0.3);
+    max-width: var(--poster-relative-size);
+
+    .menu-item {
+        width: 100%;
+        color: var(--color-backgrounddarker);
+        font-size: 1.2em;
+        padding: 0.5em;
+
+        &:hover {
+            background-color: var(--color-surfacelight);
+        }
+    }
 }