Merge branch 'develop' into patch-15

2022-02-17 21:10:13 -08:00 · 2022-02-17 21:10:13 -08:00 · 4df664cdd4
commit 4df664cdd4
parent 6b4130d364 951053ed46
15 changed files with 463 additions and 67 deletions
--- a/src/i18n/ja_JP.jsonc
+++ b/src/i18n/ja_JP.jsonc
@ -215,6 +215,8 @@
  // Settings - Audio
  "settings.header.audio": "オーディオ",
  "settings.header.audio.description": "Ciderのオーディオ設定",
+  "settings.option.audio.volumeStep": "音量調整のステップ",
+  "settings.option.audio.maxVolume": "最大音量",
  "settings.option.audio.quality": "音質", // Dropdown
  "settings.header.audio.quality.hireslossless": "ハイレゾロスレス",
  "settings.header.audio.quality.hireslossless.description": "(最大解像度 24 ビット／192 kHz)",
--- a/src/main/base/browserwindow.ts
+++ b/src/main/base/browserwindow.ts
@ -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",
@ -125,6 +126,16 @@ export class BrowserWindow {
        this.options.width = windowState.width;
        this.options.height = windowState.height;

+        switch(process.platform) {
+            default:
+
+            break;
+            case "linux":
+                this.options.autoHideMenuBar = true
+                this.options.frame = true
+            break;
+        }
+
        // Start the webserver for the browser window to load

        this.startWebServer();
--- a/src/main/base/store.ts
+++ b/src/main/base/store.ts
@ -27,7 +27,7 @@ export class Store {
        },
        "audio": {
            "volume": 1,
-            "volumeStep": 0.1,
+            "volumeStep": 0.02,
            "maxVolume": 1,
            "lastVolume": 1,
            "muted": false,
--- a/src/preload/cider-preload.js
+++ b/src/preload/cider-preload.js
@ -32,7 +32,7 @@ const MusicKitInterop = {
 			}

 			// LastFM's Custom Call
-			// await MusicKitInterop.modifyNamesOnLocale();
+			await MusicKitInterop.modifyNamesOnLocale();
 			if (trackFilter || !app.cfg.lastfm.filterLoop) {
 				global.ipcRenderer.send('nowPlayingItemDidChangeLastFM', attributes);
 			}
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@ -3044,7 +3044,7 @@ const app = new Vue({
                    type += "s"
                }
                type = type.replace("library-", "") 
-                let id = item.attributes.playParams.catalogId ?? item.id
+                let id = item.attributes.playParams.catalogId ?? item.attributes.playParams.id ?? item.id

                let index = types.findIndex(function (type) {
                    return type.type == this
--- a/src/renderer/less/linux.less
+++ b/src/renderer/less/linux.less
@ -0,0 +1,6 @@
+// Linux
+body[platform="linux"] {
+    #window-controls-container {
+        display: none;
+    }
+}
--- a/src/renderer/less/pages.less
+++ b/src/renderer/less/pages.less
@ -819,3 +819,205 @@
    margin: 16px;
  }
 }
+
+//Home
+.home-page {
+  top: 0;
+  padding-top: var(--navbarHeight);
+
+  .md-btn-replay {
+    background: var(--replayGradient);
+    border: 0px;
+    box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.2);
+    text-transform: uppercase;
+    font-weight: bold;
+  }
+  .md-btn-replay--hero {
+    font-size: 1em;
+    padding: 16px;
+    background: var(--replayGradient);
+    border: 0px;
+    box-shadow: inset 0px 0px 0px 1px rgb(200 200 200 / 20%);
+    margin-top: 1em;
+    font-size: 0.9em;
+    text-transform: uppercase;
+    font-weight: bold;
+  }
+
+  .artist-feed-card {
+    position: absolute;
+    bottom: 0;
+    left: 10%;
+    z-index: 1;
+    background: black;
+    width: 80%;
+    height: 96%;
+    overflow: scroll;
+    border-radius: 10px;
+  }
+
+  .col.madeforyou-col {
+    width: 420px;
+    min-width: 0px;
+    max-width: 420px;
+  }
+
+  .well.artistfeed-well {
+    margin-top: 0px;
+    height: 392px;
+    align-content: flex-start;
+  }
+
+  .hint-text {
+    font-size: 0.9rem;
+    color: rgb(200 200 200 / 70%);
+  }
+
+  .user-icon {
+    border-radius: 100%;
+    width: 128px;
+    height: 128px;
+    overflow: hidden;
+    box-shadow: var(--mediaItemShadow-Shadow);
+    margin: 16px;
+  }
+
+  .well.profile-well {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .name {
+      margin: 4px;
+      font-weight: 500;
+    }
+
+    .handle {
+      margin: 4px;
+      opacity: 0.7;
+      font-weight: 500;
+    }
+  }
+}
+
+// Replay
+.replay-page {
+  --replayTextShadow: 0px 3px 2px #6f3f52;
+
+  .replay-period {
+    height: 200px;
+    width: 200px;
+    margin: 6px;
+    border-radius: var(--mediaItemRadius);
+    overflow: hidden;
+    cursor: pointer;
+    transition: transform .2s var(--appleEase);
+    transition-delay: .1s;
+    align-self: center;
+    &:hover {
+      transform: translateY(-6px);
+      transition-delay: 0s;
+    }
+    .artwork-container {
+      height:200px;
+      width:200px;
+    }
+  }
+
+  .replay-playlist-container {
+    .cd-mediaitem-square {
+      height: 230px;
+      width: 230px;
+      .info-rect {
+        display: none;
+      }
+    }
+  }
+
+  .replay-video {
+    max-height: 300px;
+    max-width: 800px;
+    margin: 0 auto;
+
+    .mediaitem-artwork {
+      max-height: 300px;
+    max-width: 800px;
+    }
+
+    .mediaitem-artwork .animatedartwork-view-box .animated video {
+      object-fit: cover;
+    }
+  }
+
+  .top-genres-container {
+
+    .genre-name {
+      font-size: 0.9em;
+      margin: 6px 0px;
+      font-weight: 500;
+    }
+    .genre-count {
+      width: 100%;
+      height: 32px;
+      background: #ffffff14;
+      border-radius: 10px;
+      overflow: hidden;
+
+      .genre-count-bar {
+        height: 100%;
+        width: 0%;
+        background: var(--keyColor);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-width: 32px;
+        font-size: 0.9em;
+        font-weight: 500;
+      }
+    }
+  }
+
+  .cd-mediaitem-square {
+    .mediaitem-artwork {
+      animation: replayFadeIn .5s var(--appleEase);
+    }
+    transition: transform .2s var(--appleEase);
+    transition-delay: .1s;
+    &:hover {
+      transform: scale(1.1);
+      transition-delay: 0s;
+    }
+  }
+
+  @keyframes replayFadeIn {
+    0% {
+      //border-radius: 100%;
+      transform: translateY(10px) scale(0.9);
+      opacity: 0;
+    }
+
+    100% {
+      //border-radius: var(--mediaItemRadius);
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  .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;
+  }
+}
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@ -38,6 +38,7 @@
  --songProgressColor: var(--keyColor);
  --songProgressBackground: #333;
  --textColor: #eee;
+  --replayGradient: linear-gradient(45deg, hsl(248deg 58% 29%), hsl(13deg 41% 42%));
 }

 html,
@ -1085,6 +1086,7 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.cl
  max-width: 500px;
  border-left: 1px solid rgb(200 200 200 / 8%);
  border-right: 1px solid rgb(200 200 200 / 8%);
+  -webkit-app-region: drag;
 }

 .app-chrome .app-chrome-item > .app-playback-controls {
@ -1092,6 +1094,7 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.cl
  justify-content: center;
  align-content: center;
  width: 100%;
+  -webkit-app-region: no-drag;
 }

 .app-chrome .app-chrome-item > .app-playback-controls {
@ -1646,66 +1649,6 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
  height: 100%;
 }

-.home-page {
-  top: 0;
-  padding-top: var(--navbarHeight);
-
-  .artist-feed-card {
-    position: absolute;
-    bottom: 0;
-    left: 10%;
-    z-index: 1;
-    background: black;
-    width: 80%;
-    height: 96%;
-    overflow: scroll;
-    border-radius: 10px;
-  }
-
-  .col.madeforyou-col {
-    width: 420px;
-    min-width: 0px;
-    max-width: 420px;
-  }
-
-  .well.artistfeed-well {
-    margin-top: 0px;
-    height: 392px;
-    align-content: flex-start;
-  }
-
-  .hint-text {
-    font-size: 0.9rem;
-    color: rgb(200 200 200 / 70%);
-  }
-
-  .user-icon {
-    border-radius: 100%;
-    width: 128px;
-    height: 128px;
-    overflow: hidden;
-    box-shadow: var(--mediaItemShadow-Shadow);
-    margin: 16px;
-  }
-
-  .well.profile-well {
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    .name {
-      margin: 4px;
-      font-weight: 500;
-    }
-
-    .handle {
-      margin: 4px;
-      opacity: 0.7;
-      font-weight: 500;
-    }
-  }
-}
-
 /* Cider */

 .more-btn-round {
@ -2757,6 +2700,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);
@ -3156,4 +3110,5 @@ body[platform='darwin'] {
 }


+@import url("less/linux.less");
@import url("less/compact.less");
--- a/src/renderer/views/app/app-content.ejs
+++ b/src/renderer/views/app/app-content.ejs
@ -172,4 +172,11 @@
        </template>
    </transition>

+    <!-- Replay -->
+    <transition name="wpfade">
+        <template v-if="page == 'replay'">
+            <replay-page></replay-page>
+        </template>
+    </transition>
+
 </div>
--- a/src/renderer/views/components/listitem-horizontal.ejs
+++ b/src/renderer/views/components/listitem-horizontal.ejs
@ -3,7 +3,7 @@
    <vue-horizontal>
        <div v-for="items in itemPages">
            <mediaitem-list-item
-                v-for="(song, index) in items" :parent="'listitem-hr' + simplifiedParent"
+                v-for="(song, index) in items" :show-library-status="showLibraryStatus" :parent="'listitem-hr' + simplifiedParent"
                :index="song.index"
                :item="song"></mediaitem-list-item>
        </div>
@ -19,6 +19,10 @@
            items: {
                type: Array,
                required: true
+            },
+            showLibraryStatus: {
+                type: Boolean,
+                default: true
            }
        },
        data: function () {
--- a/src/renderer/views/components/mediaitem-list-item.ejs
+++ b/src/renderer/views/components/mediaitem-list-item.ejs
@ -74,6 +74,9 @@
            <div class="duration" v-if="displayDuration" @dblclick="route()">
                {{ msToMinSec(item.attributes.durationInMillis ?? 0) }}
            </div>
+            <div class="duration" v-if="item.attributes.playCount" @dblclick="route()">
+                {{ item.attributes.playCount }}
+            </div>
        </template>
    </div>
 </script>
--- a/src/renderer/views/components/mediaitem-square.ejs
+++ b/src/renderer/views/components/mediaitem-square.ejs
@ -12,6 +12,7 @@
                            :size="size"
                            shadow="subtle"
                            :bgcolor="getBgColor()"
+                            :video-priority="forceVideo"
                            :type="item.type"></mediaitem-artwork>
                </div>
                <button class="menu-btn" v-if="!nomenu.includes(item.type)"
@ -57,6 +58,10 @@
                type: String,
                default: '190'
            },
+            forceVideo: {
+                type: Boolean,
+                default: false
+            },
            'contextExt': {type: Object, required: false},
        },
        data: function () {
--- a/src/renderer/views/pages/home.ejs
+++ b/src/renderer/views/pages/home.ejs
@ -49,9 +49,21 @@
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->
+            <div class="row" v-if="!seenReplay">
+                <div class="col">
+                    <button class="md-btn md-btn-block md-btn-replay--hero" @click="$root.appRoute('replay')">Replay {{ year }}</button>
+                </div>
+            </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="md-btn md-btn-replay" v-if="seenReplay" @click="$root.appRoute('replay')">Replay {{ year }}</button>
+                        </div>
+                    </div>
                    <div class="well">
                        <mediaitem-scroller-horizontal :items="madeForYou" v-if="isSectionReady('madeForYou')">
                        </mediaitem-scroller-horizontal>
@ -98,7 +110,9 @@
                artistFeed: [],
                showingArtistFeed: false,
                page: "main",
-                sectionsReady: []
+                sectionsReady: [],
+                year: new Date().getFullYear(),
+                seenReplay: localStorage.getItem('seenReplay')
            }
        },
        async mounted() {
@ -106,6 +120,10 @@
            this.getListenNowData()
            await this.getArtistFeed()
            await this.getFavorites()
+            if (new Date().getMonth() == 11) {
+                this.seenReplay = false
+                localStorage.setItem('seenReplay', false)
+            }
        },
        methods: {
            async seeAllHistory() {
--- a/src/renderer/views/pages/library-songs.ejs
+++ b/src/renderer/views/pages/library-songs.ejs
@ -17,6 +17,14 @@
                </div>
                <div class="col-auto flex-center">             
                    <div class="row">
+                        <button class="col md-btn md-btn-primary  md-btn-icon" style="min-width: 100px;margin-right: 3px;"
+                        @click="app.mk.shuffleMode = 0; play()"> <img class="md-ico-play">
+                            {{app.getLz('term.play')}}
+                        </button>
+                        <button class="col md-btn md-btn-primary  md-btn-icon" style="min-width: 100px;margin-right: 3px;"
+                        @click="app.mk.shuffleMode = 1;play()"> <img class="md-ico-shuffle">
+                            {{app.getLz('term.shuffle')}}
+                         </button>   
                        <div class="col">
                            <select class="md-select" v-model="prefs.sort" @change="$root.searchLibrarySongs()">
                                <optgroup :label="app.getLz('term.sortBy')">
@ -75,6 +83,28 @@
        methods: {
            sayHello: function () {
                alert('Hello world!');
+            },
+            play: function () {
+
+                function shuffleArray(array) {
+                    for (var i = array.length - 1; i > 0; i--) {
+                        var j = Math.floor(Math.random() * (i + 1));
+                        var temp = array[i];
+                        array[i] = array[j];
+                        array[j] = temp;
+                    }
+                }
+
+                let query = this.app.library.songs.displayListing.map(item => new MusicKit.MediaItem(item));
+                if (!app.mk.queue.isEmpty)
+                app.mk.queue.splice(0, app.mk.queue._itemIDs.length);
+                app.mk.stop().then(() => {
+                  if (app.mk.shuffleMode == 1) {
+                                shuffleArray(query)
+                            }
+                    app.mk.queue.append(query)
+                    app.mk.changeToMediaAtIndex(0)
+                });
            }
        }
    });
--- a/src/renderer/views/pages/replay.ejs
+++ b/src/renderer/views/pages/replay.ejs
@ -0,0 +1,153 @@
+<script type="text/x-template" id="replay-page">
+    <div class="content-inner replay-page">
+        <vue-horizontal style="height: 300px;">
+            <div class="replay-period" v-for="year in years" @click="getReplayYear(year.attributes.year)">
+                <div class="artwork-container">
+                    <mediaitem-artwork :size="200" :url="year.relationships.playlist.data[0].attributes.artwork.url"></mediaitem-artwork>
+                </div>
+                {{ year.attributes.year }}
+            </div>
+        </vue-horizontal>
+        <hr>
+        <transition name="replaycard">
+        <div class="replay-viewport" v-if="loaded.id != -1">
+            <!-- Stats -->
+            <div class="replay-video" v-if="false">
+                <mediaitem-artwork 
+            :url="loaded.playlist.attributes.editorialVideo.motionWideVideo21x9.previewFrame.url" 
+            :video="loaded.playlist.attributes.editorialVideo.motionWideVideo21x9.video" 
+            :video-priority="true"></mediaitem-artwork>
+            </div>
+            <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 replay-playlist-container">
+                    <mediaitem-square kind="card" :force-video="true" :item="loaded.playlist"></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 }} minutes<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 :show-library-status="false" :items="songsToArray(loaded.views['top-songs'].data)"></listitem-horizontal>
+            </div>
+            <h3>Top Genres</h3>
+            <div class="top-genres-container">
+                <div v-for="genre in loaded.topGenres" class="replay-genre-display">
+                    <div class="genre-name">
+                        {{ genre.genre }}
+                    </div>
+                    <div class="genre-count">
+                        <div class="genre-count-bar" :style="{'width': genre.count + '%'}">
+                            {{ genre.count }}%
+                        </div>
+                    </div>
+                </div>
+            </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
+            this.years.reverse()
+            localStorage.setItem("seenReplay", true)
+            this.getReplayYear();
+        },
+        methods: {
+            songsToArray(songsData) {
+                let songs = []
+                let topGenres = {}
+                let genrePlayCount = 0;
+                songsData.forEach(function (songData) {
+                    let song = songData.relationships.song.data[0]
+                    song.attributes.playCount = songData.attributes.playCount
+                    songs.push(song)
+                    genrePlayCount += song.attributes.playCount
+                    song.attributes.genreNames.forEach(function (genre) {
+                        if (genre != "Music") {
+                            if (topGenres[genre] == undefined) {
+                                topGenres[genre] = song.attributes.playCount
+                            } else {
+                                topGenres[genre] += song.attributes.playCount
+                            }
+                        }
+                    })
+                })
+                let topGenresArray = []
+                for (let genre in topGenres) {
+                    topGenresArray.push({
+                        genre: genre,
+                        count: topGenres[genre]
+                    })
+                }
+                topGenresArray.sort(function (a, b) {
+                    return b.count - a.count
+                })
+                topGenresArray.forEach(function (genre) {
+                    genre.count = Math.round(genre.count / genrePlayCount * 100)
+                })
+                this.loaded.topGenres = topGenresArray
+                
+                return songs
+            },
+            async getReplayYear(year = new Date().getFullYear()) {
+                this.loaded.id = -1
+                let response = await app.mk.api.v3.music(`/v1/me/music-summaries/year-${year}?extend=inLibrary&views=top-artists%2Ctop-albums%2Ctop-songs&include[music-summaries]=playlist&include[playlists]=tracks&includeOnly=playlist%2Ctracks%2Csong%2Cartist%2Calbum`)
+                let replayData = response.data.data[0]
+                // extended playlist
+                let playlist = await app.mk.api.v3.music(replayData.relationships.playlist.data[0].href, {extend: "editorialArtwork,editorialVideo"})
+                replayData.playlist = playlist.data.data[0]
+                this.loaded = replayData
+            }
+        }
+    });
+</script>