some fixes

This commit is contained in:
booploops 2022-02-24 04:58:32 -08:00
parent 7a8cdf483b
commit 80f78edbf3
4 changed files with 157 additions and 72 deletions

View file

@ -1575,10 +1575,10 @@ const app = new Vue({
//this.getTypeFromID("artist",id,isLibrary,query)
},
followArtistById(id, follow) {
if (follow && !this.followingArist(id)) {
if (follow && !this.followingArtist(id)) {
this.cfg.home.followedArtists.push(id)
} else {
let index = this.cfg.home.followedArtists.indexOf(this.item.id)
let index = this.cfg.home.followedArtists.indexOf(id)
if (index > -1) {
this.cfg.home.followedArtists.splice(index, 1)
}

View file

@ -6,8 +6,8 @@
<div class="artist-chip__name">
<span>{{ item.attributes.name }}</span>
</div>
<button @click="$root.followArtist(item.id, true)" title="Follow" v-if="!$root.followingArtist(item.id)" class="artist-chip__follow codicon codicon-add"></button>
<button @click="$root.followArtist(item.id, false)" title="Following" v-else class="artist-chip__follow codicon codicon-check"></button>
<button @click="$root.followArtistById(item.id, true)" title="Follow" v-if="!$root.followingArtist(item.id)" class="artist-chip__follow codicon codicon-add"></button>
<button @click="$root.followArtistById(item.id, false)" title="Following" v-else class="artist-chip__follow codicon codicon-check"></button>
</div>
</script>

View file

@ -32,21 +32,27 @@
{{data.attributes ? (data.attributes.name ??
(data.attributes.title ?? '') ?? '') : ''}}
</div>
<div class="playlist-name" v-show="nameEditing"><input type="text" spellcheck="false"
<div class="playlist-name" v-show="nameEditing"><input type="text"
spellcheck="false"
class="nameEdit"
v-model="data.attributes.name"
@blur="editPlaylist"
@change="editPlaylist"
@keydown.enter="editPlaylist"/></div>
@keydown.enter="editPlaylist"/>
</div>
<div class="playlist-artist item-navigate"
v-if="getArtistName(data) != '' && !useArtistChip"
@click="data.attributes && data.attributes.artistName ? app.searchAndNavigate(data,'artist') : ''">
{{getArtistName(data)}}
</div>
<artist-chip v-if="useArtistChip" :item="data.relationships.artists.data[0]"></artist-chip>
<div class="playlist-desc" v-if="data.attributes.description && (data.attributes.description.standard || data.attributes.description.short)">
<div v-if="data.attributes.description.short" class="content" v-html="data.attributes.description.short"></div>
<div v-else-if="data.attributes.description.standard" class="content" v-html="data.attributes.description.standard"></div>
<artist-chip v-if="useArtistChip"
:item="data.relationships.artists.data[0]"></artist-chip>
<div class="playlist-desc"
v-if="data.attributes.description && (data.attributes.description.standard || data.attributes.description.short)">
<div v-if="data.attributes.description.short" class="content"
v-html="data.attributes.description.short"></div>
<div v-else-if="data.attributes.description.standard" class="content"
v-html="data.attributes.description.standard"></div>
<button v-if="data.attributes.description.short" class="more-btn"
@click="editorialNotesExpanded = !editorialNotesExpanded">
{{app.getLz('term.showMore')}}
@ -58,7 +64,8 @@
<div class="playlist-desc-expanded">
<div class="content"
v-html="((data.attributes.editorialNotes) ? (data.attributes.editorialNotes.standard ?? (data.attributes.editorialNotes.short ?? '') ) : (data.attributes.description ? (data.attributes.description.standard ?? (data.attributes.description.short ?? '')) : ''))"></div>
<button class="more-btn" @click="editorialNotesExpanded = !editorialNotesExpanded">{{app.getLz('term.showLess')}}
<button class="more-btn" @click="editorialNotesExpanded = !editorialNotesExpanded">
{{app.getLz('term.showLess')}}
</button>
</div>
</template>
@ -71,12 +78,16 @@
@click="app.mk.shuffleMode = 1;play()"><img class="md-ico-shuffle">
{{app.getLz('term.shuffle')}}
</button>
<button class="md-btn md-btn-icon" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true"
@click="confirmButton()"> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{ (!inLibrary) ? app.getLz('action.addToLibrary') : app.getLz("action.removeFromLibrary") }}
<button class="md-btn md-btn-icon" style="min-width: 180px;"
v-if="inLibrary!=null && confirm!=true"
@click="confirmButton()"><img
:class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{ (!inLibrary) ? app.getLz('action.addToLibrary') :
app.getLz("action.removeFromLibrary") }}
</button>
<button class="md-btn md-btn-icon" style="min-width: 180px;" v-if="confirm==true"
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
<img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{app.getLz('term.confirm')}}
</button>
<button class="more-btn-round" style="float:right;" @click="menu">
@ -91,7 +102,8 @@
</div>
</div>
<div class="floating-header" :style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
<div class="floating-header"
:style="{opacity: (headerVisible ? 0 : 1),'pointer-events': (headerVisible ? 'none' : '')}">
<div class="row">
<div class="col">
<h3>{{data.attributes ? (data.attributes.name ??
@ -107,12 +119,16 @@
@click="app.mk.shuffleMode = 1;play()"><img class="md-ico-shuffle">
{{app.getLz('term.shuffle')}}
</button>
<button class="md-btn md-btn-icon" style="min-width: 180px;" v-if="inLibrary!=null && confirm!=true"
@click="confirmButton()"> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{ (!inLibrary) ? app.getLz('action.addToLibrary') : app.getLz("action.removeFromLibrary") }}
<button class="md-btn md-btn-icon" style="min-width: 180px;"
v-if="inLibrary!=null && confirm!=true"
@click="confirmButton()"><img
:class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{ (!inLibrary) ? app.getLz('action.addToLibrary') :
app.getLz("action.removeFromLibrary") }}
</button>
<button class="md-btn md-btn-icon" style="min-width: 180px;" v-if="confirm==true"
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) "> <img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
@click="(!inLibrary) ? addToLibrary(data.attributes.playParams.id.toString()) : removeFromLibrary(data.attributes.playParams.id.toString()) ">
<img :class="(!inLibrary) ? 'md-ico-add' : 'md-ico-remove'">
{{app.getLz('term.confirm')}}
</button>
</div>
@ -129,7 +145,9 @@
<div style="width:100%">
<draggable :sort="data.attributes.canEdit && data.type == 'library-playlists'"
v-model="data.relationships.tracks.data" @start="drag=true" @end="drag=false;put()">
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index" :showIndex="true" :showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
<mediaitem-list-item :item="item" :parent="getItemParent(data)" :index="index"
:showIndex="true"
:showIndexPlaylist="(data.attributes.playParams.kind ?? data.type ?? '').includes('playlist')"
:context-ext="buildContextMenu()"
v-for="(item,index) in data.relationships.tracks.data"></mediaitem-list-item>
</draggable>
@ -157,8 +175,10 @@
style="width: 50%;">
{{data.attributes.copyright}}
</div>
<template v-if="(data.attributes?.playParams?.kind ?? data.type ?? '').includes('album') && data.relationships.catalog != null && data.relationships.catalog != null && data.relationships.catalog.data.length > 0">
<div class="playlist-time showExtended item-navigate" style="color:#fa586a; font-weight: bold" @click="app.routeView(data.relationships.catalog.data[0])">
<template
v-if="(data.attributes?.playParams?.kind ?? data.type ?? '').includes('album') && data.relationships.catalog != null && data.relationships.catalog != null && data.relationships.catalog.data.length > 0">
<div class="playlist-time showExtended item-navigate" style="color:#fa586a; font-weight: bold"
@click="app.routeView(data.relationships.catalog.data[0])">
{{$root.getLz("action.showAlbum")}}
</div>
</template>
@ -172,7 +192,8 @@
</div>
<div class="row">
<div class="col">
<mediaitem-scroller-horizontal :items="data.views[view].data"></mediaitem-scroller-horizontal>
<mediaitem-scroller-horizontal
:items="data.views[view].data"></mediaitem-scroller-horizontal>
</div>
</div>
</div>
@ -304,7 +325,8 @@
{
fetchOptions: {
method: "DELETE"
}})
}
})
this.inLibrary = false
this.confirm = false
},
@ -391,7 +413,7 @@
})
},
menu(event) {
app.showMenuPanel({
let menuItems = {
items: {
"share": {
name: app.getLz('term.share'),
@ -420,9 +442,34 @@
app.copyToClipboard(res.data.data[0].attributes.url)
})
}
},
"follow": {
name: app.getLz('action.follow'),
icon: "./assets/feather/plus-circle.svg",
hidden: false,
action: () => {
app.followArtistById(this.data.id, true)
}
},
"unfollow": {
name: app.getLz('action.unfollow'),
icon: "./assets/feather/x-circle.svg",
hidden: true,
action: () => {
app.followArtistById(this.data.id, false)
}
},
}
}
}, event)
if(app.followingArtist(this.data.id)){
menuItems.items.follow.hidden = true
menuItems.items.unfollow.hidden = false
} else {
menuItems.items.follow.hidden = false
menuItems.items.unfollow.hidden = true
}
app.showMenuPanel(menuItems, event)
},
getItemParent: function (data) {
kind = data.attributes.playParams.kind;
@ -451,13 +498,22 @@
// date = releaseDate.getDate();
// year = releaseDate.getFullYear();
let formatted = ''
try {formatted = new Intl.DateTimeFormat(this.app.cfg.general.language?.replace('_','-') ?? 'en-US', {day:'numeric',month: 'long', year: 'numeric'}).format(releaseDate);}
catch(e){
try {
formatted = new Intl.DateTimeFormat(this.app.cfg.general.language?.replace('_', '-') ?? 'en-US', {
day: 'numeric',
month: 'long',
year: 'numeric'
}).format(releaseDate);
} catch (e) {
// use the format in json instead
if (this.app.getLz('date.format') != null) {
formatted = new this.app.getLz('date.format').replace("${d}", releaseDate.getDate()).replace("${m}", releaseDate.getMonth()).replace("${y}", releaseDate.getFullYear());
} else {
formatted = new Intl.DateTimeFormat('en-US', {day:'numeric',month: 'long', year: 'numeric'}).format(releaseDate);
formatted = new Intl.DateTimeFormat('en-US', {
day: 'numeric',
month: 'long',
year: 'numeric'
}).format(releaseDate);
}
}
return prefix + formatted

View file

@ -49,10 +49,12 @@
@keydown.enter="editPlaylist"/>
</div>
<div class="playlist-artist item-navigate"
v-if="getArtistName(data) != ''"
v-if="getArtistName(data) != '' && !useArtistChip"
@click="data.attributes && data.attributes.artistName ? app.searchAndNavigate(data,'artist') : ''">
{{getArtistName(data)}}
</div>
<artist-chip v-if="useArtistChip"
:item="data.relationships.artists.data[0]"></artist-chip>
<div class="playlist-desc"
v-if="data.attributes.description && (data.attributes.description.standard || data.attributes.description.short)">
<div v-if="data.attributes.description.short" class="content"
@ -242,7 +244,8 @@
app: this.$root,
itemBadges: [],
badgesRequested: false,
headerVisible: true
headerVisible: true,
useArtistChip: false
}
},
mounted: function () {
@ -292,10 +295,11 @@
setTimeout(() => this.confirm = false, 3000);
},
getArtistName(data) {
console.log(data.attributes)
if (data.attributes.artistName) {
this.useArtistChip = true
return data.attributes.artistName
} else if (data.attributes.artist) {
this.useArtistChip = true
return data.attributes.artist.attributes.name
} else if (data.attributes.curatorName) {
return data.attributes.curatorName
@ -333,7 +337,7 @@
this.confirm = false
},
async removeFromLibrary(id) {
const params = {"fields[somgs]": "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) {
@ -433,7 +437,7 @@
})
},
menu(event) {
app.showMenuPanel({
let menuItems = {
items: {
"share": {
name: app.getLz('term.share'),
@ -462,9 +466,34 @@
app.copyToClipboard(res.data.data[0].attributes.url)
})
}
},
"follow": {
name: app.getLz('action.follow'),
icon: "./assets/feather/plus-circle.svg",
hidden: false,
action: () => {
app.followArtistById(this.data.id, true)
}
},
"unfollow": {
name: app.getLz('action.unfollow'),
icon: "./assets/feather/x-circle.svg",
hidden: true,
action: () => {
app.followArtistById(this.data.id, false)
}
},
}
}
}, event)
if(app.followingArtist(this.data.id)){
menuItems.items.follow.hidden = true
menuItems.items.unfollow.hidden = false
} else {
menuItems.items.follow.hidden = false
menuItems.items.unfollow.hidden = true
}
app.showMenuPanel(menuItems, event)
},
getItemParent: function (data) {
kind = data.attributes.playParams.kind;