From 0d3ac044b88c0824e51eedc97a175a807e600239 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Wed, 8 Apr 2020 09:15:15 +1200
Subject: [PATCH] Adding hover actions to now playing artwork (kiosk mode /
 album)

---
 src/js/components/Thumbnail.js |  1 +
 src/js/views/Queue.js          | 21 ++++++++++-------
 src/scss/views/_queue.scss     | 41 ++++++++++++++++++++++++++++++++++
 3 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/src/js/components/Thumbnail.js b/src/js/components/Thumbnail.js
index b2674796..43235a7c 100755
--- a/src/js/components/Thumbnail.js
+++ b/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>
   );
 });
diff --git a/src/js/views/Queue.js b/src/js/views/Queue.js
index 585ed0b8..a1fcad42 100755
--- a/src/js/views/Queue.js
+++ b/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"
diff --git a/src/scss/views/_queue.scss b/src/scss/views/_queue.scss
index d461434f..e00abcf6 100755
--- a/src/scss/views/_queue.scss
+++ b/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);
+          }
+        }
       }
     }