From d31bf6db9cec3a6fb0d8d10045d8d7f4cde5be9d Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Fri, 4 Feb 2022 01:05:17 -0800
Subject: [PATCH] improvements to inline playlists

---
 src/renderer/index.js                        | 19 ++++++++++++++-----
 src/renderer/style.less                      | 19 +++++++++++++++----
 src/renderer/views/app/app-content.ejs       |  2 +-
 src/renderer/views/pages/playlist-inline.ejs |  4 ++--
 4 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/renderer/index.js b/src/renderer/index.js
index 6de6fdd8..d6e93df7 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -279,7 +279,8 @@ const app = new Vue({
             drawerState: "queue",
             topChromeVisible: true,
             progresshover: false,
-            windowControlPosition: "right"
+            windowControlPosition: "right",
+            contentAreaScrolling: true
         },
         collectionList: {
             response: {},
@@ -332,8 +333,10 @@ const app = new Vue({
             app.resetState()
         },
         showingPlaylist: () => {
-            document.getElementById("app-content").scrollTo(0, 0);
-            // app.resetState()
+            if (!app.modals.showPlaylist) {
+                document.getElementById("app-content").scrollTo(0, 0);
+                app.resetState()
+            }
         },
         artistPage: () => {
             document.getElementById("app-content").scrollTo(0, 0);
@@ -487,6 +490,7 @@ const app = new Vue({
         resetState() {
             this.menuPanel.visible = false;
             app.selectedMediaItems = [];
+            this.chrome.contentAreaScrolling = true
             for (let key in app.modals) {
                 app.modals[key] = false;
             }
@@ -1330,8 +1334,13 @@ const app = new Vue({
                 }
 
                 if (this.cfg.advanced.experiments.includes('inline-playlists')) {
-                    if (kind.toString().includes("album") || kind.toString().includes("playlist")) {
+                    let showModal = kind.toString().includes("album") || kind.toString().includes("playlist")
+                    if (app.page.includes("playlist") || app.page.includes("album")) {
+                        showModal = false
+                    }
+                    if (showModal) {
                         app.modals.showPlaylist = true
+                        app.chrome.contentAreaScrolling = false
                     } else {
                         app.page = (kind) + "_" + (id);
                         window.location.hash = `${kind}/${id}${isLibrary ? "/" + isLibrary : ''}`
@@ -1343,7 +1352,7 @@ const app = new Vue({
 
 
                 app.getTypeFromID((kind), (id), (isLibrary), params);
-                document.querySelector("#app-content").scrollTop = 0
+                // document.querySelector("#app-content").scrollTop = 0
             } else {
                 app.playMediaItemById((id), (kind), (isLibrary), item.attributes.url ?? '')
             }
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 0631f188..c4ae4302 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -3161,12 +3161,23 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     overflow: hidden;
     width: 100%;
     height: 100%;
-    background: rgb(0 0 0 / 50%);
+    background: rgba(0, 0, 0, 0.5);
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: calc(var(--navigationBarHeight) + 32px) 0px 0px 0px;
-    z-index:2;
+    z-index: 6;
+    position: sticky;
+    margin-top: calc(var(--navigationBarHeight) * -1);
+
+    .floating-header {
+      opacity: 1;
+      top: 0px;
+      z-index: 6;
+      padding: 1em;
+      h3 {
+        display: none;
+      }
+    }
     .playlist-inner {
       background: black;
       width: 80%;
@@ -3180,7 +3191,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
         top: 16px;
         left: 16px;
         margin-left: 16px;
-        z-index: 3;
+        z-index: 7;
       }
     }
   }
diff --git a/src/renderer/views/app/app-content.ejs b/src/renderer/views/app/app-content.ejs
index 86ef8b54..e3ad44a4 100644
--- a/src/renderer/views/app/app-content.ejs
+++ b/src/renderer/views/app/app-content.ejs
@@ -1,4 +1,4 @@
-<div id="app-content">
+<div id="app-content" :style="{'overflow': (chrome.contentAreaScrolling ? '' : 'hidden')}">
     <div id="navigation-bar">
         <button class="nav-item" @click="navigateBack()">
             <%- include('../svg/chevron-left.svg') %>
diff --git a/src/renderer/views/pages/playlist-inline.ejs b/src/renderer/views/pages/playlist-inline.ejs
index ff6282d8..91adb17d 100644
--- a/src/renderer/views/pages/playlist-inline.ejs
+++ b/src/renderer/views/pages/playlist-inline.ejs
@@ -1,7 +1,7 @@
 <script type="text/x-template" id="playlist-inline">
-    <div class="content-inner playlist-page inline-playlist" @click.self="$root.modals.showPlaylist = false">
+    <div class="content-inner playlist-page inline-playlist" @click.self="$root.resetState()">
             <div class="playlist-inner" v-if="data != [] && data.attributes != null">
-                <div class="close-btn" title="Close" @click="$root.modals.showPlaylist = false">
+                <div class="close-btn" title="Close" @click="$root.resetState()">
                     <svg fill="white" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"
                          aria-role="presentation" focusable="false">
                         <path