Medium Support (Multi-disc Albums), Quality Grouping (#121)

* Multi Disc Stage 1 - Backend Work

* Quality Group Functionality

* Fixed: Only show wanted album types on ArtistDetail page

* Add Media Count Column to ArtistDetail Page

* Parser updates for multidisc cases, other usenet release title formats

* Search for Tracks by Medium Number in Addition to Title and TrackNumber

* Medium Renaming Token for Track Naming

* fixup Codacy and Comment Cleanup

* fixup remove comments

frontend/src/Components/Tooltip/Popover.js

@@ -53,6 +53,14 @@ class Popover extends Component {
     this.state = {
       isOpen: false
     };
+
+    this._closeTimeout = null;
+  }
+
+  componentWillUnmount() {
+    if (this._closeTimeout) {
+      this._closeTimeout = clearTimeout(this._closeTimeout);
+    }
   }
 
   //
@@ -63,11 +71,17 @@ class Popover extends Component {
   }
 
   onMouseEnter = () => {
+    if (this._closeTimeout) {
+      this._closeTimeout = clearTimeout(this._closeTimeout);
+    }
+
     this.setState({ isOpen: true });
   }
 
   onMouseLeave = () => {
-    this.setState({ isOpen: false });
+    this._closeTimeout = setTimeout(() => {
+      this.setState({ isOpen: false });
+    }, 100);
   }
 
   //
@@ -98,24 +112,28 @@ class Popover extends Component {
 
         {
           this.state.isOpen &&
-            <div className={styles.popoverContainer}>
-              <div className={styles.popover}>
-                <div
-                  className={classNames(
-                    styles.arrow,
-                    styles[position]
-                  )}
-                />
+          <div
+            className={styles.popoverContainer}
+            onMouseEnter={this.onMouseEnter}
+            onMouseLeave={this.onMouseLeave}
+          >
+            <div className={styles.popover}>
+              <div
+                className={classNames(
+                  styles.arrow,
+                  styles[position]
+                )}
+              />
 
-                <div className={styles.title}>
-                  {title}
-                </div>
+              <div className={styles.title}>
+                {title}
+              </div>
 
-                <div className={styles.body}>
-                  {body}
-                </div>
+              <div className={styles.body}>
+                {body}
               </div>
             </div>
+          </div>
         }
       </TetherComponent>
     );

frontend/src/Components/Tooltip/Tooltip.js

@@ -50,11 +50,17 @@ class Tooltip extends Component {
   constructor(props, context) {
     super(props, context);
 
-    this._closeTimeout = null;
-
     this.state = {
       isOpen: false
     };
+
+    this._closeTimeout = null;
+  }
+
+  componentWillUnmount() {
+    if (this._closeTimeout) {
+      this._closeTimeout = clearTimeout(this._closeTimeout);
+    }
   }
 
   //
@@ -83,6 +89,7 @@ class Tooltip extends Component {
 
   render() {
     const {
+      className,
       anchor,
       tooltip,
       kind,
@@ -97,6 +104,7 @@ class Tooltip extends Component {
         {...tetherOptions[position]}
       >
         <span
+          className={className}
           // onClick={this.onClick}
           onMouseEnter={this.onMouseEnter}
           onMouseLeave={this.onMouseLeave}
@@ -137,6 +145,7 @@ class Tooltip extends Component {
 }
 
 Tooltip.propTypes = {
+  className: PropTypes.string,  
   anchor: PropTypes.node.isRequired,
   tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
   kind: PropTypes.oneOf([kinds.DEFAULT, kinds.INVERSE]),