From 0d9e22b7110ba01ad41bf183dbbbe3708ccd0b2e Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Tue, 18 Jan 2022 05:00:06 -0800
Subject: [PATCH] added sticky bar to artist page, added .more-btn-round css
 class

---
 src/renderer/style.less                       | 126 ++++++++++--------
 .../views/components/mediaitem-info.ejs       |   0
 src/renderer/views/pages/artist.ejs           |  34 +++--
 src/renderer/views/pages/cider-playlist.ejs   |  20 +--
 4 files changed, 99 insertions(+), 81 deletions(-)
 create mode 100644 src/renderer/views/components/mediaitem-info.ejs

diff --git a/src/renderer/style.less b/src/renderer/style.less
index 1f31f842..686031bf 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -1898,6 +1898,36 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 /* Cider */
 
+.more-btn-round {
+  border-radius: 100%;
+  background: rgba(100, 100, 100, 0.5);
+  box-shadow: var(--ciderShadow-Generic);
+  width: 32px;
+  height: 32px;
+  border: 0px;
+  cursor: pointer;
+  z-index: 5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+    filter: brightness(125%);
+  }
+
+  &:active {
+    filter: brightness(75%);
+    transform: scale(0.98);
+    transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase);
+  }
+
+  .svg-icon {
+    width: 100%;
+    background: #eee;
+    --url: url("./views/svg/more.svg");
+  }
+}
+
 .about-page {
   .teamBtn {
     display: flex;
@@ -2416,7 +2446,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding);
   }
 
-  .playlist-floating-header {
+  .floating-header {
     position: sticky;
     top: 0;
     left: 0;
@@ -2608,25 +2638,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     }
   }
 
-  .playlist-more {
-    border-radius: 100%;
-    background: var(--keyColor);
-    box-shadow: var(--ciderShadow-Generic);
-    width: 36px;
-    height: 36px;
-    border: 0px;
-    cursor: pointer;
-    z-index: 5;
-
-    &:hover {
-      background: var(--keyColor-rollover);
-    }
-
-    &:active {
-      background: var(--keyColor-pressed);
-    }
-  }
-
   .playlist-time {
     font-size: 0.9em;
     margin: 6px;
@@ -2684,6 +2695,19 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   padding: 0px;
   top: 0;
 
+  .floating-header {
+    position: sticky;
+    top: 0;
+    left: 0;
+    border-bottom: 1px solid rgba(200, 200, 200, 0.05);
+    z-index: 6;
+    padding: 0px 1em;
+    backdrop-filter: blur(32px);
+    background: rgba(24, 24, 24, 0.15);
+    top: var(--navigationBarHeight);
+    transition: opacity 0.1s var(--appleEase);
+  }
+
   .artist-header {
     background: linear-gradient(45deg, var(--keyColor), #0e0e0e);
     color: white;
@@ -2693,26 +2717,10 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     min-height: 400px;
     position: relative;
 
-    .artist-more {
-      border-radius: 100%;
-      background: var(--keyColor);
-      box-shadow: var(--ciderShadow-Generic);
-      width: 36px;
-      height: 36px;
+    .more-btn-round {
       position: absolute;
       bottom: 26px;
       right: 32px;
-      border: 0px;
-      cursor: pointer;
-      z-index: 5;
-
-      &:hover {
-        background: var(--keyColor-rollover);
-      }
-
-      &:active {
-        background: var(--keyColor-pressed);
-      }
     }
 
     .animated {
@@ -2779,28 +2787,31 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     }
   }
 
+  .artist-play {
+    width: 36px;
+    height: 36px;
+    background: var(--keyColor);
+    border-radius: 100%;
+    box-shadow: var(--mediaItemShadow);
+    display: none;
+    cursor: pointer;
+    appearance: none;
+    border: 0px;
+    padding: 0px;
+
+    &:hover {
+      background: var(--keyColor-rollover);
+    }
+
+    &:active {
+      background: var(--keyColor-pressed);
+    }
+  }
   .artist-title {
+
     .artist-play {
-      width: 36px;
-      height: 36px;
-      background: var(--keyColor);
-      border-radius: 100%;
-      margin: 14px;
-      box-shadow: var(--mediaItemShadow);
-      display: none;
-      cursor: pointer;
-      appearance: none;
-      border: 0px;
-      padding: 0px;
       transform: translateY(3px);
-
-      &:hover {
-        background: var(--keyColor-rollover);
-      }
-
-      &:active {
-        background: var(--keyColor-pressed);
-      }
+      margin: 14px;
     }
 
     &.artist-animation-on {
@@ -2818,7 +2829,8 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 
   .artist-body {
-    padding: var(--contentInnerPadding);
+    padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding);
+    margin-top: -48px;
   }
 
   .showmoreless {
diff --git a/src/renderer/views/components/mediaitem-info.ejs b/src/renderer/views/components/mediaitem-info.ejs
new file mode 100644
index 00000000..e69de29b
diff --git a/src/renderer/views/pages/artist.ejs b/src/renderer/views/pages/artist.ejs
index b2f6d490..3c9d4014 100644
--- a/src/renderer/views/pages/artist.ejs
+++ b/src/renderer/views/pages/artist.ejs
@@ -1,6 +1,6 @@
 <script type="text/x-template" id="cider-artist">
     <div class="content-inner artist-page">
-        <div class="artist-header" :style="getArtistPalette(data)" :key="data.id">
+        <div class="artist-header" :style="getArtistPalette(data)" :key="data.id" v-observe-visibility="{callback: isHeaderVisible}">
             <animatedartwork-view
                     :priority="true"
                     v-if="data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)"
@@ -29,14 +29,26 @@
                     <h1>{{ data.attributes.name }}</h1>
                 </div>
             </div>
-            <button class="artist-more" @click="artistMenu">
-                <div style="    margin-top: -1px;
-                                margin-left: -5px;
-                                width: 36px;
-                                height: 36px;">
-                <%- include("../svg/more.svg") %>
+            <button class="more-btn-round" @click="artistMenu">
+                <div class="svg-icon"></div>
+            </button>
+        </div>
+        <div class="floating-header" :style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
+            <div class="row">
+                <div class="col-auto flex-center">
+                    <button class="artist-play" style="display:block;" @click="app.mk.setStationQueue({artist:'a-'+data.id}).then(()=>{
+                        app.mk.play()
+                    })"><%- include("../svg/play.svg") %></button>
                 </div>
-           </button>
+                <div class="col">
+                    <h3>{{ data.attributes.name }}</h3>
+                </div>
+                <div class="col-auto flex-center">
+                    <button class="more-btn-round" @click="artistMenu">
+                        <div class="svg-icon"></div>
+                    </button>
+                </div>
+            </div>
         </div>
         <div class="artist-body">
             <div class="row well">
@@ -129,10 +141,14 @@
         data: function () {
             return {
                 topSongsExpanded: false,
-                app: this.$root
+                app: this.$root,
+                headerVisible: true
             }
         },
         methods: {
+            isHeaderVisible(visible) {
+                this.headerVisible = visible
+            },
             artistMenu (event) {
                 let self = this
                 let followAction = "follow"
diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index e38fb8d8..5262c318 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -78,13 +78,8 @@
                                         @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
                                     Confirm?
                                 </button>
-                                <button class="playlist-more" style="float:right;" @click="menu">
-                                    <div style="    margin-top: -1px;
-                                margin-left: -5px;
-                                width: 36px;
-                                height: 36px;">
-                                        <%- include("../svg/more.svg") %>
-                                    </div>
+                                <button class="more-btn-round" style="float:right;" @click="menu">
+                                    <div class="svg-icon"></div>
                                 </button>
                             </div>
                         </div>
@@ -95,7 +90,7 @@
                 </div>
 
             </div>
-            <div class="playlist-floating-header" :style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
+            <div class="floating-header" :style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
                 <div class="row">
                     <div class="col">
                         <h3>{{data.attributes ? (data.attributes.name ??
@@ -122,13 +117,8 @@
                         </div>
                     </div>
                     <div class="col-auto flex-center">
-                        <button class="playlist-more" @click="menu">
-                            <div style="    margin-top: -1px;
-                                margin-left: -5px;
-                                width: 36px;
-                                height: 36px;">
-                                <%- include("../svg/more.svg") %>
-                            </div>
+                        <button class="more-btn-round" style="float:right;" @click="menu">
+                            <div class="svg-icon"></div>
                         </button>
                     </div>
                 </div>