okseby/orchard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

moved app-content into a component

Browse source
This commit is contained in:
booploops 2022-06-29 13:33:21 -07:00
parent 225a0bfa42
commit ff8fe37d29
6 changed files with 114 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

103
src/main/base/browserwindow.ts
View file

@ -89,6 +89,7 @@ export class BrowserWindow {
"pages/plugin-renderer", "pages/plugin-renderer",
"pages/keybinds", "pages/keybinds",
"pages/oobe", "pages/oobe",
"components/app-content",
"components/mediaitem-artwork", "components/mediaitem-artwork",
"components/artwork-material", "components/artwork-material",
"components/menu-panel", "components/menu-panel",
@ -129,150 +130,150 @@ export class BrowserWindow {
{ {
page: "library-recentlyadded", page: "library-recentlyadded",
component: `<cider-recentlyadded></cider-recentlyadded>`, component: `<cider-recentlyadded></cider-recentlyadded>`,
condition: "page == 'library-recentlyadded'" condition: "$root.page == 'library-recentlyadded'"
}, },
{ {
page: "plugin-renderer", page: "plugin-renderer",
component: `<plugin-renderer></plugin-renderer>`, component: `<plugin-renderer></plugin-renderer>`,
condition: "page == 'plugin-renderer'" condition: "$root.page == 'plugin-renderer'"
}, },
{ {
page: "zoo", page: "zoo",
component: "<cider-zoo></cider-zoo>", component: "<cider-zoo></cider-zoo>",
condition: "page == 'zoo'" condition: "$root.page == 'zoo'"
}, },
{ {
page: "podcasts", page: "podcasts",
component: `<apple-podcasts></apple-podcasts>`, component: `<apple-podcasts></apple-podcasts>`,
condition: `page == 'podcasts'` condition: `$root.page == 'podcasts'`
}, { }, {
page: "library-videos", page: "library-videos",
component: `<cider-library-videos></cider-library-videos>`, component: `<cider-library-videos></cider-library-videos>`,
condition: `page == 'library-videos'` condition: `$root.page == 'library-videos'`
}, { }, {
page: "apple-account-settings", page: "apple-account-settings",
component: `<apple-account-settings></apple-account-settings>`, component: `<apple-account-settings></apple-account-settings>`,
condition: `page == 'apple-account-settings'` condition: `$root.page == 'apple-account-settings'`
}, { }, {
page: "about", page: "about",
component: `<about-page></about-page>`, component: `<about-page></about-page>`,
condition: `page == 'about'` condition: `$root.page == 'about'`
}, { }, {
page: "cider-artist", page: "cider-artist",
component: `<cider-artist :data="artistPage.data"></cider-artist>`, component: `<cider-artist :data="$root.artistPage.data"></cider-artist>`,
condition: `page == 'artist-page' && artistPage.data.attributes` condition: `$root.page == 'artist-page' && $root.artistPage.data.attributes`
}, { }, {
page: "collection-list", page: "collection-list",
component: `<cider-collection-list :data="collectionList.response" :type="collectionList.type" :title="collectionList.title"></cider-collection-list>`, component: `<cider-collection-list :data="$root.collectionList.response" :type="$root.collectionList.type" :title="$root.collectionList.title"></cider-collection-list>`,
condition: `page == 'collection-list'` condition: `$root.page == 'collection-list'`
}, { }, {
page: "home", page: "home",
component: `<cider-home></cider-home>`, component: `<cider-home></cider-home>`,
condition: `page == 'home'` condition: `$root.page == 'home'`
}, { }, {
page: "artist-feed", page: "artist-feed",
component: `<cider-artist-feed></cider-artist-feed>`, component: `<cider-artist-feed></cider-artist-feed>`,
condition: `page == 'artist-feed'` condition: `$root.page == 'artist-feed'`
}, { }, {
page: "playlist-inline", page: "playlist-inline",
component: `<playlist-inline :data="showingPlaylist"></playlist-inline>`, component: `<playlist-inline :data="$root.showingPlaylist"></playlist-inline>`,
condition: `modals.showPlaylist` condition: `$root.modals.showPlaylist`
}, { }, {
page: "playlist_", page: "playlist_",
component: `<cider-playlist :data="showingPlaylist"></cider-playlist>`, component: `<cider-playlist :data="$root.showingPlaylist"></cider-playlist>`,
condition: `page.includes('playlist_')` condition: `$root.page.includes('playlist_')`
}, { }, {
page: "album_", page: "album_",
component: `<cider-playlist :data="showingPlaylist"></cider-playlist>`, component: `<cider-playlist :data="$root.showingPlaylist"></cider-playlist>`,
condition: `page.includes('album_')` condition: `$root.page.includes('album_')`
}, { }, {
page: "recordLabel_", page: "recordLabel_",
component: `<cider-recordlabel :data="showingPlaylist"></cider-recordlabel>`, component: `<cider-recordlabel :data="$root.showingPlaylist"></cider-recordlabel>`,
condition: `page.includes('recordLabel_')` condition: `$root.page.includes('recordLabel_')`
}, { }, {
page: "multiroom", page: "multiroom",
component: `<cider-multiroom :data="multiroom"></cider-multiroom>`, component: `<cider-multiroom :data="$root.multiroom"></cider-multiroom>`,
condition: `page.includes('multiroom')` condition: `$root.page.includes('multiroom')`
}, { }, {
page: "curator_", page: "curator_",
component: `<cider-recordlabel :data="showingPlaylist"></cider-recordlabel>`, component: `<cider-recordlabel :data="$root.showingPlaylist"></cider-recordlabel>`,
condition: `page.includes('curator_')` condition: `$root.page.includes('curator_')`
}, { }, {
page: "browsepage", page: "browsepage",
component: `<cider-browse :data="browsepage"></cider-browse>`, component: `<cider-browse :data="$root.browsepage"></cider-browse>`,
condition: `page == 'browse'`, condition: `$root.page == 'browse'`,
onEnter: `` onEnter: ``
}, { }, {
page: "groupings", page: "groupings",
component: `<cider-groupings :data="browsepage"></cider-groupings>`, component: `<cider-groupings :data="$root.browsepage"></cider-groupings>`,
condition: `page == 'groupings'`, condition: `$root.page == 'groupings'`,
onEnter: `` onEnter: ``
}, { }, {
page: "charts", page: "charts",
component: `<cider-charts :data="browsepage"></cider-charts>`, component: `<cider-charts :data="$root.browsepage"></cider-charts>`,
condition: `page == 'charts'`, condition: `$root.page == 'charts'`,
onEnter: `` onEnter: ``
}, { }, {
page: "listen_now", page: "listen_now",
component: `<cider-listen-now :data="listennow"></cider-listen-now>`, component: `<cider-listen-now :data="$root.listennow"></cider-listen-now>`,
condition: `page == 'listen_now'`, condition: `$root.page == 'listen_now'`,
onEnter: `` onEnter: ``
}, { }, {
page: "radio", page: "radio",
component: `<cider-radio :data="radio"></cider-radio>`, component: `<cider-radio :data="$root.radio"></cider-radio>`,
condition: `page == 'radio'`, condition: `$root.page == 'radio'`,
onEnter: `` onEnter: ``
}, { }, {
page: "settings", page: "settings",
component: `<cider-settings></cider-settings>`, component: `<cider-settings></cider-settings>`,
condition: `page == 'settings'` condition: `$root.page == 'settings'`
}, { }, {
page: "installed-themes", page: "installed-themes",
component: `<installed-themes></installed-themes>`, component: `<installed-themes></installed-themes>`,
condition: `page == 'installed-themes'` condition: `$root.page == 'installed-themes'`
}, { }, {
page: "search", page: "search",
component: `<cider-search :search="search"></cider-search>`, component: `<cider-search :search="$root.search"></cider-search>`,
condition: `page == 'search'` condition: `$root.page == 'search'`
}, { }, {
page: "library-songs", page: "library-songs",
component: `<cider-library-songs :data="library.songs"></cider-library-songs>`, component: `<cider-library-songs :data="$root.library.songs"></cider-library-songs>`,
condition: `page == 'library-songs'`, condition: `$root.page == 'library-songs'`,
onEnter: `` onEnter: ``
}, { }, {
page: "library-albums", page: "library-albums",
component: `<cider-library-albums :data="library.songs"></cider-library-albums>`, component: `<cider-library-albums :data="$root.library.songs"></cider-library-albums>`,
condition: `page == 'library-albums'`, condition: `$root.page == 'library-albums'`,
onEnter: `` onEnter: ``
}, { }, {
page: "library-artists", page: "library-artists",
component: `<cider-library-artists></cider-library-artists>`, component: `<cider-library-artists></cider-library-artists>`,
condition: `page == 'library-artists'`, condition: `$root.page == 'library-artists'`,
onEnter: `` onEnter: ``
}, { }, {
page: "appleCurator", page: "appleCurator",
component: `<cider-applecurator :data="appleCurator"></cider-applecurator>`, component: `<cider-applecurator :data="$root.appleCurator"></cider-applecurator>`,
condition: `page.includes('appleCurator')` condition: `$root.page.includes('appleCurator')`
}, { }, {
page: "themes-github", page: "themes-github",
component: `<themes-github></themes-github>`, component: `<themes-github></themes-github>`,
condition: `page == 'themes-github'` condition: `$root.page == 'themes-github'`
}, { }, {
page: "plugins-github", page: "plugins-github",
component: `<plugins-github></plugins-github>`, component: `<plugins-github></plugins-github>`,
condition: `page == 'plugins-github'` condition: `$root.page == 'plugins-github'`
}, { }, {
page: "remote-pair", page: "remote-pair",
component: `<remote-pair></remote-pair>`, component: `<remote-pair></remote-pair>`,
condition: `page == 'remote-pair'` condition: `$root.page == 'remote-pair'`
}, { }, {
page: "audiolabs", page: "audiolabs",
component: `<audiolabs-page></audiolabs-page>`, component: `<audiolabs-page></audiolabs-page>`,
condition: `page == 'audiolabs'` condition: `$root.page == 'audiolabs'`
}, { }, {
page: "replay", page: "replay",
component: `<replay-page></replay-page>`, component: `<replay-page></replay-page>`,
condition: `page == 'replay'` condition: `$root.page == 'replay'`
} }
] ]
}, },

42
src/renderer/views/app/app-content.ejs
View file

@ -1,42 +0,0 @@
<div id="app-content" :scrollpos="chrome.contentScrollPosY" scrollaxis="y" :style="{'overflow': (chrome.contentAreaScrolling ? '' : 'hidden')}">
<div id="navigation-bar" v-if="getThemeDirective('appNavigation') == 'seperate'">
<button class="nav-item" @click="navigateBack()">
<%- include('../svg/chevron-left.svg') %>
</button>
<button class="nav-item" @click="navigateForward()">
<%- include('../svg/chevron-right.svg') %>
</button>
</div>
<!-- Include App Routes -->
<% for(var i=0; i < Object.keys(env.appRoutes).length ; i++) {%>
<transition
<% if(env.appRoutes[i].onEnter) {
%>
v-on:enter="<%- env.appRoutes[i].onEnter %>"
<%
}
%>
:name="chrome.desiredPageTransition">
<template
v-if="<%- env.appRoutes[i].condition %>">
<%- env.appRoutes[i].component %>
</template>
</transition>
<% } %>
<!-- Library - Made For You -->
<transition :name="chrome.desiredPageTransition" v-on:enter="getMadeForYou()">
<template v-if="page == 'library-madeforyou'">
<%- include('../pages/madeforyou') %>');
%>
</template>
</transition>
<!-- Library - Artists-->
<!-- Keybinds -->
<transition name="wpfade">
<template v-if="page == 'keybinds-settings'">
<keybinds-settings></keybinds-settings>
</template>
</transition>
</div>

2
src/renderer/views/app/app-navigation.ejs
View file

@ -135,7 +135,7 @@
<transition name="sidebartransition"> <transition name="sidebartransition">
<%- include("sidebar") %> <%- include("sidebar") %>
</transition> </transition>
<%- include("app-content") %> <app-content-area></app-content-area>
<transition name="drawertransition"> <transition name="drawertransition">
<div class="app-drawer" <div class="app-drawer"
v-if="drawer.open && drawer.panel == 'lyrics' && lyrics && lyrics != [] && lyrics.length > 0"> v-if="drawer.open && drawer.panel == 'lyrics' && lyrics && lyrics != [] && lyrics.length > 0">

57
src/renderer/views/components/app-content.ejs Normal file
View file

@ -0,0 +1,57 @@
<script type="text/x-template" id="app-content-area">
<div id="app-content" :scrollpos="$root.chrome.contentScrollPosY" scrollaxis="y"
:style="{'overflow': ($root.chrome.contentAreaScrolling ? '' : 'hidden')}">
<div id="navigation-bar" v-if="$root.getThemeDirective('appNavigation') == 'seperate'">
<button class="nav-item" @click="$root.navigateBack()">
<%- include('../svg/chevron-left.svg') %>
</button>
<button class="nav-item" @click="$root.navigateForward()">
<%- include('../svg/chevron-right.svg') %>
</button>
</div>
<!-- Include App Routes -->
<% for(var i = 0; i < Object.keys(env.appRoutes).length ; i++) { %>
<transition
<% if(env.appRoutes[i].onEnter) {
%>
v-on:enter="<%- env.appRoutes[i].onEnter %>"
<%
}
%>
:name="$root.chrome.desiredPageTransition">
<template
v-if="<%- env.appRoutes[i].condition %>">
<%- env.appRoutes[i].component %>
</template>
</transition>
<% } %>
<!-- Library - Made For You -->
<transition :name="$root.chrome.desiredPageTransition" v-on:enter="$root.getMadeForYou()">
<template v-if="$root.page == 'library-madeforyou'">
<%- include('../pages/madeforyou') %>');
%>
</template>
</transition>
<!-- Library - Artists-->
<!-- Keybinds -->
<transition name="wpfade">
<template v-if="$root.page == 'keybinds-settings'">
<keybinds-settings></keybinds-settings>
</template>
</transition>
</div>
</script>
<script>
Vue.component('app-content-area', {
template: '#app-content-area',
data: function () {
return {
scrollPos: 0
}
},
methods: {
}
});
</script>

6
src/renderer/views/components/sidebar-playlist.ejs
View file

@ -126,9 +126,9 @@
} }
}) })
if (typeof this.$parent.getChildren == "function") { if (typeof this.$root.getChildren == "function") {
this.$parent.getChildren() this.$root.getChildren()
console.log(this.$parent.children) console.log(this.$root.children)
} }
await this.getChildren() await this.getChildren()
this.$root.sortPlaylists() this.$root.sortPlaylists()

2
src/renderer/views/main.ejs
View file

@ -122,7 +122,7 @@
<!-- Sidebar Item --> <!-- Sidebar Item -->
<script type="text/x-template" id="sidebar-library-item"> <script type="text/x-template" id="sidebar-library-item">
<button class="app-sidebar-item" <button class="app-sidebar-item"
:class="$parent.getSidebarItemClass(page)" @click="$root.setWindowHash(page)"> :class="$root.getSidebarItemClass(page)" @click="$root.setWindowHash(page)">
<svg-icon :url="svgIconData" :name="'sidebar-' + svgIconName" v-if="svgIconData != ''" /> <svg-icon :url="svgIconData" :name="'sidebar-' + svgIconName" v-if="svgIconData != ''" />
<span class="sidebar-item-text">{{ name }}</span> <span class="sidebar-item-text">{{ name }}</span>
</button> </button>