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

replay wip

Browse source
This commit is contained in:
booploops 2022-02-17 01:56:13 -08:00
parent 90ad36d256
commit 6f975a3394
6 changed files with 146 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -47,6 +47,7 @@ export class BrowserWindow {
"pages/library-videos",
"pages/remote-pair",
"pages/themes-github",
"pages/replay",
"components/mediaitem-artwork",
"components/artwork-material",
"components/menu-panel",

24
src/renderer/less/pages.less
View file

@ -819,3 +819,27 @@
margin: 16px;
}
}
// Replay
.replay-page {
--replayGradient: linear-gradient(45deg, hsl(248deg 58% 29%), hsl(13deg 41% 42%));
--replayTextShadow: 0px 3px 2px #6f3f52;
.replay-viewport {
background: var(--replayGradient);
padding: 16px 40px;
border-radius: 10px;
box-shadow: var(--mediaItemShadow), var(--mediaItemShadow-Shadow);
color: rgb(238 238 238 / 86%);
.replay-header {
text-align: center;
font-size: 3em;
text-shadow: var(--replayTextShadow);
}
}
.replay-card {
background: transparent;
border:0px;
}
}

11
src/renderer/style.less
View file

@ -2757,6 +2757,17 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
/* Transitions */
.replaycard-enter-active,
.replaycard-leave-active {
transition: opacity .5s var(--appleEase), transform .5s var(--appleEase);
}
.replaycard-enter,
.replaycard-leave-to {
opacity: 0;
transform: translateY(20px);
}
.modal-enter-active,
.modal-leave-active {
transition: opacity .1s var(--appleEase), transform .1s var(--appleEase);

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

@ -172,4 +172,11 @@
</template>
</transition>
<!-- Replay -->
<transition name="wpfade">
<template v-if="page == 'replay'">
<replay-page></replay-page>
</template>
</transition>
</div>

9
src/renderer/views/pages/home.ejs
View file

@ -51,7 +51,14 @@
<!-- </div>-->
<div class="row">
<div class="col">
<h3>{{app.getLz('home.madeForYou')}}</h3>
<div class="row">
<div class="col nopadding">
<h3>{{app.getLz('home.madeForYou')}}</h3>
</div>
<div class="col-auto nopadding flex-center">
<button class="cd-btn-seeall" @click="$root.appRoute('replay')">Replay</button>
</div>
</div>
<div class="well">
<mediaitem-scroller-horizontal :items="madeForYou" v-if="isSectionReady('madeForYou')">
</mediaitem-scroller-horizontal>

95
src/renderer/views/pages/replay.ejs Normal file
View file

@ -0,0 +1,95 @@
<script type="text/x-template" id="replay-page">
<div class="content-inner replay-page">
<h1 class="header-text">Replay</h1>
<button v-for="year in years" class="md-btn md-btn-primary" @click="getReplayYear(year)">{{ year.attributes.year }}</button>
<hr>
<transition name="replaycard">
<div class="replay-viewport" v-if="loaded.id != -1">
<!-- Stats -->
<h1 class="replay-header">{{ loaded.attributes.year }} Replay</h1>
<hr>
<div class="row">
<div class="col">
<h4>{{ loaded.attributes.listenTimeInMinutes }} minutes</h4>
<h4>{{ loaded.attributes.uniqueAlbumCount }} Unique Albums</h4>
<h4>{{ loaded.attributes.uniqueArtistCount }} Unique Artists</h4>
<h4>{{ loaded.attributes.uniqueSongCount }} Unique Songs</h4>
</div>
<div class="col-auto">
<mediaitem-square kind="card" :item="loaded.relationships.playlist.data[0]"></mediaitem-square>
</div>
</div>
<!-- Top Artists-->
<h3>Top Artists</h3>
<div class="well">
<mediaitem-scroller-horizontal>
<div class="card replay-card" v-for="artistData in loaded.views['top-artists'].data">
<div class="card-body">
<mediaitem-square :item="artistData.relationships.artist.data[0]"></mediaitem-square>
</div>
<div class="card-footer">
{{ artistData.attributes.listenTimeInMinutes }}<br>
Listened to: {{ artistData.attributes.playCount }} times
</div>
</div>
</mediaitem-scroller-horizontal>
</div>
<!-- Top Albums-->
<h3>Top Albums</h3>
<div class="well">
<mediaitem-scroller-horizontal>
<div class="card replay-card" v-for="albumData in loaded.views['top-albums'].data">
<div class="card-body">
<mediaitem-square :item="albumData.relationships.album.data[0]"></mediaitem-square>
</div>
<div class="card-footer">
{{ albumData.attributes.listenTimeInMinutes }} minutes<br>
{{ albumData.attributes.playCount }} plays
</div>
</div>
</mediaitem-scroller-horizontal>
</div>
<!-- Top Songs-->
<h3>Top Songs</h3>
<div class="well">
<listitem-horizontal :items="songsToArray(loaded.views['top-songs'].data)"></listitem-horizontal>
</div>
</div>
</transition>
</div>
</script>
<script>
Vue.component('replay-page', {
template: '#replay-page',
data: function () {
return {
years: [],
loaded: {
id: -1
}
}
},
async mounted() {
// Get available years
let year = await app.mk.api.v3.music("/v1/me/music-summaries/search?extend=inLibrary&period=year&fields[music-summaries]=period%2Cyear&include[music-summaries]=playlist")
this.years = year.data.data
},
methods: {
songsToArray(songsData) {
let songs = []
songsData.forEach(function (songData) {
songs.push(songData.relationships.song.data[0])
})
return songs
},
async getReplayYear(year) {
this.loaded.id = -1
console.log(year)
let response = await app.mk.api.v3.music(`${year.href}?extend=inLibrary&views=top-artists%2Ctop-albums%2Ctop-songs&include[music-summaries]=playlist&include[playlists]=tracks&includeOnly=playlist%2Ctracks%2Csong%2Cartist%2Calbum`)
console.warn(response.data.data[0])
this.loaded = response.data.data[0]
}
}
});
</script>