move app template handling to backend

src/main/base/browserwindow.ts

@@ -12,6 +12,7 @@ import fetch from 'electron-fetch'
 import {wsapi} from "./wsapi";
 import {AppImageUpdater, NsisUpdater} from "electron-updater";
 import {utils} from './utils';
+
 const AdmZip = require("adm-zip");
 
 
@@ -76,6 +77,108 @@ export class BrowserWindow {
                 "components/lyrics-view",
                 "components/fullscreen",
                 "components/miniplayer",
+            ],
+            appRoutes: [
+                {
+                    page: "podcasts",
+                    component: `<apple-podcasts></apple-podcasts>`,
+                    condition: `page == 'podcasts'`
+                }, {
+                    page: "library-videos",
+                    component: `<cider-library-videos></cider-library-videos>`,
+                    condition: `page == 'library-videos'`
+                }, {
+                    page: "apple-account-settings",
+                    component: `<apple-account-settings></apple-account-settings>`,
+                    condition: `page == 'apple-account-settings'`
+                }, {
+                    page: "about",
+                    component: `<about-page></about-page>`,
+                    condition: `page == 'about'`
+                }, {
+                    page: "cider-artist",
+                    component: `<cider-artist :data="artistPage.data"></cider-artist>`,
+                    condition: `page == 'artist-page' && artistPage.data.attributes`
+                }, {
+                    page: "collection-list",
+                    component: `<cider-collection-list :data="collectionList.response" :type="collectionList.type" :title="collectionList.title"></cider-collection-list>`,
+                    condition: `page == 'collection-list'`
+                }, {
+                    page: "home",
+                    component: `<cider-home></cider-home>`,
+                    condition: `page == 'home'`
+                }, {
+                    page: "artist-feed",
+                    component: `<cider-artist-feed></cider-artist-feed>`,
+                    condition: `page == 'artist-feed'`
+                }, {
+                    page: "playlist-inline",
+                    component: `<playlist-inline :data="showingPlaylist"></playlist-inline>`,
+                    condition: `modals.showPlaylist`
+                }, {
+                    page: "playlist_",
+                    component: `<cider-playlist :data="showingPlaylist"></cider-playlist>`,
+                    condition: `page.includes('playlist_')`
+                }, {
+                    page: "album_",
+                    component: `<cider-playlist :data="showingPlaylist"></cider-playlist>`,
+                    condition: `page.includes('album_')`
+                }, {
+                    page: "recordLabel_",
+                    component: `<cider-recordlabel :data="showingPlaylist"></cider-recordlabel>`,
+                    condition: `page.includes('recordLabel_')`
+                }, {
+                    page: "curator_",
+                    component: `<cider-recordlabel :data="showingPlaylist"></cider-recordlabel>`,
+                    condition: `page.includes('curator_')`
+                }, {
+                    page: "browsepage",
+                    component: `<cider-browse :data="browsepage"></cider-browse>`,
+                    condition: `page == 'browse'`,
+                    onEnter: `getBrowsePage();`
+                }, {
+                    page: "listen_now",
+                    component: `<cider-listen-now :data="listennow"></cider-listen-now>`,
+                    condition: `page == 'listen_now'`,
+                    onEnter: `getListenNow()`
+                }, {
+                    page: "settings",
+                    component: `<cider-settings></cider-settings>`,
+                    condition: `page == 'settings'`
+                }, {
+                    page: "search",
+                    component: `<cider-search :search="search"></cider-search>`,
+                    condition: `page == 'search'`
+                }, {
+                    page: "library-songs",
+                    component: `<cider-library-songs :data="library.songs"></cider-library-songs>`,
+                    condition: `page == 'library-songs'`,
+                    onEnter: `getLibrarySongsFull()`
+                }, {
+                    page: "appleCurator",
+                    component: `<cider-applecurator :data="appleCurator"></cider-applecurator>`,
+                    condition: `page.includes('appleCurator')`
+                }, {
+                    page: "themes-github",
+                    component: `<themes-github></themes-github>`,
+                    condition: `page == 'themes-github'`
+                }, {
+                    page: "podcasts",
+                    component: `<apple-podcasts></apple-podcasts>`,
+                    condition: `page == 'podcasts'`
+                }, {
+                    page: "remote-pair",
+                    component: `<remote-pair></remote-pair>`,
+                    condition: `page == 'remote-pair'`
+                }, {
+                    page: "audiolabs",
+                    component: `<audiolabs-page></audiolabs-page>`,
+                    condition: `page == 'audiolabs'`
+                }, {
+                    page: "replay",
+                    component: `<replay-page></replay-page>`,
+                    condition: `page == 'replay'`
+                }
             ]
         },
     };
@@ -125,24 +228,24 @@ export class BrowserWindow {
         this.options.width = windowState.width;
         this.options.height = windowState.height;
 
-        switch(process.platform) {
+        switch (process.platform) {
             default:
 
-            break;
+                break;
             case "win32":
                 this.options.backgroundColor = "#1E1E1E";
                 this.options.transparent = false;
-            break;
+                break;
             case "linux":
                 this.options.backgroundColor = "#1E1E1E";
                 this.options.autoHideMenuBar = true
                 this.options.frame = true
-            break;
+                break;
             case "darwin":
                 this.options.transparent = true;
                 this.options.vibrancy = "dark";
                 this.options.hasShadow = true;
-            break;
+                break;
         }
 
         // Start the webserver for the browser window to load
@@ -279,7 +382,7 @@ export class BrowserWindow {
                 res.send(`// File not found - ${userThemePath}`);
             }
         });
-        
+
         app.get("/plugins/:plugin/*", (req, res) => {
             const plugin = req.params.plugin;
             // @ts-ignore
@@ -425,7 +528,7 @@ export class BrowserWindow {
                 let zipFile = new AdmZip(zip);
                 zipFile.extractAllTo(utils.getPath("themes"), true);
 
-            }catch(e) {
+            } catch (e) {
                 returnVal.success = false;
             }
             BrowserWindow.win.webContents.send("theme-installed", returnVal);
@@ -684,8 +787,8 @@ export class BrowserWindow {
                     console.log('sc', SoundCheckTag)
                     BrowserWindow.win.webContents.send('SoundCheckTag', SoundCheckTag)
                 }).catch(err => {
-                    console.log(err)
+                console.log(err)
-                });
+            });
         });
 
         ipcMain.on('check-for-update', async (_event) => {
@@ -704,9 +807,9 @@ export class BrowserWindow {
                 provider: 'generic',
                 url: `${base_url}`
             }
-           
+
             //  Have to handle the auto updaters seperatly until we can support macOS. electron-builder limitation -q
-         
+
             const win_autoUpdater = new NsisUpdater(options) //Windows
             const linux_autoUpdater = new AppImageUpdater(options) //Linux
             await win_autoUpdater.checkForUpdatesAndNotify()

src/renderer/style.less

@@ -2739,7 +2739,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
 .wpfade_transform-enter,
 .wpfade_transform-leave-to {
-  transform: scale(0.90);
+  transform: translateX(20px);
   opacity: 0;
 }
 

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

@@ -8,103 +8,26 @@
         </button>
     </div>
 
-    <!--                    Podcasts -->
+    <!-- Include App Routes -->
-    <transition name="wpfade">
+    <% for(var i=0; i < Object.keys(env.appRoutes).length ; i++) {%>
-        <template v-if="page == 'podcasts'">
+        <transition
-            <apple-podcasts></apple-podcasts>
+                <% if(env.appRoutes[i].onEnter) {
-        </template>
+                        %>
-    </transition>
+                    v-on:enter="<%- env.appRoutes[i].onEnter %>"
-    <!-- Library - Library Videos -->
+                <%
-    <transition name="wpfade">
+                    }
-        <template v-if="page == 'library-videos'">
+                %>
-            <cider-library-videos></cider-library-videos>
+                name="wpfade_transform"
-        </template>
+        >
-    </transition>
+            <template
+                v-if="<%- env.appRoutes[i].condition %>"
+            >
+                <%- env.appRoutes[i].component %>
+            </template>
+        </transition>
+    <% } %>
 
-    <!-- Apple Setings Page -->
+    <transition v-on:enter="getRadioStations()" name="wpfade_transform">
-    <transition name="wpfade">
-        <template v-if="page == 'apple-account-settings'">
-            <apple-account-settings></apple-account-settings>
-        </template>
-    </transition>
-    <!-- About -->
-    <transition name="wpfade">
-        <template v-if="page == 'about'">
-            <about-page></about-page>
-        </template>
-    </transition>
-    <!-- Artist Page -->
-    <transition name="wpfade">
-        <template v-if="page == 'artist-page' && artistPage.data.attributes">
-            <cider-artist :data="artistPage.data"></cider-artist>
-        </template>
-    </transition>
-    <transition name="wpfade">
-        <%- include('../pages/zoo') %>
-    </transition>
-    <transition name="wpfade">
-        <%- include('../pages/webview') %>
-    </transition>
-    <!-- Collection List -->
-    <transition name="wpfade">
-        <template v-if="page == 'collection-list'">
-            <cider-collection-list :data="collectionList.response" :type="collectionList.type"
-                                   :title="collectionList.title"></cider-collection-list>
-        </template>
-    </transition>
-    <!-- Home -->
-    <transition name="wpfade">
-        <template v-if="page == 'home'">
-            <cider-home></cider-home>
-        </template>
-    </transition>
-    <!-- Home -->
-    <transition name="wpfade">
-        <template v-if="page == 'artist-feed'">
-            <cider-artist-feed></cider-artist-feed>
-        </template>
-    </transition>
-    <!-- Playlist / Album page-->
-    <transition name="wpfade">
-        <template v-if="modals.showPlaylist">
-            <playlist-inline :data="showingPlaylist"></playlist-inline>
-        </template>
-    </transition>
-    <transition name="wpfade">
-        <template v-if="page.includes('playlist_')">
-            <cider-playlist :data="showingPlaylist"></cider-playlist>
-        </template>
-    </transition>
-    <transition name="wpfade">
-        <template v-if="page.includes('album_')">
-            <cider-playlist :data="showingPlaylist"></cider-playlist>
-        </template>
-    </transition>
-    <transition name="wpfade">
-        <template v-if="page.includes('recordLabel_')">
-            <cider-recordlabel :data="showingPlaylist"></cider-recordlabel>
-        </template>
-    </transition>
-
-    <transition name="wpfade">
-        <template v-if="page.includes('curator_')">
-            <cider-recordlabel :data="showingPlaylist"></cider-recordlabel>
-        </template>
-    </transition>
-    <!-- Browse -->
-    <transition v-on:enter="getBrowsePage(); console.log('browse')" name="wpfade">
-        <template v-if="page == 'browse'">
-            <cider-browse :data="browsepage"></cider-browse>
-        </template>
-    </transition>
-    <!-- Listen Now -->
-    <transition v-on:enter="getListenNow()" name="wpfade">
-        <template v-if="page == 'listen_now'" @created="console.log('listennow')">
-            <cider-listen-now :data="listennow"></cider-listen-now>
-        </template>
-    </transition>
-    <!-- Radio -->
-    <transition v-on:enter="getRadioStations()" name="wpfade">
         <template v-if="page == 'radio'" @created="console.log('radio')">
             <div class="content-inner">
                 <h1 class="header-text">{{$root.getLz('term.radio')}}</h1>
@@ -113,75 +36,28 @@
             </div>
         </template>
     </transition>
-    <!-- Settings -->
-    <transition name="wpfade">
-        <template v-if="page == 'settings'">
-            <cider-settings></cider-settings>
-        </template>
-    </transition>
-    <!-- Search -->
-    <transition name="wpfade">
-        <template v-if="page == 'search'">
-            <cider-search :search="search"></cider-search>
-        </template>
-    </transition>
     <!-- Library - Recently Added -->
-    <transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 0); searchLibraryAlbums(0);">
+    <transition name="wpfade_transform" v-on:enter="getLibraryAlbumsFull(null, 0); searchLibraryAlbums(0);">
         <%- include('../pages/library-recentlyadded') %>');
     </transition>
-    <!-- Library - Songs -->
-    <transition name="wpfade" v-on:enter="getLibrarySongsFull()">
-        <template v-if="page == 'library-songs'">
-            <cider-library-songs :data="library.songs"></cider-library-songs>
-        </template>
-    </transition>
     <!-- Library - Albums -->
-    <transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 1); searchLibraryAlbums(1);">
+    <transition name="wpfade_transform" v-on:enter="getLibraryAlbumsFull(null, 1); searchLibraryAlbums(1);">
         <%- include('../pages/library-albums') %>');
         %>
     </transition>
     <!-- Library - Made For You -->
-    <transition name="wpfade" v-on:enter="getMadeForYou()">
+    <transition name="wpfade_transform" v-on:enter="getMadeForYou()">
         <template v-if="page == 'library-madeforyou'">
             <%- include('../pages/madeforyou') %>');
             %>
         </template>
     </transition>
     <!-- Library - Artists-->
-    <transition name="wpfade" v-on:enter="getLibraryArtistsFull(null, 0);">
+    <transition name="wpfade_transform" v-on:enter="getLibraryArtistsFull(null, 0);">
         <template v-if="page == 'library-artists'">
             <%- include('../pages/library-artists') %>');
             %>
         </template>
     </transition>
-    <transition name="wpfade">
-        <template v-if="page.includes('appleCurator')">
-            <cider-applecurator :data="appleCurator"></cider-applecurator>
-        </template>
-    </transition>
-<!--    Github themes-->
-    <transition name="wpfade">
-        <template v-if="page == 'themes-github'">
-            <themes-github></themes-github>
-        </template>
-    </transition>
-        <!-- Library - Library Videos -->
-    <transition name="wpfade">
-        <template v-if="page == 'remote-pair'">
-                <remote-pair></remote-pair>
-        </template>
-    </transition>
-    <!-- Audio Labs -->
-    <transition name="wpfade">
-        <template v-if="page == 'audiolabs'">
-            <audiolabs-page></audiolabs-page>
-        </template>
-    </transition>
-    <!-- Replay -->
-    <transition name="wpfade">
-        <template v-if="page == 'replay'">
-            <replay-page></replay-page>
-        </template>
-    </transition>
 
 </div>