From d117fe86ecc2ba69709c0ee4194678afe2c2b5bf Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Fri, 18 Jan 2019 15:58:20 +0200
Subject: [PATCH] MetaItem click/focus implemented

---
 src/common/MetaItem/MetaItem.js | 12 ++++++++++--
 src/common/MetaItem/styles.less |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index 7642edced..6200a52c9 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -22,6 +22,13 @@ class MetaItem extends Component {
         this.setState({ menuPopupOpen: false });
     }
 
+    onClick = (event) => {
+        event.preventDefault();
+        if (typeof this.props.onClick === 'function') {
+            this.props.onClick();
+        }
+    }
+
     renderProgress() {
         if (this.props.progress === 0) {
             return null;
@@ -92,10 +99,10 @@ class MetaItem extends Component {
 
     render() {
         return (
-            <div className={classnames(styles['meta-item-container'], styles[`relative-size-${this.props.relativeSize}`], styles[`poster-shape-${this.props.posterShape}`], this.props.className)}>
+            <a className={classnames(styles['meta-item-container'], styles[`relative-size-${this.props.relativeSize}`], styles[`poster-shape-${this.props.posterShape}`], this.props.className)} href="#" onClick={this.onClick}>
                 {this.renderPoster()}
                 {this.renderInfoBar()}
-            </div>
+            </a>
         );
     }
 }
@@ -103,6 +110,7 @@ class MetaItem extends Component {
 MetaItem.propTypes = {
     className: PropTypes.string,
     popupClassName: PropTypes.string,
+    onClick: PropTypes.func,
     type: PropTypes.string.isRequired,
     relativeSize: PropTypes.oneOf(['auto', 'height']).isRequired,
     posterShape: PropTypes.oneOf(['poster', 'landscape', 'square']).isRequired,
diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less
index 17e49d9ad..1270f791e 100644
--- a/src/common/MetaItem/styles.less
+++ b/src/common/MetaItem/styles.less
@@ -74,7 +74,7 @@
         }
     }
 
-    &:hover {
+    &:hover, &:focus {
         cursor: pointer;
         padding: 0;
         border: calc(var(--progress-bar-size) * 0.5) solid white;