janky page position retention

src/renderer/main/vueapp.js

@@ -264,17 +264,17 @@ const app = new Vue({
       ipcRenderer.send("onPrivacyModeChange", newValue);
     },
     page: () => {
-      document.getElementById("app-content").scrollTo(0, 0);
+      // document.getElementById("app-content").scrollTo(0, 0);
       app.resetState();
     },
     showingPlaylist: () => {
       if (!app.modals.showPlaylist) {
-        document.getElementById("app-content").scrollTo(0, 0);
+        // document.getElementById("app-content").scrollTo(0, 0);
         app.resetState();
       }
     },
     artistPage: () => {
-      document.getElementById("app-content").scrollTo(0, 0);
+      // document.getElementById("app-content").scrollTo(0, 0);
       app.resetState();
     },
   },
@@ -290,6 +290,7 @@ const app = new Vue({
   },
   methods: {
     setWindowHash(route = "") {
+      this.setPagePos()
       window.location.hash = `#${route}`;
     },
     monitorMusickit() {
@@ -599,6 +600,8 @@ const app = new Vue({
       }
     },
     navigateBack() {
+      this.setPagePos()
+      this.resumePagePos()
       this.chrome.desiredPageTransition = "wpfade_transform_backwards";
       return new Promise((resolve, reject) => {
         history.back();
@@ -608,6 +611,8 @@ const app = new Vue({
       });
     },
     goToGrouping(url = "https://music.apple.com/WebObjects/MZStore.woa/wa/viewGrouping?cc=us&id=34") {
+      this.setPagePos()
+      this.resumePagePos()
       if (url.includes("viewTop")) {
         window.location.hash = `#charts/top`;
       } else {
@@ -633,6 +638,8 @@ const app = new Vue({
       }
     },
     navigateForward() {
+      this.setPagePos()
+      this.resumePagePos()
       history.forward();
     },
     resetState() {
@@ -2079,6 +2086,15 @@ const app = new Vue({
       }
       return hash;
     },
+    getPagePos(href = "") {
+      let state = this.$store.state.pageState.scrollPos.pos.find((page) => {
+        return page.href === href;
+      })
+      return state ?? {
+        page: href,
+        position: 0
+      }
+    },
     appRoute(route) {
       if (route == "" || route == "#" || route == "/") {
         return;
@@ -2091,10 +2107,12 @@ const app = new Vue({
           app.cfg.general.resumeTabs.dynamicData = "home";
         }
       }
+
       // if the route contains does not include a / then route to the page directly
       if (route.indexOf("/") == -1) {
         this.page = route;
         window.location.hash = this.page;
+        this.resumePagePos()
         // if (this.page == "settings") {
         //     this.version
         // }
@@ -2117,7 +2135,23 @@ const app = new Vue({
         },
       });
     },
+    resumePagePos() {
+      setTimeout(()=>{
+        $("#app-content").scrollTop(app.getPagePos(window.location.hash).position)
+      }, 100)
+    },
+    setPagePos() {
+      console.debug({
+        href: window.location.hash,
+        position: $("#app-content").scrollTop()
+      })
+      this.$store.commit("setPagePos", {
+        href: window.location.hash,
+        position: $("#app-content").scrollTop()
+      })
+    },
     routeView(item) {
+      this.setPagePos()
       let kind = item.attributes?.playParams ? item.attributes?.playParams?.kind ?? item.type ?? "" : item.type ?? "";
       let id = item.attributes?.playParams ? item.attributes?.playParams?.id ?? item.id ?? "" : item.id ?? "";
       let isLibrary = item.attributes?.playParams ? item.attributes?.playParams?.isLibrary ?? false : false;
@@ -2136,7 +2170,6 @@ const app = new Vue({
           .then(() => {
             kind = "appleCurator";
             window.location.hash = `${kind}/${id}`;
-            document.querySelector("#app-content").scrollTop = 0;
           });
       } else if (kind == "editorial-elements" || kind == "editorial-items") {
         console.debug(item);
@@ -2162,7 +2195,6 @@ const app = new Vue({
               .then(() => {
                 kind = "multiroom";
                 window.location.hash = `${kind}/${id}`;
-                document.querySelector("#app-content").scrollTop = 0;
               });
 
             return;
@@ -2194,12 +2226,13 @@ const app = new Vue({
           .then(() => {
             kind = "multiroom";
             window.location.hash = `${kind}/${id}`;
-            document.querySelector("#app-content").scrollTop = 0;
+            // document.querySelector("#app-content").scrollTop = 0;
           });
+          this.resumePagePos()
       } else if (kind.toString().includes("artist")) {
         app.getArtistInfo(id, isLibrary);
         window.location.hash = `${kind}/${id}${isLibrary ? "/" + isLibrary : ""}`;
-        document.querySelector("#app-content").scrollTop = 0;
+        // document.querySelector("#app-content").scrollTop = 0;
       } else if (kind.toString().includes("record-label") || kind.toString().includes("curator")) {
         if (kind.toString().includes("record-label")) {
           kind = "recordLabel";
@@ -2214,6 +2247,7 @@ const app = new Vue({
         });
         window.location.hash = `${kind}/${id}`;
         document.querySelector("#app-content").scrollTop = 0;
+        this.resumePagePos()
       } else if (kind.toString().includes("social-profiles")) {
         app.page = kind + "_" + id;
         app.mk.api.v3
@@ -2254,7 +2288,7 @@ const app = new Vue({
           app.page = kind;
           window.location.hash = `${kind}/${id}${isLibrary ? "/" + isLibrary : ""}`;
         }
-
+        this.resumePagePos()
         // app.getTypeFromID((kind), (id), (isLibrary), params);
       } else if (kind.toString().includes("song")) {
         const albumUrl = new Promise(async (resolve, reject) => {

src/renderer/main/vuex-store.js

@@ -18,6 +18,10 @@ const store = new Vuex.Store({
         currentTabIndex: 0,
         fullscreen: false,
       },
+      scrollPos: {
+        limit: 10,
+        pos: []
+      }
     },
     artwork: {
       playerLCD: "",
@@ -32,6 +36,27 @@ const store = new Vuex.Store({
     setLCDArtwork(state, artwork) {
       state.artwork.playerLCD = artwork;
     },
+    setPagePos(state, pageState = {}) {
+      let cached = state.pageState.scrollPos.pos.find((page) => {
+        return page.href === pageState.href;
+      })
+      if(cached) {
+        state.pageState.scrollPos.pos.find((page) => {
+          if(page.href === pageState.href) {
+            page.position = pageState.position
+          }
+        })
+        return
+      }
+      state.pageState.scrollPos.pos.push({
+        "href": pageState.href,
+        "position": pageState.position
+      })
+      if (state.pageState.scrollPos.pos.length > state.pageState.scrollPos.limit) {
+        pages.value.shift()
+      }
+      return
+    }
   },
 });