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

Merge branch 'main' into enhancement/lastfm

Browse source
This commit is contained in:
Core 2022-06-15 23:28:21 +01:00 • committed by GitHub
commit 78349e875d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 693 additions and 215 deletions
Download patch file Download diff file Expand all files Collapse all files

152
src/renderer/less/elements.less
View file

@ -400,15 +400,15 @@
.listitem-content {
width: 100%;
height: 60px;
display: flex;
flex: 0 0 auto;
flex-direction: row;
font-size: 14px;
justify-content: center-between;
align-items: center;
border-radius: var(--mediaItemRadius);
position: relative;
height: 60px;
display: flex;
flex: 0 0 auto;
flex-direction: row;
font-size: 14px;
justify-content: center-between;
align-items: center;
border-radius: var(--mediaItemRadius);
position: relative;
}
&:hover {
@ -444,6 +444,7 @@
.mediaitem-artwork {
border-radius: var(--mediaItemRadiusSmall);
}
.overlay-play {
background: rgba(0, 0, 0, 0.5);
opacity: 0;
@ -957,6 +958,7 @@
/* mediaitem-square */
.cd-mediaitem-square {
--transitionDuration: .25s;
--scaleRate: 1.25;
--scaleRateArtwork: 1;
width: 200px;
@ -968,6 +970,7 @@
justify-content: center;
align-items: center;
border-radius: 6px;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
.artwork-container {
position: relative;
@ -982,6 +985,7 @@
flex: 0 0 auto;
margin: 6px;
cursor: pointer;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
.mediaitem-artwork {
box-shadow: unset;
@ -1055,16 +1059,33 @@
}
}
@media (min-width: 1600px) {
width: calc(200px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
&:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) {
@media (min-width: 1460px) {
--scaleRate: 1.1;
--scaleRateArtwork: 0.9;
width: calc(200px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
.artwork-container > .artwork {
width: calc(190px * var(--scaleRateArtwork));
height: calc(190px * var(--scaleRateArtwork));
.artwork-container > .artwork {
width: calc(190px * var(--scaleRateArtwork));
height: calc(190px * var(--scaleRateArtwork));
}
}
@media (min-width: 1550px) {
--scaleRate: 1.25;
--scaleRateArtwork: 1;
width: calc(200px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
.artwork-container > .artwork {
width: calc(190px * var(--scaleRateArtwork));
height: calc(190px * var(--scaleRateArtwork));
}
}
}
.info-rect {
width: 90%;
height: 100%;
@ -1112,8 +1133,6 @@
}
&.mediaitem-video {
--scaleRate: 1.25;
--scaleRateArtwork: 1.25;
height: 200px;
width: 240px;
@ -1122,13 +1141,29 @@
width: 212px;
}
@media (min-width: 1600px) {
width: calc(240px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
.artwork-container > .artwork {
width: calc(212px * var(--scaleRateArtwork));
height: calc(120px * var(--scaleRateArtwork));
&:not(.noscale) {
@media (min-width: 1460px) {
--scaleRate: 1.1;
--scaleRateArtwork: 1.1;
width: calc(240px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
.artwork-container > .artwork {
width: calc(220px * var(--scaleRateArtwork));
height: calc(123px * var(--scaleRateArtwork));
}
}
@media (min-width: 1550px) {
--scaleRate: 1.25;
--scaleRateArtwork: 1.25;
width: calc(240px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
.artwork-container > .artwork {
width: calc(220px * var(--scaleRateArtwork));
height: calc(123px * var(--scaleRateArtwork));
}
}
}
}
@ -1141,6 +1176,32 @@
height: 123px;
width: 220px;
}
&:not(.noscale) {
@media (min-width: 1460px) {
--scaleRate: 1.1;
--scaleRateArtwork: 1.1;
width: calc(240px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
.artwork-container > .artwork {
width: calc(220px * var(--scaleRateArtwork));
height: calc(123px * var(--scaleRateArtwork));
}
}
@media (min-width: 1550px) {
--scaleRate: 1.25;
--scaleRateArtwork: 1.25;
width: calc(240px * var(--scaleRate));
height: calc(200px * var(--scaleRate));
.artwork-container > .artwork {
width: calc(220px * var(--scaleRateArtwork));
height: calc(123px * var(--scaleRateArtwork));
}
}
}
}
&.mediaitem-small {
@ -1169,7 +1230,7 @@
overflow: hidden;
border-radius: 0px;
margin: 0;
transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear, filter 0.2s ease-in-out;
.mediaitem-artwork {
border-radius: 0px;
@ -1183,6 +1244,8 @@
padding: 10px 10px 14px;
position: relative;
width: 100%;
display: grid;
align-content: center;
&::before {
background: var(--bgartwork);
@ -1197,6 +1260,7 @@
z-index: 0;
opacity: 1;
filter: brightness(0.5) blur(50px) saturate(180%);
transition: filter 0.2s ease-in-out;
}
}
@ -1211,7 +1275,7 @@
& + .subtitle {
max-height: none !important;
margin-top: -0.5em;
// margin-top: -0.5em;
}
}
@ -1241,14 +1305,34 @@
border-radius: inherit;
}
//@media (min-width: 1600px) {
// width: calc(230px * 1.25);
// height: calc(298px * 1.25);
// .artwork-container>.artwork {
// width: calc(230px * 1.25);
// height: calc(230px * 1.25);
// }
//}
&:hover {
.artwork{
filter: brightness(0.8);
}
.info-rect-card::before {
filter: brightness(0.3) blur(50px) saturate(180%);
}
}
&:not(.noscale) {
@media (min-width: 1460px) {
width: calc(230px * 1.1);
height: calc(298px * 1.1);
.artwork-container > .artwork {
width: calc(230px * 1.1);
height: calc(230px * 1.1);
}
}
@media (min-width: 1550px) {
width: calc(230px * 1.25);
height: calc(298px * 1.25);
.artwork-container > .artwork {
width: calc(230px * 1.25);
height: calc(230px * 1.25);
}
}
}
}
}

68
src/renderer/less/helpers.less
View file

@ -153,22 +153,8 @@
}
.close-btn {
width : 50px;
height : 100%;
background-image : var(--gfx-closeBtn);
background-position: center;
background-repeat : no-repeat;
-webkit-app-region : no-drag;
appearance : none;
border : 0;
background-color : transparent;
position : absolute;
top : 0;
right : 0;
.menu-panel.menu-header-text.close-btn
&:hover {
background-color: rgb(196, 43, 28)
}
}
}
}
@ -191,22 +177,7 @@
}
.close-btn {
width : 50px;
height : 100%;
background-image : var(--gfx-closeBtn);
background-position: center;
background-repeat : no-repeat;
-webkit-app-region : no-drag;
appearance : none;
border : 0;
background-color : transparent;
position : absolute;
top : 0;
right : 0;
&:hover {
background-color: rgb(196, 43, 28)
}
.menu-panel.menu-header-text.close-btn
}
}
@ -371,23 +342,31 @@
}
}
.menu-header-text {
margin: 18px 6px;
.close-btn {
width : 50px;
height : 42px;
background-image : var(--gfx-closeBtn);
width: 36px;
height: 36px;
background-position: center;
background-repeat : no-repeat;
-webkit-app-region : no-drag;
appearance : none;
border : 0;
background-color : transparent;
position : absolute;
top : 0;
right : 0;
background-repeat: no-repeat;
-webkit-app-region: no-drag;
appearance: none;
border: 0;
background-color: transparent;
position: absolute;
top: 10px;
right: 10px;
border-radius: 50px;
display: grid;
align-content: center;
&:before {
content: "";
font-family: "codicon";
color: var(--textColor);
font-size: 20px;
}
&:hover {
background-color: rgb(196, 43, 28)
@ -505,7 +484,8 @@
.popover-artwork {
width: 200px;
height: 200px;
margin: 0 0 20px 0;
margin: 0 auto;
margin-bottom: 20px;
}
.song-name {

53
src/renderer/less/linux.less
View file

@ -3,4 +3,57 @@ body[platform="linux"] {
#window-controls-container {
//display: none;
}
.window-controls {
justify-content: flex-end;
align-items : center;
padding-right : 6px;
>div {
--iconSize: 16px;
&.close,
&.minmax,
&.minimize,
&.minmax.restore {
background-image: unset!important;
position : relative;
display : grid;
align-content : center;
text-align : center;
height : 36px!important;
width : 36px!important;
border-radius : 50px;
transition: background-color .1s ease-in-out;
&:hover {
background: rgb(200 200 200 / 10%)!important;
}
}
&.close::before {
font-family: "codicon";
font-size : var(--iconSize);
content : "";
}
&.minmax::before {
font-family: "codicon";
font-size : var(--iconSize);
content : "";
}
&.minimize::before {
font-family: "codicon";
font-size : var(--iconSize);
content : "";
}
&.restore::before {
font-family: "codicon";
font-size : var(--iconSize);
content : "";
}
}
}
}

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

@ -634,7 +634,7 @@
opacity : .7;
animation : playlistArtworkFadeIn 1s var(--appleEase);
.artworkMaterial>img {
.artworkMaterial img {
filter : brightness(100%) blur(80px) saturate(100%) contrast(1);
object-position: center;
object-fit : cover;
@ -962,6 +962,10 @@
right : 28px;
}
&.animated .artist-header {
min-height: 500px;
}
.artist-header {
//background: linear-gradient(45deg, var(--keyColor), #0e0e0e);
color : white;
@ -977,6 +981,19 @@
// margin-top: -16px;
}
.artist-hero {
height:100%;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
.mediaitem-artwork {
border-radius: 0px;
}
}
.artworkContainer {
position : absolute;
@ -990,7 +1007,7 @@
opacity : .7;
animation : playlistArtworkFadeIn 1s var(--appleEase);
.artworkMaterial>img {
.artworkMaterial img {
filter : brightness(100%) blur(80px) saturate(100%) contrast(1);
object-position: center;
object-fit : cover;
@ -1013,6 +1030,7 @@
position : absolute;
overflow : hidden;
box-shadow: rgb(0 0 0 / 50%) 0 0 0 1000000px inset;
z-index: 1;
video {
overflow : hidden;

49
src/renderer/main/vueapp.js
View file

@ -926,6 +926,15 @@ const app = new Vue({
}
})
this.mk.addEventListener(MusicKit.Events.timedMetadataDidChange, (e) => {
app.mk.nowPlayingItem.attributes.name = e.title
app.mk.nowPlayingItem.attributes.artistName = e.performer
app.mk.nowPlayingItem.attributes.albumName = e.album
app.currentArtUrl = e.links[0].url
app.mk.nowPlayingItem._songId = e._adamId ? e._adamId : -1
app.mk.nowPlayingItem.id = e._adamId ? e._adamId : -1
})
this.mk.addEventListener(MusicKit.Events.nowPlayingItemDidChange, (a) => {
if (self.$refs.queue) {
self.$refs.queue.updateQueue();
@ -1176,9 +1185,20 @@ const app = new Vue({
},
getAppClasses() {
let classes = {}
if (this.cfg.advanced.experiments.includes('compactui')) {
classes.compact = true
switch (this.getThemeDirective('forceUI') ?? "none") {
case "compact":
classes.compact = true;
break;
case "standard":
classes.compact = false;
break;
default:
if (this.cfg.advanced.experiments.includes('compactui')) {
classes.compact = true;
}
break;
}
if (this.cfg.visual.window_background_style == "none") {
classes.simplebg = true
}
@ -1986,14 +2006,21 @@ const app = new Vue({
},
async getNowPlayingItemDetailed(target) {
let nowPlayingItem = JSON.parse(JSON.stringify(this.mk.nowPlayingItem))
if(nowPlayingItem.type === "radioStation" && app.mk.nowPlayingItem.id !== -1) {
nowPlayingItem.playParams = {kind: "songs"}
nowPlayingItem.attributes.playParams.catalogId = app.mk.nowPlayingItem.id
nowPlayingItem.attributes.playParams.id = app.mk.nowPlayingItem.id
nowPlayingItem.id = app.mk.nowPlayingItem.id
}
try {
let u = await app.mkapi(app.mk.nowPlayingItem.playParams.kind,
(app.mk.nowPlayingItem.songId == -1),
(app.mk.nowPlayingItem.songId != -1) ? app.mk.nowPlayingItem.songId : app.mk.nowPlayingItem["id"],
let u = await app.mkapi(nowPlayingItem.playParams.kind,
(nowPlayingItem.songId == -1),
(nowPlayingItem.songId != -1) ? nowPlayingItem.songId : nowPlayingItem["id"],
{ "include[songs]": "albums,artists", l: app.mklang });
app.searchAndNavigate(u.data.data[0], target)
} catch (e) {
app.searchAndNavigate(app.mk.nowPlayingItem, target)
app.searchAndNavigate(nowPlayingItem, target)
}
},
async searchAndNavigate(item, target) {
@ -4316,7 +4343,15 @@ const app = new Vue({
this.showMenuPanel(menus[useMenu], event)
try {
let result = await this.inLibrary([this.mk.nowPlayingItem])
// if its a radio station, then change the attributes to match a song
const nowPlayingItem = JSON.parse(JSON.stringify(this.mk.nowPlayingItem))
if(nowPlayingItem.type == "radioStation" && app.mk.nowPlayingItem.id != -1) {
nowPlayingItem.type = "song"
nowPlayingItem.attributes.playParams.catalogId = app.mk.nowPlayingItem.id
nowPlayingItem.attributes.playParams.id = app.mk.nowPlayingItem.id
nowPlayingItem.id = app.mk.nowPlayingItem.id
}
let result = await this.inLibrary([nowPlayingItem])
if (result[0].attributes.inLibrary) {
menus.normal.items.find(x => x.id == 'addToLibrary').hidden = true
menus.normal.items.find(x => x.id == 'removeFromLibrary').hidden = false

120
src/renderer/style.less
View file

@ -1,9 +1,8 @@
@import url("assets/fonts/Pretendard/pretendardvariable.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100;300;400;500;700;900&display=swap");
@import url("less/appvars.less");
@import url("less/bootstrap-vue.min.less");
@import url("less/ameframework.less");
@ -69,7 +68,7 @@ body {
background-size: cover;
background-position: center;
background: #0000;
font-family: "Pretendard Variable", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-family: "Pretendard Variable", "Noto Sans JP", "Noto Sans KR", "Noto Sans TC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
transition: opacity .10s var(--appleEase);
}
@ -311,19 +310,19 @@ a.dropdown-item {
overflow: hidden;
pointer-events: none;
> img {
img {
position: absolute;
width: 200%;
opacity: 0.5;
filter: brightness(200%) blur(180px) saturate(280%) contrast(2);
}
> img:first-child {
img:first-child {
top: 0;
left: 0;
}
> img:last-child {
img:last-child {
bottom: 0;
right: 0;
transform: rotate(180deg);
@ -1163,52 +1162,47 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
&-macos {
width: 100px;
}
}
.app-chrome .app-chrome-item > .window-controls > div {
height: 100%;
width: 32px;
}
.app-chrome .app-chrome-item > .window-controls > div:hover {
background: rgb(200 200 200 / 10%);
}
.app-chrome .app-chrome-item > .window-controls > div.close {
width: 100%;
height: 100%;
background-image: var(--gfx-closeBtn);
background-position: center;
background-repeat: no-repeat;
-webkit-app-region: no-drag;
&:hover {
background-color: rgb(196, 43, 28)
> div {
height: 100%;
width: 32px;
&:hover {
background: rgb(200 200 200 / 10%);
}
&.close {
width: 100%;
height: 100%;
background-image: var(--gfx-closeBtn);
background-position: center;
background-repeat: no-repeat;
-webkit-app-region: no-drag;
&:hover {
background-color: rgb(196, 43, 28)
}
}
&.minmax {
background-image: var(--gfx-maxBtn);
background-position: center;
background-repeat: no-repeat;
-webkit-app-region: no-drag;
width: 100%;
height: 100%;
}
&.minmax.restore {
background-image: var(--gfx-restoreBtn);
}
&.minimize {
background-image: var(--gfx-minBtn);
background-position: center;
background-repeat: no-repeat;
-webkit-app-region: no-drag;
width: 100%;
height: 100%;
}
}
}
.app-chrome .app-chrome-item > .window-controls > div.minmax {
background-image: var(--gfx-maxBtn);
background-position: center;
background-repeat: no-repeat;
-webkit-app-region: no-drag;
width: 100%;
height: 100%;
}
.app-chrome .app-chrome-item > .window-controls > div.minmax.restore {
background-image: var(--gfx-restoreBtn);
}
.app-chrome .app-chrome-item > .window-controls > div.minimize {
background-image: var(--gfx-minBtn);
background-position: center;
background-repeat: no-repeat;
-webkit-app-region: no-drag;
width: 100%;
height: 100%;
}
body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.minimize {
display: none;
}
@ -1452,10 +1446,13 @@ div[data-type="musicVideo"] .info-rect .title::before {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
border-radius: 4px;
border-radius: var(--mediaItemRadiusSmall);
flex: 0 0 auto;
margin: 6px;
image-rendering: -webkit-optimize-contrast;
.mediaitem-artwork {
border-radius: var(--mediaItemRadiusSmall);
}
}
.app-chrome .app-chrome-item > .app-playback-controls .actions {
@ -1656,7 +1653,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
overflow-x: hidden;
display: flex;
flex-flow: column;
font-family: "Pretendard Variable", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-family: "Pretendard Variable", "Noto Sans JP", "Noto Sans KR", "Noto Sans TC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.lyric-body .no-lyrics {
@ -1761,7 +1758,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
.lyrics-translation {
font-size: 1.6rem;
font-weight: 450;
font-family: "Pretendard Variable", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-family: "Pretendard Variable", "Noto Sans JP", "Noto Sans KR", "Noto Sans TC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
filter: contrast(0.5);
}
@ -3475,22 +3472,7 @@ body.no-gpu {
}
.close-btn {
width: 50px;
height: 100%;
background-image: var(--gfx-closeBtn);
background-position: center;
background-repeat: no-repeat;
-webkit-app-region: no-drag;
appearance: none;
border: 0;
background-color: transparent;
position: absolute;
top: 0;
right: 0;
&:hover {
background-color: rgb(196, 43, 28)
}
.menu-panel.menu-header-text.close-btn
}
}

13
src/renderer/themes/sweetener.less
View file

@ -57,10 +57,6 @@
.cd-mediaitem-square:not(.mediaitem-card) {
transition : transform .2s var(--appleEase);
transition-delay: .1s;
padding : 12px;
// background-color: red;
height: 220px;
.artwork-container {}
@ -73,9 +69,16 @@
transition-delay: .05s;
}
.artwork-container {
transform : scale(0.962) translateZ(0);
transition : transform .1s var(--appleEase);
transition-delay: 0s;
transform-origin: center;
}
&:hover {
.artwork-container {
transform : scale(1.1);
transform : scale(1.0);
transition : transform .1s var(--appleEase);
transition-delay: 0s;
transform-origin: center;

17
src/renderer/views/app/chrome-bottom.ejs
View file

@ -10,10 +10,10 @@
<b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="right">
<div class="content">
<div class="shadow-artwork">
<mediaitem-artwork :url="currentArtUrl" :url="currentArtUrlRaw"></mediaitem-artwork>
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div>
<div class="popover-artwork">
<mediaitem-artwork :size="210" :url="currentArtUrlRaw"></mediaitem-artwork>
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div>
<div class="song-name">{{ mk.nowPlayingItem["attributes"]["name"] }}</div>
<div class="song-artist" @click="getNowPlayingItemDetailed(`artist`)">{{ mk.nowPlayingItem["attributes"]["artistName"] }}</div>
@ -60,6 +60,19 @@
</div>
</template>
<template v-else>
<div class="app-playback-controls">
<div class="artwork" id="artworkLCD" style="pointer-events: none;">
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div>
<div class="playback-info">
<div class="song-name">
</div>
</div>
</div>
</template>
</div>
</div>

16
src/renderer/views/app/chrome-top.ejs
View file

@ -89,10 +89,10 @@
<b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="bottom">
<div class="content">
<div class="shadow-artwork">
<mediaitem-artwork :url="currentArtUrl" :url="currentArtUrlRaw"></mediaitem-artwork>
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div>
<div class="popover-artwork">
<mediaitem-artwork :size="210" :url="currentArtUrlRaw"></mediaitem-artwork>
<mediaitem-artwork :size="210" :url="currentArtUrl"></mediaitem-artwork>
</div>
<div class="song-name">
{{ mk.nowPlayingItem["attributes"]["name"] }}
@ -183,6 +183,18 @@
</template>
</div>
</template>
<template v-else>
<div class="app-playback-controls">
<div class="artwork" id="artworkLCD" style="pointer-events: none;">
<mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
</div>
<div class="playback-info">
<div class="info-rect">
</div>
</div>
</div>
</template>
</div>
<div class="app-chrome-item" v-else>
<div class="top-nav-group">

8
src/renderer/views/components/artist-chip.ejs
View file

@ -1,7 +1,9 @@
<script type="text/x-template" id="artist-chip">
<div class="artist-chip" @click.self="route" tabindex="0">
<div class="artist-chip__image">
<mediaitem-artwork v-if="artist.id != null" :url="artist.attributes.artwork.url" :size="32"></mediaitem-artwork>
<div class="artist-chip__image" v-if="image" :style="{backgroundColor: '#' + (artist.attributes.artwork?.bgColor ?? '000')}">
<mediaitem-artwork v-if="artist.id != null" :url="artist.attributes.artwork.url" :size="80"></mediaitem-artwork>
</div>
<div class="artist-chip__image" v-else>
</div>
<div class="artist-chip__name">
<span>{{ item.attributes.name }}</span>
@ -21,6 +23,7 @@
},
data: function() {
return {
image: false,
artist: {
id: null
}
@ -34,6 +37,7 @@
}
app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/artists/${artistId}`).then(response => {
this.artist = response.data.data[0];
this.image = true;
});
},
methods: {

2
src/renderer/views/components/artwork-material.ejs
View file

@ -1,6 +1,6 @@
<script type="text/x-template" id="artwork-material">
<div class="artworkMaterial">
<img :src="src" v-for="image in images"/>
<mediaitem-artwork :url="src" :size="500" v-for="image in images"/>
</div>
</script>

35
src/renderer/views/components/fullscreen.ejs
View file

@ -14,7 +14,9 @@
<div class="artwork" @click="app.fullscreen(false)">
<mediaitem-artwork
:size="600"
:url="(image ?? '').replace('{w}','600').replace('{h}','600') "
:video="video"
:videoPriority="true"
:url="(image ?? '').replace('{w}','600').replace('{h}','600')"
></mediaitem-artwork>
</div>
<div class="controls-parents">
@ -149,6 +151,37 @@
return {
app: this.$root,
tabMode: "lyrics",
video: null
}
},
async mounted() {
if (app.mk.nowPlayingItem._container.type == "albums") {
try {
const result = (await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/${app.mk.nowPlayingItem._container.type}/${app.mk.nowPlayingItem._container.id}`, {
"fields": "editorialArtwork,editorialVideo",
})).data.data[0].attributes?.editorialVideo?.motionDetailSquare?.video
if (result) {
this.video = result
} else {
this.video = null
}
} catch (e) {
this.video = null
e = null
}
} else if (app.mk.nowPlayingItem._container.type == "library-albums") {
try {
const result = (await app.mk.api.v3.music(`/v1/me/library/albums/${app.mk.nowPlayingItem._container.id}/catalog`
, { "fields": "editorialArtwork,editorialVideo" })).data.data[0].attributes?.editorialVideo?.motionDetailSquare?.video
if (result) {
this.video = result
} else {
this.video = null
}
} catch (e) {
e = null
this.video = null
}
}
},
beforeMount() {

20
src/renderer/views/components/mediaitem-square.ejs
View file

@ -87,6 +87,11 @@
default: false,
required: false
},
noScale: {
type: Boolean,
default: false,
required: false
},
'contextExt': { type: Object, required: false },
},
data: function () {
@ -251,6 +256,10 @@
},
getClasses() {
let type = []
let classes = []
if(this.noScale) {
classes.push("noscale")
}
try {
type = this.item.type
@ -263,25 +272,26 @@
}
switch (type) {
default:
return []
break;
case "editorial-elements":
case "card":
return ["mediaitem-card"]
classes.push("mediaitem-card")
break;
case "385": // editorial
return ["mediaitem-brick"]
classes.push("mediaitem-brick")
break;
case "small":
return ["mediaitem-small"]
classes.push("mediaitem-small")
break;
case "music-videos":
case "uploadedVideo":
case "uploaded-videos":
case "library-music-videos":
return "mediaitem-video";
classes.push("mediaitem-video")
break;
}
return classes
},
visibilityChanged: function (isVisible, entry) {
this.isVisible = isVisible

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

@ -71,7 +71,7 @@
<div id="LOADER">
<%- include("../assets/cider-round.svg") %>
</div>
<div id="app" :class="getAppClasses()" :style="getAppStyle()" :window-style="cfg.visual.directives.windowLayout">
<div id="app" :class="getAppClasses()" :style="getAppStyle()" :library-visbile="(chrome.sidebarCollapsed ? 0 : 1)" :window-style="cfg.visual.directives.windowLayout">
<transition name="fsModeSwitch">
<div id="app-main" v-show="appMode == 'player'">
<%- include('app/chrome-top'); %>
@ -105,7 +105,8 @@
<% } %>
<script async src="https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" data-web-components></script>
<script async src="<%- (env.useV3 ? "https://js-cdn.music.apple.com/musickit/v3/amp/musickit.js" : "https://js-cdn.music.apple.com/musickit/v2/amp/musickit.js" ) %>" data-web-components>
</script>
<script src="index.js?v=1"></script>
<script type="text/x-template" id="am-musiccovershelf">

25
src/renderer/views/pages/artist.ejs
View file

@ -4,7 +4,7 @@
<div class="artist-header" :key="data.id" v-observe-visibility="{callback: isHeaderVisible}">
<animatedartwork-view
:priority="true"
v-if="data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9)"
v-if="hasAnimated()"
:video="data.attributes.editorialVideo.motionArtistWide16x9.video ?? (data.attributes.editorialVideo.motionArtistFullscreen16x9.video ?? '')">
</animatedartwork-view>
<div class="header-content" style="pointer-events: all;">
@ -41,9 +41,12 @@
<div class="svg-icon"></div>
</button>
</div>
<div class="artworkContainer"
<div class="artworkContainer"
v-if="!(data.attributes.editorialVideo && (data.attributes.editorialVideo.motionArtistWide16x9 || data.attributes.editorialVideo.motionArtistFullscreen16x9))">
<artwork-material :url="data.attributes.artwork.url" size="190" images="1"></artwork-material>
<artwork-material :url="data.attributes.artwork.url" size="190" images="1"></artwork-material>
</div>
<div class="artist-hero" v-if="hasHero() && !hasAnimated()">
<mediaitem-artwork shadow="none" :url="hasHero()" size="2048" />
</div>
</div>
<div class="floating-header"
@ -69,7 +72,7 @@
<div class="latestRelease" v-if="data.views['latest-release'].data.length != 0">
<h3>{{app.getLz('term.latestReleases')}}</h3>
<div style="width: auto;margin: 0 auto;">
<mediaitem-square kind="card" v-for="song in data.views['latest-release'].data"
<mediaitem-square kind="card" :no-scale="true" v-for="song in data.views['latest-release'].data"
:item="song">
</mediaitem-square>
</div>
@ -164,6 +167,20 @@
}
},
methods: {
hasAnimated() {
if(this.data.attributes?.editorialVideo && (this.data.attributes?.editorialVideo?.motionArtistWide16x9 || this.data.attributes?.editorialVideo?.motionArtistFullscreen16x9)) {
return true;
}
return false;
},
hasHero() {
if(this.data.attributes?.editorialArtwork?.bannerUber) {
return this.data.attributes?.editorialArtwork?.bannerUber.url
}else if(this.data.attributes?.editorialArtwork?.subscriptionHero){
return this.data.attributes?.editorialArtwork?.subscriptionHero.url
}
return false;
},
isHeaderVisible(visible) {
this.headerVisible = visible
},

2
src/renderer/views/pages/cider-playlist.ejs
View file

@ -121,7 +121,7 @@
</div>
</div>
<div class="artworkContainer" v-if="data.attributes.artwork != null">
<artwork-material :url="data.attributes.artwork.url" size="260" images="1"></artwork-material>
<artwork-material :url="data.attributes.artwork.url" size="500" images="1"></artwork-material>
</div>
<button class="md-btn md-btn-small editTracksBtn" v-if="(data.attributes.canEdit && data.type == 'library-playlists')" @click="editing = !editing">
<span v-if="!editing">

2
src/renderer/views/pages/replay.ejs
View file

@ -28,7 +28,7 @@
<h4>{{ loaded.attributes.uniqueSongCount }} {{$root.getLz('term.uniqueSongs')}}</h4>
</div>
<div class="col-auto replay-playlist-container">
<mediaitem-square kind="card" :force-video="true" :item="loaded.playlist"></mediaitem-square>
<mediaitem-square kind="card" :no-scale="true" :force-video="true" :item="loaded.playlist"></mediaitem-square>
</div>
</div>
<!-- Top Artists-->

17
src/renderer/views/pages/settings.ejs
View file

@ -1154,6 +1154,20 @@
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
Use MusicKit V3
<small>Requires relaunch</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" v-model="app.cfg.advanced.experiments.includes('ampv3')"
@click="app.cfg.advanced.experiments.includes('ampv3') ? removeExperiment('ampv3') : addExperiment('ampv3')"
switch/>
</label>
</div>
</div>
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.option.advanced.playlistTrackMapping')}}
@ -1170,12 +1184,13 @@
<div class="md-option-line">
<div class="md-option-segment">
{{$root.getLz('settings.option.experimental.compactUI')}}
<small v-if="!!app.getThemeDirective('forceUI')">{{$root.getLz('term.themeManaged')}}</small>
</div>
<div class="md-option-segment md-option-segment_auto">
<label>
<input type="checkbox" v-model="app.cfg.advanced.experiments.includes('compactui')"
@click="app.cfg.advanced.experiments.includes('compactui') ? removeExperiment('compactui') : addExperiment('compactui')"
switch/>
switch :disabled="!!app.getThemeDirective('forceUI')"/>
</label>
</div>
</div>

14
src/renderer/views/pages/zoo.ejs
View file

@ -9,6 +9,20 @@
v-if="artistLoaded"
:item="artist"
></artist-chip>
<amp-chrome-player/>
<!-- <amp-footer-player/> -->
<hr>
<amp-lcd-progress/>
<hr>
<amp-playback-controls-shuffle/>
<apple-music-playback-controls theme="dark" />
<apple-music-progress theme="dark"></apple-music-progress>
<apple-music-volume theme="dark"></apple-music-volume>
<amp-user-menu/>
<amp-tv-overlay/>
<amp-podcast-playback-controls/>
<amp-lcd/>
</div>
</script>
<script>