add charts page (groupings)

src/i18n/en_US.json

@@ -42,6 +42,7 @@
   "term.artists": "Artists",
   "term.podcasts": "Podcasts",
   "term.playlists": "Playlists",
+  "term.charts": "Charts",
   "term.playlist": "Playlist",
   "term.newPlaylist": "New Playlist",
   "term.newPlaylistFolder": "New Playlist Folder",

src/main/base/browserwindow.ts

@@ -59,6 +59,7 @@ export class BrowserWindow {
                 "pages/library-recentlyadded",
                 "pages/browse",
                 "pages/groupings",
+                "pages/charts",
                 "pages/settings",
                 "pages/installed-themes",
                 "pages/listen_now",
@@ -201,6 +202,11 @@ export class BrowserWindow {
                     component: `<cider-groupings :data="browsepage"></cider-groupings>`,
                     condition: `page == 'groupings'`,
                     onEnter: ``
+                },{
+                    page: "charts",
+                    component: `<cider-charts :data="browsepage"></cider-charts>`,
+                    condition: `page == 'charts'`,
+                    onEnter: ``
                 }, {
                     page: "listen_now",
                     component: `<cider-listen-now :data="listennow"></cider-listen-now>`,

src/main/base/vrouting.json

@@ -95,6 +95,11 @@
     "component": "<cider-groupings :data=\"browsepage\"></cider-groupings>",
     "condition": "page == 'groupings'",
     "onEnter": ""
+  },{
+    "page": "charts",
+    "component": "<cider-charts :data=\"browsepage\"></cider-charts>",
+    "condition": "page == 'charts'",
+    "onEnter": ""
   },
   {
     "page": "listen_now",

src/renderer/main/vueapp.js

@@ -500,8 +500,11 @@ const app = new Vue({
             })
         },
         goToGrouping(url = "https://music.apple.com/WebObjects/MZStore.woa/wa/viewGrouping?cc=us&id=34") {
+            if (url.includes('viewTop')){
+            window.location.hash = `#charts/top`
+            } else {
             const id = url.split("id=")[1];
-            window.location.hash = `#groupings/${id}`
+            window.location.hash = `#groupings/${id}`}
         },
         navigateForward() {
             history.forward()

src/renderer/views/pages/charts.ejs

@@ -0,0 +1,133 @@
+<script type="text/x-template" id="cider-charts">
+    <div class="content-inner">
+        <h1 class="header-text">{{$root.getLz("term.charts")}}</h1>
+            <template v-if="songs != []"> 
+                <div class="row">
+                    <div class="col">
+                        <h3>{{ songs.name ?? ""}}</h3>
+                    </div>
+                    <div class="col-auto flex-center" v-if="songs.data.length > 12">
+                        <button class="cd-btn-seeall" @click="app.showCollection((songs ?? []), songs.name ?? '', 'default')" >{{app.getLz('term.seeAll')}}</button>
+                    </div>
+                </div>
+                    <div class="mediaitem-list-item__grid">
+                        <listitem-horizontal :items="(songs?.data ?? []).limit(12)">
+                        </listitem-horizontal>
+                    </div>
+            </template>
+            <template v-if="albums != []">
+                <div class="row">
+                    <div class="col">
+                        <h3>{{ albums.name ?? ""}}</h3>
+                    </div>
+                    <div class="col-auto flex-center" v-if="songs.data.length > 12">
+                        <button class="cd-btn-seeall" @click="app.showCollection((albums ?? []), albums.name ?? '', 'default')" >{{app.getLz('term.seeAll')}}</button>
+                    </div>
+                </div>
+                <mediaitem-scroller-horizontal-large
+                                :items="(albums?.data ?? []).limit(10)"></mediaitem-scroller-horizontal-large>
+            </template>
+            <template v-if="playlists != []">
+                <div class="row">
+                    <div class="col">
+                        <h3>{{ playlists.name ?? ""}}</h3>
+                    </div>
+                    <div class="col-auto flex-center" v-if="playlists.data.length > 12">
+                        <button class="cd-btn-seeall" @click="app.showCollection((playlists ?? []), playlists.name ?? '', 'default')" >{{app.getLz('term.seeAll')}}</button>
+                    </div>
+                </div>
+                <mediaitem-scroller-horizontal-large
+                                :items="(playlists?.data ?? []).limit(10)"></mediaitem-scroller-horizontal-large>
+            </template>
+          <template v-if="musicvideos != []">
+                <div class="row">
+                    <div class="col">
+                        <h3>{{ musicvideos.name ?? ""}}</h3>
+                    </div>
+                    <div class="col-auto flex-center" v-if="musicvideos.data.length > 12">
+                        <button class="cd-btn-seeall" @click="app.showCollection((musicvideos ?? []), musicvideos.name ?? '', 'default')" >{{app.getLz('term.seeAll')}}</button>
+                    </div>
+                </div>
+                <mediaitem-scroller-horizontal-large
+                                :items="(musicvideos?.data ?? []).limit(10)"></mediaitem-scroller-horizontal-large>
+            </template>
+            <template v-if="globalcharts != []">
+                <div class="row">
+                    <div class="col">
+                        <h3>{{ globalcharts.name ?? ""}}</h3>
+                    </div>
+                    <div class="col-auto flex-center" v-if="globalcharts.data.length > 12">
+                        <button class="cd-btn-seeall" @click="app.showCollection((globalcharts ?? []), globalcharts.name ?? '', 'default')" >{{app.getLz('term.seeAll')}}</button>
+                    </div>
+                </div>
+                <mediaitem-scroller-horizontal-large
+                                :items="(globalcharts?.data ?? []).limit(10)"></mediaitem-scroller-horizontal-large>
+            </template>
+            <template v-if="citycharts != []">
+                <div class="row">
+                    <div class="col">
+                        <h3>{{ citycharts.name ?? ""}}</h3>
+                    </div>
+                    <div class="col-auto flex-center" v-if="citycharts.data.length > 12">
+                        <button class="cd-btn-seeall" @click="app.showCollection((citycharts ?? []), citycharts.name ?? '', 'default')" >{{app.getLz('term.seeAll')}}</button>
+                    </div>
+                </div>
+                <mediaitem-scroller-horizontal-large
+                                :items="(citycharts?.data ?? []).limit(10)"></mediaitem-scroller-horizontal-large>
+            </template>
+           
+    </div>
+</script>
+
+<script>
+    Vue.component('cider-charts', {
+        template: "#cider-charts",
+        data: function () {
+            return {
+                app: this.$root,
+                songs: [],
+                albums: [],
+                playlists: [],
+                musicvideos: [],
+                citycharts: [],
+                globalcharts: [],
+                categories: [],
+            }
+        },
+        mounted() {
+            this.getData();
+        },
+        methods: {
+            getData() {
+                let self = this;
+                app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/charts`, {
+                    types: 'albums,songs,music-videos,playlists',
+                    l: 'en-gb',
+                    platform: 'auto',
+                    limit: '50',
+                    genre: '34',
+                    include: 'tracks',
+                    with: 'cityCharts,dailyGlobalTopCharts',
+                    extend: 'artistUrl',
+                    'fields[albums]': 'artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url',
+                    'fields[playlists]': 'artistName,artistUrl,artwork,contentRating,editorialArtwork,name,playParams,releaseDate,url,curatorName'
+                }).then(res => {
+                    let page = res.data?.results ?? [];
+                    self.songs = page.songs[0] ?? [];
+                    self.albums = page.albums[0] ?? [];
+                    self.playlists = page.playlists[0] ?? [];
+                    self.musicvideos = page['music-videos'][0] ?? [];
+                    self.citycharts = page.cityCharts[0] ?? [];
+                    self.globalcharts = page.dailyGlobalTopCharts[0] ?? [];
+                })
+                // let self = this;
+                // app.mk.api.music(`/v1/catalog/${app.mk.storefrontId}/charts?types=songs%2Calbums%2Cplaylists&limit=36`).then(res => {
+                //     let page = res.data?.results ?? [];
+                //     self.songs = page.songs[0] ?? [];
+                //     self.albums = page.albums[0] ?? [];
+                //     self.playlists = page.playlists[0] ?? [];
+                // })
+            }
+        }
+    })    
+</script>