From b1bbaab9694e35bb3982ea7bda0adb2a577ea1ab Mon Sep 17 00:00:00 2001 From: booploops <49113086+booploops@users.noreply.github.com> Date: Fri, 17 Dec 2021 02:29:12 -0800 Subject: [PATCH] Fixed errors after last song in queue is finished, Styling Changes, list item will now show the play button on hover --- resources/cider-ui/index.js | 22 ++++++++++------- resources/cider-ui/style.less | 24 ++++++++++++++++++- .../views/components/mediaitem-list-item.ejs | 3 +++ 3 files changed, 39 insertions(+), 10 deletions(-) diff --git a/resources/cider-ui/index.js b/resources/cider-ui/index.js index d5f3b06c..eebf3fe2 100644 --- a/resources/cider-ui/index.js +++ b/resources/cider-ui/index.js @@ -629,7 +629,7 @@ const app = new Vue({ } }, async getNowPlayingItemDetailed(target) { - 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, {"include[songs]": "albums,artists"}); + 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"], {"include[songs]": "albums,artists"}); app.searchAndNavigate(u, target) }, async searchAndNavigate(item, target) { @@ -1711,17 +1711,18 @@ const app = new Vue({ return newurl }, getNowPlayingArtworkBG(size = 600) { + if(typeof this.mk.nowPlayingItem === "undefined") return; let bginterval = setInterval(() => { if (!this.mkReady()) { return "" } try { - if (this.mk.nowPlayingItem && this.mk.nowPlayingItem.id != this.currentTrackID && document.querySelector('.bg-artwork')) { + if (this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] != this.currentTrackID && document.querySelector('.bg-artwork')) { if (document.querySelector('.bg-artwork')) { clearInterval(bginterval); } - this.currentTrackID = this.mk.nowPlayingItem.id; + this.currentTrackID = this.mk.nowPlayingItem["id"]; document.querySelector('.bg-artwork').src = ""; if (this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"]) { document.querySelector('.bg-artwork').src = this.mk["nowPlayingItem"]["attributes"]["artwork"]["url"].replace('{w}', size).replace('{h}', size); @@ -1729,7 +1730,7 @@ const app = new Vue({ } else { this.setLibraryArtBG() } - } else if (this.mk.nowPlayingItem.id == this.currentTrackID){ + } else if (this.mk.nowPlayingItem["id"] == this.currentTrackID){ try { clearInterval(bginterval); } catch (err) { console.log(err) } } } catch (e) { @@ -1738,11 +1739,12 @@ const app = new Vue({ }, 200) }, getNowPlayingArtwork(size = 600) { + if(typeof this.mk.nowPlayingItem === "undefined") return; let interval = setInterval(() => { try { - if (this.mk.nowPlayingItem && this.mk.nowPlayingItem.id != this.currentTrackIDBG && document.querySelector('.app-playback-controls .artwork')) { - this.currentTrackIDBG = this.mk.nowPlayingItem.id; + if (this.mk.nowPlayingItem && this.mk.nowPlayingItem["id"] != this.currentTrackIDBG && document.querySelector('.app-playback-controls .artwork')) { + this.currentTrackIDBG = this.mk.nowPlayingItem["id"]; if (document.querySelector('.app-playback-controls .artwork') != null) { clearInterval(interval); } @@ -1753,7 +1755,7 @@ const app = new Vue({ } else { this.setLibraryArt() } - } else if (this.mk.nowPlayingItem.id == this.currentTrackID){ + } else if (this.mk.nowPlayingItem["id"] == this.currentTrackID){ try { clearInterval(interval); } catch (err) { console.log(err) } } } catch (e) { @@ -1767,7 +1769,8 @@ const app = new Vue({ }, async setLibraryArt() { - const data = await this.mk.api.library.song(this.mk.nowPlayingItem.id) + if(typeof this.mk.nowPlayingItem === "undefined") return; + const data = await this.mk.api.library.song(this.mk.nowPlayingItem["id"]) try { if (data != null && data !== "") { document.querySelector('.app-playback-controls .artwork').style.setProperty('--artwork', 'url("' + (data["attributes"]["artwork"]["url"]).toString() + '")'); @@ -1779,7 +1782,8 @@ const app = new Vue({ } }, async setLibraryArtBG() { - const data = await this.mk.api.library.song(this.mk.nowPlayingItem.id) + if(typeof this.mk.nowPlayingItem === "undefined") return; + const data = await this.mk.api.library.song(this.mk.nowPlayingItem["id"]) try { if (data != null && data !== "") { document.querySelector('.bg-artwork').src = (data["attributes"]["artwork"]["url"]).toString(); diff --git a/resources/cider-ui/style.less b/resources/cider-ui/style.less index 32fbe7f3..d7044d3d 100644 --- a/resources/cider-ui/style.less +++ b/resources/cider-ui/style.less @@ -9,6 +9,7 @@ --contentInnerPadding: 16px; --navbarHeight: 48px; --selected: rgb(130 130 130 / 30%); + --selected-click: rgb(80 80 80 / 30%); --keyColor: #fa586a; --keyColor-rgb: 250, 88, 106; --keyColor-rollover: #ff8a9c; @@ -1732,6 +1733,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { &:hover { opacity:1; } + &:active { + background: var(--selected-click); + } >svg { width: 70%; } @@ -1904,6 +1908,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { background: var(--selected); } + &:active { + background: var(--selected-click); + color: #eee; + } + .queue-info { display:flex; flex-direction: column; @@ -1977,6 +1986,9 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { &:hover { opacity: 1; } + &:active { + background: var(--selected-click); + } } } @@ -2046,10 +2058,19 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb { &:hover { background: rgb(200 200 200 / 10%); + .overlay-play { + opacity: 1; + } } &.mediaitem-selected { - background: var(--selected); + background: var(--selected); + } + + + &:active { + background: var(--selected-click); + color: #eee; } } @@ -2558,6 +2579,7 @@ div#captions { .item-navigate:hover { text-decoration: underline; + cursor: pointer; } .title-browse-sp{ diff --git a/resources/cider-ui/views/components/mediaitem-list-item.ejs b/resources/cider-ui/views/components/mediaitem-list-item.ejs index 5ac9f049..e4aebf2d 100644 --- a/resources/cider-ui/views/components/mediaitem-list-item.ejs +++ b/resources/cider-ui/views/components/mediaitem-list-item.ejs @@ -86,6 +86,9 @@ select(e) { if (e.shiftKey) { if (this.index != -1) { + if(app.selectedMediaItems.length == 0) { + app.select_selectMediaItem(this.item.attributes.playParams.id ?? this.item.id, this.item.attributes.playParams.kind ?? this.item.type, this.index, this.guid) + } let allMediaItems = document.querySelectorAll(".cd-mediaitem-list-item[data-index]") let startIndex = Math.min(...app.selectedMediaItems.map(item => item.index)) let endIndex = Math.max(...app.selectedMediaItems.map(item => item.index))