From 274454af8a2e4c156eccf2d29e89ee63da373dc6 Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Tue, 18 Jan 2022 03:44:28 -0800
Subject: [PATCH] added sticky header to playlist/albums

---
 src/renderer/style.less                     | 16 ++++++-
 src/renderer/views/pages/cider-playlist.ejs | 48 +++++++++++++++++++--
 2 files changed, 59 insertions(+), 5 deletions(-)

diff --git a/src/renderer/style.less b/src/renderer/style.less
index f1722cf8..cd68c439 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -2384,7 +2384,20 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   padding-top: var(--navigationBarHeight);
 
   .playlist-body {
-    padding: var(--contentInnerPadding);
+    padding: 0px var(--contentInnerPadding) 0px var(--contentInnerPadding);
+  }
+
+  .playlist-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);
   }
 
   .playlist-display {
@@ -2572,7 +2585,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     box-shadow: var(--ciderShadow-Generic);
     width: 36px;
     height: 36px;
-    float: right;
     border: 0px;
     cursor: pointer;
     z-index: 5;
diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs
index ac432239..8692b940 100644
--- a/src/renderer/views/pages/cider-playlist.ejs
+++ b/src/renderer/views/pages/cider-playlist.ejs
@@ -61,7 +61,7 @@
                                     </button>
                                 </div>
                             </template>
-                            <div class="playlist-controls">
+                            <div class="playlist-controls" v-observe-visibility="{callback: isHeaderVisible}">
                                 <button class="md-btn" style="min-width: 120px;"
                                         @click="app.mk.shuffleMode = 0; play()">
                                     Play
@@ -78,7 +78,7 @@
                                         @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
                                     Confirm?
                                 </button>
-                                <button class="playlist-more" @click="menu">
+                                <button class="playlist-more" style="float:right;" @click="menu">
                                     <div style="    margin-top: -1px;
                                 margin-left: -5px;
                                 width: 36px;
@@ -95,6 +95,44 @@
                 </div>
 
             </div>
+            <div class="playlist-floating-header" :style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
+                <div class="row">
+                    <div class="col">
+                        <h3>{{data.attributes ? (data.attributes.name ??
+                            (data.attributes.title ?? '') ?? '') : ''}}</h3>
+                    </div>
+                    <div class="col-auto flex-center">
+                        <div>
+                            <button class="md-btn" style="min-width: 120px;"
+                                    @click="app.mk.shuffleMode = 0; play()">
+                                Play
+                            </button>
+                            <button class="md-btn" style="min-width: 120px;"
+                                    @click="app.mk.shuffleMode = 1;play()">
+                                Shuffle
+                            </button>
+                            <button class="md-btn" style="min-width: 120px;" v-if="inLibrary!=null && confirm!=true"
+                                    @click="confirmButton()">
+                                {{ (!inLibrary) ? "Add to Library" : "Remove from Library" }}
+                            </button>
+                            <button class="md-btn" style="min-width: 120px;" v-if="confirm==true"
+                                    @click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
+                                Confirm?
+                            </button>
+                        </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>
+                    </div>
+                </div>
+            </div>
             <div class="playlist-body">
                 <div class="well">
                     <div style="width:100%">
@@ -147,7 +185,8 @@
                 confirm: false,
                 app: this.$root,
                 itemBadges: [],
-                badgesRequested: false
+                badgesRequested: false,
+                headerVisible: true
             }
         },
         mounted: function () {
@@ -162,6 +201,9 @@
             }
         },
         methods: {
+            isHeaderVisible(visible) {
+                this.headerVisible = visible
+            },
             getBadges() {
                 return
                 if (this.badgesRequested) {