Adding hover actions to now playing artwork (kiosk mode / album)

src/js/components/Thumbnail.js

@@ -61,6 +61,7 @@ export default memo((props) => {
       )}
       {props.glow && image && <div className="thumbnail__image thumbnail__image--glow" style={{ backgroundImage: `url("${image}")` }} />}
       {zoom_icon}
+      {props.children}
     </div>
   );
 });

src/js/views/Queue.js

@@ -121,6 +121,7 @@ class Queue extends React.Component {
 
   renderArtwork(image) {
     const { current_track } = this.props;
+    const uri = (current_track && current_track.album && current_track.album.uri) ? current_track.album.uri : null;
 
     if (!image) {
       return (
@@ -130,15 +131,18 @@ class Queue extends React.Component {
       );
     }
 
-    let uri = null;
-    if (current_track.album && current_track.album.uri) {
-      uri = current_track.album.uri;
-    }
     return (
       <div className="current-track__artwork">
-        <Link to="/kiosk-mode" >
-          <Thumbnail glow image={image} />
-        </Link>
+        <Thumbnail glow image={image}>
+          <div className="current-track__artwork__actions">
+            <URILink uri={uri} className="current-track__artwork__actions__item">
+              <Icon name="album" />
+            </URILink>
+            <Link to="/kiosk-mode" className="current-track__artwork__actions__item">
+              <Icon name="expand" type="fontawesome" />
+            </Link>
+          </div>
+        </Thumbnail>
       </div>
     );
   }
@@ -274,7 +278,7 @@ class Queue extends React.Component {
                   <li><Dater type="total-time" data={queue_tracks} /></li>
                   {queue_tracks.length > 0 && (
                     <li>
-                      <a onClick={e => this.props.mopidyActions.clearTracklist()}>
+                      <a onClick={this.props.mopidyActions.clearTracklist}>
                         <Icon name="delete_sweep" />
                         Clear queue
                       </a>
@@ -287,6 +291,7 @@ class Queue extends React.Component {
 
           <section className="list-wrapper">
             <TrackList
+              uri="iris:queue"
               show_source_icon
               track_context="queue"
               className="queue-track-list"

src/scss/views/_queue.scss

@@ -21,6 +21,47 @@
       .thumbnail {
         width: 30vh;
         display: inline-block;
+
+        &:hover {
+          .current-track__artwork__actions {
+            opacity: 1;
+          }
+        }
+      }
+
+      &__actions {
+        position: absolute;
+        display: flex;
+        opacity: 0;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+
+        &__item {
+          @include animate();
+          display: inline-flex;
+          z-index: 3;
+          width: 4.2rem;
+          height: 4.2rem;
+          align-items: center;
+          justify-content: center;
+          border-radius: 100%;
+          background: rgba(0,0,0,0.4);
+          font-size: 2rem;
+          cursor: pointer;
+          color: colour(white);
+          border: 0 !important;
+          margin: 0 5px;
+
+          &:hover {
+            background: colour(black);
+          }
+        }
       }
     }