added song.link share option, temporarily is its own entry in context menus

This commit is contained in:
booploops 2022-02-07 18:06:43 -08:00
parent da2d057c02
commit 861d260b95
4 changed files with 231 additions and 88 deletions

View file

@ -271,6 +271,25 @@ const app = new Vue({
}, },
}, },
methods: { methods: {
songLinkShare(amUrl) {
notyf.open({type: "info", message: "Getting song.link share URL..."})
let self = this
httpRequest = new XMLHttpRequest();
httpRequest.open('GET', `https://api.song.link/v1-alpha.1/links?url=${amUrl}&userCountry=US`, true);
httpRequest.send();
httpRequest.onreadystatechange = function () {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
let response = JSON.parse(httpRequest.responseText);
console.log(response);
self.copyToClipboard(response.pageUrl)
} else {
console.log('There was a problem with the request.');
notyf.error("There was a problem with the request.")
}
}
}
},
mainMenuVisibility(val) { mainMenuVisibility(val) {
if (val) { if (val) {
(this.chrome.userinfo.id) ? this.chrome.menuOpened = !this.chrome.menuOpened : false (this.chrome.userinfo.id) ? this.chrome.menuOpened = !this.chrome.menuOpened : false
@ -3364,7 +3383,16 @@ const app = new Vue({
app.copyToClipboard((u.data.data.length && u.data.data.length > 0) ? u.data.data[0].attributes.url : u.data.data.attributes.url) app.copyToClipboard((u.data.data.length && u.data.data.length > 0) ? u.data.data[0].attributes.url : u.data.data.attributes.url)
}) })
} }
} },
{
"icon": "./assets/feather/share.svg",
"name": `${app.getLz('action.share')} (song.link)`,
"action": function () {
app.mkapi(app.mk.nowPlayingItem.attributes?.playParams?.kind ?? app.mk.nowPlayingItem.type ?? 'songs', false, app.mk.nowPlayingItem._songId ?? app.mk.nowPlayingItem.id ?? '').then(u => {
app.songLinkShare((u.data.data.length && u.data.data.length > 0) ? u.data.data[0].attributes.url : u.data.data.attributes.url)
})
}
}
] ]
} }
} }

View file

@ -90,17 +90,17 @@
} }
}, },
props: { props: {
'item': {type: Object, required: true}, 'item': { type: Object, required: true },
'parent': {type: String, required: false}, 'parent': { type: String, required: false },
'index': {type: Number, required: false, default: -1}, 'index': { type: Number, required: false, default: -1 },
'show-artwork': {type: Boolean, default: true}, 'show-artwork': { type: Boolean, default: true },
'show-library-status': {type: Boolean, default: true}, 'show-library-status': { type: Boolean, default: true },
'show-meta-data': {type: Boolean, default: false}, 'show-meta-data': { type: Boolean, default: false },
'show-duration': {type: Boolean, default: true}, 'show-duration': { type: Boolean, default: true },
'showIndex': {type: Boolean, required: false}, 'showIndex': { type: Boolean, required: false },
'showIndexPlaylist': {type: Boolean, required: false}, 'showIndexPlaylist': { type: Boolean, required: false },
'contextExt': {type: Object, required: false}, 'contextExt': { type: Object, required: false },
'class-list': {type: String, required: false, default: ""}, 'class-list': { type: String, required: false, default: "" },
}, },
mounted() { mounted() {
let duration = this.item.attributes.durationInMillis ?? 0 let duration = this.item.attributes.durationInMillis ?? 0
@ -115,8 +115,8 @@
return color return color
}, },
async checkLibrary() { async checkLibrary() {
if(this.addedToLibrary) {return this.addedToLibrary} if (this.addedToLibrary) { return this.addedToLibrary }
if(this.item.type.includes("library-playlists") || this.item.type.includes("station")) { if (this.item.type.includes("library-playlists") || this.item.type.includes("station")) {
this.addedToLibrary = true this.addedToLibrary = true
return return
} }
@ -126,10 +126,10 @@
return this.addedToLibrary return this.addedToLibrary
}, },
getClasses() { getClasses() {
if(this.classList) { if (this.classList) {
this.addClasses = {} this.addClasses = {}
let classList = this.classList.split(' ') let classList = this.classList.split(' ')
for(let i = 0; i < classList.length; i++) { for (let i = 0; i < classList.length; i++) {
this.addClasses[classList[i]] = true this.addClasses[classList[i]] = true
} }
} }
@ -259,7 +259,7 @@
for (let kind in itemsToPlay) { for (let kind in itemsToPlay) {
let ids = itemsToPlay[kind] let ids = itemsToPlay[kind]
if (ids.length > 0) { if (ids.length > 0) {
app.mk.playNext({[kind + "s"]: itemsToPlay[kind]}) app.mk.playNext({ [kind + "s"]: itemsToPlay[kind] })
} }
} }
console.log(itemsToPlay) console.log(itemsToPlay)
@ -281,7 +281,7 @@
for (let kind in itemsToPlay) { for (let kind in itemsToPlay) {
let ids = itemsToPlay[kind] let ids = itemsToPlay[kind]
if (ids.length > 0) { if (ids.length > 0) {
app.mk.playLater({[kind + "s"]: itemsToPlay[kind]}) app.mk.playLater({ [kind + "s"]: itemsToPlay[kind] })
} }
} }
app.selectedMediaItems = [] app.selectedMediaItems = []
@ -363,7 +363,7 @@
"name": app.getLz('action.playNext'), "name": app.getLz('action.playNext'),
"icon": "./assets/arrow-bend-up.svg", "icon": "./assets/arrow-bend-up.svg",
"action": function () { "action": function () {
app.mk.playNext({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id}) app.mk.playNext({ [self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id })
app.mk.queue._reindex() app.mk.queue._reindex()
app.selectedMediaItems = [] app.selectedMediaItems = []
} }
@ -372,7 +372,7 @@
"name": app.getLz('action.playLater'), "name": app.getLz('action.playLater'),
"icon": "./assets/arrow-bend-down.svg", "icon": "./assets/arrow-bend-down.svg",
"action": function () { "action": function () {
app.mk.playLater({[self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id}) app.mk.playLater({ [self.item.attributes.playParams.kind ?? self.item.type]: self.item.attributes.playParams.id ?? self.item.id })
app.mk.queue._reindex() app.mk.queue._reindex()
app.selectedMediaItems = [] app.selectedMediaItems = []
} }
@ -381,7 +381,7 @@
"icon": "./assets/feather/radio.svg", "icon": "./assets/feather/radio.svg",
"name": app.getLz('action.startRadio'), "name": app.getLz('action.startRadio'),
"action": function () { "action": function () {
app.mk.setStationQueue({song: self.item.attributes.playParams.id ?? self.item.id}).then(() => { app.mk.setStationQueue({ song: self.item.attributes.playParams.id ?? self.item.id }).then(() => {
app.mk.play() app.mk.play()
app.selectedMediaItems = [] app.selectedMediaItems = []
}) })
@ -405,12 +405,26 @@
"icon": "./assets/feather/share.svg", "icon": "./assets/feather/share.svg",
"name": app.getLz('action.share'), "name": app.getLz('action.share'),
"action": function () { "action": function () {
if (!self.item.attributes.url && self.item.relationships){ if (!self.item.attributes.url && self.item.relationships) {
if (self.item.relationships.catalog){ if (self.item.relationships.catalog) {
app.mkapi(self.item.attributes.playParams.kind, false, self.item.relationships.catalog.data[0].id).then(u => {self.app.copyToClipboard((u.data.data.length && u.data.data.length > 0)? u.data.data[0].attributes.url : u.data.data.attributes.url)}) app.mkapi(self.item.attributes.playParams.kind, false, self.item.relationships.catalog.data[0].id).then(u => { self.app.copyToClipboard((u.data.data.length && u.data.data.length > 0) ? u.data.data[0].attributes.url : u.data.data.attributes.url) })
} }
}else { } else {
self.app.copyToClipboard(self.item.attributes.url)} self.app.copyToClipboard(self.item.attributes.url)
}
}
},
{
"icon": "./assets/feather/share.svg",
"name": `${app.getLz('action.share')} (song.link)`,
"action": function () {
if (!self.item.attributes.url && self.item.relationships) {
if (self.item.relationships.catalog) {
app.mkapi(self.item.attributes.playParams.kind, false, self.item.relationships.catalog.data[0].id).then(u => { self.app.songLinkShare((u.data.data.length && u.data.data.length > 0) ? u.data.data[0].attributes.url : u.data.data.attributes.url) })
}
} else {
self.app.songLinkShare(self.item.attributes.url)
}
} }
} }
] ]
@ -430,30 +444,30 @@
try { try {
await this.checkLibrary().then(res => { await this.checkLibrary().then(res => {
console.log(res) console.log(res)
if(res) { if (res) {
menus.normal.items.find(x => x.id == 'addToLibrary').hidden = true menus.normal.items.find(x => x.id == 'addToLibrary').hidden = true
menus.normal.items.find(x => x.id == 'removeFromLibrary').hidden = false menus.normal.items.find(x => x.id == 'removeFromLibrary').hidden = false
}else{ } else {
menus.normal.items.find(x => x.id == 'addToLibrary').disabled = false menus.normal.items.find(x => x.id == 'addToLibrary').disabled = false
} }
}) })
}catch(e) { } catch (e) {
} }
try{ try {
let rating = await app.getRating(self.item) let rating = await app.getRating(self.item)
if (rating == 0) { if (rating == 0) {
menus.normal.headerItems.find(x => x.id == 'love').disabled = false menus.normal.headerItems.find(x => x.id == 'love').disabled = false
menus.normal.headerItems.find(x => x.id == 'dislike').disabled = false menus.normal.headerItems.find(x => x.id == 'dislike').disabled = false
} else if (rating == 1) { } else if (rating == 1) {
menus.normal.headerItems.find(x => x.id == 'unlove').hidden = false menus.normal.headerItems.find(x => x.id == 'unlove').hidden = false
menus.normal.headerItems.find(x => x.id == 'love').hidden = true menus.normal.headerItems.find(x => x.id == 'love').hidden = true
} else if (rating == -1) { } else if (rating == -1) {
menus.normal.headerItems.find(x => x.id == 'undo_dislike').hidden = false menus.normal.headerItems.find(x => x.id == 'undo_dislike').hidden = false
menus.normal.headerItems.find(x => x.id == 'dislike').hidden = true menus.normal.headerItems.find(x => x.id == 'dislike').hidden = true
} }
} catch(err) { } catch (err) {
} }
}, },
@ -474,7 +488,7 @@
}, },
async removeFromLibrary() { async removeFromLibrary() {
let item = this.item let item = this.item
let params = {"fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library"} let params = { "fields[songs]": "inLibrary", "fields[albums]": "inLibrary", "relate": "library" }
let id = item.id ?? item.attributes.playParams.id let id = item.id ?? item.attributes.playParams.id
let res = await app.mkapi(item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.playParams.id ?? item.id, params); let res = await app.mkapi(item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.playParams.id ?? item.id, params);
if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) { if (res && res.relationships && res.relationships.library && res.relationships.library.data && res.relationships.library.data.length > 0) {
@ -502,10 +516,10 @@
let truekind = (!kind.endsWith("s")) ? (kind + "s") : kind; 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")) console.log(item, parent, childIndex, kind, id, isLibrary, kind == "playlists", id.startsWith("p.") || id.startsWith("pl.u"))
app.mk.stop().then(() => { app.mk.stop().then(() => {
if (parent != null && childIndex != null) { if (parent != null && childIndex != null) {
app.queueParentandplayChild(parent, childIndex, item); app.queueParentandplayChild(parent, childIndex, item);
} }
else if (kind.includes("playlist") && (id.startsWith("p.") || id.startsWith("pl."))){ else if (kind.includes("playlist") && (id.startsWith("p.") || id.startsWith("pl."))) {
function shuffleArray(array) { function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) { for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1)); var j = Math.floor(Math.random() * (i + 1));
@ -514,58 +528,59 @@
array[j] = temp; array[j] = temp;
} }
} }
app.mk.setQueue({[truekind]: [item.attributes.playParams.id ?? item.id]}).then(function () { app.mk.setQueue({ [truekind]: [item.attributes.playParams.id ?? item.id] }).then(function () {
app.mk.play().then(function (){ app.mk.play().then(function () {
var playlistId = id var playlistId = id
function getPlaylist(id, isLibrary){ function getPlaylist(id, isLibrary) {
if (isLibrary){ if (isLibrary) {
return this.app.mk.api.v3.music(`/v1/me/library/playlists/${id}`) 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}`)} } 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)
} }
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) { function getPlaylistTracks(next) {
app.apiCall(app.musicBaseUrl + next, res => { app.apiCall(app.musicBaseUrl + next, res => {
// if (res.id != playlistId || next.includes(playlistId)) { // if (res.id != playlistId || next.includes(playlistId)) {
// return // return
// } // }
console.log('nextres', res) console.log('nextres', res)
let query = res.data.map(item => new MusicKit.MediaItem(item)) let query = res.data.map(item => new MusicKit.MediaItem(item))
if (app.mk.shuffleMode == 1){shuffleArray(query); console.log('shf')} if (app.mk.shuffleMode == 1) { shuffleArray(query); console.log('shf') }
app.mk.queue.append(query) app.mk.queue.append(query)
if (res.next) { if (res.next) {
getPlaylistTracks(res.next) getPlaylistTracks(res.next)
}
})
} }
}) })
} catch (e) {} }
})
} catch (e) { }
}) })
}) })
} }
else { else {
app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url) app.playMediaItemById(item.attributes.playParams.id ?? item.id, item.attributes.playParams.kind ?? item.type, item.attributes.playParams.isLibrary ?? false, item.attributes.url)
}}) }
})
}, },
route(){ route() {
let kind = (this.item.attributes.playParams ? (this.item.attributes.playParams.kind ?? (this.item.type ?? '')) : (this.item.type ?? '')); let kind = (this.item.attributes.playParams ? (this.item.attributes.playParams.kind ?? (this.item.type ?? '')) : (this.item.type ?? ''));
if (kind.toLowerCase().includes('album') || kind.toLowerCase().includes('playlist')){ if (kind.toLowerCase().includes('album') || kind.toLowerCase().includes('playlist')) {
app.routeView(this.item) app.routeView(this.item)
} else { } else {
this.playTrack() this.playTrack()
@ -573,4 +588,4 @@
} }
} }
}); });
</script> </script>

View file

@ -402,6 +402,18 @@
}else { }else {
self.app.copyToClipboard(self.item.attributes.url)} self.app.copyToClipboard(self.item.attributes.url)}
} }
},
{
"icon": "./assets/feather/share.svg",
"name": `${app.getLz('action.share')} (song.link)`,
"action": function () {
if (!self.item.attributes.url && self.item.relationships){
if (self.item.relationships.catalog){
app.mkapi(self.item.attributes.playParams.kind, false, self.item.relationships.catalog.data[0].id).then(u => {self.app.songLinkShare((u.data.data.length && u.data.data.length > 0)? u.data.data[0].attributes.url : u.data.data.attributes.url)})
}
}else {
self.app.songLinkShare(self.item.attributes.url)}
}
} }
] ]
} }

View file

@ -0,0 +1,88 @@
<script type="text/x-template" id="add-to-playlist">
<template>
<div class="modal-fullscreen addtoplaylist-panel" @click.self="app.resetState()" @contextmenu.self="app.resetState()">
<div class="modal-window">
<div class="modal-header">
<div class="modal-title">{{app.getLz('action.addToPlaylist')}}</div>
<button class="close-btn" @click="app.resetState()"></button>
</div>
<div class="modal-content">
<button class="playlist-item"
@click="app.addSelectedToNewPlaylist()" style="width:100%;">
<div class="icon"><%- include("../svg/plus.svg") %></div>
<div class="name">{{app.getLz('action.createPlaylist')}}</div>
</button>
<sidebar-playlist :playlist-select="playlistSelect" v-for="item in $root.getPlaylistFolderChildren('p.playlistsroot')" :item="item">
</sidebar-playlist>
</div>
<div class="modal-search">
<div class="search-input-container" style="width:100%;margin: 16px 0;">
<div class="search-input--icon"></div>
<input type="search"
ref="searchInput"
style="width:100%;"
spellcheck="false"
:placeholder="app.getLz('term.search') + '...'"
v-model="searchQuery"
@input="search()"
class="search-input">
</div>
</div>
</div>
</div>
</template>
</script>
<script>
Vue.component('add-to-playlist', {
template: '#add-to-playlist',
data: function () {
return {
playlistSorted: [],
searchQuery: "",
focused: "",
app: this.$root,
}
},
props: {
playlists: {
type: Array,
required: true
}
},
mounted() {
this.search()
this.$refs.searchInput.focus()
this.$refs.searchInput.addEventListener('keydown', (e) => {
if (e.keyCode == 13) {
if (this.focused != "") {
this.addToPlaylist(this.focused)
}
}
})
},
methods: {
playlistSelect(playlist) {
if(playlist.type != "library-playlist-folders") {
this.addToPlaylist(playlist.id)
}
},
addToPlaylist(id) {
app.addSelectedToPlaylist(id)
},
search() {
this.focused = ""
if (this.searchQuery == "") {
this.playlistSorted = this.playlists
} else {
this.playlistSorted = this.playlists.filter(playlist => {
return playlist.attributes.name.toLowerCase().indexOf(this.searchQuery.toLowerCase()) > -1
})
if (this.playlistSorted.length == 1) {
this.focused = this.playlistSorted[0].id
}
}
},
}
});
</script>