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

Fixed errors after last song in queue is finished, Styling Changes, list item will now show the play button on hover

Browse source
This commit is contained in:
booploops 2021-12-17 02:29:12 -08:00
parent 74d9bceb90
commit b1bbaab969
3 changed files with 39 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

22
resources/cider-ui/index.js
View file

@ -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();

24
resources/cider-ui/style.less
View file

@ -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{

3
resources/cider-ui/views/components/mediaitem-list-item.ejs
View file

@ -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))