starting on oobe, moved components and pages to json

src/main/base/browserwindow.ts

@@ -28,6 +28,7 @@ import * as os from "os";
 import wallpaper from "wallpaper";
 import * as AdmZip from "adm-zip";
 
+
 /**
  * @file Creates the BrowserWindow
  * @author CiderCollective
@@ -49,213 +50,8 @@ export class BrowserWindow {
             dev: app.isPackaged,
             osRelease: os.release(),
             updatable: !process.windowsStore || !process.mas,
-            components: [
+            components: require("./vcomponents.json"),
-                "pages/podcasts",
+            appRoutes: require("./vrouting.json")
-                "pages/apple-account-settings",
-                "pages/library-songs",
-                "pages/library-albums",
-                "pages/library-artists",
-                "pages/browse",
-                "pages/groupings",
-                "pages/settings",
-                "pages/installed-themes",
-                "pages/listen_now",
-                "pages/radio",
-                "pages/home",
-                "pages/artist-feed",
-                "pages/cider-playlist",
-                "pages/playlist-inline",
-                "pages/recordLabel",
-                "pages/cider-multiroom",
-                "pages/collection-list",
-                "pages/apple-curator",
-                "pages/artist",
-                "pages/search",
-                "pages/about",
-                "pages/library-videos",
-                "pages/remote-pair",
-                "pages/themes-github",
-                "pages/plugins-github",
-                "pages/replay",
-                "pages/audiolabs",
-                "pages/zoo",
-                "pages/plugin-renderer",
-                "pages/keybinds",
-                "components/mediaitem-artwork",
-                "components/artwork-material",
-                "components/menu-panel",
-                "components/sidebar-playlist",
-                "components/audio-settings",
-                "components/plugin-menu",
-                "components/audio-controls",
-                "components/audio-playbackrate",
-                "components/qrcode-modal",
-                "components/moreinfo-modal",
-                "components/equalizer",
-                "components/add-to-playlist",
-                "components/queue",
-                "components/mediaitem-scroller-horizontal",
-                "components/mediaitem-scroller-horizontal-large",
-                "components/mediaitem-scroller-horizontal-sp",
-                "components/mediaitem-scroller-horizontal-mvview",
-                "components/mediaitem-list-item",
-                "components/mediaitem-hrect",
-                "components/mediaitem-square",
-                "components/mediaitem-mvview",
-                // "components/libraryartist-item",
-                "components/listennow-child",
-                "components/mediaitem-mvview-sp",
-                "components/animatedartwork-view",
-                "components/listitem-horizontal",
-                "components/lyrics-view",
-                "components/fullscreen",
-                "components/miniplayer",
-                "components/castmenu",
-                "components/airplay-modal",
-                "components/artist-chip",
-                "components/hello-world",
-                "components/inline-collection-list",
-            ],
-            appRoutes: [
-                {
-                    page: "plugin-renderer",
-                    component: `<plugin-renderer></plugin-renderer>`,
-                    condition: "page == 'plugin-renderer'"
-                },
-                {
-                    page: "zoo",
-                    component: "<cider-zoo></cider-zoo>",
-                    condition: "page == 'zoo'"
-                },
-                {
-                    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: "multiroom",
-                    component: `<cider-multiroom :data="multiroom"></cider-multiroom>`,
-                    condition: `page.includes('multiroom')`
-                }, {
-                    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: ``
-                },{
-                    page: "groupings",
-                    component: `<cider-groupings :data="browsepage"></cider-groupings>`,
-                    condition: `page == 'groupings'`,
-                    onEnter: ``
-                }, {
-                    page: "listen_now",
-                    component: `<cider-listen-now :data="listennow"></cider-listen-now>`,
-                    condition: `page == 'listen_now'`,
-                    onEnter: ``
-                }, {
-                    page: "radio",
-                    component: `<cider-radio :data="radio"></cider-radio>`,
-                    condition: `page == 'radio'`,
-                    onEnter: ``
-                }, {
-                    page: "settings",
-                    component: `<cider-settings></cider-settings>`,
-                    condition: `page == 'settings'`
-                }, {
-                    page: "installed-themes",
-                    component: `<installed-themes></installed-themes>`,
-                    condition: `page == 'installed-themes'`
-                }, {
-                    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: ``
-                }, {
-                    page: "library-albums",
-                    component: `<cider-library-albums :data="library.songs"></cider-library-albums>`,
-                    condition: `page == 'library-albums'`,
-                    onEnter: ``
-                }, {
-                    page: "library-artists",
-                    component: `<cider-library-artists></cider-library-artists>`,
-                    condition: `page == 'library-artists'`,
-                    onEnter: ``
-                }, {
-                    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: "plugins-github",
-                    component: `<plugins-github></plugins-github>`,
-                    condition: `page == 'plugins-github'`
-                }, {
-                    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'`
-                }
-            ]
         },
     };
     private options: any = {

src/main/base/vcomponents.json

@@ -0,0 +1,67 @@
+[
+  "pages/podcasts",
+  "pages/apple-account-settings",
+  "pages/library-songs",
+  "pages/library-albums",
+  "pages/library-artists",
+  "pages/browse",
+  "pages/groupings",
+  "pages/settings",
+  "pages/installed-themes",
+  "pages/listen_now",
+  "pages/radio",
+  "pages/home",
+  "pages/artist-feed",
+  "pages/cider-playlist",
+  "pages/playlist-inline",
+  "pages/recordLabel",
+  "pages/cider-multiroom",
+  "pages/collection-list",
+  "pages/apple-curator",
+  "pages/artist",
+  "pages/search",
+  "pages/about",
+  "pages/library-videos",
+  "pages/remote-pair",
+  "pages/themes-github",
+  "pages/plugins-github",
+  "pages/replay",
+  "pages/audiolabs",
+  "pages/zoo",
+  "pages/plugin-renderer",
+  "pages/keybinds",
+  "pages/oobe",
+  "components/mediaitem-artwork",
+  "components/artwork-material",
+  "components/menu-panel",
+  "components/sidebar-playlist",
+  "components/audio-settings",
+  "components/plugin-menu",
+  "components/audio-controls",
+  "components/audio-playbackrate",
+  "components/qrcode-modal",
+  "components/moreinfo-modal",
+  "components/equalizer",
+  "components/add-to-playlist",
+  "components/queue",
+  "components/mediaitem-scroller-horizontal",
+  "components/mediaitem-scroller-horizontal-large",
+  "components/mediaitem-scroller-horizontal-sp",
+  "components/mediaitem-scroller-horizontal-mvview",
+  "components/mediaitem-list-item",
+  "components/mediaitem-hrect",
+  "components/mediaitem-square",
+  "components/mediaitem-mvview",
+  "components/listennow-child",
+  "components/mediaitem-mvview-sp",
+  "components/animatedartwork-view",
+  "components/listitem-horizontal",
+  "components/lyrics-view",
+  "components/fullscreen",
+  "components/miniplayer",
+  "components/castmenu",
+  "components/airplay-modal",
+  "components/artist-chip",
+  "components/hello-world",
+  "components/inline-collection-list"
+]

src/main/base/vrouting.json

@@ -0,0 +1,174 @@
+[
+  {
+    "page": "plugin-renderer",
+    "component": "<plugin-renderer></plugin-renderer>",
+    "condition": "page == 'plugin-renderer'"
+  },
+  {
+    "page": "zoo",
+    "component": "<cider-zoo></cider-zoo>",
+    "condition": "page == 'zoo'"
+  },
+  {
+    "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": "oobe",
+    "component": "<cider-oobe/>",
+    "condition": "page == 'oobe'"
+  },
+  {
+    "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": "multiroom",
+    "component": "<cider-multiroom :data=\"multiroom\"></cider-multiroom>",
+    "condition": "page.includes('multiroom')"
+  },
+  {
+    "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": ""
+  },
+  {
+    "page": "groupings",
+    "component": "<cider-groupings :data=\"browsepage\"></cider-groupings>",
+    "condition": "page == 'groupings'",
+    "onEnter": ""
+  },
+  {
+    "page": "listen_now",
+    "component": "<cider-listen-now :data=\"listennow\"></cider-listen-now>",
+    "condition": "page == 'listen_now'",
+    "onEnter": ""
+  },
+  {
+    "page": "radio",
+    "component": "<cider-radio :data=\"radio\"></cider-radio>",
+    "condition": "page == 'radio'",
+    "onEnter": ""
+  },
+  {
+    "page": "settings",
+    "component": "<cider-settings></cider-settings>",
+    "condition": "page == 'settings'"
+  },
+  {
+    "page": "installed-themes",
+    "component": "<installed-themes></installed-themes>",
+    "condition": "page == 'installed-themes'"
+  },
+  {
+    "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": ""
+  },
+  {
+    "page": "library-albums",
+    "component": "<cider-library-albums :data=\"library.songs\"></cider-library-albums>",
+    "condition": "page == 'library-albums'",
+    "onEnter": ""
+  },
+  {
+    "page": "library-artists",
+    "component": "<cider-library-artists></cider-library-artists>",
+    "condition": "page == 'library-artists'",
+    "onEnter": ""
+  },
+  {
+    "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": "plugins-github",
+    "component": "<plugins-github></plugins-github>",
+    "condition": "page == 'plugins-github'"
+  },
+  {
+    "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'"
+  }
+]

src/renderer/less/pages.less

@@ -114,15 +114,18 @@
     margin: 2em;
   }
 }
+
 // Search Page
 &.search-page {
   .cd-mediaitem-square.mediaitem-brick {
     width: 530px !important;
+
     .artwork-container .artwork {
       height: 168px !important;
       width: 507px !important;
       z-index: 1;
     }
+
     .title {
       font-weight: bold;
       justify-content: left;
@@ -856,7 +859,8 @@
       transition: min-height 0.5s ease-in-out;
       min-height: 200px;
 
-      .playlistInfo {}
+      .playlistInfo {
+      }
 
       .mediaContainer {
         transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
@@ -1166,6 +1170,7 @@
     &.addon {
       background: rgb(86 86 86 / 20%);
     }
+
     &.applied {
       background: var(--keyColor-disabled);
       pointer-events: none;
@@ -1229,6 +1234,7 @@
       &:hover {
         cursor: grab;
       }
+
       &:active {
         cursor: grabbing;
       }
@@ -1645,24 +1651,69 @@
   }
 }
 
+.content-inner.oobe {
+  position: absolute;
+  overflow: hidden;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  .oobe-view {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 32px;
+    gap: 32px;
+
+
+    .oobe-header {
+      font-size: 3em;
+      text-shadow: var(--replayTextShadow);
+    }
+
+    .oobe-body {
+      flex: 1;
+      width: 100%;
+    }
+
+    .oobe-footer {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      padding: 16px;
+    }
+  }
+}
+
 .content-inner.cider-multiroom {
   padding: 0px;
+
   .detail {
     padding: 32px;
   }
+
   .header-desc {
     font-size: 1em;
     font-weight: 400;
   }
+
   .artworkContainer {
     height: 300px;
     width: 100%;
+
     img {
       height: 100%;
       width: 100%;
       overflow: hidden;
       object-fit: cover;
       filter: unset;
+
       &:last-child {
         transform: unset;
       }

src/renderer/views/pages/oobe.ejs

@@ -0,0 +1,33 @@
+<script type="text/x-template" id="cider-oobe">
+    <div class="content-inner oobe">
+        <div class="oobe-view">
+            <div class="oobe-header">
+                Welcome to Cider
+            </div>
+            <div class="oobe-body">
+                body text
+            </div>
+            <div class="oobe-footer">
+                <div class="btn-group">
+                    <div class="md-btn">Previous</div>
+                    <div class="md-btn">Next</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</script>
+<script>
+    Vue.component('cider-oobe', {
+        template: '#cider-oobe',
+        data: function () {
+            return {
+            }
+        },
+        async mounted() {
+
+        },
+        methods: {
+
+        }
+    });
+</script>

tsconfig.json

@@ -9,6 +9,7 @@
     "sourceMap": true,
     "outDir": "./build",
     "baseUrl": ".",
+    "resolveJsonModule": true,
     "paths": {
       "*": ["node_modules/*"]
     },