Skip to content
This repository was archived by the owner on Dec 10, 2024. It is now read-only.

Play button for mediaitem-smarthints #1445

Merged
merged 2 commits into from
Sep 19, 2022
Merged

Play button for mediaitem-smarthints #1445

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
49e0105
Play button for mediaitem-smarthints
Monochromish Sep 19, 2022
a02f57d
Merge branch 'ciderapp:main' into main
Monochromish Sep 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions src/renderer/less/elements.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -410,6 +410,10 @@
&:hover {
background: var(--selected);
border-radius: 6px;

.circular-play-button {
opacity: 1;
}
}
&:active {
background: var(--selected-click);
Expand All @@ -418,6 +422,22 @@
}
}

/* Circle Play Button */
.circular-play-button {
position: relative;
opacity: 0;
top: -34px;
z-index: 5;
left: 8px;
align-items: center;
background: rgba(100, 100, 100, 0.5);
border: none;
cursor: pointer;
border-radius: 100%;
height: 26px;
box-shadow: var(--ciderShadow-Generic);
}

/* horizontal media scroller */
.cd-hmedia-scroller {
&::-webkit-scrollbar-thumb {
Expand Down
102 changes: 94 additions & 8 deletions src/renderer/views/components/smarthints.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,14 @@
<div class="col-auto cider-flex-center" @contextmenu="$root.hintscontext = true;getContextMenu()">
<div class="artwork" :class="{'circle': item.type == 'artists'}">
<mediaitem-artwork
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
:size="32"></mediaitem-artwork>
:url="item.attributes.artwork ? item.attributes.artwork.url : ''"
:size="32"
:style="{'position': 'relative', 'z-index': '-1'}"
></mediaitem-artwork>
<button class="circular-play-button" @click.stop="playTrack(item)">
<div class="_svg-icon" style="--icon:url(\.\/assets\/play\.svg); width: 15px;">
</div>
</button>
</div>
</div>
<div class="col queue-info" @contextmenu="$root.hintscontext = true;getContextMenu()">
Expand Down Expand Up @@ -92,7 +98,7 @@
return this.contextMenu(event)
}
},{once: true})}

},
async contextMenu(event) {
let self = this
Expand Down Expand Up @@ -296,7 +302,7 @@
menus.normal.items.find(x => x.id == 'addToLibrary').disabled = false
}
})

} catch (e) {
console.log(e)
}
Expand All @@ -313,9 +319,9 @@
menus.normal.headerItems.find(x => x.id == 'dislike').hidden = true
}
} catch (err) {

}

if (this.contextExt) {
if (this.contextExt.normal) {
menus.normal.items = menus.normal.items.concat(this.contextExt.normal)
Expand Down Expand Up @@ -373,7 +379,7 @@
window.open(app.getMediaItemArtwork(this.getArtworkUrl(), 1024, 1024))
}
},

]
}, event)
},
Expand All @@ -393,6 +399,87 @@
return `url("${artwork}")`
}
},
playTrack(item) {
let parent = this.parent
let childIndex = this.index
let kind = (item.attributes.playParams ? (item.attributes.playParams?.kind ?? (item.type ?? '')) : (item.type ?? ''));
let id = (item.attributes.playParams ? (item.attributes.playParams?.id ?? (item.id ?? '')) : (item.id ?? ''));
;
let isLibrary = item.attributes.playParams ? (item.attributes.playParams?.isLibrary ?? false) : false;
let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind;
console.log(item, parent, childIndex, kind, id, isLibrary, kind == "playlists", id.startsWith("p.") || id.startsWith("pl.u"))
app.mk.stop().then(() => {
if (parent != null && childIndex != null) {
app.queueParentandplayChild(parent, childIndex, item);
} else if (kind.includes("playlist") && (id.startsWith("p.") || id.startsWith("pl."))) {
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;
}
}

app.mk.setQueue({
[truekind]: [item.attributes.playParams?.id ?? item.id],
parameters: { l: this.app.mklang }
}).then(function() {
app.mk.play().then(function() {
var playlistId = id

function getPlaylist(id, isLibrary) {
if (isLibrary) {
return this.app.mk.api.v3.music(`/v1/me/library/playlists/${id}`)
} else {
return this.app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/playlists/${id}`)
}
}

try {
getPlaylist(id, isLibrary).then(res => {
//let query = res.relationships.tracks.data.map(item => new MusicKit.MediaItem(item));
//if (app.mk.shuffleMode == 1){shuffleArray(query); }
// console.log(query)
// app.mk.queue.append(query)
if (!res.data.relationships.tracks.next) {
return
} else {
getPlaylistTracks(res.data.relationships.tracks.next)
}

function getPlaylistTracks(next) {
app.apiCall(app.musicBaseUrl + next, res => {
// if (res.id != playlistId || next.includes(playlistId)) {
// return
// }
console.log('nextres', res)
let query = res.data.map(item => new MusicKit.MediaItem(item))
if (app.mk.shuffleMode == 1) {
shuffleArray(query);
console.log('shf')
}
app.mk.queue.append(query)

if (res.next) {
getPlaylistTracks(res.next)
}
})
}
})
} catch (e) {
}


})
})


} else {
app.playMediaItemById(item.attributes.playParams?.id ?? item.id, item.attributes.playParams?.kind ?? item.type, item.attributes.playParams?.isLibrary ?? false, item.attributes.url)
}
})
},
},
beforeDestroy: function () {
// this.item = null;
Expand All @@ -401,4 +488,3 @@
}
});
</script>