recently added rework #1

- recently added is now lazy loaded
- uses official AM recently-added route
- stores in vuex
todo: add clearing method that gets triggered after some time

src/main/base/browserwindow.ts

@@ -56,6 +56,7 @@ export class BrowserWindow {
                 "pages/library-songs",
                 "pages/library-albums",
                 "pages/library-artists",
+                "pages/library-recentlyadded",
                 "pages/browse",
                 "pages/groupings",
                 "pages/settings",
@@ -118,6 +119,11 @@ export class BrowserWindow {
                 "components/inline-collection-list",
             ],
             appRoutes: [
+                {
+                    page: "library-recentlyadded",
+                    component: `<cider-recentlyadded></cider-recentlyadded>`,
+                    condition: "page == 'library-recentlyadded'"
+                },
                 {
                     page: "plugin-renderer",
                     component: `<plugin-renderer></plugin-renderer>`,

src/renderer/index.js

@@ -288,7 +288,7 @@ webGPU().then()
 let screenWidth = screen.width;
 let screenHeight = screen.height;
 
-window.onerror = function (error) {
+// window.onerror = function (error) {
-    console.log(error)
+//     console.log(error)
-    bootbox.alert("Error occurred: " + error)
+//     bootbox.alert("Error occurred: " + error)
-};
+// };

src/renderer/main/vuex-store.js

@@ -6,6 +6,14 @@ const store = new Vuex.Store({
             // recentlyAdded: ipcRenderer.sendSync("get-library-recentlyAdded"),
             // playlists: ipcRenderer.sendSync("get-library-playlists")
         },
+        pageState: {
+            recentlyAdded: {
+                loaded: false,
+                nextUrl: null,
+                items: [],
+                size: "normal"
+            }
+        },
         artwork: {
             playerLCD: ""
         }

src/renderer/views/app/app-content.ejs

@@ -24,11 +24,6 @@
             </template>
         </transition>
     <% } %>
-
-    <!-- Library - Recently Added -->
-    <transition :name="chrome.desiredPageTransition" v-on:enter="getLibraryAlbumsFull(null, 0); searchLibraryAlbums(0);">
-        <%- include('../pages/library-recentlyadded') %>');
-    </transition>
     <!-- Library - Made For You -->
     <transition :name="chrome.desiredPageTransition" v-on:enter="getMadeForYou()">
         <template v-if="page == 'library-madeforyou'">

src/renderer/views/pages/library-recentlyadded.ejs

@@ -1,58 +1,82 @@
-<template v-if="page == 'library-recentlyadded'">
+<script type="text/x-template" id="cider-recentlyadded">
     <div class="content-inner">
-        <div class="row">
+        <b-row no-gutters>
-            <div class="col" style="padding:0;">
+            <b-col>
                 <h1 class="header-text">{{$root.getLz('term.recentlyAdded')}}</h1>
-            </div>
+            </b-col>
-            <div class="col-auto">
+<!--            <b-col sm="auto">-->
-                <button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true, 0)"
+<!--                <select class="md-select" v-model="$store.state.pageState['recentlyAdded'].size" @change="$root.searchLibrarySongs()">-->
-                        class="reload-btn" :aria-label="app.getLz('menubar.options.reload')"><%- include('../svg/redo.svg') %></button>
+<!--                    <optgroup :label="$root.getLz('term.size')">-->
-            </div>
+<!--                        <option value="normal">{{$root.getLz('term.size.normal')}}</option>-->
+<!--                        <option value="compact">{{$root.getLz('term.size.compact')}}</option>-->
+<!--                    </optgroup>-->
+<!--                </select>-->
+<!--            </b-col>-->
+        </b-row>
+        <div class="well itemContainer" v-if="itemSize == 'normal'">
+            <mediaitem-square v-for="item in items" :item="item"></mediaitem-square>
         </div>
-        <div class="row">
+        <div class="well itemContainer" v-else="itemSize == 'compact'">
-            <div class="col" style="padding:0;">
+            <mediaitem-list-item :show-meta-data="true" :show-library-status="false" v-for="item in items" :item="item"></mediaitem-list-item>
-                <div class="search-input-container" style="width:100%;margin: 16px 0;">
-                    <div class="search-input--icon"></div>
-                    <input type="search"
-                           style="width:100%;"
-                           spellcheck="false"
-                           :placeholder="$root.getLz('term.search') + '...'"
-                           @input="searchLibraryAlbums"
-                           v-model="library.albums.search" class="search-input">
-                </div>
-            </div>
-            <div class="col-auto flex-center">
-                <div class="row">
-                    <div class="col">
-                        <select class="md-select" v-model="library.albums.sortOrder[0]"
-                                @change="searchLibraryAlbums(0)">
-                            <optgroup :label="$root.getLz('term.sortOrder')">
-                                <option value="asc">{{$root.getLz('term.sortOrder.ascending')}}</option>
-                                <option value="desc">{{$root.getLz('term.sortOrder.descending')}}</option>
-                            </optgroup>
-                        </select>
-                    </div>
-                    <div class="col">
-                        <select class="md-select" v-model="library.albums.viewAs">
-                            <optgroup :label="$root.getLz('term.viewAs')">
-                                <option value="covers">{{$root.getLz('term.viewAs.coverArt')}}</option>
-                                <option value="list">{{$root.getLz('term.viewAs.list')}}</option>
-                            </optgroup>
-                        </select>
-                    </div>
-                </div>
-            </div>
         </div>
-        <div class="well">
+        <div class="well itemContainer" v-show="loading">
-            <div class="albums-square-container">
+            <div class="spinner"></div>
-                <mediaitem-square v-if="library.albums.viewAs == 'covers'" :item="item"
-                                v-for="item in library.albums.displayListing">
-                </mediaitem-square>
-            </div>
-            <mediaitem-list-item v-if="library.albums.viewAs == 'list'" :show-duration="false" :show-meta-data="true"
-                                 :show-library-status="false" :item="item"
-                                 v-for="item in library.albums.displayListing">
-            </mediaitem-list-item>
         </div>
+        <button v-if="nextUrl && !loading" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">{{$root.getLz('term.showMore')}}
+        </button>
     </div>
-</template>
+</script>
+
+<script>
+    Vue.component("cider-recentlyadded", {
+        template: "#cider-recentlyadded",
+        computed: {
+            items() {
+                return this.$store.state.pageState['recentlyAdded'].items;
+            },
+            nextUrl() {
+                return this.$store.state.pageState['recentlyAdded'].nextUrl;
+            },
+            itemSize() {
+                return this.$store.state.pageState['recentlyAdded'].size
+            }
+        },
+        data: function () {
+            return {
+                loading: false,
+                firstRoute: `/v1/me/library/recently-added?l=${app.mklang}&platform=web&include[library-albums]=artists&include[library-artists]=catalog&fields[artists]=url&fields%5Balbums%5D=artistName%2CartistUrl%2Cartwork%2CcontentRating%2CeditorialArtwork%2Cname%2CplayParams%2CreleaseDate%2Curl&includeOnly=catalog%2Cartists&limit=25`
+            }
+        },
+        async mounted() {
+            if(this.$store.state.pageState['recentlyAdded'].items.length !== 0) return
+
+            const firstResult = await app.mk.api.v3.music(this.firstRoute)
+            this.$store.state.pageState["recentlyAdded"].items = firstResult.data.data
+            this.$store.state.pageState["recentlyAdded"].nextUrl = firstResult.data.next
+        },
+        beforeDestroy() {
+            // this.$store.state.pageState["recently-added"].scrollPosY = $("#app-content").scrollTop()
+        },
+        methods: {
+            visibilityChanged: function(isVisible, entry) {
+                if (isVisible && !this.loading) {
+                    this.getNextData();
+                }
+            },
+            async getNextData() {
+                if (this.$store.state.pageState["recentlyAdded"].nextUrl) {
+                    this.loading = true;
+                    const nextResult = await app.mk.api.v3.music(this.$store.state.pageState["recentlyAdded"].nextUrl)
+                    this.$store.state.pageState["recentlyAdded"].items = this.$store.state.pageState["recentlyAdded"].items.concat(nextResult.data.data)
+                    if (nextResult.data.next) {
+                        this.$store.state.pageState["recentlyAdded"].nextUrl = nextResult.data.next
+                    } else {
+                        this.$store.state.pageState["recentlyAdded"].nextUrl = null
+                    }
+                    this.loading = false;
+                }
+                return
+            }
+        }
+    });
+</script>