From 26d17be145a0a2ca14755ed88f4a4ca7e692e17f Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Wed, 20 Apr 2022 21:43:26 -0700 Subject: [PATCH] playlist/album revamp, temp disabled inline playlists revamped playlists/albums pages temporarily disabled inline versions until they are updated --- src/renderer/less/bootstrap.less | 13 ++ src/renderer/less/pages.less | 36 +++- src/renderer/main/vueapp.js | 3 +- .../mediaitem-scroller-horizontal.ejs | 5 +- src/renderer/views/pages/cider-playlist.ejs | 174 +++++++++--------- src/renderer/views/pages/playlist-inline.ejs | 135 +++++++------- src/renderer/views/pages/settings.ejs | 2 +- 7 files changed, 216 insertions(+), 152 deletions(-) diff --git a/src/renderer/less/bootstrap.less b/src/renderer/less/bootstrap.less index ace079f4..3c4ad54e 100644 --- a/src/renderer/less/bootstrap.less +++ b/src/renderer/less/bootstrap.less @@ -991,6 +991,18 @@ opacity : 0; } +.fade { + transition: opacity 0.15s var(--appleEase); +} +@media (prefers-reduced-motion: reduce) { + .fade { + transition: none; + } +} +.fade:not(.show) { + opacity: 0; +} + @media (prefers-reduced-motion: reduce) { .modal.fade .modal-dialog { transition: none; @@ -2424,6 +2436,7 @@ fieldset:disabled .btn { -webkit-user-drag: none; // transition: transform .35s var(--appleEase), background-color .35s var(--appleEase); font-weight: 500; + margin: 0px 4px; &:hover { // transition: transform .35s var(--appleEase), background-color 0s var(--appleEase); background-color: var(--hover); diff --git a/src/renderer/less/pages.less b/src/renderer/less/pages.less index 71173f40..afd8884f 100644 --- a/src/renderer/less/pages.less +++ b/src/renderer/less/pages.less @@ -493,10 +493,41 @@ //background: linear-gradient(180deg, var(--bgColor) 32px, var(--bgColor) 18px, transparent 60px, transparent 100%); top : 0; padding-top : var(--navigationBarHeight); + display:flex; + flex-direction: column; + height: 100%; + overflow: hidden; .playlist-body { - padding : var(--contentInnerPadding) 2em; - margin-top: -75px; + padding : 32px; + // margin-top: -75px; + overflow-y:overlay; + height:100%; + padding:0px; + background-color: var(--color1); + + &.scrollbody { + .tabs { + display: flex; + flex-flow: column; + height: 100%; + + .tab-content { + height: 100%; + overflow: hidden; + margin:0px; + .tab-pane { + height: 100%; + overflow-y: overlay; + overflow-x:hidden; + padding: var(--contentInnerPadding); + .well { + margin:0px; + } + } + } + } + } } .floating-header { @@ -510,6 +541,7 @@ background : rgba(0, 0, 0, 0.25); top : var(--navigationBarHeight); transition : opacity 0.1s var(--appleEase); + display: none; } .playlist-display { diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js index 4dcade4b..e58363c3 100644 --- a/src/renderer/main/vueapp.js +++ b/src/renderer/main/vueapp.js @@ -1652,7 +1652,8 @@ const app = new Vue({ params["fields[albums]"] = "artistName,artistUrl,artwork,contentRating,editorialArtwork,editorialNotes,editorialVideo,name,playParams,releaseDate,url,copyright" } - if (this.cfg.advanced.experiments.includes('inline-playlists')) { + // if (this.cfg.advanced.experiments.includes('inline-playlists')) { + if(false) { let showModal = kind.toString().includes("album") || kind.toString().includes("playlist") if (app.page.includes("playlist") || app.page.includes("album")) { showModal = false diff --git a/src/renderer/views/components/mediaitem-scroller-horizontal.ejs b/src/renderer/views/components/mediaitem-scroller-horizontal.ejs index 754a62e7..180b72bb 100644 --- a/src/renderer/views/components/mediaitem-scroller-horizontal.ejs +++ b/src/renderer/views/components/mediaitem-scroller-horizontal.ejs @@ -1,5 +1,5 @@ \ No newline at end of file diff --git a/src/renderer/views/pages/cider-playlist.ejs b/src/renderer/views/pages/cider-playlist.ejs index 69af4505..2c68bdd2 100644 --- a/src/renderer/views/pages/cider-playlist.ejs +++ b/src/renderer/views/pages/cider-playlist.ejs @@ -142,65 +142,70 @@ -
-
-
- - - + + + +
+ +
+
+
+
+
+ +
+
-
- -
- {{getFormattedDate()}} -
-
{{app.getTotalTime()}}
-
- {{data.attributes.copyright}} -
- -
- + @@ -254,31 +261,32 @@ } }, methods: { - openInfoModal(){ + openInfoModal() { app.moreinfodata = []; app.moreinfodata = { - title : this.data?.attributes ? (this.data?.attributes?.name ?? - (this.data?.attributes?.title ?? '') ?? '') : '', + title: this.data?.attributes ? (this.data?.attributes?.name ?? + (this.data?.attributes?.title ?? '') ?? '') : '', subtitle: this.data?.attributes?.artistName ?? '', - content: ((this.data?.attributes?.editorialNotes != null ) ? (this.data?.attributes?.editorialNotes?.standard ?? (this.data?.attributes?.editorialNotes?.short ?? '') ) : (data.attributes?.description ? (this.data.attributes?.description?.standard ?? (this.data?.attributes?.description?.short ?? '')) : '')) + content: ((this.data?.attributes?.editorialNotes != null) ? (this.data?.attributes?.editorialNotes?.standard ?? (this.data?.attributes?.editorialNotes?.short ?? '')) : (data.attributes?.description ? (this.data.attributes?.description?.standard ?? (this.data?.attributes?.description?.short ?? '')) : '')) } app.modals.moreInfo = true; }, - generateNestedPlaylist(){ + generateNestedPlaylist() { this.nestedPlaylist = []; - if (this.data?.type?.includes("album")){ - console.log(this.data.relationships.tracks.data) - let songlists = this.data.relationships.tracks.data; - let discs = songlists.map(x => {return x.attributes.discNumber}).filter((item, i, ar) => ar.indexOf(item) === i); - if (discs && discs.length > 1){ - for (disc of discs){ - let songs = songlists.filter(x => x.attributes.discNumber == disc); - this.nestedPlaylist.push({disc: disc, tracks: songs}) + if (this.data?.type?.includes("album")) { + console.log(this.data.relationships.tracks.data) + let songlists = this.data.relationships.tracks.data; + let discs = songlists.map(x => { return x.attributes.discNumber }).filter((item, i, ar) => ar.indexOf(item) === i); + if (discs && discs.length > 1) { + for (disc of discs) { + let songs = songlists.filter(x => x.attributes.discNumber == disc); + this.nestedPlaylist.push({ disc: disc, tracks: songs }) + } } - } - console.log(this.nestedPlaylist) + console.log(this.nestedPlaylist) - }}, + } + }, isHeaderVisible(visible) { this.headerVisible = visible }, @@ -330,7 +338,7 @@ if (this.data.type.includes('albums')) { let date = this.data.attributes.releaseDate; if (date == null || date === "") return ""; - return `${this.data.relationships.tracks.data[0].attributes.genreNames[0]} · ${new Date(date).getFullYear()}` + return `${this.data.relationships.tracks.data[0].attributes.genreNames[0]} · ${new Date(date).getFullYear()}` } }, async isInLibrary() { @@ -363,7 +371,7 @@ this.confirm = false }, async removeFromLibrary(id) { - const params = {"fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library"}; + const params = { "fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library" }; var id = this.data.id ?? this.data.attributes.playParams.id const res = await app.mkapi(this.data.attributes.playParams.kind ?? this.data.type, this.data.attributes.playParams.isLibrary ?? false, this.data.attributes.playParams.id ?? this.data.id, params); if (res.data.data[0] && res.data.data[0].relationships && res.data.data[0].relationships.library && res.data.data[0].relationships.library.data && res.data.data[0].relationships.library.data.length > 0) { @@ -466,9 +474,9 @@ let self = this let artistId = null - if(typeof this.data.relationships.artists != "undefined") { + if (typeof this.data.relationships.artists != "undefined") { artistId = this.data.relationships.artists.data[0].id - if(this.data.relationships.artists.data[0].type == "library-artists") { + if (this.data.relationships.artists.data[0].type == "library-artists") { artistId = this.data.relationships.artists.data[0].relationships.catalog.data[0].id } } @@ -522,15 +530,15 @@ } } - if(artistId != null) { - if(app.followingArtist(artistId)){ + if (artistId != null) { + if (app.followingArtist(artistId)) { menuItems.items.follow.hidden = true menuItems.items.unfollow.hidden = false } else { menuItems.items.follow.hidden = false menuItems.items.unfollow.hidden = true } - }else{ + } else { menuItems.items.follow.hidden = true menuItems.items.unfollow.hidden = true } @@ -607,7 +615,7 @@ let query = (this.data ?? app.showingPlaylist).relationships.tracks.data.map(item => new MusicKit.MediaItem(item)); app.mk.stop().then(function () { - app.mk.setQueue({[truekind]: [id], parameters: {l: app.mklang}}).then(function () { + app.mk.setQueue({ [truekind]: [id], parameters: { l: app.mklang } }).then(function () { app.mk.play().then(function () { if (query.length > 100) { let u = query.slice(100); @@ -625,4 +633,4 @@ } }) - + \ No newline at end of file diff --git a/src/renderer/views/pages/playlist-inline.ejs b/src/renderer/views/pages/playlist-inline.ejs index fffe34ee..3137943d 100644 --- a/src/renderer/views/pages/playlist-inline.ejs +++ b/src/renderer/views/pages/playlist-inline.ejs @@ -151,78 +151,85 @@ -
-
-
- - - - - -
- -
-
-
-
-
- + + +
+
+ + + + + +
+ +
+
+
+
+
+ +
+
-
-
-
- {{getFormattedDate()}} -
-
{{app.getTotalTime()}}
-
- {{data.attributes.copyright}} -
- -
- + +
diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs index e72a036a..0910eb61 100644 --- a/src/renderer/views/pages/settings.ejs +++ b/src/renderer/views/pages/settings.ejs @@ -919,7 +919,7 @@ {{$root.getLz('settings.option.experimental.inline_playlists')}}
- +