save library-albums into prefs

src/main/base/browserwindow.ts

@@ -33,6 +33,7 @@ export class BrowserWindow {
                 "pages/podcasts",
                 "pages/apple-account-settings",
                 "pages/library-songs",
+                "pages/library-albums",
                 "pages/browse",
                 "pages/settings",
                 "pages/listen_now",
@@ -165,6 +166,11 @@ export class BrowserWindow {
                     component: `<cider-library-songs :data="library.songs"></cider-library-songs>`,
                     condition: `page == 'library-songs'`,
                     onEnter: `getLibrarySongsFull()`
+                }, {
+                    page: "library-albums",
+                    component: `<cider-library-albums :data="library.songs"></cider-library-albums>`,
+                    condition: `page == 'library-albums'`,
+                    onEnter: `getLibraryAlbumsFull(null, 1); getAlbumSort(); searchLibraryAlbums(1);`
                 }, {
                     page: "appleCurator",
                     component: `<cider-applecurator :data="appleCurator"></cider-applecurator>`,

src/main/base/store.ts

@@ -25,7 +25,12 @@ export class Store {
                 "sort": "name",
                 "sortOrder": "asc",
                 "size": "normal"
-            }
+            },
+            "albums": {
+                "sort": "name",
+                "sortOrder": "asc",
+                "viewAs": "covers"
+            },
         },
         "audio": {
             "volume": 1,

src/renderer/index.js

@@ -1792,6 +1792,10 @@ const app = new Vue({
                 sortSongs()
             }
         },
+        getAlbumSort() { 
+             this.library.albums.sortOrder[1] = this.cfg.libraryPrefs.albums.sortOrder;
+             this.library.albums.sorting[1] = this.cfg.libraryPrefs.albums.sort; 
+        },
         // make a copy of searchLibrarySongs except use Albums instead of Songs
         searchLibraryAlbums(index) {
             let self = this

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

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

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

@@ -1,11 +1,11 @@
-<template v-if="page == 'library-albums'">
+<script type="text/x-template" id="cider-library-albums">
     <div class="content-inner">
         <div class="row">
             <div class="col" style="padding:0;">
                 <h1 class="header-text">{{$root.getLz('term.albums')}}</h1>
             </div>
             <div class="col-auto">
-                <button v-if="library.albums.downloadState == 2" @click="getLibraryAlbumsFull(true, 1)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
+                <button v-if="library.albums.downloadState == 2" @click="$root.getLibraryAlbumsFull(true, 1)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
             </div>
         </div>
         <div class="row">
@@ -16,21 +16,21 @@
                            style="width:100%;"
                            spellcheck="false"
                            :placeholder="$root.getLz('term.search') + '...'"
-                           @input="searchLibraryAlbums"
+                           @input="$root.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.sorting[1]" @change="searchLibraryAlbums(1)">
+                        <select class="md-select" v-model="prefs.sort" @change="library.albums.sorting[1] = prefs.sort; $root.searchLibraryAlbums(1)">
                             <optgroup :label="$root.getLz('term.sortBy')">
                                 <option v-for="(sort, index) in library.albums.sortingOptions" :value="index">{{ sort }}</option>
                             </optgroup>
                         </select>
                     </div>
                     <div class="col">
-                        <select class="md-select" v-model="library.albums.sortOrder[1]" @change="searchLibraryAlbums(1)">
+                        <select class="md-select" v-model="prefs.sortOrder" @change="library.albums.sortOrder[1] = prefs.sortOrder; $root.searchLibraryAlbums(1)">
                             <optgroup :label="$root.getLz('term.sortOrder')">
                                 <option value="asc">{{$root.getLz('term.sortOrder.ascending')}}</option>
                                 <option value="desc">{{$root.getLz('term.sortOrder.descending')}}</option>
@@ -38,7 +38,7 @@
                         </select>
                     </div>
                     <div class="col">
-                        <select class="md-select" v-model="library.albums.viewAs">
+                        <select class="md-select" v-model="prefs.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>
@@ -51,12 +51,27 @@
         <div class="well">
             <div class="albums-square-container"> 
                 <div> 
-                    <mediaitem-square v-if="library.albums.viewAs == 'covers'" :size="'300'" :item="item" v-for="item in library.albums.displayListing">
+                    <mediaitem-square v-if="prefs.viewAs == 'covers'" :size="'300'" :item="item" v-for="item in library.albums.displayListing">
                     </mediaitem-square>
                 </div>   
             </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 v-if="prefs.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>
     </div>
-</template>
+</script>
+<script>
+    Vue.component('cider-library-albums', {
+        template: '#cider-library-albums',
+        data: function () {
+            return {
+                library: this.$root.library,
+                mediaItemSize: "compact",
+                prefs: this.$root.cfg.libraryPrefs.albums,
+                app : this.$root
+            }
+        },
+        methods: {
+        }
+    });
+</script>